fix: Fixed unpining split view group still marking a tab as changed, b=(no-bug), c=folders

Signed-off-by: mr. m  <91018726+mauro-balades@users.noreply.github.com>

README.md

@@ -1,3 +1,4 @@
+<!-- TODO: Get a job -->
 <img src="./docs/assets/zen-dark.svg" width="100px" align="left">
 
 ### `Zen Browser`

src/browser/components/tabbrowser/content/tabs-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bffdf463489 100644
+index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..b413b4bc9d86726b0f8936a3422636ed3ca882e1 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -83,7 +83,7 @@
@@ -136,7 +136,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
      }
  
      get verticalMode() {
-@@ -1606,29 +1636,53 @@
+@@ -1606,29 +1636,55 @@
        if (this.#allTabs) {
          return this.#allTabs;
        }
@@ -173,19 +173,21 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
          ...children,
        ];
 +      const lastPinnedTabIdx = pinnedTabs.length - 1;
-+      for (let i = 0; i < allTabs.length; i++) {
++      let i = 0;
++      for (const tab of [...allTabs]) {
 +        // add glance tabs (tabs inside tabs) to the list
-+        const glanceTab = allTabs[i].glanceTab;
++        const glanceTab = tab.glanceTab;
 +        if (glanceTab) {
 +          // insert right after the parent tab. note: it must be inserted before
 +          // the last pinned tab so it can be inserted in the correct order
 +          allTabs.splice(Math.max(i + 1, lastPinnedTabIdx), 0, glanceTab);
 +          i++;
-+        } else if (allTabs[i].classList.contains("vertical-pinned-tabs-container-separator")) {
++        } else if (tab.classList.contains("vertical-pinned-tabs-container-separator")) {
 +          // remove the separator from the list
 +          allTabs.splice(i, 1);
 +          i--;
 +        }
++        i++;
 +      }
 +      this.#allTabs = allTabs;
        return this.#allTabs;
@@ -198,7 +200,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
      }
  
      /**
-@@ -1648,7 +1702,7 @@
+@@ -1648,7 +1704,7 @@
       */
      get visibleTabs() {
        if (!this.#visibleTabs) {
@@ -207,7 +209,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
        }
        return this.#visibleTabs;
      }
-@@ -1683,36 +1737,40 @@
+@@ -1683,36 +1739,40 @@
        }
  
        let elementIndex = 0;
@@ -261,7 +263,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
  
        return this.#focusableItems;
      }
-@@ -1720,6 +1778,7 @@
+@@ -1720,6 +1780,7 @@
      _invalidateCachedTabs() {
        this.#allTabs = null;
        this._invalidateCachedVisibleTabs();
@@ -269,7 +271,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
      }
  
      _invalidateCachedVisibleTabs() {
-@@ -1734,8 +1793,8 @@
+@@ -1734,8 +1795,8 @@
      #isContainerVerticalPinnedGrid(tab) {
        return (
          this.verticalMode &&
@@ -280,7 +282,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
          !this.expandOnHover
        );
      }
-@@ -1751,7 +1810,7 @@
+@@ -1751,7 +1812,7 @@
  
        if (node == null) {
          // We have a container for non-tab elements at the end of the scrollbox.
@@ -289,7 +291,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
        }
  
        node.before(tab);
-@@ -1846,7 +1905,7 @@
+@@ -1846,7 +1907,7 @@
            // There are separate "new tab" buttons for horizontal tabs toolbar, vertical tabs and
            // for when the tab strip is overflowed (which is shared by vertical and horizontal tabs);
            // Attach the long click popup to all of them.
@@ -298,7 +300,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
            const newTab2 = this.newTabButton;
            const newTabVertical = document.getElementById(
              "vertical-tabs-newtab-button"
-@@ -1941,10 +2000,12 @@
+@@ -1941,10 +2002,12 @@
  
      _handleTabSelect(aInstant) {
        let selectedTab = this.selectedItem;
@@ -311,7 +313,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
        selectedTab._notselectedsinceload = false;
      }
  
-@@ -2085,16 +2146,15 @@
+@@ -2085,16 +2148,15 @@
        // Move pinned tabs to another container when the tabstrip is toggled to vertical
        // and when session restore code calls _positionPinnedTabs; update styling whenever
        // the number of pinned tabs changes.
@@ -334,7 +336,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
          }
        }
  
