feat: Added fully containerized essentials, b=(no-bug), c=tabs, vendor, workspaces

2025-10-16 06:46:12 +00:00 · 2025-04-20 15:26:28 +02:00
parent 2fcf6c80e9
commit 87bb2f38db
12 changed files with 216 additions and 620 deletions
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -208,7 +208,7 @@ pref('zen.workspaces.wrap-around-navigation', true);
 pref('zen.workspaces.natural-scroll', false);
 pref('zen.workspaces.scroll-modifier-key','ctrl'); // can be ctrl, alt, shift, or a meta key
 pref('services.sync.engine.workspaces', false);
-pref('zen.workspaces.container-specific-essentials-enabled', false);
+pref('zen.workspaces.container-specific-essentials-enabled', true);

 // Essentials
 pref('zen.essentials.enabled', 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..3ce6fea52f8170f6cd821a66684248b4c0a765c6 100644
+index 00c8976d3e258c0875d7da2f3ec823d8907a84c9..b5735712aaa7c2ae2baa4b858e735413b130ca94 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
@@ -2,7 +2,7 @@
@@ -26,7 +26,7 @@ index 00c8976d3e258c0875d7da2f3ec823d8907a84c9..3ce6fea52f8170f6cd821a66684248b4
               tooltip="tabbrowser-tab-tooltip"
               orient="horizontal"
               stopwatchid="tabClick">
-+<html:div id="zen-essentials-container" skipintoolbarset="true"></html:div>
+<html:div id="zen-essentials-wrapper" skipintoolbarset="true"></html:div>
 +<hbox id="zen-current-workspace-indicator-container"></hbox>
 +<html:div id="zen-tabs-wrapper">
 +<html:div id="zen-browser-tabs-container">
--- a/src/browser/base/content/zen-assets.jar.inc.mn
+++ b/src/browser/base/content/zen-assets.jar.inc.mn
@@ -53,7 +53,6 @@
        content/browser/zen-components/ZenPinnedTabManager.mjs                  (../../zen/tabs/ZenPinnedTabManager.mjs)
        content/browser/zen-styles/zen-tabs.css                                 (../../zen/tabs/zen-tabs.css)
 *       content/browser/zen-styles/zen-tabs/vertical-tabs.css                   (../../zen/tabs/zen-tabs/vertical-tabs.css)
-        content/browser/zen-styles/zen-tabs/horizontal-tabs.css                 (../../zen/tabs/zen-tabs/horizontal-tabs.css)

        content/browser/zen-components/ZenGlanceManager.mjs                     (../../zen/glance/ZenGlanceManager.mjs)
        content/browser/zen-styles/zen-glance.css                               (../../zen/glance/zen-glance.css)
--- a/src/browser/components/tabbrowser/content/tabbrowser-js.patch
+++ b/src/browser/components/tabbrowser/content/tabbrowser-js.patch
@@ -1,24 +1,11 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b930f411c 100644
+index bfba253af3253a8cf547a5d69a1695651fc5c203..d4c7c37e06dc74cf0de3a10e6682f26ada76767d 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
-@@ -415,11 +415,71 @@
+@@ -415,11 +415,58 @@
       return this.tabContainer.visibleTabs;
     }
 
-+    get _numVisiblePinTabs() {
-+      let i = 0;
-+      for (let tab of this.tabs) {
-+        if (!tab.pinned && !tab.hasAttribute("zen-glance-tab")) {
-+          break;
-+        }
-+        if (!tab.hidden) {
-+          i += !tab.hasAttribute("zen-glance-tab");
-+        }
-+      }
-+      return i;
-+    }
-+
 +    zenInsertTabAtIndex(...args) {
 +      return this.#insertTabAtElementIndex(...args);
 +    }
@@ -76,7 +63,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       }
       return i;
     }
-@@ -549,6 +609,7 @@
+@@ -549,6 +596,7 @@
       this.tabpanels.appendChild(panel);
 
       let tab = this.tabs[0];
@@ -84,7 +71,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       tab.linkedPanel = uniqueId;
       this._selectedTab = tab;
       this._selectedBrowser = browser;
-@@ -814,11 +875,13 @@
+@@ -814,11 +862,13 @@
       }
 
       this.showTab(aTab);
@@ -94,14 +81,14 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
 +      if (this.tabContainer.verticalMode && !handled) {
         this.#handleTabMove(aTab, () =>
 -          this.verticalPinnedTabsContainer.appendChild(aTab)
-+          aTab.hasAttribute("zen-essential") ? document.getElementById("zen-essentials-container").appendChild(aTab) : this.verticalPinnedTabsContainer.insertBefore(aTab, this.verticalPinnedTabsContainer.lastChild)
+          aTab.hasAttribute("zen-essential") ? ZenWorkspaces.getEssentialsSection(aTab).appendChild(aTab) : this.verticalPinnedTabsContainer.insertBefore(aTab, this.verticalPinnedTabsContainer.lastChild)
         );
 -      } else {
 +      } else if (!handled) {
         this.moveTabTo(aTab, {
           tabIndex: this.pinnedTabCount,
           forceUngrouped: true,
-@@ -835,12 +898,15 @@
+@@ -835,12 +885,15 @@
       }
 
       if (this.tabContainer.verticalMode) {
@@ -118,7 +105,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
         });
       } else {
         this.moveTabTo(aTab, {
-@@ -1024,6 +1090,8 @@
+@@ -1024,6 +1077,8 @@
 
       let LOCAL_PROTOCOLS = ["chrome:", "about:", "resource:", "data:"];
 
@@ -127,7 +114,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       if (
         aIconURL &&
         !aLoadingPrincipal &&
-@@ -1034,6 +1102,9 @@
+@@ -1034,6 +1089,9 @@
         );
         return;
       }
@@ -137,7 +124,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
 
       let browser = this.getBrowserForTab(aTab);
       browser.mIconURL = aIconURL;
-@@ -1283,6 +1354,7 @@
+@@ -1283,6 +1341,7 @@
       if (!this._previewMode) {
         newTab.recordTimeFromUnloadToReload();
         newTab.updateLastAccessed();
@@ -145,7 +132,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
         oldTab.updateLastAccessed();
         // if this is the foreground window, update the last-seen timestamps.
         if (this.ownerGlobal == BrowserWindowTracker.getTopWindow()) {
-@@ -1435,6 +1507,9 @@
+@@ -1435,6 +1494,9 @@
       }
 
       let activeEl = document.activeElement;
@@ -155,7 +142,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       // If focus is on the old tab, move it to the new tab.
       if (activeEl == oldTab) {
         newTab.focus();
-@@ -1758,7 +1833,8 @@
+@@ -1758,7 +1820,8 @@
     }
 
     _setTabLabel(aTab, aLabel, { beforeTabOpen, isContentTitle, isURL } = {}) {
@@ -165,7 +152,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
         return false;
       }
 
-@@ -1866,7 +1942,7 @@
+@@ -1866,7 +1929,7 @@
         newIndex = this.selectedTab._tPos + 1;
       }
 
@@ -174,7 +161,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
         if (this.isTabGroupLabel(targetTab)) {
           throw new Error(
             "Replacing a tab group label with a tab is not supported"
-@@ -2130,6 +2206,7 @@
+@@ -2130,6 +2193,7 @@
       uriIsAboutBlank,
       userContextId,
       skipLoad,
@@ -182,7 +169,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
     } = {}) {
       let b = document.createXULElement("browser");
       // Use the JSM global to create the permanentKey, so that if the
-@@ -2203,8 +2280,7 @@
+@@ -2203,8 +2267,7 @@
         // we use a different attribute name for this?
         b.setAttribute("name", name);
       }
@@ -192,7 +179,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
         b.setAttribute("transparent", "true");
       }
 
-@@ -2369,7 +2445,7 @@
+@@ -2369,7 +2432,7 @@
 
       let panel = this.getPanel(browser);
       let uniqueId = this._generateUniquePanelID();
@@ -201,7 +188,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       aTab.linkedPanel = uniqueId;
 
       // Inject the <browser> into the DOM if necessary.
-@@ -2428,8 +2504,8 @@
+@@ -2428,8 +2491,8 @@
       // If we transitioned from one browser to two browsers, we need to set
       // hasSiblings=false on both the existing browser and the new browser.
       if (this.tabs.length == 2) {
@@ -212,7 +199,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       } else {
         aTab.linkedBrowser.browsingContext.hasSiblings = this.tabs.length > 1;
       }
-@@ -2657,6 +2733,7 @@
+@@ -2657,6 +2720,7 @@
         schemelessInput,
         hasValidUserGestureActivation = false,
         textDirectiveUserActivation = false,
@@ -220,7 +207,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       } = {}
     ) {
       // all callers of addTab that pass a params object need to pass
-@@ -2667,6 +2744,12 @@
+@@ -2667,6 +2731,12 @@
         );
       }
 
