diff options
Diffstat (limited to 'toolkit/content')
42 files changed, 683 insertions, 552 deletions
diff --git a/toolkit/content/aboutLogging.js b/toolkit/content/aboutLogging.js index 360ab366e1..f2f4cabc62 100644 --- a/toolkit/content/aboutLogging.js +++ b/toolkit/content/aboutLogging.js @@ -114,7 +114,7 @@ const gLoggingPresets = { }, "media-playback": { modules: - "HTMLMediaElement:4,HTMLMediaElementEvents:4,cubeb:5,PlatformDecoderModule:5,AudioSink:5,AudioSinkWrapper:5,MediaDecoderStateMachine:4,MediaDecoder:4,MediaFormatReader:5,GMP:5", + "HTMLMediaElement:4,HTMLMediaElementEvents:4,cubeb:5,PlatformDecoderModule:5,AudioSink:5,AudioSinkWrapper:5,MediaDecoderStateMachine:4,MediaDecoder:4,MediaFormatReader:5,GMP:5,EME:5", l10nIds: { label: "about-logging-preset-media-playback-label", description: "about-logging-preset-media-playback-description", diff --git a/toolkit/content/aboutNetError.mjs b/toolkit/content/aboutNetError.mjs index 1c733d5dbb..935111dcca 100644 --- a/toolkit/content/aboutNetError.mjs +++ b/toolkit/content/aboutNetError.mjs @@ -396,7 +396,8 @@ function initPage() { }); longDesc = null; - document.getElementById("openInNewWindowContainer").hidden = false; + document.getElementById("openInNewWindowContainer").hidden = + RPMGetBoolPref("security.xfocsp.hideOpenInNewWindow"); const openInNewWindowButton = document.getElementById( "openInNewWindowButton" diff --git a/toolkit/content/aboutTelemetry.js b/toolkit/content/aboutTelemetry.js index 45a8488820..9cf3c3320d 100644 --- a/toolkit/content/aboutTelemetry.js +++ b/toolkit/content/aboutTelemetry.js @@ -352,6 +352,12 @@ var PingPicker = { }, _updateCurrentPingData() { + TelemetryController.ensureInitialized().then(() => + this._doUpdateCurrentPingData() + ); + }, + + _doUpdateCurrentPingData() { const subsession = document.getElementById("show-subsession-data").checked; let ping = TelemetryController.getCurrentPingData(subsession); if (!ping) { diff --git a/toolkit/content/customElements.js b/toolkit/content/customElements.js index ef58963a02..132b069326 100644 --- a/toolkit/content/customElements.js +++ b/toolkit/content/customElements.js @@ -791,7 +791,6 @@ ["button-group", "chrome://global/content/elements/named-deck.js"], ["findbar", "chrome://global/content/elements/findbar.js"], ["menulist", "chrome://global/content/elements/menulist.js"], - ["message-bar", "chrome://global/content/elements/message-bar.js"], ["named-deck", "chrome://global/content/elements/named-deck.js"], ["named-deck-button", "chrome://global/content/elements/named-deck.js"], ["panel-list", "chrome://global/content/elements/panel-list.js"], @@ -806,49 +805,32 @@ "chrome://global/content/elements/autocomplete-input.js", ], ["editor", "chrome://global/content/elements/editor.js"], + ["moz-button", "chrome://global/content/elements/moz-button.mjs"], + [ + "moz-button-group", + "chrome://global/content/elements/moz-button-group.mjs", + ], + ["moz-card", "chrome://global/content/elements/moz-card.mjs"], + ["moz-five-star", "chrome://global/content/elements/moz-five-star.mjs"], + [ + "moz-message-bar", + "chrome://global/content/elements/moz-message-bar.mjs", + ], + ["moz-page-nav", "chrome://global/content/elements/moz-page-nav.mjs"], + [ + "moz-support-link", + "chrome://global/content/elements/moz-support-link.mjs", + ], + ["moz-toggle", "chrome://global/content/elements/moz-toggle.mjs"], ]) { customElements.setElementCreationCallback(tag, () => { - Services.scriptloader.loadSubScript(script, window); + if (script.endsWith(".mjs")) { + ChromeUtils.importESModule(script, { global: "current" }); + } else { + Services.scriptloader.loadSubScript(script, window); + } }); } - // Bug 1813077: This is a workaround until Bug 1803810 lands - // which will give us the ability to load ESMs synchronously - // like the previous Services.scriptloader.loadSubscript() function - function importCustomElementFromESModule(name) { - switch (name) { - case "moz-button": - return import("chrome://global/content/elements/moz-button.mjs"); - case "moz-button-group": - return import( - "chrome://global/content/elements/moz-button-group.mjs" - ); - case "moz-message-bar": - return import("chrome://global/content/elements/moz-message-bar.mjs"); - case "moz-support-link": - return import( - "chrome://global/content/elements/moz-support-link.mjs" - ); - case "moz-toggle": - return import("chrome://global/content/elements/moz-toggle.mjs"); - case "moz-card": - return import("chrome://global/content/elements/moz-card.mjs"); - } - throw new Error(`Unknown custom element name (${name})`); - } - - /* - This function explicitly returns null so that there is no confusion - about which custom elements from ES Modules have been loaded. - */ - window.ensureCustomElements = function (...elementNames) { - return Promise.all( - elementNames - .filter(name => !customElements.get(name)) - .map(name => importCustomElementFromESModule(name)) - ) - .then(() => null) - .catch(console.error); - }; // Immediately load the following elements for (let script of [ diff --git a/toolkit/content/jar.mn b/toolkit/content/jar.mn index d08037a84a..e555936a73 100644 --- a/toolkit/content/jar.mn +++ b/toolkit/content/jar.mn @@ -87,8 +87,6 @@ toolkit.jar: content/global/elements/findbar.js (widgets/findbar.js) content/global/elements/editor.js (widgets/editor.js) content/global/elements/general.js (widgets/general.js) - content/global/elements/message-bar.css (widgets/message-bar.css) - content/global/elements/message-bar.js (widgets/message-bar.js) content/global/elements/menu.js (widgets/menu.js) content/global/elements/menupopup.js (widgets/menupopup.js) content/global/elements/moz-button.css (widgets/moz-button/moz-button.css) diff --git a/toolkit/content/license.html b/toolkit/content/license.html index fe489f74d1..3f05da0118 100644 --- a/toolkit/content/license.html +++ b/toolkit/content/license.html @@ -1496,6 +1496,9 @@ licences. #ifdef MOZ_JXL <code>third_party/highway/</code><br/> #endif +#ifdef MOZ_PERFETTO + <code>third_party/perfetto/</code><br/> +#endif </p> <pre> @@ -3600,7 +3603,6 @@ SOFTWARE. <li><code>devtools/shared/natural-sort.js</code></li> <li><code>devtools/shared/node-properties/node-properties.js</code></li> <li><code>third_party/rust/ordered-float</code></li> - <li><code>third_party/rust/owning_ref</code></li> <li><code>third_party/rust/phf</code>, <code>third_party/rust/phf_codegen</code>, <code>third_party/rust/phf_generator</code>, and @@ -3625,6 +3627,7 @@ SOFTWARE. <li><code>third_party/rust/synstructure</code></li> <li><code>third_party/rust/void</code></li> <li><code>js/src/zydis</code> (unless otherwise specified)</li> + <li><code>js/src/vm/Float16.h</code>(the code contained in the half namespace)</li> </ul> See the individual LICENSE files or headers for copyright owners.</p> diff --git a/toolkit/content/preferencesBindings.js b/toolkit/content/preferencesBindings.js index b2e4070cf5..3dba0bed1e 100644 --- a/toolkit/content/preferencesBindings.js +++ b/toolkit/content/preferencesBindings.js @@ -381,6 +381,11 @@ const Preferences = (window.Preferences = (function () { if (this.locked) { aElement.disabled = true; } + if (aElement.labels?.length) { + for (let label of aElement.labels) { + label.toggleAttribute("disabled", this.locked); + } + } if (!this.isElementEditable(aElement)) { return; diff --git a/toolkit/content/tests/browser/browser_bug1693577.js b/toolkit/content/tests/browser/browser_bug1693577.js index 712749dc89..b85b9f13de 100644 --- a/toolkit/content/tests/browser/browser_bug1693577.js +++ b/toolkit/content/tests/browser/browser_bug1693577.js @@ -12,7 +12,7 @@ add_task(async function test_search_input_popupshowing() { let sidebar = document.getElementById("sidebar"); let loadPromise = BrowserTestUtils.waitForEvent(sidebar, "load", true); - SidebarUI.toggle("viewBookmarksSidebar"); + SidebarController.toggle("viewBookmarksSidebar"); await loadPromise; let inputField = @@ -45,5 +45,5 @@ add_task(async function test_search_input_popupshowing() { popup.hidePopup(); await popuphidden; - SidebarUI.toggle("viewBookmarksSidebar"); + SidebarController.toggle("viewBookmarksSidebar"); }); diff --git a/toolkit/content/tests/chrome/chrome.toml b/toolkit/content/tests/chrome/chrome.toml index 986822ac48..e037f45ecf 100644 --- a/toolkit/content/tests/chrome/chrome.toml +++ b/toolkit/content/tests/chrome/chrome.toml @@ -51,7 +51,6 @@ support-files = [ ] prefs = [ "gfx.font_rendering.fallback.async=false", - "widget.non-native-theme.enabled=false", ] ["test_about_networking.html"] diff --git a/toolkit/content/tests/chrome/file_editor_with_autocomplete.js b/toolkit/content/tests/chrome/file_editor_with_autocomplete.js index acf2c9e9df..0068440785 100644 --- a/toolkit/content/tests/chrome/file_editor_with_autocomplete.js +++ b/toolkit/content/tests/chrome/file_editor_with_autocomplete.js @@ -84,6 +84,10 @@ nsDoTestsForEditorWithAutoComplete.prototype = { Ci.nsIAutoCompleteController.STATUS_COMPLETE_NO_MATCH ); }); + if (test.popup) { + await waitForCondition(() => this._controller.input.popupOpen); + } + this._target.removeEventListener("beforeinput", onBeforeInput); this._target.removeEventListener("input", onInput); this._checkResult(test, beforeInputEvents, inputEvents); diff --git a/toolkit/content/tests/chrome/test_autocomplete_with_composition_on_input.html b/toolkit/content/tests/chrome/test_autocomplete_with_composition_on_input.html index fbcd44e830..fd484a93d1 100644 --- a/toolkit/content/tests/chrome/test_autocomplete_with_composition_on_input.html +++ b/toolkit/content/tests/chrome/test_autocomplete_with_composition_on_input.html @@ -27,7 +27,6 @@ function runTests() { .QueryInterface(Ci.nsIAutoCompleteInput); var originalFormFillTimeout = formFillController.timeout; - SpecialPowers.attachFormFillControllerTo(window); var target = document.getElementById("input"); // Register a word to the form history. @@ -53,7 +52,6 @@ function runTests() { function() { return target.value; }, function() { formFillController.timeout = originalFormFillTimeout; - SpecialPowers.detachFormFillControllerFrom(window); SimpleTest.finish(); }); }); diff --git a/toolkit/content/tests/chrome/test_editor_for_input_with_autocomplete.html b/toolkit/content/tests/chrome/test_editor_for_input_with_autocomplete.html index 91f0f159b4..f2786d47be 100644 --- a/toolkit/content/tests/chrome/test_editor_for_input_with_autocomplete.html +++ b/toolkit/content/tests/chrome/test_editor_for_input_with_autocomplete.html @@ -51,7 +51,6 @@ async function runTests() { .QueryInterface(Ci.nsIAutoCompleteInput); var originalFormFillTimeout = formFillController.timeout; - SpecialPowers.attachFormFillControllerTo(window); var target = document.getElementById("input"); // Register a word to the form history. @@ -71,7 +70,6 @@ async function runTests() { await tests2.run(); formFillController.timeout = originalFormFillTimeout; - SpecialPowers.detachFormFillControllerFrom(window); SimpleTest.finish(); } diff --git a/toolkit/content/tests/chrome/window_largemenu.xhtml b/toolkit/content/tests/chrome/window_largemenu.xhtml index 8e6b6718b4..413ab248bc 100644 --- a/toolkit/content/tests/chrome/window_largemenu.xhtml +++ b/toolkit/content/tests/chrome/window_largemenu.xhtml @@ -336,14 +336,18 @@ function testPopupMovement() var marginTop = parseFloat(getComputedStyle(popup).marginTop); var panelIsTop = SpecialPowers.getBoolPref("ui.panel.default_level_parent"); - var overlapOSChrome = !platformIsMac() && (!isPanelTest || panelIsTop); + var overlapOSChrome = canOverlapOSChrome() && (!isPanelTest || panelIsTop); popup.moveTo(1, 1); [screenX, screenY] = getScreenXY(popup); var expectedx = 1, expectedy = 1; if (!overlapOSChrome) { - if (screen.availLeft >= 1) expectedx = screen.availLeft; - if (screen.availTop >= 1) expectedy = screen.availTop; + if (screen.availLeft >= 1) { + expectedx = screen.availLeft + marginLeft; + } + if (screen.availTop >= 1) { + expectedy = screen.availTop + marginTop; + } } is(screenX, expectedx, gTests[gTestIndex] + " (1, 1) x"); is(screenY, expectedy, gTests[gTestIndex] + " (1, 1) y"); @@ -398,6 +402,11 @@ function platformIsMac() return navigator.platform.indexOf("Mac") > -1; } +function canOverlapOSChrome() +{ + return navigator.platform.startsWith("Win"); +} + window.arguments[0].SimpleTest.waitForFocus(runTests, window); ]]> diff --git a/toolkit/content/tests/widgets/mochitest.toml b/toolkit/content/tests/widgets/mochitest.toml index efd86f1208..f5bc0505bf 100644 --- a/toolkit/content/tests/widgets/mochitest.toml +++ b/toolkit/content/tests/widgets/mochitest.toml @@ -96,6 +96,8 @@ skip-if = [ ["test_videocontrols_size.html"] +["test_videocontrols_src_change.html"] + ["test_videocontrols_standalone.html"] skip-if = [ "os == 'linux'", # bug 1804621 diff --git a/toolkit/content/tests/widgets/test_moz_button.html b/toolkit/content/tests/widgets/test_moz_button.html index a849ccc956..0e64f939dc 100644 --- a/toolkit/content/tests/widgets/test_moz_button.html +++ b/toolkit/content/tests/widgets/test_moz_button.html @@ -17,6 +17,33 @@ } </style> <script> + const { AddonManager } = ChromeUtils.importESModule( + "resource://gre/modules/AddonManager.sys.mjs" + ); + // Always run tests with the light theme for consistency and to avoid from false + // test passes arising from the fact that --icon-color and --button-text-color + // have the same value in the dark theme. + add_setup(async function () { + // Developer Edition enables the wrong theme by default. Make sure + // the ordinary default theme is enabled. + let theme = await AddonManager.getAddonByID("default-theme@mozilla.org"); + await theme.enable(); + + await SpecialPowers.pushPrefEnv({ + set: [ + ["ui.systemUsesDarkTheme", 0], + ], + }); + // Triggers a refresh to ensure new theme applied. + await new Promise(resolve => requestAnimationFrame(resolve)); + ok(window.matchMedia("(prefers-color-scheme: light)").matches, "Light theme is active."); + + // Move mouse to the bottom of the test frame to prevent hover on buttons. + let mouseTrap = document.getElementById("mouse-trap"); + await synthesizeMouseAtCenter(mouseTrap, { type: "mousemove" }); + ok(mouseTrap.matches(":hover"), "The mouse trap is hovered"); + }); + function normalizeColor(val, computedStyles) { if (val.includes("currentColor")) { val = val.replaceAll("currentColor", computedStyles.color); @@ -37,7 +64,7 @@ } function assertButtonPropertiesMatch(el, propertyToCssVar) { - let elStyles = getComputedStyle(el.buttonEl); + let elStyles = el.buttonEl ? getComputedStyle(el.buttonEl) : getComputedStyle(el); for (let [property, cssVar] of Object.entries(propertyToCssVar)) { let propertyVal = elStyles[property]; let cssVarVal = cssVar.startsWith("--") ? elStyles.getPropertyValue(cssVar) : cssVar; @@ -52,13 +79,14 @@ add_task(async function testButtonTypes() { let [...buttons] = document.querySelectorAll("moz-button"); - let [one, two, three, four, five, six] = buttons; + let [one, two, three, four, five, six, seven] = buttons; await Promise.all(buttons.map(btn => btn.updateComplete)); is(one.textContent, "Test button", "Text is set"); is(two.buttonEl.textContent.trim(), "Test button", "Text is set"); is(three.textContent, "Test button", "Text is set"); + is(seven.buttonEl.textContent.trim(), "Test button", "Text is set"); assertButtonPropertiesMatch(one, { backgroundColor: "--button-background-color", @@ -79,19 +107,24 @@ width: "--button-size-icon", height: "--button-size-icon", backgroundColor: "--button-background-color", - fill: "--icon-color", + fill: "--button-text-color", }); assertButtonPropertiesMatch(five, { width: "--button-size-icon", height: "--button-size-icon", backgroundColor: "transparent", - fill: "--icon-color", + fill: "--button-text-color", }); assertButtonPropertiesMatch(six, { width: "--button-size-icon", height: "--button-size-icon", backgroundColor: "transparent", - fill: "--icon-color", + fill: "--button-text-color", + }); + assertButtonPropertiesMatch(seven, { + backgroundColor: "--button-background-color", + color: "--button-text-color", + height: "--button-min-height", }); buttons.forEach(btn => (btn.size = "small")); @@ -119,6 +152,9 @@ width: "--button-size-icon-small", height: "--button-size-icon-small", }); + assertButtonPropertiesMatch(seven, { + height: "--button-min-height-small", + }); }); add_task(async function testA11yAttributes() { @@ -144,14 +180,88 @@ await testProperty("aria-label", "ariaLabel"); }); + add_task(async function testIconButtons() { + let buttons = ["four", "five", "six", "seven", "eight", "nine"].map( + className => document.querySelector(`.${className}`) + ); + let [four, five, six, seven, eight, nine] = buttons; + await Promise.all(buttons.map(btn => btn.updateComplete)); + + function verifyBackgroundIcon(button) { + let img = button.shadowRoot.querySelector("img"); + ok(!img, "button does not use an img element to display an icon"); + assertButtonPropertiesMatch(button, { + fill: "--button-text-color", + backgroundSize: "--icon-size-default", + }); + } + + function verifyImageIcon({ button }) { + let img = button.shadowRoot.querySelector("img"); + ok(img, "button uses an inner img element to display an icon"); + is(img.src, "chrome://global/skin/icons/edit.svg", "button displays the expected icon"); + assertButtonPropertiesMatch(img, { + fill: "--button-text-color", + width: "--icon-size-default", + height: "--icon-size-default", + }); + } + + verifyBackgroundIcon(four); + verifyBackgroundIcon(five); + verifyBackgroundIcon(six); + + verifyImageIcon({ button: seven }); + verifyImageIcon({ button: eight }); + verifyImageIcon({ button: nine }); + + nine.textContent = "With text"; + // Ensure we've painted before checking styles + await new Promise(resolve => requestAnimationFrame(resolve)); + verifyImageIcon({ button: nine, isLabelled: true }); + + nine.textContent = ""; + // Ensure we've painted before checking styles + await new Promise(resolve => requestAnimationFrame(resolve)); + verifyImageIcon({ button: nine, isLabelled: false }); + }); </script> </head> <body> - <moz-button class="one">Test button</moz-button> - <moz-button class="two" label="Test button"></moz-button> - <moz-button class="three" type="primary">Test button</moz-button> - <moz-button class="four" type="icon"></moz-button> - <moz-button class="five" type="icon ghost"></moz-button> - <moz-button class="six" type="ghost icon"></moz-button> + <style> + .wrapper { + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 64px; + } + </style> + <div class="wrapper"> + <div> + <moz-button class="one">Test button</moz-button> + <moz-button class="two" label="Test button"></moz-button> + <moz-button class="three" type="primary">Test button</moz-button> + <moz-button class="four" type="icon"></moz-button> + <moz-button class="five" type="icon ghost"></moz-button> + <moz-button class="six" type="ghost icon"></moz-button> + <moz-button + class="seven" + label="Test button" + iconsrc="chrome://global/skin/icons/edit.svg" + ></moz-button> + <moz-button + class="eight" + iconsrc="chrome://global/skin/icons/edit.svg" + ></moz-button> + <!-- Used to verify that empty space doesn't get treated as a label --> + <moz-button + class="nine" + type="ghost" + iconsrc="chrome://global/skin/icons/edit.svg" + > </moz-button> + </div> + <button id="mouse-trap">Mouse goes here</button> + </div> </body> </html> diff --git a/toolkit/content/tests/widgets/test_moz_button_group.html b/toolkit/content/tests/widgets/test_moz_button_group.html index 92fd7776fa..471d554599 100644 --- a/toolkit/content/tests/widgets/test_moz_button_group.html +++ b/toolkit/content/tests/widgets/test_moz_button_group.html @@ -10,6 +10,7 @@ solution for token variables for the new widgets --> <link rel="stylesheet" href="chrome://global/skin/in-content/common.css"> <script type="module" src="chrome://global/content/elements/moz-button-group.mjs"></script> + <script type="module" src="chrome://global/content/elements/moz-button.mjs"></script> </head> <body> <p id="display"></p> @@ -20,6 +21,7 @@ </div> <!-- This is here to ensure the stylesheet is loaded. It gets removed in setup. --> <moz-button-group></moz-button-group> + <moz-button>Test</moz-button> <pre id="test"> </pre> @@ -74,54 +76,80 @@ add_setup(async function setup() { ({ html, render} = await import("chrome://global/content/vendor/lit.all.mjs")); document.querySelector("moz-button-group").remove(); + document.querySelector("moz-button").remove(); }); add_task(async function testButtonOrderingSlot() { - render( + let markupOptions = [ html` <moz-button-group> <button slot="primary" id="primary-button">Primary</button> <button id="secondary-button">Secondary</button> </moz-button-group> `, - renderArea - ); + html` + <moz-button-group> + <moz-button slot="primary" id="primary-button">Primary</moz-button> + <moz-button id="secondary-button">Secondary</moz-button> + </moz-button-group> + `, + ]; + for (let markup of markupOptions) { + render(markup, renderArea); - let buttonGroup = document.querySelector("moz-button-group"); - let primaryButton = document.getElementById("primary-button"); - let secondaryButton = document.getElementById("secondary-button"); + let buttonGroup = document.querySelector("moz-button-group"); + let primaryButton = document.getElementById("primary-button"); + let secondaryButton = document.getElementById("secondary-button"); - buttonGroup.platform = "win"; - await buttonGroup.updateComplete; - await checkButtons(primaryButton, secondaryButton); - buttonGroup.platform = "macosx"; - await buttonGroup.updateComplete; - await checkButtons(secondaryButton, primaryButton); + buttonGroup.platform = "win"; + await buttonGroup.updateComplete; + await checkButtons(primaryButton, secondaryButton); + + buttonGroup.platform = "macosx"; + await buttonGroup.updateComplete; + await checkButtons(secondaryButton, primaryButton); + } }); add_task(async function testPrimaryButtonAutoSlotting() { - render( + let markupOptions = [ html` <moz-button-group> <button class="primary">Primary</button> <button class="secondary">Secondary</button> </moz-button-group> `, - renderArea - ); - - let buttonGroup = document.querySelector("moz-button-group"); - let primaryButton = buttonGroup.querySelector(".primary"); - let secondaryButton = buttonGroup.querySelector(".secondary"); - buttonGroup.platform = "win"; - await buttonGroup.updateComplete; - is(primaryButton.slot, "primary", "primary button was auto-slotted") - await checkButtons(primaryButton, secondaryButton); - - buttonGroup.platform = "macosx"; - await buttonGroup.updateComplete; - await checkButtons(secondaryButton, primaryButton); + html` + <moz-button-group> + <moz-button type="primary">Primary</moz-button> + <moz-button type="default">Secondary</moz-button> + </moz-button-group> + `, + html` + <moz-button-group> + <moz-button type="destructive">Delete</moz-button> + <moz-button type="default">Secondary</moz-button> + </moz-button-group> + `, + ]; + for (let markup of markupOptions) { + render(markup, renderArea); + + let buttonGroup = document.querySelector("moz-button-group"); + let primaryButton = buttonGroup.querySelector( + ".primary, [type=primary], [type=destructive]" + ); + let secondaryButton = buttonGroup.querySelector(".secondary, [type=default]"); + buttonGroup.platform = "win"; + await buttonGroup.updateComplete; + is(primaryButton.slot, "primary", "primary button was auto-slotted") + await checkButtons(primaryButton, secondaryButton); + + buttonGroup.platform = "macosx"; + await buttonGroup.updateComplete; + await checkButtons(secondaryButton, primaryButton); + } }); add_task(async function testSubmitButtonAutoSlotting() { @@ -197,38 +225,48 @@ }); add_task(async function testInitialButtonLightDomReordering() { - const renderPlatform = platform => render( - html` + let markupOptions = [ + platform => html` <moz-button-group .platform=${platform}> <button class="primary">First</button> <button class="secondary">Secondary</button> <button default>Default</button> </moz-button-group> `, - renderArea - ); - - renderPlatform("win"); - let buttonGroup = document.querySelector("moz-button-group"); - await buttonGroup.updateComplete; - let primaryButton = buttonGroup.querySelector(".primary"); - let defaultButton = buttonGroup.querySelector("[default]"); - let secondaryButton = buttonGroup.querySelector(".secondary"); - - is(primaryButton.slot, "primary", "primary button was auto-slotted"); - is(defaultButton.slot, "primary", "default button was auto-slotted"); - await checkButtons(primaryButton, defaultButton, secondaryButton); - - renderPlatform("macosx"); - buttonGroup = document.querySelector("moz-button-group"); - await buttonGroup.updateComplete; - primaryButton = buttonGroup.querySelector(".primary"); - defaultButton = buttonGroup.querySelector("[default]"); - secondaryButton = buttonGroup.querySelector(".secondary"); - - is(primaryButton.slot, "primary", "primary button was auto-slotted"); - is(defaultButton.slot, "primary", "default button was auto-slotted"); - await checkButtons(secondaryButton, primaryButton, defaultButton); + platform => html` + <moz-button-group .platform=${platform}> + <moz-button type="primary" class="primary">First</moz-button> + <moz-button class="secondary">Secondary</moz-button> + <moz-button type="primary" default>Default</moz-button> + </moz-button-group> + `, + ]; + + for (let markup of markupOptions) { + const renderPlatform = platform => render(markup(platform), renderArea); + + renderPlatform("win"); + let buttonGroup = document.querySelector("moz-button-group"); + await buttonGroup.updateComplete; + let primaryButton = buttonGroup.querySelector(".primary"); + let defaultButton = buttonGroup.querySelector("[default]"); + let secondaryButton = buttonGroup.querySelector(".secondary"); + + is(primaryButton.slot, "primary", "primary button was auto-slotted"); + is(defaultButton.slot, "primary", "default button was auto-slotted"); + await checkButtons(primaryButton, defaultButton, secondaryButton); + + renderPlatform("macosx"); + buttonGroup = document.querySelector("moz-button-group"); + await buttonGroup.updateComplete; + primaryButton = buttonGroup.querySelector(".primary"); + defaultButton = buttonGroup.querySelector("[default]"); + secondaryButton = buttonGroup.querySelector(".secondary"); + + is(primaryButton.slot, "primary", "primary button was auto-slotted"); + is(defaultButton.slot, "primary", "default button was auto-slotted"); + await checkButtons(secondaryButton, primaryButton, defaultButton); + } }); </script> </body> diff --git a/toolkit/content/tests/widgets/test_moz_message_bar.html b/toolkit/content/tests/widgets/test_moz_message_bar.html index 7ee6825ef3..9b48982962 100644 --- a/toolkit/content/tests/widgets/test_moz_message_bar.html +++ b/toolkit/content/tests/widgets/test_moz_message_bar.html @@ -1,27 +1,30 @@ <!DOCTYPE HTML> <html> + <head> <meta charset="utf-8"> <title>MozMessageBar tests</title> <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script> - <link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/> + <link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css" /> <script type="module" src="chrome://global/content/elements/moz-message-bar.mjs"></script> </head> + <body> -<p id="display"></p> -<div id="content"> - <moz-message-bar id="infoMessage" heading="Heading" message="Test message"></moz-message-bar> - <moz-message-bar id="infoMessage2" dismissable message="Test message"></moz-message-bar> - <moz-message-bar id="warningMessage" type="warning" message="Test message"></moz-message-bar> - <moz-message-bar id="successMessage" type="success" message="Test message"></moz-message-bar> - <moz-message-bar id="errorMessage" type="error" message="Test message"></moz-message-bar> -</div> -<pre id="test"> + <p id="display"></p> + <div id="content"> + <moz-message-bar id="infoMessage" heading="Heading" message="Test message"></moz-message-bar> + <moz-message-bar id="infoMessage2" dismissable message="Test message"></moz-message-bar> + <moz-message-bar id="warningMessage" type="warning" message="Test message"></moz-message-bar> + <moz-message-bar id="successMessage" type="success" message="Test message"></moz-message-bar> + <moz-message-bar id="errorMessage" type="error" message="Test message"></moz-message-bar> + </div> + <pre id="test"> <script class="testbody" type="application/javascript"> add_task(async function test_component_declaration() { const mozMessageBar = document.querySelector("#infoMessage"); ok(mozMessageBar, "moz-message-bar component is rendered."); + is(mozMessageBar.getAttribute("role"), "alert", "moz-message-bar component is marked up as alert."); const icon = mozMessageBar.shadowRoot.querySelector(".icon"); const iconUrl = icon.src; @@ -48,11 +51,11 @@ add_task(async function test_close_button() { const notDismissableComponent = document.querySelector("#infoMessage"); - let closeButton = notDismissableComponent.closeButtonEl; + let closeButton = notDismissableComponent.closeButton; ok(!closeButton, "Close button doesn't show when the message bar isn't dismissable."); let dismissableComponent = document.querySelector("#infoMessage2"); - closeButton = dismissableComponent.closeButtonEl; + closeButton = dismissableComponent.closeButton; ok(closeButton, "Close button is shown when the message bar is dismissable."); closeButton.click(); @@ -89,4 +92,5 @@ </script> </pre> </body> + </html> diff --git a/toolkit/content/tests/widgets/test_moz_page_nav.html b/toolkit/content/tests/widgets/test_moz_page_nav.html index 604df7c024..e03bfa22e2 100644 --- a/toolkit/content/tests/widgets/test_moz_page_nav.html +++ b/toolkit/content/tests/widgets/test_moz_page_nav.html @@ -37,6 +37,12 @@ body { <moz-page-nav-button view="view-five" iconSrc="chrome://mozapps/skin/extensions/category-discover.svg"> <span class="view-name">View 5</span> </moz-page-nav-button> + <moz-page-nav-button iconSrc="chrome://mozapps/skin/extensions/category-discover.svg" support-page="test" slot="secondary-nav"> + <span class="view-name">Support Link</span> + </moz-page-nav-button> + <moz-page-nav-button iconSrc="chrome://mozapps/skin/extensions/category-discover.svg" href="https://www.example.com" slot="secondary-nav"> + <span class="view-name">External Link</span> + </moz-page-nav-button> </moz-page-nav> </div> </div> @@ -121,9 +127,45 @@ function isActiveElement(expectedActiveEl) { }); /** + * Tests that footer support links have the expected attributes + */ + add_task(async function test_support_link() { + const supportLinkRootPath = "https://support.mozilla.org/"; + let supportLink = mozPageNav.secondaryNavButtons[0]; + ok(supportLink.linkEl, "The secondary nav button contains the link element."); + ok( + supportLink.linkEl.hasAttribute("is") && supportLink.linkEl.getAttribute("is") === "moz-support-link", + "The support link has the is=moz-support-link attribute." + ); + ok( + supportLink.linkEl.hasAttribute("href") && supportLink.linkEl.getAttribute("href") === `${supportLinkRootPath}test`, + "The support link has the expected href atrribute." + ); + }); + + /** + * Tests that footer external links have the expected attributes + */ + add_task(async function test_external_link() { + const externalLinkPath = "https://www.example.com"; + let externalLink = mozPageNav.secondaryNavButtons[1]; + ok(externalLink.linkEl, "The secondary nav button contains the link element."); + ok(!externalLink.linkEl.hasAttribute("is"), "The external link doesn't have the is=moz-support-link attribute."); + ok( + externalLink.linkEl.hasAttribute("href") && externalLink.linkEl.getAttribute("href") === externalLinkPath, + "The external link has the expected href atrribute." + ); + }); + + /** * Tests that categories are keyboard-navigable */ add_task(async function test_keyboard_navigation() { + const tab = async shiftKey => { + info(`Tab${shiftKey ? " + Shift" : ""}`); + synthesizeKey("KEY_Tab", { shiftKey }); + await mozPageNav.updateComplete; + }; const arrowDown = async () => { info("Arrow down"); synthesizeKey("KEY_ArrowDown", {}); @@ -155,6 +197,8 @@ function isActiveElement(expectedActiveEl) { let thirdPageNavButton = mozPageNav.pageNavButtons[2]; let fourthPageNavButton = mozPageNav.pageNavButtons[3]; let fifthPageNavButton = mozPageNav.pageNavButtons[4]; + let supportLink = mozPageNav.secondaryNavButtons[0]; + let externalLink = mozPageNav.secondaryNavButtons[1]; is( firstPageNavButton.view, @@ -196,6 +240,23 @@ function isActiveElement(expectedActiveEl) { mozPageNav.currentView, "The fifth page nav button is still selected" ) + await tab(); + ok( + isActiveElement(supportLink.linkEl), + "The support link is selected" + ) + await tab(); + ok( + isActiveElement(externalLink.linkEl), + "The external link is selected" + ) + await tab(true); + await tab(true); + is( + fifthPageNavButton.view, + mozPageNav.currentView, + "The fifth page nav button is selected" + ) await arrowUp(); is( fourthPageNavButton.view, diff --git a/toolkit/content/tests/widgets/test_videocontrols_src_change.html b/toolkit/content/tests/widgets/test_videocontrols_src_change.html new file mode 100644 index 0000000000..535b9483cd --- /dev/null +++ b/toolkit/content/tests/widgets/test_videocontrols_src_change.html @@ -0,0 +1,56 @@ +<!DOCTYPE HTML> +<!-- Any copyright is dedicated to the Public Domain. + - https://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + +<head> + <title>Video controls test</title> + <script src="/tests/SimpleTest/SimpleTest.js"></script> + <script src="/tests/SimpleTest/EventUtils.js"></script> + <script type="text/javascript" src="head.js"></script> + <link rel="stylesheet" href="/tests/SimpleTest/test.css" /> +</head> + +<body> + <p id="display"></p> + + <div id="content"> + <video width="320" height="240" id="video" controls></video> + </div> + + <div id="host"></div> + + <pre id="test"> +<script class="testbody"> + add_task(async function test_src_change() { + const video = document.getElementById("video"); + + function changeMediaSource(src) { + let loaded = new Promise((resolve) => video.addEventListener("loadeddata", resolve, { once: true })); + video.src = src; + return loaded; + } + + const muteButton = getElementWithinVideo(video, "muteButton"); + + await changeMediaSource("video.webm"); + + ok(muteButton.hasAttribute("noAudio"), "noAudio attribute is present when the video has no audio track"); + ok(muteButton.disabled, "Mute button is disabled when the video has no audio track"); + + await changeMediaSource("seek_with_sound.webm"); + + ok(!muteButton.hasAttribute("noAudio"), "noAudio attribute is not present when the video has an audio track"); + ok(!muteButton.disabled, "Mute button is enabled when the video has an audio track"); + + await changeMediaSource("video.webm"); + + ok(muteButton.hasAttribute("noAudio"), "noAudio attribute is present when the video has no audio track") + ok(muteButton.disabled, "Mute button is disabled when the video has no audio track"); + }); + +</script> +</pre> +</body> + +</html> diff --git a/toolkit/content/tests/widgets/test_videocontrols_video_noaudio.html b/toolkit/content/tests/widgets/test_videocontrols_video_noaudio.html index 99d5bdad01..be28ed24c9 100644 --- a/toolkit/content/tests/widgets/test_videocontrols_video_noaudio.html +++ b/toolkit/content/tests/widgets/test_videocontrols_video_noaudio.html @@ -29,7 +29,7 @@ }); add_task(async function mute_button_icon() { - is(muteButton.getAttribute("noAudio"), "true"); + ok(muteButton.hasAttribute("noAudio"), "Mute button should have noAudio attribute"); ok(muteButton.hasAttribute("disabled"), "Mute button should be disabled"); if (volumeStack) { diff --git a/toolkit/content/widgets.css b/toolkit/content/widgets.css index d7f1b68602..16b6d5cb94 100644 --- a/toolkit/content/widgets.css +++ b/toolkit/content/widgets.css @@ -22,4 +22,4 @@ @import url("chrome://global/skin/tabbox.css"); @import url("chrome://global/skin/toolbar.css"); @import url("chrome://global/skin/toolbarbutton.css"); -@import url("chrome://global/skin/tree.css"); +@import url("chrome://global/skin/tree/tree.css"); diff --git a/toolkit/content/widgets/arrowscrollbox.js b/toolkit/content/widgets/arrowscrollbox.js index 7109891faf..5983435d06 100644 --- a/toolkit/content/widgets/arrowscrollbox.js +++ b/toolkit/content/widgets/arrowscrollbox.js @@ -21,7 +21,7 @@ return ` <html:link rel="stylesheet" href="chrome://global/skin/toolbarbutton.css"/> <html:link rel="stylesheet" href="chrome://global/skin/arrowscrollbox.css"/> - <toolbarbutton id="scrollbutton-up" part="scrollbutton-up" keyNav="false" data-l10n-id="overflow-scroll-button-up"/> + <toolbarbutton id="scrollbutton-up" part="scrollbutton-up" keyNav="false" data-l10n-id="overflow-scroll-button-backwards"/> <spacer part="overflow-start-indicator"/> <box class="scrollbox-clip" part="scrollbox-clip" flex="1"> <scrollbox part="scrollbox" flex="1"> @@ -29,7 +29,7 @@ </scrollbox> </box> <spacer part="overflow-end-indicator"/> - <toolbarbutton id="scrollbutton-down" part="scrollbutton-down" keyNav="false" data-l10n-id="overflow-scroll-button-down"/> + <toolbarbutton id="scrollbutton-down" part="scrollbutton-down" keyNav="false" data-l10n-id="overflow-scroll-button-forwards"/> `; } diff --git a/toolkit/content/widgets/autocomplete-richlistitem.js b/toolkit/content/widgets/autocomplete-richlistitem.js index b339ab1e27..0ec8a19243 100644 --- a/toolkit/content/widgets/autocomplete-richlistitem.js +++ b/toolkit/content/widgets/autocomplete-richlistitem.js @@ -832,9 +832,7 @@ setTimeout(() => { let selectedIndex = popup ? popup.selectedIndex : -1; - actor.manager - .getActor("FormAutofill") - .sendAsyncMessage("FormAutofill:PreviewProfile", { selectedIndex }); + actor.previewAutofillProfile(selectedIndex); }, 0); } diff --git a/toolkit/content/widgets/datetimebox.js b/toolkit/content/widgets/datetimebox.js index 04ed398bd7..1c63b09269 100644 --- a/toolkit/content/widgets/datetimebox.js +++ b/toolkit/content/widgets/datetimebox.js @@ -650,6 +650,10 @@ this.DateTimeBoxWidget = class { onKeyDown(aEvent) { this.log("onKeyDown key: " + aEvent.key); + if (aEvent.defaultPrevented) { + return; + } + switch (aEvent.key) { // Toggle the picker on Space/Enter on Calendar button or Space on input, // close on Escape anywhere. @@ -691,21 +695,17 @@ this.DateTimeBoxWidget = class { aEvent.preventDefault(); break; } - if (this.isEditable()) { - // TODO(emilio, bug 1571533): These functions should look at - // defaultPrevented. - // Ctrl+Backspace/Delete on non-macOS and - // Cmd+Backspace/Delete on macOS to clear the field - if (aEvent.getModifierState("Accel")) { - // Clear the input's value - this.clearInputFields(false); - } else { - let targetField = aEvent.originalTarget; - this.clearFieldValue(targetField); - this.setInputValueFromFields(); - } - aEvent.preventDefault(); + // Ctrl+Backspace/Delete on non-macOS and + // Cmd+Backspace/Delete on macOS to clear the field + if (aEvent.getModifierState("Accel")) { + // Clear the input's value + this.clearInputFields(false); + } else { + let targetField = aEvent.originalTarget; + this.clearFieldValue(targetField); + this.setInputValueFromFields(); } + aEvent.preventDefault(); break; } case "ArrowRight": diff --git a/toolkit/content/widgets/message-bar.css b/toolkit/content/widgets/message-bar.css deleted file mode 100644 index eddc5a3ae6..0000000000 --- a/toolkit/content/widgets/message-bar.css +++ /dev/null @@ -1,219 +0,0 @@ -/* 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 { - --info-icon-url: url("chrome://global/skin/icons/info-filled.svg"); - --warn-icon-url: url("chrome://global/skin/icons/warning.svg"); - --success-icon-url: url("chrome://global/skin/icons/check.svg"); - --error-icon-url: url("chrome://global/skin/icons/error.svg"); - --close-icon-url: url("chrome://global/skin/icons/close-12.svg"); - --close-fill-color: var(--in-content-icon-color); - --icon-size: 16px; - --close-icon-size: 28px; -} - -:host { - --message-bar-background-color: var(--in-content-box-info-background); - --message-bar-text-color: var(--in-content-text-color); - --message-bar-icon-url: var(--info-icon-url); - /* The default values of --in-content-button* are sufficient, even for dark themes */ -} - -:host([type=warning]) { - --message-bar-icon-url: var(--warn-icon-url); -} - -:host([type=success]) { - --message-bar-icon-url: var(--success-icon-url); -} - -:host([type=error]), -:host([type=critical]) { - --message-bar-icon-url: var(--error-icon-url); -} - -:host { - border: 1px solid transparent; - border-radius: 4px; -} - -/* Make the host to behave as a block by default, but allow hidden to hide it. */ -:host(:not([hidden])) { - display: block; -} - -::slotted(button) { - /* Enforce micro-button width. */ - min-width: -moz-fit-content !important; -} - -/* MessageBar Grid Layout */ - -.container { - background: var(--message-bar-background-color); - color: var(--message-bar-text-color); - - padding: 3px 7px; - position: relative; - - border-radius: 4px; - - display: flex; - /* Ensure that the message bar shadow dom elements are vertically aligned. */ - align-items: center; -} - -:host([align="center"]) .container { - justify-content: center; -} - -.content { - margin: 0 4px; - display: inline-block; - /* Ensure that the message bar content is vertically aligned. */ - align-items: center; - /* Ensure that the message bar content is wrapped. */ - word-break: break-word; -} - -/* MessageBar icon style */ - -.icon { - padding: 4px; - width: var(--icon-size); - height: var(--icon-size); - flex-shrink: 0; -} - -.icon::after { - display: inline-block; - appearance: none; - -moz-context-properties: fill, stroke; - fill: currentColor; - stroke: currentColor; - content: ""; - background-image: var(--message-bar-icon-url); - background-size: var(--icon-size); - width: var(--icon-size); - height: var(--icon-size); -} - -/* Use a spacer to position the close button at the end, but also support - * centering if required. */ -.spacer { - flex-grow: 1; -} - -/* Close icon styles */ - -:host(:not([dismissable])) .close { - display: none; -} - -.close { - background-image: var(--close-icon-url); - background-repeat: no-repeat; - background-position: center center; - -moz-context-properties: fill; - fill: currentColor; - min-width: auto; - min-height: auto; - width: var(--close-icon-size); - height: var(--close-icon-size); - padding: 0; - flex-shrink: 0; - margin: 4px 8px; - background-size: 12px; -} - -@media (prefers-contrast) { - :host { - border-color: CanvasText; - } -} - -@media not (prefers-contrast) { - /* MessageBar colors by message type */ - /* Colors from: https://design.firefox.com/photon/components/message-bars.html#type-specific-style */ - - :host([type=warning]) { - /* Ensure colors within the bar are adjusted and controls are readable */ - color-scheme: light; - - --message-bar-background-color: var(--yellow-50); - --message-bar-text-color: var(--yellow-90); - - --in-content-button-background: var(--yellow-60); - --in-content-button-background-hover: var(--yellow-70); - --in-content-button-background-active: var(--yellow-80); - - --close-fill-color: var(--message-bar-text-color); - } - - :host([type=success]) { - /* Ensure colors within the bar are adjusted and controls are readable */ - color-scheme: light; - - --message-bar-background-color: var(--green-50); - --message-bar-text-color: var(--green-90); - - --in-content-button-background: var(--green-60); - --in-content-button-background-hover: var(--green-70); - --in-content-button-background-active: var(--green-80); - } - - :host([type=error]) { - --message-bar-background-color: var(--red-60); - --message-bar-text-color: #ffffff; - - --in-content-button-background: var(--red-70); - --in-content-button-background-hover: var(--red-80); - --in-content-button-background-active: var(--red-90); - } - - :host([type=info]) .icon { - color: rgb(0,144,237); - } - - :host([type=warning]) .icon { - color: rgb(255,164,54); - } - - :host([type=critical]) .icon { - color: rgb(226,40,80); - } - - .close { - fill: var(--close-fill-color); - } - - @media (prefers-color-scheme: dark) { - /* Don't set the background in prefers-contrast mode or macOS can end up - * with black on black text. */ - :host([type=info]) .icon { - color: rgb(128,235,255); - } - - :host([type=warning]) .icon { - color: rgb(255,189,79); - } - - :host([type=critical]) .icon { - color: rgb(255,154,162); - } - } -} - -strong { - font-weight: 600; -} - -.text-link:hover { - cursor: pointer; -} - -@keyframes spin { - from { transform: rotate(0); } - to { transform: rotate(360deg); } -} diff --git a/toolkit/content/widgets/message-bar.js b/toolkit/content/widgets/message-bar.js deleted file mode 100644 index d38347b40a..0000000000 --- a/toolkit/content/widgets/message-bar.js +++ /dev/null @@ -1,91 +0,0 @@ -/* 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/. */ - -"use strict"; - -// This is loaded into chrome windows with the subscript loader. Wrap in -// a block to prevent accidentally leaking globals onto `window`. -{ - class MessageBarElement extends HTMLElement { - constructor() { - super(); - const shadowRoot = this.attachShadow({ mode: "open" }); - window.MozXULElement?.insertFTLIfNeeded( - "toolkit/global/notification.ftl" - ); - document.l10n.connectRoot(this.shadowRoot); - const content = this.constructor.template.content.cloneNode(true); - shadowRoot.append(content); - this.closeButton.addEventListener("click", () => this.dismiss(), { - once: true, - }); - } - - disconnectedCallback() { - this.dispatchEvent(new CustomEvent("message-bar:close")); - } - - get closeButton() { - return this.shadowRoot.querySelector("button.close"); - } - - static get template() { - const template = document.createElement("template"); - - const commonStyles = document.createElement("link"); - commonStyles.rel = "stylesheet"; - commonStyles.href = "chrome://global/skin/in-content/common.css"; - const messageBarStyles = document.createElement("link"); - messageBarStyles.rel = "stylesheet"; - messageBarStyles.href = - "chrome://global/content/elements/message-bar.css"; - template.content.append(commonStyles, messageBarStyles); - - // A container for the entire message bar content, - // most of the css rules needed to provide the - // expected message bar layout is applied on this - // element. - const container = document.createElement("div"); - container.part = "container"; - container.classList.add("container"); - template.content.append(container); - - const icon = document.createElement("span"); - icon.classList.add("icon"); - icon.part = "icon"; - container.append(icon); - - const barcontent = document.createElement("span"); - barcontent.classList.add("content"); - barcontent.append(document.createElement("slot")); - container.append(barcontent); - - const spacer = document.createElement("span"); - spacer.classList.add("spacer"); - container.append(spacer); - - const closeIcon = document.createElement("button"); - closeIcon.classList.add("close", "ghost-button"); - document.l10n.setAttributes(closeIcon, "notification-close-button"); - container.append(closeIcon); - - Object.defineProperty(this, "template", { - value: template, - }); - - return template; - } - - dismiss() { - this.dispatchEvent(new CustomEvent("message-bar:user-dismissed")); - this.close(); - } - - close() { - this.remove(); - } - } - - customElements.define("message-bar", MessageBarElement); -} diff --git a/toolkit/content/widgets/moz-button-group/moz-button-group.css b/toolkit/content/widgets/moz-button-group/moz-button-group.css index ba79d69e12..5b6f7deace 100644 --- a/toolkit/content/widgets/moz-button-group/moz-button-group.css +++ b/toolkit/content/widgets/moz-button-group/moz-button-group.css @@ -11,6 +11,7 @@ margin: 0 !important; } -::slotted(button:not(:first-child, .popup-notification-dropmarker)) { +::slotted(button:not(:first-child, .popup-notification-dropmarker)), +::slotted(moz-button:not(:first-child)) { margin-inline-start: var(--space-small) !important; } 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 8bf553c23d..6858367ab7 100644 --- a/toolkit/content/widgets/moz-button-group/moz-button-group.mjs +++ b/toolkit/content/widgets/moz-button-group/moz-button-group.mjs @@ -50,15 +50,22 @@ export default class MozButtonGroup extends MozLitElement { // Text nodes won't support classList or getAttribute. continue; } - // Bug 1791816: These should check moz-button instead of button. - if ( - child.localName == "button" && - (child.classList.contains("primary") || - child.getAttribute("type") == "submit" || - child.hasAttribute("autofocus") || - child.hasAttribute("default")) - ) { - child.slot = "primary"; + switch (child.localName) { + case "button": + if ( + child.classList.contains("primary") || + child.getAttribute("type") == "submit" || + child.hasAttribute("autofocus") || + child.hasAttribute("default") + ) { + child.slot = "primary"; + } + break; + case "moz-button": + if (child.type == "primary" || child.type == "destructive") { + child.slot = "primary"; + } + break; } } this.#reorderLightDom(); diff --git a/toolkit/content/widgets/moz-button/moz-button.css b/toolkit/content/widgets/moz-button/moz-button.css index 71d57ea93a..4eb6839e06 100644 --- a/toolkit/content/widgets/moz-button/moz-button.css +++ b/toolkit/content/widgets/moz-button/moz-button.css @@ -23,6 +23,10 @@ button { /* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */ font-size: var(--button-font-size); width: 100%; + display: flex; + justify-content: center; + align-items: center; + gap: var(--space-small); &[size=small] { min-height: var(--button-min-height-small); @@ -125,21 +129,33 @@ button { } } - &[type~=icon] { + &[type~=icon]:not(.labelled) { background-size: var(--icon-size-default); background-position: center; background-repeat: no-repeat; - -moz-context-properties: fill, stroke; - fill: currentColor; - stroke: currentColor; + } + + &[type~=icon]:not(.labelled), + &:not(.labelled):has(img) { 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); height: var(--button-size-icon-small); } } + + img, + &[type~=icon]:not(.labelled) { + -moz-context-properties: fill, fill-opacity, stroke; + fill: currentColor; + stroke: currentColor; + } + + img { + width: var(--icon-size-default); + height: var(--icon-size-default); + } } diff --git a/toolkit/content/widgets/moz-button/moz-button.mjs b/toolkit/content/widgets/moz-button/moz-button.mjs index a951dbf5d8..9a239d4e56 100644 --- a/toolkit/content/widgets/moz-button/moz-button.mjs +++ b/toolkit/content/widgets/moz-button/moz-button.mjs @@ -2,7 +2,7 @@ * 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 { html, ifDefined, classMap } from "../vendor/lit.all.mjs"; import { MozLitElement } from "../lit-utils.mjs"; /** @@ -19,8 +19,11 @@ import { MozLitElement } from "../lit-utils.mjs"; * @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} iconSrc - Path to the icon that should be displayed in the button. * @property {string} ariaLabelAttribute - Internal, map aria-label attribute to the ariaLabel JS property. + * @property {string} hasVisibleLabel - Internal, tracks whether or not the button has a visible label. * @property {HTMLButtonElement} buttonEl - The internal button element in the shadow DOM. + * @property {HTMLButtonElement} slotEl - The internal slot element in the shadow DOM. * @slot default - The button's content, overrides label property. * @fires click - The click event. */ @@ -44,10 +47,13 @@ export default class MozButton extends MozLitElement { reflect: true, }, ariaLabel: { type: String, state: true }, + iconSrc: { type: String }, + hasVisibleLabel: { type: Boolean, state: true }, }; static queries = { buttonEl: "button", + slotEl: "slot", }; constructor() { @@ -55,6 +61,7 @@ export default class MozButton extends MozLitElement { this.type = "default"; this.size = "default"; this.disabled = false; + this.hasVisibleLabel = !!this.label; } willUpdate(changes) { @@ -73,6 +80,12 @@ export default class MozButton extends MozLitElement { this.buttonEl.click(); } + checkForLabelText() { + this.hasVisibleLabel = this.slotEl + .assignedNodes() + .some(node => node.textContent.trim()); + } + render() { return html` <link @@ -86,8 +99,12 @@ export default class MozButton extends MozLitElement { title=${ifDefined(this.title || this.tooltipText)} aria-label=${ifDefined(this.ariaLabel)} part="button" + class=${classMap({ labelled: this.label || this.hasVisibleLabel })} > - <slot>${this.label}</slot> + ${this.iconSrc + ? html`<img src=${this.iconSrc} role="presentation" />` + : ""} + <slot @slotchange=${this.checkForLabelText}>${this.label}</slot> </button> `; } diff --git a/toolkit/content/widgets/moz-button/moz-button.stories.mjs b/toolkit/content/widgets/moz-button/moz-button.stories.mjs index 52a459e807..dd8d6369db 100644 --- a/toolkit/content/widgets/moz-button/moz-button.stories.mjs +++ b/toolkit/content/widgets/moz-button/moz-button.stories.mjs @@ -2,7 +2,7 @@ * 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"; +import { html, ifDefined } from "../vendor/lit.all.mjs"; // eslint-disable-next-line import/no-unassigned-import import "./moz-button.mjs"; @@ -22,6 +22,10 @@ export default { options: ["default", "small"], control: { type: "radio" }, }, + type: { + options: ["default", "primary", "destructive", "icon", "icon ghost"], + control: { type: "select" }, + }, }, parameters: { actions: { @@ -40,17 +44,13 @@ moz-button-aria-labelled = }, }; -const Template = ({ type, size, l10nId, iconUrl, disabled }) => html` - <style> - moz-button[type~="icon"]::part(button) { - background-image: url("${iconUrl}"); - } - </style> +const Template = ({ type, size, l10nId, iconSrc, disabled }) => html` <moz-button data-l10n-id=${l10nId} type=${type} size=${size} ?disabled=${disabled} + iconSrc=${ifDefined(iconSrc)} ></moz-button> `; @@ -59,7 +59,7 @@ Default.args = { type: "default", size: "default", l10nId: "moz-button-labelled", - iconUrl: "chrome://global/skin/icons/more.svg", + iconSrc: "", disabled: false, }; export const DefaultSmall = Template.bind({}); @@ -67,7 +67,7 @@ DefaultSmall.args = { type: "default", size: "small", l10nId: "moz-button-labelled", - iconUrl: "chrome://global/skin/icons/more.svg", + iconSrc: "", disabled: false, }; export const Primary = Template.bind({}); @@ -85,7 +85,7 @@ Destructive.args = { export const Icon = Template.bind({}); Icon.args = { ...Default.args, - type: "icon", + iconSrc: "chrome://global/skin/icons/more.svg", l10nId: "moz-button-titled", }; export const IconSmall = Template.bind({}); @@ -96,5 +96,12 @@ IconSmall.args = { export const IconGhost = Template.bind({}); IconGhost.args = { ...Icon.args, - type: "icon ghost", + type: "ghost", +}; +export const IconText = Template.bind({}); +IconText.args = { + type: "default", + size: "default", + iconSrc: "chrome://global/skin/icons/edit-copy.svg", + l10nId: "moz-button-labelled", }; 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 8f0c997149..9a186b41c9 100644 --- a/toolkit/content/widgets/moz-message-bar/moz-message-bar.mjs +++ b/toolkit/content/widgets/moz-message-bar/moz-message-bar.mjs @@ -49,10 +49,10 @@ const messageTypeToIconData = { export default class MozMessageBar extends MozLitElement { static queries = { - actionsSlotEl: "slot[name=actions]", + actionsSlot: "slot[name=actions]", actionsEl: ".actions", - closeButtonEl: "moz-button.close", - supportLinkSlotEl: "slot[name=support-link]", + closeButton: "moz-button.close", + supportLinkSlot: "slot[name=support-link]", }; static properties = { @@ -72,13 +72,13 @@ export default class MozMessageBar extends MozLitElement { } onSlotchange() { - let actions = this.actionsSlotEl.assignedNodes(); + let actions = this.actionsSlot.assignedNodes(); this.actionsEl.classList.toggle("active", actions.length); } connectedCallback() { super.connectedCallback(); - this.setAttribute("role", "status"); + this.setAttribute("role", "alert"); } disconnectedCallback() { @@ -87,7 +87,7 @@ export default class MozMessageBar extends MozLitElement { } get supportLinkEls() { - return this.supportLinkSlotEl.assignedElements(); + return this.supportLinkSlot.assignedElements(); } iconTemplate() { diff --git a/toolkit/content/widgets/moz-page-nav/README.stories.md b/toolkit/content/widgets/moz-page-nav/README.stories.md index 800d446478..c2f1b37bb5 100644 --- a/toolkit/content/widgets/moz-page-nav/README.stories.md +++ b/toolkit/content/widgets/moz-page-nav/README.stories.md @@ -4,7 +4,7 @@ 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 heading="This is a nav" style={{ '--page-nav-margin-top': 0, '--page-nav-margin-bottom': 0, height: '275px' }}> <moz-page-nav-button view="view-one" iconSrc="chrome://browser/skin/preferences/category-general.svg" @@ -23,13 +23,27 @@ intended to change the selected view, provide a heading, and have links to exter > <p style={{ margin: 0 }}>Test 3</p> </moz-page-nav-button> + <moz-page-nav-button + support-page="test" + iconSrc="chrome://browser/skin/preferences/category-general.svg" + slot="secondary-nav" + > + <p style={{ margin: 0 }}>Support Link</p> + </moz-page-nav-button> + <moz-page-nav-button + href="https://www.example.com" + iconSrc="chrome://browser/skin/preferences/category-general.svg" + slot="secondary-nav" + > + <p style={{ margin: 0 }}>External Link</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)) +* moz-page-nav also supports footer buttons for external and support links * This component will be used in about: pages such as about:firefoxview, about:preferences, about:addons, about:debugging, etc. ## When not to use @@ -53,18 +67,34 @@ And used as follows: ```html <moz-page-nav> - <moz-page-nav-button + <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 + </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 + </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-button> + + <!-- Footer Links --> + + <!-- Support Link --> + <moz-page-nav-button + support-page="A name for a support link" + iconSrc="A url for the icon for the third navigation button" + slot="secondary-nav"> + </moz-page-nav-button> + + <!-- External Link --> + <moz-page-nav-button + href="A url for an external link" + iconSrc="A url for the icon for the third navigation button" + slot="secondary-nav"> + </moz-page-nav-button> </moz-page-nav> ``` 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 5d00198d65..781398056a 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 @@ -4,11 +4,13 @@ :host { border-radius: var(--border-radius-small); + font-size: var(--font-size-large); &:focus-visible { outline-offset: var(--page-nav-focus-outline-inset); } } +a[href], button { background-color: var(--page-nav-button-background-color); border: 1px solid var(--page-nav-border-color); @@ -28,11 +30,17 @@ button { padding: var(--page-nav-button-padding); } +a[href] { + text-decoration: none; + box-sizing: border-box; +} + button:hover { cursor: pointer; } @media not (prefers-contrast) { + a[href], button { position: relative; } @@ -55,6 +63,7 @@ button:hover { background-color: var(--icon-color); } + a[href]:hover, button:hover, button[selected]:hover { background-color: var(--page-nav-button-background-color-hover); @@ -72,6 +81,7 @@ button:hover { } } +a[href]:focus-visible, button:focus-visible, button[selected]:focus-visible { outline: var(--focus-outline); @@ -86,13 +96,24 @@ button[selected]:focus-visible { fill: currentColor; } +:host(.secondary-nav-item) { + font-size: var(--font-size-small); + + & .page-nav-icon { + height: var(--icon-size-default); + width: var(--icon-size-default); + } +} + @media (prefers-contrast) { + a[href], button { transition: none; border-color: ButtonText; background-color: var(--button-background-color); } + a[href]:hover, button:hover { color: SelectedItem; } @@ -105,13 +126,13 @@ button[selected]:focus-visible { } slot { - font-size: var(--font-size-large); margin: 0; padding-inline-start: 0; user-select: none; } @media (max-width: 52rem) { + a[href], button { grid-template-columns: min-content; justify-content: center; diff --git a/toolkit/content/widgets/moz-page-nav/moz-page-nav.mjs b/toolkit/content/widgets/moz-page-nav/moz-page-nav.mjs index f998ee735f..c720e76e26 100644 --- a/toolkit/content/widgets/moz-page-nav/moz-page-nav.mjs +++ b/toolkit/content/widgets/moz-page-nav/moz-page-nav.mjs @@ -4,6 +4,8 @@ import { html } from "chrome://global/content/vendor/lit.all.mjs"; import { MozLitElement } from "chrome://global/content/lit-utils.mjs"; +// eslint-disable-next-line import/no-unassigned-import +import "chrome://global/content/elements/moz-support-link.mjs"; /** * A grouping of navigation buttons that is displayed at the page level, @@ -35,6 +37,14 @@ export default class MozPageNav extends MozLitElement { ); } + get secondaryNavButtons() { + return this.secondaryNavGroupSlot + .assignedNodes() + .filter( + node => node?.localName === "moz-page-nav-button" && !node.hidden + ); + } + onChangeView(e) { this.currentView = e.target.view; } @@ -69,6 +79,12 @@ export default class MozPageNav extends MozLitElement { } } + onSecondaryNavChange() { + this.secondaryNavGroupSlot.assignedElements()?.forEach(el => { + el.classList.add("secondary-nav-item"); + }); + } + render() { return html` <link @@ -89,7 +105,10 @@ export default class MozPageNav extends MozLitElement { ></slot> </div> <div id="secondary-nav-group" role="group"> - <slot name="secondary-nav" @keydown=${this.handleFocus}></slot> + <slot + name="secondary-nav" + @slotchange=${this.onSecondaryNavChange} + ></slot> </div> </nav> `; @@ -114,16 +133,18 @@ customElements.define("moz-page-nav", MozPageNav); * A navigation button intended to change the selected view within a page. * * @tagname moz-page-nav-button + * @property {string} href - (optional) The url for an external link if not a support page URL * @property {string} iconSrc - The chrome:// url for the icon used for the button. - * @property {string} l10nId - The fluent ID for the button's text * @property {boolean} selected - Whether or not the button is currently selected. + * @property {string} supportPage - (optional) The short name for the support page a secondary link should launch to * @slot [default] - Used to append the l10n string to the button. */ export class MozPageNavButton extends MozLitElement { static properties = { iconSrc: { type: String }, - l10nId: { type: String }, + href: { type: String }, selected: { type: Boolean }, + supportPage: { type: String, attribute: "support-page" }, }; connectedCallback() { @@ -133,6 +154,7 @@ export class MozPageNavButton extends MozLitElement { static queries = { buttonEl: "button", + linkEl: "a", }; get view() { @@ -148,12 +170,15 @@ export class MozPageNavButton extends MozLitElement { ); } - render() { + itemTemplate() { + if (this.href || this.supportPage) { + return this.linkTemplate(); + } + return this.buttonTemplate(); + } + + buttonTemplate() { return html` - <link - rel="stylesheet" - href="chrome://global/content/elements/moz-page-nav-button.css" - /> <button aria-selected=${this.selected} tabindex=${this.selected ? 0 : -1} @@ -161,10 +186,51 @@ export class MozPageNavButton extends MozLitElement { ?selected=${this.selected} @click=${this.activate} > - <img class="page-nav-icon" src=${this.iconSrc} /> - <slot></slot> + ${this.innerContentTemplate()} </button> `; } + + linkTemplate() { + if (this.supportPage) { + return html` + <a + is="moz-support-link" + class="moz-page-nav-link" + support-page=${this.supportPage} + > + ${this.innerContentTemplate()} + </a> + `; + } + return html` + <a href=${this.href} class="moz-page-nav-link" target="_blank"> + ${this.innerContentTemplate()} + </a> + `; + } + + innerContentTemplate() { + return html` + ${this.iconSrc + ? html`<img + class="page-nav-icon" + src=${this.iconSrc} + role="presentation" + />` + : ""} + <slot></slot> + `; + } + + render() { + return html` + <link + rel="stylesheet" + href="chrome://global/content/elements/moz-page-nav-button.css" + /> + ${this.itemTemplate()} + `; + } } customElements.define("moz-page-nav-button", MozPageNavButton); diff --git a/toolkit/content/widgets/moz-page-nav/moz-page-nav.stories.mjs b/toolkit/content/widgets/moz-page-nav/moz-page-nav.stories.mjs index 4ac7b455cf..d1c565efe9 100644 --- a/toolkit/content/widgets/moz-page-nav/moz-page-nav.stories.mjs +++ b/toolkit/content/widgets/moz-page-nav/moz-page-nav.stories.mjs @@ -2,7 +2,7 @@ * 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"; +import { html, when } from "../vendor/lit.all.mjs"; // eslint-disable-next-line import/no-unassigned-import import "./moz-page-nav.mjs"; @@ -21,15 +21,17 @@ moz-page-nav-button-two = View 2 .title = View 2 moz-page-nav-button-three = View 3 .title = View 3 -moz-page-link-one = Support Page - .title = Support Page +moz-page-nav-button-four = Support Link + .title = Support Link +moz-page-nav-button-five = External Link + .title = External Link moz-page-nav-heading = .heading = Heading `, }, }; -const Template = () => html` +const Template = ({ hasFooterLinks }) => html` <style> #page { height: 100%; @@ -68,10 +70,30 @@ const Template = () => html` iconSrc="chrome://browser/skin/preferences/category-general.svg" > </moz-page-nav-button> + ${when( + hasFooterLinks, + () => html` <moz-page-nav-button + support-page="test" + data-l10n-id="moz-page-nav-button-four" + iconSrc="chrome://browser/skin/preferences/category-general.svg" + slot="secondary-nav" + > + </moz-page-nav-button> + <moz-page-nav-button + href="https://www.example.com" + data-l10n-id="moz-page-nav-button-five" + iconSrc="chrome://browser/skin/preferences/category-general.svg" + slot="secondary-nav" + > + </moz-page-nav-button>` + )} </moz-page-nav> <main></main> </div> `; export const Default = Template.bind({}); -Default.args = {}; +Default.args = { hasFooterLinks: false }; + +export const WithFooterLinks = Template.bind({}); +WithFooterLinks.args = { hasFooterLinks: true }; diff --git a/toolkit/content/widgets/moz-support-link/moz-support-link.mjs b/toolkit/content/widgets/moz-support-link/moz-support-link.mjs index 9d2d6ffac2..df6ebac2a5 100644 --- a/toolkit/content/widgets/moz-support-link/moz-support-link.mjs +++ b/toolkit/content/widgets/moz-support-link/moz-support-link.mjs @@ -29,6 +29,10 @@ export default class MozSupportLink extends HTMLAnchorElement { */ #register() { if (window.document.nodePrincipal?.isSystemPrincipal) { + ChromeUtils.defineESModuleGetters(MozSupportLink, { + BrowserUtils: "resource://gre/modules/BrowserUtils.sys.mjs", + }); + // eslint-disable-next-line no-shadow let { XPCOMUtils } = window.XPCOMUtils ? window @@ -72,7 +76,7 @@ export default class MozSupportLink extends HTMLAnchorElement { handleEvent(e) { if (e.type == "click") { if (window.openTrustedLinkIn) { - let where = whereToOpenLink(e, false, true); + let where = MozSupportLink.BrowserUtils.whereToOpenLink(e, false, true); if (where == "current") { where = "tab"; } diff --git a/toolkit/content/widgets/notificationbox.js b/toolkit/content/widgets/notificationbox.js index 8cfc7b865c..fc3e553ca4 100644 --- a/toolkit/content/widgets/notificationbox.js +++ b/toolkit/content/widgets/notificationbox.js @@ -621,7 +621,7 @@ customElements.define("notification", MozElements.Notification); async function createNotificationMessageElement() { - await window.ensureCustomElements("moz-message-bar"); + document.createElement("moz-message-bar"); let MozMessageBar = await customElements.whenDefined("moz-message-bar"); class NotificationMessage extends MozMessageBar { static queries = { @@ -772,7 +772,6 @@ let buttonElem; if (button.hasOwnProperty("supportPage")) { - window.ensureCustomElements("moz-support-link"); buttonElem = document.createElement("a", { is: "moz-support-link", }); diff --git a/toolkit/content/widgets/panel-list/panel-list.js b/toolkit/content/widgets/panel-list/panel-list.js index 2e93b4ddc3..a2b6cb1a00 100644 --- a/toolkit/content/widgets/panel-list/panel-list.js +++ b/toolkit/content/widgets/panel-list/panel-list.js @@ -439,10 +439,6 @@ // using the mouse. Ignore the first focusin event if it's on the // triggering target. this.focusHasChanged = true; - } else if (!target || !inPanelList) { - // If the target isn't in the panel, hide. This will close when focus - // moves out of the panel. - this.hide(); } else { // Just record that there was a focusin event. this.focusHasChanged = true; diff --git a/toolkit/content/widgets/popupnotification.js b/toolkit/content/widgets/popupnotification.js index 835151496c..7dfa47728b 100644 --- a/toolkit/content/widgets/popupnotification.js +++ b/toolkit/content/widgets/popupnotification.js @@ -116,8 +116,6 @@ MozXULElement.insertFTLIfNeeded("toolkit/global/popupnotification.ftl"); this.appendChild(this.constructor.fragment); - window.ensureCustomElements("moz-button-group"); - this.button = this.querySelector(".popup-notification-primary-button"); if ( this.hasAttribute("buttonlabel") || diff --git a/toolkit/content/widgets/videocontrols.js b/toolkit/content/widgets/videocontrols.js index 73a32164aa..8d7b52c344 100644 --- a/toolkit/content/widgets/videocontrols.js +++ b/toolkit/content/widgets/videocontrols.js @@ -417,10 +417,9 @@ this.VideoControlsImplWidget = class { } // We have to check again if the media has audio here. - if (!this.isAudioOnly && !this.video.mozHasAudio) { - this.muteButton.setAttribute("noAudio", "true"); - this.muteButton.disabled = true; - } + let noAudio = !this.isAudioOnly && !this.video.mozHasAudio; + this.muteButton.toggleAttribute("noAudio", noAudio); + this.muteButton.disabled = noAudio; } // The video itself might not be fullscreen, but part of the @@ -755,7 +754,7 @@ this.VideoControlsImplWidget = class { ); } break; - case "loadedmetadata": + case "loadedmetadata": { // If a <video> doesn't have any video data, treat it as <audio> // and show the controls (they won't fade back out) if ( @@ -771,13 +770,13 @@ this.VideoControlsImplWidget = class { Math.round(this.video.currentTime * 1000), Math.round(this.video.duration * 1000) ); - if (!this.isAudioOnly && !this.video.mozHasAudio) { - this.muteButton.setAttribute("noAudio", "true"); - this.muteButton.disabled = true; - } + let noAudio = !this.isAudioOnly && !this.video.mozHasAudio; + this.muteButton.toggleAttribute("noAudio", noAudio); + this.muteButton.disabled = noAudio; this.adjustControlSize(); this.updatePictureInPictureToggleDisplay(); break; + } case "durationchange": this.updatePictureInPictureToggleDisplay(); break; diff --git a/toolkit/content/xul.css b/toolkit/content/xul.css index 908132d598..7f5b7aa295 100644 --- a/toolkit/content/xul.css +++ b/toolkit/content/xul.css @@ -600,20 +600,6 @@ menulist[popuponly] { padding: 0 !important; } -/********** splitter **********/ - -.tree-splitter { - margin-inline: -4px; - width: 8px; - max-width: 8px; - min-width: 8px; - appearance: none !important; - border: none !important; - background: none !important; - order: 2147483646; - z-index: 2147483646; -} - /******** scrollbar ********/ slider { |