fix: Fixed compact mode being available in popup windows, b=(no-bug), c=compact-mode

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

.prettierignore

@@ -9,6 +9,8 @@ engine/
 
 **/*.svg
 
+**/*.inc.css
+
 surfer.json
 
 src/browser/app/profile/*.js
@@ -26,4 +28,6 @@ src/zen/tabs/zen-tabs.css
 src/zen/compact-mode/zen-compact-mode.css
 src/zen/common/ZenEmojies.mjs
 
+src/zen/workspaces/zen-workspaces.css
+
 *.inc

.vscode/settings.json

@@ -1,31 +0,0 @@
-{
-  "files.associations": {
-    "*.inc": "cpp",
-    "typeindex": "cpp",
-    "typeinfo": "cpp",
-    "functional": "cpp",
-    "array": "cpp",
-    "*.tcc": "cpp",
-    "memory": "cpp",
-    "future": "cpp",
-    "istream": "cpp",
-    "tuple": "cpp",
-    "utility": "cpp",
-    "variant": "cpp",
-    "compare": "cpp",
-    "thread": "cpp",
-    "string": "cpp",
-    "string_view": "cpp",
-    "span": "cpp",
-    "vector": "cpp",
-    "charconv": "cpp",
-    "chrono": "cpp",
-    "optional": "cpp",
-    "format": "cpp",
-    "ratio": "cpp",
-    "system_error": "cpp",
-    "regex": "cpp",
-    "type_traits": "cpp"
-  },
-  "git.ignoreLimitWarning": true
-}

README.md

@@ -28,9 +28,9 @@
 
 ## 🖥️ Compatibility
 
-Zen is currently built using Firefox version `138.0.3`! 🚀
+Zen is currently built using Firefox version `138.0.4`! 🚀
 
-- [`Zen Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 138.0.3`!
+- [`Zen Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 138.0.4`!
 - Check out the latest [release notes](https://zen-browser.app/release-notes)!
 - Part of our mission is to keep Zen up-to-date with the latest version of Firefox, so you can enjoy the latest features and security updates!
 

build/firefox-cache/l10n-last-commit-hash

@@ -1 +1 @@
-a7fc259e12695c40d6ae249950f054221fed4f95
+f5fd58c29d2c9bfcc5dcfc8f4abbe69016e13b44

src/browser/app/profile/firefox-js.patch

@@ -1,8 +1,8 @@
 diff --git a/browser/app/profile/firefox.js b/browser/app/profile/firefox.js
-index 89b8b830e8f53582dd9910b0172098d31a8d8967..51bdc847823cb95f811b7e9d2d864b9aacf0e364 100644
+index eda8312b0edd34ed22c94c224167680ac6c9c459..56de47f79c553dab2676e127f5320e352b7d3a77 100644
 --- a/browser/app/profile/firefox.js
 +++ b/browser/app/profile/firefox.js
-@@ -3375,3 +3375,5 @@ pref("toolkit.contentRelevancy.enabled", false);
+@@ -3377,3 +3377,5 @@ pref("toolkit.contentRelevancy.enabled", false);
  pref("toolkit.contentRelevancy.ingestEnabled", false);
  // Pref to enable extra logging for the content relevancy feature
  pref("toolkit.contentRelevancy.log", false);

src/browser/base/content/browser-init-js.patch

@@ -15,7 +15,7 @@ index 3d5173315812589c0b79beec5f0419fc37cb8868..c4216db9e414fbbaead6ecd89b40366b
      TelemetryTimestamps.add("delayedStartupStarted");
  
      this._cancelDelayedStartup();
-+    ZenWorkspaces.afterLoadInit();
++    gZenWorkspaces.afterLoadInit();
  
      gBrowser.addEventListener(
        "PermissionStateChange",

src/browser/base/content/browser-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
-index ea79d296e7dd0f8fd812b0677a252af5cf7ad26e..bd95ef5d6b99399c859af1cf71d9d62477f4ac2b 100644
+index ea79d296e7dd0f8fd812b0677a252af5cf7ad26e..08568d90f888cc262a23ffaa72e985e7c3463b93 100644
 --- a/browser/base/content/browser.js
 +++ b/browser/base/content/browser.js
 @@ -33,6 +33,7 @@ ChromeUtils.defineESModuleGetters(this, {
@@ -15,7 +15,7 @@ index ea79d296e7dd0f8fd812b0677a252af5cf7ad26e..bd95ef5d6b99399c859af1cf71d9d624
      TranslationsParent.onLocationChange(gBrowser.selectedBrowser);
  
 +    gZenViewSplitter.onLocationChange(gBrowser.selectedBrowser);
-+    ZenWorkspaces.onLocationChange(gBrowser.selectedBrowser);
++    gZenWorkspaces.onLocationChange(gBrowser.selectedBrowser);
 +    gZenTabUnloader.onLocationChange(gBrowser.selectedBrowser);
 +    gZenPinnedTabManager.onLocationChange(gBrowser.selectedBrowser);
 +
@@ -27,7 +27,7 @@ index ea79d296e7dd0f8fd812b0677a252af5cf7ad26e..bd95ef5d6b99399c859af1cf71d9d624
        ignoreFragmentWhenComparing
      );
 -    let browsers = aWindow.gBrowser.browsers;
-+    let browsers = aWindow.ZenWorkspaces.allUsedBrowsers;
++    let browsers = aWindow.gZenWorkspaces.allUsedBrowsers;
      for (let i = 0; i < browsers.length; i++) {
        let browser = browsers[i];
        let browserCompare = cleanURL(
@@ -36,7 +36,7 @@ index ea79d296e7dd0f8fd812b0677a252af5cf7ad26e..bd95ef5d6b99399c859af1cf71d9d624
  
          if (!doAdopt) {
 -          aWindow.gBrowser.tabContainer.selectedIndex = i;
-+          aWindow.ZenWorkspaces.switchIfNeeded(browser, i);
++          aWindow.gZenWorkspaces.switchIfNeeded(browser, i);
          }
  
          return true;

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..b5735712aaa7c2ae2baa4b858e735413b130ca94 100644
+index 00c8976d3e258c0875d7da2f3ec823d8907a84c9..cc61d5a845b5ce22a61f5a1aab8b280b2bcdf101 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
 @@ -2,7 +2,7 @@
@@ -22,27 +22,24 @@ index 00c8976d3e258c0875d7da2f3ec823d8907a84c9..b5735712aaa7c2ae2baa4b858e735413
    <toolbar id="TabsToolbar"
             class="browser-toolbar browser-titlebar"
             fullscreentoolbar="true"
-@@ -50,6 +50,10 @@
+@@ -50,6 +50,8 @@
                tooltip="tabbrowser-tab-tooltip"
                orient="horizontal"
                stopwatchid="tabClick">
-+<html:div id="zen-essentials-wrapper" skipintoolbarset="true"></html:div>
-+<hbox id="zen-current-workspace-indicator-container"></hbox>
++<html:div id="zen-essentials" skipintoolbarset="true"></html:div>
 +<html:div id="zen-tabs-wrapper">
-+<html:div id="zen-browser-tabs-container">
            <hbox class="tab-drop-indicator" hidden="true"/>
            <html:span id="tab-drag-empty-feedback" role="presentation"/>
  # If the name (tabbrowser-arrowscrollbox) or structure of this changes
-@@ -76,6 +80,8 @@
+@@ -76,6 +78,7 @@
                                tooltip="dynamic-shortcut-tooltip"
                                data-l10n-id="tabs-toolbar-new-tab"/>
            <html:span id="tabbrowser-tab-a11y-desc" hidden="true"/>
-+</html:div>
 +</html:div>
          </tabs>
  
          <toolbarbutton id="new-tab-button"
-@@ -101,9 +107,10 @@
+@@ -101,9 +104,10 @@
  #include private-browsing-indicator.inc.xhtml
      <toolbarbutton class="content-analysis-indicator toolbarbutton-1 content-analysis-indicator-icon"/>
  

src/browser/base/content/zen-assets.jar.inc.mn

@@ -39,11 +39,13 @@
         content/browser/zen-components/actors/ZenThemeMarketplaceParent.sys.mjs (../../zen/mods/actors/ZenThemeMarketplaceParent.sys.mjs)
         content/browser/zen-components/actors/ZenThemeMarketplaceChild.sys.mjs  (../../zen/mods/actors/ZenThemeMarketplaceChild.sys.mjs)
 
+        content/browser/zen-components/ZenWorkspaceIcons.mjs                    (../../zen/workspaces/ZenWorkspaceIcons.mjs)
+        content/browser/zen-components/ZenWorkspace.mjs                         (../../zen/workspaces/ZenWorkspace.mjs)
         content/browser/zen-components/ZenWorkspaces.mjs                        (../../zen/workspaces/ZenWorkspaces.mjs)
         content/browser/zen-components/ZenWorkspacesStorage.mjs                 (../../zen/workspaces/ZenWorkspacesStorage.mjs)
         content/browser/zen-components/ZenWorkspacesSync.mjs                    (../../zen/workspaces/ZenWorkspacesSync.mjs)
         content/browser/zen-components/ZenGradientGenerator.mjs                 (../../zen/workspaces/ZenGradientGenerator.mjs)
-        content/browser/zen-styles/zen-workspaces.css                           (../../zen/workspaces/zen-workspaces.css)
+*       content/browser/zen-styles/zen-workspaces.css                           (../../zen/workspaces/zen-workspaces.css)
         content/browser/zen-styles/zen-gradient-generator.css                   (../../zen/workspaces/zen-gradient-generator.css)
 
         content/browser/zen-components/ZenKeyboardShortcuts.mjs                 (../../zen/kbs/ZenKeyboardShortcuts.mjs)

src/browser/base/content/zen-preloaded.inc.xhtml

@@ -5,6 +5,8 @@
   Services.scriptloader.loadSubScript("chrome://browser/content/zen-sets.js", this);
   Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenCommonUtils.mjs", this);
   Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenKeyboardShortcuts.mjs", this);
+  Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenWorkspaceIcons.mjs", this);
+  Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenWorkspace.mjs", this);
   Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenWorkspaces.mjs", this);
   Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenWorkspacesSync.mjs", this);
   Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenActorsManager.mjs", this);

src/browser/base/content/zen-sidebar-icons.inc.xhtml

@@ -9,5 +9,5 @@
   context="toolbar-context-menu"
   mode="icons">
   <toolbarbutton removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" command="cmd_zenToggleSidebar" data-l10n-id="sidebar-zen-expand"></toolbarbutton>
-  <toolbarbutton id="zen-workspaces-button" class="chromeclass-toolbar-additional" overflows="false" removable="false"></toolbarbutton>
+  <zen-workspace-icons id="zen-workspaces-button" overflows="false" removable="false"></zen-workspace-icons>
 </toolbar>

src/browser/components/customizableui/CustomizeMode-sys-mjs.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/customizableui/CustomizeMode.sys.mjs b/browser/components/customizableui/CustomizeMode.sys.mjs
-index 619bb2af5a3a0995fc93fa040696dd2854848ab5..bbc6bad906e9ccaf668ca99f4a0411f564ef1e56 100644
+index 619bb2af5a3a0995fc93fa040696dd2854848ab5..14ad5f6122971a0a0dc20d22acdc073f84965dad 100644
 --- a/browser/components/customizableui/CustomizeMode.sys.mjs
 +++ b/browser/components/customizableui/CustomizeMode.sys.mjs
 @@ -500,7 +500,7 @@ export class CustomizeMode {
@@ -20,7 +20,15 @@ index 619bb2af5a3a0995fc93fa040696dd2854848ab5..bbc6bad906e9ccaf668ca99f4a0411f5
      customizer.hidden = true;
      browser.hidden = false;
  
-@@ -3125,6 +3125,20 @@ export class CustomizeMode {
+@@ -1173,6 +1173,7 @@ export class CustomizeMode {
+     return (
+       aNode.localName == "toolbarbutton" ||
+       aNode.localName == "toolbaritem" ||
++      aNode.localName == "zen-workspace-icons" ||
+       aNode.localName == "toolbarseparator" ||
+       aNode.localName == "toolbarspring" ||
+       aNode.localName == "toolbarspacer"
+@@ -3125,6 +3126,20 @@ export class CustomizeMode {
          if (makeSpaceImmediately) {
            aDraggedOverItem.setAttribute("notransition", "true");
          }

src/browser/components/places/content/browserPlacesViews-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/places/content/browserPlacesViews.js b/browser/components/places/content/browserPlacesViews.js
-index ad138a38340e8e8510d395f46c30ec4121d731bb..9294f05633acbe560df003333b7ef7d9a12a2a11 100644
+index ad138a38340e8e8510d395f46c30ec4121d731bb..52beaa66395e2b240a7122936cd4d2452b386724 100644
 --- a/browser/components/places/content/browserPlacesViews.js
 +++ b/browser/components/places/content/browserPlacesViews.js
 @@ -330,12 +330,23 @@ class PlacesViewBase {
@@ -13,7 +13,7 @@ index ad138a38340e8e8510d395f46c30ec4121d731bb..9294f05633acbe560df003333b7ef7d9
 +      let child = resultNode.getChild(i);
 +      // Skip nodes that don't belong in current workspace
 +      if (PlacesUtils.nodeIsURI(child) || PlacesUtils.containerTypes.includes(child.type)) {
-+        if (typeof ZenWorkspaces !== 'undefined' && ZenWorkspaces.isBookmarkInAnotherWorkspace(child)) {
++        if (typeof gZenWorkspaces !== 'undefined' && gZenWorkspaces.isBookmarkInAnotherWorkspace(child)) {
 +          continue;
 +        }
 +      }
@@ -52,7 +52,7 @@ index ad138a38340e8e8510d395f46c30ec4121d731bb..9294f05633acbe560df003333b7ef7d9
 +    for (let i = 0; i < cc; i++) {
 +      let child = this._resultNode.getChild(i);
 +      if (PlacesUtils.nodeIsURI(child) || PlacesUtils.containerTypes.includes(child.type)) {
-+        if (!(typeof ZenWorkspaces !== 'undefined' && ZenWorkspaces.isBookmarkInAnotherWorkspace(child))) {
++        if (!(typeof gZenWorkspaces !== 'undefined' && gZenWorkspaces.isBookmarkInAnotherWorkspace(child))) {
 +          visibleNodes.push(child);
 +        }
 +      } else {

src/browser/components/sessionstore/SessionStore-sys-mjs.patch

@@ -1,8 +1,8 @@
 diff --git a/browser/components/sessionstore/SessionStore.sys.mjs b/browser/components/sessionstore/SessionStore.sys.mjs
-index 5633e5032f5d50c70512187d27e045b579978927..6b9e56cb62a4812925ff812763ea9b0e6a478202 100644
+index 11794372f8ff13387b54dabdf4111dfdb89ea998..0e51251a579cee759f25272894c82a1744d79b26 100644
 --- a/browser/components/sessionstore/SessionStore.sys.mjs
 +++ b/browser/components/sessionstore/SessionStore.sys.mjs
-@@ -2081,7 +2081,6 @@ var SessionStoreInternal = {
+@@ -2088,7 +2088,6 @@ var SessionStoreInternal = {
        if (closedWindowState) {
          let newWindowState;
          if (
@@ -10,7 +10,7 @@ index 5633e5032f5d50c70512187d27e045b579978927..6b9e56cb62a4812925ff812763ea9b0e
            !lazy.SessionStartup.willRestore()
          ) {
            // We want to split the window up into pinned tabs and unpinned tabs.
-@@ -2296,11 +2295,9 @@ var SessionStoreInternal = {
+@@ -2303,11 +2302,9 @@ var SessionStoreInternal = {
            tabbrowser.selectedTab.label;
        }
  
@@ -22,7 +22,7 @@ index 5633e5032f5d50c70512187d27e045b579978927..6b9e56cb62a4812925ff812763ea9b0e
  
        // Store the window's close date to figure out when each individual tab
        // was closed. This timestamp should allow re-arranging data based on how
-@@ -3202,7 +3199,7 @@ var SessionStoreInternal = {
+@@ -3209,7 +3206,7 @@ var SessionStoreInternal = {
      if (!isPrivateWindow && tabState.isPrivate) {
        return;
      }
@@ -31,7 +31,7 @@ index 5633e5032f5d50c70512187d27e045b579978927..6b9e56cb62a4812925ff812763ea9b0e
        return;
      }
  
-@@ -3911,6 +3908,9 @@ var SessionStoreInternal = {
+@@ -3918,6 +3915,9 @@ var SessionStoreInternal = {
          Math.min(tabState.index, tabState.entries.length)
        );
        tabState.pinned = false;
@@ -41,7 +41,7 @@ index 5633e5032f5d50c70512187d27e045b579978927..6b9e56cb62a4812925ff812763ea9b0e
  
        if (inBackground === false) {
          aWindow.gBrowser.selectedTab = newTab;
-@@ -5225,7 +5225,7 @@ var SessionStoreInternal = {
+@@ -5232,7 +5232,7 @@ var SessionStoreInternal = {
      }
  
      let workspaceID = aWindow.getWorkspaceID();
@@ -50,12 +50,12 @@ index 5633e5032f5d50c70512187d27e045b579978927..6b9e56cb62a4812925ff812763ea9b0e
        winData.workspaceID = workspaceID;
      }
    },
-@@ -5416,14 +5416,15 @@ var SessionStoreInternal = {
+@@ -5423,14 +5423,15 @@ var SessionStoreInternal = {
      }
  
      let tabbrowser = aWindow.gBrowser;
 -    let tabs = tabbrowser.tabs;
-+    let tabs = aWindow.ZenWorkspaces.allStoredTabs;
++    let tabs = aWindow.gZenWorkspaces.allStoredTabs;
      /** @type {WindowStateData} */
      let winData = this._windows[aWindow.__SSi];
      let tabsData = (winData.tabs = []);
@@ -68,7 +68,7 @@ index 5633e5032f5d50c70512187d27e045b579978927..6b9e56cb62a4812925ff812763ea9b0e
          continue;
        }
        let tabData = lazy.TabState.collect(tab, TAB_CUSTOM_VALUES.get(tab));
-@@ -5442,7 +5443,7 @@ var SessionStoreInternal = {
+@@ -5449,7 +5450,7 @@ var SessionStoreInternal = {
      // We don't store the Firefox View tab in Session Store, so if it was the last selected "tab" when
      // a window is closed, point to the first item in the tab strip instead (it will never be the Firefox View tab,
      // since it's only inserted into the tab strip after it's selected).
@@ -77,7 +77,7 @@ index 5633e5032f5d50c70512187d27e045b579978927..6b9e56cb62a4812925ff812763ea9b0e
        selectedIndex = 1;
        winData.title = tabbrowser.tabs[0].label;
      }
-@@ -5599,6 +5600,7 @@ var SessionStoreInternal = {
+@@ -5606,6 +5607,7 @@ var SessionStoreInternal = {
          winData.tabs,
          winData.groups ?? []
        );
@@ -85,7 +85,7 @@ index 5633e5032f5d50c70512187d27e045b579978927..6b9e56cb62a4812925ff812763ea9b0e
        this._log.debug(
          `restoreWindow, createTabsForSessionRestore returned ${tabs.length} tabs`
        );
-@@ -6148,8 +6150,23 @@ var SessionStoreInternal = {
+@@ -6155,8 +6157,23 @@ var SessionStoreInternal = {
  
      // Most of tabData has been restored, now continue with restoring
      // attributes that may trigger external events.

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

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tab.js b/browser/components/tabbrowser/content/tab.js
-index dc92771ebc65095dfebbddc238ee6d4fffd897bf..ae9120f7cc8989cf625ac101d053d82582e32009 100644
+index dc92771ebc65095dfebbddc238ee6d4fffd897bf..fa35f6835498f8e51f060479addb25237d3fe7ff 100644
 --- a/browser/components/tabbrowser/content/tab.js
 +++ b/browser/components/tabbrowser/content/tab.js
 @@ -21,6 +21,7 @@
@@ -57,7 +57,18 @@ index dc92771ebc65095dfebbddc238ee6d4fffd897bf..ae9120f7cc8989cf625ac101d053d825
          event.target.classList.contains("tab-icon-overlay") ||
          event.target.classList.contains("tab-audio-button")
        ) {
-@@ -554,6 +559,7 @@
+@@ -508,6 +513,10 @@
+       this.style.MozUserFocus = "";
+     }
+ 
++    get glanceTab() {
++      return this.querySelector("tab[zen-glance-tab]");
++    }
++
+     on_click(event) {
+       if (event.button != 0) {
+         return;
+@@ -554,6 +563,7 @@
              telemetrySource: lazy.TabMetrics.METRIC_SOURCE.TAB_STRIP,
            });
          } else {
@@ -65,7 +76,7 @@ index dc92771ebc65095dfebbddc238ee6d4fffd897bf..ae9120f7cc8989cf625ac101d053d825
            gBrowser.removeTab(this, {
              animate: true,
              triggeringEvent: event,
-@@ -564,6 +570,14 @@
+@@ -564,6 +574,14 @@
          // (see tabbrowser-tabs 'click' handler).
          gBrowser.tabContainer._blockDblClick = true;
        }
@@ -80,7 +91,7 @@ index dc92771ebc65095dfebbddc238ee6d4fffd897bf..ae9120f7cc8989cf625ac101d053d825
      }
  
      on_dblclick(event) {
-@@ -587,6 +601,8 @@
+@@ -587,6 +605,8 @@
            animate: true,
            triggeringEvent: event,
          });

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 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb6c1a0cf3 100644
+index dacf52070348a205a56ef42eb8320602f98e5daa..b5c05dfba338b1252b23d2d47336237adbec83dd 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
 @@ -415,11 +415,45 @@
@@ -54,7 +54,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
        this.tabpanels.appendChild(panel);
  
        let tab = this.tabs[0];
-+      ZenWorkspaces.handleInitialTab(tab, (!remoteType || remoteType === E10SUtils.PRIVILEGEDABOUT_REMOTE_TYPE) && !gZenUIManager.testingEnabled);
++      gZenWorkspaces.handleInitialTab(tab, (!remoteType || remoteType === E10SUtils.PRIVILEGEDABOUT_REMOTE_TYPE) && !gZenUIManager.testingEnabled);
        tab.linkedPanel = uniqueId;
        this._selectedTab = tab;
        this._selectedBrowser = browser;
@@ -68,7 +68,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
 +      if (this.tabContainer.verticalMode && !handled) {
          this.#handleTabMove(aTab, () =>
 -          this.verticalPinnedTabsContainer.appendChild(aTab)
-+          aTab.hasAttribute("zen-essential") ? ZenWorkspaces.getEssentialsSection(aTab).appendChild(aTab) : this.verticalPinnedTabsContainer.insertBefore(aTab, this.verticalPinnedTabsContainer.lastChild)
++          aTab.hasAttribute("zen-essential") ? gZenWorkspaces.getEssentialsSection(aTab).appendChild(aTab) : this.verticalPinnedTabsContainer.insertBefore(aTab, this.verticalPinnedTabsContainer.lastChild)
          );
 -      } else {
 +      } else if (!handled) {
@@ -87,7 +87,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
            aTab.removeAttribute("pinned");
 -          this.tabContainer.arrowScrollbox.prepend(aTab);
 +          if (!handled) {
-+            ZenWorkspaces.activeWorkspaceStrip.prepend(aTab);
++            gZenWorkspaces.activeWorkspaceStrip.prepend(aTab);
 +          }
          });
        } else {
@@ -200,8 +200,8 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
  
 +      let hasZenDefaultUserContextId = false;
 +      let zenForcedWorkspaceId = undefined;
-+      if (typeof ZenWorkspaces !== "undefined" && !_forZenEmptyTab) {
-+        [userContextId, hasZenDefaultUserContextId, zenForcedWorkspaceId] = ZenWorkspaces.getContextIdIfNeeded(userContextId, fromExternal, allowInheritPrincipal);
++      if (typeof gZenWorkspaces !== "undefined" && !_forZenEmptyTab) {
++        [userContextId, hasZenDefaultUserContextId, zenForcedWorkspaceId] = gZenWorkspaces.getContextIdIfNeeded(userContextId, fromExternal, allowInheritPrincipal);
 +      }
 +
        if (!UserInteraction.running("browser.tabs.opening", window)) {
@@ -262,7 +262,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
        return group;
      }
  
-@@ -2993,6 +3070,7 @@
+@@ -2993,10 +3070,10 @@
          insertBefore = null,
          isUserTriggered = false,
          telemetryUserCreateSource = "unknown",
@@ -270,7 +270,11 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
        } = {}
      ) {
        if (!tabs?.length) {
-@@ -3011,7 +3089,12 @@
+-        throw new Error("Cannot create tab group with zero tabs");
+       }
+ 
+       if (!color) {
+@@ -3011,7 +3088,12 @@
          id = `${Date.now()}-${Math.round(Math.random() * 100)}`;
        }
        let group = this._createTabGroup(id, color, false, label);
@@ -284,7 +288,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
          group,
          insertBefore?.group ?? insertBefore
        );
