From 086c044dc34dfc0f74fbe41f4ecb402b2cd34884 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Fri, 19 Apr 2024 03:13:33 +0200 Subject: Merging upstream version 125.0.1. Signed-off-by: Daniel Baumann --- toolkit/content/widgets/arrowscrollbox.js | 15 +- toolkit/content/widgets/autocomplete-input.js | 10 +- toolkit/content/widgets/autocomplete-popup.js | 6 +- .../content/widgets/autocomplete-richlistitem.js | 4 +- toolkit/content/widgets/browser-custom-element.js | 4 +- toolkit/content/widgets/datetimebox.js | 2 +- toolkit/content/widgets/dialog.js | 4 +- toolkit/content/widgets/editor.js | 6 +- toolkit/content/widgets/findbar.js | 12 +- toolkit/content/widgets/menu.js | 2 +- toolkit/content/widgets/menulist.js | 3 + toolkit/content/widgets/menupopup.js | 23 ++- .../widgets/moz-button-group/moz-button-group.mjs | 2 +- toolkit/content/widgets/moz-button/moz-button.css | 142 +++++++++++++++++ toolkit/content/widgets/moz-button/moz-button.mjs | 90 +++++++++++ .../widgets/moz-button/moz-button.stories.mjs | 100 ++++++++++++ toolkit/content/widgets/moz-input-box.js | 2 +- .../content/widgets/moz-label/README.stories.md | 4 +- toolkit/content/widgets/moz-label/moz-label.mjs | 2 +- .../widgets/moz-message-bar/moz-message-bar.mjs | 2 +- .../moz-message-bar/moz-message-bar.stories.mjs | 6 + .../widgets/moz-page-nav/moz-page-nav-button.css | 123 +++++++++++++++ .../content/widgets/moz-page-nav/moz-page-nav.css | 76 +++++++++ .../content/widgets/moz-page-nav/moz-page-nav.mjs | 170 +++++++++++++++++++++ .../widgets/moz-page-nav/moz-page-nav.stories.mjs | 77 ++++++++++ .../widgets/moz-support-link/moz-support-link.mjs | 2 +- toolkit/content/widgets/moz-toggle/moz-toggle.css | 39 ++--- toolkit/content/widgets/named-deck.js | 2 +- toolkit/content/widgets/notificationbox.js | 2 +- .../content/widgets/panel-list/README.stories.md | 22 ++- toolkit/content/widgets/panel-list/panel-list.css | 4 + toolkit/content/widgets/panel-list/panel-list.js | 59 ++++--- .../widgets/panel-list/panel-list.stories.mjs | 45 ++++-- toolkit/content/widgets/radio.js | 6 +- toolkit/content/widgets/richlistbox.js | 2 +- toolkit/content/widgets/search-textbox.js | 2 +- toolkit/content/widgets/tabbox.js | 8 +- toolkit/content/widgets/text.js | 2 +- toolkit/content/widgets/textrecognition.js | 2 +- toolkit/content/widgets/tree.js | 8 +- toolkit/content/widgets/videocontrols.js | 80 ++++------ toolkit/content/widgets/wizard.js | 2 +- 42 files changed, 993 insertions(+), 181 deletions(-) create mode 100644 toolkit/content/widgets/moz-button/moz-button.css create mode 100644 toolkit/content/widgets/moz-button/moz-button.mjs create mode 100644 toolkit/content/widgets/moz-button/moz-button.stories.mjs create mode 100644 toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css create mode 100644 toolkit/content/widgets/moz-page-nav/moz-page-nav.css create mode 100644 toolkit/content/widgets/moz-page-nav/moz-page-nav.mjs create mode 100644 toolkit/content/widgets/moz-page-nav/moz-page-nav.stories.mjs (limited to 'toolkit/content/widgets') diff --git a/toolkit/content/widgets/arrowscrollbox.js b/toolkit/content/widgets/arrowscrollbox.js index 28de96c8d7..7109891faf 100644 --- a/toolkit/content/widgets/arrowscrollbox.js +++ b/toolkit/content/widgets/arrowscrollbox.js @@ -21,7 +21,7 @@ return ` - + @@ -29,7 +29,7 @@ - + `; } @@ -43,6 +43,8 @@ this._scrollButtonDown = this.shadowRoot.getElementById("scrollbutton-down"); + MozXULElement.insertFTLIfNeeded("toolkit/global/arrowscrollbox.ftl"); + this._arrowScrollAnim = { scrollbox: this, requestHandle: 0, @@ -134,6 +136,8 @@ } this.hasConnected = true; + document.l10n.connectRoot(this.shadowRoot); + if (!this.hasAttribute("smoothscroll")) { this.smoothScroll = Services.prefs.getBoolPref( "toolkit.scrollbox.smoothScroll", @@ -639,6 +643,7 @@ this._scrollTimer.cancel(); this._scrollTimer = null; } + document.l10n.disconnectRoot(this.shadowRoot); } on_wheel(event) { @@ -749,7 +754,7 @@ } } - on_touchend(event) { + on_touchend() { this._touchStart = -1; } @@ -804,12 +809,12 @@ this._updateScrollButtonsDisabledState(); } - on_scroll(event) { + on_scroll() { this._isScrolling = true; this._updateScrollButtonsDisabledState(); } - on_scrollend(event) { + on_scrollend() { this._isScrolling = false; this._destination = 0; this._direction = 0; diff --git a/toolkit/content/widgets/autocomplete-input.js b/toolkit/content/widgets/autocomplete-input.js index 36105ba4d7..a6fb4b5067 100644 --- a/toolkit/content/widgets/autocomplete-input.js +++ b/toolkit/content/widgets/autocomplete-input.js @@ -40,7 +40,7 @@ this.addEventListener( "compositionstart", - event => { + () => { if ( this.mController.input.wrappedJSObject == this.nsIAutocompleteInput ) { @@ -52,7 +52,7 @@ this.addEventListener( "compositionend", - event => { + () => { if ( this.mController.input.wrappedJSObject == this.nsIAutocompleteInput ) { @@ -64,7 +64,7 @@ this.addEventListener( "focus", - event => { + () => { this.attachController(); if ( window.gBrowser && @@ -82,7 +82,7 @@ this.addEventListener( "blur", - event => { + () => { if (!this._dontBlur) { if (this.forceComplete && this.mController.matchCount >= 1) { // If forceComplete is requested, we need to call the enter processing @@ -625,7 +625,7 @@ return value; } - onInput(aEvent) { + onInput() { if ( !this.mIgnoreInput && this.mController.input.wrappedJSObject == this.nsIAutocompleteInput diff --git a/toolkit/content/widgets/autocomplete-popup.js b/toolkit/content/widgets/autocomplete-popup.js index f033511e07..a13ba1bc62 100644 --- a/toolkit/content/widgets/autocomplete-popup.js +++ b/toolkit/content/widgets/autocomplete-popup.js @@ -572,7 +572,7 @@ } setListeners() { - this.addEventListener("popupshowing", event => { + this.addEventListener("popupshowing", () => { // If normalMaxRows wasn't already set by the input, then set it here // so that we restore the correct number when the popup is hidden. @@ -584,14 +584,14 @@ this.mPopupOpen = true; }); - this.addEventListener("popupshown", event => { + this.addEventListener("popupshown", () => { if (this._adjustHeightOnPopupShown) { this._adjustHeightOnPopupShown = false; this.adjustHeight(); } }); - this.addEventListener("popuphiding", event => { + this.addEventListener("popuphiding", () => { var isListActive = true; if (this.selectedIndex == -1) { isListActive = false; diff --git a/toolkit/content/widgets/autocomplete-richlistitem.js b/toolkit/content/widgets/autocomplete-richlistitem.js index ccbd37e132..fddd5b4029 100644 --- a/toolkit/content/widgets/autocomplete-richlistitem.js +++ b/toolkit/content/widgets/autocomplete-richlistitem.js @@ -21,7 +21,7 @@ * This overrides listitem's mousedown handler because we want to set the * selected item even when the shift or accel keys are pressed. */ - this.addEventListener("mousedown", event => { + this.addEventListener("mousedown", () => { // Call this.control only once since it's not a simple getter. let control = this.control; if (!control || control.disabled) { @@ -587,7 +587,7 @@ /** * Override _getSearchTokens to have the Learn More text emphasized */ - _getSearchTokens(aSearch) { + _getSearchTokens() { return [this._learnMoreString.toLowerCase()]; } } diff --git a/toolkit/content/widgets/browser-custom-element.js b/toolkit/content/widgets/browser-custom-element.js index e9b29034fa..887f59c742 100644 --- a/toolkit/content/widgets/browser-custom-element.js +++ b/toolkit/content/widgets/browser-custom-element.js @@ -872,7 +872,7 @@ this.webProgress.removeProgressListener(aListener); } - onPageHide(aEvent) { + onPageHide() { // If we're browsing from the tab crashed UI to a URI that keeps // this browser non-remote, we'll handle that here. lazy.SessionStore?.maybeExitCrashedState(this); @@ -1919,7 +1919,7 @@ // Called immediately after changing remoteness. If this method returns // `true`, Gecko will assume frontend handled resuming the load, and will // not attempt to resume the load itself. - afterChangeRemoteness(browser, redirectLoadSwitchId) { + afterChangeRemoteness() { /* no-op unless replaced */ return false; } diff --git a/toolkit/content/widgets/datetimebox.js b/toolkit/content/widgets/datetimebox.js index 28b32fddfa..04ed398bd7 100644 --- a/toolkit/content/widgets/datetimebox.js +++ b/toolkit/content/widgets/datetimebox.js @@ -5,7 +5,7 @@ "use strict"; // This is a UA widget. It runs in per-origin UA widget scope, -// to be loaded by UAWidgetsChild.jsm. +// to be loaded by UAWidgetsChild.sys.mjs. /* * This is the class of entry. It will construct the actual implementation diff --git a/toolkit/content/widgets/dialog.js b/toolkit/content/widgets/dialog.js index 52eb2168f8..c4b25c2f48 100644 --- a/toolkit/content/widgets/dialog.js +++ b/toolkit/content/widgets/dialog.js @@ -146,7 +146,7 @@ if (document.readyState == "complete") { this._postLoadInit(); } else { - window.addEventListener("load", event => this._postLoadInit()); + window.addEventListener("load", () => this._postLoadInit()); } } @@ -521,7 +521,7 @@ } var btn = this.getButton(this.defaultButton); - if (btn) { + if (btn && !btn.hidden) { this._doButtonCommand(this.defaultButton); } } diff --git a/toolkit/content/widgets/editor.js b/toolkit/content/widgets/editor.js index 9e5ffb542e..8e014f77af 100644 --- a/toolkit/content/widgets/editor.js +++ b/toolkit/content/widgets/editor.js @@ -16,13 +16,13 @@ "nsIURIContentListener", "nsISupportsWeakReference", ]), - doContent(contentType, isContentPreferred, request, contentHandler) { + doContent() { return false; }, - isPreferred(contentType, desiredContentType) { + isPreferred() { return false; }, - canHandleContent(contentType, isContentPreferred, desiredContentType) { + canHandleContent() { return false; }, loadCookie: null, diff --git a/toolkit/content/widgets/findbar.js b/toolkit/content/widgets/findbar.js index 3cbce11771..cdfbd315a7 100644 --- a/toolkit/content/widgets/findbar.js +++ b/toolkit/content/widgets/findbar.js @@ -164,7 +164,7 @@ window.addEventListener("unload", this.destroy); - this._findField.addEventListener("input", event => { + this._findField.addEventListener("input", () => { // We should do nothing during composition. E.g., composing string // before converting may matches a forward word of expected word. // After that, even if user converts the composition string to the @@ -230,17 +230,17 @@ } }); - this._findField.addEventListener("blur", event => { + this._findField.addEventListener("blur", () => { // Note: This code used to remove the selection // if it matched an editable. this.browser.finder.enableSelection(); }); - this._findField.addEventListener("focus", event => { + this._findField.addEventListener("focus", () => { this._updateBrowserWithState(); }); - this._findField.addEventListener("compositionstart", event => { + this._findField.addEventListener("compositionstart", () => { // Don't close the find toolbar while IME is composing. let findbar = this; findbar._isIMEComposing = true; @@ -251,7 +251,7 @@ } }); - this._findField.addEventListener("compositionend", event => { + this._findField.addEventListener("compositionend", () => { this._isIMEComposing = false; if (this.findMode != this.FIND_NORMAL) { this._setFindCloseTimeout(); @@ -1307,7 +1307,7 @@ } } - onHighlightFinished(result) { + onHighlightFinished() { // Noop. } diff --git a/toolkit/content/widgets/menu.js b/toolkit/content/widgets/menu.js index f787747a01..1a55d799b6 100644 --- a/toolkit/content/widgets/menu.js +++ b/toolkit/content/widgets/menu.js @@ -129,7 +129,7 @@ }; // The element is used for rendering inside of , - // See SelectParentHelper.jsm. + // See SelectParentHelper.sys.mjs. class MozMenuCaption extends MozMenuBaseMixin(MozXULElement) { static get inheritedAttributes() { return { diff --git a/toolkit/content/widgets/menulist.js b/toolkit/content/widgets/menulist.js index 4e66c030f3..3672d4ccf1 100644 --- a/toolkit/content/widgets/menulist.js +++ b/toolkit/content/widgets/menulist.js @@ -289,6 +289,9 @@ } setInitialSelection() { + if (this.getAttribute("noinitialselection") === "true") { + return; + } var popup = this.menupopup; if (popup) { var arr = popup.getElementsByAttribute("selected", "true"); diff --git a/toolkit/content/widgets/menupopup.js b/toolkit/content/widgets/menupopup.js index 31801d6a33..c7448d4f05 100644 --- a/toolkit/content/widgets/menupopup.js +++ b/toolkit/content/widgets/menupopup.js @@ -11,16 +11,12 @@ "resource://gre/modules/AppConstants.sys.mjs" ); - // For the non-native context menu styling, we need to know if we need - // a gutter for checkboxes. To do this, check whether there are any - // radio/checkbox type menuitems in a menupopup when showing it. We use a - // system bubbling event listener to ensure we run *after* the "normal" - // popupshowing listeners, so (visibility) changes they make to their items - // take effect first, before we check for checkable menuitems. - Services.els.addSystemEventListener( - document, + document.addEventListener( "popupshowing", function (e) { + // For the non-native context menu styling, we need to know if we need + // a gutter for checkboxes. To do this, check whether there are any + // radio/checkbox type menuitems in a menupopup when showing it. if (e.target.nodeName == "menupopup") { let haveCheckableChild = e.target.querySelector( `:scope > menuitem:not([hidden]):is([type=checkbox],[type=radio]${ @@ -33,7 +29,10 @@ e.target.toggleAttribute("needsgutter", haveCheckableChild); } }, - false + // we use a system bubbling event listener to ensure we run *after* the + // "normal" popupshowing listeners, so (visibility) changes they make to + // their items take effect first, before we check for checkable menuitems. + { mozSystemGroup: true } ); class MozMenuPopup extends MozElements.MozElementMixin(XULPopupElement) { @@ -74,13 +73,13 @@ initShadowDOM() { // Retarget events from shadow DOM arrowscrollbox to the host. - this.scrollBox.addEventListener("scroll", ev => + this.scrollBox.addEventListener("scroll", () => this.dispatchEvent(new Event("scroll")) ); - this.scrollBox.addEventListener("overflow", ev => + this.scrollBox.addEventListener("overflow", () => this.dispatchEvent(new Event("overflow")) ); - this.scrollBox.addEventListener("underflow", ev => + this.scrollBox.addEventListener("underflow", () => this.dispatchEvent(new Event("underflow")) ); } diff --git a/toolkit/content/widgets/moz-button-group/moz-button-group.mjs b/toolkit/content/widgets/moz-button-group/moz-button-group.mjs index 0706f94762..8bf553c23d 100644 --- a/toolkit/content/widgets/moz-button-group/moz-button-group.mjs +++ b/toolkit/content/widgets/moz-button-group/moz-button-group.mjs @@ -44,7 +44,7 @@ export default class MozButtonGroup extends MozLitElement { } } - onSlotchange(e) { + onSlotchange() { for (let child of this.defaultSlotEl.assignedNodes()) { if (!(child instanceof Element)) { // Text nodes won't support classList or getAttribute. diff --git a/toolkit/content/widgets/moz-button/moz-button.css b/toolkit/content/widgets/moz-button/moz-button.css new file mode 100644 index 0000000000..47567df41d --- /dev/null +++ b/toolkit/content/widgets/moz-button/moz-button.css @@ -0,0 +1,142 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +:host { + display: inline-block; +} + +button { + appearance: none; + min-height: var(--button-min-height); + color: var(--button-text-color); + border: var(--button-border); + border-radius: var(--button-border-radius); + background-color: var(--button-background-color); + padding: var(--button-padding); + /* HTML button gets `font: -moz-button` from UA styles, + * but we want it to match the root font styling. */ + font: inherit; + font-weight: var(--button-font-weight); + /* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */ + font-size: var(--button-font-size); + width: 100%; + + &[size=small] { + min-height: var(--button-min-height-small); + font-size: var(--button-font-size-small); + } + + &:hover { + background-color: var(--button-background-color-hover); + border-color: var(--button-border-color-hover); + color: var(--button-text-color-hover); + } + + &:hover:active { + background-color: var(--button-background-color-active); + border-color: var(--button-border-color-active); + color: var(--button-text-color-active); + } + + &:disabled { + background-color: var(--button-background-color-disabled); + border-color: var(--button-border-color-disabled); + color: var(--button-text-color-disabled); + opacity: var(--button-opacity-disabled); + } + + &:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); + } + + &[type="primary"] { + background-color: var(--button-background-color-primary); + border-color: var(--button-border-color-primary); + color: var(--button-text-color-primary); + + &:hover { + background-color: var(--button-background-color-primary-hover); + border-color: var(--button-border-color-primary-hover); + color: var(--button-text-color-primary-hover); + } + + &:hover:active { + background-color: var(--button-background-color-primary-active); + border-color: var(--button-border-color-primary-active); + color: var(--button-text-color-primary-active); + } + + &:disabled { + background-color: var(--button-background-color-primary-disabled); + border-color: var(--button-border-color-primary-disabled); + color: var(--button-text-color-primary-disabled); + } + } + + &[type="destructive"] { + background-color: var(--button-background-color-destructive); + border-color: var(--button-border-color-destructive); + color: var(--button-text-color-destructive); + + &:hover { + background-color: var(--button-background-color-destructive-hover); + border-color: var(--button-border-color-destructive-hover); + color: var(--button-text-color-destructive-hover); + } + + &:hover:active { + background-color: var(--button-background-color-destructive-active); + border-color: var(--button-border-color-destructive-active); + color: var(--button-text-color-destructive-active); + } + + &:disabled { + background-color: var(--button-background-color-destructive-disabled); + border-color: var(--button-border-color-destructive-disabled); + color: var(--button-text-color-destructive-disabled); + } + } + + &[type~=ghost] { + background-color: var(--button-background-color-ghost); + border-color: var(--button-border-color-ghost); + color: var(--button-text-color-ghost); + + &:hover { + background-color: var(--button-background-color-ghost-hover); + border-color: var(--button-border-color-ghost-hover); + color: var(--button-text-color-ghost-hover); + } + + &:hover:active { + background-color: var(--button-background-color-ghost-active); + border-color: var(--button-border-color-ghost-active); + color: var(--button-text-color-ghost-active); + } + + &:disabled { + background-color: var(--button-background-color-ghost-disabled); + border-color: var(--button-border-color-ghost-disabled); + color: var(--button-text-color-ghost-disabled); + } + } + + &[type~=icon] { + background-size: var(--icon-size-default); + background-position: center; + background-repeat: no-repeat; + -moz-context-properties: fill, stroke; + fill: currentColor; + stroke: currentColor; + width: var(--button-size-icon); + height: var(--button-size-icon); + padding: var(--button-padding-icon); + + &[size=small] { + width: var(--button-size-icon-small); + height: var(--button-size-icon-small); + } + } +} diff --git a/toolkit/content/widgets/moz-button/moz-button.mjs b/toolkit/content/widgets/moz-button/moz-button.mjs new file mode 100644 index 0000000000..3e7c151e61 --- /dev/null +++ b/toolkit/content/widgets/moz-button/moz-button.mjs @@ -0,0 +1,90 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +import { html, ifDefined } from "../vendor/lit.all.mjs"; +import { MozLitElement } from "../lit-utils.mjs"; + +/** + * A button with multiple types and two sizes. + * + * @tagname moz-button + * @property {string} label - The button's label, will be overridden by slotted content. + * @property {string} type - The button type. + * Options: default, primary, destructive, icon, icon ghost, ghost. + * @property {string} size - The button size. + * Options: default, small. + * @property {boolean} disabled - The disabled state. + * @property {string} title - The button's title attribute, used in shadow DOM and therefore not as an attribute on moz-button. + * @property {string} titleAttribute - Internal, map title attribute to the title JS property. + * @property {string} tooltipText - Set the title property, the title attribute will be used first. + * @property {string} ariaLabel - The button's arial-label attribute, used in shadow DOM and therefore not as an attribute on moz-button. + * @property {string} ariaLabelAttribute - Internal, map aria-label attribute to the ariaLabel JS property. + * @property {HTMLButtonElement} buttonEl - The internal button element in the shadow DOM. + * @slot default - The button's content, overrides label property. + * @fires click - The click event. + */ +export default class MozButton extends MozLitElement { + static shadowRootOptions = { + ...MozLitElement.shadowRootOptions, + delegatesFocus: true, + }; + + static properties = { + label: { type: String, reflect: true }, + type: { type: String, reflect: true }, + size: { type: String, reflect: true }, + disabled: { type: Boolean, reflect: true }, + title: { type: String, state: true }, + titleAttribute: { type: String, attribute: "title", reflect: true }, + tooltipText: { type: String }, + ariaLabelAttribute: { + type: String, + attribute: "aria-label", + reflect: true, + }, + ariaLabel: { type: String, state: true }, + }; + + static queries = { + buttonEl: "button", + }; + + constructor() { + super(); + this.type = "default"; + this.size = "default"; + this.disabled = false; + } + + willUpdate(changes) { + if (changes.has("titleAttribute")) { + this.title = this.titleAttribute; + this.titleAttribute = null; + } + if (changes.has("ariaLabelAttribute")) { + this.ariaLabel = this.ariaLabelAttribute; + this.ariaLabelAttribute = null; + } + } + + render() { + return html` + + + `; + } +} +customElements.define("moz-button", MozButton); diff --git a/toolkit/content/widgets/moz-button/moz-button.stories.mjs b/toolkit/content/widgets/moz-button/moz-button.stories.mjs new file mode 100644 index 0000000000..52a459e807 --- /dev/null +++ b/toolkit/content/widgets/moz-button/moz-button.stories.mjs @@ -0,0 +1,100 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +import { html } from "../vendor/lit.all.mjs"; +// eslint-disable-next-line import/no-unassigned-import +import "./moz-button.mjs"; + +export default { + title: "UI Widgets/Moz Button", + component: "moz-button", + argTypes: { + l10nId: { + options: [ + "moz-button-labelled", + "moz-button-titled", + "moz-button-aria-labelled", + ], + control: { type: "select" }, + }, + size: { + options: ["default", "small"], + control: { type: "radio" }, + }, + }, + parameters: { + actions: { + handles: ["click"], + }, + status: "in-development", + fluent: ` +moz-button-labelled = Button +moz-button-primary = Primary +moz-button-destructive = Destructive +moz-button-titled = + .title = View logins +moz-button-aria-labelled = + .aria-label = View logins +`, + }, +}; + +const Template = ({ type, size, l10nId, iconUrl, disabled }) => html` + + +`; + +export const Default = Template.bind({}); +Default.args = { + type: "default", + size: "default", + l10nId: "moz-button-labelled", + iconUrl: "chrome://global/skin/icons/more.svg", + disabled: false, +}; +export const DefaultSmall = Template.bind({}); +DefaultSmall.args = { + type: "default", + size: "small", + l10nId: "moz-button-labelled", + iconUrl: "chrome://global/skin/icons/more.svg", + disabled: false, +}; +export const Primary = Template.bind({}); +Primary.args = { + ...Default.args, + type: "primary", + l10nId: "moz-button-primary", +}; +export const Destructive = Template.bind({}); +Destructive.args = { + ...Default.args, + type: "destructive", + l10nId: "moz-button-destructive", +}; +export const Icon = Template.bind({}); +Icon.args = { + ...Default.args, + type: "icon", + l10nId: "moz-button-titled", +}; +export const IconSmall = Template.bind({}); +IconSmall.args = { + ...Icon.args, + size: "small", +}; +export const IconGhost = Template.bind({}); +IconGhost.args = { + ...Icon.args, + type: "icon ghost", +}; diff --git a/toolkit/content/widgets/moz-input-box.js b/toolkit/content/widgets/moz-input-box.js index 4704db6dc5..6e7b7b3f29 100644 --- a/toolkit/content/widgets/moz-input-box.js +++ b/toolkit/content/widgets/moz-input-box.js @@ -92,7 +92,7 @@ }); if (this.spellcheck) { - this.menupopup.addEventListener("popuphiding", event => { + this.menupopup.addEventListener("popuphiding", () => { if (this.spellCheckerUI) { this.spellCheckerUI.clearSuggestionsFromMenu(); this.spellCheckerUI.clearDictionaryListFromMenu(); diff --git a/toolkit/content/widgets/moz-label/README.stories.md b/toolkit/content/widgets/moz-label/README.stories.md index a3492ebefa..f5e4e2dd14 100644 --- a/toolkit/content/widgets/moz-label/README.stories.md +++ b/toolkit/content/widgets/moz-label/README.stories.md @@ -3,10 +3,10 @@ `moz-label` is an extension of the built-in `HTMLLabelElement` that provides accesskey styling and formatting as well as some click handling logic. ```html story -