fix: Fixed invalid targets being used on workspace labels, b=no-bug, c=tabs, workspaces

Signed-off-by: Obscure. <69711181+kritishd8@users.noreply.github.com>

src/browser/app/profile/features/view.inc

@@ -2,7 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-pref('zen.view.sidebar-height-throttle', 200); // in ms
+pref('zen.view.sidebar-height-throttle', 0); // in ms
 pref('zen.view.sidebar-expanded.max-width', 500);
 
 #ifdef XP_MACOSX

src/browser/base/content/navigator-toolbox-inc-xhtml.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
-index 00c8976d3e258c0875d7da2f3ec823d8907a84c9..cc61d5a845b5ce22a61f5a1aab8b280b2bcdf101 100644
+index 30e7b9b2ac63db6ccd2727a9341081cecefc25cb..ceff29d10a32fe9e5296340c8c56a2fdbf321c31 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
 @@ -2,7 +2,7 @@

src/browser/base/content/zen-panels/popups.inc

@@ -12,6 +12,7 @@
   <menuitem id="context_zenEditWorkspace" data-l10n-id="zen-workspaces-panel-change-name" command="cmd_zenChangeWorkspaceName"/>
   <menuitem id="context_zenEditWorkspaceIcon" data-l10n-id="zen-workspaces-panel-change-icon" command="cmd_zenChangeWorkspaceIcon"/>
   <menuitem class="zenToolbarThemePicker"
+          id="context_zenChangeWorkspaceTheme"
           data-l10n-id="zen-workspaces-change-theme"
           command="cmd_zenOpenZenThemePicker"/>
   <menu id="context_zenWorkspacesOpenInContainerTab"
@@ -22,8 +23,10 @@
     hide-if-usercontext-disabled="true">
     <menupopup />
   </menu>
+  <menuseparator id="context_zenWorkspacesSeparator"/>
   <menuseparator/>
   <menuitem id="context_zenReorderWorkspaces" data-l10n-id="zen-workspaces-panel-context-reorder" command="cmd_zenReorderWorkspaces"/>
   <menuseparator/>
+  <menuitem data-l10n-id="zen-panel-ui-workspaces-create" command="cmd_zenOpenWorkspaceCreation"/>
   <menuitem id="context_zenDeleteWorkspace" data-l10n-id="zen-workspaces-panel-context-delete" command="cmd_zenCtxDeleteWorkspace"/>
 </menupopup>

