diff options
Diffstat (limited to 'toolkit/content/widgets')
26 files changed, 720 insertions, 509 deletions
diff --git a/toolkit/content/widgets/autocomplete-popup.js b/toolkit/content/widgets/autocomplete-popup.js index a13ba1bc62..8bbd012f31 100644 --- a/toolkit/content/widgets/autocomplete-popup.js +++ b/toolkit/content/widgets/autocomplete-popup.js @@ -211,24 +211,32 @@ return -1; } - var newIdx = aIndex + (aReverse ? -1 : 1) * aAmount; - if ( - (aReverse && aIndex == -1) || - (newIdx > aMaxRow && aIndex != aMaxRow) - ) { - newIdx = aMaxRow; - } else if ((!aReverse && aIndex == -1) || (newIdx < 0 && aIndex != 0)) { - newIdx = 0; - } + do { + var newIdx = aIndex + (aReverse ? -1 : 1) * aAmount; + if ( + (aReverse && aIndex == -1) || + (newIdx > aMaxRow && aIndex != aMaxRow) + ) { + newIdx = aMaxRow; + } else if ((!aReverse && aIndex == -1) || (newIdx < 0 && aIndex != 0)) { + newIdx = 0; + } - if ( - (newIdx < 0 && aIndex == 0) || - (newIdx > aMaxRow && aIndex == aMaxRow) - ) { - aIndex = -1; - } else { - aIndex = newIdx; - } + if ( + (newIdx < 0 && aIndex == 0) || + (newIdx > aMaxRow && aIndex == aMaxRow) + ) { + aIndex = -1; + } else { + aIndex = newIdx; + } + + if (aIndex == -1) { + return -1; + } + } while ( + !this.richlistbox.canUserSelect(this.richlistbox.getItemAtIndex(aIndex)) + ); return aIndex; } @@ -313,12 +321,7 @@ _collapseUnusedItems() { let existingItemsCount = this.richlistbox.children.length; for (let i = this.matchCount; i < existingItemsCount; ++i) { - let item = this.richlistbox.children[i]; - - item.collapsed = true; - if (typeof item._onCollapse == "function") { - item._onCollapse(); - } + this.richlistbox.children[i].collapsed = true; } } @@ -408,10 +411,9 @@ // The styles on the list which have different <content> structure and overrided // _adjustAcItem() are unreusable. const UNREUSEABLE_STYLES = [ - "autofill-profile", - "autofill-footer", - "autofill-clear-button", - "autofill-insecureWarning", + "autofill", + "action", + "status", "generatedPassword", "generic", "importableLearnMore", @@ -434,17 +436,14 @@ if (!reusable) { let options = null; switch (style) { - case "autofill-profile": - options = { is: "autocomplete-profile-listitem" }; - break; - case "autofill-footer": - options = { is: "autocomplete-profile-listitem-footer" }; + case "autofill": + options = { is: "autocomplete-autofill-richlistitem" }; break; - case "autofill-clear-button": - options = { is: "autocomplete-profile-listitem-clear-button" }; + case "action": + options = { is: "autocomplete-action-richlistitem" }; break; - case "autofill-insecureWarning": - options = { is: "autocomplete-creditcard-insecure-field" }; + case "status": + options = { is: "autocomplete-status-richlistitem" }; break; case "generic": options = { is: "autocomplete-two-line-richlistitem" }; diff --git a/toolkit/content/widgets/autocomplete-richlistitem.js b/toolkit/content/widgets/autocomplete-richlistitem.js index fddd5b4029..b339ab1e27 100644 --- a/toolkit/content/widgets/autocomplete-richlistitem.js +++ b/toolkit/content/widgets/autocomplete-richlistitem.js @@ -522,6 +522,11 @@ return; } + let label = this.getAttribute("ac-label"); + if (label && JSON.parse(label)?.noLearnMore) { + return; + } + let baseURL = Services.urlFormatter.formatURLPref( "app.support.baseURL" ); @@ -715,6 +720,129 @@ } } + // This type has an action that is triggered when activated. The comment + // for that result should contain a fillMessageName -- the message to send -- + // and, optionally a secondary label, for example: + // { "fillMessageName": "Fill:Clear", secondary: "Second Label" } + class MozAutocompleteActionRichlistitem extends MozAutocompleteTwoLineRichlistitem { + constructor() { + super(); + this.selectedByMouseOver = true; + } + + _adjustAcItem() { + super._adjustAcItem(); + + let comment = JSON.parse(this.getAttribute("ac-label")); + this.querySelector(".line2-label").textContent = comment?.secondary || ""; + this.querySelector(".ac-site-icon").collapsed = + this.getAttribute("ac-image") == ""; + } + } + + // A row that conveys status information assigned from the status field + // within the comment associated with the selected item in the list. + class MozAutocompleteStatusRichlistitem extends MozAutocompleteTwoLineRichlistitem { + static get markup() { + return `<div class="ac-status" xmlns="http://www.w3.org/1999/xhtml"></div>`; + } + + connectedCallback() { + super.connectedCallback(); + this.parentNode.addEventListener("select", this); + this.eventListenerParentNode = this.parentNode; + } + + disconnectedCallback() { + this.eventListenerParentNode?.removeEventListener("select", this); + this.eventListenerParentNode = null; + } + + handleEvent(event) { + if (event.type == "select") { + let selectedItem = event.target.selectedItem; + if (selectedItem) { + this.#setStatus(selectedItem); + } + } + } + + #setStatus(item) { + // For normal rows, use that row's comment, otherwise use the status's + // comment which serves as the default label. + let target = + !item || item instanceof MozAutocompleteActionRichlistitem + ? this + : item; + + let comment = JSON.parse(target.getAttribute("ac-comment")); + let statusBox = this.querySelector(".ac-status"); + statusBox.textContent = comment?.status || ""; + } + + _adjustAcItem() { + super._adjustAcItem(); + this.#setStatus(this); + this.setAttribute("disabled", "true"); + } + } + + class MozAutocompleteAutoFillRichlistitem extends MozAutocompleteTwoLineRichlistitem { + constructor() { + super(); + this.selectedByMouseOver = true; + } + + _adjustAcItem() { + let { primary, secondary, ariaLabel } = JSON.parse( + this.getAttribute("ac-value") + ); + + let line1Label = this.querySelector(".line1-label"); + line1Label.textContent = primary.toString(); + + let line2Label = this.querySelector(".line2-label"); + line2Label.textContent = secondary.toString(); + + if (ariaLabel) { + this.setAttribute("aria-label", ariaLabel); + } + + this.querySelector(".ac-site-icon").collapsed = + this.getAttribute("ac-image") == ""; + } + + set selected(val) { + if (val) { + this.setAttribute("selected", "true"); + } else { + this.removeAttribute("selected"); + } + + let { AutoCompleteParent } = ChromeUtils.importESModule( + "resource://gre/actors/AutoCompleteParent.sys.mjs" + ); + + let actor = AutoCompleteParent.getCurrentActor(); + if (!actor) { + return; + } + + let popup = actor.openedPopup; + + setTimeout(() => { + let selectedIndex = popup ? popup.selectedIndex : -1; + actor.manager + .getActor("FormAutofill") + .sendAsyncMessage("FormAutofill:PreviewProfile", { selectedIndex }); + }, 0); + } + + get selected() { + return this.getAttribute("selected") == "true"; + } + } + class MozAutocompleteGeneratedPasswordRichlistitem extends MozAutocompleteTwoLineRichlistitem { constructor() { super(); @@ -840,6 +968,14 @@ ); customElements.define( + "autocomplete-autofill-richlistitem", + MozAutocompleteAutoFillRichlistitem, + { + extends: "richlistitem", + } + ); + + customElements.define( "autocomplete-login-richlistitem", MozAutocompleteLoginRichlistitem, { @@ -848,6 +984,22 @@ ); customElements.define( + "autocomplete-action-richlistitem", + MozAutocompleteActionRichlistitem, + { + extends: "richlistitem", + } + ); + + customElements.define( + "autocomplete-status-richlistitem", + MozAutocompleteStatusRichlistitem, + { + extends: "richlistitem", + } + ); + + customElements.define( "autocomplete-generated-password-richlistitem", MozAutocompleteGeneratedPasswordRichlistitem, { diff --git a/toolkit/content/widgets/button.js b/toolkit/content/widgets/button.js index ce48fac1e9..7ca2eddbed 100644 --- a/toolkit/content/widgets/button.js +++ b/toolkit/content/widgets/button.js @@ -84,7 +84,7 @@ ).toLowerCase(); // If the accesskey of the current button is pressed, just activate it - if (this.accessKey.toLowerCase() == charPressedLower) { + if (this.accessKey?.toLowerCase() == charPressedLower) { this.click(); return; } @@ -201,7 +201,7 @@ while (iterator.nextNode()) { var test = iterator.currentNode; if ( - test.accessKey.toLowerCase() == aAccessKeyLower && + test.accessKey?.toLowerCase() == aAccessKeyLower && !test.disabled && !test.collapsed && !test.hidden diff --git a/toolkit/content/widgets/infobar.css b/toolkit/content/widgets/infobar.css index ee811818b5..7818f1ef1d 100644 --- a/toolkit/content/widgets/infobar.css +++ b/toolkit/content/widgets/infobar.css @@ -32,11 +32,8 @@ } .close { - margin-block: 4px; + margin-block: 2px; margin-inline-start: 8px; - background-size: 12px; - height: 24px; - width: 24px; align-self: flex-start; } } diff --git a/toolkit/content/widgets/mach_commands.py b/toolkit/content/widgets/mach_commands.py index 58a8b8fcda..79398ab11a 100644 --- a/toolkit/content/widgets/mach_commands.py +++ b/toolkit/content/widgets/mach_commands.py @@ -206,3 +206,16 @@ def addstory(command_context, name, project_name, path): html_lit_import=html_lit_import, ) ) + + +@Command( + "buildtokens", + category="misc", + description="Build the design tokens CSS files", +) +def buildtokens(command_context): + run_mach( + command_context, + "npm", + args=["run", "build", "--prefix=toolkit/themes/shared/design-system"], + ) diff --git a/toolkit/content/widgets/marquee.css b/toolkit/content/widgets/marquee.css index b898cd0dce..6cdb52ca02 100644 --- a/toolkit/content/widgets/marquee.css +++ b/toolkit/content/widgets/marquee.css @@ -2,25 +2,19 @@ * 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/. */ -.outerDiv { - overflow: hidden; - width: -moz-available; +slot { + display: block; + will-change: translate; } -.horizontal > .innerDiv { - width: max-content; - /* We want to create overflow of twice our available space. */ - padding: 0 100%; -} - -/* disable scrolling in contenteditable */ -:host(:read-write) .innerDiv { - padding: 0 !important; +/* Disable the animation on contenteditable */ +:host(:read-write) > slot { + translate: none !important; } /* When printing or when the user doesn't want movement, we disable scrolling */ @media print, (prefers-reduced-motion) { - .innerDiv { - padding: 0 !important; + slot { + translate: none !important; } } diff --git a/toolkit/content/widgets/marquee.js b/toolkit/content/widgets/marquee.js index 8b18703b92..a694ffdca1 100644 --- a/toolkit/content/widgets/marquee.js +++ b/toolkit/content/widgets/marquee.js @@ -4,87 +4,25 @@ "use strict"; -/* - * This is the class of entry. It will construct the actual implementation - * according to the value of the "direction" property. - */ this.MarqueeWidget = class { constructor(shadowRoot) { this.shadowRoot = shadowRoot; this.element = shadowRoot.host; - } - - /* - * Callback called by UAWidgets right after constructor. - */ - onsetup() { - this.switchImpl(); - } - - /* - * Callback called by UAWidgetsChild wheen the direction property - * changes. - */ - onchange() { - this.switchImpl(); - } - - switchImpl() { - let newImpl; - switch (this.element.direction) { - case "up": - case "down": - newImpl = MarqueeVerticalImplWidget; - break; - case "left": - case "right": - newImpl = MarqueeHorizontalImplWidget; - break; - } - - // Skip if we are asked to load the same implementation. - // This can happen if the property is set again w/o value change. - if (this.impl && this.impl.constructor == newImpl) { - return; - } - this.teardown(); - if (newImpl) { - this.impl = new newImpl(this.shadowRoot); - this.impl.onsetup(); - } - } - - teardown() { - if (!this.impl) { - return; - } - this.impl.teardown(); - this.shadowRoot.firstChild.remove(); - delete this.impl; - } -}; - -this.MarqueeBaseImplWidget = class { - constructor(shadowRoot) { - this.shadowRoot = shadowRoot; - this.element = shadowRoot.host; this.document = this.element.ownerDocument; this.window = this.document.defaultView; + // This needed for behavior=alternate, in order to know in which of the two + // directions we're going. + this.dirsign = 1; + this._currentLoop = this.element.loop; + this.animation = null; + this._restartScheduled = null; } onsetup() { - this.generateContent(); - - // Set up state. - this._currentDirection = this.element.direction || "left"; - this._currentLoop = this.element.loop; - this.dirsign = 1; - this.startAt = 0; - this.stopAt = 0; - this.newPosition = 0; - this.runId = 0; - this.originalHeight = 0; - this.invalidateCache = true; + // White-space isn't allowed because a marquee could be + // inside 'white-space: pre' + this.shadowRoot.innerHTML = `<link rel="stylesheet" href="chrome://global/content/elements/marquee.css" + /><slot></slot>`; this._mutationObserver = new this.window.MutationObserver(aMutations => this._mutationActor(aMutations) @@ -92,7 +30,7 @@ this.MarqueeBaseImplWidget = class { this._mutationObserver.observe(this.element, { attributes: true, attributeOldValue: true, - attributeFilter: ["loop", "", "behavior", "direction", "width", "height"], + attributeFilter: ["loop", "direction", "behavior"], }); // init needs to be run after the page has loaded in order to calculate @@ -108,12 +46,13 @@ this.MarqueeBaseImplWidget = class { } teardown() { + this.doStop(); this._mutationObserver.disconnect(); - this.window.clearTimeout(this.runId); this.window.removeEventListener("load", this); this.shadowRoot.removeEventListener("marquee-start", this); this.shadowRoot.removeEventListener("marquee-stop", this); + this.shadowRoot.replaceChildren(); } handleEvent(aEvent) { @@ -131,15 +70,26 @@ this.MarqueeBaseImplWidget = class { case "marquee-stop": this.doStop(); break; + case "finish": + this._animationFinished(); + break; } } - get outerDiv() { - return this.shadowRoot.firstChild; - } - - get innerDiv() { - return this.shadowRoot.getElementById("innerDiv"); + _animationFinished() { + let behavior = this.element.behavior; + let shouldLoop = + this._currentLoop > 1 || (this._currentLoop == -1 && behavior != "slide"); + if (shouldLoop) { + if (this._currentLoop > 0) { + this._currentLoop--; + } + if (behavior == "alternate") { + this.dirsign = -this.dirsign; + } + this.doStop(); + this.doStart(); + } } get scrollDelayWithTruespeed() { @@ -149,269 +99,249 @@ this.MarqueeBaseImplWidget = class { return this.element.scrollDelay; } - doStart() { - if (this.runId == 0) { - var lambda = () => this._doMove(false); - this.runId = this.window.setTimeout( - lambda, - this.scrollDelayWithTruespeed - this._deltaStartStop - ); - this._deltaStartStop = 0; - } - } - - doStop() { - if (this.runId != 0) { - this._deltaStartStop = Date.now() - this._lastMoveDate; - this.window.clearTimeout(this.runId); - } - - this.runId = 0; + get slot() { + return this.shadowRoot.lastChild; } - _fireEvent(aName, aBubbles, aCancelable) { - var e = this.document.createEvent("Events"); - e.initEvent(aName, aBubbles, aCancelable); - this.element.dispatchEvent(e); + /** + * Computes CSS-derived values needed to compute the transform of the + * contents. + * + * In particular, it measures the auto width and height of the contents, + * and the effective width and height of the marquee itself, along with its + * css directionality (which affects the effective direction). + */ + getMetrics() { + let slot = this.slot; + slot.style.width = "max-content"; + let slotCS = this.window.getComputedStyle(slot); + let marqueeCS = this.window.getComputedStyle(this.element); + let contentWidth = parseFloat(slotCS.width) || 0; + let contentHeight = parseFloat(slotCS.height) || 0; + let marqueeWidth = parseFloat(marqueeCS.width) || 0; + let marqueeHeight = parseFloat(marqueeCS.height) || 0; + slot.style.width = ""; + return { + contentWidth, + contentHeight, + marqueeWidth, + marqueeHeight, + cssDirection: marqueeCS.direction, + }; } - _doMove(aResetPosition) { - this._lastMoveDate = Date.now(); - - // invalidateCache is true at first load and whenever an attribute - // is changed - if (this.invalidateCache) { - this.invalidateCache = false; // we only want this to run once every scroll direction change - - var corrvalue = 0; - - switch (this._currentDirection) { - case "up": - case "down": { - let height = this.window.getComputedStyle(this.element).height; - this.outerDiv.style.height = height; - if (this.originalHeight > this.outerDiv.offsetHeight) { - corrvalue = this.originalHeight - this.outerDiv.offsetHeight; + /** + * Gets the layout metrics from getMetrics(), and returns an object + * describing the start, end, and axis of the animation for the given marquee + * behavior and direction. + */ + getTransformParameters({ + contentWidth, + contentHeight, + marqueeWidth, + marqueeHeight, + cssDirection, + }) { + const innerWidth = marqueeWidth - contentWidth; + const innerHeight = marqueeHeight - contentHeight; + const dir = this.element.direction; + + let start = 0; + let end = 0; + const axis = dir == "up" || dir == "down" ? "y" : "x"; + switch (this.element.behavior) { + case "alternate": + switch (dir) { + case "up": + case "down": { + if (innerHeight >= 0) { + start = innerHeight; + end = 0; + } else { + start = 0; + end = innerHeight; + } + if (dir == "down") { + [start, end] = [end, start]; + } + if (this.dirsign == -1) { + [start, end] = [end, start]; + } + break; } - this.innerDiv.style.padding = height + " 0"; - let isUp = this._currentDirection == "up"; - if (isUp) { - this.dirsign = 1; - this.startAt = - this.element.behavior == "alternate" - ? this.originalHeight - corrvalue - : 0; - this.stopAt = - this.element.behavior == "alternate" || - this.element.behavior == "slide" - ? parseInt(height) + corrvalue - : this.originalHeight + parseInt(height); - } else { - this.dirsign = -1; - this.startAt = - this.element.behavior == "alternate" - ? parseInt(height) + corrvalue - : this.originalHeight + parseInt(height); - this.stopAt = - this.element.behavior == "alternate" || - this.element.behavior == "slide" - ? this.originalHeight - corrvalue - : 0; + case "right": + case "left": + default: { + if (innerWidth >= 0) { + start = innerWidth; + end = 0; + } else { + start = 0; + end = innerWidth; + } + if (dir == "right") { + [start, end] = [end, start]; + } + if (cssDirection == "rtl") { + [start, end] = [end, start]; + } + if (this.dirsign == -1) { + [start, end] = [end, start]; + } + break; } - break; } - case "left": - case "right": - default: { - let isRight = this._currentDirection == "right"; - // NOTE: It's important to use getComputedStyle() to not account for the padding. - let innerWidth = parseInt( - this.window.getComputedStyle(this.innerDiv).width - ); - if (innerWidth > this.outerDiv.offsetWidth) { - corrvalue = innerWidth - this.outerDiv.offsetWidth; + break; + case "slide": + switch (dir) { + case "up": { + start = marqueeHeight; + end = 0; + break; } - let rtl = - this.window.getComputedStyle(this.element).direction == "rtl"; - if (isRight != rtl) { - this.dirsign = -1; - this.stopAt = - this.element.behavior == "alternate" || - this.element.behavior == "slide" - ? innerWidth - corrvalue - : 0; - this.startAt = - this.outerDiv.offsetWidth + - (this.element.behavior == "alternate" - ? corrvalue - : innerWidth + this.stopAt); - } else { - this.dirsign = 1; - this.startAt = - this.element.behavior == "alternate" ? innerWidth - corrvalue : 0; - this.stopAt = - this.outerDiv.offsetWidth + - (this.element.behavior == "alternate" || - this.element.behavior == "slide" - ? corrvalue - : innerWidth + this.startAt); + case "down": { + start = -contentHeight; + end = innerHeight; + break; } - if (rtl) { - this.startAt = -this.startAt; - this.stopAt = -this.stopAt; - this.dirsign = -this.dirsign; + case "right": + default: { + let isRight = dir == "right"; + if (cssDirection == "rtl") { + isRight = !isRight; + } + if (isRight) { + start = -contentWidth; + end = innerWidth; + } else { + start = marqueeWidth; + end = 0; + } + break; } - break; } - } - - if (aResetPosition) { - this.newPosition = this.startAt; - this._fireEvent("start", false, false); - } - } // end if - - this.newPosition = - this.newPosition + this.dirsign * this.element.scrollAmount; - - if ( - (this.dirsign == 1 && this.newPosition > this.stopAt) || - (this.dirsign == -1 && this.newPosition < this.stopAt) - ) { - switch (this.element.behavior) { - case "alternate": - // lets start afresh - this.invalidateCache = true; - - // swap direction - const swap = { left: "right", down: "up", up: "down", right: "left" }; - this._currentDirection = swap[this._currentDirection] || "left"; - this.newPosition = this.stopAt; - - if ( - this._currentDirection == "up" || - this._currentDirection == "down" - ) { - this.outerDiv.scrollTop = this.newPosition; - } else { - this.outerDiv.scrollLeft = this.newPosition; - } - - if (this._currentLoop != 1) { - this._fireEvent("bounce", false, true); - } - break; - - case "slide": - if (this._currentLoop > 1) { - this.newPosition = this.startAt; + break; + case "scroll": + default: + switch (dir) { + case "up": + case "down": { + start = marqueeHeight; + end = -contentHeight; + if (dir == "down") { + [start, end] = [end, start]; + } + break; } - break; - - default: - this.newPosition = this.startAt; - - if ( - this._currentDirection == "up" || - this._currentDirection == "down" - ) { - this.outerDiv.scrollTop = this.newPosition; - } else { - this.outerDiv.scrollLeft = this.newPosition; + case "right": + case "left": + default: { + start = marqueeWidth; + end = -contentWidth; + if (dir == "right") { + [start, end] = [end, start]; + } + if (cssDirection == "rtl") { + [start, end] = [end, start]; + } + break; } + } + break; + } + return { start, end, axis }; + } - // dispatch start event, even when this._currentLoop == 1, comp. with IE6 - this._fireEvent("start", false, false); + /** + * Measures the marquee contents, and starts the marquee animation if needed. + * The translate animation is applied to the <slot> element. + * Bouncing and looping is implemented in the finish event handler for the + * given animation (see _animationFinished()). + */ + doStart() { + if (this.animation) { + return; + } + let scrollAmount = this.element.scrollAmount; + if (!scrollAmount) { + return; + } + let metrics = this.getMetrics(); + let { axis, start, end } = this.getTransformParameters(metrics); + let duration = + (Math.abs(end - start) * this.scrollDelayWithTruespeed) / scrollAmount; + let startValue = start + "px"; + let endValue = end + "px"; + if (axis == "y") { + startValue = "0 " + startValue; + endValue = "0 " + endValue; + } + // NOTE(emilio): It seems tempting to use `iterations` here, but doing so + // wouldn't be great because this uses current layout values (via + // getMetrics()), so sizes wouldn't update. This way we update once per + // animation iteration. + // + // fill: forwards is needed so that behavior=slide doesn't jump back to the + // start after the animation finishes. + this.animation = this.slot.animate( + { + translate: [startValue, endValue], + }, + { + duration, + easing: "linear", + fill: "forwards", } + ); + this.animation.addEventListener("finish", this, { once: true }); + } - if (this._currentLoop > 1) { - this._currentLoop--; - } else if (this._currentLoop == 1) { - if ( - this._currentDirection == "up" || - this._currentDirection == "down" - ) { - this.outerDiv.scrollTop = this.stopAt; - } else { - this.outerDiv.scrollLeft = this.stopAt; - } - this.element.stop(); - this._fireEvent("finish", false, true); - return; - } - } else if ( - this._currentDirection == "up" || - this._currentDirection == "down" - ) { - this.outerDiv.scrollTop = this.newPosition; - } else { - this.outerDiv.scrollLeft = this.newPosition; + doStop() { + if (!this.animation) { + return; } - - var myThis = this; - var lambda = function myTimeOutFunction() { - myThis._doMove(false); - }; - this.runId = this.window.setTimeout(lambda, this.scrollDelayWithTruespeed); + if (this._restartScheduled) { + this.window.cancelAnimationFrame(this._restartScheduled); + this._restartScheduled = null; + } + this.animation.removeEventListener("finish", this); + this.animation.cancel(); + this.animation = null; } init() { this.element.stop(); - - if (this._currentDirection == "up" || this._currentDirection == "down") { - // store the original height before we add padding - this.innerDiv.style.padding = 0; - this.originalHeight = this.innerDiv.offsetHeight; - } - - this._doMove(true); + this.doStart(); } _mutationActor(aMutations) { while (aMutations.length) { - var mutation = aMutations.shift(); - var attrName = mutation.attributeName.toLowerCase(); - var oldValue = mutation.oldValue; - var target = mutation.target; - var newValue = target.getAttribute(attrName); - - if (oldValue != newValue) { - this.invalidateCache = true; - switch (attrName) { - case "loop": - this._currentLoop = target.loop; - break; - case "direction": - this._currentDirection = target.direction; - break; - } + let mutation = aMutations.shift(); + let attrName = mutation.attributeName.toLowerCase(); + let oldValue = mutation.oldValue; + let newValue = this.element.getAttribute(attrName); + if (oldValue == newValue) { + continue; + } + if (attrName == "loop") { + this._currentLoop = this.element.loop; + } + if (attrName == "direction" || attrName == "behavior") { + this._scheduleRestartIfNeeded(); } } } -}; - -this.MarqueeHorizontalImplWidget = class extends MarqueeBaseImplWidget { - generateContent() { - // White-space isn't allowed because a marquee could be - // inside 'white-space: pre' - this.shadowRoot.innerHTML = `<div class="outerDiv horizontal" - ><link rel="stylesheet" href="chrome://global/content/elements/marquee.css" - /><div class="innerDiv" id="innerDiv" - ><slot - /></div - ></div>`; - } -}; -this.MarqueeVerticalImplWidget = class extends MarqueeBaseImplWidget { - generateContent() { - // White-space isn't allowed because a marquee could be - // inside 'white-space: pre' - this.shadowRoot.innerHTML = `<div class="outerDiv vertical" - ><link rel="stylesheet" href="chrome://global/content/elements/marquee.css" - /><div class="innerDiv" id="innerDiv" - ><slot - /></div - ></div>`; + // Schedule a restart with the new parameters if we're running. + _scheduleRestartIfNeeded() { + if (!this.animation || this._restartScheduled != null) { + return; + } + this._restartScheduled = this.window.requestAnimationFrame(() => { + if (this.animation) { + this.doStop(); + this.doStart(); + } + }); } }; diff --git a/toolkit/content/widgets/menu.js b/toolkit/content/widgets/menu.js index 1a55d799b6..70b9521a27 100644 --- a/toolkit/content/widgets/menu.js +++ b/toolkit/content/widgets/menu.js @@ -19,7 +19,7 @@ this.setAttribute("value", val); } get value() { - return this.getAttribute("value"); + return this.getAttribute("value") || ""; } // nsIDOMXULSelectControlItemElement diff --git a/toolkit/content/widgets/menulist.js b/toolkit/content/widgets/menulist.js index 3672d4ccf1..c7bff9c9d0 100644 --- a/toolkit/content/widgets/menulist.js +++ b/toolkit/content/widgets/menulist.js @@ -124,8 +124,6 @@ this.shadowRoot.appendChild(document.createElement("slot")); } - this.mSelectedInternal = null; - this.mAttributeObserver = null; this.setInitialSelection(); } @@ -153,7 +151,7 @@ // nsIDOMXULSelectControlElement get value() { - return this.getAttribute("value"); + return this.getAttribute("value") || ""; } // nsIDOMXULMenuListElement @@ -163,12 +161,12 @@ // nsIDOMXULMenuListElement get image() { - return this.getAttribute("image"); + return this.getAttribute("image") || ""; } // nsIDOMXULMenuListElement get label() { - return this.getAttribute("label"); + return this.getAttribute("label") || ""; } set description(val) { @@ -176,7 +174,7 @@ } get description() { - return this.getAttribute("description"); + return this.getAttribute("description") || ""; } // nsIDOMXULMenuListElement @@ -292,6 +290,10 @@ if (this.getAttribute("noinitialselection") === "true") { return; } + + this.mSelectedInternal = null; + this.mAttributeObserver = null; + var popup = this.menupopup; if (popup) { var arr = popup.getElementsByAttribute("selected", "true"); diff --git a/toolkit/content/widgets/moz-button/moz-button.css b/toolkit/content/widgets/moz-button/moz-button.css index 47567df41d..71d57ea93a 100644 --- a/toolkit/content/widgets/moz-button/moz-button.css +++ b/toolkit/content/widgets/moz-button/moz-button.css @@ -4,6 +4,8 @@ :host { display: inline-block; + height: fit-content; + width: fit-content; } button { @@ -133,6 +135,7 @@ button { width: var(--button-size-icon); height: var(--button-size-icon); padding: var(--button-padding-icon); + color: var(--icon-color); &[size=small] { width: 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 index 3e7c151e61..a951dbf5d8 100644 --- a/toolkit/content/widgets/moz-button/moz-button.mjs +++ b/toolkit/content/widgets/moz-button/moz-button.mjs @@ -68,6 +68,11 @@ export default class MozButton extends MozLitElement { } } + // Delegate clicks on host to the button element. + click() { + this.buttonEl.click(); + } + render() { return html` <link diff --git a/toolkit/content/widgets/moz-card/moz-card.css b/toolkit/content/widgets/moz-card/moz-card.css index 52c0ac0980..da5656e53e 100644 --- a/toolkit/content/widgets/moz-card/moz-card.css +++ b/toolkit/content/widgets/moz-card/moz-card.css @@ -7,7 +7,7 @@ --card-border-radius: var(--border-radius-medium); --card-border-width: var(--border-width); --card-border: var(--card-border-width) solid var(--card-border-color); - --card-background-color: var(--box-background-color); + --card-background-color: var(--background-color-box); --card-focus-outline: var(--focus-outline); --card-box-shadow: var(--box-shadow-10); /* Bug 1791816, 1839523: replace with spacing tokens */ @@ -17,9 +17,9 @@ /* Bug 1791816: replace with button tokens */ @media (prefers-contrast) { - --button-border-color: var(--border-interactive-color); - --button-border-color-hover: var(--border-interactive-color-hover); - --button-border-color-active: var(--border-interactive-color-active); + --button-border-color: var(--border-color-interactive); + --button-border-color-hover: var(--border-color-interactive-hover); + --button-border-color-active: var(--border-color-interactive-active); --card-border-color: color-mix(in srgb, currentColor 41%, transparent); } /* Bug 1791816: replace with button tokens */ @@ -27,9 +27,9 @@ --button-background-color: ButtonFace; --button-background-color-hover: SelectedItemText; --button-background-color-active: SelectedItemText; - --button-border-color: var(--border-interactive-color); - --button-border-color-hover: var(--border-interactive-color-hover); - --button-border-color-active: var(--border-interactive-color-active); + --button-border-color: var(--border-color-interactive); + --button-border-color-hover: var(--border-color-interactive-hover); + --button-border-color-active: var(--border-color-interactive-active); --button-text-color: ButtonText; --button-text-color-hover: SelectedItem; --button-text-color-active: SelectedItem; @@ -81,6 +81,29 @@ summary { gap: var(--card-gap); padding-inline: var(--card-padding); border-radius: var(--card-border-radius); + + .chevron-icon { + background-image: url("chrome://global/skin/icons/arrow-down.svg"); + + details[open] & { + background-image: url("chrome://global/skin/icons/arrow-up.svg"); + } + } + + .chevron-icon, + #heading-icon { + background-position: center; + background-repeat: no-repeat; + -moz-context-properties: fill; + fill: currentColor; + width: 24px; + height: 24px; + min-width: 24px; + min-height: 24px; + padding: 0; + flex-shrink: 0; + align-self: flex-start; + } } #heading { @@ -159,22 +182,3 @@ details { outline: var(--card-focus-outline); } } - -.chevron-icon { - background-image: url("chrome://global/skin/icons/arrow-down.svg"); - background-position: center; - background-repeat: no-repeat; - -moz-context-properties: fill; - fill: currentColor; - width: 24px; - height: 24px; - min-width: 24px; - min-height: 24px; - padding: 0; - flex-shrink: 0; - align-self: flex-start; - - details[open] & { - background-image: url("chrome://global/skin/icons/arrow-up.svg"); - } -} diff --git a/toolkit/content/widgets/moz-card/moz-card.mjs b/toolkit/content/widgets/moz-card/moz-card.mjs index 2bd6e0f987..5687608975 100644 --- a/toolkit/content/widgets/moz-card/moz-card.mjs +++ b/toolkit/content/widgets/moz-card/moz-card.mjs @@ -3,7 +3,11 @@ * 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 "chrome://global/content/vendor/lit.all.mjs"; +import { + html, + ifDefined, + when, +} from "chrome://global/content/vendor/lit.all.mjs"; import { MozLitElement } from "chrome://global/content/lit-utils.mjs"; /** @@ -18,6 +22,7 @@ import { MozLitElement } from "chrome://global/content/lit-utils.mjs"; * * * @property {string} heading - The heading text that will be used for the card. + * @property {string} icon - (optional) A flag to indicate the header should include an icon * @property {string} type - (optional) The type of card. No type specified * will be the default card. The other available type is "accordion" * @slot content - The content to show inside of the card. @@ -31,6 +36,7 @@ export default class MozCard extends MozLitElement { static properties = { heading: { type: String }, + icon: { type: Boolean }, type: { type: String, reflect: true }, expanded: { type: Boolean }, }; @@ -47,9 +53,15 @@ export default class MozCard extends MozLitElement { } return html` <div id="heading-wrapper"> - ${this.type == "accordion" - ? html` <div class="chevron-icon"></div>` - : ""} + ${when( + this.type == "accordion", + () => html`<div class="chevron-icon"></div>` + )} + ${when( + this.icon, + () => + html`<div part="icon" id="heading-icon" role="presentation"></div>` + )} <span id="heading">${this.heading}</span> </div> `; diff --git a/toolkit/content/widgets/moz-card/moz-card.stories.mjs b/toolkit/content/widgets/moz-card/moz-card.stories.mjs index da3279b2a4..0430956a52 100644 --- a/toolkit/content/widgets/moz-card/moz-card.stories.mjs +++ b/toolkit/content/widgets/moz-card/moz-card.stories.mjs @@ -3,7 +3,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ // eslint-disable-next-line import/no-unresolved -import { html, ifDefined } from "lit.all.mjs"; +import { classMap, html, ifDefined } from "lit.all.mjs"; // eslint-disable-next-line import/no-unassigned-import import "./moz-card.mjs"; @@ -15,6 +15,8 @@ export default { fluent: ` moz-card-heading = .heading = This is the label +moz-card-heading-with-icon = + .heading = This is a card with a heading icon `, }, argTypes: { @@ -22,13 +24,27 @@ moz-card-heading = options: ["default", "accordion"], control: { type: "select" }, }, + hasHeadingIcon: { + options: [true, false], + control: { type: "select" }, + }, }, }; -const Template = ({ l10nId, content, type }) => html` - <main style="max-width: 400px"> +const Template = ({ l10nId, content, type, hasHeadingIcon }) => html` + <style> + main { + max-width: 400px; + } + moz-card.headingWithIcon::part(icon) { + background-image: url("chrome://browser/skin/preferences/category-general.svg"); + } + </style> + <main> <moz-card type=${ifDefined(type)} + ?icon=${hasHeadingIcon} + class=${classMap({ headingWithIcon: hasHeadingIcon })} data-l10n-id=${ifDefined(l10nId)} data-l10n-attrs="heading" > @@ -86,3 +102,13 @@ CardTypeAccordion.parameters = { }, }, }; + +export const CardWithHeadingIcon = Template.bind({}); +CardWithHeadingIcon.args = { + l10nId: "moz-card-heading-with-icon", + content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nunc velit turpis, mollis a ultricies vitae, accumsan ut augue. + In a eros ac dolor hendrerit varius et at mauris.`, + type: "default", + hasHeadingIcon: true, +}; diff --git a/toolkit/content/widgets/moz-message-bar/moz-message-bar.css b/toolkit/content/widgets/moz-message-bar/moz-message-bar.css index 6d35009982..fa7b08612d 100644 --- a/toolkit/content/widgets/moz-message-bar/moz-message-bar.css +++ b/toolkit/content/widgets/moz-message-bar/moz-message-bar.css @@ -6,14 +6,7 @@ /* Icon */ --message-bar-icon-color: var(--icon-color-information); --message-bar-icon-size: var(--size-item-small); - --message-bar-icon-close-color: var(--icon-color); - --message-bar-icon-close-url: url("chrome://global/skin/icons/close-12.svg"); - - /* Button */ - --message-bar-button-size-ghost: var(--button-min-height); - --message-bar-button-border-radius-ghost: var(--button-border-radius); - --message-bar-button-background-color-ghost-hover: var(--button-background-color-hover); - --message-bar-button-background-color-ghost-active: var(--button-background-color-active); + --message-bar-icon-close-url: url("chrome://global/skin/icons/close.svg"); /* Container */ --message-bar-container-min-height: var(--size-item-large); @@ -28,12 +21,13 @@ --message-bar-text-line-height: 1.5em; /* Background */ - --message-bar-background-color: var(--color-background-information); + --message-bar-background-color: var(--background-color-information); background-color: var(--message-bar-background-color); border: var(--message-bar-border-width) solid var(--message-bar-border-color); border-radius: var(--message-bar-border-radius); color: var(--message-bar-text-color); + text-align: start; } @media (prefers-contrast) { @@ -144,31 +138,8 @@ /* Close icon styles */ -.close { +moz-button::part(button) { background-image: var(--message-bar-icon-close-url); - background-repeat: no-repeat; - background-position: center center; - -moz-context-properties: fill; - fill: currentColor; - min-width: auto; - min-height: auto; - width: var(--message-bar-button-size-ghost); - height: var(--message-bar-button-size-ghost); - margin: 0; - padding: 0; - flex-shrink: 0; -} - -.ghost-button { - border-radius: var(--message-bar-button-border-radius-ghost); -} - -.ghost-button:enabled:hover { - background-color: var(--message-bar-button-background-color-ghost-hover); -} - -.ghost-button:enabled:hover:active { - background-color: var(--message-bar-button-background-color-ghost-active); } @media not (prefers-contrast) { @@ -176,7 +147,7 @@ /* Colors from: https://www.figma.com/file/zd3B9UyknB2XNZNdrYLm2W/Outreachy?type=design&node-id=59-1921&mode=design&t=ZYS4e6pAbAlXGvun-4 */ :host([type=warning]) { - --message-bar-background-color: var(--color-background-warning); + --message-bar-background-color: var(--background-color-warning); .icon { --message-bar-icon-color: var(--icon-color-warning); @@ -184,7 +155,7 @@ } :host([type=success]) { - --message-bar-background-color: var(--color-background-success); + --message-bar-background-color: var(--background-color-success); .icon { --message-bar-icon-color: var(--icon-color-success); @@ -193,19 +164,10 @@ :host([type=error]), :host([type=critical]) { - --message-bar-background-color: var(--color-background-critical); + --message-bar-background-color: var(--background-color-critical); .icon { --message-bar-icon-color: var(--icon-color-critical); } } - - .close { - fill: var(--message-bar-icon-close-color); - } - - .ghost-button { - border: none; - background-color: transparent; - } } diff --git a/toolkit/content/widgets/moz-message-bar/moz-message-bar.mjs b/toolkit/content/widgets/moz-message-bar/moz-message-bar.mjs index d83de5d29f..8f0c997149 100644 --- a/toolkit/content/widgets/moz-message-bar/moz-message-bar.mjs +++ b/toolkit/content/widgets/moz-message-bar/moz-message-bar.mjs @@ -4,6 +4,8 @@ import { html, ifDefined } from "../vendor/lit.all.mjs"; import { MozLitElement } from "../lit-utils.mjs"; +// eslint-disable-next-line import/no-unassigned-import +import "chrome://global/content/elements/moz-button.mjs"; const messageTypeToIconData = { info: { @@ -41,7 +43,7 @@ const messageTypeToIconData = { * @property {string} messageL10nArgs - Any args needed for the message l10n ID. * @fires message-bar:close * Custom event indicating that message bar was closed. - * @fires message-bar:user-dismissed + * @fires message-bar:user-dismissed * Custom event indicating that message bar was dismissed by the user. */ @@ -49,7 +51,7 @@ export default class MozMessageBar extends MozLitElement { static queries = { actionsSlotEl: "slot[name=actions]", actionsEl: ".actions", - closeButtonEl: "button.close", + closeButtonEl: "moz-button.close", supportLinkSlotEl: "slot[name=support-link]", }; @@ -113,14 +115,16 @@ export default class MozMessageBar extends MozLitElement { return ""; } - closeButtonTemplate() { + closeButtonTemplate({ size } = {}) { if (this.dismissable) { return html` - <button - class="close ghost-button" + <moz-button + type="icon ghost" + class="close" + size=${ifDefined(size)} data-l10n-id="moz-message-bar-close-button" @click=${this.dismiss} - ></button> + ></moz-button> `; } return ""; diff --git a/toolkit/content/widgets/moz-page-nav/README.stories.md b/toolkit/content/widgets/moz-page-nav/README.stories.md new file mode 100644 index 0000000000..800d446478 --- /dev/null +++ b/toolkit/content/widgets/moz-page-nav/README.stories.md @@ -0,0 +1,98 @@ +# MozPageNav + +`moz-page-nav` is a grouping of navigation buttons that is displayed at the page level, +intended to change the selected view, provide a heading, and have links to external resources. + +```html story +<moz-page-nav heading="This is a nav" style={{ '--page-nav-margin-top': 0, '--page-nav-margin-bottom': 0, height: '200px' }}> + <moz-page-nav-button + view="view-one" + iconSrc="chrome://browser/skin/preferences/category-general.svg" + > + <p style={{ margin: 0 }}>Test 1</p> + </moz-page-nav-button> + <moz-page-nav-button + view="view-two" + iconSrc="chrome://browser/skin/preferences/category-general.svg" + > + <p style={{ margin: 0 }}>Test 2</p> + </moz-page-nav-button> + <moz-page-nav-button + view="view-three" + iconSrc="chrome://browser/skin/preferences/category-general.svg" + > + <p style={{ margin: 0 }}>Test 3</p> + </moz-page-nav-button> +</moz-page-nav> +``` + +## When to use + +* Use moz-page-nav for single-page navigation to switch between different views. +* moz-page-nav will also support footer buttons for external support links in the future (See [bug 1877826](https://bugzilla.mozilla.org/show_bug.cgi?id=1877826)) +* This component will be used in about: pages such as about:firefoxview, about:preferences, about:addons, about:debugging, etc. + +## When not to use + +* If you need a navigation menu that does not switch between views within a single page + +## Code + +The source for `moz-page-nav` and `moz-page-nav-button` can be found under +[toolkit/content/widgets/moz-page-nav](https://searchfox.org/mozilla-central/source/toolkit/content/widgets/moz-page-nav). +You can find an examples of `moz-page-nav` in use in the Firefox codebase in +[about:firefoxview](https://searchfox.org/mozilla-central/source/browser/components/firefoxview/firefoxview.html#52-87). + +`moz-page-nav` can be imported into `.html`/`.xhtml` files: + +```html +<script type="module" src="chrome://global/content/elements/moz-page-nav.mjs"></script> +``` + +And used as follows: + +```html +<moz-page-nav> + <moz-page-nav-button + view="A name for the first view" + iconSrc="A url for the icon for the first navigation button"> + </moz-page-nav-button> + <moz-page-nav-button + view="A name for the second view" + iconSrc="A url for the icon for the second navigation button"> + </moz-page-nav-button> + <moz-page-nav-button + view="A name for the third view" + iconSrc="A url for the icon for the third navigation button"> + </moz-page-nav-button> +</moz-page-nav> +``` + +### Fluent usage + +Generally the `heading` property of +`moz-page-nav` will be provided via [Fluent attributes](https://mozilla-l10n.github.io/localizer-documentation/tools/fluent/basic_syntax.html#attributes). +To get this working you will need to specify a `data-l10n-id` as well as +`data-l10n-attrs` if you're providing a heading: + +```html +<moz-page-nav data-l10n-id="with-heading" + data-l10n-attrs="heading"></moz-page-nav> +``` + +In which case your Fluent messages will look something like this: + +``` +with-heading = + .heading = Heading text goes here +``` + +You also need to specify a `data-l10n-id` for each `moz-page-nav-button`: + +```html +<moz-page-nav-button data-l10n-id="with-button-text"></moz-page-nav-button> +``` + +``` +with-button-text = button text goes here +``` diff --git a/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css b/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css index 2975bb1a7c..5d00198d65 100644 --- a/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css +++ b/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css @@ -13,7 +13,7 @@ button { background-color: var(--page-nav-button-background-color); border: 1px solid var(--page-nav-border-color); -moz-context-properties: fill, fill-opacity; - fill: currentColor; + fill: var(--icon-color); display: grid; grid-template-columns: min-content 1fr; gap: 12px; @@ -34,34 +34,35 @@ button:hover { @media not (prefers-contrast) { button { - border-inline-start: 2px solid transparent; - border-inline-end: none; - border-block: none; + position: relative; } - button:hover, - button[selected]:hover { - background-color: var(--page-nav-button-background-color-hover); + button::before { + content: ""; + display: block; + position: absolute; + inset-block: 0; + inset-inline-start: 0; + width: 2px; + background-color: transparent; } - button[selected]:hover { - border-inline-start-color: inherit; + button[selected]::before { + background-color: var(--color-accent-primary); } - button[selected], - button[selected]:hover { - border-inline-start: 2px solid; + button[selected]:hover::before { + background-color: var(--icon-color); } - button[selected]:not(:focus-visible) { - border-start-start-radius: 0; - border-end-start-radius: 0; + button:hover, + button[selected]:hover { + background-color: var(--page-nav-button-background-color-hover); } button[selected]:not(:hover) { color: var(--color-accent-primary); background-color: color-mix(in srgb, var(--page-nav-button-background-color-selected) 5%, transparent); - border-inline-start-color: var(--color-accent-primary); } } @@ -74,7 +75,7 @@ button:hover { button:focus-visible, button[selected]:focus-visible { outline: var(--focus-outline); - outline-offset: var(--focus-outline-offset); + outline-offset: 0; border-radius: var(--border-radius-small); } diff --git a/toolkit/content/widgets/moz-page-nav/moz-page-nav.css b/toolkit/content/widgets/moz-page-nav/moz-page-nav.css index 49000f622d..8e6724b2f5 100644 --- a/toolkit/content/widgets/moz-page-nav/moz-page-nav.css +++ b/toolkit/content/widgets/moz-page-nav/moz-page-nav.css @@ -20,6 +20,7 @@ position: sticky; top: 0; height: 100vh; + display: block; width: var(--page-nav-width); @media (prefers-reduced-motion) { @@ -38,7 +39,7 @@ nav { grid-template-rows: min-content 1fr auto; gap: var(--page-nav-gap); margin-block: var(--page-nav-margin-top) var(--page-nav-margin-bottom); - height: calc(100vh - var(--page-nav-margin-top) - var(--page-nav-margin-bottom)); + height: calc(100% - var(--page-nav-margin-top) - var(--page-nav-margin-bottom)); @media (max-width: 52rem) { grid-template-rows: 1fr auto; } diff --git a/toolkit/content/widgets/moz-toggle/moz-toggle.css b/toolkit/content/widgets/moz-toggle/moz-toggle.css index 2005544181..ba98e80021 100644 --- a/toolkit/content/widgets/moz-toggle/moz-toggle.css +++ b/toolkit/content/widgets/moz-toggle/moz-toggle.css @@ -37,7 +37,7 @@ --toggle-background-color-pressed: var(--color-accent-primary); --toggle-background-color-pressed-hover: var(--color-accent-primary-hover); --toggle-background-color-pressed-active: var(--color-accent-primary-active); - --toggle-border-color: var(--border-interactive-color); + --toggle-border-color: var(--border-color-interactive); --toggle-border-color-hover: var(--toggle-border-color); --toggle-border-color-active: var(--toggle-border-color); --toggle-border-radius: var(--border-radius-circle); @@ -47,7 +47,7 @@ --toggle-dot-background-color: var(--toggle-border-color); --toggle-dot-background-color-hover: var(--toggle-dot-background-color); --toggle-dot-background-color-active: var(--toggle-dot-background-color); - --toggle-dot-background-color-on-pressed: var(--color-canvas); + --toggle-dot-background-color-on-pressed: var(--background-color-canvas); --toggle-dot-margin: 1px; --toggle-dot-height: calc(var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 * var(--toggle-border-width)); --toggle-dot-width: var(--toggle-dot-height); @@ -77,7 +77,7 @@ border-color: var(--toggle-border-color); } -.toggle-button:enabled:active { +.toggle-button:enabled:hover:active { background: var(--toggle-background-color-active); border-color: var(--toggle-border-color); } @@ -92,7 +92,7 @@ border-color: transparent; } -.toggle-button[aria-pressed="true"]:enabled:active { +.toggle-button[aria-pressed="true"]:enabled:hover:active { background: var(--toggle-background-color-pressed-active); border-color: transparent; } @@ -114,7 +114,7 @@ } .toggle-button[aria-pressed="true"]:enabled:hover::before, -.toggle-button[aria-pressed="true"]:enabled:active::before { +.toggle-button[aria-pressed="true"]:enabled:hover:active::before { background-color: var(--toggle-dot-background-color-on-pressed); } @@ -149,7 +149,7 @@ border-color: var(--toggle-border-color-hover); } - .toggle-button:enabled:active { + .toggle-button:enabled:hover:active { border-color: var(--toggle-border-color-active); } @@ -163,13 +163,13 @@ border-color: var(--toggle-border-color-hover); } - .toggle-button[aria-pressed="true"]:enabled:active { + .toggle-button[aria-pressed="true"]:enabled:hover:active { background-color: var(--toggle-dot-background-color-active); border-color: var(--toggle-dot-background-color-hover); } .toggle-button:hover::before, - .toggle-button:active::before { + .toggle-button:hover:active::before { background-color: var(--toggle-dot-background-color-hover); } } @@ -181,9 +181,9 @@ --toggle-dot-background-color-active: var(--color-accent-primary-active); --toggle-dot-background-color-on-pressed: var(--button-background-color); --toggle-background-color-disabled: var(--button-background-color-disabled); - --toggle-border-color-hover: var(--border-interactive-color-hover); - --toggle-border-color-active: var(--border-interactive-color-active); - --toggle-border-color-disabled: var(--border-interactive-color-disabled); + --toggle-border-color-hover: var(--border-color-interactive-hover); + --toggle-border-color-active: var(--border-color-interactive-active); + --toggle-border-color-disabled: var(--border-color-interactive-disabled); } .toggle-button[aria-pressed="true"]:enabled::after { @@ -197,7 +197,7 @@ inset: -2px; } - .toggle-button[aria-pressed="true"]:enabled:active::after { + .toggle-button[aria-pressed="true"]:enabled:hover:active::after { border-color: var(--toggle-border-color-active); } } diff --git a/toolkit/content/widgets/notificationbox.js b/toolkit/content/widgets/notificationbox.js index 0161588853..8cfc7b865c 100644 --- a/toolkit/content/widgets/notificationbox.js +++ b/toolkit/content/widgets/notificationbox.js @@ -663,6 +663,10 @@ } } + closeButtonTemplate() { + return super.closeButtonTemplate({ size: "small" }); + } + #setStyles() { let style = document.createElement("link"); style.rel = "stylesheet"; diff --git a/toolkit/content/widgets/radio.js b/toolkit/content/widgets/radio.js index 41e8a945ba..52ace9bf6b 100644 --- a/toolkit/content/widgets/radio.js +++ b/toolkit/content/widgets/radio.js @@ -214,7 +214,7 @@ } get value() { - return this.getAttribute("value"); + return this.getAttribute("value") || ""; } set disabled(val) { @@ -526,7 +526,7 @@ } get value() { - return this.getAttribute("value"); + return this.getAttribute("value") || ""; } get selected() { diff --git a/toolkit/content/widgets/richlistbox.js b/toolkit/content/widgets/richlistbox.js index 01d970e6ed..0d669c4c5e 100644 --- a/toolkit/content/widgets/richlistbox.js +++ b/toolkit/content/widgets/richlistbox.js @@ -109,14 +109,14 @@ for (var i = 0; i < rowCount; i++) { var k = (start + i) % rowCount; var listitem = this.getItemAtIndex(k); - if (!this._canUserSelect(listitem)) { + if (!this.canUserSelect(listitem)) { continue; } // allow richlistitems to specify the string being searched for var searchText = "searchLabel" in listitem ? listitem.searchLabel - : listitem.getAttribute("label"); // (see also bug 250123) + : listitem.getAttribute("label") || ""; // (see also bug 250123) searchText = searchText.substring(0, length).toLowerCase(); if (searchText == incrementalString) { this.ensureIndexIsVisible(k); @@ -227,7 +227,7 @@ this.setAttribute("seltype", val); } get selType() { - return this.getAttribute("seltype"); + return this.getAttribute("seltype") || ""; } // nsIDOMXULSelectControlElement @@ -337,7 +337,7 @@ if ( aStartItem && aStartItem.localName == "richlistitem" && - (!this._userSelecting || this._canUserSelect(aStartItem)) + (!this._userSelecting || this.canUserSelect(aStartItem)) ) { --aDelta; if (aDelta == 0) { @@ -354,7 +354,7 @@ if ( aStartItem && aStartItem.localName == "richlistitem" && - (!this._userSelecting || this._canUserSelect(aStartItem)) + (!this._userSelecting || this.canUserSelect(aStartItem)) ) { --aDelta; if (aDelta == 0) { @@ -771,7 +771,7 @@ var newItem = this.getItemAtIndex(newIndex); // make sure that the item is actually visible/selectable - if (this._userSelecting && newItem && !this._canUserSelect(newItem)) { + if (this._userSelecting && newItem && !this.canUserSelect(newItem)) { newItem = aOffset > 0 ? this.getNextItem(newItem, 1) || this.getPreviousItem(newItem, 1) @@ -811,7 +811,11 @@ } } - _canUserSelect(aItem) { + canUserSelect(aItem) { + if (aItem.disabled) { + return false; + } + var style = document.defaultView.getComputedStyle(aItem); return ( style.display != "none" && @@ -886,7 +890,7 @@ */ this.addEventListener("mousedown", event => { var control = this.control; - if (!control || control.disabled) { + if (!control || this.disabled || control.disabled) { return; } if ( @@ -912,7 +916,7 @@ } var control = this.control; - if (!control || control.disabled) { + if (!control || this.disabled || control.disabled) { return; } control._userSelecting = true; @@ -977,7 +981,7 @@ } get value() { - return this.getAttribute("value"); + return this.getAttribute("value") || ""; } /** diff --git a/toolkit/content/widgets/tabbox.js b/toolkit/content/widgets/tabbox.js index b1b2ddecce..f4003d002c 100644 --- a/toolkit/content/widgets/tabbox.js +++ b/toolkit/content/widgets/tabbox.js @@ -459,7 +459,7 @@ } get value() { - return this.getAttribute("value"); + return this.getAttribute("value") || ""; } get control() { @@ -563,7 +563,7 @@ } get value() { - return this.getAttribute("value"); + return this.getAttribute("value") || ""; } get tabbox() { diff --git a/toolkit/content/widgets/tree.js b/toolkit/content/widgets/tree.js index 4993bef0c2..a871d3396f 100644 --- a/toolkit/content/widgets/tree.js +++ b/toolkit/content/widgets/tree.js @@ -1078,7 +1078,7 @@ } get selType() { - return this.getAttribute("seltype"); + return this.getAttribute("seltype") || ""; } set currentIndex(val) { diff --git a/toolkit/content/widgets/wizard.js b/toolkit/content/widgets/wizard.js index c4285fada5..8a3b9c164d 100644 --- a/toolkit/content/widgets/wizard.js +++ b/toolkit/content/widgets/wizard.js @@ -222,7 +222,7 @@ cp && ((this._accessMethod == "sequential" && cp.pageIndex == this.pageCount - 1) || - (this._accessMethod == "random" && cp.next == "")) + (this._accessMethod == "random" && !cp.next)) ); } @@ -381,7 +381,7 @@ aPage.pageIndex = this.pageCount; this.pageCount += 1; if (!this._accessMethod) { - this._accessMethod = aPage.next == "" ? "sequential" : "random"; + this._accessMethod = aPage.next ? "random" : "sequential"; } if (!this._maybeStartWizard() && this._hasStarted) { // If the wizard has already started, adding a page might require |