@@ -233,7 +220,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       if (!UserInteraction.running("browser.tabs.opening", window)) {
         UserInteraction.start("browser.tabs.opening", "initting", window);
       }
-@@ -2730,6 +2813,16 @@
+@@ -2730,6 +2800,16 @@
           noInitialLabel,
           skipBackgroundNotify,
         });
@@ -250,7 +237,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
         if (insertTab) {
           if (typeof index == "number") {
             elementIndex = this.#tabIndexToElementIndex(index);
-@@ -2756,6 +2849,7 @@
+@@ -2756,6 +2836,7 @@
           initialBrowsingContextGroupId,
           openWindowInfo,
           skipLoad,
@@ -258,7 +245,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
         }));
 
         if (focusUrlBar) {
-@@ -2875,6 +2969,9 @@
+@@ -2875,6 +2956,9 @@
         }
       }
 
@@ -268,7 +255,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       // Additionally send pinned tab events
       if (pinned) {
         this._notifyPinnedStatus(t);
-@@ -2922,12 +3019,15 @@
+@@ -2922,12 +3006,15 @@
      * @param {string} [label=]
      * @returns {MozTabbrowserTabGroup}
      */
@@ -285,7 +272,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       return group;
     }
 
-@@ -2970,6 +3070,7 @@
+@@ -2970,6 +3057,7 @@
         insertBefore = null,
         isUserTriggered = false,
         telemetryUserCreateSource = "unknown",
@@ -293,7 +280,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       } = {}
     ) {
       if (!tabs?.length) {
-@@ -2988,7 +3089,12 @@
+@@ -2988,7 +3076,12 @@
         id = `${Date.now()}-${Math.round(Math.random() * 100)}`;
       }
       let group = this._createTabGroup(id, color, false, label);
@@ -307,7 +294,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
         group,
         insertBefore?.group ?? insertBefore
       );
-@@ -3318,6 +3424,7 @@
+@@ -3318,6 +3411,7 @@
         initialBrowsingContextGroupId,
         openWindowInfo,
         skipLoad,
@@ -315,7 +302,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       }
     ) {
       // If we don't have a preferred remote type, and we have a remote
-@@ -3381,6 +3488,7 @@
+@@ -3381,6 +3475,7 @@
           openWindowInfo,
           name,
           skipLoad,
@@ -323,7 +310,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
         });
       }
 
-@@ -3559,6 +3667,27 @@
+@@ -3559,6 +3654,27 @@
         ) {
           tabWasReused = true;
           tab = this.selectedTab;
@@ -351,7 +338,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
           if (!tabData.pinned) {
             this.unpinTab(tab);
           } else {
-@@ -3607,8 +3736,28 @@
+@@ -3607,8 +3723,28 @@
             skipLoad: true,
             preferredRemoteType,
           });
@@ -382,18 +369,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
             tabToSelect = tab;
           }
         }
-@@ -3620,8 +3769,8 @@
-           // inserted in the DOM. If the tab is not yet in the DOM,
-           // just insert it in the right place from the start.
-           if (!tab.parentNode) {
-            tab._tPos = this.pinnedTabCount;
-            this.tabContainer.insertBefore(tab, this.tabs[this.pinnedTabCount]);
-+            tab._tPos = this._numVisiblePinTabs;
-+            this.tabContainer.insertBefore(tab, this.tabs[this._numVisiblePinTabs]);
-             tab.toggleAttribute("pinned", true);
-             this.tabContainer._invalidateCachedTabs();
-             // Then ensure all the tab open/pinning information is sent.
-@@ -3631,7 +3780,8 @@
+@@ -3631,7 +3767,8 @@
             // needs calling:
             shouldUpdateForPinnedTabs = true;
           }
@@ -403,7 +379,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
           let { groupId } = tabData;
           const tabGroup = tabGroupWorkingData.get(groupId);
           // if a tab refers to a tab group we don't know, skip any group
-@@ -3645,7 +3795,10 @@
+@@ -3645,7 +3782,10 @@
                 tabGroup.stateData.id,
                 tabGroup.stateData.color,
                 tabGroup.stateData.collapsed,
@@ -415,17 +391,18 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
               );
               tabsFragment.appendChild(tabGroup.node);
             }