-@@ -3342,6 +3425,7 @@
+@@ -3342,6 +3424,7 @@
          openWindowInfo,
          skipLoad,
          triggeringRemoteType,
@@ -292,7 +296,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
        }
      ) {
        // If we don't have a preferred remote type (or it is `NOT_REMOTE`), and
-@@ -3411,6 +3495,7 @@
+@@ -3411,6 +3494,7 @@
            openWindowInfo,
            name,
            skipLoad,
@@ -300,7 +304,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
          });
        }
  
-@@ -3599,7 +3684,7 @@
+@@ -3599,7 +3683,7 @@
          // Add a new tab if needed.
          if (!tab) {
            let createLazyBrowser =
@@ -309,7 +313,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
  
            let url = "about:blank";
            if (tabData.entries?.length) {
-@@ -3637,7 +3722,29 @@
+@@ -3637,7 +3721,29 @@
              skipLoad: true,
              preferredRemoteType,
            });
@@ -339,7 +343,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
            if (select) {
              tabToSelect = tab;
            }
-@@ -3661,7 +3768,8 @@
+@@ -3661,7 +3767,8 @@
              // needs calling:
              shouldUpdateForPinnedTabs = true;
            }
@@ -349,7 +353,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
            let { groupId } = tabData;
            const tabGroup = tabGroupWorkingData.get(groupId);
            // if a tab refers to a tab group we don't know, skip any group
-@@ -3675,7 +3783,10 @@
+@@ -3675,7 +3782,10 @@
                  tabGroup.stateData.id,
                  tabGroup.stateData.color,
                  tabGroup.stateData.collapsed,
@@ -361,26 +365,26 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
                );
                tabsFragment.appendChild(tabGroup.node);
              }
-@@ -3723,8 +3834,16 @@
+@@ -3723,8 +3833,16 @@
        // to remove the old selected tab.
        if (tabToSelect) {
          let leftoverTab = this.selectedTab;
 -        this.selectedTab = tabToSelect;
 -        this.removeTab(leftoverTab);
-+        ZenWorkspaces._tabToRemoveForEmpty = leftoverTab;
++        gZenWorkspaces._tabToRemoveForEmpty = leftoverTab;
 +        if (Services.prefs.getBoolPref("zen.workspaces.continue-where-left-off")) {
-+          ZenWorkspaces._tabToSelect = selectTab - 1;
++          gZenWorkspaces._tabToSelect = selectTab - 1;
 +        }
-+        if (ZenWorkspaces._initialTab && !gZenVerticalTabsManager._canReplaceNewTab) {
-+          ZenWorkspaces._initialTab._shouldRemove = true;
++        if (gZenWorkspaces._initialTab && !gZenVerticalTabsManager._canReplaceNewTab) {
++          gZenWorkspaces._initialTab._shouldRemove = true;
 +        }
 +      }
 +      else {
-+        ZenWorkspaces._tabToRemoveForEmpty = this.selectedTab;
++        gZenWorkspaces._tabToRemoveForEmpty = this.selectedTab;
        }
  
        if (tabs.length > 1 || !tabs[0].selected) {
-@@ -3912,7 +4031,7 @@
+@@ -3912,7 +4030,7 @@
        // Ensure we have an index if one was not provided.
        if (typeof index != "number") {
          // Move the new tab after another tab if needed, to the end otherwise.
@@ -389,7 +393,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
          if (
            !bulkOrderedOpen &&
            ((openerTab &&
-@@ -3935,7 +4054,7 @@
+@@ -3935,7 +4053,7 @@
            ) {
              index = Infinity;
            } else if (previousTab.visible) {
@@ -398,7 +402,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
            } else if (previousTab == FirefoxViewHandler.tab) {
              index = 0;
            }
-@@ -3958,18 +4077,18 @@
+@@ -3958,18 +4076,18 @@
  
        // Ensure index is within bounds.
        if (tab.pinned) {
@@ -422,7 +426,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
          if (this.isTab(itemAfter) && itemAfter.group == tabGroup) {
            // Place at the front of, or between tabs in, the same tab group
            this.tabContainer.insertBefore(tab, itemAfter);
-@@ -4290,6 +4409,9 @@
+@@ -4290,6 +4408,9 @@
          return;
        }
  
@@ -432,7 +436,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
        this.removeTabs(selectedTabs, { telemetrySource });
      }
  
-@@ -4542,6 +4664,7 @@
+@@ -4542,6 +4663,7 @@
          telemetrySource,
        } = {}
      ) {
@@ -440,7 +444,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
        // When 'closeWindowWithLastTab' pref is enabled, closing all tabs
        // can be considered equivalent to closing the window.
        if (
-@@ -4626,6 +4749,7 @@
+@@ -4626,6 +4748,7 @@
          if (lastToClose) {
            this.removeTab(lastToClose, aParams);
          }
@@ -448,20 +452,12 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
        } catch (e) {
          console.error(e);
        }
-@@ -4650,6 +4774,7 @@
-         telemetrySource,
-       } = {}
-     ) {
-+      gZenUIManager.saveScrollbarState();
-       if (UserInteraction.running("browser.tabs.opening", window)) {
-         UserInteraction.finish("browser.tabs.opening", window);
-       }
-@@ -4663,6 +4788,12 @@
+@@ -4663,6 +4786,12 @@
          aTab._closeTimeNoAnimTimerId = Glean.browserTabclose.timeNoAnim.start();
        }
  
-+      if (ZenWorkspaces.workspaceEnabled) {
-+        let newTab = ZenWorkspaces.handleTabBeforeClose(aTab, closeWindowWithLastTab);
++      if (gZenWorkspaces.workspaceEnabled) {
++        let newTab = gZenWorkspaces.handleTabBeforeClose(aTab, closeWindowWithLastTab);
 +        if (newTab) {
 +          this.selectedTab = newTab;
 +        }
@@ -469,7 +465,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
        // Handle requests for synchronously removing an already
        // asynchronously closing tab.
        if (!animate && aTab.closing) {
-@@ -4677,7 +4808,9 @@
+@@ -4677,7 +4806,9 @@
        // frame created for it (for example, by updating the visually selected
        // state).
        let tabWidth = window.windowUtils.getBoundsWithoutFlushing(aTab).width;
@@ -480,44 +476,44 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
        if (
          !this._beginRemoveTab(aTab, {
            closeWindowFastpath: true,
-@@ -4840,7 +4973,7 @@
+@@ -4840,7 +4971,7 @@
            closeWindowWithLastTab != null
              ? closeWindowWithLastTab
              : !window.toolbar.visible ||
 -              Services.prefs.getBoolPref("browser.tabs.closeWindowWithLastTab");
-+            Services.prefs.getBoolPref("browser.tabs.closeWindowWithLastTab") && !ZenWorkspaces._isClosingWindow && !ZenWorkspaces._removedByStartupPage;
++            Services.prefs.getBoolPref("browser.tabs.closeWindowWithLastTab") && !gZenWorkspaces._isClosingWindow && !gZenWorkspaces._removedByStartupPage;
  
          if (closeWindow) {
            // We've already called beforeunload on all the relevant tabs if we get here,
-@@ -4864,6 +4997,7 @@
+@@ -4864,6 +4995,7 @@
  
          newTab = true;
        }
-+      ZenWorkspaces._removedByStartupPage = false;
++      gZenWorkspaces._removedByStartupPage = false;
        aTab._endRemoveArgs = [closeWindow, newTab];
  
        // swapBrowsersAndCloseOther will take care of closing the window without animation.
-@@ -4903,9 +5037,7 @@
+@@ -4903,9 +5035,7 @@
        aTab._mouseleave();
  
        if (newTab) {
 -        this.addTrustedTab(BROWSER_NEW_TAB_URL, {
 -          skipAnimation: true,
 -        });
-+        ZenWorkspaces.selectEmptyTab(BROWSER_NEW_TAB_URL);
++        gZenWorkspaces.selectEmptyTab(BROWSER_NEW_TAB_URL);
        } else {
          TabBarVisibility.update();
        }
-@@ -5034,6 +5166,8 @@
+@@ -5034,6 +5164,8 @@
          this.tabs[i]._tPos = i;
        }
  
-+      ZenWorkspaces.updateTabsContainers();
++      gZenWorkspaces.updateTabsContainers();
 +
        if (!this._windowIsClosing) {
          if (wasPinned) {
            this.tabContainer._positionPinnedTabs();
-@@ -5159,8 +5293,8 @@
+@@ -5159,8 +5291,8 @@
        return closedCount;
      }
  
@@ -528,49 +524,49 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
        if (unloadBlocked) {
          return;
        }
-@@ -5248,6 +5382,7 @@
+@@ -5248,6 +5380,7 @@
        }
  
        let excludeTabs = new Set(aExcludeTabs);
-+      ZenWorkspaces.getTabsToExclude(aTab).forEach(tab => excludeTabs.add(tab));
++      gZenWorkspaces.getTabsToExclude(aTab).forEach(tab => excludeTabs.add(tab));
  
        // If this tab has a successor, it should be selectable, since
        // hiding or closing a tab removes that tab as a successor.
-@@ -5260,13 +5395,13 @@
+@@ -5260,13 +5393,13 @@
          !excludeTabs.has(aTab.owner) &&
          Services.prefs.getBoolPref("browser.tabs.selectOwnerOnClose")
        ) {
 -        return aTab.owner;
-+        return ZenWorkspaces.findTabToBlur(aTab.owner);
++        return gZenWorkspaces.findTabToBlur(aTab.owner);
        }
  
        // Try to find a remaining tab that comes after the given tab
        let remainingTabs = Array.prototype.filter.call(
          this.visibleTabs,
 -        tab => !excludeTabs.has(tab)
-+        tab => !excludeTabs.has(tab) && ZenWorkspaces._shouldChangeToTab(tab)
++        tab => !excludeTabs.has(tab) && gZenWorkspaces._shouldChangeToTab(tab)
        );
  
        let tab = this.tabContainer.findNextTab(aTab, {
-@@ -5282,7 +5417,7 @@
+@@ -5282,7 +5415,7 @@
        }
  
        if (tab) {
 -        return tab;
-+        return ZenWorkspaces.findTabToBlur(tab);
++        return gZenWorkspaces.findTabToBlur(tab);
        }
  
        // If no qualifying visible tab was found, see if there is a tab in
-@@ -5303,7 +5438,7 @@
+@@ -5303,7 +5436,7 @@
          });
        }
  
 -      return tab;
-+      return ZenWorkspaces.findTabToBlur(tab);
++      return gZenWorkspaces.findTabToBlur(tab);
      }
  
      _blurTab(aTab) {
-@@ -5704,10 +5839,10 @@
+@@ -5704,10 +5837,10 @@
        SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
      }
  
@@ -583,21 +579,20 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
          aTab.selected ||
          aTab.closing ||
          // Tabs that are sharing the screen, microphone or camera cannot be hidden.
-@@ -6001,7 +6136,7 @@
+@@ -6002,7 +6135,7 @@
  
        // Don't allow mixing pinned and unpinned tabs.
        if (this.isTab(element) && element.pinned) {
 -        tabIndex = Math.min(tabIndex, this.pinnedTabCount - 1);
-+        tabIndex = element.hasAttribute('zen-essential') ? Math.min(tabIndex, this._numZenEssentials - 1) : Math.min(tabIndex, this.pinnedTabCount - 1);
++        tabIndex = element.hasAttribute('zen-essential') ? Math.min(tabIndex, this._numZenEssentials - 1) : Math.min(Math.max(tabIndex, this._numZenEssentials), this.pinnedTabCount - 1);
        } else {
          tabIndex = Math.max(tabIndex, this.pinnedTabCount);
        }
-@@ -6028,9 +6163,16 @@
+@@ -6029,9 +6162,15 @@
          element,
          () => {
            let neighbor = this.tabs[tabIndex];
 -          if (forceUngrouped && neighbor.group) {
-+          const _tPos = element._tPos;
 +          if ((forceUngrouped && neighbor?.group) || neighbor?.group?.hasAttribute("split-view-group")) {
              neighbor = neighbor.group;
            }
@@ -610,7 +605,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
            if (neighbor && this.isTab(element) && tabIndex > element._tPos) {
              neighbor.after(element);
            } else {
-@@ -6099,7 +6241,9 @@
+@@ -6100,7 +6239,9 @@
            targetElement = targetElement.group;
          }
        }
@@ -621,7 +616,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
        // Don't allow mixing pinned and unpinned tabs.
        if (element.pinned && !targetElement?.pinned) {
          targetElement = this.tabs[this.pinnedTabCount - 1];
-@@ -6109,7 +6253,13 @@
+@@ -6110,7 +6251,13 @@
          moveBefore = true;
        }
  
@@ -630,12 +625,12 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
 +      }
        let getContainer = () => {
 +        if (element.hasAttribute("zen-essential")) {
-+          return ZenWorkspaces.getEssentialsSection(element);
++          return gZenWorkspaces.getEssentialsSection(element);
 +        }
          if (element.pinned && this.tabContainer.verticalMode) {
            return this.tabContainer.verticalPinnedTabsContainer;
          }
-@@ -6169,7 +6319,7 @@
+@@ -6170,7 +6317,7 @@
        if (!this.isTab(aTab)) {
          throw new Error("Can only move a tab into a tab group");
        }
@@ -644,27 +639,27 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
          return;
        }
        if (aTab.group && aTab.group.id === aGroup.id) {
-@@ -6263,6 +6413,10 @@
+@@ -6264,6 +6411,10 @@
  
        moveActionCallback();
  
-+      ZenWorkspaces._makeSureEmptyTabIsLast();
++      gZenWorkspaces._makeSureEmptyTabIsLast();
 +      gZenViewSplitter._maybeRemoveFakeBrowser(false);
 +      gZenViewSplitter._canDrop = false;
 +
        // Clear tabs cache after moving nodes because the order of tabs may have
        // changed.
        this.tabContainer._invalidateCachedTabs();
-@@ -7080,7 +7234,7 @@
+@@ -7081,7 +7232,7 @@
              // preventDefault(). It will still raise the window if appropriate.
              break;
            }
 -          this.selectedTab = tab;
-+          ZenWorkspaces.switchTabIfNeeded(tab);
++          gZenWorkspaces.switchTabIfNeeded(tab);
            window.focus();
            aEvent.preventDefault();
            break;
-@@ -7981,6 +8135,7 @@
+@@ -7982,6 +8133,7 @@
              aWebProgress.isTopLevel
            ) {
              this.mTab.setAttribute("busy", "true");
@@ -672,7 +667,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
              gBrowser._tabAttrModified(this.mTab, ["busy"]);
              this.mTab._notselectedsinceload = !this.mTab.selected;
            }
-@@ -8954,7 +9109,7 @@ var TabContextMenu = {
+@@ -8955,7 +9107,7 @@ var TabContextMenu = {
      );
      contextUnpinSelectedTabs.hidden =
        !this.contextTab.pinned || !this.multiselected;
@@ -681,7 +676,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
      // Move Tab items
      let contextMoveTabOptions = document.getElementById(
        "context_moveTabOptions"
-@@ -9223,6 +9378,7 @@ var TabContextMenu = {
+@@ -9224,6 +9376,7 @@ var TabContextMenu = {
          telemetrySource: gBrowser.TabMetrics.METRIC_SOURCE.TAB_STRIP,
        });
      } 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 ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa16cb76ffb 100644
+index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..f7b8ce70fc77d5e00cc066f203609a42083789d5 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -83,7 +83,7 @@
@@ -11,7 +11,15 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
          }
          return true;
        };
-@@ -342,7 +342,7 @@
+@@ -286,6 +286,7 @@
+     on_TabGroupCollapse(event) {
+       this._invalidateCachedVisibleTabs();
+       this._unlockTabSizing();
++      return;
+ 
+       // If the user's selected tab is in the collapsing group, kick them off
+       // the tab. If no tabs exist outside the group, create a new one and
+@@ -342,7 +343,7 @@
        // and we're not hitting the scroll buttons.
        if (
          event.button != 0 ||
@@ -20,14 +28,6 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
          event.composedTarget.localName == "toolbarbutton"
        ) {
          return;
-@@ -391,6 +391,7 @@
-             // Reset the "ignored click" flag
-             target._ignoredCloseButtonClicks = false;
-           }
-+          gZenUIManager.saveScrollbarState();
-         }
- 
-         /* Protects from close-tab-button errant doubleclick:
 @@ -692,7 +693,7 @@
        if (this.#isContainerVerticalPinnedGrid(tab)) {
          // In expanded vertical mode, the max number of pinned tabs per row is dynamic
@@ -132,16 +132,16 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
  
      get newTabButton() {
 -      return this.querySelector("#tabs-newtab-button");
-+      return ZenWorkspaces.activeWorkspaceStrip.querySelector("#tabs-newtab-button");
++      return gZenWorkspaces.activeWorkspaceStrip.querySelector("#tabs-newtab-button");
      }
  
      get verticalMode() {
-@@ -1606,29 +1636,41 @@
+@@ -1606,29 +1636,53 @@
        if (this.#allTabs) {
          return this.#allTabs;
        }
 -      let children = Array.from(this.arrowScrollbox.children);
-+      let children = ZenWorkspaces.tabboxChildren;
++      let children = gZenWorkspaces.tabboxChildren;
        // remove arrowScrollbox periphery element
        children.pop();
  
@@ -151,42 +151,54 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
 -      for (let i = children.length - 1; i >= 0; i--) {
 -        if (children[i].tagName == "tab-group") {
 -          children.splice(i, 1, ...children[i].tabs);
--        }
--      }
- 
-       this.#allTabs = [
++      const pinnedTabs = [...gZenWorkspaces.getCurrentEssentialsContainer().children, ...this.verticalPinnedTabsContainer.children];
++      const expandTabs = (tabs) => {
++        for (let i = tabs.length - 1; i >= 0; i--) {
++          const tab = tabs[i];
++          if (isTabGroup(tab)) {
++            // remove the group from the list
++            tabs.splice(i, 1);
++            // add the tabs in the group to the list
++            tabs.splice(i, 0, ...tab.tabs);
++          }
+         }
+       }
+-
+-      this.#allTabs = [
 -        ...this.verticalPinnedTabsContainer.children,
-+        ...ZenWorkspaces.getCurrentEssentialsContainer().children, ...this.verticalPinnedTabsContainer.children,
++      expandTabs(pinnedTabs);
++      expandTabs(children);
++      const allTabs = [
++        ...pinnedTabs,
          ...children,
        ];
-+      const lastPinnedTabIdx = gBrowser.pinnedTabCount;
-+      for (let i = 0; i < this.#allTabs.length; i++) {
++      const lastPinnedTabIdx = pinnedTabs.length - 1;
++      for (let i = 0; i < allTabs.length; i++) {
 +        // add glance tabs (tabs inside tabs) to the list
-+        const glanceTab = this.#allTabs[i].querySelector("tab[zen-glance-tab]");
++        const glanceTab = allTabs[i].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
-+          this.#allTabs.splice(Math.max(i + 1, lastPinnedTabIdx), 0, glanceTab);
++          allTabs.splice(Math.max(i + 1, lastPinnedTabIdx), 0, glanceTab);
 +          i++;
-+        } else if (this.#allTabs[i].classList.contains("vertical-pinned-tabs-container-separator")) {
++        } else if (allTabs[i].classList.contains("vertical-pinned-tabs-container-separator")) {
 +          // remove the separator from the list
-+          this.#allTabs.splice(i, 1);
++          allTabs.splice(i, 1);
 +          i--;
-+        } else if (this.#allTabs[i].tagName == "tab-group") {
-+          this.#allTabs.splice(i, 1, ...this.#allTabs[i].tabs);
 +        }
 +      }
++      this.#allTabs = allTabs;
        return this.#allTabs;
      }
  
      get allGroups() {
        let children = Array.from(this.arrowScrollbox.children);
 -      return children.filter(node => node.tagName == "tab-group");
-+      return ZenWorkspaces.allTabGroups;
++      return gZenWorkspaces.allTabGroups;
      }
  
      /**
-@@ -1648,7 +1690,7 @@
+@@ -1648,7 +1702,7 @@
       */
      get visibleTabs() {
        if (!this.#visibleTabs) {
@@ -195,7 +207,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
        }
        return this.#visibleTabs;
      }
-@@ -1683,23 +1725,18 @@
+@@ -1683,36 +1737,40 @@
        }
  
        let elementIndex = 0;
@@ -207,11 +219,11 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
 -      }
 -      let children = Array.from(this.arrowScrollbox.children);
 +      let verticalPinnedTabsContainer = this.verticalPinnedTabsContainer