src/browser/components/customizableui/content/panelUI-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/customizableui/content/panelUI.js b/browser/components/customizableui/content/panelUI.js
-index 689205034d9df67ff1fe0ebbf4a3481a5f414391..2626b7286deb51f66b6ccbbc32d510139cacb109 100644
+index 689205034d9df67ff1fe0ebbf4a3481a5f414391..2fab7474f1038a7a3cd2f4b4798d59696900cc85 100644
 --- a/browser/components/customizableui/content/panelUI.js
 +++ b/browser/components/customizableui/content/panelUI.js
 @@ -516,8 +516,7 @@ const PanelUI = {
@@ -12,7 +12,20 @@ index 689205034d9df67ff1fe0ebbf4a3481a5f414391..2626b7286deb51f66b6ccbbc32d51013
          .appendChild(tempPanel);
  
        let multiView = document.createXULElement("panelmultiview");
-@@ -959,7 +958,7 @@ const PanelUI = {
+@@ -608,10 +607,12 @@ const PanelUI = {
+     if (hasKids && !this.navbar.hasAttribute("nonemptyoverflow")) {
+       this.navbar.setAttribute("nonemptyoverflow", "true");
+       this.overflowPanel.setAttribute("hasfixeditems", "true");
++      window.document.getElementById("zen-sidebar-top-buttons").setAttribute("nonemptyoverflow", "true");
+     } else if (!hasKids && this.navbar.hasAttribute("nonemptyoverflow")) {
+       PanelMultiView.hidePopup(this.overflowPanel);
+       this.overflowPanel.removeAttribute("hasfixeditems");
+       this.navbar.removeAttribute("nonemptyoverflow");
++      window.document.getElementById("zen-sidebar-top-buttons").removeAttribute("nonemptyoverflow");
+     }
+   },
+ 
+@@ -959,7 +960,7 @@ const PanelUI = {
          el.removeAttribute("data-lazy-l10n-id");
        });
  

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

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index d5aa64842a35c6697263c63fd3a0571b64b01344..478050fd5202b70ee3191471a017e091a3a87e92 100644
+index d5aa64842a35c6697263c63fd3a0571b64b01344..e8f37acf7761adb7bd97cb06dc1df386ffc8ec0b 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
 @@ -413,11 +413,41 @@
@@ -9,7 +9,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..478050fd5202b70ee3191471a017e091
 +    get _numVisiblePinTabsWithoutCollapsed() {
 +      let i = 0;
 +      for (let item of this.tabContainer.ariaFocusableItems) {
-+        if (this.isTabGroupLabel(item) && item.closest("zen-folder")?.pinned) {
++        if (this.isTabGroupLabel(item) && item.closest("tab-group")?.pinned) {
 +          i += 1;
 +          continue;
 +        }
@@ -357,7 +357,7 @@ index d5aa64842a35c6697263c63fd3a0571b64b01344..478050fd5202b70ee3191471a017e091
        // to remove the old selected tab.
        if (tabToSelect) {
          let leftoverTab = this.selectedTab;
-+        if (this._hasAlreadyInitializedZenSessionStore) {
++        if (this._hasAlreadyInitializedZenSessionStore || !gZenWorkspaces.workspaceEnabled) {
          this.selectedTab = tabToSelect;
          this.removeTab(leftoverTab);
 +        } else {

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 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b53c8dd285 100644
+index 84d633471c89230b981d8a07babef4e0c76c0338..37ebb0a715629d372fb8054bcd8783eae31cc79a 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -83,7 +83,7 @@
@@ -100,23 +100,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
            );
            let size = this.verticalMode ? "height" : "width";
            let screenAxis = this.verticalMode ? "screenY" : "screenX";
-@@ -1135,8 +1153,14 @@
-             (lastMovingTabScreen + tabSize);
- 
-           if (this.verticalMode) {
-+            if (oldTranslateY > 0 && translateOffsetY > tabHeight / 2) {
-+              newTranslateY += tabHeight;
-+            }
-+            if (oldTranslateY < 0 && -translateOffsetY > tabHeight / 2) {
-+              newTranslateY -= tabHeight;
-+            }
-             newTranslateY = Math.min(
--              Math.max(oldTranslateY, firstBound),
-+              Math.max(newTranslateY, firstBound),
-               lastBound
-             );
-           } else {
-@@ -1168,7 +1192,7 @@
+@@ -1168,7 +1186,7 @@
              (oldTranslateX && oldTranslateX != newTranslateX) ||
              (oldTranslateY && oldTranslateY != newTranslateY);
          } else if (this.verticalMode) {
@@ -125,7 +109,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
          } else {
            shouldTranslate &&= oldTranslateX && oldTranslateX != newTranslateX;
          }
-@@ -1337,6 +1361,7 @@
+@@ -1337,6 +1355,7 @@
  
            let nextItem = this.ariaFocusableItems[newIndex];
            let tabGroup = isTab(nextItem) && nextItem.group;
@@ -133,7 +117,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
            gBrowser.loadTabs(urls, {
              inBackground,
              replace,
-@@ -1369,6 +1394,17 @@
+@@ -1369,6 +1388,17 @@
  
        this.finishMoveTogetherSelectedTabs(draggedTab);
        this.finishAnimateTabMove();
@@ -151,7 +135,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
        this.#expandGroupOnDrop(draggedTab);
  
        if (
-@@ -1597,7 +1633,7 @@
+@@ -1597,7 +1627,7 @@
      }
  
      get newTabButton() {
@@ -160,7 +144,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
      }
  
      get verticalMode() {
-@@ -1621,29 +1657,54 @@
+@@ -1621,29 +1651,54 @@
        if (this.#allTabs) {
          return this.#allTabs;
        }
@@ -223,7 +207,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
      }
  
      /**
-@@ -1698,23 +1759,18 @@
+@@ -1698,23 +1753,18 @@
        }
  
        let elementIndex = 0;
@@ -251,7 +235,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
              let visibleTabsInGroup = child.tabs.filter(tab => tab.visible);
              visibleTabsInGroup.forEach(tab => {
                tab.elementIndex = elementIndex++;
-@@ -1724,10 +1780,7 @@
+@@ -1724,10 +1774,7 @@
          }
        }
  
@@ -263,7 +247,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
  
        return this.#focusableItems;
      }
-@@ -1735,6 +1788,7 @@
+@@ -1735,6 +1782,7 @@
      _invalidateCachedTabs() {
        this.#allTabs = null;
        this._invalidateCachedVisibleTabs();
@@ -271,7 +255,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
      }
  
      _invalidateCachedVisibleTabs() {
-@@ -1749,8 +1803,8 @@
+@@ -1749,8 +1797,8 @@
      #isContainerVerticalPinnedGrid(tab) {
        return (
          this.verticalMode &&
@@ -282,7 +266,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
          !this.expandOnHover
        );
      }
-@@ -1766,7 +1820,7 @@
+@@ -1766,7 +1814,7 @@
  
        if (node == null) {
          // We have a container for non-tab elements at the end of the scrollbox.
@@ -291,7 +275,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
        }
  
        node.before(tab);
-@@ -1861,7 +1915,7 @@
+@@ -1861,7 +1909,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.
@@ -300,7 +284,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
            const newTab2 = this.newTabButton;
            const newTabVertical = document.getElementById(
              "vertical-tabs-newtab-button"
-@@ -1956,10 +2010,12 @@
+@@ -1956,10 +2004,12 @@
  
      _handleTabSelect(aInstant) {
        let selectedTab = this.selectedItem;
@@ -313,7 +297,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
        selectedTab._notselectedsinceload = false;
      }
  
-@@ -2132,6 +2188,7 @@
+@@ -2132,6 +2182,7 @@
      }
  
      _positionPinnedTabs() {
@@ -321,7 +305,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
        let tabs = this.visibleTabs;
        let numPinned = gBrowser.pinnedTabCount;
        let absPositionHorizontalTabs =
-@@ -2206,7 +2263,7 @@
+@@ -2206,7 +2257,7 @@
          return;
        }
  
@@ -330,7 +314,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
  
        let directionX = screenX > dragData.animLastScreenX;
        let directionY = screenY > dragData.animLastScreenY;
-@@ -2215,6 +2272,8 @@
+@@ -2215,6 +2266,8 @@
  
        let { width: tabWidth, height: tabHeight } =
          draggedTab.getBoundingClientRect();
@@ -339,7 +323,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
        let shiftSizeX = tabWidth * movingTabs.length;
        let shiftSizeY = tabHeight;
        dragData.tabWidth = tabWidth;
-@@ -2244,7 +2303,7 @@
+@@ -2244,7 +2297,7 @@
        let translateX = screenX - dragData.screenX;
        let translateY = screenY - dragData.screenY;
        translateY +=
@@ -348,7 +332,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
        let firstBoundX = firstTabInRow.screenX - firstMovingTabScreenX;
        let firstBoundY = firstTabInRow.screenY - firstMovingTabScreenY;
        let lastBoundX =
-@@ -2389,12 +2448,16 @@
+@@ -2389,12 +2442,16 @@
  
        this.#clearDragOverCreateGroupTimer();
  
@@ -369,7 +353,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
  
        if (this.#rtlMode) {
          tabs.reverse();
-@@ -2408,7 +2471,7 @@
+@@ -2408,7 +2465,7 @@
        let size = this.verticalMode ? "height" : "width";
        let translateAxis = this.verticalMode ? "translateY" : "translateX";
        let scrollDirection = this.verticalMode ? "scrollTop" : "scrollLeft";
@@ -378,7 +362,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
        let translateX = event.screenX - dragData.screenX;
        let translateY = event.screenY - dragData.screenY;
  
-@@ -2422,12 +2485,21 @@
+@@ -2422,12 +2479,21 @@
        let lastTab = tabs.at(-1);
        let lastMovingTab = movingTabs.at(-1);
        let firstMovingTab = movingTabs[0];
@@ -401,7 +385,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
          translate +=
            this.arrowScrollbox.scrollbox[scrollDirection] - dragData.scrollPos;
        } else if (isPinned && this.verticalMode) {
-@@ -2446,6 +2518,9 @@
+@@ -2446,6 +2512,9 @@
            // Shift the `.tab-group-label-container` to shift the label element.
            item = item.parentElement;
          }
@@ -411,7 +395,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
          item.style.transform = `${translateAxis}(${translate}px)`;
        }
  
-@@ -2583,6 +2658,9 @@
+@@ -2583,6 +2652,9 @@
              break;
            }
            let element = tabs[mid];
@@ -421,7 +405,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
            let elementForSize = isTabGroupLabel(element)
              ? element.parentElement
              : element;
-@@ -2605,6 +2683,10 @@
+@@ -2605,6 +2677,10 @@
        if (!dropElement) {
          dropElement = this.ariaFocusableItems[oldDropElementIndex];
        }
@@ -432,7 +416,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
        let newDropElementIndex = dropElement
          ? dropElement.elementIndex
          : oldDropElementIndex;
-@@ -2613,7 +2695,7 @@
+@@ -2613,7 +2689,7 @@
        let shouldCreateGroupOnDrop;
        let dropBefore;
        if (dropElement) {
@@ -441,7 +425,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
            ? dropElement.parentElement
            : dropElement;
  
-@@ -2675,12 +2757,12 @@
+@@ -2675,12 +2751,12 @@
          }
        }
  
@@ -456,7 +440,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
            dropElement != draggedTab &&
            isTab(dropElement) &&
            !dropElement?.group &&
-@@ -2720,7 +2802,7 @@
+@@ -2720,7 +2796,7 @@
                // Dropping right before the tab group.
                dropElement = dropElementGroup;
                colorCode = undefined;
@@ -465,7 +449,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
                // Dropping right after the collapsed tab group.
                dropElement = dropElementGroup;
                colorCode = undefined;
-@@ -2750,7 +2832,7 @@
+@@ -2750,7 +2826,7 @@
        // Shift background tabs to leave a gap where the dragged tab
        // would currently be dropped.
        for (let item of tabs) {
@@ -474,7 +458,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
            continue;
          }
  
-@@ -2759,6 +2841,9 @@
+@@ -2759,6 +2835,9 @@
          if (isTabGroupLabel(item)) {
            // Shift the `.tab-group-label-container` to shift the label element.
            item = item.parentElement;
@@ -484,7 +468,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
          }
          item.style.transform = transform;
        }
-@@ -2811,8 +2896,9 @@
+@@ -2811,8 +2890,9 @@
        );
      }
  
@@ -496,7 +480,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
          return;
        }
  
-@@ -2824,6 +2910,12 @@
+@@ -2824,6 +2904,12 @@
            item = item.parentElement;
          }
          item.style.transform = "";
@@ -509,7 +493,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
          item.removeAttribute("dragover-createGroup");
        }
        this.removeAttribute("movingtab-createGroup");
-@@ -2870,7 +2962,7 @@
+@@ -2870,7 +2956,7 @@
          let postTransitionCleanup = () => {
            movingTab._moveTogetherSelectedTabsData.animate = false;
          };
@@ -518,7 +502,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
            postTransitionCleanup();
          } else {
            let onTransitionEnd = transitionendEvent => {
-@@ -3043,7 +3135,7 @@
+@@ -3043,7 +3129,7 @@
      }
  
      _notifyBackgroundTab(aTab) {
@@ -527,7 +511,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..a4101ad4e8aa9745ec807eb0373942b5
          return;
        }
  
-@@ -3169,6 +3261,9 @@
+@@ -3169,6 +3255,9 @@
            return null;
          }
        }

src/zen/common/ZenCustomizableUI.sys.mjs

@@ -116,7 +116,7 @@ export var ZenCustomizableUI = new (class {
       const handlePopupHidden = () => {
         window.setTimeout(() => {
           button.removeAttribute('open');
-        }, 100);
+        }, 500);
         window.gZenUIManager.motion.animate(
           image,
           { transform: ['rotate(45deg)', 'rotate(0deg)'] },

src/zen/common/ZenStartup.mjs

@@ -41,8 +41,6 @@
           document.getElementById('zen-appcontent-wrapper').prepend(deckTemplate);
         }
 
-        this._hideUnusedElements();
-
         gZenWorkspaces.init();
         gZenUIManager.init();
 
@@ -148,16 +146,6 @@
       }
     },
 
-    _hideUnusedElements() {
-      const kElements = ['firefox-view-button'];
-      for (let id of kElements) {
-        const elem = document.getElementById(id);
-        if (elem) {
-          elem.setAttribute('hidden', 'true');
-        }
-      }
-    },
-
     _initSearchBar() {
       // Only focus the url bar
       gURLBar.focus();

src/zen/common/ZenUIManager.mjs

@@ -83,7 +83,7 @@ var gZenUIManager = {
       '--zen-urlbar-top',
       `${window.innerHeight / 2 - Math.max(kUrlbarHeight, gURLBar.textbox.getBoundingClientRect().height) / 2}px`
     );
-    gURLBar.textbox.style.setProperty('--zen-urlbar-width', `${window.innerWidth / 2}px`);
+    gURLBar.textbox.style.setProperty('--zen-urlbar-width', `${window.innerWidth / 3}px`);
     gZenVerticalTabsManager.actualWindowButtons.removeAttribute('zen-has-hover');
     gZenVerticalTabsManager.recalculateURLBarHeight();
     if (!this._preventToolbarRebuild) {

src/zen/common/styles/zen-single-components.css

@@ -36,6 +36,11 @@ body > #confetti {
   min-height: 30px;
 }
 
+/* Firefox View */
+#firefox-view-button {
+  display: none !important;
+}
+
 /* Emojis picker */
 
 #PanelUI-zen-emojis-picker {

src/zen/compact-mode/ZenCompactMode.mjs

@@ -215,8 +215,9 @@ var gZenCompactModeManager = {
     let sidebarWidth = this.sidebar.getBoundingClientRect().width;
     const shouldRecalculate =
       this.preference || document.documentElement.hasAttribute('zen-creating-workspace');
+    const sidebarExpanded = document.documentElement.hasAttribute('zen-sidebar-expanded');
     if (sidebarWidth > 1) {
-      if (shouldRecalculate && gZenVerticalTabsManager._prefsSidebarExpanded) {
+      if (shouldRecalculate && sidebarExpanded) {
         sidebarWidth = Math.max(sidebarWidth, 150);
       }
       // Second variable to get the genuine width of the sidebar
@@ -225,7 +226,7 @@ var gZenCompactModeManager = {
       if (
         event &&
         shouldRecalculate &&
-        gZenVerticalTabsManager._prefsSidebarExpanded &&
+        sidebarExpanded &&
         !gZenVerticalTabsManager._hadSidebarCollapse
       ) {
         return;

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

@@ -798,18 +798,16 @@
     }
   }
 
-  /* Center top buttons container */
   & #zen-sidebar-top-buttons {
     justify-content: center;
-    max-height: unset !important; /* Allow natural height */
+    max-height: unset !important;
     height: fit-content !important;
   }
 
-  /* Adjust titlebar layout for collapsed state */
   & #titlebar {
     display: grid;
     grid-template-rows: auto 1fr; /* Allow content below button box */
-    overflow: hidden;
+    overflow: clip;
   }
 
   /* Style top buttons customization target */

src/zen/workspaces/ZenWorkspaceCreation.mjs

@@ -170,6 +170,7 @@
             document.getElementById('nav-bar').style.visibility = 'collapse';
           }
           this.style.visibility = 'visible';
+          gZenCompactModeManager.getAndApplySidebarWidth();
           this.resolveInitialized();
           gZenUIManager.motion
             .animate(

src/zen/workspaces/ZenWorkspaceIcons.mjs

@@ -24,7 +24,7 @@
 
       this.addEventListener('mousedown', (e) => {
         const target = e.target.closest('toolbarbutton[zen-workspace-id]');
-        if (!target) {
+        if (!target || e.button != 0 || e.ctrlKey || e.shiftKey || e.altKey) {
           return;
         }
 
@@ -89,6 +89,7 @@
       button.setAttribute('class', 'subviewbutton');
       button.setAttribute('tooltiptext', workspace.name);
       button.setAttribute('zen-workspace-id', workspace.uuid);
+      button.setAttribute('context', 'zenWorkspaceMoreActions');
       const icon = document.createXULElement('label');
       icon.setAttribute('class', 'zen-workspace-icon');
       if (gZenWorkspaces.workspaceHasIcon(workspace)) {

src/zen/workspaces/ZenWorkspaces.mjs

@@ -115,6 +115,8 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
       document.documentElement.setAttribute('zen-private-window', 'true');
     }
 
+    this.popupOpenHandler = this._popupOpenHandler.bind(this);
+
     window.addEventListener('resize', this.onWindowResize.bind(this));
     this.addPopupListeners();
 
@@ -134,11 +136,11 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     if (!this._hasInitializedTabsStrip) {
       await this.delayedStartup();
     }
+    this._initializeWorkspaceTabContextMenus();
     await this.initializeWorkspaces();
     await this.promiseSectionsInitialized;
 
     // Non UI related initializations
-    this._initializeWorkspaceTabContextMenus();
     if (
       Services.prefs.getBoolPref('zen.workspaces.swipe-actions', false) &&
       this.workspaceEnabled &&
@@ -560,7 +562,9 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
         break;
     }
     requestAnimationFrame(() => {
-      gNavToolbox.setAttribute('zen-has-hover', 'true');
+      requestAnimationFrame(() => {
+        gNavToolbox.setAttribute('zen-has-hover', 'true');
+      });
     });
   }
 
@@ -646,11 +650,22 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
         document.documentElement.removeAttribute('swipe-gesture');
         gZenUIManager.tabsWrapper.style.removeProperty('scrollbar-width');
         this.updateTabsContainers();
+        document.removeEventListener('popupshown', this.popupOpenHandler, { once: true });
       },
       true
     );
   }
 
+  _popupOpenHandler(event) {
+    // If a popup is opened, we should stop the swipe gesture
+    if (this._swipeState?.isGestureActive) {
+      document.documentElement.removeAttribute('swipe-gesture');
+      gZenUIManager.tabsWrapper.style.removeProperty('scrollbar-width');
+      this.updateTabsContainers();
+      this._cancelSwipeAnimation();
+    }
+  }
+
   _handleSwipeMayStart(event) {
     if (this.privateWindowOrDisabled || this._inChangingWorkspace) return;
     if (event.target.closest('#zen-sidebar-foot-buttons')) return;
@@ -669,6 +684,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     if (!this.workspaceEnabled) return;
 
     document.documentElement.setAttribute('swipe-gesture', 'true');
+    document.addEventListener('popupshown', this.popupOpenHandler, { once: true });
 
     event.preventDefault();
     event.stopPropagation();
@@ -842,6 +858,14 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   async workspaceBookmarks() {
+    if (this.privateWindowOrDisabled) {
+      this._workspaceBookmarksCache = {
+        bookmarks: [],
+        lastChangeTimestamp: 0,
+      };
+      return this._workspaceBookmarksCache;
+    }
+
     if (this._workspaceBookmarksCache) {
       return this._workspaceBookmarksCache;
     }
@@ -867,7 +891,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     } catch (e) {
       console.error('gZenWorkspaces: Error initializing theme picker', e);
     }
-    this.onWindowResize();
     await gZenSessionStore.promiseInitialized;
     await this.workspaceBookmarks();
     await this.initializeTabsStripSections();
@@ -875,6 +898,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     await gZenPinnedTabManager.refreshPinnedTabs({ init: true });
     await this.changeWorkspace(activeWorkspace, { onInit: true });
     this._fixTabPositions();
+    this.onWindowResize();
     this._resolveInitialized();
     this._clearAnyZombieTabs(); // Dont call with await
 
@@ -891,7 +915,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   async selectStartPage() {
-    if (gZenUIManager.testingEnabled || !this.workspaceEnabled) {
+    if (!this.workspaceEnabled) {
       return;
     }
     await this.promiseInitialized;
@@ -993,7 +1017,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   handleInitialTab(tab, isEmpty) {
-    if (gZenUIManager.testingEnabled) {
+    if (gZenUIManager.testingEnabled || !this.workspaceEnabled) {
       return;
     }
     // note: We cant access `gZenVerticalTabsManager._canReplaceNewTab` this early
@@ -1006,9 +1030,13 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   changeWorkspaceIcon() {
-    const anchor = this.activeWorkspaceIndicator?.querySelector(
+    let anchor = this.activeWorkspaceIndicator?.querySelector(
       '.zen-current-workspace-indicator-icon'
     );
+    if (this.#contextMenuData?.workspaceId) {
+      anchor = this.#contextMenuData.originalTarget;
+    }
+    const workspaceId = this.#contextMenuData?.workspaceId || this.activeWorkspace;
     if (!anchor) {
       return;
     }
@@ -1020,7 +1048,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     gZenEmojiPicker
       .open(anchor)
       .then(async (emoji) => {
-        const workspace = this.getActiveWorkspaceFromCache();
+        const workspace = this.getWorkspaceFromId(workspaceId);
         if (!workspace) {
           console.warn('No active workspace found to change icon');
           return;
@@ -1107,6 +1135,13 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
   addPopupListeners() {
     const workspaceActions = document.getElementById('zenWorkspaceMoreActions');
     workspaceActions.addEventListener('popupshowing', this.updateWorkspaceActionsMenu.bind(this));
+    workspaceActions.addEventListener('popuphidden', () => {
+      setTimeout(() => {
+        setTimeout(() => {
+          this.#contextMenuData = null;
+        }, 0);
+      }, 0); // Delay to ensure the context menu data is cleared after the popup is hidden
+    });
 
     const contextChangeContainerTabMenu = document.getElementById(
       'context_zenWorkspacesOpenInContainerTab'
@@ -1121,6 +1156,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     );
   }
 
+  #contextMenuData = null;
   updateWorkspaceActionsMenu(event) {
     if (event.target.id !== 'zenWorkspaceMoreActions') {
       return;
@@ -1133,10 +1169,63 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     } else {
       openInContainerMenuItem.setAttribute('hidden', 'true');
     }
+    // Call parent node as on windows, the text can be double clicked
+    let target;
+    try {
+      target = event.explicitOriginalTarget?.closest('toolbarbutton');
+    } catch (_) {}
+    this.#contextMenuData = {
+      workspaceId: target?.getAttribute('zen-workspace-id'),
+      originalTarget: target,
+    };
+    const workspaceName = document.getElementById('context_zenEditWorkspace');
+    const themePicker = document.getElementById('context_zenChangeWorkspaceTheme');
+    workspaceName.hidden =
+      this.#contextMenuData.workspaceId &&
+      this.#contextMenuData.workspaceId !== this.activeWorkspace;
+    themePicker.hidden =
+      this.#contextMenuData.workspaceId &&
+      this.#contextMenuData.workspaceId !== this.activeWorkspace;
+    const separator = document.getElementById('context_zenWorkspacesSeparator');
+    for (const item of event.target.querySelectorAll('.zen-workspace-context-menu-item')) {
+      item.remove();
+    }
+    if (!this.#contextMenuData.workspaceId) {
+      separator.hidden = false;
+      for (const workspace of [...this._workspaceCache.workspaces].reverse()) {
+        const item = document.createXULElement('menuitem');
+        item.className = 'zen-workspace-context-menu-item';
+        item.setAttribute('zen-workspace-id', workspace.uuid);
+        item.setAttribute('disabled', workspace.uuid === this.activeWorkspace);
+        let name = workspace.name;
+        if (workspace.icon && workspace.icon !== '') {
+          name = `${workspace.icon}  ${name}`;
+        }
+        item.setAttribute('label', name);
+        item.addEventListener('command', (e) => {
+          this.changeWorkspaceWithID(e.target.closest('menuitem').getAttribute('zen-workspace-id'));
+        });
+        separator.after(item);
+      }
+    } else {
+      separator.hidden = true;
+    }
+    event.target.addEventListener(
+      'popuphidden',
+      () => {
+        this.#contextMenuData = null;
+      },
+      { once: true }
+    );
   }
 
   updateWorkspaceActionsMenuContainer(event) {
-    const workspace = this.getActiveWorkspaceFromCache();
+    let workspace;
+    if (this.#contextMenuData?.workspaceId) {
+      workspace = this.getWorkspaceFromId(this.#contextMenuData.workspaceId);
+    } else {
+      workspace = this.getActiveWorkspaceFromCache();
+    }
     let containerTabId = workspace.containerTabId;
     return window.createUserContextMenu(event, {
       isContextMenu: true,
@@ -1158,10 +1247,10 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
   async removeWorkspace(windowID) {
     let workspacesData = await this._workspaces();
-    this._deleteAllTabsInWorkspace(windowID);
     await this.changeWorkspace(
       workspacesData.workspaces.find((workspace) => workspace.uuid !== windowID)
     );
+    this._deleteAllTabsInWorkspace(windowID);
     delete this._lastSelectedWorkspaceTabs[windowID];
     await ZenWorkspacesStorage.removeWorkspace(windowID);
     // Remove the workspace from the cache
@@ -1170,12 +1259,8 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     );
     await this._propagateWorkspaceData();
     await this._updateWorkspacesChangeContextMenu();
+    this.workspaceElement(windowID)?.remove();
     this.onWindowResize();
-    for (let container of document.querySelectorAll(
-      `.zen-workspace-tabs-section[zen-workspace-id="${windowID}"]`
-    )) {
-      container.remove();
-    }
     this.registerPinnedResizeObserver();
   }
 
@@ -1322,7 +1407,9 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     gBrowser.removeTabs(
       Array.from(this.allStoredTabs).filter(
         (tab) =>
-          tab.getAttribute('zen-workspace-id') === workspaceID && !tab.hasAttribute('zen-empty-tab')
+          tab.getAttribute('zen-workspace-id') === workspaceID &&
+          !tab.hasAttribute('zen-empty-tab') &&
+          !tab.hasAttribute('zen-essential')
       ),
       {
         animate: false,
@@ -2327,23 +2414,24 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     this._organizingWorkspaceStrip = true;
     let workspaces = await this._workspaces();
     let workspace = workspaces.workspaces.find(
-      (workspace) => workspace.uuid === this.activeWorkspace
+      (workspace) => workspace.uuid === (this.#contextMenuData?.workspaceId || this.activeWorkspace)
     );
     let userContextId = parseInt(event.target.getAttribute('data-usercontextid'));
     workspace.containerTabId = userContextId + 0; // +0 to convert to number
     await this.saveWorkspace(workspace);
-    await this._organizeWorkspaceStripLocations(workspace, true);
+    await this._organizeWorkspaceStripLocations(this.getActiveWorkspaceFromCache(), true);
     await gZenWorkspaces.updateTabsContainers();
     this.tabContainer._invalidateCachedTabs();
   }
 
   async contextDeleteWorkspace() {
+    const workspaceId = this.#contextMenuData?.workspaceId || this.activeWorkspace;
     const [title, body] = await document.l10n.formatValues([
       { id: 'zen-workspaces-delete-workspace-title' },
       { id: 'zen-workspaces-delete-workspace-body' },
     ]);
     if (Services.prompt.confirm(null, title, body)) {
-      await this.removeWorkspace(this.activeWorkspace);
+      await this.removeWorkspace(workspaceId);
     }
   }
 

src/zen/workspaces/zen-workspaces.css

@@ -41,11 +41,15 @@
     align-items: center;
     position: relative;
 
-    & .zen-workspace-icon[no-icon='true'] {
-      width: 6px;
-      height: 6px;
-      background: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4));
-      border-radius: 50%;
+    & .zen-workspace-icon {
+      pointer-events: none;
+   
+      &[no-icon='true'] {
+        width: 6px;
+        height: 6px;
+        background: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4));
+        border-radius: 50%;
+      }
     }
 
     filter: grayscale(1);

surfer.json

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