-@@ -3696,6 +3849,9 @@
+@@ -3696,6 +3836,10 @@
         this.selectedTab = tabToSelect;
         this.removeTab(leftoverTab);
       }
 +      else {
 +        this.selectedTab._possiblyEmpty = this.selectedTab.isEmpty; // Not needed, but just in case.
+        gBrowser.removeTab(this.selectedTab);
 +      }
 
       if (tabs.length > 1 || !tabs[0].selected) {
         this._updateTabsAfterInsert();
-@@ -3882,7 +4038,7 @@
+@@ -3882,7 +4026,7 @@
       // Ensure we have an index if one was not provided.
       if (typeof index != "number") {
         // Move the new tab after another tab if needed, to the end otherwise.
@@ -434,7 +411,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
         if (
           !bulkOrderedOpen &&
           ((openerTab &&
-@@ -3928,18 +4084,18 @@
+@@ -3928,18 +4072,18 @@
 
       // Ensure index is within bounds.
       if (tab.pinned) {
@@ -457,7 +434,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
         if (this.isTab(itemAfter) && itemAfter.group == tabGroup) {
           // Place at the front of, or between tabs in, the same tab group
           this.tabContainer.insertBefore(tab, itemAfter);
-@@ -4260,6 +4416,9 @@
+@@ -4260,6 +4404,9 @@
         return;
       }
 
@@ -467,7 +444,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       this.removeTabs(selectedTabs, { telemetrySource });
     }
 
-@@ -4512,6 +4671,7 @@
+@@ -4512,6 +4659,7 @@
         telemetrySource,
       } = {}
     ) {
@@ -475,7 +452,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       // When 'closeWindowWithLastTab' pref is enabled, closing all tabs
       // can be considered equivalent to closing the window.
       if (
-@@ -4596,6 +4756,7 @@
+@@ -4596,6 +4744,7 @@
         if (lastToClose) {
           this.removeTab(lastToClose, aParams);
         }
@@ -483,7 +460,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       } catch (e) {
         console.error(e);
       }
-@@ -4620,6 +4781,7 @@
+@@ -4620,6 +4769,7 @@
         telemetrySource,
       } = {}
     ) {
@@ -491,7 +468,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       if (UserInteraction.running("browser.tabs.opening", window)) {
         UserInteraction.finish("browser.tabs.opening", window);
       }
-@@ -4633,6 +4795,12 @@
+@@ -4633,6 +4783,12 @@
         aTab._closeTimeNoAnimTimerId = Glean.browserTabclose.timeNoAnim.start();
       }
 
@@ -504,7 +481,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       // Handle requests for synchronously removing an already
       // asynchronously closing tab.
       if (!animate && aTab.closing) {
-@@ -4647,7 +4815,9 @@
+@@ -4647,7 +4803,9 @@
       // frame created for it (for example, by updating the visually selected
       // state).
       let tabWidth = window.windowUtils.getBoundsWithoutFlushing(aTab).width;
@@ -515,7 +492,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       if (
         !this._beginRemoveTab(aTab, {
           closeWindowFastpath: true,
-@@ -4810,7 +4980,7 @@
+@@ -4810,7 +4968,7 @@
           closeWindowWithLastTab != null
             ? closeWindowWithLastTab
             : !window.toolbar.visible ||
@@ -524,7 +501,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
 
         if (closeWindow) {
           // We've already called beforeunload on all the relevant tabs if we get here,
-@@ -4834,6 +5004,7 @@
+@@ -4834,6 +4992,7 @@
 
         newTab = true;
       }
@@ -532,7 +509,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       aTab._endRemoveArgs = [closeWindow, newTab];
 
       // swapBrowsersAndCloseOther will take care of closing the window without animation.
-@@ -4873,9 +5044,7 @@
+@@ -4873,9 +5032,7 @@
       aTab._mouseleave();
 
       if (newTab) {
@@ -543,7 +520,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       } else {
         TabBarVisibility.update();
       }
-@@ -5004,6 +5173,8 @@
+@@ -5004,6 +5161,8 @@
         this.tabs[i]._tPos = i;
       }
 
@@ -552,7 +529,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       if (!this._windowIsClosing) {
         if (wasPinned) {
           this.tabContainer._positionPinnedTabs();
-@@ -5129,8 +5300,8 @@
+@@ -5129,8 +5288,8 @@
       return closedCount;
     }
 
@@ -563,7 +540,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       if (unloadBlocked) {
         return;
       }
-@@ -5230,13 +5401,13 @@
+@@ -5230,13 +5389,13 @@
         !excludeTabs.has(aTab.owner) &&
         Services.prefs.getBoolPref("browser.tabs.selectOwnerOnClose")
       ) {
@@ -579,7 +556,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       );
 
       let tab = this.tabContainer.findNextTab(aTab, {
-@@ -5252,7 +5423,7 @@
+@@ -5252,7 +5411,7 @@
       }
 
       if (tab) {
@@ -588,7 +565,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       }
 
       // If no qualifying visible tab was found, see if there is a tab in
-@@ -5273,7 +5444,7 @@
+@@ -5273,7 +5432,7 @@
         });
       }
 
@@ -597,7 +574,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
     }
 
     _blurTab(aTab) {
-@@ -5674,10 +5845,10 @@
+@@ -5674,10 +5833,10 @@
       SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
     }
 
@@ -610,22 +587,22 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
         aTab.selected ||
         aTab.closing ||
         // Tabs that are sharing the screen, microphone or camera cannot be hidden.
-@@ -5971,7 +6142,7 @@
+@@ -5971,7 +6130,7 @@
 
       // Don't allow mixing pinned and unpinned tabs.
       if (this.isTab(element) && element.pinned) {
 -        tabIndex = Math.min(tabIndex, this.pinnedTabCount - 1);
-+        tabIndex = aTab.hasAttribute('zen-essential') ? Math.min(tabIndex, this._numZenEssentials - 1) : Math.min(tabIndex, this.pinnedTabCount - 1);
+        tabIndex = element.hasAttribute('zen-essential') ? Math.min(tabIndex, this._numZenEssentials - 1) : Math.min(tabIndex, this.pinnedTabCount - 1);
       } else {
         tabIndex = Math.max(tabIndex, this.pinnedTabCount);
       }
-@@ -5998,9 +6169,16 @@
+@@ -5998,9 +6157,16 @@
         element,
         () => {
           let neighbor = this.tabs[tabIndex];
 -          if (forceUngrouped && neighbor.group) {
 +          const _tPos = element._tPos;
-+          if ((forceStandaloneTab && neighbor.group) || neighbor.group?.hasAttribute("split-view-group")) {
+          if ((forceUngrouped && neighbor?.group) || neighbor?.group?.hasAttribute("split-view-group")) {
             neighbor = neighbor.group;
           }
 +          if (element.group?.hasAttribute("split-view-group")) {
@@ -637,7 +614,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
           if (neighbor && this.isTab(element) && tabIndex > element._tPos) {
             neighbor.after(element);
           } else {
-@@ -6069,7 +6247,9 @@
+@@ -6069,7 +6235,9 @@
           targetElement = targetElement.group;
         }
       }
@@ -648,7 +625,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       // Don't allow mixing pinned and unpinned tabs.
       if (element.pinned && !targetElement?.pinned) {
         targetElement = this.tabs[this.pinnedTabCount - 1];
-@@ -6079,7 +6259,13 @@
+@@ -6079,7 +6247,13 @@
         moveBefore = true;
       }
 
@@ -657,12 +634,12 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
 +      }
       let getContainer = () => {
 +        if (element.hasAttribute("zen-essential")) {
-+          return document.getElementById("zen-essentials-container");
+          return ZenWorkspaces.getEssentialsSection(element);
 +        }
         if (element.pinned && this.tabContainer.verticalMode) {
           return this.tabContainer.verticalPinnedTabsContainer;
         }
-@@ -6139,7 +6325,7 @@
+@@ -6139,7 +6313,7 @@
       if (!this.isTab(aTab)) {
         throw new Error("Can only move a tab into a tab group");
       }
@@ -671,7 +648,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
         return;
       }
       if (aTab.group && aTab.group.id === aGroup.id) {
-@@ -6233,6 +6419,10 @@
+@@ -6233,6 +6407,10 @@
 
       moveActionCallback();
 
@@ -682,16 +659,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
       // Clear tabs cache after moving nodes because the order of tabs may have
       // changed.
       this.tabContainer._invalidateCachedTabs();
-@@ -6290,7 +6480,7 @@
-         createLazyBrowser,
-       };
- 
-      let numPinned = this.pinnedTabCount;
-+      let numPinned = this._numVisiblePinTabs;
-       if (
-         elementIndex < numPinned ||
-         (aTab.pinned && elementIndex == numPinned)
-@@ -7050,7 +7240,7 @@
+@@ -7050,7 +7228,7 @@
             // preventDefault(). It will still raise the window if appropriate.
             break;
           }
@@ -700,7 +668,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
           window.focus();
           aEvent.preventDefault();
           break;
-@@ -7951,6 +8141,7 @@
+@@ -7951,6 +8129,7 @@
             aWebProgress.isTopLevel
           ) {
             this.mTab.setAttribute("busy", "true");
@@ -708,7 +676,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
             gBrowser._tabAttrModified(this.mTab, ["busy"]);
             this.mTab._notselectedsinceload = !this.mTab.selected;
           }
-@@ -8924,7 +9115,7 @@ var TabContextMenu = {
+@@ -8924,7 +9103,7 @@ var TabContextMenu = {
     );
     contextUnpinSelectedTabs.hidden =
       !this.contextTab.pinned || !this.multiselected;
@@ -717,16 +685,7 @@ index bfba253af3253a8cf547a5d69a1695651fc5c203..24cedfa868878d1619c9d9d04a060a0b
     // Move Tab items
     let contextMoveTabOptions = document.getElementById(
       "context_moveTabOptions"
-@@ -8958,7 +9149,7 @@ var TabContextMenu = {
-     let isFirstTab =
-       !this.contextTabs[0].group &&
-       (this.contextTabs[0] == visibleTabs[0] ||
-        this.contextTabs[0] == visibleTabs[gBrowser.pinnedTabCount]);
-+      this.contextTabs[0] == visibleTabs[gBrowser._numVisiblePinTabs]);
-     contextMoveTabToStart.disabled = isFirstTab && allSelectedTabsAdjacent;
- 
-     document.getElementById("context_openTabInWindow").disabled =
-@@ -9193,6 +9384,7 @@ var TabContextMenu = {
+@@ -9193,6 +9372,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..eee9613b4405a8a301cef3db1ae6a3f9d21d56ac 100644
+index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2dfc167e6 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
@@ -83,7 +83,7 @@
@@ -155,7 +155,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..eee9613b4405a8a301cef3db1ae6a3f9
 
       this.#allTabs = [
 -        ...this.verticalPinnedTabsContainer.children,
-+        ...document.getElementById("zen-essentials-container").children, ...this.verticalPinnedTabsContainer.children,
+        ...ZenWorkspaces.getCurrentEssentialsContainer().children, ...this.verticalPinnedTabsContainer.children,
         ...children,
       ];
 +      const lastPinnedTabIdx = gBrowser.pinnedTabCount;
@@ -210,7 +210,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..eee9613b4405a8a301cef3db1ae6a3f9
 
       let focusableItems = [];
 -      for (let child of children) {
-+      for (let child of [...document.getElementById("zen-essentials-container").children, ...verticalPinnedTabsContainer.children, ...children]) {
+      for (let child of [...ZenWorkspaces.getCurrentEssentialsContainer().children, ...verticalPinnedTabsContainer.children, ...children]) {
         if (isTab(child) && child.visible) {
           child.elementIndex = elementIndex++;
           focusableItems.push(child);
@@ -271,15 +271,6 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..eee9613b4405a8a301cef3db1ae6a3f9
           const newTab2 = this.newTabButton;
           const newTabVertical = document.getElementById(
             "vertical-tabs-newtab-button"
-@@ -1929,7 +1963,7 @@
-           let rect = ele => {
-             return window.windowUtils.getBoundsWithoutFlushing(ele);
-           };
-          let tab = this.visibleTabs[gBrowser.pinnedTabCount];
-+          let tab = this.visibleTabs[gBrowser._numVisiblePinTabs];
-           if (tab && rect(tab).width <= this._tabClipWidth) {
-             this.setAttribute("closebuttons", "activetab");
-           } else {
@@ -1941,10 +1975,12 @@
 
     _handleTabSelect(aInstant) {
@@ -307,12 +298,12 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..eee9613b4405a8a301cef3db1ae6a3f9
 -        let tabs = this.visibleTabs;
 +      if (!ZenWorkspaces._hasInitializedTabsStrip) return;
 +      let count = ZenWorkspaces.makeSurePinTabIsInCorrectPosition();
-+      if (gBrowser.pinnedTabCount !== (verticalTabsContainer.children.length - count - 1 + document.getElementById("zen-essentials-container").children.length)) {
+      if (gBrowser.pinnedTabCount !== (verticalTabsContainer.children.length - count - 1 + ZenWorkspaces.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") ? document.getElementById("zen-essentials-container").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") ? 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);
         }
       }
 
@@ -327,17 +318,15 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..eee9613b4405a8a301cef3db1ae6a3f9
 
       if (!verticalTabsContainer.children.length) {
         return;
-@@ -2117,8 +2150,8 @@
+@@ -2117,7 +2150,7 @@
     }
 
     _positionPinnedTabs() {
 -      let tabs = this.visibleTabs;
-      let numPinned = gBrowser.pinnedTabCount;
 +      let tabs = this.visibleTabs.filter(tab => !tab.hasAttribute("zen-glance-tab"));
-+      let numPinned = gBrowser._numVisiblePinTabs;
+       let numPinned = gBrowser.pinnedTabCount;
       let absPositionHorizontalTabs =
         this.overflowing && tabs.length > numPinned && numPinned > 0;
- 
@@ -2127,7 +2160,7 @@
 
       if (this.verticalMode) {
@@ -374,7 +363,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..eee9613b4405a8a301cef3db1ae6a3f9
 -      let tabs = this.ariaFocusableItems.slice(
 -        isPinned ? 0 : numPinned,
 -        isPinned ? numPinned : undefined
-+      let isPinned = draggedTab?.group.pinned || draggedTab.pinned;
+      let isPinned = draggedTab?.group ? draggedTab.group.pinned : draggedTab.pinned;
 +      let numPinned = gBrowser._numVisiblePinTabsWithoutCollapsed;
 +      let essential = draggedTab.hasAttribute("zen-essential");
 +      let tabs = this.ariaFocusableItems.filter(tab => !tab.hasAttribute("zen-glance-tab")).slice(
--- a/src/zen/tabs/ZenPinnedTabManager.mjs
+++ b/src/zen/tabs/ZenPinnedTabManager.mjs
@@ -294,9 +294,6 @@
          }
          gBrowser.tabContainer._invalidateCachedTabs();
          newTab.initialize();
-          if (!ZenWorkspaces.essentialShouldShowTab(newTab)) {
-            gBrowser.hideTab(newTab, undefined, true);
-          }
        } catch (ex) {
          console.error('Failed to initialize pinned tabs:', ex);
        }
@@ -729,7 +726,7 @@
      try {
        const pinnedTabsTarget =
          event.target.closest('#vertical-pinned-tabs-container') || event.target.closest('.zen-current-workspace-indicator');
-        const essentialTabsTarget = event.target.closest('#zen-essentials-container');
+        const essentialTabsTarget = event.target.closest('.zen-essentials-container');
        const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox');
        // Remove group labels from the moving tabs and replace it
        // with the sub tabs
@@ -803,7 +800,7 @@
              if (tabsTarget === gBrowser.tabs.at(-1)) {
                newIndex++;
              }
-              gBrowser.moveTabTo(draggedTab, newIndex, { forceStandaloneTab: true });
+              gBrowser.moveTabTo(draggedTab, newIndex, { forceUngrouped: true });
            }
          }
        }
@@ -913,7 +910,7 @@

    applyDragoverClass(event, draggedTab) {
      const pinnedTabsTarget = event.target.closest('#vertical-pinned-tabs-container');
-      const essentialTabsTarget = event.target.closest('#zen-essentials-container');
+      const essentialTabsTarget = event.target.closest('.zen-essentials-container');
      const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox');
      let targetTab = event.target.closest('.tabbrowser-tab');
      targetTab = targetTab?.group || targetTab;
--- a/src/zen/tabs/zen-tabs.css
+++ b/src/zen/tabs/zen-tabs.css
@@ -5,7 +5,6 @@
 */
 /* Styles for both vertical and horizontal tabs */
@import url('chrome://browser/content/zen-styles/zen-tabs/vertical-tabs.css');
-@import url('chrome://browser/content/zen-styles/zen-tabs/horizontal-tabs.css');

 #zen-tabbox-wrapper {
  position: relative;
--- a/src/zen/tabs/zen-tabs/horizontal-tabs.css
+++ b/src/zen/tabs/zen-tabs/horizontal-tabs.css
@@ -1,335 +0,0 @@
-/*
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- */
-@media not -moz-pref('zen.tabs.vertical') {
-  :root #browser {
-    display: flex !important;
-    flex-direction: column !important;
-  }
-
-  & #navigator-toolbox {
-    display: flex !important;
-    flex-direction: row !important;
-    max-width: unset !important;
-    min-width: unset !important;
-    width: 100% !important;
-    padding: var(--zen-toolbox-padding) !important;
-  }
-
-  #tabbrowser-tabs {
-    display: -webkit-box !important;
-    -webkit-box-orient: horizontal;
-    -webkit-box-pack: start;
-    max-width: 10000px !important;
-
-    --tabstrip-min-height: calc(var(--tab-min-height) - 4 * var(--tab-block-margin));
-    --tab-min-height: 10px !important;
-  }
-
-  .vertical-pinned-tabs-container-separator {
-    display: none !important;
-  }
-
-  #zen-essentials-container,
-  #vertical-pinned-tabs-container,
-  #tabbrowser-arrowscrollbox {
-    -webkit-box-flex: 1;
-  }
-
-  #vertical-pinned-tabs-container:empty {
-    -webkit-box-flex: 0 !important;
-    width: 0 !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    border: none !important;
-    visibility: collapse !important;
-  }
-  #navigator-toolbox {
-    flex-direction: row !important;
-    align-items: center;
-  }
-
-  #titlebar {
-    flex-direction: row !important;
-    width: 100%;
-    height: 36px !important;
-  }
-
-  #zen-essentials-container {
-    --tab-min-height: 36px !important;
-    display: flex !important;
-    flex-direction: row !important;
-    padding-inline-end: 0 !important;
-  }
-
-  #vertical-pinned-tabs-container {
-    display: flex !important;
-    flex-direction: row !important;
-    padding-inline-end: 0 !important;
-  }
-
-  #zen-essentials-container .tabbrowser-tab {
-    width: 0% !important;
-  }
-
-  #vertical-pinned-tabs-container .tabbrowser-tab {
-    width: 0% !important;
-  }
-
-  .tabbrowser-tab[zen-glance-tab='true'] {
-    .tab-label-container {
-      display: none !important;
-      width: 0px !important;
-      max-width: 0px !important;
-    }
-  }
-
-  #tabbrowser-arrowscrollbox {
-    display: flex !important;
-    max-width: -moz-available;
-    overflow: hidden !important;
-  }
-
-  #TabsToolbar {
-    flex-direction: row !important;
-    gap: 8px;
-    overflow: hidden !important;
-    display: flex !important;
-  }
-
-  #TabsToolbar-customization-target {
-    flex-direction: row !important;
-  }
-
-  #tabbrowser-tabs[orient='vertical'] {
-    flex-direction: row !important;
-  }
-
-  tabs {
-    flex-direction: row !important;
-  }
-
-  #zen-essentials-container {
-    container-name: tab-container;
-    container-type: normal;
-    max-width: 36px !important;
-    flex: 1 1 36px !important;
-  }
-  #vertical-pinned-tabs-container {
-    container-name: tab-container;
-    container-type: normal;
-    max-width: 36px !important;
-    min-width: 36px !important;
-    flex: 1 1 36px !important;
-  }
-
-  #vertical-pinned-tabs-container .tab-close-button {
-    display: none !important;
-  }
-
-  #vertical-pinned-tabs-container .tab-reset-button {
-    display: none !important;
-  }
-
-  #vertical-pinned-tabs-container .tab-label-container {
-    display: none !important;
-  }
-
-  #vertical-pinned-tabs-container .tab-icon-image {
-    margin: 0 !important;
-  }
-
-  .tabbrowser-tab {
-    container-name: tab-container;
-    container-type: normal;
-    min-width: 40px !important;
-    flex: 1 1 150px !important;
-    width: -moz-available;
-
-    &:is(:hover, [visuallyselected]) .tab-close-button {
-      display: block;
-      --tab-inline-padding: 0; /* Avoid weird padding */
-      margin-inline-end: 0 !important;
-    }
-  }
-
-  .tabbrowser-tab[selected] {
-    flex: 2 0 150px !important;
-  }
-
-  @container tab-container (max-width: 80px) {
-    .tab-close-button {
-      margin-right: 0px !important;
-    }
-    .tab-icon-image {
-      padding: 0 !important;
-      margin-left: min(2.5px, 5%) !important;
-      margin-right: min(10px, 5%) !important;
-    }
-    .tab-label-container,
-    .tab-content {
-      margin: 0 !important;
-      padding-left: min(8px, 5%) !important;
-      padding-right: min(8px, 5%) !important;
-    }
-  }
-
-  @container tab-container (max-width: 44px) {
-    .tab-label-container {
-      display: none !important;
-    }
-    .tab-content {
-      justify-content: space-around !important;
-    }
-    .tab-close-button {
-      display: none !important;
-    }
-    .tabbrowser-tab[selected] {
-      & .tab-icon-image,
-      .tab-icon-stack {
-        display: none !important;
-      }
-      & .tab-content {
-        justify-content: space-around !important;
-        padding: 0 !important;
-      }
-      .tab-close-button {
-        display: block !important;
-      }
-    }
-  }
-
-  #vertical-pinned-tabs-container::after {
-    z-index: -1;
-    content: '';
-    position: absolute;
-    right: 0;
-    width: 1px;
-    height: 45%;
-    top: 50%;
-    transform: translateY(-50%);
-    background: hsl(255, 10%, 100%);
-  }
-
-  /* Other UI Elements */
-  .zen-current-workspace-indicator {
-    display: none !important;
-  }
-
-  #zen-sidebar-splitter {
-    display: none !important;
-  }
-
-  #tabbrowser-tabpanels {
-    padding-left: var(--zen-element-separation) !important;
-  }
-
-  #appcontent * {
-    overflow: visible !important;
-  }
-
-  #TabsToolbar-customization-target::after {
-    display: none !important;
-  }
-
-  #zen-sidebar-bottom-buttons {
-    width: auto !important;
-    padding: 0 !important;
-  }
-
-  /* Height Adjustments */
-  #vertical-pinned-tabs-container,
-  #zen-essentials-container,
-  #tabbrowser-arrowscrollbox {
-    max-height: none !important;
-  }
-
-  #PanelUI-zen-gradient-generator {
-    min-width: 390px !important;
-  }
-
-  #zen-essentials-container:not(:empty),
-  #vertical-pinned-tabs-container:not(:empty),
-  #tabbrowser-arrowscrollbox {
-    -webkit-box-flex: 1;
-    min-width: min-content;
-    width: auto !important;
-  }
-
-  #vertical-pinned-tabs-container:not(:empty) {
-    display: -webkit-box !important;
-    -webkit-box-orient: horizontal;
-    min-width: fit-content !important;
-    width: fit-content !important;
-    position: relative;
-    margin-right: -1px !important;
-  }
-
-  #vertical-pinned-tabs-container:not(:empty) .tabbrowser-tab {
-    position: relative;
-    display: -webkit-box !important;
-  }
-
-  #tabbrowser-arrowscrollbox {
-    margin-left: 0 !important;
-  }
-
-  #vertical-pinned-tabs-container:empty,
-  #zen-essentials-container:empty {
-    -webkit-box-flex: 0 !important;
-    width: 0 !important;
-    min-width: 0 !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    border: none !important;
-    visibility: collapse !important;
-  }
-
-  #nav-bar {
-    width: unset !important;
-    min-width: 500px !important;
-  }
-
-  #tabbrowser-arrowscrollbox-periphery {
-    margin: 0 !important;
-  }
-
-  hbox#nav-bar-customization-target toolbarbutton.chromeclass-toolbar-additional:nth-of-type(1) {
-    padding-inline-start: var(--toolbar-start-end-padding) !important;
-  }
-
-  toolbar#PersonalToolbar {
-    padding-left: 6px !important;
-  }
-
-  .tab-context-line {
-    width: 100% !important;
-    height: 3px !important;
-  }
-
-  .tabbrowser-tab[zen-glance-tab='true'] {
-    flex-basis: fit-content !important;
-    max-width: 36px !important;
-  }
-
-  #zen-essentials-container .tabbrowser-tab[zen-glance-tab='true'] {
-    left: 2px;
-  }
-
-  #vertical-pinned-tabs-container .tabbrowser-tab[zen-glance-tab='true'] {
-    position: absolute !important;
-  }
-
-  #TabsToolbar-customization-target toolbarbutton,
-  #TabsToolbar-customization-target toolbarpaletteitem {
-    -webkit-box-flex: 0 !important;
-    min-width: min-content;
-    width: auto !important;
-
-    .toolbarbutton-text {
-      display: none !important;
-    }
-  }
-}
--- a/src/zen/tabs/zen-tabs/vertical-tabs.css
+++ b/src/zen/tabs/zen-tabs/vertical-tabs.css
@@ -497,7 +497,7 @@
    position: relative;
  }

