Bug 1926360 - Save customized fxview, list all tabs button and other tab strip widget locations in nav bar when vertical tabs enabled r=sidebar-reviewers,sclements,mconley

We want the nav-bar customizations to be the same across vertical and horizontal tabs mode, minus the Fxview, "list all tabs" buttons, and any other tab strip widgets moved to the nav-bar.
- If the Fxview and "list all tabs" buttons and tab-strip widgets are removed in the nav-bar in vertical mode, they are removed from the tab-strip when switching back to horizontal mode.
- If the Fxview and "list all tabs" buttons and tab-strip widgets are moved in the nav-bar in vertical mode, this should be remembered for vertical mode. Their positions in horizontal mode should remain as they were in horizontal mode.

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

browser/components/customizableui/CustomizableUI.sys.mjs

@@ -34,6 +34,8 @@ const kPrefCustomizationHorizontalTabstrip =
   "browser.uiCustomization.horizontalTabstrip";
 const kPrefCustomizationHorizontalTabsBackup =
   "browser.uiCustomization.horizontalTabsBackup";
+const kPrefCustomizationNavBarWhenVerticalTabs =
+  "browser.uiCustomization.navBarWhenVerticalTabs";
 const kPrefCustomizationAutoAdd = "browser.uiCustomization.autoAdd";
 const kPrefCustomizationDebug = "browser.uiCustomization.debug";
 const kPrefDrawInTitlebar = "browser.tabs.inTitlebar";
@@ -246,6 +248,13 @@ XPCOMUtils.defineLazyPreferenceGetter(
   ""
 );
 
+XPCOMUtils.defineLazyPreferenceGetter(
+  lazy,
+  "verticalPlacementsPref",
+  kPrefCustomizationNavBarWhenVerticalTabs,
+  ""
+);
+
 ChromeUtils.defineLazyGetter(lazy, "log", () => {
   let { ConsoleAPI } = ChromeUtils.importESModule(
     "resource://gre/modules/Console.sys.mjs"
@@ -2669,9 +2678,11 @@ var CustomizableUIInternal = {
     if (
       !gInBatchStack &&
       CustomizableUI.verticalTabsEnabled &&
-      oldPlacement.area == CustomizableUI.AREA_TABSTRIP
+      oldPlacement.area == CustomizableUI.AREA_NAVBAR &&
+      this.getSavedHorizontalSnapshotState().includes(aWidgetId)
     ) {
       this.deleteWidgetInSavedHorizontalTabStripState(aWidgetId);
+      this.deleteWidgetInSavedNavBarWhenVerticalTabsState(aWidgetId);
     }
 
     this.notifyListeners("onWidgetRemoved", aWidgetId, oldPlacement.area);
@@ -2725,7 +2736,7 @@ var CustomizableUIInternal = {
   },
 
   getSavedHorizontalSnapshotState() {
-    let state = null;
+    let state = [];
     let prefValue = lazy.horizontalPlacementsPref;
     if (prefValue) {
       try {
@@ -2740,6 +2751,22 @@ var CustomizableUIInternal = {
     return state;
   },
 
+  getSavedVerticalSnapshotState() {
+    let state = [];
+    let prefValue = lazy.verticalPlacementsPref;
+    if (prefValue) {
+      try {
+        state = JSON.parse(prefValue);
+      } catch (e) {
+        lazy.log.warn(
+          `Failed to parse value of ${kPrefCustomizationNavBarWhenVerticalTabs}`,
+          e
+        );
+      }
+    }
+    return state;
+  },
+
   // Note that this does not populate gPlacements, which is done lazily.
   // The panel area is an exception here.
   loadSavedState() {
@@ -2908,6 +2935,15 @@ var CustomizableUIInternal = {
     }
   },
 
+  deleteWidgetInSavedNavBarWhenVerticalTabsState(aWidgetId) {
+    const savedPlacements = this.getSavedVerticalSnapshotState();
+    let position = savedPlacements.indexOf(aWidgetId);
+    if (position != -1) {
+      savedPlacements.splice(position, 1);
+      this.saveNavBarWhenVerticalTabsState(savedPlacements);
+    }
+  },
+
   saveHorizontalTabStripState(placements = []) {
     if (!placements.length) {
       placements = this.getAreaPlacementsForSaving(
@@ -2922,6 +2958,18 @@ var CustomizableUIInternal = {
     );
   },
 
+  saveNavBarWhenVerticalTabsState(placements = []) {
+    if (!placements.length) {
+      placements = this.getAreaPlacementsForSaving(CustomizableUI.AREA_NAVBAR);
+    }
+    let serialized = JSON.stringify(placements, this.serializerHelper);
+    lazy.log.debug("Saving vertical navbar state.", serialized);
+    Services.prefs.setCharPref(
+      kPrefCustomizationNavBarWhenVerticalTabs,
+      serialized
+    );
+  },
+
   getAreaPlacementsForSaving(area) {
     // An early call to saveState can occur before all the lazy-area building is complete
     let placements;
@@ -4249,6 +4297,8 @@ var CustomizableUIInternal = {
       }
 
       CustomizableUI.beginBatchUpdate();
+      let customVerticalNavbarPlacements = this.getSavedVerticalSnapshotState();
+      let tabstripPlacements = this.getSavedHorizontalSnapshotState();
       // Remove non-default widgets to the nav-bar
       for (let id of CustomizableUI.getWidgetIdsInArea("TabsToolbar")) {
         if (id == "tabbrowser-tabs") {
@@ -4258,6 +4308,13 @@ var CustomizableUIInternal = {
           );
           continue;
         }
+        // We add the tab strip placements later in the case they have a custom position
+        if (
+          tabstripPlacements.includes(id) &&
+          customVerticalNavbarPlacements.includes(id)
+        ) {
+          continue;
+        }
         if (!CustomizableUI.isWidgetRemovable(id)) {
           continue;
         }
@@ -4268,10 +4325,16 @@ var CustomizableUIInternal = {
         // Everything else gets moved to the nav-bar area while tabs are vertical
         CustomizableUI.addWidgetToArea(id, CustomizableUI.AREA_NAVBAR);
       }
-      // Remove new tab from AREA_NAVBAR when vertical tabs enabled.
+      // Remove new tab from nav-bar when vertical tabs enabled
       this.removeWidgetFromArea("new-tab-button");
+      customVerticalNavbarPlacements.forEach((id, index) => {
+        if (tabstripPlacements.includes(id)) {
+          CustomizableUI.addWidgetToArea(id, CustomizableUI.AREA_NAVBAR, index);
+        }
+      });
       CustomizableUI.endBatchUpdate();
     } else {
+      this.saveNavBarWhenVerticalTabsState();
       // We're switching to vertical in this session; pull saved state from pref and update placements
       this.restoreSavedHorizontalTabStripState();
     }