-@@ -2102,9 +2162,7 @@
+@@ -2102,9 +2164,7 @@
      }
  
      _resetVerticalPinnedTabs() {
@@ -345,7 +347,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
  
        if (!verticalTabsContainer.children.length) {
          return;
-@@ -2117,7 +2175,7 @@
+@@ -2117,7 +2177,7 @@
      }
  
      _positionPinnedTabs() {
@@ -354,7 +356,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
        let numPinned = gBrowser.pinnedTabCount;
        let absPositionHorizontalTabs =
          this.overflowing && tabs.length > numPinned && numPinned > 0;
-@@ -2127,7 +2185,7 @@
+@@ -2127,7 +2187,7 @@
  
        if (this.verticalMode) {
          this._updateVerticalPinnedTabs();
@@ -363,7 +365,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
          let layoutData = this._pinnedTabsLayoutCache;
          let uiDensity = document.documentElement.getAttribute("uidensity");
          if (!layoutData || layoutData.uiDensity != uiDensity) {
-@@ -2191,7 +2249,7 @@
+@@ -2191,7 +2251,7 @@
          return;
        }
  
@@ -372,7 +374,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
  
        let directionX = screenX > dragData.animLastScreenX;
        let directionY = screenY > dragData.animLastScreenY;
-@@ -2199,7 +2257,7 @@
+@@ -2199,7 +2259,7 @@
        dragData.animLastScreenX = screenX;
  
        let { width: tabWidth, height: tabHeight } =
@@ -381,7 +383,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
        let shiftSizeX = tabWidth * movingTabs.length;
        let shiftSizeY = tabHeight;
        dragData.tabWidth = tabWidth;
-@@ -2262,7 +2320,7 @@
+@@ -2262,7 +2322,7 @@
        // * We're doing a binary search in order to reduce the amount of
        //   tabs we need to check.
  
@@ -390,7 +392,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
        let firstTabCenterX = firstMovingTabScreenX + translateX + tabWidth / 2;
        let lastTabCenterX = lastMovingTabScreenX + translateX + tabWidth / 2;
        let tabCenterX = directionX ? lastTabCenterX : firstTabCenterX;
-@@ -2374,12 +2432,16 @@
+@@ -2374,12 +2434,16 @@
  
        this.#clearDragOverCreateGroupTimer();
  
@@ -412,7 +414,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
  
        if (this.#rtlMode) {
          tabs.reverse();
-@@ -2393,7 +2455,7 @@
+@@ -2393,7 +2457,7 @@
        let size = this.verticalMode ? "height" : "width";
        let translateAxis = this.verticalMode ? "translateY" : "translateX";
        let scrollDirection = this.verticalMode ? "scrollTop" : "scrollLeft";
@@ -421,7 +423,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
        let translateX = event.screenX - dragData.screenX;
        let translateY = event.screenY - dragData.screenY;
  
-@@ -2407,12 +2469,21 @@
+@@ -2407,12 +2471,21 @@
        let lastTab = tabs.at(-1);
        let lastMovingTab = movingTabs.at(-1);
        let firstMovingTab = movingTabs[0];
@@ -444,7 +446,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
          translate +=
            this.arrowScrollbox.scrollbox[scrollDirection] - dragData.scrollPos;
        } else if (isPinned && this.verticalMode) {
-@@ -2431,12 +2502,15 @@
+@@ -2431,12 +2504,15 @@
            // Shift the `.tab-group-label-container` to shift the label element.
            item = item.parentElement;
          }
@@ -461,7 +463,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
  
        /**
         * When the `draggedTab` is just starting to move, the `draggedTab` is in
-@@ -2568,6 +2642,9 @@
+@@ -2568,6 +2644,9 @@
              break;
            }
            let element = tabs[mid];
@@ -471,7 +473,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
            let elementForSize = isTabGroupLabel(element)
              ? element.parentElement
              : element;
-@@ -2588,7 +2665,11 @@
+@@ -2588,7 +2667,11 @@
  
        let dropElement = getOverlappedElement();
        if (!dropElement) {
@@ -484,7 +486,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
        }
        let newDropElementIndex = dropElement
          ? dropElement.elementIndex
-@@ -2598,7 +2679,7 @@
+@@ -2598,7 +2681,7 @@
        let shouldCreateGroupOnDrop;
        let dropBefore;
        if (dropElement) {
@@ -493,7 +495,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
            ? dropElement.parentElement
            : dropElement;
  
-@@ -2660,12 +2741,12 @@
+@@ -2660,12 +2743,12 @@
          }
        }
  
@@ -508,7 +510,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
            dropElement != draggedTab &&
            isTab(dropElement) &&
            !dropElement?.group &&
-@@ -2735,7 +2816,7 @@
+@@ -2735,7 +2818,7 @@
        // Shift background tabs to leave a gap where the dragged tab
        // would currently be dropped.
        for (let item of tabs) {
@@ -517,7 +519,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
            continue;
          }
  
-@@ -2744,6 +2825,9 @@
+@@ -2744,6 +2827,9 @@
          if (isTabGroupLabel(item)) {
            // Shift the `.tab-group-label-container` to shift the label element.
            item = item.parentElement;
@@ -527,7 +529,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
          }
          item.style.transform = transform;
        }
-@@ -2796,8 +2880,9 @@
+@@ -2796,8 +2882,9 @@
        );
      }
  
@@ -539,7 +541,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
          return;
        }
  
-@@ -2809,6 +2894,12 @@
+@@ -2809,6 +2896,12 @@
            item = item.parentElement;
          }
          item.style.transform = "";
@@ -552,7 +554,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
          item.removeAttribute("dragover-createGroup");
        }
        this.removeAttribute("movingtab-createGroup");
-@@ -2855,7 +2946,7 @@
+@@ -2855,7 +2948,7 @@
          let postTransitionCleanup = () => {
            movingTab._moveTogetherSelectedTabsData.animate = false;
          };
@@ -561,7 +563,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
            postTransitionCleanup();
          } else {
            let onTransitionEnd = transitionendEvent => {
-@@ -3028,7 +3119,7 @@
+@@ -3028,7 +3121,7 @@
      }
  
      _notifyBackgroundTab(aTab) {
@@ -570,7 +572,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..e8d5dc64609522b440fb01990fb19bff
          return;
        }
  
-@@ -3154,6 +3245,9 @@
+@@ -3154,6 +3247,9 @@
            return null;
          }
        }

src/toolkit/content/widgets/tabbox-js.patch

@@ -1,5 +1,5 @@
 diff --git a/toolkit/content/widgets/tabbox.js b/toolkit/content/widgets/tabbox.js
-index 6775a7635c6cdbb276b3a912d0bba07840acb28f..4ef3eb6a7dbd741cf432668c2ff6e832f5bb97e7 100644
+index 6775a7635c6cdbb276b3a912d0bba07840acb28f..861640d12c6118e11acb3f51723a79098dbbba10 100644
 --- a/toolkit/content/widgets/tabbox.js
 +++ b/toolkit/content/widgets/tabbox.js
 @@ -213,7 +213,7 @@
@@ -7,7 +7,7 @@ index 6775a7635c6cdbb276b3a912d0bba07840acb28f..4ef3eb6a7dbd741cf432668c2ff6e832
        this._inAsyncOperation = false;
        if (oldPanel != this._selectedPanel) {
 -        oldPanel?.classList.remove("deck-selected");
-+        if (!oldPanel?.classList.contains("zen-glance-background")) oldPanel?.classList.remove("deck-selected");
++        if (!(window.gZenGlanceManager && gZenGlanceManager.shouldShowDeckSelected(this._selectedPanel, oldPanel))) oldPanel?.classList.remove("deck-selected");
          this._selectedPanel?.classList.add("deck-selected");
        }
        this.setAttribute("selectedIndex", val);

src/zen/common/ZenStartup.mjs

@@ -35,7 +35,7 @@
         // Fix notification deck
         const deckTemplate = document.getElementById('tab-notification-deck-template');
         if (deckTemplate) {
-          document.getElementById('zen-appcontent-navbar-container').appendChild(deckTemplate);
+          document.getElementById('zen-appcontent-wrapper').prepend(deckTemplate);
         }
 
         this._hideUnusedElements();

src/zen/common/styles/zen-browser-container.css

@@ -10,13 +10,15 @@
     position: relative;
     overflow: hidden;
 
-    :root:not([zen-no-padding='true']) & {
-      border-radius: var(--zen-native-inner-radius);
-      box-shadow: var(--zen-big-shadow);
-    }
+    &.browserSidebarContainer {
+      :root:not([zen-no-padding='true']) & {
+        border-radius: var(--zen-native-inner-radius);
+        box-shadow: var(--zen-big-shadow);
+      }
 
-    & browser[transparent='true'] {
-      background: rgba(255, 255, 255, 0.1);
+      & browser[transparent='true'] {
+        background: rgba(255, 255, 255, 0.1);
+      }
     }
   }
 

src/zen/common/styles/zen-theme.css

@@ -199,6 +199,16 @@
     --zen-themed-toolbar-bg-transparent: transparent;
   }
 
+  &[zen-private-window='true'] {
+    --zen-main-browser-background: linear-gradient(
+      130deg,
+      light-dark(rgb(247, 217, 255), rgb(10, 6, 11)) 0%,
+      light-dark(rgb(242, 198, 255), rgb(19, 7, 22)) 100%
+    );
+    --zen-main-browser-background-toolbar: var(--zen-main-browser-background);
+    --zen-primary-color: light-dark(rgb(93, 42, 107), rgb(110, 48, 125)) !important;
+  }
+
   --toolbar-field-background-color: var(--zen-colors-input-bg) !important;
   --arrowpanel-background: var(--zen-dialog-background) !important;
 

src/zen/folders/ZenFolders.mjs

@@ -81,6 +81,7 @@
       if (group.hasAttribute('split-view-group') && !this._piningFolder) {
         this._piningFolder = true;
         for (const otherTab of group.tabs) {
+          gZenPinnedTabManager.resetPinChangedUrl(otherTab);
           if (tab === otherTab) {
             continue;
           }

src/zen/glance/ZenGlanceManager.mjs

@@ -720,6 +720,27 @@
       }
       return tab;
     }
+
+    shouldShowDeckSelected(currentPanel, oldPanel) {
+      // Dont remove if it's a glance background and current panel corresponds to a glance
+      const currentBrowser = currentPanel?.querySelector('browser');
+      const oldBrowser = oldPanel?.querySelector('browser');
+      if (!currentBrowser || !oldBrowser) {
+        return false;
+      }
+      const currentTab = gBrowser.getTabForBrowser(currentBrowser);
+      const oldTab = gBrowser.getTabForBrowser(oldBrowser);
+      if (currentTab && oldTab) {
+        const currentGlanceID = currentTab.getAttribute('glance-id');
+        const oldGlanceID = oldTab.getAttribute('glance-id');
+        if (currentGlanceID && oldGlanceID) {
+          return (
+            currentGlanceID === oldGlanceID && oldPanel.classList.contains('zen-glance-background')
+          );
+        }
+      }
+      return false;
+    }
   }
 
   window.gZenGlanceManager = new ZenGlanceManager();

src/zen/split-view/ZenViewSplitter.mjs

@@ -335,6 +335,10 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       ]);
       if (this._finishAllAnimatingPromise) {
         this._finishAllAnimatingPromise.then(() => {
+          draggedTab.linkedBrowser.docShellIsActive = false;
+          draggedTab.linkedBrowser
+            .closest('.browserSidebarContainer')
+            .classList.remove('deck-selected');
           this.fakeBrowser.addEventListener('dragleave', this.onBrowserDragEndToSplit);
           this._canDrop = true;
           draggedTab._visuallySelected = true;
@@ -1630,7 +1634,9 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
         : containerRect.left - padding - 5,
       event.clientY
     );
-    const browser = dropTarget?.closest('browser');
+    const browser =
+      dropTarget?.closest('browser') ??
+      dropTarget?.closest('.browserSidebarContainer')?.querySelector('browser');
 
     if (!browser) {
       this._maybeRemoveFakeBrowser(false);
@@ -1644,7 +1650,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       browserContainer.style.opacity = '0';
     }
 
-    const droppedOnTab = gBrowser.getTabForBrowser(browser);
+    const droppedOnTab = gZenGlanceManager.getTabOrGlanceParent(gBrowser.getTabForBrowser(browser));
     if (droppedOnTab && droppedOnTab !== draggedTab) {
       // Calculate which side of the target browser the drop occurred
       // const browserRect = browser.getBoundingClientRect();

src/zen/tabs/ZenPinnedTabManager.mjs

@@ -151,7 +151,7 @@
           document.documentElement.getAttribute('chromehidden')?.includes('menubar')
         );
       }
-      return this._enabled;
+      return this._enabled && !gZenWorkspaces.privateWindowOrDisabled;
     }
 
     async _refreshPinnedTabs({ init = false } = {}) {
@@ -752,6 +752,9 @@
     }
 
     _insertItemsIntoTabContextMenu() {
+      if (!this.enabled) {
+        return;
+      }
       const elements = window.MozXULElement.parseXULToFragment(`
             <menuseparator id="context_zen-pinned-tab-separator" hidden="true"/>
             <menuitem id="context_zen-replace-pinned-url-with-current"
@@ -794,6 +797,7 @@
 
     updatePinnedTabContextMenu(contextTab) {
       if (!this.enabled) {
+        document.getElementById('context_pinTab').hidden = true;
         return;
       }
       const isVisible = contextTab.pinned && !contextTab.multiselected;
@@ -816,6 +820,9 @@
     }
 
     moveToAnotherTabContainerIfNecessary(event, movingTabs) {
+      if (!this.enabled) {
+        return false;
+      }
       try {
         const pinnedTabsTarget =
           event.target.closest('.zen-workspace-pinned-tabs-section') ||
@@ -1014,6 +1021,9 @@
     }
 
     applyDragoverClass(event, draggedTab) {
+      if (!this.enabled) {
+        return;
+      }
       const pinnedTabsTarget = event.target.closest('.zen-workspace-pinned-tabs-section');
       const essentialTabsTarget = event.target.closest('.zen-essentials-container');
       const tabsTarget = event.target.closest('.zen-workspace-normal-tabs-section');

src/zen/tabs/zen-tabs/vertical-tabs.css

@@ -1479,12 +1479,3 @@
     width: 100%;
   }
 }
-
-/* ==========================================================================
-   Section: Workspaces disabled, due to private browsing mode
-    ========================================================================== */
-
-:root:not([zen-workspace-id]) #tabbrowser-arrowscrollbox {
-  width: 100%;
-  position: absolute;
-}

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -18,7 +18,8 @@
       super();
       if (
         !Services.prefs.getBoolPref('zen.theme.gradient', true) ||
-        !gZenWorkspaces.shouldHaveWorkspaces
+        !gZenWorkspaces.shouldHaveWorkspaces ||
+        gZenWorkspaces.privateWindowOrDisabled
       ) {
         return;
       }
@@ -427,7 +428,7 @@
       dot.classList.add('zen-theme-picker-dot', 'hidden', 'custom');
       dot.style.opacity = 0;
       dot.style.setProperty('--zen-theme-picker-dot-color', color);
-      this.panel.querySelector('.zen-theme-picker-gradient').appendChild(dot);
+      this.panel.querySelector('#PanelUI-zen-gradient-generator-custom-list').prepend(dot);
       this.customColorInput.value = '';
       await this.updateCurrentWorkspace();
     }
@@ -1088,7 +1089,7 @@
         this.isDarkMode ? 0.2 : -0.5,
         `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`
       );
