Bug 1939917 - Update Sidebar visibility settings and settings order r=sidebar-reviewers,fluent-reviewers,desktop-theme-reviewers,bolsson,sclements,hjones

- change order of settings as per spec
- only show visibilty settings if vertical tabs enabled

Depends on D234592

Differential Revision: https://phabricator.services.mozilla.com/D235178

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`
       <moz-checkbox
+        class="tool"
         type="checkbox"
         id=${tool.view}
         name=${tool.view}
@@ -242,6 +247,42 @@ export class SidebarCustomize extends SidebarPage {
       <div class="sidebar-panel">
         <sidebar-panel-header data-l10n-id="sidebar-menu-customize-header" data-l10n-attrs="heading" view="viewCustomizeSidebar">
         </sidebar-panel-header>
+        <moz-fieldset class="customize-group no-end-margin" data-l10n-id="sidebar-settings">
+          <moz-checkbox
+            type="checkbox"
+            id="vertical-tabs"
+            name="verticalTabs"
+            iconsrc="chrome://browser/skin/sidebar-collapsed.svg"
+            data-l10n-id="sidebar-vertical-tabs"
+            @change=${this.#handleTabDirectionChange}
+            ?checked=${this.verticalTabsEnabled}
+          >
+            ${when(
+              this.verticalTabsEnabled,
+              () => html`
+                <moz-checkbox
+                  slot="nested"
+                  type="checkbox"
+                  id="hide-sidebar"
+                  name="hideSidebar"
+                  data-l10n-id="sidebar-hide-tabs-and-sidebar"
+                  @change=${this.#handleVisibilityChange}
+                  ?checked=${this.visibility == "hide-sidebar"}
+                ></moz-checkbox>
+              `
+            )}
+          </moz-checkbox>
+        </moz-fieldset>
+        <moz-fieldset class="customize-group medium-top-margin no-label">
+          <moz-checkbox
+            type="checkbox"
+            id="position"
+            name="position"
+            data-l10n-id=${document.dir == "rtl" ? "sidebar-show-on-the-left" : "sidebar-show-on-the-right"}
+            @change=${this.reversePosition}
+            ?checked=${!this.getWindow().SidebarController._positionStart}
+        ></moz-checkbox>
+        </moz-fieldset>
         <moz-fieldset class="customize-group" data-l10n-id="sidebar-customize-firefox-tools-header">
           ${this.getWindow()
             .SidebarController.getTools()
@@ -262,91 +303,6 @@ export class SidebarCustomize extends SidebarPage {
               </div>
             </div>`
         )}
-        ${when(
-          this.verticalTabsEnabled,
-          () =>
-            html`<div class="customize-group">
-              <moz-radio-group
-                @change=${this.#handleVisibilityChange}
-                name="visibility"
-                data-l10n-id="sidebar-customize-button-header"
-              >
-                <moz-radio
-                  class="visibility-setting"
-                  value="always-show"
-                  ?checked=${this.visibility === "always-show"}
-                  iconsrc="chrome://browser/skin/sidebar-expanded.svg"
-                  data-l10n-id="sidebar-visibility-setting-always-show"
-                ></moz-radio>
-                <moz-radio
-                  class="visibility-setting"
-                  value="hide-sidebar"
-                  ?checked=${this.visibility === "hide-sidebar"}
-                  iconsrc="chrome://browser/skin/sidebar-hidden.svg"
-                  data-l10n-id="sidebar-visibility-setting-hide-sidebar"
-                ></moz-radio>
-              </moz-radio-group>
-            </div>`
-        )}
-        <div class="customize-group">
-          <moz-radio-group
-              @change=${this.reversePosition}
-              name="position"
-              data-l10n-id="sidebar-customize-position-header">
-            <moz-radio
-              class="position-setting"
-              id="position-left"
-              value=${!this.getWindow().RTL_UI}
-              ?checked=${
-                this.getWindow().RTL_UI
-                  ? !this.getWindow().SidebarController._positionStart
-                  : this.getWindow().SidebarController._positionStart
-              }
-              iconsrc="chrome://browser/skin/sidebar-expanded.svg"
-              data-l10n-id="sidebar-position-left"
-            ></moz-radio>
-            <moz-radio
-              class="position-setting"
-              id="position-right"
-              value=${this.getWindow().RTL_UI}
-              ?checked=${
-                this.getWindow().RTL_UI
-                  ? this.getWindow().SidebarController._positionStart
-                  : !this.getWindow().SidebarController._positionStart
-              }
-              iconsrc="chrome://browser/skin/sidebar-expanded-right.svg"
-              data-l10n-id="sidebar-position-right"
-            ></moz-radio>
-          </moz-radio-group>
-        </div>
-        <div class="customize-group">
-          <moz-radio-group
-              @change=${this.#handleTabDirectionChange}
-              name="tabDirection"
-              data-l10n-id="sidebar-customize-tabs-header">
-            <moz-radio
-              class="vertical-tabs-setting"
-              id="vertical-tabs"
-              value=${true}
-              ?checked=${
-                this.getWindow().SidebarController.sidebarVerticalTabsEnabled
-              }
-              iconsrc="chrome://browser/skin/sidebar-collapsed.svg"
-              data-l10n-id="sidebar-vertical-tabs"
-            ></moz-radio>
-            <moz-radio
-              class="vertical-tabs-setting"
-              id="horizontal-tabs"
-              value=${false}
-              ?checked=${
-                this.getWindow().SidebarController
-                  .sidebarVerticalTabsEnabled === false
-              }
-              iconsrc="chrome://browser/skin/sidebar-horizontal-tabs.svg"
-              data-l10n-id="sidebar-horizontal-tabs"
-            ></moz-radio>
-          </moz-radio-group>
-        </div>
         <div id="manage-settings">
           <img src="chrome://browser/skin/preferences/category-general.svg" class="icon" role="presentation" />
           <a
@@ -361,16 +317,20 @@ export class SidebarCustomize extends SidebarPage {
     `;
   }
 
-  #handleVisibilityChange({ target: { value } }) {
-    this.visibility = value;
-    Services.prefs.setStringPref(VISIBILITY_SETTING_PREF, value);
+  #handleVisibilityChange(e) {
+    e.stopPropagation();
+    this.visibility = e.target.checked ? "hide-sidebar" : "always-show";
+    Services.prefs.setStringPref(
+      VISIBILITY_SETTING_PREF,
+      e.target.checked ? "hide-sidebar" : "always-show"
+    );
     Glean.sidebarCustomize.sidebarDisplay.record({
-      preference: value === "always-show" ? "always" : "hide",
+      preference: e.target.checked ? "hide" : "always",
     });
   }
 
-  #handleTabDirectionChange({ target: { value } }) {
-    const verticalTabsEnabled = value === "true";
+  #handleTabDirectionChange({ target: { checked } }) {
+    const verticalTabsEnabled = checked;
     Services.prefs.setBoolPref(TAB_DIRECTION_SETTING_PREF, verticalTabsEnabled);
     Glean.sidebarCustomize.tabsLayout.record({
       orientation: verticalTabsEnabled ? "vertical" : "horizontal",