-  & #zen-essentials-container {
+  & #zen-essentials-wrapper {
    --tab-min-height: 44px;
  }

@@ -650,7 +650,7 @@
    opacity: .4;
    align-items: center;
  }
-  & #zen-essentials-container {
+  & .zen-essentials-container {
    justify-content: center;
  }
  & #vertical-tabs-newtab-button {
@@ -1045,24 +1045,32 @@


 /* Mark: Essentials Toolbar */
-#zen-essentials-container {
+#zen-essentials-wrapper {
+  margin-left: calc(-1 * var(--zen-toolbox-padding));
+  min-width: calc(100% + var(--zen-toolbox-padding) * 2);
+}
+
+.zen-essentials-container {
  padding-bottom: var(--zen-toolbox-padding);
  overflow: hidden;
  gap: calc(var(--zen-toolbox-padding) - 2px);
-}
-
-#zen-essentials-container {
-  overflow: hidden;
  transition: max-height 0.3s ease-out;
  opacity: 1;
  grid-template-columns: repeat(auto-fit, minmax(49px, auto));
  overflow: hidden;
  scrollbar-width: thin;
+  min-width: calc(100% + var(--zen-toolbox-padding) * 2);
+  padding: 0 var(--zen-toolbox-padding);
+
+  transform: none !important; /* TODO: Animate essentials transition */
  display: grid;