-+      let children = ZenWorkspaces.tabboxChildrenWithoutEmpty;
++      let children = gZenWorkspaces.tabboxChildrenWithoutEmpty;
  
        let focusableItems = [];
 -      for (let child of children) {
-+      for (let child of [...ZenWorkspaces.getCurrentEssentialsContainer().children, ...verticalPinnedTabsContainer.children, ...children]) {
++      for (let child of [...gZenWorkspaces.getCurrentEssentialsContainer().children, ...verticalPinnedTabsContainer.children, ...children]) {
          if (isTab(child) && child.visible) {
            child.elementIndex = elementIndex++;
            focusableItems.push(child);
@@ -223,15 +235,22 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
              let visibleTabsInGroup = child.tabs.filter(tab => tab.visible);
              visibleTabsInGroup.forEach(tab => {
                tab.elementIndex = elementIndex++;
-@@ -1707,12 +1744,14 @@
+             });
              focusableItems.push(...visibleTabsInGroup);
            }
-         }
-+        let glanceTab = child.querySelector("tab[zen-glance-tab]");
++          for (let tab of child.tabs) {
++            let glanceTab = tab.glanceTab;
++            if (isTab(glanceTab)) {
++              glanceTab.elementIndex = elementIndex - 1;
++              focusableItems.push(glanceTab);
++            }
++          }
++        }
++        let glanceTab = child.glanceTab;
 +        if (isTab(child) && glanceTab) {
 +          glanceTab.elementIndex = elementIndex - 1;
 +          focusableItems.push(glanceTab);
-+        }
+         }
        }
  
 -      this.#focusableItems = [
@@ -242,15 +261,15 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
  
        return this.#focusableItems;
      }
-@@ -1720,6 +1759,7 @@
+@@ -1720,6 +1778,7 @@
      _invalidateCachedTabs() {
        this.#allTabs = null;
        this._invalidateCachedVisibleTabs();
-+      ZenWorkspaces._allStoredTabs = null;
++      gZenWorkspaces._allStoredTabs = null;
      }
  
      _invalidateCachedVisibleTabs() {
-@@ -1734,8 +1774,8 @@
+@@ -1734,8 +1793,8 @@
      #isContainerVerticalPinnedGrid(tab) {
        return (
          this.verticalMode &&
@@ -261,25 +280,25 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
          !this.expandOnHover
        );
      }
-@@ -1751,7 +1791,7 @@
+@@ -1751,7 +1810,7 @@
  
        if (node == null) {
          // We have a container for non-tab elements at the end of the scrollbox.
 -        node = this.arrowScrollbox.lastChild;
-+        node = ZenWorkspaces.activeWorkspaceStrip.lastChild;
++        node = gZenWorkspaces.activeWorkspaceStrip.lastChild;
        }
  
        node.before(tab);
-@@ -1846,7 +1886,7 @@
+@@ -1846,7 +1905,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.
 -          const newTab = document.getElementById("new-tab-button");
-+          const newTab = ZenWorkspaces.activeWorkspaceStrip.querySelector("#tabs-newtab-button");
++          const newTab = gZenWorkspaces.activeWorkspaceStrip.querySelector("#tabs-newtab-button");
            const newTab2 = this.newTabButton;
            const newTabVertical = document.getElementById(
              "vertical-tabs-newtab-button"
-@@ -1941,10 +1981,12 @@
+@@ -1941,10 +2000,12 @@
  
      _handleTabSelect(aInstant) {
        let selectedTab = this.selectedItem;
@@ -292,7 +311,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
        selectedTab._notselectedsinceload = false;
      }
  
-@@ -2085,16 +2127,15 @@
+@@ -2085,16 +2146,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.
@@ -304,18 +323,18 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
 -
 -      if (gBrowser.pinnedTabCount !== verticalTabsContainer.children.length) {
 -        let tabs = this.visibleTabs;
-+      if (!ZenWorkspaces._hasInitializedTabsStrip) return;
-+      let count = ZenWorkspaces.makeSurePinTabIsInCorrectPosition();
-+      if (gBrowser.pinnedTabCount !== (verticalTabsContainer.children.length - count - 1 + ZenWorkspaces.getCurrentEssentialsContainer().children.length)) {
++      if (!gZenWorkspaces._hasInitializedTabsStrip) return;
++      let count = gZenWorkspaces.makeSurePinTabIsInCorrectPosition();
++      if (gBrowser.pinnedTabCount !== (verticalTabsContainer.children.length - count - 1 + gZenWorkspaces.getCurrentEssentialsContainer().children.length)) {
 +        let tabs = this.allTabs.filter(tab => !tab.hasAttribute("zen-glance-tab"));
          for (let i = 0; i < numPinned; i++) {
            tabs[i].style.marginInlineStart = "";
 -          verticalTabsContainer.appendChild(tabs[i]);
-+          tabs[i].hasAttribute("zen-essential") ? ZenWorkspaces.getCurrentEssentialsContainer().appendChild(tabs[i].group?.hasAttribute("split-view-group") ? tabs[i].group : tabs[i]) : verticalTabsContainer.insertBefore(tabs[i].group?.hasAttribute("split-view-group") ? tabs[i].group : tabs[i], verticalTabsContainer.lastChild);
++          tabs[i].hasAttribute("zen-essential") ? gZenWorkspaces.getCurrentEssentialsContainer().appendChild(tabs[i].group?.hasAttribute("split-view-group") ? tabs[i].group : tabs[i]) : verticalTabsContainer.insertBefore(tabs[i].group?.hasAttribute("split-view-group") ? tabs[i].group : tabs[i], verticalTabsContainer.lastChild);
          }
        }
  
-@@ -2102,9 +2143,7 @@
+@@ -2102,9 +2162,7 @@
      }
  
      _resetVerticalPinnedTabs() {
@@ -326,7 +345,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
  
        if (!verticalTabsContainer.children.length) {
          return;
-@@ -2117,7 +2156,7 @@
+@@ -2117,7 +2175,7 @@
      }
  
      _positionPinnedTabs() {
@@ -335,7 +354,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
        let numPinned = gBrowser.pinnedTabCount;
        let absPositionHorizontalTabs =
          this.overflowing && tabs.length > numPinned && numPinned > 0;
-@@ -2127,7 +2166,7 @@
+@@ -2127,7 +2185,7 @@
  
        if (this.verticalMode) {
          this._updateVerticalPinnedTabs();
@@ -344,7 +363,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
          let layoutData = this._pinnedTabsLayoutCache;
          let uiDensity = document.documentElement.getAttribute("uidensity");
          if (!layoutData || layoutData.uiDensity != uiDensity) {
-@@ -2191,7 +2230,7 @@
+@@ -2191,7 +2249,7 @@
          return;
        }
  
@@ -353,7 +372,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
  
        let directionX = screenX > dragData.animLastScreenX;
        let directionY = screenY > dragData.animLastScreenY;
-@@ -2199,7 +2238,7 @@
+@@ -2199,7 +2257,7 @@
        dragData.animLastScreenX = screenX;
  
        let { width: tabWidth, height: tabHeight } =
@@ -362,7 +381,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
        let shiftSizeX = tabWidth * movingTabs.length;
        let shiftSizeY = tabHeight;
        dragData.tabWidth = tabWidth;
-@@ -2374,12 +2413,16 @@
+@@ -2374,12 +2432,16 @@
  
        this.#clearDragOverCreateGroupTimer();
  
@@ -384,7 +403,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
  
        if (this.#rtlMode) {
          tabs.reverse();
-@@ -2393,7 +2436,7 @@
+@@ -2393,7 +2455,7 @@
        let size = this.verticalMode ? "height" : "width";
        let translateAxis = this.verticalMode ? "translateY" : "translateX";
        let scrollDirection = this.verticalMode ? "scrollTop" : "scrollLeft";
@@ -393,7 +412,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
        let translateX = event.screenX - dragData.screenX;
        let translateY = event.screenY - dragData.screenY;
  
-@@ -2407,10 +2450,19 @@
+@@ -2407,12 +2469,21 @@
        let lastTab = tabs.at(-1);
        let lastMovingTab = movingTabs.at(-1);
        let firstMovingTab = movingTabs[0];
@@ -411,9 +430,12 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
 +        shiftSize += 5; // A hack to allow more space for the group
 +      }
        let translate = screen - dragData[screenAxis];
-       if (!isPinned) {
+-      if (!isPinned) {
++      if (true) {
          translate +=
-@@ -2431,6 +2483,9 @@
+           this.arrowScrollbox.scrollbox[scrollDirection] - dragData.scrollPos;
+       } else if (isPinned && this.verticalMode) {
+@@ -2431,6 +2502,9 @@
            // Shift the `.tab-group-label-container` to shift the label element.
            item = item.parentElement;
          }
@@ -423,7 +445,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
          item.style.transform = `${translateAxis}(${translate}px)`;
        }
  
-@@ -2568,6 +2623,9 @@
+@@ -2568,6 +2642,9 @@
              break;
            }
            let element = tabs[mid];
@@ -433,7 +455,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
            let elementForSize = isTabGroupLabel(element)
              ? element.parentElement
              : element;
-@@ -2590,6 +2648,10 @@
+@@ -2590,6 +2667,10 @@
        if (!dropElement) {
          dropElement = this.ariaFocusableItems[oldDropElementIndex];
        }
@@ -444,7 +466,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
        let newDropElementIndex = dropElement
          ? dropElement.elementIndex
          : oldDropElementIndex;
-@@ -2598,7 +2660,7 @@
+@@ -2598,7 +2679,7 @@
        let shouldCreateGroupOnDrop;
        let dropBefore;
        if (dropElement) {
@@ -453,7 +475,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
            ? dropElement.parentElement
            : dropElement;
  
-@@ -2660,12 +2722,12 @@
+@@ -2660,12 +2741,12 @@
          }
        }
  
@@ -468,7 +490,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
            dropElement != draggedTab &&
            isTab(dropElement) &&
            !dropElement?.group &&
-@@ -2735,7 +2797,7 @@
+@@ -2735,7 +2816,7 @@
        // Shift background tabs to leave a gap where the dragged tab
        // would currently be dropped.
        for (let item of tabs) {
@@ -477,7 +499,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
            continue;
          }
  
-@@ -2744,6 +2806,9 @@
+@@ -2744,6 +2825,9 @@
          if (isTabGroupLabel(item)) {
            // Shift the `.tab-group-label-container` to shift the label element.
            item = item.parentElement;
@@ -487,7 +509,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
          }
          item.style.transform = transform;
        }
-@@ -2796,8 +2861,9 @@
+@@ -2796,8 +2880,9 @@
        );
      }
  
@@ -499,7 +521,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
          return;
        }
  
-@@ -2809,6 +2875,12 @@
+@@ -2809,6 +2894,12 @@
            item = item.parentElement;
          }
          item.style.transform = "";
@@ -512,7 +534,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
          item.removeAttribute("dragover-createGroup");
        }
        this.removeAttribute("movingtab-createGroup");
-@@ -2855,7 +2927,7 @@
+@@ -2855,7 +2946,7 @@
          let postTransitionCleanup = () => {
            movingTab._moveTogetherSelectedTabsData.animate = false;
          };
@@ -521,7 +543,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
            postTransitionCleanup();
          } else {
            let onTransitionEnd = transitionendEvent => {
-@@ -3028,7 +3100,7 @@
+@@ -3028,7 +3119,7 @@
      }
  
      _notifyBackgroundTab(aTab) {
@@ -530,7 +552,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
          return;
        }
  
-@@ -3154,6 +3226,9 @@
+@@ -3154,6 +3245,9 @@
            return null;
          }
        }

src/browser/components/urlbar/UrlbarProviderPlaces-sys-mjs.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/urlbar/UrlbarProviderPlaces.sys.mjs b/browser/components/urlbar/UrlbarProviderPlaces.sys.mjs
-index b1481a11ef..925f0dc34b 100644
+index b1481a11ef38037bec13939928f72f9772e335a9..925f0dc34bf84bb9e0f143f5c1973a87e7b4f8ac 100644
 --- a/browser/components/urlbar/UrlbarProviderPlaces.sys.mjs
 +++ b/browser/components/urlbar/UrlbarProviderPlaces.sys.mjs
 @@ -35,6 +35,8 @@ const QUERYINDEX_SWITCHTAB = 9;

src/browser/themes/shared/preferences/zen-preferences.css

@@ -380,7 +380,7 @@ groupbox h2 {
 }
 
 .zenCKSOption-unsafed {
-  color: yellow;
+  color: light-dark(orange, yellow);
   margin-left: 10px;
   margin-top: 5px;
 }
