feat: Added new private window looks, b=(no-bug), c=common, tabs, workspaces

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/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/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');
+    if (!this.privateWindowOrDisabled) {
-    Services.obs.addObserver(
+      Services.obs.addObserver(this, 'weave:engine:sync:finish');
-      async function observe(subject) {
+      Services.obs.addObserver(
-        this._workspaceBookmarksCache = null;
+        async function observe(subject) {
-        await this.workspaceBookmarks();
+          this._workspaceBookmarksCache = null;
-        this._invalidateBookmarkContainers();
+          await this.workspaceBookmarks();
-      }.bind(this),
+          this._invalidateBookmarkContainers();
-      'workspace-bookmarks-updated'
+        }.bind(this),
-    );
+        'workspace-bookmarks-updated'
+      );
+    }
   }
 
   // Validate browser state before tab operations
@@ -548,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;
@@ -627,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
@@ -706,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);
   }
 
@@ -734,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')
       );
@@ -743,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 =
@@ -769,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(),
@@ -1242,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();
@@ -1383,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;
       }
 
@@ -1710,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');
@@ -2526,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');
@@ -2575,6 +2612,10 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     if (!this.workspaceEnabled) {
       return;
     }
+    if (this.isPrivateWindow) {
+      name = 'Private ' + name;
+      icon = '🥸';
+    }
     // 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) =>
@@ -2590,7 +2631,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

@@ -466,10 +466,12 @@
     height: calc(100% - var(--zen-toolbox-padding) * 2);
   }
 
-  &:hover,
+  :root:not([zen-private-window]) & {
-  &[open='true'] {
+    &:hover,
-    &::before {
+    &[open='true'] {
-      background: var(--tab-hover-background-color);
+      &::before {
+        background: var(--tab-hover-background-color);
+      }
     }
   }