-  padding: 0;
+  &[hidden='true'] {
+    opacity: 0;
+    pointer-events: none;
+  }
 }

-#zen-essentials-container > .tabbrowser-tab,
+.zen-essentials-container > .tabbrowser-tab,
 #zen-welcome-initial-essentials-browser-sidebar-essentials .tabbrowser-tab {
  --toolbarbutton-inner-padding: 0;
  max-width: unset;
@@ -1240,15 +1248,6 @@
  }
 }

-/* Horizontal tabs reordering indicators */
-#zen-essentials-container .tabbrowser-tab.drag-over-before {
-  box-shadow: 3px 0 6px -2px var(--toolbarbutton-active-background, rgba(0, 255, 0, 0.2));
-}
-
-#zen-essentials-container .tabbrowser-tab.drag-over-after {
-  box-shadow: -3px 0 6px -2px var(--toolbarbutton-active-background, rgba(0, 255, 0, 0.2));
-}
-
 /* Renaming tabs */
 .tab-label-container-editing {
  display: none !important;
@@ -1267,9 +1266,12 @@
 .zen-workspace-tabs-section {
  position: absolute;
  transform: translateX(-100%);
-  min-width: calc(100% - var(--zen-toolbox-padding) * 2);

-  &:not(.zen-current-workspace-indicator) {
+  &:not(.zen-essentials-container) {
+    min-width: calc(100% - var(--zen-toolbox-padding) * 2);
+  }
+
+  &:not(.zen-current-workspace-indicator):not(.zen-essentials-container) {
    margin: 0 var(--zen-toolbox-padding);
  }
 }
--- a/src/zen/vendor/motion.min.mjs
+++ b/src/zen/vendor/motion.min.mjs
--- a/src/zen/workspaces/ZenWorkspaces.mjs
+++ b/src/zen/workspaces/ZenWorkspaces.mjs
@@ -73,12 +73,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
      'zen.workspaces.open-new-tab-if-last-unpinned-tab-is-closed',
      false
    );
-    XPCOMUtils.defineLazyPreferenceGetter(
-      this,
-      'containerSpecificEssentials',
-      'zen.workspaces.container-specific-essentials-enabled',
-      false
-    );
+    this.containerSpecificEssentials = Services.prefs.getBoolPref('zen.workspaces.container-specific-essentials-enabled', false);
    ChromeUtils.defineLazyGetter(this, 'tabContainer', () => document.getElementById('tabbrowser-tabs'));
    this._activeWorkspace = Services.prefs.getStringPref('zen.workspaces.active', '');

@@ -172,6 +167,12 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
      }
      this._pinnedTabsResizeObserver.observe(element);
    }
