Merge pull request #8346 from zen-browser/ultimate-sidebar-revamp

2025-09-05 19:08:18 +00:00 · 2025-05-16 08:43:39 +02:00
parent 086d1633df 9b8195d666
commit 619a8d39be
40 changed files with 591 additions and 503 deletions
--- a/src/browser/app/profile/firefox-js.patch
+++ b/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);
--- a/src/browser/base/content/browser-init-js.patch
+++ b/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",
--- a/src/browser/base/content/browser-js.patch
+++ b/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;
--- a/src/browser/base/content/navigator-toolbox-inc-xhtml.patch
+++ b/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"/>
 
--- a/src/browser/base/content/zen-assets.jar.inc.mn
+++ b/src/browser/base/content/zen-assets.jar.inc.mn
@@ -39,7 +39,9 @@
        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/ZenWorkspaces.mjs                        (../../zen/workspaces/ZenWorkspaces.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/gZenWorkspaces.mjs                        (../../zen/workspaces/gZenWorkspaces.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)
--- a/src/browser/base/content/zen-preloaded.inc.xhtml
+++ b/src/browser/base/content/zen-preloaded.inc.xhtml
@@ -5,7 +5,9 @@
  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/ZenWorkspaces.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/gZenWorkspaces.mjs", this);
  Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenWorkspacesSync.mjs", this);
  Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenActorsManager.mjs", this);
 </script>
--- a/src/browser/base/content/zen-sidebar-icons.inc.xhtml
+++ b/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>
--- a/src/browser/components/customizableui/CustomizeMode-sys-mjs.patch
+++ b/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");
         }
--- a/src/browser/components/places/content/browserPlacesViews-js.patch
+++ b/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 {
--- a/src/browser/components/sessionstore/SessionStore-sys-mjs.patch
+++ b/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.
--- a/src/browser/components/tabbrowser/content/tabbrowser-js.patch
+++ b/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..66c42501899b15e1f250880ebe9e64b2610e08ad 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)) {
@@ -367,16 +367,16 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
         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) {
@@ -460,8 +460,8 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
         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;
 +        }
@@ -485,7 +485,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
             ? 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,
@@ -493,7 +493,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
 
         newTab = true;
       }
-+      ZenWorkspaces._removedByStartupPage = false;
+      gZenWorkspaces._removedByStartupPage = false;
       aTab._endRemoveArgs = [closeWindow, newTab];
 
       // swapBrowsersAndCloseOther will take care of closing the window without animation.
@@ -504,7 +504,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
 -        this.addTrustedTab(BROWSER_NEW_TAB_URL, {
 -          skipAnimation: true,
 -        });
-+        ZenWorkspaces.selectEmptyTab(BROWSER_NEW_TAB_URL);
+        gZenWorkspaces.selectEmptyTab(BROWSER_NEW_TAB_URL);
       } else {
         TabBarVisibility.update();
       }
@@ -512,7 +512,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
         this.tabs[i]._tPos = i;
       }
 
-+      ZenWorkspaces.updateTabsContainers();
+      gZenWorkspaces.updateTabsContainers();
 +
       if (!this._windowIsClosing) {
         if (wasPinned) {
@@ -532,7 +532,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
       }
 
       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.
@@ -541,14 +541,14 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
         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, {
@@ -557,7 +557,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
 
       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
@@ -566,7 +566,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
       }
 
 -      return tab;
-+      return ZenWorkspaces.findTabToBlur(tab);
+      return gZenWorkspaces.findTabToBlur(tab);
     }
 
     _blurTab(aTab) {
@@ -583,7 +583,7 @@ 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 +6137,7 @@
 
       // Don't allow mixing pinned and unpinned tabs.
       if (this.isTab(element) && element.pinned) {
@@ -592,7 +592,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
       } else {
         tabIndex = Math.max(tabIndex, this.pinnedTabCount);
       }
-@@ -6028,9 +6163,16 @@
+@@ -6029,9 +6164,16 @@
         element,
         () => {
           let neighbor = this.tabs[tabIndex];
@@ -610,7 +610,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
           if (neighbor && this.isTab(element) && tabIndex > element._tPos) {
             neighbor.after(element);
           } else {
-@@ -6099,7 +6241,9 @@
+@@ -6100,7 +6242,9 @@
           targetElement = targetElement.group;
         }
       }
@@ -621,7 +621,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 +6254,13 @@
         moveBefore = true;
       }
 
