Bug 1899346 - Move CUI widgets out of the horizontal tabstrip when in vertical tabs mode. r=sidebar-reviewers,mconley,sclements,webdriver-reviewers,whimboo,tabbrowser-reviewers

* Ensure tabstrip widgets are temporarily removeable at browser init so the CUI placements are correctly applied
* Shuffle placements during initialization to build the correct toolbars for the verticalTabs pref value
* Notify on the 'tabstrip-orientation-change' topic when the verticalTabs pref changes and CUI placements have been updated
* Add tests for switching tabstrip orientation, and for initializing in verticalTabs mode

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

browser/components/sidebar/browser-sidebar.js

@@ -261,7 +261,7 @@ var SidebarController = {
     return this._toolbarButton;
   },
 
-  async init() {
+  init() {
     // Initialize with side effects
     this.SidebarManager;
 
@@ -318,9 +318,6 @@ var SidebarController = {
         this._mainResizeObserverAdded = true;
       }
 
-      if (this.sidebarVerticalTabsEnabled) {
-        this.toggleTabstrip();
-      }
       let newTabButton = document.getElementById("vertical-tabs-newtab-button");
       if (!this._verticalNewTabListenerAdded) {
         newTabButton.addEventListener("command", event => {
@@ -343,6 +340,11 @@ var SidebarController = {
         this._switcherListenersAdded = true;
       }
     }
+    // We need to update the tab strip for vertical tabs during init
+    // as there will be no tabstrip-orientation-change event
+    if (CustomizableUI.verticalTabsEnabled) {
+      this.toggleTabstrip();
+    }
 
     // sets the sidebar to the left or right, based on a pref
     this.setPosition();
@@ -353,6 +355,10 @@ var SidebarController = {
       Services.obs.addObserver(this, "intl:app-locales-changed");
       this._localesObserverAdded = true;
     }
+    if (!this._tabstripOrientationObserverAdded) {
+      Services.obs.addObserver(this, "tabstrip-orientation-change");
+      this._tabstripOrientationObserverAdded = true;
+    }
 
     this._initDeferred.resolve();
   },
@@ -371,6 +377,8 @@ var SidebarController = {
     }
 
     Services.obs.removeObserver(this, "intl:app-locales-changed");
+    Services.obs.removeObserver(this, "tabstrip-orientation-change");
+    delete this._tabstripOrientationObserverAdded;
 
     if (this._observer) {
       this._observer.disconnect();
@@ -406,6 +414,11 @@ var SidebarController = {
         if (this.revampComponentsLoaded) {
           this.sidebarMain.requestUpdate();
         }
+        break;
+      }
+      case "tabstrip-orientation-change": {
+        this.promiseInitialized.then(() => this.toggleTabstrip());
+        break;
       }
     }
   },
@@ -592,7 +605,8 @@ var SidebarController = {
     if (!this._sidebars.get(this.lastOpenedId)) {
       this.lastOpenedId = this.DEFAULT_SIDEBAR_ID;
     }
-    await this.init();
+    this._inited = false;
+    this.init();
   },
 
   /**
@@ -1516,40 +1530,33 @@ var SidebarController = {
   },
 
   toggleTabstrip() {
-    let tabStrip = document.getElementById("tabbrowser-tabs");
+    let toVerticalTabs = CustomizableUI.verticalTabsEnabled;
     let arrowScrollbox = gBrowser.tabContainer.arrowScrollbox;
-    let verticalTabs = document.getElementById("vertical-tabs");
+    let currentScrollOrientation = arrowScrollbox.getAttribute("orient");
 
-    let tabsToolbarWidgets = CustomizableUI.getWidgetIdsInArea("TabsToolbar");
-    let tabstripPlacement = tabsToolbarWidgets.findIndex(
-      item => item == "tabbrowser-tabs"
-    );
+    if (
+      (!toVerticalTabs && currentScrollOrientation !== "vertical") ||
+      (toVerticalTabs && currentScrollOrientation === "vertical")
+    ) {
+      // Nothing to update
+      return;
+    }
 
-    if (this.sidebarVerticalTabsEnabled) {
+    let tabStrip = gBrowser.tabContainer;
+    if (toVerticalTabs) {
       this.toggleExpanded(this._sidebarMain.expanded);
       arrowScrollbox.setAttribute("orient", "vertical");
       tabStrip.setAttribute("orient", "vertical");
-      verticalTabs.append(tabStrip);
     } else {
       arrowScrollbox.setAttribute("orient", "horizontal");
       tabStrip.removeAttribute("expanded");
       tabStrip.setAttribute("orient", "horizontal");
-
-      // make sure we put the tabstrip back in its original position in the TabsToolbar
-      if (tabstripPlacement < tabsToolbarWidgets.length) {
-        document
-          .getElementById("TabsToolbar-customization-target")
-          .insertBefore(
-            tabStrip,
-            document.getElementById(tabsToolbarWidgets[tabstripPlacement + 1])
-          );
-      } else {
-        document
-          .getElementById("TabsToolbar-customization-target")
-          .append(tabStrip);
-      }
     }
-    verticalTabs.toggleAttribute("visible", this.sidebarVerticalTabsEnabled);
+
+    let verticalToolbar = document.getElementById(
+      CustomizableUI.AREA_VERTICAL_TABSTRIP
+    );
+    verticalToolbar.toggleAttribute("visible", toVerticalTabs);
   },
 };
 
@@ -1602,10 +1609,5 @@ XPCOMUtils.defineLazyPreferenceGetter(
   SidebarController,
   "sidebarVerticalTabsEnabled",
   "sidebar.verticalTabs",
-  false,
-  () => {
-    if (!SidebarController.uninitializing) {
-      SidebarController.toggleTabstrip();
-    }
-  }
+  false
 );