+    for (let element of document.getElementById('zen-essentials-wrapper').children) {
+      if (element.classList.contains('tabbrowser-tab')) {
+        continue;
+      }
+      this._pinnedTabsResizeObserver.observe(element);
+    }
  }

  get activeWorkspaceStrip() {
@@ -218,7 +219,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
      const defaultSelectedContainer = document.querySelector(
        `#tabbrowser-arrowscrollbox .zen-workspace-tabs-section[zen-workspace-id="${this.activeWorkspace}"]`
      );
-      const essentialsContaienr = document.getElementById('zen-essentials-container');
      // New profile with no workspaces does not have a default selected container
      if (defaultSelectedContainer) {
        const pinnedContainer = document.querySelector(
@@ -226,7 +226,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
        );
        for (const tab of tabs) {
          if (tab.hasAttribute('zen-essential')) {
-            essentialsContaienr.appendChild(tab);
+            this.getEssentialsSection(tab).appendChild(tab);
            continue;
          } else if (tab.pinned) {
            pinnedContainer.insertBefore(tab, pinnedContainer.lastChild);
@@ -244,7 +244,31 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
    this._fixIndicatorsNames(workspaces);
  }

-  _createWorkspaceSection(workspace) {
+  getEssentialsSection(container = 0) {
+    if (typeof container !== 'number') {
+      container = container?.getAttribute('usercontextid');
+    }
+    container ??= 0;
+    if (!this.containerSpecificEssentials) {
+      container = 0;
+    }
+    let essentialsContainer = document.querySelector(`.zen-essentials-container[container="${container}"]`);
+    if (!essentialsContainer) {
+      essentialsContainer = document.createXULElement('vbox');
+      essentialsContainer.className = 'zen-essentials-container zen-workspace-tabs-section';
+      essentialsContainer.setAttribute('flex', '1');
+      essentialsContainer.setAttribute('container', container);
+      document.getElementById('zen-essentials-wrapper').appendChild(essentialsContainer);
+    }
+    return essentialsContainer;
+  }
+
+  getCurrentEssentialsContainer() {
+    const currentWorkspace = this.activeWorkspace;
+    return this.getEssentialsSection(currentWorkspace?.containerTabId);
+  }
+
+  #createWorkspaceSection(workspace) {
    const section = document.createXULElement('vbox');
    section.className = 'zen-workspace-tabs-section';
    section.setAttribute('flex', '1');
@@ -254,11 +278,11 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {

  async _createWorkspaceTabsSection(workspace, tabs, perifery) {
    const container = gBrowser.tabContainer.arrowScrollbox;
-    const section = this._createWorkspaceSection(workspace);
+    const section = this.#createWorkspaceSection(workspace);
    container.appendChild(section);

    const pinnedContainer = document.getElementById('vertical-pinned-tabs-container');
-    const pinnedSection = this._createWorkspaceSection(workspace);
+    const pinnedSection = this.#createWorkspaceSection(workspace);
    this._organizeTabsToWorkspaceSections(workspace, section, pinnedSection, tabs);
    section.appendChild(perifery.cloneNode(true));
    pinnedSection.appendChild(
@@ -268,7 +292,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
    );
    pinnedContainer.appendChild(pinnedSection);

-    const workspaceIndicator = this._createWorkspaceSection(workspace);
+    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);
@@ -629,7 +653,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
    if (this._initialTab) {
      this.moveTabToWorkspace(this._initialTab, this.activeWorkspace);
      gBrowser.selectedTab = this._initialTab;
-      gBrowser.moveTabTo(this._initialTab, 0, { forceStandaloneTab: true });
+      gBrowser.moveTabTo(this._initialTab, 0, { forceUngrouped: true });
      this._initialTab._possiblyEmpty = false;
      this._initialTab = null;
    }
@@ -1591,18 +1615,12 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
      await this._organizeWorkspaceStripLocations(previousWorkspace);
    }

-    // First pass: Handle tab visibility and workspace ID assignment
-    const prevTabUsed = this._processTabVisibility(window.uuid, containerId, workspaces, onInit);
-
    // Second pass: Handle tab selection
    this.tabContainer._invalidateCachedTabs();
    const tabToSelect = await this._handleTabSelection(
      window,
      onInit,
-      containerId,
-      workspaces,
-      previousWorkspace.uuid,
-      prevTabUsed
+      previousWorkspace.uuid
    );

    // Update UI and state
@@ -1632,9 +1650,30 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
    }
  }

-  _updateMarginTopPinnedTabs(arrowscrollbox, pinnedContainer) {
-    if (arrowscrollbox) {
-      arrowscrollbox.style.marginTop = pinnedContainer.getBoundingClientRect().height + 'px';
+  _updateMarginTopPinnedTabs(arrowscrollbox, pinnedContainer, essentialContainer, workspaceIndicator) {
+    if (arrowscrollbox && !pinnedContainer.hasAttribute('hidden')) {
+      const essentialsHeight = essentialContainer.getBoundingClientRect().height;
+      pinnedContainer.style.marginTop = essentialsHeight + 'px';
+      workspaceIndicator.style.marginTop = essentialsHeight + 'px';
+      const arrowMarginTop = pinnedContainer.getBoundingClientRect().height + essentialsHeight + 'px';
+      if (!this._animatingChange) {
+        gZenUIManager.motion.animate(
+          arrowscrollbox,
+          {
+            marginTop: [
+              arrowscrollbox.style.marginTop,
+              arrowMarginTop
+            ]
+          },
+          {
+            type: 'spring',
+            bounce: 0,
+            duration: 0.2,
+          }
+        );
+      } else {
+        arrowscrollbox.style.marginTop = arrowMarginTop;
+      }
    }
  }

@@ -1656,6 +1695,17 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
        }
      }
    }
+    // Hide other essentials with different containerTabId
+    const otherContainersEssentials = document.querySelectorAll(
+      `#zen-essentials-wrapper .zen-workspace-tabs-section`
+    );
+    for (const container of otherContainersEssentials) {
+      if (container.getAttribute('container') != workspace.containerTabId) {
+        container.setAttribute('hidden', 'true');
+      } else {
+        container.removeAttribute('hidden');
+      }
+    }
  }

  updateWorkspaceIndicator(currentWorkspace, workspaceIndicator) {
@@ -1684,11 +1734,15 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
  }

  async _animateTabs(newWorkspace, shouldAnimate, tabToSelect = null) {
+    const kGlobalAnimationDuration = 0.3;
    this._animatingChange = true;
    const animations = [];
    const workspaces = await this._workspaces();
    const newWorkspaceIndex = workspaces.workspaces.findIndex((w) => w.uuid === newWorkspace.uuid);
    for (const element of document.querySelectorAll('.zen-workspace-tabs-section')) {
+      if (element.classList.contains('zen-essentials-container')) {
+        continue;
+      }
      const existingTransform = element.style.transform;
      const elementWorkspaceId = element.getAttribute('zen-workspace-id');
      const elementWorkspaceIndex = workspaces.workspaces.findIndex((w) => w.uuid === elementWorkspaceId);
@@ -1705,7 +1759,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
            {
              type: 'spring',
              bounce: 0,
-              duration: 0.3,
+              duration: kGlobalAnimationDuration,
            }
          )
        );