@@ -630,12 +630,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 +6320,7 @@
       if (!this.isTab(aTab)) {
         throw new Error("Can only move a tab into a tab group");
       }
@@ -644,27 +644,27 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
         return;
       }
       if (aTab.group && aTab.group.id === aGroup.id) {
-@@ -6263,6 +6413,10 @@
+@@ -6264,6 +6414,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 +7235,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 +8136,7 @@
             aWebProgress.isTopLevel
           ) {
             this.mTab.setAttribute("busy", "true");
@@ -672,7 +672,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
             gBrowser._tabAttrModified(this.mTab, ["busy"]);
             this.mTab._notselectedsinceload = !this.mTab.selected;
           }
-@@ -8954,7 +9109,7 @@ var TabContextMenu = {
+@@ -8955,7 +9110,7 @@ var TabContextMenu = {
     );
     contextUnpinSelectedTabs.hidden =
       !this.contextTab.pinned || !this.multiselected;
@@ -681,7 +681,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
     // Move Tab items
     let contextMoveTabOptions = document.getElementById(
       "context_moveTabOptions"
-@@ -9223,6 +9378,7 @@ var TabContextMenu = {
+@@ -9224,6 +9379,7 @@ var TabContextMenu = {
         telemetrySource: gBrowser.TabMetrics.METRIC_SOURCE.TAB_STRIP,
       });
     } else {
--- a/src/browser/components/tabbrowser/content/tabs-js.patch
+++ b/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..97e2a505892a82084ade7d2b1c5b690444f65254 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
@@ -83,7 +83,7 @@
@@ -132,7 +132,7 @@ 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() {
@@ -141,7 +141,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
         return this.#allTabs;
       }
 -      let children = Array.from(this.arrowScrollbox.children);
-+      let children = ZenWorkspaces.tabboxChildren;
+      let children = gZenWorkspaces.tabboxChildren;
       // remove arrowScrollbox periphery element
       children.pop();
 
@@ -156,7 +156,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
 
       this.#allTabs = [
 -        ...this.verticalPinnedTabsContainer.children,
-+        ...ZenWorkspaces.getCurrentEssentialsContainer().children, ...this.verticalPinnedTabsContainer.children,
+        ...gZenWorkspaces.getCurrentEssentialsContainer().children, ...this.verticalPinnedTabsContainer.children,
         ...children,
       ];
 +      const lastPinnedTabIdx = gBrowser.pinnedTabCount;
@@ -182,7 +182,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
     get allGroups() {
       let children = Array.from(this.arrowScrollbox.children);
 -      return children.filter(node => node.tagName == "tab-group");
-+      return ZenWorkspaces.allTabGroups;
+      return gZenWorkspaces.allTabGroups;
     }
 
     /**
@@ -207,11 +207,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);
@@ -246,7 +246,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
     _invalidateCachedTabs() {
       this.#allTabs = null;
       this._invalidateCachedVisibleTabs();
-+      ZenWorkspaces._allStoredTabs = null;
+      gZenWorkspaces._allStoredTabs = null;
     }
 
     _invalidateCachedVisibleTabs() {
@@ -266,7 +266,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
       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);
@@ -275,7 +275,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
           // 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"
@@ -304,14 +304,14 @@ 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);
         }
       }
 
--- a/src/browser/components/urlbar/UrlbarProviderPlaces-sys-mjs.patch
+++ b/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;
--- a/src/modules/libpref/init/StaticPrefList-yaml.patch
+++ b/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 @@
--- a/src/toolkit/components/pictureinpicture/PictureInPicture-sys-mjs.patch
+++ b/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 });
   },
 
--- a/src/toolkit/content/widgets/tabbox-js.patch
+++ b/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;
         }
--- a/src/widget/cocoa/VibrancyManager-mm.patch
+++ b/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);
--- a/src/zen/common/ZenStartup.mjs
+++ b/src/zen/common/ZenStartup.mjs
@@ -31,7 +31,7 @@
        this._initSidebarScrolling();
        this._hideUnusedElements();

-        ZenWorkspaces.init();
+        gZenWorkspaces.init();
        gZenVerticalTabsManager.init();
        gZenUIManager.init();

@@ -61,7 +61,7 @@
    },

    delayedStartupFinished() {
-      ZenWorkspaces.promiseInitialized.then(async () => {
+      gZenWorkspaces.promiseInitialized.then(async () => {
        await delayedStartupPromise;
        await SessionStore.promiseAllWindowsRestored;
        setTimeout(() => {
--- a/src/zen/common/ZenUIManager.mjs
+++ b/src/zen/common/ZenUIManager.mjs
@@ -74,7 +74,7 @@ var gZenUIManager = {
    setTimeout(gURLBar.formatValue.bind(gURLBar), 350);
    if (!this._preventToolbarRebuild) {
      setTimeout(() => {
-        ZenWorkspaces.updateTabsContainers();
+        gZenWorkspaces.updateTabsContainers();
      }, 0);
    }
    delete this._preventToolbarRebuild;
@@ -779,7 +779,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 && gZenWorkspaces.workspaceEnabled ? 'horizontal' : 'vertical'
      );

      const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
--- a/src/zen/common/styles/zen-popup.css
+++ b/src/zen/common/styles/zen-popup.css
@@ -373,7 +373,7 @@ menuitem {
    gap: 10px;
    z-index: 1000;
    padding: var(--zen-toast-padding);
-    border-radius: calc(var(--zen-native-inner-radius) + 6px);
+    border-radius: calc(var(--zen-native-inner-radius) + 8px);
    background: linear-gradient(
      170deg,
      var(--zen-primary-color) -40%,
@@ -408,7 +408,7 @@ menuitem {
      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) + 4px) !important;

      :root[zen-right-side='true'] & {
        order: -1;
--- a/src/zen/common/styles/zen-urlbar.css
+++ b/src/zen/common/styles/zen-urlbar.css
@@ -178,7 +178,9 @@
      --zen-urlbar-background-transparent,
      var(--zen-urlbar-background-base)
    ) !important;
-    box-shadow: 0px 0px 90px -10px rgba(0, 0, 0, 0.6) !important;
+    box-shadow:
+      0 20px 25px -5px rgb(0 0 0 / 0.1),
+      0 8px 10px -6px rgb(0 0 0 / 0.1);
    backdrop-filter: none !important;
    border-radius: 12px !important;
    outline: 0.5px solid light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15)) !important;
--- a/src/zen/common/zen-sets.js
+++ b/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;
        }
--- a/src/zen/folders/ZenFolders.mjs
+++ b/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;
      }
--- a/src/zen/glance/ZenGlanceManager.mjs
+++ b/src/zen/glance/ZenGlanceManager.mjs
@@ -609,7 +609,7 @@
    }

    finishOpeningGlance() {
-      ZenWorkspaces.updateTabsContainers();
+      gZenWorkspaces.updateTabsContainers();
      this.browserWrapper.removeAttribute('animate-full');
      this.overlay.classList.remove('zen-glance-overlay');
      this._clearContainerStyles(this.browserWrapper);
--- a/src/zen/media/ZenMediaController.mjs
+++ b/src/zen/media/ZenMediaController.mjs
@@ -604,7 +604,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);
      }
    }

--- a/src/zen/tabs/ZenPinnedTabManager.mjs
+++ b/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;
@@ -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;
      }

@@ -669,7 +673,7 @@
          : [TabContextMenu.contextTab];
      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) {
          continue;
        }
@@ -700,7 +704,7 @@
        }
        tab.setAttribute('zenDefaultUserContextId', true);
        if (tab.selected) {
-          ZenWorkspaces.switchTabIfNeeded(tab);
+          gZenWorkspaces.switchTabIfNeeded(tab);
        }
        this._onTabMove(tab);
        this.onTabIconChanged(tab);
@@ -723,13 +727,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);
@@ -809,7 +813,7 @@
    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');
@@ -947,7 +951,7 @@
      }
      this.dragIndicator.remove();
      this._dragIndicator = null;
-      ZenWorkspaces.activeWorkspaceIndicator?.removeAttribute('open');
+      gZenWorkspaces.activeWorkspaceIndicator?.removeAttribute('open');
    }

    get dragIndicator() {
@@ -1010,9 +1014,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
--- a/src/zen/tabs/ZenTabUnloader.mjs
+++ b/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)) {
--- a/src/zen/tabs/zen-tabs/vertical-tabs.css
+++ b/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 */
  }
