diff --git a/browser/components/sidebar/SidebarState.sys.mjs b/browser/components/sidebar/SidebarState.sys.mjs index dd1f2c13b281..4d2e7499dc10 100644 --- a/browser/components/sidebar/SidebarState.sys.mjs +++ b/browser/components/sidebar/SidebarState.sys.mjs @@ -239,7 +239,7 @@ export class SidebarState { return; } // we need this set to verticalTabsEnabled to ensure it has the correct state when toggling the sidebar button - this.launcherExpanded = lazy.verticalTabsEnabled; + this.launcherExpanded = lazy.verticalTabsEnabled && visible; if (!visible && this.panelOpen) { // Hiding the launcher should also close out any open panels and resets panelOpen diff --git a/browser/components/sidebar/browser-sidebar.js b/browser/components/sidebar/browser-sidebar.js index 3912269f2b58..51eb54633020 100644 --- a/browser/components/sidebar/browser-sidebar.js +++ b/browser/components/sidebar/browser-sidebar.js @@ -1827,7 +1827,6 @@ XPCOMUtils.defineLazyPreferenceGetter( "always-show", (_aPreference, _previousValue, newValue) => { if (!SidebarController.uninitializing) { - SidebarController.updateToolbarButton(); SidebarController.recordVisibilitySetting(newValue); SidebarController._state.revampVisibility = newValue; SidebarController._state.updateVisibility( @@ -1835,6 +1834,7 @@ XPCOMUtils.defineLazyPreferenceGetter( SidebarController.sidebarVerticalTabsEnabled) || !SidebarController.sidebarVerticalTabsEnabled ); + SidebarController.updateToolbarButton(); } } ); @@ -1845,11 +1845,11 @@ XPCOMUtils.defineLazyPreferenceGetter( false, (_aPreference, _previousValue, newValue) => { if (!SidebarController.uninitializing) { + SidebarController.recordTabsLayoutSetting(newValue); Services.prefs.setStringPref( SidebarController.VISIBILITY_PREF, newValue ? "always-show" : "hide-sidebar" ); - SidebarController.recordTabsLayoutSetting(newValue); } } ); diff --git a/browser/components/sidebar/sidebar-customize.css b/browser/components/sidebar/sidebar-customize.css index 4add4e499c42..4a2a66aede1e 100644 --- a/browser/components/sidebar/sidebar-customize.css +++ b/browser/components/sidebar/sidebar-customize.css @@ -14,6 +14,10 @@ } } +.medium-top-margin { + margin-block-start: var(--space-medium); +} + .customize-header { display: flex; justify-content: space-between; @@ -61,7 +65,6 @@ font-weight: var(--font-weight-bold); } -moz-radio-group, moz-fieldset { display: block; @@ -75,7 +78,6 @@ moz-fieldset { } } -moz-radio, moz-checkbox { padding-block: var(--space-medium); @@ -83,6 +85,13 @@ moz-checkbox { border-bottom: 0.5px solid var(--panel-separator-color); } + > moz-checkbox:last-of-type { + padding-block: 0; + } +} + +.no-label::part(label) { + display: none; } #manage-settings { @@ -92,6 +101,6 @@ moz-checkbox { padding-inline-start: var(--space-medium); } -.customize-group { +.customize-group:not(.no-end-margin) { margin-block-end: var(--space-xlarge); } diff --git a/browser/components/sidebar/sidebar-customize.mjs b/browser/components/sidebar/sidebar-customize.mjs index 0aeff3c72e2b..4382303a80cc 100644 --- a/browser/components/sidebar/sidebar-customize.mjs +++ b/browser/components/sidebar/sidebar-customize.mjs @@ -6,9 +6,6 @@ import { html, when } from "chrome://global/content/vendor/lit.all.mjs"; import { SidebarPage } from "./sidebar-page.mjs"; -// eslint-disable-next-line import/no-unassigned-import -import "chrome://global/content/elements/moz-radio-group.mjs"; - const lazy = {}; ChromeUtils.defineESModuleGetters(lazy, { @@ -44,11 +41,11 @@ export class SidebarCustomize extends SidebarPage { }; static queries = { - toolInputs: { all: ".customize-group moz-checkbox" }, + toolInputs: { all: ".tool" }, extensionLinks: { all: ".extension-link" }, - positionInputs: { all: ".position-setting" }, - visibilityInputs: { all: ".visibility-setting" }, - verticalTabsInputs: { all: ".vertical-tabs-setting" }, + positionInput: "#position", + visibilityInput: "#hide-sidebar", + verticalTabsInput: "#vertical-tabs", }; connectedCallback() { @@ -94,6 +91,13 @@ export class SidebarCustomize extends SidebarPage { return this.getWindow().document.querySelector("sidebar-launcher"); } + get fluentStrings() { + if (!this._fluentStrings) { + this._fluentStrings = new Localization(["browser/sidebar.ftl"], true); + } + return this._fluentStrings; + } + getWindow() { return window.browsingContext.embedderWindowGlobal.browsingContext.window; } @@ -158,6 +162,7 @@ export class SidebarCustomize extends SidebarPage { } return html` + + + ${when( + this.verticalTabsEnabled, + () => html` + + ` + )} + + + + + ${this.getWindow() .SidebarController.getTools() @@ -262,91 +303,6 @@ export class SidebarCustomize extends SidebarPage { ` )} - ${when( - this.verticalTabsEnabled, - () => - html`
- - - - -
` - )} -
- - - - -
-
- - - - -
{ const component = document.querySelector("sidebar-customize"); - if (!component?.positionInputs || !component?.visibilityInputs) { + if ( + !component?.positionInput || + (win.SidebarController.sidebarVerticalTabsEnabled && + !component?.visibilityInput) + ) { return false; } return component; @@ -170,19 +174,22 @@ add_task(async function test_customize_position_setting() { () => BrowserTestUtils.isVisible(sidebarBox), "Sidebar panel is visible" ); - const [positionLeft, positionRight] = panel.positionInputs; - ok(positionLeft.checked, "The sidebar positioned on the left by default."); + + ok( + !panel.positionInput.checked, + "The sidebar positioned on the left by default." + ); is( sidebarBox.style.order, "3", "Sidebar box should have an order of 3 when on the left" ); EventUtils.synthesizeMouseAtCenter( - positionRight, + panel.positionInput, {}, win.SidebarController.browser.contentWindow ); - ok(positionRight.checked, "Sidebar is positioned on the right"); + ok(panel.positionInput.checked, "Sidebar is positioned on the right"); const newWin = await BrowserTestUtils.openNewBrowserWindow(); const newPanel = await showCustomizePanel(newWin); @@ -191,8 +198,8 @@ add_task(async function test_customize_position_setting() { () => BrowserTestUtils.isVisible(newSidebarBox), "Sidebar panel is visible" ); - const [, newPositionRight] = newPanel.positionInputs; - ok(newPositionRight.checked, "Position setting persists."); + + ok(newPanel.positionInput.checked, "Position setting persists."); is( newSidebarBox.style.order, "5", @@ -217,22 +224,20 @@ add_task(async function test_customize_visibility_setting() { const win = await BrowserTestUtils.openNewBrowserWindow(); const panel = await showCustomizePanel(win); - const [showInput, hideInput] = panel.visibilityInputs; - ok(showInput.checked, "Always show is enabled by default."); + ok(!panel.visibilityInput.checked, "Always show is enabled by default."); EventUtils.synthesizeMouseAtCenter( - hideInput, + panel.visibilityInput, {}, win.SidebarController.browser.contentWindow ); - ok(hideInput.checked, "Hide sidebar is enabled."); + ok(panel.visibilityInput.checked, "Hide sidebar is enabled."); await deferredPrefChange.promise; const newPrefValue = Services.prefs.getStringPref(SIDEBAR_VISIBILITY_PREF); is(newPrefValue, "hide-sidebar", "Visibility preference updated."); const newWin = await BrowserTestUtils.openNewBrowserWindow(); const newPanel = await showCustomizePanel(newWin); - const [, newHideInput] = newPanel.visibilityInputs; - ok(newHideInput.checked, "Visibility setting persists."); + ok(newPanel.visibilityInput.checked, "Visibility setting persists."); await BrowserTestUtils.closeWindow(win); await BrowserTestUtils.closeWindow(newWin); @@ -251,22 +256,23 @@ add_task(async function test_vertical_tabs_setting() { const win = await BrowserTestUtils.openNewBrowserWindow(); const panel = await showCustomizePanel(win); - const [verticalTabs, horizontalTabs] = panel.verticalTabsInputs; - ok(horizontalTabs.checked, "Horizontal tabs is enabled by default."); + ok( + !panel.verticalTabsInput.checked, + "Horizontal tabs is enabled by default." + ); EventUtils.synthesizeMouseAtCenter( - verticalTabs, + panel.verticalTabsInput, {}, win.SidebarController.browser.contentWindow ); - ok(verticalTabs.checked, "Vertical tabs is enabled."); + ok(panel.verticalTabsInput.checked, "Vertical tabs is enabled."); await deferredPrefChange.promise; const newPrefValue = Services.prefs.getBoolPref(TAB_DIRECTION_PREF); is(newPrefValue, true, "Vertical tabs pref updated."); const newWin = await BrowserTestUtils.openNewBrowserWindow(); const newPanel = await showCustomizePanel(newWin); - const [newVerticalTabs] = newPanel.verticalTabsInputs; - ok(newVerticalTabs.checked, "Vertical tabs setting persists."); + ok(newPanel.verticalTabsInput.checked, "Vertical tabs setting persists."); await BrowserTestUtils.closeWindow(win); await BrowserTestUtils.closeWindow(newWin); diff --git a/browser/components/sidebar/tests/browser/browser_glean_sidebar.js b/browser/components/sidebar/tests/browser/browser_glean_sidebar.js index 4befc1f7c1e7..182596c86da9 100644 --- a/browser/components/sidebar/tests/browser/browser_glean_sidebar.js +++ b/browser/components/sidebar/tests/browser/browser_glean_sidebar.js @@ -366,21 +366,18 @@ add_task(async function test_customize_extensions_clicked() { }); async function testCustomizeSetting( - inputs, + input, gleanEventOrMetric, firstExpected, - secondExpected, - reverseInputsOrder + secondExpected ) { await SidebarController.show("viewCustomizeSidebar"); - const { contentDocument, contentWindow } = SidebarController.browser; + const { contentDocument } = SidebarController.browser; const component = contentDocument.querySelector("sidebar-customize"); - const [firstInput, secondInput] = reverseInputsOrder - ? [...component[inputs]].reverse() - : component[inputs]; - info(`Toggle the setting for ${inputs}.`); - EventUtils.synthesizeMouseAtCenter(firstInput, {}, contentWindow); + info(`Toggle the setting for ${input}.`); + // Use click as the rect in synthesizeMouseAtCenter can change for the vertical tabs toggle + component[input].click(); await TestUtils.waitForTick(); let value = gleanEventOrMetric.testGetValue(); if (Array.isArray(value)) { @@ -390,7 +387,8 @@ async function testCustomizeSetting( Assert.equal(value, firstExpected); } - EventUtils.synthesizeMouseAtCenter(secondInput, {}, contentWindow); + info(`Toggle the setting for ${input}.`); + component[input].click(); await TestUtils.waitForTick(); value = gleanEventOrMetric.testGetValue(); if (Array.isArray(value)) { @@ -408,32 +406,29 @@ add_task(async function test_customize_sidebar_display() { set: [[TAB_DIRECTION_PREF, true]], }); await testCustomizeSetting( - "visibilityInputs", + "visibilityInput", Glean.sidebarCustomize.sidebarDisplay, { preference: "hide" }, - { preference: "always" }, - true + { preference: "always" } ); await SpecialPowers.popPrefEnv(); }); add_task(async function test_customize_sidebar_position() { await testCustomizeSetting( - "positionInputs", + "positionInput", Glean.sidebarCustomize.sidebarPosition, { position: "right" }, - { position: "left" }, - true + { position: "left" } ); }); add_task(async function test_customize_tabs_layout() { await testCustomizeSetting( - "verticalTabsInputs", + "verticalTabsInput", Glean.sidebarCustomize.tabsLayout, { orientation: "vertical" }, - { orientation: "horizontal" }, - false + { orientation: "horizontal" } ); }); @@ -484,32 +479,29 @@ add_task(async function test_sidebar_display_settings() { set: [[TAB_DIRECTION_PREF, true]], }); await testCustomizeSetting( - "visibilityInputs", + "visibilityInput", Glean.sidebar.displaySettings, "hide", - "always", - true + "always" ); await SpecialPowers.popPrefEnv(); }); add_task(async function test_sidebar_position_settings() { await testCustomizeSetting( - "positionInputs", + "positionInput", Glean.sidebar.positionSettings, "right", - "left", - true + "left" ); }); add_task(async function test_sidebar_tabs_layout() { await testCustomizeSetting( - "verticalTabsInputs", + "verticalTabsInput", Glean.sidebar.tabsLayout, "vertical", - "horizontal", - false + "horizontal" ); }); @@ -522,13 +514,13 @@ add_task(async function test_sidebar_position_rtl_ui() { // When RTL is enabled, sidebar is shown on the right by default. // Toggle position setting to move it to the left, then back to the right. await testCustomizeSetting( - "positionInputs", + "positionInput", Glean.sidebarCustomize.sidebarPosition, { position: "left" }, { position: "right" } ); await testCustomizeSetting( - "positionInputs", + "positionInput", Glean.sidebar.positionSettings, "left", "right" diff --git a/browser/locales/en-US/browser/sidebar.ftl b/browser/locales/en-US/browser/sidebar.ftl index 0547b5df7e80..5152e6c0a35b 100644 --- a/browser/locales/en-US/browser/sidebar.ftl +++ b/browser/locales/en-US/browser/sidebar.ftl @@ -48,24 +48,8 @@ sidebar-customize-extensions-header = Sidebar extensions sidebar-customize-firefox-tools-header = .label = { -brand-product-name } tools sidebar-customize-firefox-settings = Manage { -brand-short-name } settings -sidebar-position-left = - .label = Show on the left -sidebar-position-right = - .label = Show on the right sidebar-vertical-tabs = .label = Vertical tabs -sidebar-horizontal-tabs = - .label = Horizontal tabs -sidebar-customize-tabs-header = - .label = Tab settings -sidebar-customize-button-header = - .label = Sidebar button -sidebar-customize-position-header = - .label = Sidebar position -sidebar-visibility-setting-always-show = - .label = Expand and collapse sidebar -sidebar-visibility-setting-hide-sidebar = - .label = Show and hide sidebar sidebar-settings = .label = Sidebar settings sidebar-hide-tabs-and-sidebar = diff --git a/browser/themes/shared/icons/sidebar-hidden.svg b/browser/themes/shared/icons/sidebar-hidden.svg deleted file mode 100644 index a7e19dd73869..000000000000 --- a/browser/themes/shared/icons/sidebar-hidden.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/browser/themes/shared/icons/sidebar-horizontal-tabs.svg b/browser/themes/shared/icons/sidebar-horizontal-tabs.svg deleted file mode 100644 index a899782dd0e0..000000000000 --- a/browser/themes/shared/icons/sidebar-horizontal-tabs.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/browser/themes/shared/jar.inc.mn b/browser/themes/shared/jar.inc.mn index 0d080612d8b3..ab8b5a76e685 100644 --- a/browser/themes/shared/jar.inc.mn +++ b/browser/themes/shared/jar.inc.mn @@ -201,8 +201,6 @@ skin/classic/browser/sidebar-collapsed-right.svg (../shared/icons/sidebar-collapsed-right.svg) skin/classic/browser/sidebar-expanded.svg (../shared/icons/sidebar-expanded.svg) skin/classic/browser/sidebar-expanded-right.svg (../shared/icons/sidebar-expanded-right.svg) - skin/classic/browser/sidebar-hidden.svg (../shared/icons/sidebar-hidden.svg) - skin/classic/browser/sidebar-horizontal-tabs.svg (../shared/icons/sidebar-horizontal-tabs.svg) skin/classic/browser/sidebars.svg (../shared/icons/sidebars.svg) skin/classic/browser/sidebars-right.svg (../shared/icons/sidebars-right.svg) #ifndef MOZ_WIDGET_GTK