@@ -1723,97 +1777,12 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
    this._animatingChange = false;
  }

-  _processTabVisibility(workspaceUuid, containerId, workspaces, onInit) {
-    const hiddenTabs = [];
-    const visibleTabs = gBrowser.tabContainer.visibleTabs;
-    for (const tab of gBrowser.tabs) {
-      if (!this._shouldShowTab(tab, workspaceUuid, containerId, workspaces)) {
-        hiddenTabs.push(tab);
-      } else if (tab.hasAttribute('zen-essential')) {
-        gBrowser.showTab(tab, undefined, true);
-      }
-    }
-    // If there's no more visible tabs, make a new tab visible
-    // or if ALL the visible tabs are essentials or we have our selected
-    // tab hidden, select a new tab
-    let prevTabUsed = null;
-    if (
-      (hiddenTabs.length === visibleTabs.length ||
-        visibleTabs.every((tab) => tab.getAttribute('zen-essential') === 'true') ||
-        hiddenTabs.includes(gBrowser.selectedTab)) &&
-      gZenVerticalTabsManager._canReplaceNewTab &&
-      !onInit
-    ) {
-      prevTabUsed = gBrowser.selectedTab;
-      this.selectEmptyTab();
-    }
-    for (const tab of hiddenTabs) {
-      gBrowser.hideTab(tab, undefined, true);
-    }
-    return prevTabUsed;
-  }
-
-  // Only use it in gZenPinnedTabsManager, when initializing essential tabs
-  essentialShouldShowTab(tab) {
-    if (tab.getAttribute('zen-essential') !== 'true') {
-      return true;
-    }
-    const workspaces = this._workspaceCache;
-    if (!workspaces) {
-      return true;
-    }
-    const containerId = (
-      workspaces.workspaces.find((workspace) => workspace.uuid === this.activeWorkspace) || {}
-    )?.containerTabId?.toString();
-    return this._shouldShowTab(tab, this.activeWorkspace, containerId, workspaces);
-  }
-
-  _shouldShowTab(tab, workspaceUuid, containerId, workspaces) {
-    const isEssential = tab.getAttribute('zen-essential') === 'true';
-    const tabWorkspaceId = tab.getAttribute('zen-workspace-id');
-    const tabContextId = tab.getAttribute('usercontextid');
-
-    if (tab.hasAttribute('zen-glance-tab')) {
-      return true; // Always show glance tabs
-    }
-
-    // Handle essential tabs
-    if (isEssential) {
-      if (!this.containerSpecificEssentials) {
-        return true; // Show all essential tabs when containerSpecificEssentials is false
-      }
-
-      if (containerId) {
-        // In workspaces with default container: Show essentials that match the container
-        return tabContextId === containerId;
-      } else {
-        // In workspaces without a default container: Show essentials that aren't in container-specific workspaces
-        // or have usercontextid="0" or no usercontextid
-        return (
-          !tabContextId ||
-          tabContextId === '0' ||
-          !workspaces.workspaces.some((workspace) => workspace.containerTabId === parseInt(tabContextId, 10))
-        );
-      }
-    }
-
-    // For non-essential tabs (both normal and pinned)
-    if (!tabWorkspaceId) {
-      // Assign workspace ID to tabs without one
-      this.moveTabToWorkspace(tab, workspaceUuid);
-      return true;
-    }
-
-    // Show if tab belongs to current workspace
-    return tabWorkspaceId === workspaceUuid;
-  }
-
  _shouldChangeToTab(aTab) {
    return !(aTab?.hasAttribute('zen-essential') || (aTab?.pinned && aTab?.hasAttribute('pending')));
  }