@@ -390,7 +390,7 @@ groupbox h2 {
 }
 
 .zenCKSOption-input.zenCKSOption-input-unsafed {
-  border-color: yellow;
+  border-color: light-dark(orange, yellow);
 }
 
 .zenCKSOption-input.zenCKSOption-input-valid {

src/browser/themes/shared/tabbrowser/tabs-css.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css
-index 6ca85d9d4d593271fe49138ea736bd96651c05f5..192acb662eaeaeb67df890de4c9681952b078526 100644
+index 6ca85d9d4d593271fe49138ea736bd96651c05f5..bcae5b6829190d6e36a32b36d20c1c73ed810ba5 100644
 --- a/browser/themes/shared/tabbrowser/tabs.css
 +++ b/browser/themes/shared/tabbrowser/tabs.css
 @@ -32,7 +32,7 @@
@@ -108,7 +108,15 @@ index 6ca85d9d4d593271fe49138ea736bd96651c05f5..192acb662eaeaeb67df890de4c968195
      /* stylelint-disable-next-line media-query-no-invalid */
      @media not -moz-pref("sidebar.visibility", "expand-on-hover") {
        /* We need these rules to apply at all times when the sidebar.visibility
-@@ -1717,7 +1715,7 @@ tab-group {
+@@ -1586,7 +1584,6 @@ tab-group {
+ 
+   &:not([expanded]) {
+     .tabbrowser-tab[pinned] {
+-      width: var(--tab-collapsed-width);
+     }
+ 
+     .tab-background {
+@@ -1717,7 +1714,7 @@ tab-group {
    toolbarbutton:not(#firefox-view-button),
    toolbarpaletteitem:not(#wrapper-firefox-view-button)
  ) ~ #tabbrowser-tabs {
@@ -117,7 +125,7 @@ index 6ca85d9d4d593271fe49138ea736bd96651c05f5..192acb662eaeaeb67df890de4c968195
    padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width) + 2px);
    margin-inline-start: 2px;
  }
-@@ -1751,7 +1749,6 @@ toolbar:not(#TabsToolbar) #firefox-view-button {
+@@ -1751,7 +1748,6 @@ toolbar:not(#TabsToolbar) #firefox-view-button {
    list-style-image: url(chrome://global/skin/icons/plus.svg);
  }
  

src/browser/themes/shared/urlbar-searchbar-css.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/themes/shared/urlbar-searchbar.css b/browser/themes/shared/urlbar-searchbar.css
-index e237ee9edea85c1d2ef22f988df6b22755e343e6..b06fc06686a7a969e924ad0df662dec937b3c70d 100644
+index e237ee9edea85c1d2ef22f988df6b22755e343e6..abee0dc035833c4334e55bd8cd7483bbcc71f97f 100644
 --- a/browser/themes/shared/urlbar-searchbar.css
 +++ b/browser/themes/shared/urlbar-searchbar.css
 @@ -5,7 +5,7 @@
@@ -11,14 +11,18 @@ index e237ee9edea85c1d2ef22f988df6b22755e343e6..b06fc06686a7a969e924ad0df662dec9
    --urlbar-margin-inline: 5px;
    --urlbar-padding-block: 4px;
  }
-@@ -292,7 +292,9 @@
+@@ -292,10 +292,14 @@
  }
  
  #urlbar[breakout][breakout-extend] {
--  margin-left: calc(-1 * var(--urlbar-margin-inline));
 +  :root:not([zen-single-toolbar='true']) {
-+    margin-left: calc(-1 * var(--urlbar-margin-inline));
+   margin-left: calc(-1 * var(--urlbar-margin-inline));
 +  }
++  align-items: center;
    width: calc(var(--urlbar-width) + 2 * var(--urlbar-margin-inline));
  
    > .urlbar-input-container {
++    align-items: center;
+     height: var(--urlbar-container-height);
+     padding-block: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2 + var(--urlbar-container-padding));
+     padding-inline: calc(var(--urlbar-margin-inline) + var(--urlbar-container-padding));

src/modules/libpref/init/StaticPrefList-yaml.patch

@@ -1,5 +1,5 @@
 diff --git a/modules/libpref/init/StaticPrefList.yaml b/modules/libpref/init/StaticPrefList.yaml
-index a8ba391326f811ae80510585a3c6ab8d7579f739..5e4569032d4c62e59065262f7069663f9acadad1 100644
+index c4e19fc5231c2378ddb25f462cd1584aa9eac760..eb0cec062abf0c97bf5ca33e85aeacd496c296a8 100644
 --- a/modules/libpref/init/StaticPrefList.yaml
 +++ b/modules/libpref/init/StaticPrefList.yaml
 @@ -18804,6 +18804,7 @@

src/toolkit/components/pictureinpicture/PictureInPicture-sys-mjs.patch

@@ -1,5 +1,5 @@
 diff --git a/toolkit/components/pictureinpicture/PictureInPicture.sys.mjs b/toolkit/components/pictureinpicture/PictureInPicture.sys.mjs
-index 5644bad94bd4741c4c807eaf5633ee18aacd633f..f89a3e24e850df04aebceb1ff70c0bed5a9db7e5 100644
+index 5644bad94bd4741c4c807eaf5633ee18aacd633f..f59eb65928f74c8080a0b26394e17a6ef6cc1977 100644
 --- a/toolkit/components/pictureinpicture/PictureInPicture.sys.mjs
 +++ b/toolkit/components/pictureinpicture/PictureInPicture.sys.mjs
 @@ -122,6 +122,9 @@ export class PictureInPictureToggleParent extends JSWindowActorParent {
@@ -17,7 +17,7 @@ index 5644bad94bd4741c4c807eaf5633ee18aacd633f..f89a3e24e850df04aebceb1ff70c0bed
      tab.ownerGlobal.focus();
  
 -    gBrowser.selectedTab = tab;
-+    browser?.ownerGlobal?.ZenWorkspaces.switchIfNeeded(browser);
++    browser?.ownerGlobal?.gZenWorkspaces.switchIfNeeded(browser);
      await this.closeSinglePipWindow({ reason: "Unpip", actorRef: pipActor });
    },
  

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

@@ -1,5 +1,5 @@
 diff --git a/toolkit/content/widgets/arrowscrollbox.js b/toolkit/content/widgets/arrowscrollbox.js
-index f9191af09f1b7a1654aff62807e7dad573afc172..f94a8b3dc5871fba5d0dbed5d487d6e32a1ff29a 100644
+index f9191af09f1b7a1654aff62807e7dad573afc172..f49ad7cb08f5d2be4a03046c191361f8c8a004bc 100644
 --- a/toolkit/content/widgets/arrowscrollbox.js
 +++ b/toolkit/content/widgets/arrowscrollbox.js
 @@ -98,6 +98,7 @@
@@ -15,7 +15,7 @@ index f9191af09f1b7a1654aff62807e7dad573afc172..f94a8b3dc5871fba5d0dbed5d487d6e3
      on_wheel(event) {
        // Don't consume the event if we can't scroll.
 -      if (!this.overflowing) {
-+      if (!this.overflowing || this.id === 'tabbrowser-arrowscrollbox') { // we handle this on ZenStartup
++      if (!this.overflowing || this.id === 'tabbrowser-arrowscrollbox' || ((event.deltaY == 0 || gZenWorkspaces._swipeState?.isGestureActive) && this.classList.contains('workspace-arrowscrollbox'))) {
          return;
        }
  

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..fc5d3b1fab286c657c27b98d56bb616dfab3caef 100644
+index 6775a7635c6cdbb276b3a912d0bba07840acb28f..4ef3eb6a7dbd741cf432668c2ff6e832f5bb97e7 100644
 --- a/toolkit/content/widgets/tabbox.js
 +++ b/toolkit/content/widgets/tabbox.js
 @@ -213,7 +213,7 @@
@@ -16,7 +16,7 @@ index 6775a7635c6cdbb276b3a912d0bba07840acb28f..fc5d3b1fab286c657c27b98d56bb616d
          return;
        }
 -      for (let otherTab of this.allTabs) {
-+      for (let otherTab of window.ZenWorkspaces?.allStoredTabs ?? this.allTabs) {
++      for (let otherTab of window.gZenWorkspaces?.allStoredTabs ?? this.allTabs) {
          if (otherTab != tab && otherTab.selected) {
            otherTab._selected = false;
          }

src/widget/cocoa/VibrancyManager-mm.patch

@@ -35,7 +35,7 @@ index 849b62c9976a7bc5fee35e074e54c8f556ed9c38..a9742c7ff30d417a18f41f9c12025919
    }
  }
  
-@@ -78,6 +95,7 @@ - (NSView*)hitTest:(NSPoint)aPoint {
+@@ -78,6 +95,7 @@ static NSVisualEffectBlendingMode VisualEffectBlendingModeForVibrancyType(
  
  - (void)prefChanged {
    self.blendingMode = VisualEffectBlendingModeForVibrancyType(mType);

src/zen/common/ZenStartup.mjs

@@ -28,10 +28,9 @@
           document.getElementById('zen-appcontent-navbar-container').appendChild(deckTemplate);
         }
 
-        this._initSidebarScrolling();
         this._hideUnusedElements();
 
-        ZenWorkspaces.init();
+        gZenWorkspaces.init();
         gZenVerticalTabsManager.init();
         gZenUIManager.init();
 
@@ -61,7 +60,7 @@
     },
 
     delayedStartupFinished() {
-      ZenWorkspaces.promiseInitialized.then(async () => {
+      gZenWorkspaces.promiseInitialized.then(async () => {
         await delayedStartupPromise;
         await SessionStore.promiseAllWindowsRestored;
         setTimeout(() => {
@@ -144,40 +143,6 @@
       }
     },
 
-    _initSidebarScrolling() {
-      // Disable smooth scroll
-      const canSmoothScroll = Services.prefs.getBoolPref(
-        'zen.startup.smooth-scroll-in-tabs',
-        false
-      );
-      const tabsWrapper = document.getElementById('zen-tabs-wrapper');
-      gBrowser.tabContainer.addEventListener('wheel', (event) => {
-        if (canSmoothScroll) return;
-        event.preventDefault(); // Prevent the smooth scroll behavior
-        gBrowser.tabContainer.scrollTop += event.deltaY * 20; // Apply immediate scroll
-      });
-      // Detect overflow and underflow
-      const observer = new ResizeObserver((_) => {
-        const tabContainer = gBrowser.tabContainer;
-        // const isVertical = tabContainer.getAttribute('orient') === 'vertical';
-        // let contentSize = tabsWrapper.getBoundingClientRect()[isVertical ? 'height' : 'width'];
-        // NOTE: This should be contentSize > scrollClientSize, but due
-        // to how Gecko internally rounds in those cases, we allow for some
-        // minor differences (the internal Gecko layout size is 1/60th of a
-        // pixel, so 0.02 should cover it).
-        //let overflowing = contentSize - tabContainer.arrowScrollbox.scrollClientSize > 0.02;
-        let overflowing = true; // cheatign the system, because we want to always show make the element overflowing
-
-        window.requestAnimationFrame(() => {
-          tabContainer.arrowScrollbox.toggleAttribute('overflowing', overflowing);
-          tabContainer.arrowScrollbox.dispatchEvent(
-            new CustomEvent(overflowing ? 'overflow' : 'underflow')
-          );
-        });
-      });
-      observer.observe(tabsWrapper);
-    },
-
     _initSearchBar() {
       // Only focus the url bar
       gURLBar.focus();

src/zen/common/ZenUIManager.mjs

@@ -58,7 +58,6 @@ var gZenUIManager = {
     });
 
     window.addEventListener('TabClose', this.onTabClose.bind(this));
-    this.tabsWrapper.addEventListener('scroll', this.saveScrollbarState.bind(this));
 
     gZenMediaController.init();
   },
@@ -74,7 +73,7 @@ var gZenUIManager = {
     setTimeout(gURLBar.formatValue.bind(gURLBar), 350);
     if (!this._preventToolbarRebuild) {
       setTimeout(() => {
-        ZenWorkspaces.updateTabsContainers();
+        gZenWorkspaces.updateTabsContainers();
       }, 0);
     }
     delete this._preventToolbarRebuild;
@@ -88,18 +87,9 @@ var gZenUIManager = {
     return this._tabsWrapper;
   },
 
-  saveScrollbarState() {
-    this._scrollbarState = this.tabsWrapper.scrollTop;
-  },
-
-  restoreScrollbarState() {
-    this.tabsWrapper.scrollTop = this._scrollbarState;
-  },
-
   onTabClose(event = undefined) {
     if (!event?.target?._closedInMultiselection) {
       this.updateTabsToolbar();
-      this.restoreScrollbarState();
     }
   },
 
@@ -407,7 +397,11 @@ var gZenUIManager = {
   },
 
   urlbarTrim(aURL) {
-    if (gZenVerticalTabsManager._hasSetSingleToolbar && this.urlbarShowDomainOnly) {
+    if (
+      gZenVerticalTabsManager._hasSetSingleToolbar &&
+      this.urlbarShowDomainOnly &&
+      !gURLBar.hasAttribute('breakout-extend')
+    ) {
       let url = BrowserUIUtils.removeSingleTrailingSlashFromURL(aURL);
       return url.startsWith('https://') ? url.split('/')[2] : url;
     }
@@ -779,7 +773,7 @@ var gZenVerticalTabsManager = {
       // on purpose, we set the orient to horizontal, because the arrowScrollbox is vertical
       gBrowser.tabContainer.arrowScrollbox.scrollbox.setAttribute(
         'orient',
-        isVerticalTabs && ZenWorkspaces.workspaceEnabled ? 'horizontal' : 'vertical'
+        isVerticalTabs ? 'vertical' : 'horizontal'
       );
 
       const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
@@ -791,7 +785,9 @@ var gZenVerticalTabsManager = {
         document.documentElement.removeAttribute('zen-right-side');
       }
 
+      delete this._hadSidebarCollapse;
       if (isSidebarExpanded) {
+        this._hadSidebarCollapse = !document.documentElement.hasAttribute('zen-sidebar-expanded');
         this.navigatorToolbox.setAttribute('zen-sidebar-expanded', 'true');
         document.documentElement.setAttribute('zen-sidebar-expanded', 'true');
         gBrowser.tabContainer.setAttribute('expanded', 'true');

src/zen/common/ZenUIMigration.mjs

@@ -6,7 +6,7 @@ ChromeUtils.defineESModuleGetters(lazy, {
 
 class ZenUIMigration {
   PREF_NAME = 'zen.migration.version';
-  MIGRATION_VERSION = 2;
+  MIGRATION_VERSION = 3;
 
   init(isNewProfile, win) {
     if (!isNewProfile) {
@@ -30,6 +30,9 @@ class ZenUIMigration {
     if (this._migrationVersion < 2) {
       this._migrateV2(win);
     }
+    if (this._migrationVersion < 3) {
+      this._migrateV3(win);
+    }
   }
 
   clearVariables() {
@@ -67,6 +70,18 @@ class ZenUIMigration {
       Services.prefs.clearUserPref('zen.widget.windows.acrylic');
     }
   }
+
+  _migrateV3(win) {
+    const kArea = win.CustomizableUI.AREA_TABSTRIP;
+    const widgets = win.CustomizableUI.getWidgetsInArea(kArea);
+    for (const widget of widgets) {
+      const widgetId = widget.id;
+      if (widgetId === 'tabbrowser-tabs') {
+        continue;
+      }
+      win.CustomizableUI.removeWidgetFromArea(widgetId);
+    }
+  }
 }
 
 export var gZenUIMigration = new ZenUIMigration();

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

@@ -259,3 +259,13 @@
 :root:not([customizing]) #TabsToolbar-customization-target > #alltabs-button {
   display: none;
 }
+
+:root[customizing] #TabsToolbar-customization-target {
+  visibility: collapse;
+}
+
+:root[customizing] #zen-sidebar-top-buttons-customization-target {
+  border: 1px dashed;
+  border-radius: 2px;
+  margin: 10px 2px 0 0;
+}

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

@@ -34,8 +34,6 @@
   --uc-permission-itemcontainer-padding-block: 8px;
   --uc-permission-item-margin-block: 4px;
   --uc-permission-item-padding-inline: 16px;
-
-  --panel-separator-color: var(--zen-colors-border);
   --zen-panel-separator-width: 1px;
 }
 
@@ -283,15 +281,6 @@ menuseparator {
   display: none;
 }
 
-/* Context menu */
-menu,
-menuitem {
-  &:where([_moz-menuactive]:not([disabled='true'])) {
-    background-color: var(--button-hover-bgcolor);
-    color: var(--button-hover-color);
-  }
-}
-
 /*Bookmark workspace selector styles*/
 .workspace-dropdown {
   position: relative;
@@ -404,11 +393,12 @@ menuitem {
     }
 
     & button {
+      color-scheme: dark;
       width: min-content;
       padding: 0 12px !important;
       min-width: unset !important;
       margin: 0px !important;
-      border-radius: var(--zen-native-inner-radius) !important;
+      border-radius: calc(var(--zen-native-inner-radius) + 2px) !important;
 
       :root[zen-right-side='true'] & {
         order: -1;

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

@@ -24,10 +24,6 @@
   border-radius: calc(var(--toolbarbutton-border-radius) - 2px);
   --urlbarView-results-padding: 10px !important;
 
-  :root:not([zen-single-toolbar='true']) &[zen-floating-urlbar='true'] {
-    --urlbar-container-padding: 2px !important;
-  }
-
   --urlbar-margin-inline: 5px;
   --urlbar-container-padding: 5px;
   :root[zen-single-toolbar='true'] {
@@ -105,6 +101,10 @@
   outline: none !important;
 }
 
+#urlbar .urlbar-input {
+  border-radius: 0 !important;
+}
+
 :root[zen-single-toolbar='true'] #urlbar:not([breakout-extend='true']) {
   & #urlbar-input {
     cursor: default;

src/zen/common/zen-sets.js

@@ -30,10 +30,10 @@ document.addEventListener(
             gZenCompactModeManager.toggleToolbar();
             break;
           case 'cmd_zenWorkspaceForward':
-            ZenWorkspaces.changeWorkspaceShortcut();
+            gZenWorkspaces.changeWorkspaceShortcut();
             break;
           case 'cmd_zenWorkspaceBackward':
-            ZenWorkspaces.changeWorkspaceShortcut(-1);
+            gZenWorkspaces.changeWorkspaceShortcut(-1);
             break;
           case 'cmd_zenSplitViewGrid':
             gZenViewSplitter.toggleShortcut('grid');
@@ -69,7 +69,7 @@ document.addEventListener(
             gZenThemePicker.openThemePicker(event);
             break;
           case 'cmd_zenChangeWorkspaceTab':
-            ZenWorkspaces.changeTabWorkspace(
+            gZenWorkspaces.changeTabWorkspace(
               event.sourceEvent.target.getAttribute('zen-workspace-id')
             );
             break;
@@ -100,7 +100,7 @@ document.addEventListener(
           default:
             if (event.target.id.startsWith('cmd_zenWorkspaceSwitch')) {
               const index = parseInt(event.target.id.replace('cmd_zenWorkspaceSwitch', ''), 10) - 1;
-              ZenWorkspaces.shortcutSwitchTo(index);
+              gZenWorkspaces.shortcutSwitchTo(index);
             }
             break;
         }

src/zen/compact-mode/ZenCompactMode.mjs

@@ -76,7 +76,14 @@ var gZenCompactModeManager = {
     return lazyCompactMode.mainAppWrapper.getAttribute('zen-compact-mode') === 'true';
   },
 
+  get shouldBeCompact() {
+    return !document.documentElement.getAttribute('chromehidden').includes('toolbar');
+  },
+
   set preference(value) {
+    if (!this.shouldBeCompact) {
+      value = false;
+    }
     if (
       this.preference === value ||
       document.documentElement.hasAttribute('zen-compact-animating')
@@ -201,18 +208,33 @@ var gZenCompactModeManager = {
     }
     let sidebarWidth = this.sidebar.getBoundingClientRect().width;
     if (sidebarWidth > 1) {
-      gZenUIManager.restoreScrollbarState();
+      if (this.preference && gZenVerticalTabsManager._prefsSidebarExpanded) {
+        sidebarWidth = Math.max(sidebarWidth, 150);
+      }
       // Second variable to get the genuine width of the sidebar
       this.sidebar.style.setProperty('--actual-zen-sidebar-width', `${sidebarWidth}px`);
       window.dispatchEvent(new window.Event('resize')); // To recalculate the layout
-      if (event && this.preference) {
+      if (
+        event &&
+        this.preference &&
+        gZenVerticalTabsManager._prefsSidebarExpanded &&
+        !gZenVerticalTabsManager._hadSidebarCollapse
+      ) {
         return;
       }
+      delete gZenVerticalTabsManager._hadSidebarCollapse;
       this.sidebar.style.setProperty('--zen-sidebar-width', `${sidebarWidth}px`);
     }
     return sidebarWidth;
   },
 
+  get canHideSidebar() {
+    return (
+      Services.prefs.getBoolPref('zen.view.compact.hide-tabbar') ||
+      gZenVerticalTabsManager._hasSetSingleToolbar
+    );
+  },
+
   animateCompactMode() {
     return new Promise((resolve) => {
       // Get the splitter width before hiding it (we need to hide it before animating on right)
@@ -222,9 +244,7 @@ var gZenCompactModeManager = {
         .getElementById('zen-sidebar-splitter')
         .getBoundingClientRect().width;
       const isCompactMode = this.preference;
-      const canHideSidebar =
-        Services.prefs.getBoolPref('zen.view.compact.hide-tabbar') ||
-        gZenVerticalTabsManager._hasSetSingleToolbar;
+      const canHideSidebar = this.canHideSidebar;
       let canAnimate =
         lazyCompactMode.COMPACT_MODE_CAN_ANIMATE_SIDEBAR && !this.isSidebarPotentiallyOpen();
       if (typeof this._wasInCompactMode !== 'undefined') {
@@ -258,6 +278,8 @@ var gZenCompactModeManager = {
               // Subtract from the splitter width to end up with the correct element separation
               sidebarWidth += 1.5 * splitterWidth - elementSeparation;
             }
+          } else {
+            sidebarWidth -= elementSeparation;
           }
           gZenUIManager.motion
             .animate(
@@ -616,7 +638,8 @@ var gZenCompactModeManager = {
       !this.isSidebarPotentiallyOpen() &&
       this._canShowBackgroundTabToast &&
       !gZenGlanceManager._animating &&
-      !this._nextTimeWillBeActive
+      !this._nextTimeWillBeActive &&
+      this.canHideSidebar
     ) {
       gZenUIManager.showToast('zen-background-tab-opened-toast');
     }

src/zen/compact-mode/zen-compact-mode.css

@@ -64,12 +64,17 @@
           top: 0;
           bottom: var(--zen-element-separation);
           padding: 0 var(--zen-compact-float) !important;
-
           :root[zen-single-toolbar='true'] & {
             top: calc(var(--zen-element-separation) / 2);
             height: calc(100% - var(--zen-element-separation));
           }
-
+          :root:not([zen-single-toolbar='true']) & {
+            top: calc(var(--zen-element-separation) / -2);
+            height: calc(100% - var(--zen-toolbar-height));
+            @media -moz-pref('zen.view.compact.hide-toolbar') {
+              height: 100%;
+            }
+          }
           & #zen-sidebar-top-buttons {
             margin: 0 0 calc(var(--zen-toolbox-padding) / 2) 0;
           }
@@ -114,7 +119,8 @@
         padding: var(--zen-toolbox-padding) !important;
         :root:not([zen-sidebar-expanded='true']) & {
           padding: var(--zen-toolbox-padding) 0 !important;
-          max-width: var(--zen-sidebar-width);
+          max-width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding) * 2);
+          width: var(--zen-sidebar-width);
         }
         position: relative;
         min-width: var(--zen-toolbox-min-width);
@@ -347,7 +353,7 @@
         border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
         transition: all 0.15s ease;
         width: 100%;
-        opacity: 0;
+        visibility: hidden;
         background: var(--zen-dialog-background);
 
         max-height: var(--zen-toolbar-height);
@@ -375,7 +381,7 @@
       & #zen-appcontent-navbar-container:has(
           *:is([panelopen='true'], [open='true'], #urlbar:focus-within, [breakout-extend='true']):not(#urlbar[zen-floating-urlbar='true']):not(.zen-compact-mode-ignore)
         ) {
-        opacity: 1;
+        visibility: visible !important;
         border-top-width: 1px;
 
         top: -1px;

src/zen/folders/ZenFolders.mjs

@@ -111,7 +111,7 @@
           gBrowser.unpinTab(otherTab);
         }
         this._piningFolder = false;
-        ZenWorkspaces.activeWorkspaceStrip.prepend(group);
+        gZenWorkspaces.activeWorkspaceStrip.prepend(group);
         gBrowser.tabContainer._invalidateCachedTabs();
         return true;
       }

src/zen/glance/ZenGlanceManager.mjs

@@ -367,6 +367,13 @@
               this.#currentParentTab._visuallySelected = false;
             }
 
+            if (
+              this.#currentParentTab.linkedBrowser &&
+              !this.#currentParentTab.hasAttribute('split-view')
+            ) {
+              this.#currentParentTab.linkedBrowser.zenModeActive = false;
+            }
+
             // reset everything
             this.browserWrapper = null;
             this.overlay = null;
@@ -445,7 +452,7 @@
           .classList.remove('zen-glance-background');
       }
       if (!justAnimateParent && this.overlay) {
-        if (parentHasBrowser) {
+        if (parentHasBrowser && !this.#currentParentTab.hasAttribute('split-view')) {
           if (closeParentTab) {
             this.#currentParentTab.linkedBrowser
               .closest('.browserSidebarContainer')
@@ -609,7 +616,7 @@
     }
 
     finishOpeningGlance() {
-      ZenWorkspaces.updateTabsContainers();
+      gZenWorkspaces.updateTabsContainers();
       this.browserWrapper.removeAttribute('animate-full');
       this.overlay.classList.remove('zen-glance-overlay');
       this._clearContainerStyles(this.browserWrapper);

src/zen/media/ZenMediaController.mjs

@@ -231,7 +231,6 @@
           this.mediaControlBar.setAttribute('hidden', 'true');
           this.mediaControlBar.removeAttribute('media-sharing');
           gZenUIManager.updateTabsToolbar();
-          gZenUIManager.restoreScrollbarState();
         });
     }
 
@@ -257,7 +256,6 @@
           this.mediaControlBar.querySelector('toolbaritem').getBoundingClientRect().height + 'px';
         this.mediaControlBar.style.opacity = 0;
         gZenUIManager.updateTabsToolbar();
-        gZenUIManager.restoreScrollbarState();
         gZenUIManager.motion.animate(
           this.mediaControlBar,
           {
@@ -306,7 +304,6 @@
       this.mediaArtist.textContent = metadata.artist || '';
 
       gZenUIManager.updateTabsToolbar();
-      gZenUIManager.restoreScrollbarState();
 
       this._currentPosition = positionState.position;
       this._currentDuration = positionState.duration;
@@ -604,7 +601,7 @@
       if (this._currentMediaController) this._currentMediaController.focus();
       else if (this._currentBrowser) {
         const tab = window.gBrowser.getTabForBrowser(this._currentBrowser);
-        if (tab) window.ZenWorkspaces.switchTabIfNeeded(tab);
+        if (tab) window.gZenWorkspaces.switchTabIfNeeded(tab);
       }
     }
 

src/zen/mods/ZenThemesCommon.mjs

@@ -47,9 +47,10 @@ var ZenThemesCommon = {
       if (themes === null || typeof themes !== 'object') {
         throw new Error('Themes data file is null');
       }
-    } catch (e) {
+    } catch {
       // If we have a corrupted file, reset it
       await IOUtils.writeJSON(this.themesDataFile, {});
+
       Services.wm
         .getMostRecentWindow('navigator:browser')
         .gZenUIManager.showToast('zen-themes-corrupted', {
@@ -61,46 +62,54 @@ var ZenThemesCommon = {
 
   async getThemePreferences(theme) {
     const themePath = PathUtils.join(this.themesRootPath, theme.id, 'preferences.json');
+
     if (!(await IOUtils.exists(themePath)) || !theme.preferences) {
       return [];
     }
 
-    const preferences = await IOUtils.readJSON(themePath);
+    try {
+      const preferences = await IOUtils.readJSON(themePath);
 
-    // compat mode for old preferences, all of them can only be checkboxes
-    if (typeof preferences === 'object' && !Array.isArray(preferences)) {
-      console.warn(
-        `[ZenThemes]: Warning, ${theme.name} uses legacy preferences, please migrate them to the new preferences style, as legacy preferences might be removed at a future release. More information at: https://docs.zen-browser.app/themes-store/themes-marketplace-preferences`
-      );
-      const newThemePreferences = [];
+      // compat mode for old preferences, all of them can only be checkboxes
+      if (typeof preferences === 'object' && !Array.isArray(preferences)) {
+        console.warn(
+          `[ZenThemes]: Warning, ${theme.name} uses legacy preferences, please migrate them to the new preferences style, as legacy preferences might be removed at a future release. More information at: https://docs.zen-browser.app/themes-store/themes-marketplace-preferences`
+        );
+        const newThemePreferences = [];
 
-      for (let [entry, label] of Object.entries(preferences)) {
-        const [_, negation = '', os = '', property] =
-          /(!?)(?:(macos|windows|linux):)?([A-Za-z0-9-_.]+)/g.exec(entry);
-        const isNegation = negation === '!';
+        for (let [entry, label] of Object.entries(preferences)) {
+          const [, negation = '', os = '', property] =
+            /(!?)(?:(macos|windows|linux):)?([A-Za-z0-9-_.]+)/g.exec(entry);
+          const isNegation = negation === '!';
 
-        if (
-          (isNegation && os === gZenOperatingSystemCommonUtils.currentOperatingSystem) ||
-          (os !== '' && os !== gZenOperatingSystemCommonUtils.currentOperatingSystem && !isNegation)
-        ) {
-          continue;
+          if (
+            (isNegation && os === gZenOperatingSystemCommonUtils.currentOperatingSystem) ||
+            (os !== '' &&
+              os !== gZenOperatingSystemCommonUtils.currentOperatingSystem &&
+              !isNegation)
+          ) {
+            continue;
+          }
+
+          newThemePreferences.push({
+            property,
+            label,
+            type: 'checkbox',
+            disabledOn: os !== '' ? [os] : [],
+          });
         }
 
-        newThemePreferences.push({
-          property,
-          label,
-          type: 'checkbox',
-          disabledOn: os !== '' ? [os] : [],
-        });
+        return newThemePreferences;
       }
 
-      return newThemePreferences;
+      return preferences.filter(
+        ({ disabledOn = [] }) =>
+          !disabledOn.includes(gZenOperatingSystemCommonUtils.currentOperatingSystem)
+      );
+    } catch (e) {
+      console.error(`[ZenThemes]: Error reading preferences for ${theme.name}:`, e);
+      return [];
     }
-
-    return preferences.filter(
-      ({ disabledOn = [] }) =>
-        !disabledOn.includes(gZenOperatingSystemCommonUtils.currentOperatingSystem)
-    );
   },
 
   throttle(mainFunction, delay) {

src/zen/mods/ZenThemesImporter.mjs

@@ -211,35 +211,30 @@ var gZenThemesImporter = new (class {
           continue;
         }
 
-        switch (type) {
-          case 'checkbox': {
-            const value = Services.prefs.getBoolPref(property, false);
-            if (typeof defaultValue !== 'boolean') {
-              console.log(
-                `[ZenThemesImporter]: Warning, invalid data type received for expected type boolean, skipping.`
-              );
-              continue;
-            }
-
-            if (!value) {
-              Services.prefs.setBoolPref(property, defaultValue);
-            }
-            break;
+        if (type === 'checkbox') {
+          const value = Services.prefs.getBoolPref(property, false);
+          if (typeof defaultValue !== 'boolean') {
+            console.log(
+              `[ZenThemesImporter]: Warning, invalid data type received for expected type boolean, skipping.`
+            );
+            continue;
           }
 
-          default: {
-            const value = Services.prefs.getStringPref(property, 'zen-property-no-saved');
+          if (!value) {
+            Services.prefs.setBoolPref(property, defaultValue);
+          }
+        } else {
+          const value = Services.prefs.getStringPref(property, 'zen-property-no-saved');
 
-            if (typeof defaultValue !== 'string' && typeof defaultValue !== 'number') {
-              console.log(
-                `[ZenThemesImporter]: Warning, invalid data type received (${typeof defaultValue}), skipping.`
-              );
-              continue;
-            }
+          if (typeof defaultValue !== 'string' && typeof defaultValue !== 'number') {
+            console.log(
+              `[ZenThemesImporter]: Warning, invalid data type received (${typeof defaultValue}), skipping.`
+            );
+            continue;
+          }
 
-            if (value === 'zen-property-no-saved') {
-              Services.prefs.setStringPref(property, defaultValue.toString());
-            }
+          if (value === 'zen-property-no-saved') {
+            Services.prefs.setStringPref(property, defaultValue.toString());
           }
         }
       }

src/zen/mods/actors/ZenThemeMarketplaceChild.sys.mjs

@@ -162,9 +162,12 @@ export class ZenThemeMarketplaceChild extends JSWindowActorChild {
         const obj = await data.json();
         return obj;
       } catch (e) {
-        console.error('ZTM: Error parsing theme info: ', e);
+        console.error('ZenThemeMarketplace: Error parsing theme info: ', e);
       }
-    } else console.log(data.status);
+    } else {
+      console.error('ZenThemeMarketplace: Error fetching theme info: ', data.status);
+    }
+
     return null;
   }
 
@@ -185,11 +188,11 @@ export class ZenThemeMarketplaceChild extends JSWindowActorChild {
     } else {
       themeId = object.themeId;
     }
-    console.info('ZTM: Installing theme with id: ', themeId);
+    console.info('ZenThemeMarketplace: Installing theme with id: ', themeId);
 
     const theme = await this.getThemeInfo(themeId);
     if (!theme) {
-      console.error('ZTM: Error fetching theme info');
+      console.error('ZenThemeMarketplace: Error fetching theme info');
       return;
     }
     this.addTheme(theme);

src/zen/mods/actors/ZenThemeMarketplaceParent.sys.mjs

@@ -28,7 +28,8 @@ export class ZenThemeMarketplaceParent extends JSWindowActorParent {
       case 'ZenThemeMarketplace:IsThemeInstalled': {
         const themeId = message.data.themeId;
         const themes = await this.getThemes();
-        return themes[themeId] ? true : false;
+
+        return Boolean(themes?.[themeId]);
       }
       case 'ZenThemeMarketplace:CheckForUpdates': {
         this.checkForThemeUpdates();
@@ -46,14 +47,17 @@ export class ZenThemeMarketplaceParent extends JSWindowActorParent {
   }
 
   compareVersions(version1, version2) {
-    var result = false;
+    let result = false;
+
     if (typeof version1 !== 'object') {
       version1 = version1.toString().split('.');
     }
+
     if (typeof version2 !== 'object') {
       version2 = version2.toString().split('.');
     }
-    for (var i = 0; i < Math.max(version1.length, version2.length); i++) {
+
+    for (let i = 0; i < Math.max(version1.length, version2.length); i++) {
       if (version1[i] == undefined) {
         version1[i] = 0;
       }
@@ -76,7 +80,7 @@ export class ZenThemeMarketplaceParent extends JSWindowActorParent {
 
     let updates = [];
     const themes = await this.getThemes();
-    for (const theme of Object.values(await this.getThemes())) {
+    for (const theme of Object.values(themes)) {
       try {
         const themeInfo = await this.sendQuery('ZenThemeMarketplace:GetThemeInfo', {
           themeId: theme.id,
@@ -141,29 +145,58 @@ export class ZenThemeMarketplaceParent extends JSWindowActorParent {
     return stylesheet;
   }
 
-  async downloadUrlToFile(url, path, isStyleSheet = false) {
-    try {
-      const response = await fetch(url);
-      const data = await response.text();
-      const content = isStyleSheet ? this.getStyleSheetFullContent(data) : data;
-      // convert the data into a Uint8Array
-      let buffer = new TextEncoder().encode(content);
-      await IOUtils.write(path, buffer);
-    } catch (e) {
-      console.error('ZenThemeMarketplaceParent: Error downloading file', url, e);
+  async downloadUrlToFile(url, path, isStyleSheet = false, maxRetries = 3, retryDelayMs = 500) {
+    let attempt = 0;
+
+    while (attempt < maxRetries) {
+      try {
+        const response = await fetch(url);
+
+        if (!response.ok) {
+          throw new Error(
+            `ZenThemeMarketplaceParent: HTTP error! status: ${response.status} for url: ${url}`
+          );
+        }
+
+        const data = await response.text();
+        const content = isStyleSheet ? this.getStyleSheetFullContent(data) : data;
+        // convert the data into a Uint8Array
+        const buffer = new TextEncoder().encode(content);
+        await IOUtils.write(path, buffer);
+
+        return;
+      } catch (e) {
+        attempt++;
+        if (attempt >= maxRetries) {
+          console.error('ZenThemeMarketplaceParent: Error downloading file after retries', url, e);
+        } else {
+          console.warn(
+            `ZenThemeMarketplaceParent: Download failed (attempt ${attempt} of ${maxRetries}), retrying in ${retryDelayMs}ms...`,
+            url,
+            e
+          );
+          await new Promise((res) => setTimeout(res, retryDelayMs));
+        }
+      }
     }
   }
 
   async downloadThemeFileContents(theme) {
-    const themePath = PathUtils.join(this.themesRootPath, theme.id);
-    await IOUtils.makeDirectory(themePath, { ignoreExisting: true });
-    await this.downloadUrlToFile(theme.style, PathUtils.join(themePath, 'chrome.css'), true);
-    await this.downloadUrlToFile(theme.readme, PathUtils.join(themePath, 'readme.md'));
-    if (theme.preferences) {
-      await this.downloadUrlToFile(
-        theme.preferences,
-        PathUtils.join(themePath, 'preferences.json')
-      );
+    try {
+      const themePath = PathUtils.join(this.themesRootPath, theme.id);
+      await IOUtils.makeDirectory(themePath, { ignoreExisting: true });
+
+      await this.downloadUrlToFile(theme.style, PathUtils.join(themePath, 'chrome.css'), true);
+      await this.downloadUrlToFile(theme.readme, PathUtils.join(themePath, 'readme.md'));
+
+      if (theme.preferences) {
+        await this.downloadUrlToFile(
+          theme.preferences,
+          PathUtils.join(themePath, 'preferences.json')
+        );
+      }
+    } catch (e) {
+      console.log('ZenThemeMarketplaceParent: Error downloading theme file contents', theme.id, e);
     }
   }
 
@@ -181,7 +214,11 @@ export class ZenThemeMarketplaceParent extends JSWindowActorParent {
   }
 
   async installTheme(theme) {
-    await this.downloadThemeFileContents(theme);
+    try {
+      await this.downloadThemeFileContents(theme);
+    } catch (e) {
+      console.error('ZenThemeMarketplaceParent: Error installing theme', theme.id, e);
+    }
   }
 
   async checkForThemeChanges() {

src/zen/split-view/ZenViewSplitter.mjs

@@ -147,7 +147,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
     if (groupIndex < 0) {
       return;
     }
-    this.removeTabFromGroup(tab, groupIndex, event.forUnsplit);
+    this.removeTabFromGroup(tab, groupIndex, true);
   }
 
   /**
@@ -188,6 +188,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
         this.resetTabState(remainingTab, forUnsplit);
       }
       this.removeGroup(groupIndex);
+      gBrowser.selectedTab = remainingTabs[remainingTabs.length - 1];
     } else {
       const node = this.getSplitNodeFromTab(tab);
       const toUpdate = this.removeNode(node);
@@ -923,7 +924,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       window.gContextMenu.mediaURL ||
       window.gContextMenu.contentData.docLocation ||
       window.gContextMenu.target.ownerDocument.location.href;
-    const currentTab = window.gBrowser.selectedTab;
+    const currentTab = gZenGlanceManager.getTabOrGlanceParent(window.gBrowser.selectedTab);
     const newTab = this.openAndSwitchToTab(url);
     this.splitTabs([currentTab, newTab]);
   }
@@ -1364,7 +1365,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
     }
     const container = event.currentTarget.closest('.browserSidebarContainer');
     const tab = window.gBrowser.tabs.find(
-      (t) => t.linkedBrowser.closest('.browserSidebarContainer') === container
+      (t) => t.linkedBrowser?.closest('.browserSidebarContainer') === container
     );
     if (tab) {
       window.gBrowser.selectedTab = tab;

src/zen/split-view/zen-decks.css

@@ -41,7 +41,7 @@
   }
 }
 
-#tabbrowser-tabpanels[zen-split-view='true']:not([zen-split-resizing]) > [zen-split-anim='true'] {
+#tabbrowser-tabpanels[zen-split-view='true']:not([zen-split-resizing]) > [zen-split='true'] {
   transition: inset 0.09s ease-out !important;
   & browser {
     transition: opacity 0.2s ease-out !important;
@@ -56,6 +56,7 @@
   &.zen-glance-overlay {
     flex: 1;
     margin-top: calc(var(--zen-element-separation) / 2);
+    z-index: 1;
   }
 }
 
@@ -131,7 +132,7 @@
   align-items: center;
   position: fixed;
   padding: 0.4rem 0.6rem 0.2rem 0.6rem;
-  border-radius: 8px;
+  border-radius: var(--zen-native-content-radius);
   background-color: light-dark(rgba(255, 255, 255, 1), rgba(0, 0, 0, 1));
   box-shadow: 0 0 0 1px var(--button-primary-border-color);
   gap: 0.8rem;

src/zen/tabs/ZenPinnedTabManager.mjs

@@ -62,10 +62,10 @@
       this.observer.addPinnedTabListener(this._onPinnedTabEvent.bind(this));
 
       this._zenClickEventListener = this._onTabClick.bind(this);
-      ZenWorkspaces.addChangeListeners(this.onWorkspaceChange.bind(this));
+      gZenWorkspaces.addChangeListeners(this.onWorkspaceChange.bind(this));
 
       await ZenPinnedTabsStorage.promiseInitialized;
-      ZenWorkspaces._resolvePinnedInitialized();
+      gZenWorkspaces._resolvePinnedInitialized();
     }
 
     async onWorkspaceChange(newWorkspace, onInit) {
@@ -90,14 +90,18 @@
       if (!iconUrl) {
         try {
           setTimeout(() => {
-            PlacesUtils.favicons.getFaviconURLForPage(
-              tab.linkedBrowser.currentURI,
-              (url) => {
-                if (url) gBrowser.setIcon(tab, url.spec);
-              },
+            try {
+              PlacesUtils.favicons.getFaviconURLForPage(
+                tab.linkedBrowser?.currentURI,
+                (url) => {
+                  if (url) gBrowser.setIcon(tab, url.spec);
+                },
 
-              0
-            );
+                0
+              );
+            } catch (error) {
+              console.warn('Error getting favicon URL:', error);
+            }
           });
         } catch {}
       } else {
@@ -151,7 +155,7 @@
     }
 
     async _refreshPinnedTabs({ init = false } = {}) {
-      await ZenWorkspaces.promiseSectionsInitialized;
+      await gZenWorkspaces.promiseSectionsInitialized;
       await this._initializePinsCache();
       await this._initializePinnedTabs(init);
     }
@@ -204,7 +208,7 @@
       const pinsToCreate = new Set(pins.map((p) => p.uuid));
 
       // First pass: identify existing tabs and remove those without pins
-      for (let tab of ZenWorkspaces.allStoredTabs) {
+      for (let tab of gZenWorkspaces.allStoredTabs) {
         const pinId = tab.getAttribute('zen-pin-id');
         if (!pinId) {
           continue;
@@ -232,8 +236,8 @@
           continue;
         }
 
-        if (pin.title && (pin.editedTitle || tab.hasAttribute('zen-has-static-label'))) {
-          tab.removeAttribute('zen-has-static-label'); // So we can set it again
+        tab.removeAttribute('zen-has-static-label'); // So we can set it again
+        if (pin.title && pin.editedTitle) {
           gBrowser._setTabLabel(tab, pin.title, { beforeTabOpen: true });
           tab.setAttribute('zen-has-static-label', 'true');
         }
@@ -304,14 +308,14 @@
           this.log(`Created new pinned tab for pin ${pin.uuid} (isEssential: ${pin.isEssential})`);
           gBrowser.pinTab(newTab);
           if (!pin.isEssential) {
-            const container = document.querySelector(
-              `#vertical-pinned-tabs-container .zen-workspace-tabs-section[zen-workspace-id="${pin.workspaceUuid}"]`
-            );
+            const container = gZenWorkspaces.workspaceElement(
+              pin.workspaceUuid
+            )?.pinnedTabsContainer;
             if (container) {
               container.insertBefore(newTab, container.lastChild);
             }
           } else {
-            ZenWorkspaces.getEssentialsSection(pin.containerTabId).appendChild(newTab);
+            gZenWorkspaces.getEssentialsSection(pin.containerTabId).appendChild(newTab);
           }
           gBrowser.tabContainer._invalidateCachedTabs();
           newTab.initialize();
@@ -501,8 +505,8 @@
         tab.removeAttribute('zen-pin-id');
         tab.removeAttribute('zen-essential'); // Just in case
 
-        if (!tab.hasAttribute('zen-workspace-id') && ZenWorkspaces.workspaceEnabled) {
-          const workspace = await ZenWorkspaces.getActiveWorkspace();
+        if (!tab.hasAttribute('zen-workspace-id') && gZenWorkspaces.workspaceEnabled) {
+          const workspace = await gZenWorkspaces.getActiveWorkspace();
           tab.setAttribute('zen-workspace-id', workspace.uuid);
         }
       }
@@ -591,7 +595,7 @@
       let nextTab = findNextTab(1) || findNextTab(-1);
 
       if (!nextTab) {
-        ZenWorkspaces.selectEmptyTab();
+        gZenWorkspaces.selectEmptyTab();
         return;
       }
 
@@ -667,10 +671,12 @@
         : TabContextMenu.contextTab.multiselected
           ? gBrowser.selectedTabs
           : [TabContextMenu.contextTab];
+      let movedAll = true;
       for (let i = 0; i < tabs.length; i++) {
         let tab = tabs[i];
-        const section = ZenWorkspaces.getEssentialsSection(tab);
+        const section = gZenWorkspaces.getEssentialsSection(tab);
         if (section.children.length >= this.MAX_ESSENTIALS_TABS) {
+          movedAll = false;
           continue;
         }
         if (tab.hasAttribute('zen-essential')) {
@@ -700,7 +706,7 @@
         }
         tab.setAttribute('zenDefaultUserContextId', true);
         if (tab.selected) {
-          ZenWorkspaces.switchTabIfNeeded(tab);
+          gZenWorkspaces.switchTabIfNeeded(tab);
         }
         this._onTabMove(tab);
         this.onTabIconChanged(tab);
@@ -712,6 +718,7 @@
         tab.dispatchEvent(event);
       }
       gZenUIManager.updateTabsToolbar();
+      return movedAll;
     }
 
     removeEssentials(tab, unpin = true) {
@@ -723,13 +730,13 @@
       for (let i = 0; i < tabs.length; i++) {
         const tab = tabs[i];
         tab.removeAttribute('zen-essential');
-        if (ZenWorkspaces.workspaceEnabled && ZenWorkspaces.getActiveWorkspaceFromCache().uuid) {
-          tab.setAttribute('zen-workspace-id', ZenWorkspaces.getActiveWorkspaceFromCache().uuid);
+        if (gZenWorkspaces.workspaceEnabled && gZenWorkspaces.getActiveWorkspaceFromCache().uuid) {
+          tab.setAttribute('zen-workspace-id', gZenWorkspaces.getActiveWorkspaceFromCache().uuid);
         }
         if (unpin) {
           gBrowser.unpinTab(tab);
         } else {
-          const pinContainer = ZenWorkspaces.pinnedTabsContainer;
+          const pinContainer = gZenWorkspaces.pinnedTabsContainer;
           pinContainer.prepend(tab);
           gBrowser.tabContainer._invalidateCachedTabs();
           this._onTabMove(tab);
@@ -794,7 +801,9 @@
         !isVisible || !contextTab.getAttribute('zen-pin-id');
       document.getElementById('context_zen-replace-pinned-url-with-current').hidden = !isVisible;
       document.getElementById('context_zen-add-essential').hidden =
-        contextTab.getAttribute('zen-essential') || !!contextTab.group;
+        contextTab.getAttribute('zen-essential') ||
+        !!contextTab.group ||
+        gBrowser._numZenEssentials >= this.MAX_ESSENTIALS_TABS;
       document.getElementById('context_zen-remove-essential').hidden =
         !contextTab.getAttribute('zen-essential');
       document.getElementById('context_unpinTab').hidden =
@@ -809,10 +818,10 @@
     moveToAnotherTabContainerIfNecessary(event, movingTabs) {
       try {
         const pinnedTabsTarget =
-          event.target.closest('#vertical-pinned-tabs-container') ||
+          event.target.closest('.zen-workspace-pinned-tabs-section') ||
           event.target.closest('.zen-current-workspace-indicator');
         const essentialTabsTarget = event.target.closest('.zen-essentials-container');
-        const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox');
+        const tabsTarget = event.target.closest('.zen-workspace-normal-tabs-section');
         // Remove group labels from the moving tabs and replace it
         // with the sub tabs
         for (let i = 0; i < movingTabs.length; i++) {
@@ -828,6 +837,7 @@
 
         let isVertical = this.expandedSidebarMode;
         let moved = false;
+        let hasActuallyMoved;
         for (const draggedTab of movingTabs) {
           let isRegularTabs = false;
           // Check for pinned tabs container
@@ -846,9 +856,9 @@
               !draggedTab.hasAttribute('zen-essential') &&
               !draggedTab?.group?.hasAttribute('split-view-group')
             ) {
-              this.addToEssentials(draggedTab);
               moved = true;
               isVertical = false;
+              hasActuallyMoved = this.addToEssentials(draggedTab);
             }
           }
           // Check for normal tabs container
@@ -864,8 +874,12 @@
             }
           }
 
+          if (typeof hasActuallyMoved === 'undefined') {
+            hasActuallyMoved = moved;
+          }
+
           // If the tab was moved, adjust its position relative to the target tab
-          if (moved) {
+          if (hasActuallyMoved) {
             const targetTab = event.target.closest('.tabbrowser-tab');
             if (targetTab) {
               const rect = targetTab.getBoundingClientRect();
@@ -947,7 +961,7 @@
       }
       this.dragIndicator.remove();
       this._dragIndicator = null;
-      ZenWorkspaces.activeWorkspaceIndicator?.removeAttribute('open');
+      gZenWorkspaces.activeWorkspaceIndicator?.removeAttribute('open');
     }
 
     get dragIndicator() {
@@ -1000,9 +1014,9 @@
     }
 
     applyDragoverClass(event, draggedTab) {
-      const pinnedTabsTarget = event.target.closest('#vertical-pinned-tabs-container');
+      const pinnedTabsTarget = event.target.closest('.zen-workspace-pinned-tabs-section');
       const essentialTabsTarget = event.target.closest('.zen-essentials-container');
-      const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox');
+      const tabsTarget = event.target.closest('.zen-workspace-normal-tabs-section');
       let targetTab = event.target.closest('.tabbrowser-tab');
       targetTab = targetTab?.group || targetTab;
       draggedTab = draggedTab?.group?.hasAttribute('split-view-group')
@@ -1010,9 +1024,9 @@
         : draggedTab;
       if (event.target.closest('.zen-current-workspace-indicator')) {
         this.removeTabContainersDragoverClass();
-        ZenWorkspaces.activeWorkspaceIndicator?.setAttribute('open', true);
+        gZenWorkspaces.activeWorkspaceIndicator?.setAttribute('open', true);
       } else {
-        ZenWorkspaces.activeWorkspaceIndicator?.removeAttribute('open');
+        gZenWorkspaces.activeWorkspaceIndicator?.removeAttribute('open');
       }
 
       // If there's no valid target tab, nothing to do
@@ -1029,7 +1043,10 @@
           shouldAddDragOverElement = true;
         }
       } else if (essentialTabsTarget) {
-        if (!draggedTab.hasAttribute('zen-essential')) {
+        if (
+          !draggedTab.hasAttribute('zen-essential') &&
+          gBrowser._numZenEssentials < this.MAX_ESSENTIALS_TABS
+        ) {
           shouldAddDragOverElement = true;
           isVertical = false;
         }

src/zen/tabs/ZenTabUnloader.mjs

@@ -94,7 +94,7 @@
         return;
       }
       const currentTimestamp = Date.now();
-      const tabs = ZenWorkspaces.allStoredTabs;
+      const tabs = gZenWorkspaces.allStoredTabs;
       for (let i = 0; i < tabs.length; i++) {
         const tab = tabs[i];
         if (this.unloader.canUnloadTab(tab, currentTimestamp)) {

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

@@ -4,7 +4,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-&
+&:not([zen-compact-animating])
   #zen-sidebar-top-buttons:not(
     :has(#zen-sidebar-top-buttons-customization-target > *:not(#zen-sidebar-top-buttons-separator))
   ) {

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

@@ -93,6 +93,10 @@
 /* ==========================================================================
    Toolbox Padding & Variables
    ========================================================================== */
+#tabbrowser-arrowscrollbox {
+  height: 100%;
+}
+
 #browser {
   /* Define base padding with platform-specific overrides */
   --zen-min-toolbox-padding: 0.4rem;
@@ -169,7 +173,7 @@
     max-height 0.2s ease-in-out;
 
   /* Hide separator when specified by parent container attribute */
-  #vertical-pinned-tabs-container .zen-workspace-tabs-section[hide-separator] & {
+  .zen-workspace-pinned-tabs-section[hide-separator] & {
     max-height: 0;
     margin: 0 auto; /* Collapse margins */
   }
@@ -443,7 +447,6 @@
   min-height: fit-content;
   overflow-y: auto; /* Allow vertical scrolling */
   height: 100%; /* Take full available height */
-  scrollbar-color: color-mix(in srgb, currentColor 26%, transparent) transparent; /* Custom scrollbar */
 
   /* Negative margin hack for workspace transitions (only if workspaces are enabled) */
   :root[zen-workspace-id][zen-sidebar-expanded='true'] & {
@@ -452,40 +455,11 @@
   }
 }
 
-/* Container for browser tabs within the sidebar */
-#zen-browser-tabs-container {
-  overflow-x: clip !important; /* Force horizontal clipping */
-  position: relative; /* Positioning context */
-}
-
 /* ==========================================================================
    Pinned Tabs Container Specific Styles
    ========================================================================== */
-#vertical-pinned-tabs-container {
-  padding-inline-end: 0 !important; /* Remove end padding */
-  display: flex !important; /* Use flex layout */
-  flex-direction: column; /* Stack pinned tabs vertically */
-  min-height: fit-content !important;
-  overflow-x: clip; /* Clip horizontal overflow */
-  overflow-y: visible; /* Allow vertical overflow (for menus etc.) */
-  max-height: unset !important; /* Allow it to grow */
-
-  /* Make non-selected, non-hovered pinned tab backgrounds transparent */
-  & .tabbrowser-tab:not(:hover) .tab-background:not([selected]):not([multiselected]) {
-    background: transparent;
-  }
-
-  /* Center content within pinned tabs */
-  & .tabbrowser-tab .tab-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  /* Ensure glance tabs within pinned container fit their content */
-  .tabbrowser-tab[zen-glance-tab='true'] {
-    width: fit-content !important;
-  }
+:root[zen-workspace-id] #vertical-pinned-tabs-container {
+  display: none;
 }
 
 /* Styling for the label shown when hovering the reset-pin button */
@@ -523,7 +497,7 @@
   & .tab-audio-button {
     margin-inline-start: -4px;
     margin-inline-end: 2px;
-    margin-top: -2px;
+    margin-top: -1px;
   }
 
   & #titlebar {
@@ -567,16 +541,6 @@
     }
   }
 
-  /* Style pinned tabs container when it has visible tabs */
-  & #vertical-pinned-tabs-container:has(tab:not([hidden])) {
-    position: relative;
-
-    /* Make pinned tabs take full width */
-    & .tabbrowser-tab {
-      width: 100%;
-    }
-  }
-
   /* Style bottom buttons area when expanded */
   & #zen-sidebar-bottom-buttons {
     display: flex;
@@ -587,7 +551,7 @@
   }
 
   /* Set min height for tabs in the essentials wrapper */
-  & #zen-essentials-wrapper {
+  & #zen-essentials {
     --tab-min-height: 44px;
   }
 
@@ -748,7 +712,7 @@
 
   /* Hide text labels */
   & .zen-current-workspace-indicator-name,
-  & .toolbarbutton-text {
+  & zen-workspace .toolbarbutton-text {
     display: none !important;
   }
 
@@ -769,9 +733,10 @@
     padding: 0 !important;
     max-width: var(--zen-sidebar-width) !important;
     min-width: unset !important;
+    width: 100% !important;
   }
 
-  & #zen-essentials-wrapper {
+  & #zen-essentials {
     margin-left: unset !important;
   }
 
@@ -797,6 +762,7 @@
   & #titlebar {
     display: grid;
     grid-template-rows: auto 1fr; /* Allow content below button box */
+    overflow: hidden;
   }
 
   /* Style top buttons customization target */
@@ -831,15 +797,6 @@
     display: none !important;
   }
 
-  /* Style pinned tabs container */
-  & #vertical-pinned-tabs-container:has(tab:not([hidden])) {
-    position: relative;
-    /* Constrain pinned tab width */
-    & .tabbrowser-tab {
-      max-width: var(--tab-min-width);
-    }
-  }
-
   /* Adjust customization target padding and separator */
   & #TabsToolbar-customization-target {
     padding-bottom: var(--zen-toolbox-padding);
@@ -1269,12 +1226,16 @@
    Mark: Essentials Toolbar / Section Styles
    ========================================================================== */
 
-#zen-essentials-wrapper,
+#zen-essentials,
 #zen-current-workspace-indicator-container {
   margin-left: calc(-1 * var(--zen-toolbox-padding));
   min-width: calc(100% + var(--zen-toolbox-padding) * 2);
 }
 
+#zen-essentials {
+  z-index: 1;
+}
+
 /* Container for essential items (often pinned/favorite tabs) */
 .zen-essentials-container {
   will-change: transform;
@@ -1305,12 +1266,23 @@
   padding: 0 var(--zen-toolbox-padding);
   display: grid;
 
+  position: absolute;
+
   &[hidden='true'] {
-    --hidden-essentials-width: var(--zen-sidebar-width);
+    --hidden-essentials-width: calc(var(--zen-sidebar-width) + var(--zen-toolbox-padding));
     max-width: var(
       --hidden-essentials-width
     ) !important; /* To still allow essentials to grid the tabs */
     min-width: var(--hidden-essentials-width) !important;
+
+    /* Hide section visually and disable interaction when hidden attribute is present */
+    visibility: hidden;
+    pointer-events: none;
+    position: fixed; /* Fix position to prevent scrolling */
+  }
+
+  &[cloned] {
+    pointer-events: none;
   }
 }
 
@@ -1486,25 +1458,22 @@
    ========================================================================== */
 
 .zen-workspace-tabs-section {
-  position: absolute;
-  transform: translateX(-100%);
-
   &:not(.zen-essentials-container) {
     display: flex;
-    min-width: calc(100% - var(--zen-toolbox-padding) * 2); /* Set width based on padding */
+
+    :root[zen-sidebar-expanded='true'] & {
+      min-width: calc(100% - var(--zen-toolbox-padding) * 2); /* Set width based on padding */
+    }
+
+    :root:not([zen-sidebar-expanded='true']) & {
+      max-width: var(--zen-sidebar-width);
+    }
   }
 
   &:not(.zen-current-workspace-indicator):not(.zen-essentials-container) {
     padding: 0 var(--zen-toolbox-padding);
     width: 100%;
   }
-
-  /* Hide section visually and disable interaction when hidden attribute is present */
-  &[hidden='true'] {
-    visibility: hidden;
-    pointer-events: none;
-    position: fixed; /* Fix position to prevent scrolling */
-  }
 }
 
 /* ==========================================================================

src/zen/tests/container_essentials/browser.toml

@@ -1,4 +1,5 @@
 [DEFAULT]
 prefs = ["zen.workspaces.container-specific-essentials-enabled=true"]
 
-["browser_container_specific_essentials.js"]
+["browser_container_auto_switch.js"]
+["browser_container_specific_essentials.js"]

src/zen/tests/container_essentials/browser_container_auto_switch.js

@@ -0,0 +1,37 @@
+/* Any copyright is dedicated to the Public Domain.
+   https://creativecommons.org/publicdomain/zero/1.0/ */
+
+'use strict';
+
+add_task(async function test_Container_Essentials_Auto_Swithc() {
+  await gZenWorkspaces.createAndSaveWorkspace('Container Profile 1', undefined, false, 1);
+  const workspaces = await gZenWorkspaces._workspaces();
+  ok(workspaces.workspaces.length === 2, 'Two workspaces should exist.');
+
+  let newTab = BrowserTestUtils.addTab(gBrowser, 'about:blank', {
+    skipAnimation: true,
+    userContextId: 1,
+  });
+  ok(newTab, 'New tab should be opened.');
+  gZenPinnedTabManager.addToEssentials(newTab);
+  ok(
+    newTab.hasAttribute('zen-essential') && newTab.parentNode.getAttribute('container') == '1',
+    'New tab should be marked as essential.'
+  );
+  ok(
+    gBrowser.tabs.find(
+      (t) => t.hasAttribute('zen-essential') && t.getAttribute('usercontextid') == 1
+    ),
+    'New tab should be marked as essential.'
+  );
+  const newWorkspaceUUID = gZenWorkspaces.activeWorkspace;
+  Assert.equal(
+    gZenWorkspaces.activeWorkspace,
+    workspaces.workspaces[1].uuid,
+    'The new workspace should be active.'
+  );
+
+  // Change to the original workspace, there should be no essential tabs
+  await gZenWorkspaces.changeWorkspace(workspaces.workspaces[0]);
+  await gZenWorkspaces.removeWorkspace(newWorkspaceUUID);
+});

src/zen/tests/container_essentials/browser_container_specific_essentials.js

@@ -4,10 +4,11 @@
 'use strict';
 
 add_task(async function test_Check_Creation() {
-  await ZenWorkspaces.createAndSaveWorkspace('Container Profile 1', undefined, false, 1);
-  const workspaces = await ZenWorkspaces._workspaces();
+  await gZenWorkspaces.createAndSaveWorkspace('Container Profile 1', undefined, false, 1);
+  const workspaces = await gZenWorkspaces._workspaces();
   ok(workspaces.workspaces.length === 2, 'Two workspaces should exist.');
 
+  await gZenWorkspaces.changeWorkspace(workspaces.workspaces[1]);
   let newTab = BrowserTestUtils.addTab(gBrowser, 'about:blank', {
     skipAnimation: true,
     userContextId: 1,
@@ -24,10 +25,10 @@ add_task(async function test_Check_Creation() {
     ),
     'New tab should be marked as essential.'
   );
-  const newWorkspaceUUID = ZenWorkspaces.activeWorkspace;
+  const newWorkspaceUUID = gZenWorkspaces.activeWorkspace;
 
   // Change to the original workspace, there should be no essential tabs
-  await ZenWorkspaces.changeWorkspace(workspaces.workspaces[0]);
+  await gZenWorkspaces.changeWorkspace(workspaces.workspaces[0]);
   ok(
     !gBrowser.tabs.find(
       (t) => t.hasAttribute('zen-essential') && t.getAttribute('usercontextid') == 1
@@ -35,5 +36,5 @@ add_task(async function test_Check_Creation() {
     'No essential tabs should be found in the original workspace.'
   );
 
-  await ZenWorkspaces.removeWorkspace(newWorkspaceUUID);
+  await gZenWorkspaces.removeWorkspace(newWorkspaceUUID);
 });

src/zen/tests/glance/browser_glance_close.js

@@ -14,7 +14,7 @@ add_task(async function test_Glance_Basic_Close() {
     await new Promise((resolve) => {
       setTimeout(() => {
         resolve();
-      }, 500);
+      }, 1000);
     });
     ok(
       !currentTab.hasAttribute('glance-id'),

src/zen/tests/pinned/browser.toml

@@ -4,5 +4,6 @@
 ["browser_pinned_removed.js"]
 ["browser_pinned_reorder_changed_label.js"]
 ["browser_pinned_reordered.js"]
+["browser_pinned_to_essential.js"]
 
 ["browser_issue_7654.js"]

src/zen/tests/pinned/browser_pinned_created.js

@@ -31,7 +31,7 @@ add_task(async function test_Create_Pinned() {
         );
         Assert.equal(
           pinObject.workspaceUuid,
-          ZenWorkspaces.activeWorkspace,
+          gZenWorkspaces.activeWorkspace,
           'The pin object should have the correct workspace UUID'
         );
       } catch (error) {

src/zen/tests/pinned/browser_pinned_to_essential.js

@@ -0,0 +1,37 @@
+/* Any copyright is dedicated to the Public Domain.
+   https://creativecommons.org/publicdomain/zero/1.0/ */
+
+'use strict';
+
+add_task(async function test_Pinned_To_Essential() {
+  let resolvePromise;
+  const promise = new Promise((resolve) => {
+    resolvePromise = resolve;
+  });
+
+  await BrowserTestUtils.openNewForegroundTab(window.gBrowser, 'https://example.com/', true);
+
+  const newTab = gBrowser.selectedTab;
+  newTab.addEventListener(
+    'ZenPinnedTabCreated',
+    async function (event) {
+      ok(newTab.pinned, 'The tab should be pinned after calling gBrowser.pinTab()');
+
+      const pinTabID = newTab.getAttribute('zen-pin-id');
+      ok(pinTabID, 'The tab should have a zen-pin-id attribute after being pinned');
+
+      gZenPinnedTabManager.addToEssentials(newTab);
+      ok(
+        newTab.hasAttribute('zen-essential') && newTab.parentNode.getAttribute('container') == '0',
+        'New tab should be marked as essential.'
+      );
+
+      resolvePromise();
+    },
+    { once: true }
+  );
+  gBrowser.pinTab(newTab);
+
+  await promise;
+  await BrowserTestUtils.removeTab(newTab);
+});

src/zen/tests/workspaces/browser_basic_workspaces.js

@@ -6,9 +6,9 @@
 add_setup(async function () {});
 
 add_task(async function test_Check_Creation() {
-  const currentWorkspaceUUID = ZenWorkspaces.activeWorkspace;
-  await ZenWorkspaces.createAndSaveWorkspace('Test Workspace 2');
-  const workspaces = await ZenWorkspaces._workspaces();
+  const currentWorkspaceUUID = gZenWorkspaces.activeWorkspace;
+  await gZenWorkspaces.createAndSaveWorkspace('Test Workspace 2');
+  const workspaces = await gZenWorkspaces._workspaces();
   ok(workspaces.workspaces.length === 2, 'Two workspaces should exist.');
   ok(
     currentWorkspaceUUID !== workspaces.workspaces[1].uuid,
@@ -22,8 +22,8 @@ add_task(async function test_Check_Creation() {
   ok(gBrowser.tabs.length === 2, 'There should be two tabs.');
   BrowserTestUtils.removeTab(newTab);
 
-  await ZenWorkspaces.removeWorkspace(ZenWorkspaces.activeWorkspace);
-  const workspacesAfterRemove = await ZenWorkspaces._workspaces();
+  await gZenWorkspaces.removeWorkspace(gZenWorkspaces.activeWorkspace);
+  const workspacesAfterRemove = await gZenWorkspaces._workspaces();
   ok(workspacesAfterRemove.workspaces.length === 1, 'One workspace should exist.');
   ok(
     workspacesAfterRemove.workspaces[0].uuid === currentWorkspaceUUID,

src/zen/tests/workspaces/browser_workspace_bookmarks.js

@@ -102,8 +102,8 @@ add_task(async function test_workspace_bookmark() {
   return;
 
   await withBookmarksShowing(async () => {
-    await ZenWorkspaces.createAndSaveWorkspace('Test Workspace 2');
-    const workspaces = await ZenWorkspaces._workspaces();
+    await gZenWorkspaces.createAndSaveWorkspace('Test Workspace 2');
+    const workspaces = await gZenWorkspaces._workspaces();
     ok(workspaces.workspaces.length === 2, 'Two workspaces should exist.');
     const firstWorkspace = workspaces.workspaces[0];
     const secondWorkspace = workspaces.workspaces[1];
@@ -130,13 +130,13 @@ add_task(async function test_workspace_bookmark() {
 
     await changeWorkspaceForBookmark(bookmark2, secondWorkspace);
 
-    await ZenWorkspaces.changeWorkspace(secondWorkspace);
+    await gZenWorkspaces.changeWorkspace(secondWorkspace);
     const toolbarNode1 = getToolbarNodeForItemGuid(bookmark1.guid);
     const toolbarNode2 = getToolbarNodeForItemGuid(bookmark2.guid);
     ok(toolbarNode1, 'Bookmark1 should be in the toolbar');
     ok(!toolbarNode2, 'Bookmark2 should be in the toolbar');
 
-    await ZenWorkspaces.changeWorkspace(firstWorkspace);
+    await gZenWorkspaces.changeWorkspace(firstWorkspace);
 
     const toolbarNode3 = getToolbarNodeForItemGuid(bookmark1.guid);
     const toolbarNode4 = getToolbarNodeForItemGuid(bookmark2.guid);
@@ -146,6 +146,6 @@ add_task(async function test_workspace_bookmark() {
     await PlacesUtils.bookmarks.remove(bookmark1);
     await PlacesUtils.bookmarks.remove(bookmark2);
 
-    await ZenWorkspaces.removeWorkspace(secondWorkspace.uuid);
+    await gZenWorkspaces.removeWorkspace(secondWorkspace.uuid);
   });
 });

src/zen/toolkit/common/cocoa/ZenHapticFeedback.mm

@@ -23,7 +23,7 @@ nsresult ZenCommonUtils::PlayHapticFeedbackInternal() {
   if (@available(macOS 10.14, *)) {
     id<NSHapticFeedbackPerformer> performer = [NSHapticFeedbackManager defaultPerformer];
     [performer performFeedbackPattern:NSHapticFeedbackPatternAlignment
-                performanceTime:NSHapticFeedbackPerformanceTimeDefault];
+                      performanceTime:NSHapticFeedbackPerformanceTimeDefault];
   } else {
     // Fallback on earlier versions
     // Note: This is a no-op on older versions of iOS/macOS

src/zen/welcome/ZenWelcome.mjs

@@ -257,7 +257,7 @@
 
     async finish() {
       _iconToData = undefined; // Unload icon data
-      ZenWorkspaces.reorganizeTabsAfterWelcome();
+      gZenWorkspaces.reorganizeTabsAfterWelcome();
       await animate('#zen-welcome-page-content', { x: [0, '100%'] }, { bounce: 0 });
       document.getElementById('zen-welcome-page-content').remove();
       await this.animHeart();

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -18,7 +18,7 @@
       super();
       if (
         !Services.prefs.getBoolPref('zen.theme.gradient', true) ||
-        !ZenWorkspaces.shouldHaveWorkspaces
+        !gZenWorkspaces.shouldHaveWorkspaces
       ) {
         return;
       }
@@ -66,7 +66,7 @@
     }
 
     async onDarkModeChange(event, skipUpdate = false) {
-      const currentWorkspace = await ZenWorkspaces.getActiveWorkspace();
+      const currentWorkspace = await gZenWorkspaces.getActiveWorkspace();
       this.onWorkspaceChange(currentWorkspace, skipUpdate);
     }
 
@@ -1105,7 +1105,7 @@
           return;
         }
         // Do not rebuild if the workspace is not the same as the current one
-        const windowWorkspace = await browser.ZenWorkspaces.getActiveWorkspace();
+        const windowWorkspace = await browser.gZenWorkspaces.getActiveWorkspace();
         if (windowWorkspace.uuid !== uuid && theme !== null) {
           return;
         }
@@ -1374,13 +1374,13 @@
         this.currentRotation,
         this.currentTexture
       );
-      let currentWorkspace = await ZenWorkspaces.getActiveWorkspace();
+      let currentWorkspace = await gZenWorkspaces.getActiveWorkspace();
 
       if (!skipSave) {
         await ZenWorkspacesStorage.saveWorkspaceTheme(currentWorkspace.uuid, gradient);
-        await ZenWorkspaces._propagateWorkspaceData();
+        await gZenWorkspaces._propagateWorkspaceData();
         gZenUIManager.showToast('zen-panel-ui-gradient-generator-saved-message');
-        currentWorkspace = await ZenWorkspaces.getActiveWorkspace();
+        currentWorkspace = await gZenWorkspaces.getActiveWorkspace();
       }
 
       await this.onWorkspaceChange(currentWorkspace, true, skipSave ? gradient : null);

src/zen/workspaces/ZenWorkspace.mjs

@@ -0,0 +1,133 @@
+{
+  class ZenWorkspace extends MozXULElement {
+    static get markup() {
+      return `
+        <vbox class="zen-workspace-tabs-section zen-current-workspace-indicator" flex="1">
+          <hbox class="zen-current-workspace-indicator-icon"></hbox>
+          <hbox class="zen-current-workspace-indicator-name"></hbox>
+        </vbox>
+        <arrowscrollbox orient="vertical" tabindex="-1" class="workspace-arrowscrollbox">
+          <vbox class="zen-workspace-tabs-section zen-workspace-pinned-tabs-section">
+            <html:div class="vertical-pinned-tabs-container-separator"></html:div>
+          </vbox>
+          <vbox class="zen-workspace-tabs-section zen-workspace-normal-tabs-section">
+            <!-- Let it me as an ID to mantain compatibility with firefox's tabbrowser -->
+            <hbox id="tabbrowser-arrowscrollbox-periphery">
+              <toolbartabstop/>
+              <toolbarbutton id="tabs-newtab-button"
+                             class="toolbarbutton-1"
+                             command="cmd_newNavigatorTab"
+                             tooltip="dynamic-shortcut-tooltip"
+                             data-l10n-id="tabs-toolbar-new-tab"/>
+              <spacer class="closing-tabs-spacer" style="width: 0;"/>
+            </hbox>
+          </vbox>
+        </arrowscrollbox>
+      `;
+    }
+
+    static get inheritedAttributes() {
+      return {
+        '.zen-workspace-tabs-section': 'zen-workspace-id=id',
+      };
+    }
+
+    constructor() {
+      super();
+    }
+
+    connectedCallback() {
+      if (this.delayConnectedCallback()) {
+        return;
+      }
+
+      this.appendChild(this.constructor.fragment);
+
+      this.tabsContainer = this.querySelector('.zen-workspace-normal-tabs-section');
+      this.indicator = this.querySelector('.zen-current-workspace-indicator');
+      this.pinnedTabsContainer = this.querySelector('.zen-workspace-pinned-tabs-section');
+      this.initializeAttributeInheritance();
+
+      this.scrollbox = this.querySelector('arrowscrollbox');
+      this.scrollbox.smoothScroll = Services.prefs.getBoolPref(
+        'zen.startup.smooth-scroll-in-tabs',
+        false
+      );
+
+      this.scrollbox.addEventListener('wheel', gBrowser.tabContainer, true);
+      this.scrollbox.addEventListener('underflow', gBrowser.tabContainer);
+      this.scrollbox.addEventListener('overflow', gBrowser.tabContainer);
+
+      this.scrollbox._getScrollableElements = () => {
+        const children = [...this.pinnedTabsContainer.children, ...this.tabsContainer.children];
+        if (Services.prefs.getBoolPref('zen.view.show-newtab-button-top', false)) {
+          // Move the perifery to the first non-pinned tab
+          const periphery = this.tabsContainer.querySelector(
+            '#tabbrowser-arrowscrollbox-periphery'
+          );
+          if (periphery) {
+            const firstNonPinnedTabIndex = children.findIndex(
+              (child) => gBrowser.isTab(child) && !child.pinned
+            );
+            if (firstNonPinnedTabIndex > -1) {
+              // Change to new location and remove from the old one on the list
+              const peripheryIndex = children.indexOf(periphery);
+              if (peripheryIndex > -1) {
+                children.splice(peripheryIndex, 1);
+              }
+              children.splice(firstNonPinnedTabIndex, 0, periphery);
+            }
+          }
+        }
+        return Array.prototype.filter.call(
+          children,
+          this.scrollbox._canScrollToElement,
+          this.scrollbox
+        );
+      };
+
+      this.scrollbox._canScrollToElement = (element) => {
+        if (gBrowser.isTab(element)) {
+          return (
+            !element.hasAttribute('zen-essential') &&
+            !this.hasAttribute('positionpinnedtabs') &&
+            !element.hasAttribute('zen-empty-tab')
+          );
+        }
+        return true;
+      };
+
+      // Override for performance reasons. This is the size of a single element
+      // that can be scrolled when using mouse wheel scrolling. If we don't do
+      // this then arrowscrollbox computes this value by calling
+      // _getScrollableElements and dividing the box size by that number.
+      // However in the tabstrip case we already know the answer to this as,
+      // when we're overflowing, it is always the same as the tab min width or
+      // height. For tab group labels, the number won't exactly match, but
+      // that shouldn't be a problem in practice since the arrowscrollbox
+      // stops at element bounds when finishing scrolling.
+      try {
+        Object.defineProperty(this.scrollbox, 'lineScrollAmount', {
+          get: () => 36,
+        });
+      } catch (e) {
+        console.warn('Failed to set lineScrollAmount', e);
+      }
+
+      // Add them manually since attribute inheritance doesn't work
+      // for multiple layers of shadow DOM.
+      this.tabsContainer.setAttribute('zen-workspace-id', this.id);
+      this.pinnedTabsContainer.setAttribute('zen-workspace-id', this.id);
+
+      this.dispatchEvent(
+        new CustomEvent('ZenWorkspaceAttached', {
+          bubbles: true,
+          composed: true,
+          detail: { workspace: this },
+        })
+      );
+    }
+  }
+
+  customElements.define('zen-workspace', ZenWorkspace);
+}

src/zen/workspaces/ZenWorkspaceIcons.mjs

@@ -0,0 +1,93 @@
+{
+  class ZenWorkspaceIcons extends MozXULElement {
+    constructor() {
+      super();
+    }
+
+    connectedCallback() {
+      if (this.delayConnectedCallback()) {
+        return;
+      }
+
+      window.addEventListener('ZenWorkspacesUIUpdate', this, true);
+    }
+
+    #createWorkspaceIcon(workspace) {
+      const button = document.createXULElement('toolbarbutton');
+      button.setAttribute('class', 'subviewbutton');
+      button.setAttribute('tooltiptext', workspace.name);
+      button.setAttribute('zen-workspace-id', workspace.uuid);
+      const icon = document.createXULElement('label');
+      icon.setAttribute('class', 'zen-workspace-icon');
+      if (gZenWorkspaces.workspaceHasIcon(workspace)) {
+        icon.textContent = workspace.icon;
+      } else {
+        icon.setAttribute('no-icon', true);
+      }
+      button.appendChild(icon);
+      button.addEventListener('command', this);
+      return button;
+    }
+
+    async #updateIcons() {
+      const workspaces = await gZenWorkspaces._workspaces();
+      this.innerHTML = '';
+      for (const workspace of workspaces.workspaces) {
+        const button = this.#createWorkspaceIcon(workspace);
+        this.appendChild(button);
+      }
+      if (workspaces.workspaces.length <= 1) {
+        this.setAttribute('dont-show', 'true');
+      } else {
+        this.removeAttribute('dont-show');
+      }
+    }
+
+    on_command(event) {
+      const button = event.target;
+      const uuid = button.getAttribute('zen-workspace-id');
+      if (uuid) {
+        gZenWorkspaces.changeWorkspaceWithID(uuid);
+      }
+    }
+
+    async on_ZenWorkspacesUIUpdate(event) {
+      await this.#updateIcons();
+      this.activeIndex = event.detail.activeIndex;
+    }
+
+    set activeIndex(uuid) {
+      const buttons = this.querySelectorAll('toolbarbutton');
+      if (!buttons.length) {
+        return;
+      }
+      let i = 0;
+      let selected = -1;
+      for (const button of buttons) {
+        if (button.getAttribute('zen-workspace-id') == uuid) {
+          selected = i;
+        } else {
+          button.removeAttribute('active');
+        }
+        i++;
+      }
+      buttons[selected].setAttribute('active', true);
+      this.setAttribute('selected', selected);
+    }
+
+    get activeIndex() {
+      const selected = this.getAttribute('selected');
+      const buttons = this.querySelectorAll('toolbarbutton');
+      let i = 0;
+      for (const button of buttons) {
+        if (i == selected) {
+          return button.getAttribute('zen-workspace-id');
+        }
+        i++;
+      }
+      return null;
+    }
+  }
+
+  customElements.define('zen-workspace-icons', ZenWorkspaceIcons);
+}

src/zen/workspaces/ZenWorkspaces.mjs

@@ -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/.
 
-var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
+var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
   /**
    * Stores workspace IDs and their last selected tabs.
    */
@@ -68,11 +68,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
     if (!this.shouldHaveWorkspaces) {
       this._resolveInitialized();
-      document
-        .getElementById('zen-current-workspace-indicator-container')
-        .setAttribute('hidden', 'true');
-      console.warn('ZenWorkspaces: !!! ZenWorkspaces is disabled in hidden windows !!!');
-      return; // We are in a hidden window, don't initialize ZenWorkspaces
+      console.warn('gZenWorkspaces: !!! gZenWorkspaces is disabled in hidden windows !!!');
+      return; // We are in a hidden window, don't initialize gZenWorkspaces
     }
 
     this.ownerWindow = window;
@@ -113,6 +110,9 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     ChromeUtils.defineLazyGetter(this, 'tabContainer', () =>
       document.getElementById('tabbrowser-tabs')
     );
+    ChromeUtils.defineLazyGetter(this, 'workspaceIcons', () =>
+      document.getElementById('zen-workspaces-button')
+    );
     this._activeWorkspace = Services.prefs.getStringPref('zen.workspaces.active', '');
 
     window.addEventListener('resize', this.onWindowResize.bind(this));
@@ -121,7 +121,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
   log(...args) {
     if (this.#canDebug) {
-      console.debug(`[ZenWorkspaces]:`, ...args);
+      console.debug(`[gZenWorkspaces]:`, ...args);
     }
   }
 
@@ -131,7 +131,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       await this.delayedStartup();
     }
     await this.promiseSectionsInitialized;
-    this.log('ZenWorkspaces initialized');
+    this.log('gZenWorkspaces initialized');
 
     await this.initializeWorkspaces();
     if (
@@ -318,13 +318,10 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       return;
     }
     this._pinnedTabsResizeObserver.disconnect();
-    for (let element of document.getElementById('vertical-pinned-tabs-container').children) {
-      if (element.classList.contains('tabbrowser-tab')) {
-        continue;
-      }
+    for (let element of document.querySelectorAll('.zen-workspace-pinned-tabs-section')) {
       this._pinnedTabsResizeObserver.observe(element, { box: 'border-box' });
     }
-    for (let element of document.getElementById('zen-essentials-wrapper').children) {
+    for (let element of document.getElementById('zen-essentials').children) {
       if (element.classList.contains('tabbrowser-tab')) {
         continue;
       }
@@ -336,15 +333,24 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     if (!this._hasInitializedTabsStrip) {
       return gBrowser.tabContainer.arrowScrollbox;
     }
-    const activeWorkspace = this.activeWorkspace;
-    return document.querySelector(
-      `#tabbrowser-arrowscrollbox .zen-workspace-tabs-section[zen-workspace-id="${activeWorkspace}"]`
-    );
+    return document.querySelector(`zen-workspace[active]`)?.tabsContainer;
+  }
+
+  get pinnedTabsContainer() {
+    if (!this.workspaceEnabled || !this._hasInitializedTabsStrip) {
+      return document.getElementById('vertical-pinned-tabs-container');
+    }
+    return document.querySelector(`zen-workspace[active]`)?.pinnedTabsContainer;
   }
 
   get activeWorkspaceIndicator() {
-    return document.querySelector(
-      `#zen-current-workspace-indicator-container .zen-workspace-tabs-section[zen-workspace-id="${this.activeWorkspace}"]`
+    return document.querySelector(`zen-workspace[active]`)?.indicator;
+  }
+
+  get activeScrollbox() {
+    return (
+      document.querySelector(`zen-workspace[active]`)?.scrollbox ??
+      gBrowser.tabContainer.arrowScrollbox
     );
   }
 
@@ -356,31 +362,30 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     return this.tabboxChildren.filter((child) => !child.hasAttribute('zen-empty-tab'));
   }
 
-  get pinnedTabsContainer() {
-    if (!this.workspaceEnabled || !this._hasInitializedTabsStrip) {
-      return document.getElementById('vertical-pinned-tabs-container');
+  workspaceElement(workspaceId) {
+    if (typeof workspaceId !== 'string') {
+      workspaceId = workspaceId?.uuid;
     }
-    return document.querySelector(
-      `#vertical-pinned-tabs-container .zen-workspace-tabs-section[zen-workspace-id="${this.activeWorkspace}"]`
-    );
+    return document.getElementById(workspaceId);
   }
 
   async initializeTabsStripSections() {
     const perifery = document.getElementById('tabbrowser-arrowscrollbox-periphery');
+    perifery.setAttribute('hidden', 'true');
     const tabs = gBrowser.tabContainer.allTabs;
     const workspaces = await this._workspaces();
     for (const workspace of workspaces.workspaces) {
-      await this._createWorkspaceTabsSection(workspace, tabs, perifery);
+      await this._createWorkspaceTabsSection(workspace, tabs);
     }
     if (tabs.length) {
-      const defaultSelectedContainer = document.querySelector(
-        `#tabbrowser-arrowscrollbox .zen-workspace-tabs-section[zen-workspace-id="${this.activeWorkspace}"]`
+      const defaultSelectedContainer = this.workspaceElement(this.activeWorkspace).querySelector(
+        '.zen-workspace-normal-tabs-section'
+      );
+      const pinnedContainer = this.workspaceElement(this.activeWorkspace).querySelector(
+        '.zen-workspace-pinned-tabs-section'
       );
       // New profile with no workspaces does not have a default selected container
       if (defaultSelectedContainer) {
-        const pinnedContainer = document.querySelector(
-          `#vertical-pinned-tabs-container .zen-workspace-tabs-section[zen-workspace-id="${this.activeWorkspace}"]`
-        );
         for (const tab of tabs) {
           if (tab.hasAttribute('zen-essential')) {
             this.getEssentialsSection(tab).appendChild(tab);
@@ -417,7 +422,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       essentialsContainer.className = 'zen-essentials-container zen-workspace-tabs-section';
       essentialsContainer.setAttribute('flex', '1');
       essentialsContainer.setAttribute('container', container);
-      document.getElementById('zen-essentials-wrapper').appendChild(essentialsContainer);
+      document.getElementById('zen-essentials').appendChild(essentialsContainer);
     }
     return essentialsContainer;
   }
@@ -427,41 +432,31 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     return this.getEssentialsSection(currentWorkspace?.containerTabId);
   }
 
-  #createWorkspaceSection(workspace) {
-    const section = document.createXULElement('vbox');
-    section.className = 'zen-workspace-tabs-section';
-    section.setAttribute('flex', '1');
-    section.setAttribute('zen-workspace-id', workspace.uuid);
-    return section;
-  }
-
-  async _createWorkspaceTabsSection(workspace, tabs, perifery) {
+  async _createWorkspaceTabsSection(workspace, tabs) {
+    const workspaceWrapper = document.createXULElement('zen-workspace');
     const container = gBrowser.tabContainer.arrowScrollbox;
-    const section = this.#createWorkspaceSection(workspace);
-    section.classList.add('zen-workspace-normal-tabs-section');
-    container.appendChild(section);
+    workspaceWrapper.id = workspace.uuid;
+    if (this.activeWorkspace === workspace.uuid) {
+      workspaceWrapper.setAttribute('active', 'true');
+    }
 
-    const pinnedContainer = document.getElementById('vertical-pinned-tabs-container');
-    const pinnedSection = this.#createWorkspaceSection(workspace);
-    pinnedSection.classList.add('zen-workspace-pinned-tabs-section');
-    this._organizeTabsToWorkspaceSections(workspace, section, pinnedSection, tabs);
-    section.appendChild(perifery.cloneNode(true));
-    pinnedSection.appendChild(
-      window.MozXULElement.parseXULToFragment(`
-        <html:div class="vertical-pinned-tabs-container-separator"></html:div>
-      `)
-    );
-    pinnedContainer.appendChild(pinnedSection);
-
-    const workspaceIndicator = this.#createWorkspaceSection(workspace);
-    workspaceIndicator.classList.add('zen-current-workspace-indicator');
-    workspaceIndicator.appendChild(
-      window.MozXULElement.parseXULToFragment(this.workspaceIndicatorXUL)
-    );
-    document
-      .getElementById('zen-current-workspace-indicator-container')
-      .appendChild(workspaceIndicator);
-    this.initIndicatorContextMenu(workspaceIndicator);
+    await new Promise((resolve) => {
+      workspaceWrapper.addEventListener(
+        'ZenWorkspaceAttached',
+        (event) => {
+          this._organizeTabsToWorkspaceSections(
+            workspace,
+            workspaceWrapper.tabsContainer,
+            workspaceWrapper.pinnedTabsContainer,
+            tabs
+          );
+          this.initIndicatorContextMenu(workspaceWrapper.indicator);
+          resolve();
+        },
+        { once: true }
+      );
+      container.appendChild(workspaceWrapper);
+    });
   }
 
   _organizeTabsToWorkspaceSections(workspace, section, pinnedSection, tabs) {
@@ -477,7 +472,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       tabs.splice(tabs.indexOf(tab), 1);
       tab = tab.group ?? tab;
       if (tab.pinned) {
-        pinnedSection.insertBefore(tab, pinnedSection.nextSibling);
+        pinnedSection.insertBefore(tab, pinnedSection.lastChild);
       } else {
         if (!firstNormalTab) {
           firstNormalTab = tab;
@@ -598,7 +593,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     // Attach gesture handlers to each element
     for (const element of elements) {
       if (!element) continue;
-
       this.attachGestureHandlers(element);
     }
   }
@@ -615,6 +609,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     element.addEventListener(
       'MozSwipeGestureEnd',
       (event) => {
+        document.documentElement.removeAttribute('swipe-gesture');
         gZenUIManager.tabsWrapper.style.removeProperty('scrollbar-width');
         this.updateTabsContainers();
       },
@@ -639,8 +634,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
   _handleSwipeStart(event) {
     if (!this.workspaceEnabled) return;
 
-    gZenUIManager.tabsWrapper.style.scrollbarWidth = 'none';
-    gZenUIManager.tabsWrapper.scrollTop = 0;
+    document.documentElement.setAttribute('swipe-gesture', 'true');
 
     event.preventDefault();
     event.stopPropagation();
@@ -687,7 +681,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
     const rawDirection = moveForward ? 1 : -1;
     const direction = this.naturalScroll ? -1 : 1;
-    this.changeWorkspaceShortcut(rawDirection * direction, true);
+    await this.changeWorkspaceShortcut(rawDirection * direction, true);
 
     // Reset swipe state
     this._swipeState = {
@@ -809,19 +803,11 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   async initializeWorkspaces() {
-    await this.initializeWorkspacesButton();
     if (this.workspaceEnabled) {
       this._initializeWorkspaceCreationIcons();
       this._initializeWorkspaceTabContextMenus();
       await this.workspaceBookmarks();
       window.addEventListener('TabBrowserInserted', this.onTabBrowserInserted.bind(this));
-      const tabUpdateListener = this.updateTabsContainers.bind(this);
-      window.addEventListener('TabOpen', tabUpdateListener);
-      window.addEventListener('TabClose', tabUpdateListener);
-      window.addEventListener('TabAddedToEssentials', tabUpdateListener);
-      window.addEventListener('TabRemovedFromEssentials', tabUpdateListener);
-      window.addEventListener('TabPinned', tabUpdateListener);
-      window.addEventListener('TabUnpinned', tabUpdateListener);
       let activeWorkspace = await this.getActiveWorkspace();
       this.activeWorkspace = activeWorkspace?.uuid;
       try {
@@ -831,13 +817,22 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
           gBrowser.tabContainer._positionPinnedTabs();
         }
       } catch (e) {
-        console.error('ZenWorkspaces: Error initializing theme picker', e);
+        console.error('gZenWorkspaces: Error initializing theme picker', e);
       }
       this.onWindowResize();
       await this._selectStartPage();
       this._fixTabPositions();
       this._resolveInitialized();
       this._clearAnyZombieTabs(); // Dont call with await
+
+      const tabUpdateListener = this.updateTabsContainers.bind(this);
+      window.addEventListener('TabOpen', tabUpdateListener);
+      window.addEventListener('TabClose', tabUpdateListener);
+      window.addEventListener('TabAddedToEssentials', tabUpdateListener);
+      window.addEventListener('TabRemovedFromEssentials', tabUpdateListener);
+      window.addEventListener('TabPinned', tabUpdateListener);
+      window.addEventListener('TabUnpinned', tabUpdateListener);
+      window.addEventListener('aftercustomization', tabUpdateListener);
     }
   }
 
@@ -1382,9 +1377,10 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     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.ZenWorkspaces.workspaceEnabled) {
+      if (!browser.gZenWorkspaces.workspaceEnabled) {
         return;
       }
+
       let workspaceList = browser.document.getElementById('PanelUI-zen-workspaces-list');
       const createWorkspaceElement = (workspace) => {
         let element = browser.document.createXULElement('toolbarbutton');
@@ -1400,7 +1396,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
             (container) => container.userContextId === workspace.containerTabId
           );
         } catch (e) {
-          console.warn('ZenWorkspaces: Error setting container color', e);
+          console.warn('gZenWorkspaces: Error setting container color', e);
         }
         if (containerGroup) {
           element.classList.add('identity-color-' + containerGroup.color);
@@ -1430,7 +1426,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
             } else {
               event.preventDefault();
             }
-          }.bind(browser.ZenWorkspaces)
+          }.bind(browser.gZenWorkspaces)
         );
 
         element.addEventListener(
@@ -1449,7 +1445,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
                 }
               }
             }
-          }.bind(browser.ZenWorkspaces)
+          }.bind(browser.gZenWorkspaces)
         );
 
         element.addEventListener('dragenter', function (event) {
@@ -1478,7 +1474,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
                 this.draggedElement = null;
               }
             }
-          }.bind(browser.ZenWorkspaces)
+          }.bind(browser.gZenWorkspaces)
         );
 
         element.addEventListener(
@@ -1492,7 +1488,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
             for (const elem of workspaceElements) {
               elem.classList.remove('dragover');
             }
-          }.bind(browser.ZenWorkspaces)
+          }.bind(browser.gZenWorkspaces)
         );
 
         let childs = browser.MozXULElement.parseXULToFragment(`
@@ -1512,7 +1508,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
         // use text content instead of innerHTML to avoid XSS
         childs.querySelector('.zen-workspace-icon').textContent =
-          browser.ZenWorkspaces.getWorkspaceIcon(workspace);
+          browser.gZenWorkspaces.getWorkspaceIcon(workspace);
         childs.querySelector('.zen-workspace-name').textContent = workspace.name;
         if (containerGroup) {
           childs.querySelector('.zen-workspace-container').textContent =
@@ -1528,7 +1524,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
               .getAttribute('zen-workspace-id');
             const popup = button.ownerDocument.getElementById('zenWorkspaceActionsMenu');
             popup.openPopup(button, 'after_end');
-          }).bind(browser.ZenWorkspaces)
+          }).bind(browser.gZenWorkspaces)
         );
         element.appendChild(childs);
         element.onclick = (async () => {
@@ -1544,8 +1540,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
           await this.changeWorkspace(workspace);
           let panel = this.ownerWindow.document.getElementById('PanelUI-zen-workspaces');
           PanelMultiView.hidePopup(panel);
-          this.ownerWindow.document.getElementById('zen-workspaces-button').removeAttribute('open');
-        }).bind(browser.ZenWorkspaces);
+        }).bind(browser.gZenWorkspaces);
         return element;
       };
 
@@ -1565,7 +1560,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
                 element.classList.add('dragover');
               }
             }
-          }.bind(browser.ZenWorkspaces)
+          }.bind(browser.gZenWorkspaces)
         );
 
         element.addEventListener(
@@ -1574,14 +1569,14 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
             if (this.isReorderModeOn(browser) && this.draggedElement) {
               element.classList.add('dragover');
             }
-          }.bind(browser.ZenWorkspaces)
+          }.bind(browser.gZenWorkspaces)
         );
 
         element.addEventListener(
           'dragleave',
           function (event) {
             element.classList.remove('dragover');
-          }.bind(browser.ZenWorkspaces)
+          }.bind(browser.gZenWorkspaces)
         );
 
         element.addEventListener(
@@ -1599,18 +1594,26 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
                 this.draggedElement = null;
               }
             }
-          }.bind(browser.ZenWorkspaces)
+          }.bind(browser.gZenWorkspaces)
         );
 
         return element;
       };
 
       if (clearCache) {
-        browser.ZenWorkspaces._workspaceCache = null;
-        browser.ZenWorkspaces._workspaceBookmarksCache = null;
+        browser.gZenWorkspaces._workspaceCache = null;
+        browser.gZenWorkspaces._workspaceBookmarksCache = null;
       }
-      let workspaces = await browser.ZenWorkspaces._workspaces();
-      await browser.ZenWorkspaces.workspaceBookmarks();
+      let workspaces = await browser.gZenWorkspaces._workspaces();
+      if (clearCache) {
+        browser.dispatchEvent(
+          new CustomEvent('ZenWorkspacesUIUpdate', {
+            bubbles: true,
+            detail: { activeIndex: browser.gZenWorkspaces.activeWorkspace },
+          })
+        );
+      }
+      await browser.gZenWorkspaces.workspaceBookmarks();
       workspaceList.innerHTML = '';
       workspaceList.parentNode.style.display = 'flex';
       if (workspaces.workspaces.length <= 0) {
@@ -1628,8 +1631,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       workspaceList.appendChild(createLastPositionDropTarget());
 
       if (!ignoreStrip) {
-        await browser.ZenWorkspaces._expandWorkspacesStrip(browser);
-        browser.ZenWorkspaces._fixIndicatorsNames(workspaces);
+        browser.gZenWorkspaces._fixIndicatorsNames(workspaces);
       }
     });
   }
@@ -1702,9 +1704,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     if (!this.workspaceEnabled) {
       return;
     }
-    let target =
-      event.target.closest('.zen-current-workspace-indicator') ||
-      document.getElementById('zen-workspaces-button');
+    let target = event.target.closest('.zen-current-workspace-indicator');
     let panel = document.getElementById('PanelUI-zen-workspaces');
     await this._propagateWorkspaceData({
       ignoreStrip: true,
@@ -1716,87 +1716,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     }).catch(console.error);
   }
 
-  async initializeWorkspacesButton() {
-    if (!this.workspaceEnabled) {
-      return;
-    } else if (document.getElementById('zen-workspaces-button')) {
-      let button = document.getElementById('zen-workspaces-button');
-      button.removeAttribute('hidden');
-      return;
-    }
-    await this._expandWorkspacesStrip();
-  }
-
-  async _expandWorkspacesStrip(browser = window) {
-    if (typeof browser.ZenWorkspaces === 'undefined') {
-      browser = window;
-    }
-    let button = browser.document.getElementById('zen-workspaces-button');
-
-    while (button.firstChild) {
-      button.firstChild.remove();
-    }
-
-    if (this._workspacesButtonClickListener) {
-      button.removeEventListener('click', this._workspacesButtonClickListener);
-      this._workspacesButtonClickListener = null;
-    }
-    if (this._workspaceButtonContextMenuListener) {
-      button.removeEventListener('contextmenu', this._workspaceButtonContextMenuListener);
-      this._workspaceButtonContextMenuListener = null;
-    }
-
-    button.setAttribute('showInPrivateBrowsing', 'false');
-    button.setAttribute('tooltiptext', 'Workspaces');
-    let workspaces = await this._workspaces();
-
-    for (let workspace of workspaces.workspaces) {
-      let workspaceButton = browser.document.createXULElement('toolbarbutton');
-      workspaceButton.className = 'subviewbutton';
-      workspaceButton.setAttribute('tooltiptext', workspace.name);
-      workspaceButton.setAttribute('zen-workspace-id', workspace.uuid);
-
-      if (this.isWorkspaceActive(workspace)) {
-        workspaceButton.setAttribute('active', 'true');
-      } else {
-        workspaceButton.removeAttribute('active');
-      }
-
-      workspaceButton.addEventListener('click', async (event) => {
-        if (event.button !== 0) {
-          return;
-        }
-        await this.changeWorkspace(workspace);
-      });
-
-      let icon = browser.document.createXULElement('div');
-      icon.className = 'zen-workspace-icon';
-      if (this.workspaceHasIcon(workspace)) {
-        icon.textContent = this.getWorkspaceIcon(workspace);
-      } else {
-        icon.setAttribute('no-icon', 'true');
-      }
-      workspaceButton.appendChild(icon);
-      button.appendChild(workspaceButton);
-    }
-
-    if (workspaces.workspaces.length <= 1) {
-      button.setAttribute('dont-show', true);
-    } else {
-      button.removeAttribute('dont-show');
-    }
-
-    this._workspaceButtonContextMenuListener = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      this.openWorkspacesDialog(event);
-    };
-    button.addEventListener(
-      'contextmenu',
-      this._workspaceButtonContextMenuListener.bind(browser.ZenWorkspaces)
-    );
-  }
-
   closeWorkspacesSubView() {
     let parentPanel = document.getElementById('PanelUI-zen-workspaces-multiview');
     parentPanel.goBack(parentPanel);
@@ -1840,13 +1759,10 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
   moveTabsToWorkspace(tabs, workspaceID, justChangeId = false) {
     for (let tab of tabs) {
-      const parent = tab.pinned
-        ? '#vertical-pinned-tabs-container '
-        : '#tabbrowser-arrowscrollbox ';
-      const container = document.querySelector(
-        parent + `.zen-workspace-tabs-section[zen-workspace-id="${workspaceID}"]`
-      );
-
+      const workspaceContainer = this.workspaceElement(workspaceID);
+      const container = tab.pinned
+        ? workspaceContainer?.pinnedTabsContainer
+        : workspaceContainer?.tabsContainer;
       if (container?.contains(tab)) {
         continue;
       }
@@ -1946,16 +1862,21 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     this._changeListeners.push(func);
   }
 
-  async changeWorkspace(window, ...args) {
+  async changeWorkspaceWithID(workspaceID, ...args) {
+    const workspace = this.getWorkspaceFromId(workspaceID);
+    return await this.changeWorkspace(workspace, ...args);
+  }
+
+  async changeWorkspace(workspace, ...args) {
     if (!this.workspaceEnabled || this._inChangingWorkspace) {
       return;
     }
     this._inChangingWorkspace = true;
     try {
-      this.log('Changing workspace to', window?.uuid);
-      await this._performWorkspaceChange(window, ...args);
+      this.log('Changing workspace to', workspace?.uuid);
+      await this._performWorkspaceChange(workspace, ...args);
     } catch (e) {
-      console.error('ZenWorkspaces: Error changing workspace', e);
+      console.error('gZenWorkspaces: Error changing workspace', e);
     }
     this._inChangingWorkspace = false;
   }
@@ -1979,6 +1900,14 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     const workspaces = await this._workspaces();
 
     // 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');
+      }
+    }
     gBrowser.verticalPinnedTabsContainer =
       this.pinnedTabsContainer || gBrowser.verticalPinnedTabsContainer;
     gBrowser.tabContainer.verticalPinnedTabsContainer =
@@ -2029,39 +1958,23 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     }
   }
 
-  _updateMarginTopPinnedTabs(
-    arrowscrollbox,
-    pinnedContainer,
+  _updatePaddingTopOnTabs(
+    workspaceElement,
     essentialContainer,
-    workspaceIndicator,
     forAnimation = false,
     animateContainer = false
   ) {
     if (
-      arrowscrollbox &&
-      !(this._inChangingWorkspace && !forAnimation && !this._alwaysAnimateMarginTop)
+      workspaceElement &&
+      !(this._inChangingWorkspace && !forAnimation && !this._alwaysAnimatePaddingTop)
     ) {
-      delete this._alwaysAnimateMarginTop;
+      delete this._alwaysAnimatePaddingTop;
       const essentialsHeight = essentialContainer.getBoundingClientRect().height;
-      workspaceIndicator.style.marginTop = essentialsHeight + 'px';
-      let arrowMarginTop = pinnedContainer.getBoundingClientRect().height;
-      const isActive = arrowscrollbox.getAttribute('active') === 'true';
-      if ((isActive || !this.containerSpecificEssentials) && !forAnimation) {
-        document.getElementById('zen-tabs-wrapper').style.marginTop = essentialsHeight + 'px';
-        pinnedContainer.style.marginTop = '';
-      } else {
-        arrowMarginTop += essentialsHeight;
-        pinnedContainer.style.marginTop = essentialsHeight + 'px';
-        if (forAnimation) {
-          document.getElementById('zen-tabs-wrapper').style.marginTop = '';
-          gZenUIManager.tabsWrapper.scrollTop = 0;
-        }
-      }
       if (!forAnimation && animateContainer) {
         gZenUIManager.motion.animate(
-          arrowscrollbox,
+          workspaceElement,
           {
-            marginTop: [arrowscrollbox.style.marginTop, arrowMarginTop + 'px'],
+            paddingTop: [workspaceElement.style.paddingTop, essentialsHeight + 'px'],
           },
           {
             type: 'spring',
@@ -2070,7 +1983,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
           }
         );
       } else {
-        arrowscrollbox.style.marginTop = arrowMarginTop + 'px';
+        workspaceElement.style.paddingTop = essentialsHeight + 'px';
       }
     }
   }
@@ -2083,31 +1996,15 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       this._fixIndicatorsNames(workspaces);
     }
     const otherContainersEssentials = document.querySelectorAll(
-      `#zen-essentials-wrapper .zen-workspace-tabs-section`
+      `#zen-essentials .zen-workspace-tabs-section`
     );
     const workspaceContextId = workspace.containerTabId;
     const nextWorkspaceContextId =
       workspaces.workspaces[workspaceIndex + (offsetPixels > 0 ? -1 : 1)]?.containerTabId;
-    if (this.containerSpecificEssentials && justMove) {
-      const waitForContainers = [];
-      for (const element of document.querySelectorAll(
-        '.zen-workspace-tabs-section.zen-workspace-pinned-tabs-section'
-      )) {
-        waitForContainers.push(this.updateTabsContainers(element, true));
-      }
-      await Promise.all(waitForContainers);
-    }
     for (const otherWorkspace of workspaces.workspaces) {
-      const selector = `.zen-workspace-tabs-section[zen-workspace-id="${otherWorkspace.uuid}"]`;
+      const element = this.workspaceElement(otherWorkspace.uuid);
       const newTransform = -(workspaceIndex - workspaces.workspaces.indexOf(otherWorkspace)) * 100;
-      for (const container of document.querySelectorAll(selector)) {
-        container.style.transform = `translateX(${newTransform + offsetPixels / 2}%)`;
-        if (!offsetPixels && !container.hasAttribute('active')) {
-          container.setAttribute('hidden', 'true');
-        } else {
-          container.removeAttribute('hidden');
-        }
-      }
+      element.style.transform = `translateX(${newTransform + offsetPixels / 2}%)`;
     }
     // Hide other essentials with different containerTabId
     for (const container of otherContainersEssentials) {
@@ -2159,9 +2056,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
   _fixIndicatorsNames(workspaces) {
     for (const workspace of workspaces.workspaces) {
-      const workspaceIndicator = document.querySelector(
-        `#zen-current-workspace-indicator-container .zen-workspace-tabs-section[zen-workspace-id="${workspace.uuid}"]`
-      );
+      const workspaceIndicator = this.workspaceElement(workspace.uuid)?.indicator;
       this.updateWorkspaceIndicator(workspace, workspaceIndicator);
     }
   }
@@ -2202,38 +2097,27 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
         essentialsContainer.parentNode.appendChild(essentialsClone);
       }
     }
-    if (shouldAnimate && this.containerSpecificEssentials) {
-      const waitForContainers = [];
-      for (const element of document.querySelectorAll(
-        '.zen-workspace-tabs-section.zen-workspace-pinned-tabs-section'
-      )) {
-        waitForContainers.push(this.updateTabsContainers(element, true));
-      }
-      await Promise.all(waitForContainers);
-    }
-
-    for (const element of document.querySelectorAll('.zen-workspace-tabs-section')) {
+    for (const element of document.querySelectorAll('zen-workspace')) {
       if (element.classList.contains('zen-essentials-container')) {
         continue;
       }
       const existingTransform = element.style.transform;
-      const elementWorkspaceId = element.getAttribute('zen-workspace-id');
+      const elementWorkspaceId = element.id;
       const elementWorkspaceIndex = workspaces.workspaces.findIndex(
         (w) => w.uuid === elementWorkspaceId
       );
       const offset = -(newWorkspaceIndex - elementWorkspaceIndex) * 100;
       const newTransform = `translateX(${offset}%)`;
       if (shouldAnimate) {
-        element.removeAttribute('hidden');
-        // For some reason, motion seems to reset the margin top randomly
-        // so we explicitly set it to the current value
-        const marginTop = element.style.marginTop;
+        const existingPaddingTop = element.style.paddingTop;
         animations.push(
           gZenUIManager.motion.animate(
             element,
             {
               transform: existingTransform ? [existingTransform, newTransform] : newTransform,
-              marginTop: existingTransform ? [marginTop, marginTop] : marginTop,
+              paddingTop: existingTransform
+                ? [existingPaddingTop, existingPaddingTop]
+                : existingPaddingTop,
             },
             {
               type: 'spring',
@@ -2395,7 +2279,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       for (const cloned of clonedEssentials) {
         cloned.container.remove();
       }
-      this._alwaysAnimateMarginTop = true;
+      this._alwaysAnimatePaddingTop = true;
       await this.updateTabsContainers();
     }
     const essentialsContainer = this.getEssentialsSection(newWorkspace.containerTabId);
@@ -2528,6 +2412,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     // Recalculate new tab observers
     gBrowser.tabContainer.observe(null, 'nsPref:changed', 'privacy.userContext.enabled');
 
+    gBrowser.tabContainer.arrowScrollbox = this.activeScrollbox;
+
     // Update workspace UI
     await this._updateWorkspacesChangeContextMenu();
     // gZenUIManager.updateTabsToolbar();
@@ -2536,6 +2422,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     gZenThemePicker.onWorkspaceChange(workspace);
 
     gZenUIManager.tabsWrapper.scrollbarWidth = 'none';
+    this.workspaceIcons.activeIndex = workspace.uuid;
     await this._animateTabs(workspace, !onInit && !this._animatingChange, tabToSelect, {
       previousWorkspaceIndex,
       previousWorkspace,
@@ -2572,6 +2459,12 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
           tab.setAttribute('zen-workspace-id', workspace.uuid);
         }
       }
+      window.dispatchEvent(
+        new CustomEvent('ZenWorkspacesUIUpdate', {
+          bubbles: true,
+          detail: { activeIndex: workspace.uuid },
+        })
+      );
     }
 
     setTimeout(gURLBar.formatValue.bind(gURLBar), 0);
@@ -2627,10 +2520,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     };
     if (moveTabs) {
       this._prepareNewWorkspace(window);
-      const perifery = document.querySelector('#tabbrowser-arrowscrollbox-periphery[hidden]');
-      perifery?.removeAttribute('hidden');
-      this._createWorkspaceTabsSection(window, tabs, perifery);
-      perifery.setAttribute('hidden', 'true');
+      this._createWorkspaceTabsSection(window, tabs);
     }
     return window;
   }
@@ -2674,13 +2564,18 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   async updateTabsContainers(target = undefined, forAnimation = false) {
-    if (target && !target.parentNode) {
+    if (target && !target.target?.parentNode) {
       target = null;
     }
     // Only animate if it's from an event
-    const animateContainer = target && target instanceof EventTarget;
+    let animateContainer = target && target.target instanceof EventTarget;
+    if (target?.type === 'TabClose') {
+      animateContainer = target.target.pinned;
+    }
     await this.onPinnedTabsResize(
-      [{ target: target ?? this.pinnedTabsContainer }],
+      // This is what happens when we join a resize observer, an event listener
+      // while using it as a method.
+      [{ target: (target?.target ? target.target : target) ?? this.pinnedTabsContainer }],
       forAnimation,
       animateContainer
     );
@@ -2704,14 +2599,18 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     if (!this._hasInitializedTabsStrip || (this._organizingWorkspaceStrip && !forAnimation)) {
       return;
     }
+    if (document.documentElement.hasAttribute('customizing')) return;
     // forAnimation may be of type "ResizeObserver" if it's not a boolean, just ignore it
     if (typeof forAnimation !== 'boolean') {
       forAnimation = false;
     }
     for (const entry of entries) {
-      const originalWorkspaceId = entry.target.getAttribute('zen-workspace-id');
+      let originalWorkspaceId = entry.target.getAttribute('zen-workspace-id');
+      if (!originalWorkspaceId) {
+        originalWorkspaceId = entry.target.closest('zen-workspace')?.id;
+      }
       const workspacesIds = [];
-      if (entry.target.closest('#zen-essentials-wrapper')) {
+      if (entry.target.closest('#zen-essentials')) {
         // Get all workspaces that have the same userContextId
         const activeWorkspace = await this.getActiveWorkspace();
         const userContextId = activeWorkspace.containerTabId;
@@ -2723,15 +2622,12 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
         workspacesIds.push(originalWorkspaceId);
       }
       for (const workspaceId of workspacesIds) {
-        const arrowScrollbox = document.querySelector(
-          `#tabbrowser-arrowscrollbox .zen-workspace-tabs-section[zen-workspace-id="${workspaceId}"]`
-        );
-        const pinnedContainer = document.querySelector(
-          `#vertical-pinned-tabs-container .zen-workspace-tabs-section[zen-workspace-id="${workspaceId}"]`
-        );
-        const workspaceIndicator = document.querySelector(
-          `#zen-current-workspace-indicator-container .zen-workspace-tabs-section[zen-workspace-id="${workspaceId}"]`
-        );
+        const workspaceElement = this.workspaceElement(workspaceId);
+        if (!workspaceElement) {
+          continue;
+        }
+        const arrowScrollbox = workspaceElement.tabsContainer;
+        const pinnedContainer = workspaceElement.pinnedTabsContainer;
         const workspaceObject = this.getWorkspaceFromId(workspaceId);
         const essentialContainer = this.getEssentialsSection(workspaceObject.containerTabId);
         const essentialNumChildren = essentialContainer.children.length;
@@ -2748,11 +2644,9 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
         } else {
           essentialContainer.removeAttribute('data-hack-type');
         }
-        this._updateMarginTopPinnedTabs(
-          arrowScrollbox,
-          pinnedContainer,
+        this._updatePaddingTopOnTabs(
+          workspaceElement,
           essentialContainer,
-          workspaceIndicator,
           forAnimation,
           animateContainer
         );
@@ -2853,9 +2747,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       if (!workspaceId) {
         continue;
       }
-      const contaienr = document.querySelector(
-        `#vertical-pinned-tabs-container .zen-workspace-tabs-section[zen-workspace-id="${workspaceId}"]`
-      );
+      const contaienr = this.workspaceElement(workspaceId).pinnedTabsContainer;
       contaienr.insertBefore(tab, contaienr.lastChild);
       changed = true;
     }
@@ -3141,17 +3033,21 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     const tabs = [];
     // we need to go through each tab in each container
     const essentialsContainer = document.querySelectorAll(
-      '#zen-essentials-wrapper .zen-workspace-tabs-section'
-    );
-    let pinnedContainers = document.querySelectorAll(
-      '#vertical-pinned-tabs-container .zen-workspace-tabs-section'
-    );
-    let normalContainers = document.querySelectorAll(
-      '#tabbrowser-arrowscrollbox .zen-workspace-tabs-section'
+      '#zen-essentials .zen-workspace-tabs-section'
     );
+    let pinnedContainers = [];
+    let normalContainers = [];
     if (!this._hasInitializedTabsStrip) {
       pinnedContainers = [document.getElementById('vertical-pinned-tabs-container')];
       normalContainers = [this.activeWorkspaceStrip];
+    } else {
+      for (const workspace of this._workspaceCache.workspaces) {
+        const container = this.workspaceElement(workspace.uuid);
+        if (container) {
+          pinnedContainers.push(container.pinnedTabsContainer);
+          normalContainers.push(container.tabsContainer);
+        }
+      }
     }
     const containers = [...essentialsContainer, ...pinnedContainers, ...normalContainers];
     for (const container of containers) {
@@ -3185,12 +3081,15 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       let children = this.tabboxChildren;
       return children.filter((node) => node.tagName == 'tab-group');
     }
-    const pinnedContainers = document.querySelectorAll(
-      '#vertical-pinned-tabs-container .zen-workspace-tabs-section'
-    );
-    const normalContainers = document.querySelectorAll(
-      '#tabbrowser-arrowscrollbox .zen-workspace-tabs-section'
-    );
+    const pinnedContainers = [];
+    const normalContainers = [];
+    for (const workspace of this._workspaceCache.workspaces) {
+      const container = this.workspaceElement(workspace.uuid);
+      if (container) {
+        pinnedContainers.push(container.pinnedTabsContainer);
+        normalContainers.push(container.tabsContainer);
+      }
+    }
     const containers = [...pinnedContainers, ...normalContainers];
     const tabGroups = [];
     for (const container of containers) {
@@ -3330,17 +3229,17 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
   onWindowResize(event = undefined) {
     if (!(!event || event.target === window)) return;
     // Check if workspace icons overflow the parent container
-    const parent = document.getElementById('zen-workspaces-button');
+    const parent = this.workspaceIcons;
     if (!parent || this._processingResize) {
       return;
     }
     this._processingResize = true;
     // Once we are overflowing, we align the buttons to always stay inside the container,
     // meaning we need to remove the overflow attribute to reset the width
-    parent.removeAttribute('overflow');
+    parent.removeAttribute('icons-overflow');
     requestAnimationFrame(() => {
       const overflow = parent.scrollWidth > parent.clientWidth;
-      parent.toggleAttribute('overflow', overflow);
+      parent.toggleAttribute('icons-overflow', overflow);
       // The maximum width a button has when it overflows based on the number of buttons
       const numButtons = parent.children.length + 1; // +1 to exclude the active button
       const maxWidth = 100 / numButtons;

src/zen/workspaces/ZenWorkspacesStorage.mjs

@@ -11,7 +11,7 @@ var ZenWorkspacesStorage = {
       Weave: 'resource://services-sync/main.sys.mjs',
     });
 
-    if (!window.ZenWorkspaces) return;
+    if (!window.gZenWorkspaces) return;
     await this._ensureTable();
     await ZenWorkspaceBookmarksStorage.init();
   },
@@ -77,7 +77,7 @@ var ZenWorkspacesStorage = {
           await ZenWorkspacesStorage.migrateWorkspacesFromJSON();
         }
 
-        ZenWorkspaces._resolveDBInitialized();
+        gZenWorkspaces._resolveDBInitialized();
       }
     );
   },

src/zen/workspaces/overflow-icons.inc.css

@@ -0,0 +1,29 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/.
+ */
+
+&:not(:hover) {
+  width: min(var(--zen-overflowed-workspace-button-width), 25px);
+  &::after {
+    content: '';
+    position: absolute;
+    width: 4px;
+    border-radius: 99px;
+    height: 4px;
+    background: color-mix(
+      in srgb,
+      var(--zen-primary-color) 10%,
+      light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4)) 90%
+    );
+    left: 50%;
+    top: 50%;
+    filter: saturate(140%) brightness(110%) !important;
+    transform: translate(-50%, -50%);
+  }
+
+  & .zen-workspace-icon {
+    display: none;
+  }
+}

src/zen/workspaces/zen-workspaces.css

@@ -4,12 +4,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 @namespace html 'http://www.w3.org/1999/xhtml';
+@namespace xul 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul';
 
 #zen-workspaces-button {
   justify-content: center;
   align-items: center;
   display: flex;
   font-size: x-small;
+  padding: 0 3px;
+  margin: 0;
+  appearance: auto;
 
   position: relative;
 
@@ -61,39 +65,21 @@
     }
   }
 
-  &[overflow] {
+  &[icons-overflow] {
     gap: 0 !important;
 
     & toolbarbutton {
       margin: 0;
     }
 
-    & toolbarbutton:not([active='true']),
+    /* Inlcude separately since ther'es a bug in the 
+     * rendering of XUL in firefox */
+    & toolbarbutton:not([active='true']) {
+%include overflow-icons.inc.css
+    }
+
     &:has(toolbarbutton:hover) toolbarbutton[active='true'] {
-      &:not(:hover) {
-        width: min(var(--zen-overflowed-workspace-button-width), 25px);
-
-        &::after {
-          content: '';
-          position: absolute;
-          width: 4px;
-          border-radius: 99px;
-          height: 4px;
-          background: color-mix(
-            in srgb,
-            var(--zen-primary-color) 10%,
-            light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4)) 90%
-          );
-          left: 50%;
-          top: 50%;
-          filter: saturate(140%) brightness(110%) !important;
-          transform: translate(-50%, -50%);
-        }
-
-        & .zen-workspace-icon {
-          display: none;
-        }
-      }
+%include overflow-icons.inc.css 
     }
   }
 }
@@ -454,16 +440,11 @@
 }
 
 /* Mark workspaces indicator */
-#zen-current-workspace-indicator-container {
-  position: relative;
-  margin-bottom: var(--zen-workspace-indicator-height);
-}
-
 .zen-current-workspace-indicator {
   padding: calc(15px + var(--zen-toolbox-padding))
     calc(4px + var(--tab-inline-padding) + var(--zen-toolbox-padding));
   font-weight: 600;
-  position: absolute;
+  position: relative;
   max-height: var(--zen-workspace-indicator-height);
   min-height: var(--zen-workspace-indicator-height);
   gap: var(--tab-icon-end-margin);
@@ -508,6 +489,83 @@
   }
 }
 
-#zen-current-workspace-indicator-container[hidden='true'] {
-  display: none !important;
+/* mark: workspace element */
+zen-workspace {
+  flex-direction: column;
+  width: calc(100% + var(--zen-toolbox-padding) * 2);
+  position: absolute;
+  height: 100%;
+  overflow: hidden;
+
+  :root:not([zen-sidebar-expanded='true']) & {
+    width: 100%;
+  }
+
+  & > arrowscrollbox {
+    max-height: 100%;
+    overflow: hidden;
+    position: relative;
+
+    &::part(scrollbutton-up),
+    &::part(scrollbutton-down) {
+      display: none;
+    }
+
+    &::part(scrollbox) {
+      scrollbar-width: auto;
+      scrollbar-color: color-mix(in srgb, currentColor 35%, transparent 65%) transparent; /* Custom scrollbar */
+      overflow-y: auto;
+    }
+
+    :root[swipe-gesture] &::part(scrollbox) {
+      scrollbar-width: none;
+    }
+
+    &[overflowing] {
+      --zen-scrollbar-overflow-background: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.1s;
+        background-color: var(--zen-scrollbar-overflow-background);
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.1s;
+        background-color: var(--zen-scrollbar-overflow-background);
+      }
+
+      &:not([scrolledtostart])::before {
+        opacity: 1;
+      }
+
+      &:not([scrolledtoend])::after {
+        opacity: 1;
+      }
+    }
+
+    &,
+    & .zen-workspace-normal-tabs-section {
+      height: 100%;
+    }
+  }
+}
+
+/** Customiable UI, this is an auto generated ID */
+#wrapper-zen-workspaces-button {
+  width: 100%;
 }

surfer.json

@@ -5,8 +5,8 @@
   "binaryName": "zen",
   "version": {
     "product": "firefox",
-    "version": "138.0.3",
-    "candidate": "138.0.3"
+    "version": "138.0.4",
+    "candidate": "138.0.4"
   },
   "buildOptions": {
     "generateBranding": true
@@ -19,7 +19,7 @@
       "brandShortName": "Zen",
       "brandFullName": "Zen Browser",
       "release": {
-        "displayVersion": "1.12.5b",
+        "displayVersion": "1.12.6b",
         "github": {
           "repo": "zen-browser/desktop"
         },