fix: Configurable essentials max fix conflict of PR 8441

src/browser/app/profile/features.inc

@@ -11,6 +11,8 @@
 pref('zen.tabs.vertical', true);
 pref('zen.tabs.vertical.right-side', false);
 pref('zen.tabs.rename-tabs', true);
+pref('zen.tabs.essentials.max', 12);
+pref('zen.tabs.essentials.height', 0); // In vh units
 pref('zen.tabs.show-newtab-vertical', true);
 
 pref('zen.ctrlTab.show-pending-tabs', false);

src/zen/common/ZenUIManager.mjs

@@ -33,6 +33,13 @@ var gZenUIManager = {
       'zen.urlbar.show-domain-only-in-sidebar',
       true
     );
+    XPCOMUtils.defineLazyPreferenceGetter(
+      this,
+      'essentialsHeight',
+      'zen.tabs.essentials.height',
+      0,
+      this._updateEssentialsHeight.bind(this)
+    );
 
     document.addEventListener('mousedown', this.handleMouseDown.bind(this), true);
 
@@ -62,6 +69,7 @@ var gZenUIManager = {
     gZenWorkspaces.promiseInitialized.finally(() => {
       this._hasLoadedDOM = true;
       this.updateTabsToolbar();
+      this._updateEssentialsHeight();
     });
 
     window.addEventListener('TabClose', this.onTabClose.bind(this));
@@ -70,6 +78,19 @@ var gZenUIManager = {
     gZenVerticalTabsManager.init();
   },
 
+  _updateEssentialsHeight() {
+    const essentialsWrapper = document.getElementById('zen-essentials');
+    if (!essentialsWrapper) return;
+
+    essentialsWrapper.style.setProperty('--zen-essentials-height', `${this.essentialsHeight}vh`);
+
+    if (this.essentialsHeight === 0) {
+      essentialsWrapper.setAttribute('data-essentials-height', '0');
+    } else {
+      essentialsWrapper.removeAttribute('data-essentials-height');
+    }
+  },
+
   handleMouseDown(event) {
     this._lastClickPosition = {
       clientX: event.clientX,

src/zen/tabs/ZenPinnedTabManager.mjs

@@ -52,12 +52,18 @@
   }
 
   class nsZenPinnedTabManager extends ZenDOMOperatedFeature {
-    MAX_ESSENTIALS_TABS = 12;
-
     async init() {
       if (!this.enabled) {
         return;
       }
+
+      XPCOMUtils.defineLazyPreferenceGetter(
+        lazy,
+        'zenTabsEssentialsMax',
+        'zen.tabs.essentials.max',
+        12
+      );
+
       this._canLog = Services.prefs.getBoolPref('zen.pinned-tab-manager.debug', false);
       this.observer = new ZenPinnedTabsObserver();
       this._initClosePinnedTabShortcut();
@@ -69,6 +75,21 @@
       gZenWorkspaces._resolvePinnedInitialized();
     }
 
+    get MAX_ESSENTIALS_TABS() {
+      return lazy.zenTabsEssentialsMax;
+    }
+
+    async onWorkspaceChange(newWorkspace, onInit) {
+      if (!this.enabled || PrivateBrowsingUtils.isWindowPrivate(window)) {
+        return;
+      }
+
+      if (onInit) {
+        await this._refreshPinnedTabs({ init: onInit });
+        this._hasFinishedLoading = true;
+      }
+    }
+
     log(message) {
       if (this._canLog) {
         console.log(`[ZenPinnedTabManager] ${message}`);

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

@@ -1270,18 +1270,31 @@
 
 #zen-essentials {
   z-index: 1;
+  overflow: hidden;
+
+  &:not([data-essentials-height="0"]) {
+    max-height: var(--zen-essentials-height);
+  }
 }
 
 /* Container for essential items (often pinned/favorite tabs) */
 .zen-essentials-container {
   will-change: transform;
 
-  overflow: hidden;
+  padding-bottom: var(--zen-toolbox-padding);
+  overflow-y: auto;
+  overflow-x: hidden;
   gap: 4px;
   transition:
     max-height 0.3s ease-out,
     grid-template-columns 0.3s ease-out;
   opacity: 1;
+
+  #zen-essentials:not([data-essentials-height="0"]) & {
+    height: 100%;
+    max-height: var(--zen-essentials-height);
+  }
+
   grid-template-columns: repeat(auto-fit, minmax(max(23.7%, 48px), 1fr));
   &[data-hack-type='1'] {
     grid-template-columns: repeat(auto-fit, minmax(max(30%, 48px), auto));
@@ -1320,6 +1333,48 @@
   &[cloned] {
     pointer-events: none;
   }
+
+  &[overflowing] {
+    --zen-scrollbar-overflow-background: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
+
+    &::before {
+      content: '';
+      position: sticky;
+      top: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      height: 1px;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.1s;
+      background-color: var(--zen-scrollbar-overflow-background);
+      grid-column: 1 / -1;
+    }
+
+    &::after {
+      content: '';
+      position: sticky;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 1px;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.1s;
+      background-color: var(--zen-scrollbar-overflow-background);
+      grid-column: 1 / -1;
+    }
+  }
+
+  &[overflowing]:not([scrolledtostart])::before {
+    opacity: 1;
+  }
+
+  &[overflowing]:not([scrolledtoend])::after {
+    opacity: 1;
+  }
 }
 
 /* Style tabs within the Essentials container (and a related welcome sidebar) */

src/zen/workspaces/ZenWorkspaces.mjs

@@ -311,6 +311,19 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     }
   }
 
+  onPinnedTabsResize() {
+    for (const container of document.querySelectorAll('.zen-essentials-container')) {
+      this._updateEssentialsOverflow(container);
+    }
+    for (let element of document.querySelectorAll('.zen-workspace-pinned-tabs-section')) {
+      if (element.scrollHeight > element.clientHeight) {
+        element.setAttribute('hide-separator', 'true');
+      } else {
+        element.removeAttribute('hide-separator');
+      }
+    }
+  }
+
   _initializeEmptyTab() {
     this._emptyTab = gBrowser.addTrustedTab('about:blank', {
       inBackground: true,
@@ -445,6 +458,17 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
       essentialsContainer.setAttribute('container', container);
       document.getElementById('zen-essentials').appendChild(essentialsContainer);
 
+      this._updateEssentialsOverflow(essentialsContainer);
+
+      essentialsContainer.addEventListener('scroll', () => {
+        this._updateEssentialsOverflow(essentialsContainer);
+      });
+
+      const resizeObserver = new ResizeObserver(() => {
+        this._updateEssentialsOverflow(essentialsContainer);
+      });
+      resizeObserver.observe(essentialsContainer);
+
       // Set an initial hidden state if the essentials section is not supposed
       // to be shown on the current workspace
       if (
@@ -457,6 +481,30 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     return essentialsContainer;
   }
 
+  _updateEssentialsOverflow(container) {
+    const isOverflowing = container.scrollHeight > container.clientHeight;
+    const isAtStart = container.scrollTop === 0;
+    const isAtEnd = (container.scrollTop + container.clientHeight) >= (container.scrollHeight - 1);
+
+    if (isOverflowing) {
+      container.setAttribute('overflowing', 'true');
+    } else {
+      container.removeAttribute('overflowing');
+    }
+
+    if (isAtStart) {
+      container.setAttribute('scrolledtostart', 'true');
+    } else {
+      container.removeAttribute('scrolledtostart');
+    }
+
+    if (isAtEnd) {
+      container.setAttribute('scrolledtoend', 'true');
+    } else {
+      container.removeAttribute('scrolledtoend');
+    }
+  }
+
   getCurrentEssentialsContainer() {
     const currentWorkspace = this.getActiveWorkspaceFromCache();
     return this.getEssentialsSection(currentWorkspace?.containerTabId);
@@ -2254,56 +2302,30 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   async createAndSaveWorkspace(
-    name = 'Space',
-    icon = undefined,
-    dontChange = false,
+    name,
+    icon,
+    setActive = false,
     containerTabId = 0,
-    { beforeChangeCallback } = { beforeChangeCallback: null } // Callback to run before changing workspace
+    { beforeChangeCallback = null, afterChangeCallback = null } = {}
   ) {
-    if (!this.workspaceEnabled) {
+    if (this.privateWindowOrDisabled) {
       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) =>
-        child.tagName === 'tab' &&
-        !child.hasAttribute('zen-workspace-id') &&
-        !child.hasAttribute('zen-empty-tab') &&
-        !child.hasAttribute('zen-essential')
-    );
-    let workspaceData = await this._createWorkspaceData(
-      name,
-      icon,
-      extraTabs,
-      !dontChange,
-      containerTabId
-    );
-    if (this.isPrivateWindow) {
-      this._privateWorkspace = workspaceData;
-    } else {
-      await this.saveWorkspace(workspaceData, dontChange);
-    }
-    if (!dontChange) {
+    const newWorkspace = await ZenWorkspacesStorage.createWorkspace(name, icon, containerTabId);
+    await this._propagateWorkspaceData();
+    await this._createWorkspaceTabsSection(newWorkspace, []);
+    this.registerPinnedResizeObserver();
+    if (setActive) {
       if (beforeChangeCallback) {
-        try {
-          await beforeChangeCallback(workspaceData);
-        } catch (e) {
-          console.error('Error in beforeChangeCallback:', e);
-        }
+        await beforeChangeCallback(newWorkspace);
       }
-      this.registerPinnedResizeObserver();
-      let changed = extraTabs.length > 0;
-      if (changed) {
-        gBrowser.tabContainer._invalidateCachedTabs();
-        gBrowser.selectedTab = extraTabs[0];
+      await this.changeWorkspace(newWorkspace);
+      if (afterChangeCallback) {
+        await afterChangeCallback();
       }
-      await this.changeWorkspace(workspaceData);
     }
-    this.onWindowResize();
-    return workspaceData;
+    await this._updateWorkspacesChangeContextMenu();
+    return newWorkspace;
   }
 
   async updateTabsContainers(target = undefined, forAnimation = false) {
@@ -2474,11 +2496,12 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
   // Context menu management
   async contextChangeContainerTab(event) {
-    this._organizingWorkspaceStrip = true;
-    let workspaces = await this._workspaces();
-    let workspace = workspaces.workspaces.find(
-      (workspace) => workspace.uuid === (this.#contextMenuData?.workspaceId || this.activeWorkspace)
-    );
+    let workspace;
+    if (this.#contextMenuData.workspaceId) {
+      workspace = this.getWorkspaceFromId(this.#contextMenuData.workspaceId);
+    } else {
+      workspace = this.getActiveWorkspaceFromCache();
+    }
     let userContextId = parseInt(event.target.getAttribute('data-usercontextid'));
     workspace.containerTabId = userContextId + 0; // +0 to convert to number
     await this.saveWorkspace(workspace);