-  async _handleTabSelection(window, onInit, containerId, workspaces, previousWorkspaceId, prevTabUsed) {
-    const currentSelectedTab = prevTabUsed || gBrowser.selectedTab;
+  async _handleTabSelection(window, onInit, previousWorkspaceId) {
+    const currentSelectedTab = gBrowser.selectedTab;
    const oldWorkspaceId = previousWorkspaceId;
    const lastSelectedTab = this._lastSelectedWorkspaceTabs[window.uuid];

@@ -1824,7 +1793,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {

    let tabToSelect = null;
    // Try last selected tab if it is visible
-    if (lastSelectedTab && this._shouldShowTab(lastSelectedTab, window.uuid, containerId, workspaces)) {
+    if (lastSelectedTab) {
      tabToSelect = lastSelectedTab;
    }
    // Find first suitable tab
@@ -1852,12 +1821,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
    // Always make sure we always unselect the tab from the old workspace
    if (currentSelectedTab && currentSelectedTab !== tabToSelect) {
      currentSelectedTab._selected = false;
-      if (
-        !this._shouldShowTab(currentSelectedTab, window.uuid, containerId, workspaces) &&
-        currentSelectedTab.hasAttribute('zen-essential')
-      ) {
-        gBrowser.hideTab(currentSelectedTab, undefined, true);
-      }
    }
    return tabToSelect;
  }
@@ -2007,17 +1970,39 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
    }
  }

-  onPinnedTabsResize(entries) {
+  async onPinnedTabsResize(entries) {
    if (!this._hasInitializedTabsStrip) {
      return;
    }
    for (const entry of entries) {
-      const workspaceId = entry.target.getAttribute('zen-workspace-id');
-      const arrowScrollbox = document.querySelector(
-        `#tabbrowser-arrowscrollbox .zen-workspace-tabs-section[zen-workspace-id="${workspaceId}"]`
-      );
-      this._updateMarginTopPinnedTabs(arrowScrollbox, entry.target);
-      this.updateShouldHideSeparator(arrowScrollbox, entry.target);
+      const originalWorkspaceId = entry.target.getAttribute('zen-workspace-id');
+      const workspacesIds = [];
+      if (entry.target.closest('#zen-essentials-wrapper')) {
+        // Get all workspaces that have the same userContextId
+        const activeWorkspace = await this.getActiveWorkspace();
+        const userContextId = activeWorkspace.containerTabId;
+        const workspaces = this._workspaceCache.workspaces.filter(
+          (w) => w.containerTabId === userContextId && w.uuid !== originalWorkspaceId
+        );
+        workspacesIds.push(...workspaces.map((w) => w.uuid));
+      } else {
+        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 workspaceObject = this._workspaceCache.workspaces.find((w) => w.uuid === workspaceId);
+        const essentialContainer = this.getEssentialsSection(workspaceObject.containerTabId);
+        this._updateMarginTopPinnedTabs(arrowScrollbox, pinnedContainer, essentialContainer, workspaceIndicator);
+        this.updateShouldHideSeparator(arrowScrollbox, pinnedContainer);
+      }
    }
  }

@@ -2096,7 +2081,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
        continue;
      }
      if (tab.getAttribute('zen-essential') === 'true') {
-        const container = document.getElementById('zen-essentials-container');
+        const container = this.getCurrentEssentialsContainer();
        container.appendChild(tab);
        changed = true;
        continue;
@@ -2353,14 +2338,14 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {

    const tabs = [];
    // we need to go through each tab in each container
-    const essentialsContainer = document.getElementById('zen-essentials-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');
    if (!this._hasInitializedTabsStrip) {
      pinnedContainers = [document.getElementById('vertical-pinned-tabs-container')];
      normalContainers = [this.activeWorkspaceStrip];
    }
-    const containers = [essentialsContainer, ...pinnedContainers, ...normalContainers];
+    const containers = [...essentialsContainer, ...pinnedContainers, ...normalContainers];
    for (const container of containers) {
      for (const tab of container.children) {
        if (tab.tagName === 'tab') {
--- a/src/zen/workspaces/ZenWorkspacesStorage.mjs
+++ b/src/zen/workspaces/ZenWorkspacesStorage.mjs
@@ -195,7 +195,7 @@ var ZenWorkspacesStorage = {
      name: row.getResultByName('name'),
      icon: row.getResultByName('icon'),
      default: !!row.getResultByName('is_default'),
-      containerTabId: row.getResultByName('container_id'),
+      containerTabId: row.getResultByName('container_id') ?? 0,
      position: row.getResultByName('position'),
      theme: row.getResultByName('theme_type')
        ? {