-      const color = result?.match(/\d+/g).map(Number);
+      const color = result?.match(/\d+/g)?.map(Number);
       if (!color || color.length !== 3) {
         return this.getNativeAccentColor();
       }
@@ -1255,6 +1256,7 @@
         );
         browser.gZenThemePicker.updateNoise(workspaceTheme.texture);
 
+        browser.gZenThemePicker.customColorList.innerHTML = '';
         for (const dot of workspaceTheme.gradientColors) {
           if (dot.isCustom) {
             browser.gZenThemePicker.addColorToCustomList(dot.c);

src/zen/workspaces/ZenWorkspace.mjs

@@ -57,9 +57,9 @@
         false
       );
 
-      this.scrollbox.addEventListener('wheel', gBrowser.tabContainer, true);
-      this.scrollbox.addEventListener('underflow', gBrowser.tabContainer);
-      this.scrollbox.addEventListener('overflow', gBrowser.tabContainer);
+      this.scrollbox.addEventListener('wheel', this, true);
+      this.scrollbox.addEventListener('underflow', this);
+      this.scrollbox.addEventListener('overflow', this);
 
       this.scrollbox._getScrollableElements = () => {
         const children = [...this.pinnedTabsContainer.children, ...this.tabsContainer.children];
@@ -122,6 +122,8 @@
       this.tabsContainer.setAttribute('zen-workspace-id', this.id);
       this.pinnedTabsContainer.setAttribute('zen-workspace-id', this.id);
 
+      this.#updateOverflow();
+
       this.dispatchEvent(
         new CustomEvent('ZenWorkspaceAttached', {
           bubbles: true,
@@ -130,6 +132,42 @@
         })
       );
     }
+
+    get active() {
+      return this.hasAttribute('active');
+    }
+
+    set active(value) {
+      if (value) {
+        this.setAttribute('active', 'true');
+      } else {
+        this.removeAttribute('active');
+      }
+      this.#updateOverflow();
+    }
+
+    #updateOverflow() {
+      if (!this.scrollbox) return;
+      if (this.overflows) {
+        this.#dispatchEventFromScrollbox('overflow');
+      } else {
+        this.#dispatchEventFromScrollbox('underflow');
+      }
+    }
+
+    #dispatchEventFromScrollbox(type) {
+      this.scrollbox.dispatchEvent(new CustomEvent(type, {}));
+    }
+
+    get overflows() {
+      return this.scrollbox.overflowing;
+    }
+
+    handleEvent(event) {
+      if (this.active) {
+        gBrowser.tabContainer.handleEvent(event);
+      }
+    }
   }
 
   customElements.define('zen-workspace', ZenWorkspace);