@@ -452,40 +456,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 */
@@ -567,16 +542,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 +552,7 @@
  }

  /* Set min height for tabs in the essentials wrapper */
-  & #zen-essentials-wrapper {
+  & #zen-essentials {
    --tab-min-height: 44px;
  }

@@ -771,7 +736,7 @@
    min-width: unset !important;
  }

-  & #zen-essentials-wrapper {
+  & #zen-essentials {
    margin-left: unset !important;
  }

@@ -831,15 +796,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 +1225,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 +1265,23 @@
  padding: 0 var(--zen-toolbox-padding);
  display: grid;

+  position: absolute;
+
  &[hidden='true'] {
    --hidden-essentials-width: var(--zen-sidebar-width);
    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,9 +1457,6 @@
   ========================================================================== */

 .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 */
@@ -1498,13 +1466,6 @@
    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 */
-  }
 }

 /* ==========================================================================
--- a/src/zen/tests/container_essentials/browser.toml
+++ b/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"]
--- a/src/zen/tests/container_essentials/browser_container_auto_switch.js
+++ b/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 ZenWorkspaces.createAndSaveWorkspace('Container Profile 1', undefined, false, 1);
+  const workspaces = await ZenWorkspaces._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 = ZenWorkspaces.activeWorkspace;
+  Assert.equal(
+    ZenWorkspaces.activeWorkspace,
+    workspaces.workspaces[1].uuid,
+    'The new workspace should be active.'
+  );
+
+  // Change to the original workspace, there should be no essential tabs
+  await ZenWorkspaces.changeWorkspace(workspaces.workspaces[0]);
+  await ZenWorkspaces.removeWorkspace(newWorkspaceUUID);
+});
--- a/src/zen/tests/container_essentials/browser_container_specific_essentials.js
+++ b/src/zen/tests/container_essentials/browser_container_specific_essentials.js
@@ -8,6 +8,7 @@ add_task(async function test_Check_Creation() {
  const workspaces = await ZenWorkspaces._workspaces();
  ok(workspaces.workspaces.length === 2, 'Two workspaces should exist.');

+  await ZenWorkspaces.changeWorkspace(workspaces.workspaces[1]);
  let newTab = BrowserTestUtils.addTab(gBrowser, 'about:blank', {
    skipAnimation: true,
    userContextId: 1,
--- a/src/zen/tests/pinned/browser.toml
+++ b/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"]
--- a/src/zen/tests/pinned/browser_pinned_to_essential.js
+++ b/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') == '1',
+        'New tab should be marked as essential.'
+      );
+
+      resolvePromise();
+    },
+    { once: true }
+  );
+  gBrowser.pinTab(newTab);
+
+  await promise;
+  await BrowserTestUtils.removeTab(newTab);
+});
--- a/src/zen/welcome/ZenWelcome.mjs
+++ b/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();
--- a/src/zen/workspaces/ZenGradientGenerator.mjs
+++ b/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);
--- a/src/zen/workspaces/ZenWorkspace.mjs
+++ b/src/zen/workspaces/ZenWorkspace.mjs
@@ -0,0 +1,69 @@
+{
+  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">
+          <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');
+
+      // 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);
+}
--- a/src/zen/workspaces/ZenWorkspaceIcons.mjs
+++ b/src/zen/workspaces/ZenWorkspaceIcons.mjs
@@ -0,0 +1,82 @@
+{
+  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);
+      }
+    }
+
+    on_ZenWorkspacesUIUpdate(event) {
+      this.#updateIcons();
+      this.activeIndex = event.detail.activeIndex;
+    }
+
+    set activeIndex(uuid) {
+      const buttons = this.querySelectorAll('toolbarbutton');
+      for (const button of buttons) {
+        if (button.getAttribute('zen-workspace-id') == uuid) {
+          button.setAttribute('active', 'true');
+        } else {
+          button.removeAttribute('active');
+        }
+      }
+    }
+
+    get activeIndex() {
+      const buttons = this.querySelectorAll('toolbarbutton');
+      for (const button of buttons) {
+        if (button.hasAttribute('active')) {
+          return button.getAttribute('zen-workspace-id');
+        }
+      }
+      return null;
+    }
+  }
+
+  customElements.define('zen-workspace-icons', ZenWorkspaceIcons);
+}
--- a/src/zen/workspaces/ZenWorkspaces.mjs
+++ b/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,16 +333,18 @@ 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 tabboxChildren() {
@@ -356,31 +355,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 +415,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 +425,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 +465,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.nextSibling.before(tab);
      } else {
        if (!firstNormalTab) {
          firstNormalTab = tab;
@@ -639,9 +627,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
  _handleSwipeStart(event) {
    if (!this.workspaceEnabled) return;

-    gZenUIManager.tabsWrapper.style.scrollbarWidth = 'none';
-    gZenUIManager.tabsWrapper.scrollTop = 0;
-
    event.preventDefault();
    event.stopPropagation();
    this._swipeState = {
@@ -809,7 +794,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
  }

  async initializeWorkspaces() {
-    await this.initializeWorkspacesButton();
    if (this.workspaceEnabled) {
      this._initializeWorkspaceCreationIcons();
      this._initializeWorkspaceTabContextMenus();
@@ -831,7 +815,7 @@ 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();
@@ -1382,9 +1366,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 +1385,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 +1415,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
            } else {
              event.preventDefault();
            }
-          }.bind(browser.ZenWorkspaces)
+          }.bind(browser.gZenWorkspaces)
        );

        element.addEventListener(
@@ -1449,7 +1434,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
                }
              }
            }
-          }.bind(browser.ZenWorkspaces)
+          }.bind(browser.gZenWorkspaces)
        );

        element.addEventListener('dragenter', function (event) {
@@ -1478,7 +1463,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
                this.draggedElement = null;
              }
            }
-          }.bind(browser.ZenWorkspaces)
+          }.bind(browser.gZenWorkspaces)
        );

        element.addEventListener(
@@ -1492,7 +1477,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 +1497,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 +1513,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 +1529,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 +1549,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
                element.classList.add('dragover');
              }
            }
-          }.bind(browser.ZenWorkspaces)
+          }.bind(browser.gZenWorkspaces)
        );

        element.addEventListener(
@@ -1574,14 +1558,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 +1583,24 @@ 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();
+      browser.dispatchEvent(
+        new CustomEvent('ZenWorkspacesUIUpdate', {
+          bubbles: true,
+          detail: { workspaces, activeIndex: browser.gZenWorkspaces.activeWorkspace },
+        })
+      );
+      await browser.gZenWorkspaces.workspaceBookmarks();
      workspaceList.innerHTML = '';
      workspaceList.parentNode.style.display = 'flex';
      if (workspaces.workspaces.length <= 0) {
@@ -1628,8 +1618,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 +1691,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 +1703,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 +1746,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 +1849,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 +1887,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 +1945,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 +1970,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
          }
        );
      } else {
-        arrowscrollbox.style.marginTop = arrowMarginTop + 'px';
+        workspaceElement.style.paddingTop = essentialsHeight + 'px';
      }
    }
  }
@@ -2083,31 +1983,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 +2043,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 +2084,23 @@ 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;
        animations.push(
          gZenUIManager.motion.animate(
            element,
            {
              transform: existingTransform ? [existingTransform, newTransform] : newTransform,
-              marginTop: existingTransform ? [marginTop, marginTop] : marginTop,
            },
            {
              type: 'spring',
@@ -2395,7 +2262,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);
@@ -2543,6 +2410,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
    });
    await this._organizeWorkspaceStripLocations(workspace, true);
    gZenUIManager.tabsWrapper.style.scrollbarWidth = '';
+    this.workspaceIcons.activeIndex = workspace.uuid;

    // Notify listeners
    if (this._changeListeners?.length) {
@@ -2627,10 +2495,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;
  }
@@ -2711,7 +2576,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
    for (const entry of entries) {
      const originalWorkspaceId = entry.target.getAttribute('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 +2588,9 @@ 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);
+        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 +2607,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 +2710,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 +2996,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 +3044,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 +3192,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;
--- a/src/zen/workspaces/ZenWorkspacesStorage.mjs
+++ b/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();
      }
    );
  },
--- a/src/zen/workspaces/zen-workspaces.css
+++ b/src/zen/workspaces/zen-workspaces.css
@@ -4,6 +4,7 @@
 * 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;
@@ -61,7 +62,7 @@
    }
  }

-  &[overflow] {
+  &[icons-overflow] {
    gap: 0 !important;

    & toolbarbutton {
@@ -454,16 +455,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 +504,32 @@
  }
 }

-#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;
+
+  & > arrowscrollbox {
+    max-height: 100%;
+    overflow: hidden;
+
+    &::part(scrollbutton-up),
+    &::part(scrollbutton-down) {
+      display: none;
+    }
+
+    &::part(scrollbox) {
+      scrollbar-width: thin;
+      scrollbar-color: var(--vertical-tabs-scrollbar-color);
+      overflow-y: auto;
+    }
+  }
+}
+
+/** Customiable UI, this is an auto generated ID */
+#wrapper-zen-workspaces-button {
+  width: 100%;
 }