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

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);

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">

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)

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 @@
+@@ -3631,7 +3767,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 @@
              // 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 @@
+@@ -7050,7 +7228,7 @@
-         createLazyBrowser,
-       };
- 
--      let numPinned = this.pinnedTabCount;
-+      let numPinned = this._numVisiblePinTabs;
-       if (
-         elementIndex < numPinned ||
-         (aTab.pinned && elementIndex == numPinned)
-@@ -7050,7 +7240,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 = {
+@@ -9193,6 +9372,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 = {
          telemetrySource: gBrowser.TabMetrics.METRIC_SOURCE.TAB_STRIP,
        });
      } else {

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

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..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(

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;

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;

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;
-    }
-  }
-}

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);
   }
 }

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 = Services.prefs.getBoolPref('zen.workspaces.container-specific-essentials-enabled', false);
-      this,
-      'containerSpecificEssentials',
-      '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,
+      previousWorkspace.uuid
-      workspaces,
-      previousWorkspace.uuid,
-      prevTabUsed
     );
 
     // Update UI and state
@@ -1632,9 +1650,30 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     }
   }
 
-  _updateMarginTopPinnedTabs(arrowscrollbox, pinnedContainer) {
+  _updateMarginTopPinnedTabs(arrowscrollbox, pinnedContainer, essentialContainer, workspaceIndicator) {
-    if (arrowscrollbox) {
+    if (arrowscrollbox && !pinnedContainer.hasAttribute('hidden')) {
-      arrowscrollbox.style.marginTop = pinnedContainer.getBoundingClientRect().height + 'px';
+      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) {
+  async _handleTabSelection(window, onInit, previousWorkspaceId) {
-    const currentSelectedTab = prevTabUsed || gBrowser.selectedTab;
+    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 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}"]`
         );
-      this._updateMarginTopPinnedTabs(arrowScrollbox, entry.target);
+        const pinnedContainer = document.querySelector(
-      this.updateShouldHideSeparator(arrowScrollbox, entry.target);
+          `#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') {

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')
         ? {