src/zen/workspaces/ZenWorkspaces.mjs

@@ -48,6 +48,9 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
   `;
 
   async waitForPromises() {
+    if (this.privateWindowOrDisabled) {
+      return;
+    }
     await Promise.all([
       this.promiseDBInitialized,
       this.promisePinnedInitialized,
@@ -115,6 +118,10 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     );
     this._activeWorkspace = Services.prefs.getStringPref('zen.workspaces.active', '');
 
+    if (this.isPrivateWindow) {
+      document.documentElement.setAttribute('zen-private-window', 'true');
+    }
+
     window.addEventListener('resize', this.onWindowResize.bind(this));
     this.addPopupListeners();
   }
@@ -136,21 +143,24 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     await this.initializeWorkspaces();
     if (
       Services.prefs.getBoolPref('zen.workspaces.swipe-actions', false) &&
-      this.workspaceEnabled
+      this.workspaceEnabled &&
+      !this.isPrivateWindow
     ) {
       this.initializeGestureHandlers();
       this.initializeWorkspaceNavigation();
     }
 
-    Services.obs.addObserver(this, 'weave:engine:sync:finish');
-    Services.obs.addObserver(
-      async function observe(subject) {
-        this._workspaceBookmarksCache = null;
-        await this.workspaceBookmarks();
-        this._invalidateBookmarkContainers();
-      }.bind(this),
-      'workspace-bookmarks-updated'
-    );
+    if (!this.privateWindowOrDisabled) {
+      Services.obs.addObserver(this, 'weave:engine:sync:finish');
+      Services.obs.addObserver(
+        async function observe(subject) {
+          this._workspaceBookmarksCache = null;
+          await this.workspaceBookmarks();
+          this._invalidateBookmarkContainers();
+        }.bind(this),
+        'workspace-bookmarks-updated'
+      );
+    }
   }
 
   // Validate browser state before tab operations
@@ -423,6 +433,15 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
       essentialsContainer.setAttribute('flex', '1');
       essentialsContainer.setAttribute('container', container);
       document.getElementById('zen-essentials').appendChild(essentialsContainer);
+
+      // Set an initial hidden state if the essentials section is not supposed
+      // to be shown on the current workspace
+      if (
+        this.containerSpecificEssentials &&
+        this.getActiveWorkspaceFromCache()?.containerTabId != container
+      ) {
+        essentialsContainer.setAttribute('hidden', 'true');
+      }
     }
     return essentialsContainer;
   }
@@ -437,7 +456,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     const container = document.getElementById('tabbrowser-arrowscrollbox');
     workspaceWrapper.id = workspace.uuid;
     if (this.activeWorkspace === workspace.uuid) {
-      workspaceWrapper.setAttribute('active', 'true');
+      workspaceWrapper.active = true;
     }
 
     await new Promise((resolve) => {
@@ -539,7 +558,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     toolbox.addEventListener(
       'wheel',
       async (event) => {
-        if (!this.workspaceEnabled) return;
+        if (this.privateWindowOrDisabled) return;
 
         // Only process non-gesture scrolls
         if (event.deltaMode !== 1) return;
@@ -618,7 +637,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   _handleSwipeMayStart(event) {
-    if (!this.workspaceEnabled || this._inChangingWorkspace) return;
+    if (this.privateWindowOrDisabled || this._inChangingWorkspace) return;
     if (event.target.closest('#zen-sidebar-bottom-buttons')) return;
 
     // Only handle horizontal swipes
@@ -697,6 +716,9 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
   set activeWorkspace(value) {
     this._activeWorkspace = value;
+    if (this.privateWindowOrDisabled) {
+      return;
+    }
     Services.prefs.setStringPref('zen.workspaces.active', value);
   }
 
@@ -725,7 +747,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     if (typeof this._shouldHaveWorkspaces === 'undefined') {
       let docElement = document.documentElement;
       this._shouldHaveWorkspaces = !(
-        PrivateBrowsingUtils.isWindowPrivate(window) ||
         docElement.getAttribute('chromehidden').includes('toolbar') ||
         docElement.getAttribute('chromehidden').includes('menubar')
       );
@@ -734,6 +755,14 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     return this._shouldHaveWorkspaces;
   }
 
+  get isPrivateWindow() {
+    return PrivateBrowsingUtils.isWindowPrivate(window);
+  }
+
+  get privateWindowOrDisabled() {
+    return this.isPrivateWindow || !this.shouldHaveWorkspaces;
+  }
+
   get workspaceEnabled() {
     if (typeof this._workspaceEnabled === 'undefined') {
       this._workspaceEnabled =
@@ -760,6 +789,15 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
       return this._workspaceCache;
     }
 
+    if (this.isPrivateWindow) {
+      this._workspaceCache = {
+        workspaces: this._privateWorkspace ? [this._privateWorkspace] : [],
+        lastChangeTimestamp: 0,
+      };
+      this._activeWorkspace = this._privateWorkspace?.uuid;
+      return this._workspaceCache;
+    }
+
     const [workspaces, lastChangeTimestamp] = await Promise.all([
       ZenWorkspacesStorage.getWorkspaces(),
       ZenWorkspacesStorage.getLastChangeTimestamp(),
@@ -1233,6 +1271,9 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   async saveWorkspace(workspaceData, preventPropagation = false) {
+    if (this.privateWindowOrDisabled) {
+      return;
+    }
     await ZenWorkspacesStorage.saveWorkspace(workspaceData);
     if (!preventPropagation) {
       await this._propagateWorkspaceData();
@@ -1374,10 +1415,14 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   async _propagateWorkspaceData({ ignoreStrip = false, clearCache = true } = {}) {
+    const currentWindowIsPrivate = this.isPrivateWindow;
     await this.foreachWindowAsActive(async (browser) => {
       // Do not update the window if workspaces are not enabled in it.
       // For example, when the window is in private browsing mode.
-      if (!browser.gZenWorkspaces.workspaceEnabled) {
+      if (
+        !browser.gZenWorkspaces.workspaceEnabled ||
+        browser.gZenWorkspaces.isPrivateWindow !== currentWindowIsPrivate
+      ) {
         return;
       }
 
@@ -1701,7 +1746,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   async openWorkspacesDialog(event) {
-    if (!this.workspaceEnabled) {
+    if (!this.workspaceEnabled || this.isPrivateWindow) {
       return;
     }
     let target = event.target.closest('.zen-current-workspace-indicator');
@@ -1902,11 +1947,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     // Refresh tab cache
     for (const otherWorkspace of workspaces.workspaces) {
       const container = this.workspaceElement(otherWorkspace.uuid);
-      if (otherWorkspace.uuid === workspace.uuid) {
-        container.setAttribute('active', 'true');
-      } else {
-        container.removeAttribute('active');
-      }
+      container.active = otherWorkspace.uuid === workspace.uuid;
     }
     gBrowser.verticalPinnedTabsContainer =
       this.pinnedTabsContainer || gBrowser.verticalPinnedTabsContainer;
@@ -2098,7 +2139,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
       }
     }
     document.documentElement.setAttribute('animating-background', 'true');
-    if (shouldAnimate) {
+    if (shouldAnimate && previousWorkspace) {
       let previousBackgroundOpacity = document.documentElement.style.getPropertyValue(
         '--zen-background-opacity'
       );
@@ -2114,19 +2155,24 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
         previousBackgroundOpacity = 0;
       }
       gZenThemePicker.previousBackgroundOpacity = previousBackgroundOpacity;
-      animations.push(
-        gZenUIManager.motion.animate(
-          document.documentElement,
-          {
-            '--zen-background-opacity': [previousBackgroundOpacity, 1],
-          },
-          {
-            type: 'spring',
-            bounce: 0,
-            duration: kGlobalAnimationDuration,
-          }
-        )
-      );
+      await new Promise((resolve) => {
+        requestAnimationFrame(() => {
+          animations.push(
+            gZenUIManager.motion.animate(
+              document.documentElement,
+              {
+                '--zen-background-opacity': [previousBackgroundOpacity, 1],
+              },
+              {
+                type: 'spring',
+                bounce: 0,
+                duration: kGlobalAnimationDuration,
+              }
+            )
+          );
+          resolve();
+        });
+      });
     }
     for (const element of document.querySelectorAll('zen-workspace')) {
       if (element.classList.contains('zen-essentials-container')) {
@@ -2158,13 +2204,11 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
           )
         );
       }
+      element.active = offset === 0;
       if (offset === 0) {
-        element.setAttribute('active', 'true');
         if (tabToSelect != gBrowser.selectedTab && !onInit) {
           gBrowser.selectedTab = tabToSelect;
         }
-      } else {
-        element.removeAttribute('active');
       }
     }
     if (this.containerSpecificEssentials && previousWorkspace) {
@@ -2518,6 +2562,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   async _updateWorkspacesChangeContextMenu() {
+    if (gZenWorkspaces.privateWindowOrDisabled) return;
     const workspaces = await this._workspaces();
 
     const menuPopup = document.getElementById('context-zen-change-workspace-tab-menu-popup');
@@ -2567,6 +2612,9 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     if (!this.workspaceEnabled) {
       return;
     }
+    if (this.isPrivateWindow) {
+      name = 'Private ' + name;
+    }
     // get extra tabs remaning (e.g. on new profiles) and just move them to the new workspace
     const extraTabs = Array.from(gBrowser.tabContainer.arrowScrollbox.children).filter(
       (child) =>
@@ -2582,7 +2630,11 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
       !dontChange,
       containerTabId
     );
-    await this.saveWorkspace(workspaceData, dontChange);
+    if (this.isPrivateWindow) {
+      this._privateWorkspace = workspaceData;
+    } else {
+      await this.saveWorkspace(workspaceData, dontChange);
+    }
     if (!dontChange) {
       this.registerPinnedResizeObserver();
       let changed = extraTabs.length > 0;

src/zen/workspaces/zen-workspaces.css

@@ -447,7 +447,7 @@
   position: relative;
   max-height: var(--zen-workspace-indicator-height);
   min-height: var(--zen-workspace-indicator-height);
-  gap: var(--tab-icon-end-margin);
+  gap: 10px;
   align-items: center;
   flex-direction: row !important;
   max-width: 100%;
@@ -466,10 +466,12 @@
     height: calc(100% - var(--zen-toolbox-padding) * 2);
   }
 
-  &:hover,
-  &[open='true'] {
-    &::before {
-      background: var(--tab-hover-background-color);
+  :root:not([zen-private-window]) & {
+    &:hover,
+    &[open='true'] {
+      &::before {
+        background: var(--tab-hover-background-color);
+      }
     }
   }
 

surfer.json

@@ -19,7 +19,7 @@
       "brandShortName": "Zen",
       "brandFullName": "Zen Browser",
       "release": {
-        "displayVersion": "1.12.7b",
+        "displayVersion": "1.12.8b",
         "github": {
           "repo": "zen-browser/desktop"
         },