fix: Fixed unpining split view group still marking a tab as changed, b=(no-bug), c=folders

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

.prettierignore

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

.vscode/settings.json

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

.well-known/funding-manifest-urls

@@ -0,0 +1 @@
+https://zen-browser.app/funding.json

README.md

@@ -1,3 +1,4 @@
+<!-- TODO: Get a job -->
 <img src="./docs/assets/zen-dark.svg" width="100px" align="left">
 
 ### `Zen Browser`
@@ -28,9 +29,9 @@
 
 ## 🖥️ Compatibility
 
-Zen is currently built using Firefox version `138.0.3`! 🚀
+Zen is currently built using Firefox version `138.0.4`! 🚀
 
-- [`Zen Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 138.0.3`!
+- [`Zen Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 138.0.4`!
 - Check out the latest [release notes](https://zen-browser.app/release-notes)!
 - Part of our mission is to keep Zen up-to-date with the latest version of Firefox, so you can enjoy the latest features and security updates!
 

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

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

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

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

src/browser/base/content/browser-box-inc-xhtml.patch

@@ -1,13 +1,15 @@
 diff --git a/browser/base/content/browser-box.inc.xhtml b/browser/base/content/browser-box.inc.xhtml
-index 7d7e8697f02f90d4f336c9ab0a73a89848e0c21c..d113b439888d26629ce5f6b5d35f8fa12249774b 100644
+index 7d7e8697f02f90d4f336c9ab0a73a89848e0c21c..64e950106dd05b443ce72107613ac9cc405d56ea 100644
 --- a/browser/base/content/browser-box.inc.xhtml
 +++ b/browser/base/content/browser-box.inc.xhtml
-@@ -23,7 +23,13 @@
+@@ -23,7 +23,15 @@
      <browser id="sidebar" autoscroll="false" disablehistory="true" disablefullscreen="true" tooltip="aHTMLTooltip"/>
    </vbox>
    <splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
 +<vbox flex="1" id="zen-appcontent-wrapper">
-+  <html:div id="zen-appcontent-navbar-container"></html:div>
++  <html:div id="zen-appcontent-navbar-wrapper">
++    <html:div id="zen-appcontent-navbar-container"></html:div>
++  </html:div>
 +  <hbox id="zen-tabbox-wrapper" flex="1">
    <tabbox id="tabbrowser-tabbox" flex="1" tabcontainer="tabbrowser-tabs">
 +#include zen-tabbrowser-elements.inc.xhtml

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb6c1a0cf3 100644
+index 6dece2b9d0462d90a28e75350ce983d87816ef73..5c49c43714b3914130f8d821d902f9f255c4ebc9 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
 @@ -415,11 +415,45 @@
@@ -54,7 +54,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
        this.tabpanels.appendChild(panel);
  
        let tab = this.tabs[0];
-+      ZenWorkspaces.handleInitialTab(tab, (!remoteType || remoteType === E10SUtils.PRIVILEGEDABOUT_REMOTE_TYPE) && !gZenUIManager.testingEnabled);
++      gZenWorkspaces.handleInitialTab(tab, (!remoteType || remoteType === E10SUtils.PRIVILEGEDABOUT_REMOTE_TYPE) && !gZenUIManager.testingEnabled);
        tab.linkedPanel = uniqueId;
        this._selectedTab = tab;
        this._selectedBrowser = browser;
@@ -68,7 +68,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
 +      if (this.tabContainer.verticalMode && !handled) {
          this.#handleTabMove(aTab, () =>
 -          this.verticalPinnedTabsContainer.appendChild(aTab)
-+          aTab.hasAttribute("zen-essential") ? ZenWorkspaces.getEssentialsSection(aTab).appendChild(aTab) : this.verticalPinnedTabsContainer.insertBefore(aTab, this.verticalPinnedTabsContainer.lastChild)
++          aTab.hasAttribute("zen-essential") ? gZenWorkspaces.getEssentialsSection(aTab).appendChild(aTab) : this.verticalPinnedTabsContainer.insertBefore(aTab, this.verticalPinnedTabsContainer.lastChild)
          );
 -      } else {
 +      } else if (!handled) {
@@ -87,7 +87,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
            aTab.removeAttribute("pinned");
 -          this.tabContainer.arrowScrollbox.prepend(aTab);
 +          if (!handled) {
-+            ZenWorkspaces.activeWorkspaceStrip.prepend(aTab);
++            gZenWorkspaces.activeWorkspaceStrip.prepend(aTab);
 +          }
          });
        } else {
@@ -200,8 +200,8 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
  
 +      let hasZenDefaultUserContextId = false;
 +      let zenForcedWorkspaceId = undefined;
-+      if (typeof ZenWorkspaces !== "undefined" && !_forZenEmptyTab) {
-+        [userContextId, hasZenDefaultUserContextId, zenForcedWorkspaceId] = ZenWorkspaces.getContextIdIfNeeded(userContextId, fromExternal, allowInheritPrincipal);
++      if (typeof gZenWorkspaces !== "undefined" && !_forZenEmptyTab) {
++        [userContextId, hasZenDefaultUserContextId, zenForcedWorkspaceId] = gZenWorkspaces.getContextIdIfNeeded(userContextId, fromExternal, allowInheritPrincipal);
 +      }
 +
        if (!UserInteraction.running("browser.tabs.opening", window)) {
@@ -262,7 +262,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
        return group;
      }
  
-@@ -2993,6 +3070,7 @@
+@@ -2993,10 +3070,10 @@
          insertBefore = null,
          isUserTriggered = false,
          telemetryUserCreateSource = "unknown",
@@ -270,7 +270,11 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
        } = {}
      ) {
        if (!tabs?.length) {
-@@ -3011,7 +3089,12 @@
+-        throw new Error("Cannot create tab group with zero tabs");
+       }
+ 
+       if (!color) {
+@@ -3011,7 +3088,12 @@
          id = `${Date.now()}-${Math.round(Math.random() * 100)}`;
        }
        let group = this._createTabGroup(id, color, false, label);
@@ -284,7 +288,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
          group,
          insertBefore?.group ?? insertBefore
        );
-@@ -3342,6 +3425,7 @@
+@@ -3342,6 +3424,7 @@
          openWindowInfo,
          skipLoad,
          triggeringRemoteType,
@@ -292,7 +296,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
        }
      ) {
        // If we don't have a preferred remote type (or it is `NOT_REMOTE`), and
-@@ -3411,6 +3495,7 @@
+@@ -3411,6 +3494,7 @@
            openWindowInfo,
            name,
            skipLoad,
@@ -300,7 +304,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
          });
        }
  
-@@ -3599,7 +3684,7 @@
+@@ -3599,7 +3683,7 @@
          // Add a new tab if needed.
          if (!tab) {
            let createLazyBrowser =
@@ -309,7 +313,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
  
            let url = "about:blank";
            if (tabData.entries?.length) {
-@@ -3637,7 +3722,29 @@
+@@ -3637,7 +3721,29 @@
              skipLoad: true,
              preferredRemoteType,
            });
@@ -339,7 +343,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
            if (select) {
              tabToSelect = tab;
            }
-@@ -3661,7 +3768,8 @@
+@@ -3661,7 +3767,8 @@
              // needs calling:
              shouldUpdateForPinnedTabs = true;
            }
@@ -349,7 +353,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
            let { groupId } = tabData;
            const tabGroup = tabGroupWorkingData.get(groupId);
            // if a tab refers to a tab group we don't know, skip any group
-@@ -3675,7 +3783,10 @@
+@@ -3675,7 +3782,10 @@
                  tabGroup.stateData.id,
                  tabGroup.stateData.color,
                  tabGroup.stateData.collapsed,
@@ -361,26 +365,26 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
                );
                tabsFragment.appendChild(tabGroup.node);
              }
-@@ -3723,8 +3834,16 @@
+@@ -3723,8 +3833,16 @@
        // to remove the old selected tab.
        if (tabToSelect) {
          let leftoverTab = this.selectedTab;
 -        this.selectedTab = tabToSelect;
 -        this.removeTab(leftoverTab);
-+        ZenWorkspaces._tabToRemoveForEmpty = leftoverTab;
++        gZenWorkspaces._tabToRemoveForEmpty = leftoverTab;
 +        if (Services.prefs.getBoolPref("zen.workspaces.continue-where-left-off")) {
-+          ZenWorkspaces._tabToSelect = selectTab - 1;
++          gZenWorkspaces._tabToSelect = selectTab - 1;
 +        }
-+        if (ZenWorkspaces._initialTab && !gZenVerticalTabsManager._canReplaceNewTab) {
-+          ZenWorkspaces._initialTab._shouldRemove = true;
++        if (gZenWorkspaces._initialTab && !gZenVerticalTabsManager._canReplaceNewTab) {
++          gZenWorkspaces._initialTab._shouldRemove = true;
 +        }
 +      }
 +      else {
-+        ZenWorkspaces._tabToRemoveForEmpty = this.selectedTab;
++        gZenWorkspaces._tabToRemoveForEmpty = this.selectedTab;
        }
  
        if (tabs.length > 1 || !tabs[0].selected) {
-@@ -3912,7 +4031,7 @@
+@@ -3912,7 +4030,7 @@
        // Ensure we have an index if one was not provided.
        if (typeof index != "number") {
          // Move the new tab after another tab if needed, to the end otherwise.
@@ -389,7 +393,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
          if (
            !bulkOrderedOpen &&
            ((openerTab &&
-@@ -3935,7 +4054,7 @@
+@@ -3935,7 +4053,7 @@
            ) {
              index = Infinity;
            } else if (previousTab.visible) {
@@ -398,7 +402,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
            } else if (previousTab == FirefoxViewHandler.tab) {
              index = 0;
            }
-@@ -3958,18 +4077,18 @@
+@@ -3958,18 +4076,18 @@
  
        // Ensure index is within bounds.
        if (tab.pinned) {
@@ -422,7 +426,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
          if (this.isTab(itemAfter) && itemAfter.group == tabGroup) {
            // Place at the front of, or between tabs in, the same tab group
            this.tabContainer.insertBefore(tab, itemAfter);
-@@ -4290,6 +4409,9 @@
+@@ -4290,6 +4408,9 @@
          return;
        }
  
@@ -432,7 +436,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
        this.removeTabs(selectedTabs, { telemetrySource });
      }
  
-@@ -4542,6 +4664,7 @@
+@@ -4542,6 +4663,7 @@
          telemetrySource,
        } = {}
      ) {
@@ -440,7 +444,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
        // When 'closeWindowWithLastTab' pref is enabled, closing all tabs
        // can be considered equivalent to closing the window.
        if (
-@@ -4626,6 +4749,7 @@
+@@ -4626,6 +4748,7 @@
          if (lastToClose) {
            this.removeTab(lastToClose, aParams);
          }
@@ -448,20 +452,12 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
        } catch (e) {
          console.error(e);
        }
-@@ -4650,6 +4774,7 @@
-         telemetrySource,
-       } = {}
-     ) {
-+      gZenUIManager.saveScrollbarState();
-       if (UserInteraction.running("browser.tabs.opening", window)) {
-         UserInteraction.finish("browser.tabs.opening", window);
-       }
-@@ -4663,6 +4788,12 @@
+@@ -4663,6 +4786,12 @@
          aTab._closeTimeNoAnimTimerId = Glean.browserTabclose.timeNoAnim.start();
        }
  
-+      if (ZenWorkspaces.workspaceEnabled) {
-+        let newTab = ZenWorkspaces.handleTabBeforeClose(aTab, closeWindowWithLastTab);
++      if (gZenWorkspaces.workspaceEnabled) {
++        let newTab = gZenWorkspaces.handleTabBeforeClose(aTab, closeWindowWithLastTab);
 +        if (newTab) {
 +          this.selectedTab = newTab;
 +        }
@@ -469,7 +465,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
        // Handle requests for synchronously removing an already
        // asynchronously closing tab.
        if (!animate && aTab.closing) {
-@@ -4677,7 +4808,9 @@
+@@ -4677,7 +4806,9 @@
        // frame created for it (for example, by updating the visually selected
        // state).
        let tabWidth = window.windowUtils.getBoundsWithoutFlushing(aTab).width;
@@ -480,44 +476,44 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
        if (
          !this._beginRemoveTab(aTab, {
            closeWindowFastpath: true,
-@@ -4840,7 +4973,7 @@
+@@ -4840,7 +4971,7 @@
            closeWindowWithLastTab != null
              ? closeWindowWithLastTab
              : !window.toolbar.visible ||
 -              Services.prefs.getBoolPref("browser.tabs.closeWindowWithLastTab");
-+            Services.prefs.getBoolPref("browser.tabs.closeWindowWithLastTab") && !ZenWorkspaces._isClosingWindow && !ZenWorkspaces._removedByStartupPage;
++            Services.prefs.getBoolPref("browser.tabs.closeWindowWithLastTab") && !gZenWorkspaces._isClosingWindow && !gZenWorkspaces._removedByStartupPage;
  
          if (closeWindow) {
            // We've already called beforeunload on all the relevant tabs if we get here,
-@@ -4864,6 +4997,7 @@
+@@ -4864,6 +4995,7 @@
  
          newTab = true;
        }
-+      ZenWorkspaces._removedByStartupPage = false;
++      gZenWorkspaces._removedByStartupPage = false;
        aTab._endRemoveArgs = [closeWindow, newTab];
  
        // swapBrowsersAndCloseOther will take care of closing the window without animation.
-@@ -4903,9 +5037,7 @@
+@@ -4903,9 +5035,7 @@
        aTab._mouseleave();
  
        if (newTab) {
 -        this.addTrustedTab(BROWSER_NEW_TAB_URL, {
 -          skipAnimation: true,
 -        });
-+        ZenWorkspaces.selectEmptyTab(BROWSER_NEW_TAB_URL);
++        gZenWorkspaces.selectEmptyTab(BROWSER_NEW_TAB_URL);
        } else {
          TabBarVisibility.update();
        }
-@@ -5034,6 +5166,8 @@
+@@ -5034,6 +5164,8 @@
          this.tabs[i]._tPos = i;
        }
  
-+      ZenWorkspaces.updateTabsContainers();
++      gZenWorkspaces.updateTabsContainers();
 +
        if (!this._windowIsClosing) {
          if (wasPinned) {
            this.tabContainer._positionPinnedTabs();
-@@ -5159,8 +5293,8 @@
+@@ -5159,8 +5291,8 @@
        return closedCount;
      }
  
@@ -528,49 +524,49 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
        if (unloadBlocked) {
          return;
        }
-@@ -5248,6 +5382,7 @@
+@@ -5248,6 +5380,7 @@
        }
  
        let excludeTabs = new Set(aExcludeTabs);
-+      ZenWorkspaces.getTabsToExclude(aTab).forEach(tab => excludeTabs.add(tab));
++      gZenWorkspaces.getTabsToExclude(aTab).forEach(tab => excludeTabs.add(tab));
  
        // If this tab has a successor, it should be selectable, since
        // hiding or closing a tab removes that tab as a successor.
-@@ -5260,13 +5395,13 @@
+@@ -5260,13 +5393,13 @@
          !excludeTabs.has(aTab.owner) &&
          Services.prefs.getBoolPref("browser.tabs.selectOwnerOnClose")
        ) {
 -        return aTab.owner;
-+        return ZenWorkspaces.findTabToBlur(aTab.owner);
++        return gZenWorkspaces.findTabToBlur(aTab.owner);
        }
  
        // Try to find a remaining tab that comes after the given tab
        let remainingTabs = Array.prototype.filter.call(
          this.visibleTabs,
 -        tab => !excludeTabs.has(tab)
-+        tab => !excludeTabs.has(tab) && ZenWorkspaces._shouldChangeToTab(tab)
++        tab => !excludeTabs.has(tab) && gZenWorkspaces._shouldChangeToTab(tab)
        );
  
        let tab = this.tabContainer.findNextTab(aTab, {
-@@ -5282,7 +5417,7 @@
+@@ -5282,7 +5415,7 @@
        }
  
        if (tab) {
 -        return tab;
-+        return ZenWorkspaces.findTabToBlur(tab);
++        return gZenWorkspaces.findTabToBlur(tab);
        }
  
        // If no qualifying visible tab was found, see if there is a tab in
-@@ -5303,7 +5438,7 @@
+@@ -5303,7 +5436,7 @@
          });
        }
  
 -      return tab;
-+      return ZenWorkspaces.findTabToBlur(tab);
++      return gZenWorkspaces.findTabToBlur(tab);
      }
  
      _blurTab(aTab) {
-@@ -5704,10 +5839,10 @@
+@@ -5704,10 +5837,10 @@
        SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
      }
  
@@ -583,21 +579,22 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
          aTab.selected ||
          aTab.closing ||
          // Tabs that are sharing the screen, microphone or camera cannot be hidden.
-@@ -6001,7 +6136,7 @@
+@@ -6001,7 +6134,7 @@
  
        // Don't allow mixing pinned and unpinned tabs.
        if (this.isTab(element) && element.pinned) {
 -        tabIndex = Math.min(tabIndex, this.pinnedTabCount - 1);
-+        tabIndex = element.hasAttribute('zen-essential') ? Math.min(tabIndex, this._numZenEssentials - 1) : Math.min(tabIndex, this.pinnedTabCount - 1);
++        tabIndex = element.hasAttribute('zen-essential') ? Math.min(tabIndex, this._numZenEssentials - 1) : Math.min(Math.max(tabIndex, this._numZenEssentials), this.pinnedTabCount - 1);
        } else {
          tabIndex = Math.max(tabIndex, this.pinnedTabCount);
        }
-@@ -6028,9 +6163,16 @@
+@@ -6027,10 +6160,16 @@
+       this.#handleTabMove(
          element,
          () => {
-           let neighbor = this.tabs[tabIndex];
+-          let neighbor = this.tabs[tabIndex];
 -          if (forceUngrouped && neighbor.group) {
-+          const _tPos = element._tPos;
++          let neighbor = gZenGlanceManager.getTabOrGlanceParent(this.tabs.filter(tab => !tab.hasAttribute("zen-glance-tab"))[tabIndex]);
 +          if ((forceUngrouped && neighbor?.group) || neighbor?.group?.hasAttribute("split-view-group")) {
              neighbor = neighbor.group;
            }
@@ -610,7 +607,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
            if (neighbor && this.isTab(element) && tabIndex > element._tPos) {
              neighbor.after(element);
            } else {
-@@ -6099,7 +6241,9 @@
+@@ -6099,7 +6238,9 @@
            targetElement = targetElement.group;
          }
        }
@@ -621,21 +618,22 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
        // Don't allow mixing pinned and unpinned tabs.
        if (element.pinned && !targetElement?.pinned) {
          targetElement = this.tabs[this.pinnedTabCount - 1];
-@@ -6109,7 +6253,13 @@
+@@ -6109,7 +6250,14 @@
          moveBefore = true;
        }
  
 +      if (targetElement?.group?.hasAttribute("split-view-group")) {
 +        targetElement = targetElement.group;
 +      }
++      targetElement = gZenGlanceManager.getTabOrGlanceParent(targetElement);
        let getContainer = () => {
 +        if (element.hasAttribute("zen-essential")) {
-+          return ZenWorkspaces.getEssentialsSection(element);
++          return gZenWorkspaces.getEssentialsSection(element);
 +        }
          if (element.pinned && this.tabContainer.verticalMode) {
            return this.tabContainer.verticalPinnedTabsContainer;
          }
-@@ -6169,7 +6319,7 @@
+@@ -6169,7 +6317,7 @@
        if (!this.isTab(aTab)) {
          throw new Error("Can only move a tab into a tab group");
        }
@@ -644,27 +642,27 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
          return;
        }
        if (aTab.group && aTab.group.id === aGroup.id) {
-@@ -6263,6 +6413,10 @@
+@@ -6263,6 +6411,10 @@
  
        moveActionCallback();
  
-+      ZenWorkspaces._makeSureEmptyTabIsLast();
++      gZenWorkspaces._makeSureEmptyTabIsLast();
 +      gZenViewSplitter._maybeRemoveFakeBrowser(false);
 +      gZenViewSplitter._canDrop = false;
 +
        // Clear tabs cache after moving nodes because the order of tabs may have
        // changed.
        this.tabContainer._invalidateCachedTabs();
-@@ -7080,7 +7234,7 @@
+@@ -7080,7 +7232,7 @@
              // preventDefault(). It will still raise the window if appropriate.
              break;
            }
 -          this.selectedTab = tab;
-+          ZenWorkspaces.switchTabIfNeeded(tab);
++          gZenWorkspaces.switchTabIfNeeded(tab);
            window.focus();
            aEvent.preventDefault();
            break;
-@@ -7981,6 +8135,7 @@
+@@ -7981,6 +8133,7 @@
              aWebProgress.isTopLevel
            ) {
              this.mTab.setAttribute("busy", "true");
@@ -672,7 +670,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
              gBrowser._tabAttrModified(this.mTab, ["busy"]);
              this.mTab._notselectedsinceload = !this.mTab.selected;
            }
-@@ -8954,7 +9109,7 @@ var TabContextMenu = {
+@@ -8954,7 +9107,7 @@ var TabContextMenu = {
      );
      contextUnpinSelectedTabs.hidden =
        !this.contextTab.pinned || !this.multiselected;
@@ -681,7 +679,7 @@ index 6dece2b9d0462d90a28e75350ce983d87816ef73..e54e815b04c311464ed53364007d99bb
      // Move Tab items
      let contextMoveTabOptions = document.getElementById(
        "context_moveTabOptions"
-@@ -9223,6 +9378,7 @@ var TabContextMenu = {
+@@ -9223,6 +9376,7 @@ var TabContextMenu = {
          telemetrySource: gBrowser.TabMetrics.METRIC_SOURCE.TAB_STRIP,
        });
      } else {

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

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa16cb76ffb 100644
+index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..b413b4bc9d86726b0f8936a3422636ed3ca882e1 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -83,7 +83,7 @@
@@ -11,23 +11,23 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
          }
          return true;
        };
-@@ -342,7 +342,7 @@
+@@ -286,6 +286,7 @@
+     on_TabGroupCollapse(event) {
+       this._invalidateCachedVisibleTabs();
+       this._unlockTabSizing();
++      return;
+ 
+       // If the user's selected tab is in the collapsing group, kick them off
+       // the tab. If no tabs exist outside the group, create a new one and
+@@ -342,7 +343,7 @@
        // and we're not hitting the scroll buttons.
        if (
          event.button != 0 ||
 -        event.target != this.arrowScrollbox ||
-+        event.target != document.getElementById("zen-tabs-wrapper") ||
++        !event.target.classList.contains("zen-workspace-normal-tabs-section") ||
          event.composedTarget.localName == "toolbarbutton"
        ) {
          return;
-@@ -391,6 +391,7 @@
-             // Reset the "ignored click" flag
-             target._ignoredCloseButtonClicks = false;
-           }
-+          gZenUIManager.saveScrollbarState();
-         }
- 
-         /* Protects from close-tab-button errant doubleclick:
 @@ -692,7 +693,7 @@
        if (this.#isContainerVerticalPinnedGrid(tab)) {
          // In expanded vertical mode, the max number of pinned tabs per row is dynamic
@@ -132,16 +132,16 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
  
      get newTabButton() {
 -      return this.querySelector("#tabs-newtab-button");
-+      return ZenWorkspaces.activeWorkspaceStrip.querySelector("#tabs-newtab-button");
++      return gZenWorkspaces.activeWorkspaceStrip.querySelector("#tabs-newtab-button");
      }
  
      get verticalMode() {
-@@ -1606,29 +1636,41 @@
+@@ -1606,29 +1636,55 @@
        if (this.#allTabs) {
          return this.#allTabs;
        }
 -      let children = Array.from(this.arrowScrollbox.children);
-+      let children = ZenWorkspaces.tabboxChildren;
++      let children = gZenWorkspaces.tabboxChildren;
        // remove arrowScrollbox periphery element
        children.pop();
  
@@ -151,42 +151,56 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
 -      for (let i = children.length - 1; i >= 0; i--) {
 -        if (children[i].tagName == "tab-group") {
 -          children.splice(i, 1, ...children[i].tabs);
--        }
--      }
- 
-       this.#allTabs = [
++      const pinnedTabs = [...gZenWorkspaces.getCurrentEssentialsContainer().children, ...this.verticalPinnedTabsContainer.children];
++      const expandTabs = (tabs) => {
++        for (let i = tabs.length - 1; i >= 0; i--) {
++          const tab = tabs[i];
++          if (isTabGroup(tab)) {
++            // remove the group from the list
++            tabs.splice(i, 1);
++            // add the tabs in the group to the list
++            tabs.splice(i, 0, ...tab.tabs);
++          }
+         }
+       }
+-
+-      this.#allTabs = [
 -        ...this.verticalPinnedTabsContainer.children,
-+        ...ZenWorkspaces.getCurrentEssentialsContainer().children, ...this.verticalPinnedTabsContainer.children,
++      expandTabs(pinnedTabs);
++      expandTabs(children);
++      const allTabs = [
++        ...pinnedTabs,
          ...children,
        ];
-+      const lastPinnedTabIdx = gBrowser.pinnedTabCount;
-+      for (let i = 0; i < this.#allTabs.length; i++) {
++      const lastPinnedTabIdx = pinnedTabs.length - 1;
++      let i = 0;
++      for (const tab of [...allTabs]) {
 +        // add glance tabs (tabs inside tabs) to the list
-+        const glanceTab = this.#allTabs[i].querySelector("tab[zen-glance-tab]");
++        const glanceTab = tab.glanceTab;
 +        if (glanceTab) {
 +          // insert right after the parent tab. note: it must be inserted before
 +          // the last pinned tab so it can be inserted in the correct order
-+          this.#allTabs.splice(Math.max(i + 1, lastPinnedTabIdx), 0, glanceTab);
++          allTabs.splice(Math.max(i + 1, lastPinnedTabIdx), 0, glanceTab);
 +          i++;
-+        } else if (this.#allTabs[i].classList.contains("vertical-pinned-tabs-container-separator")) {
++        } else if (tab.classList.contains("vertical-pinned-tabs-container-separator")) {
 +          // remove the separator from the list
-+          this.#allTabs.splice(i, 1);
++          allTabs.splice(i, 1);
 +          i--;
-+        } else if (this.#allTabs[i].tagName == "tab-group") {
-+          this.#allTabs.splice(i, 1, ...this.#allTabs[i].tabs);
 +        }
++        i++;
 +      }
++      this.#allTabs = allTabs;
        return this.#allTabs;
      }
  
      get allGroups() {
        let children = Array.from(this.arrowScrollbox.children);
 -      return children.filter(node => node.tagName == "tab-group");
-+      return ZenWorkspaces.allTabGroups;
++      return gZenWorkspaces.allTabGroups;
      }
  
      /**
-@@ -1648,7 +1690,7 @@
+@@ -1648,7 +1704,7 @@
       */
      get visibleTabs() {
        if (!this.#visibleTabs) {
@@ -195,7 +209,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
        }
        return this.#visibleTabs;
      }
-@@ -1683,23 +1725,18 @@
+@@ -1683,36 +1739,40 @@
        }
  
        let elementIndex = 0;
@@ -207,11 +221,11 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
 -      }
 -      let children = Array.from(this.arrowScrollbox.children);
 +      let verticalPinnedTabsContainer = this.verticalPinnedTabsContainer
-+      let children = ZenWorkspaces.tabboxChildrenWithoutEmpty;
++      let children = gZenWorkspaces.tabboxChildrenWithoutEmpty;
  
        let focusableItems = [];
 -      for (let child of children) {
-+      for (let child of [...ZenWorkspaces.getCurrentEssentialsContainer().children, ...verticalPinnedTabsContainer.children, ...children]) {
++      for (let child of [...gZenWorkspaces.getCurrentEssentialsContainer().children, ...verticalPinnedTabsContainer.children, ...children]) {
          if (isTab(child) && child.visible) {
            child.elementIndex = elementIndex++;
            focusableItems.push(child);
@@ -223,15 +237,22 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
              let visibleTabsInGroup = child.tabs.filter(tab => tab.visible);
              visibleTabsInGroup.forEach(tab => {
                tab.elementIndex = elementIndex++;
-@@ -1707,12 +1744,14 @@
+             });
              focusableItems.push(...visibleTabsInGroup);
            }
-         }
-+        let glanceTab = child.querySelector("tab[zen-glance-tab]");
++          for (let tab of child.tabs) {
++            let glanceTab = tab.glanceTab;
++            if (isTab(glanceTab)) {
++              glanceTab.elementIndex = elementIndex - 1;
++              focusableItems.push(glanceTab);
++            }
++          }
++        }
++        let glanceTab = child.glanceTab;
 +        if (isTab(child) && glanceTab) {
 +          glanceTab.elementIndex = elementIndex - 1;
 +          focusableItems.push(glanceTab);
-+        }
+         }
        }
  
 -      this.#focusableItems = [
@@ -242,15 +263,15 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
  
        return this.#focusableItems;
      }
-@@ -1720,6 +1759,7 @@
+@@ -1720,6 +1780,7 @@
      _invalidateCachedTabs() {
        this.#allTabs = null;
        this._invalidateCachedVisibleTabs();
-+      ZenWorkspaces._allStoredTabs = null;
++      gZenWorkspaces._allStoredTabs = null;
      }
  
      _invalidateCachedVisibleTabs() {
-@@ -1734,8 +1774,8 @@
+@@ -1734,8 +1795,8 @@
      #isContainerVerticalPinnedGrid(tab) {
        return (
          this.verticalMode &&
@@ -261,25 +282,25 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
          !this.expandOnHover
        );
      }
-@@ -1751,7 +1791,7 @@
+@@ -1751,7 +1812,7 @@
  
        if (node == null) {
          // We have a container for non-tab elements at the end of the scrollbox.
 -        node = this.arrowScrollbox.lastChild;
-+        node = ZenWorkspaces.activeWorkspaceStrip.lastChild;
++        node = gZenWorkspaces.activeWorkspaceStrip.lastChild;
        }
  
        node.before(tab);
-@@ -1846,7 +1886,7 @@
+@@ -1846,7 +1907,7 @@
            // There are separate "new tab" buttons for horizontal tabs toolbar, vertical tabs and
            // for when the tab strip is overflowed (which is shared by vertical and horizontal tabs);
            // Attach the long click popup to all of them.
 -          const newTab = document.getElementById("new-tab-button");
-+          const newTab = ZenWorkspaces.activeWorkspaceStrip.querySelector("#tabs-newtab-button");
++          const newTab = gZenWorkspaces.activeWorkspaceStrip.querySelector("#tabs-newtab-button");
            const newTab2 = this.newTabButton;
            const newTabVertical = document.getElementById(
              "vertical-tabs-newtab-button"
-@@ -1941,10 +1981,12 @@
+@@ -1941,10 +2002,12 @@
  
      _handleTabSelect(aInstant) {
        let selectedTab = this.selectedItem;
@@ -292,7 +313,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
        selectedTab._notselectedsinceload = false;
      }
  
-@@ -2085,16 +2127,15 @@
+@@ -2085,16 +2148,15 @@
        // Move pinned tabs to another container when the tabstrip is toggled to vertical
        // and when session restore code calls _positionPinnedTabs; update styling whenever
        // the number of pinned tabs changes.
@@ -304,18 +325,18 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
 -
 -      if (gBrowser.pinnedTabCount !== verticalTabsContainer.children.length) {
 -        let tabs = this.visibleTabs;
-+      if (!ZenWorkspaces._hasInitializedTabsStrip) return;
-+      let count = ZenWorkspaces.makeSurePinTabIsInCorrectPosition();
-+      if (gBrowser.pinnedTabCount !== (verticalTabsContainer.children.length - count - 1 + ZenWorkspaces.getCurrentEssentialsContainer().children.length)) {
++      if (!gZenWorkspaces._hasInitializedTabsStrip) return;
++      let count = gZenWorkspaces.makeSurePinTabIsInCorrectPosition();
++      if (gBrowser.pinnedTabCount !== (verticalTabsContainer.children.length - count - 1 + gZenWorkspaces.getCurrentEssentialsContainer().children.length)) {
 +        let tabs = this.allTabs.filter(tab => !tab.hasAttribute("zen-glance-tab"));
          for (let i = 0; i < numPinned; i++) {
            tabs[i].style.marginInlineStart = "";
 -          verticalTabsContainer.appendChild(tabs[i]);
-+          tabs[i].hasAttribute("zen-essential") ? ZenWorkspaces.getCurrentEssentialsContainer().appendChild(tabs[i].group?.hasAttribute("split-view-group") ? tabs[i].group : tabs[i]) : verticalTabsContainer.insertBefore(tabs[i].group?.hasAttribute("split-view-group") ? tabs[i].group : tabs[i], verticalTabsContainer.lastChild);
++          tabs[i].hasAttribute("zen-essential") ? gZenWorkspaces.getCurrentEssentialsContainer().appendChild(tabs[i].group?.hasAttribute("split-view-group") ? tabs[i].group : tabs[i]) : verticalTabsContainer.insertBefore(tabs[i].group?.hasAttribute("split-view-group") ? tabs[i].group : tabs[i], verticalTabsContainer.lastChild);
          }
        }
  
-@@ -2102,9 +2143,7 @@
+@@ -2102,9 +2164,7 @@
      }
  
      _resetVerticalPinnedTabs() {
@@ -326,7 +347,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
  
        if (!verticalTabsContainer.children.length) {
          return;
-@@ -2117,7 +2156,7 @@
+@@ -2117,7 +2177,7 @@
      }
  
      _positionPinnedTabs() {
@@ -335,7 +356,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
        let numPinned = gBrowser.pinnedTabCount;
        let absPositionHorizontalTabs =
          this.overflowing && tabs.length > numPinned && numPinned > 0;
-@@ -2127,7 +2166,7 @@
+@@ -2127,7 +2187,7 @@
  
        if (this.verticalMode) {
          this._updateVerticalPinnedTabs();
@@ -344,7 +365,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
          let layoutData = this._pinnedTabsLayoutCache;
          let uiDensity = document.documentElement.getAttribute("uidensity");
          if (!layoutData || layoutData.uiDensity != uiDensity) {
-@@ -2191,7 +2230,7 @@
+@@ -2191,7 +2251,7 @@
          return;
        }
  
@@ -353,7 +374,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
  
        let directionX = screenX > dragData.animLastScreenX;
        let directionY = screenY > dragData.animLastScreenY;
-@@ -2199,7 +2238,7 @@
+@@ -2199,7 +2259,7 @@
        dragData.animLastScreenX = screenX;
  
        let { width: tabWidth, height: tabHeight } =
@@ -362,7 +383,16 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
        let shiftSizeX = tabWidth * movingTabs.length;
        let shiftSizeY = tabHeight;
        dragData.tabWidth = tabWidth;
-@@ -2374,12 +2413,16 @@
+@@ -2262,7 +2322,7 @@
+       // * We're doing a binary search in order to reduce the amount of
+       //   tabs we need to check.
+ 
+-      tabs = tabs.filter(t => !movingTabs.includes(t) || t == draggedTab);
++      tabs = tabs.filter(t => !movingTabs.includes(t) || t == draggedTab && !t.hasAttribute("zen-glance-tab"));
+       let firstTabCenterX = firstMovingTabScreenX + translateX + tabWidth / 2;
+       let lastTabCenterX = lastMovingTabScreenX + translateX + tabWidth / 2;
+       let tabCenterX = directionX ? lastTabCenterX : firstTabCenterX;
+@@ -2374,12 +2434,16 @@
  
        this.#clearDragOverCreateGroupTimer();
  
@@ -384,7 +414,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
  
        if (this.#rtlMode) {
          tabs.reverse();
-@@ -2393,7 +2436,7 @@
+@@ -2393,7 +2457,7 @@
        let size = this.verticalMode ? "height" : "width";
        let translateAxis = this.verticalMode ? "translateY" : "translateX";
        let scrollDirection = this.verticalMode ? "scrollTop" : "scrollLeft";
@@ -393,7 +423,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
        let translateX = event.screenX - dragData.screenX;
        let translateY = event.screenY - dragData.screenY;
  
-@@ -2407,10 +2450,19 @@
+@@ -2407,12 +2471,21 @@
        let lastTab = tabs.at(-1);
        let lastMovingTab = movingTabs.at(-1);
        let firstMovingTab = movingTabs[0];
@@ -411,9 +441,12 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
 +        shiftSize += 5; // A hack to allow more space for the group
 +      }
        let translate = screen - dragData[screenAxis];
-       if (!isPinned) {
+-      if (!isPinned) {
++      if (true) {
          translate +=
-@@ -2431,6 +2483,9 @@
+           this.arrowScrollbox.scrollbox[scrollDirection] - dragData.scrollPos;
+       } else if (isPinned && this.verticalMode) {
+@@ -2431,12 +2504,15 @@
            // Shift the `.tab-group-label-container` to shift the label element.
            item = item.parentElement;
          }
@@ -423,7 +456,14 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
          item.style.transform = `${translateAxis}(${translate}px)`;
        }
  
-@@ -2568,6 +2623,9 @@
+       dragData.translatePos = translate;
+ 
+-      tabs = tabs.filter(t => !movingTabs.includes(t) || t == draggedTab);
++      tabs = tabs.filter(t => !movingTabs.includes(t) || t == draggedTab && !t.hasAttribute("zen-glance-tab"));
+ 
+       /**
+        * When the `draggedTab` is just starting to move, the `draggedTab` is in
+@@ -2568,6 +2644,9 @@
              break;
            }
            let element = tabs[mid];
@@ -433,18 +473,20 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
            let elementForSize = isTabGroupLabel(element)
              ? element.parentElement
              : element;
-@@ -2590,6 +2648,10 @@
+@@ -2588,7 +2667,11 @@
+ 
+       let dropElement = getOverlappedElement();
        if (!dropElement) {
-         dropElement = this.ariaFocusableItems[oldDropElementIndex];
-       }
+-        dropElement = this.ariaFocusableItems[oldDropElementIndex];
++        dropElement = this.ariaFocusableItems.filter(tab => !tab.hasAttribute("zen-glance-tab"))[oldDropElementIndex];
++      }
 +      if (dropElement?.group?.hasAttribute("split-view-group")) {
 +        // We focus the group label element, not the group itself.
 +        dropElement = dropElement.group.labelElement;
-+      }
+       }
        let newDropElementIndex = dropElement
          ? dropElement.elementIndex
-         : oldDropElementIndex;
-@@ -2598,7 +2660,7 @@
+@@ -2598,7 +2681,7 @@
        let shouldCreateGroupOnDrop;
        let dropBefore;
        if (dropElement) {
@@ -453,7 +495,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
            ? dropElement.parentElement
            : dropElement;
  
-@@ -2660,12 +2722,12 @@
+@@ -2660,12 +2743,12 @@
          }
        }
  
@@ -468,7 +510,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
            dropElement != draggedTab &&
            isTab(dropElement) &&
            !dropElement?.group &&
-@@ -2735,7 +2797,7 @@
+@@ -2735,7 +2818,7 @@
        // Shift background tabs to leave a gap where the dragged tab
        // would currently be dropped.
        for (let item of tabs) {
@@ -477,7 +519,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
            continue;
          }
  
-@@ -2744,6 +2806,9 @@
+@@ -2744,6 +2827,9 @@
          if (isTabGroupLabel(item)) {
            // Shift the `.tab-group-label-container` to shift the label element.
            item = item.parentElement;
@@ -487,7 +529,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
          }
          item.style.transform = transform;
        }
-@@ -2796,8 +2861,9 @@
+@@ -2796,8 +2882,9 @@
        );
      }
  
@@ -499,7 +541,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
          return;
        }
  
-@@ -2809,6 +2875,12 @@
+@@ -2809,6 +2896,12 @@
            item = item.parentElement;
          }
          item.style.transform = "";
@@ -512,7 +554,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
          item.removeAttribute("dragover-createGroup");
        }
        this.removeAttribute("movingtab-createGroup");
-@@ -2855,7 +2927,7 @@
+@@ -2855,7 +2948,7 @@
          let postTransitionCleanup = () => {
            movingTab._moveTogetherSelectedTabsData.animate = false;
          };
@@ -521,7 +563,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
            postTransitionCleanup();
          } else {
            let onTransitionEnd = transitionendEvent => {
-@@ -3028,7 +3100,7 @@
+@@ -3028,7 +3121,7 @@
      }
  
      _notifyBackgroundTab(aTab) {
@@ -530,7 +572,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..3001dd54fccfcac3b96288dd769fbaa1
          return;
        }
  
-@@ -3154,6 +3226,9 @@
+@@ -3154,6 +3247,9 @@
            return null;
          }
        }

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

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

src/browser/themes/linux/browser-css.patch

@@ -1,20 +1,18 @@
 diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css
-index 5c9891e5ed4b865ed4ecc98d794a239b0f96a8f9..e13bf7277edeb49ebbb12cf9359ac6193bb47ebd 100644
+index 5c9891e5ed4b865ed4ecc98d794a239b0f96a8f9..53e69289620dd7e89dad167fb3a59b162545dd89 100644
 --- a/browser/themes/linux/browser.css
 +++ b/browser/themes/linux/browser.css
-@@ -42,21 +42,25 @@
+@@ -42,7 +42,8 @@
      -moz-default-appearance: -moz-window-decorations;
      appearance: auto;
  
 -    #navigator-toolbox,
--    dialog::backdrop {
 +    #zen-main-app-wrapper,
-+    dialog::backdrop,
-+    #browser::after,
-+    #browser::before {
++    #zen-browser-background,
+     dialog::backdrop {
        border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
        border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
-     }
+@@ -50,13 +51,14 @@
  
      /* stylelint-disable-next-line media-query-no-invalid */
      @media -moz-pref("widget.gtk.rounded-bottom-corners.enabled") {
@@ -27,8 +25,7 @@ index 5c9891e5ed4b865ed4ecc98d794a239b0f96a8f9..e13bf7277edeb49ebbb12cf9359ac619
        body,
 -      dialog::backdrop {
 +      dialog::backdrop,
-+      #browser::after,
-+      #browser::before {
++      #zen-browser-background {
          /* Use an uniform clip to allow WebRender to optimize it better */
          border-radius: env(-moz-gtk-csd-titlebar-radius);
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 diff --git a/toolkit/content/widgets/tabbox.js b/toolkit/content/widgets/tabbox.js
-index 6775a7635c6cdbb276b3a912d0bba07840acb28f..fc5d3b1fab286c657c27b98d56bb616dfab3caef 100644
+index 6775a7635c6cdbb276b3a912d0bba07840acb28f..861640d12c6118e11acb3f51723a79098dbbba10 100644
 --- a/toolkit/content/widgets/tabbox.js
 +++ b/toolkit/content/widgets/tabbox.js
 @@ -213,7 +213,7 @@
@@ -7,7 +7,7 @@ index 6775a7635c6cdbb276b3a912d0bba07840acb28f..fc5d3b1fab286c657c27b98d56bb616d
        this._inAsyncOperation = false;
        if (oldPanel != this._selectedPanel) {
 -        oldPanel?.classList.remove("deck-selected");
-+        if (!oldPanel?.classList.contains("zen-glance-background")) oldPanel?.classList.remove("deck-selected");
++        if (!(window.gZenGlanceManager && gZenGlanceManager.shouldShowDeckSelected(this._selectedPanel, oldPanel))) oldPanel?.classList.remove("deck-selected");
          this._selectedPanel?.classList.add("deck-selected");
        }
        this.setAttribute("selectedIndex", val);
@@ -16,7 +16,7 @@ index 6775a7635c6cdbb276b3a912d0bba07840acb28f..fc5d3b1fab286c657c27b98d56bb616d
          return;
        }
 -      for (let otherTab of this.allTabs) {
-+      for (let otherTab of window.ZenWorkspaces?.allStoredTabs ?? this.allTabs) {
++      for (let otherTab of window.gZenWorkspaces?.allStoredTabs ?? this.allTabs) {
          if (otherTab != tab && otherTab.selected) {
            otherTab._selected = false;
          }

src/widget/cocoa/VibrancyManager-mm.patch

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

src/zen/common/ZenCustomizableUI.sys.mjs

@@ -122,7 +122,7 @@ export var ZenCustomizableUI = new (class {
 
   _hideToolbarButtons(window) {
     const wrapper = window.document.getElementById('zen-sidebar-bottom-buttons');
-    const elementsToHide = ['alltabs-button', 'new-tab-button'];
+    const elementsToHide = ['new-tab-button'];
     for (let id of elementsToHide) {
       const elem = window.document.getElementById(id);
       if (elem) {

src/zen/common/ZenStartup.mjs

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

src/zen/common/ZenUIManager.mjs

@@ -58,7 +58,6 @@ var gZenUIManager = {
     });
 
     window.addEventListener('TabClose', this.onTabClose.bind(this));
-    this.tabsWrapper.addEventListener('scroll', this.saveScrollbarState.bind(this));
 
     gZenMediaController.init();
   },
@@ -71,10 +70,10 @@ var gZenUIManager = {
     );
     gZenVerticalTabsManager.actualWindowButtons.removeAttribute('zen-has-hover');
     gZenVerticalTabsManager.recalculateURLBarHeight();
-    setTimeout(gURLBar.formatValue.bind(gURLBar), 0);
+    setTimeout(gURLBar.formatValue.bind(gURLBar), 350);
     if (!this._preventToolbarRebuild) {
       setTimeout(() => {
-        ZenWorkspaces.updateTabsContainers();
+        gZenWorkspaces.updateTabsContainers();
       }, 0);
     }
     delete this._preventToolbarRebuild;
@@ -88,18 +87,9 @@ var gZenUIManager = {
     return this._tabsWrapper;
   },
 
-  saveScrollbarState() {
-    this._scrollbarState = this.tabsWrapper.scrollTop;
-  },
-
-  restoreScrollbarState() {
-    this.tabsWrapper.scrollTop = this._scrollbarState;
-  },
-
   onTabClose(event = undefined) {
     if (!event?.target?._closedInMultiselection) {
       this.updateTabsToolbar();
-      this.restoreScrollbarState();
     }
   },
 
@@ -407,7 +397,11 @@ var gZenUIManager = {
   },
 
   urlbarTrim(aURL) {
-    if (gZenVerticalTabsManager._hasSetSingleToolbar && this.urlbarShowDomainOnly) {
+    if (
+      gZenVerticalTabsManager._hasSetSingleToolbar &&
+      this.urlbarShowDomainOnly &&
+      !gURLBar.hasAttribute('breakout-extend')
+    ) {
       let url = BrowserUIUtils.removeSingleTrailingSlashFromURL(aURL);
       return url.startsWith('https://') ? url.split('/')[2] : url;
     }
@@ -416,14 +410,27 @@ var gZenUIManager = {
 
   // Section: Notification messages
   _createToastElement(messageId, options) {
+    const createButton = () => {
+      const button = document.createXULElement('button');
+      button.id = options.button.id;
+      button.classList.add('footer-button');
+      button.classList.add('primary');
+      button.addEventListener('command', options.button.command);
+      return button;
+    };
+
     // Check if this message ID already exists
     for (const child of this._toastContainer.children) {
       if (child._messageId === messageId) {
-        if (options.button && child.querySelector('button')) {
-          const button = child.querySelector('button');
-          const clone = button.cloneNode(true);
-          button.replaceWith(clone);
-          clone.addEventListener('command', options.button.command);
+        child.removeAttribute('button');
+        if (options.button) {
+          const button = createButton();
+          const existingButton = child.querySelector('button');
+          if (existingButton) {
+            existingButton.remove();
+          }
+          child.appendChild(button);
+          child.setAttribute('button', true);
         }
         return [child, true];
       }
@@ -441,11 +448,7 @@ var gZenUIManager = {
     }
     wrapper.appendChild(element);
     if (options.button) {
-      const button = document.createXULElement('button');
-      button.id = options.button.id;
-      button.classList.add('footer-button');
-      button.classList.add('primary');
-      button.addEventListener('command', options.button.command);
+      const button = createButton();
       wrapper.appendChild(button);
       wrapper.setAttribute('button', true);
     }
@@ -770,7 +773,7 @@ var gZenVerticalTabsManager = {
       // on purpose, we set the orient to horizontal, because the arrowScrollbox is vertical
       gBrowser.tabContainer.arrowScrollbox.scrollbox.setAttribute(
         'orient',
-        isVerticalTabs && ZenWorkspaces.workspaceEnabled ? 'horizontal' : 'vertical'
+        isVerticalTabs ? 'vertical' : 'horizontal'
       );
 
       const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
@@ -782,7 +785,9 @@ var gZenVerticalTabsManager = {
         document.documentElement.removeAttribute('zen-right-side');
       }
 
+      delete this._hadSidebarCollapse;
       if (isSidebarExpanded) {
+        this._hadSidebarCollapse = !document.documentElement.hasAttribute('zen-sidebar-expanded');
         this.navigatorToolbox.setAttribute('zen-sidebar-expanded', 'true');
         document.documentElement.setAttribute('zen-sidebar-expanded', 'true');
         gBrowser.tabContainer.setAttribute('expanded', 'true');
@@ -793,6 +798,7 @@ var gZenVerticalTabsManager = {
       }
 
       const appContentNavbarContaienr = document.getElementById('zen-appcontent-navbar-container');
+      const appContentNavbarWrapper = document.getElementById('zen-appcontent-navbar-wrapper');
       let shouldHide = false;
       if (
         ((!isRightSide && this.isWindowsStyledButtons) ||
@@ -800,10 +806,10 @@ var gZenVerticalTabsManager = {
           (isCompactMode && isSingleToolbar && this.isWindowsStyledButtons)) &&
         isSingleToolbar
       ) {
-        appContentNavbarContaienr.setAttribute('should-hide', 'true');
+        appContentNavbarWrapper.setAttribute('should-hide', 'true');
         shouldHide = true;
       } else {
-        appContentNavbarContaienr.removeAttribute('should-hide');
+        appContentNavbarWrapper.removeAttribute('should-hide');
       }
 
       // Check if the sidebar is in hover mode
@@ -981,6 +987,7 @@ var gZenVerticalTabsManager = {
   },
 
   async renameTabKeydown(event) {
+    event.stopPropagation();
     if (event.key === 'Enter') {
       let label = this._tabEdited.querySelector('.tab-label-container-editing');
       let input = this._tabEdited.querySelector('#tab-label-input');

src/zen/common/ZenUIMigration.mjs

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

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

@@ -62,15 +62,6 @@
   }
 }
 
-@keyframes zen-main-app-wrapper-animation {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
 @keyframes zen-jello-out-animation {
   0% {
     transform: scale3d(1, 1, 1);

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

@@ -10,13 +10,15 @@
     position: relative;
     overflow: hidden;
 
-    :root:not([zen-no-padding='true']) & {
-      border-radius: var(--zen-native-inner-radius);
-      box-shadow: var(--zen-big-shadow);
-    }
+    &.browserSidebarContainer {
+      :root:not([zen-no-padding='true']) & {
+        border-radius: var(--zen-native-inner-radius);
+        box-shadow: var(--zen-big-shadow);
+      }
 
-    & browser[transparent='true'] {
-      background: rgba(255, 255, 255, 0.1);
+      & browser[transparent='true'] {
+        background: rgba(255, 255, 255, 0.1);
+      }
     }
   }
 

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

@@ -32,57 +32,72 @@
 }
 
 #browser {
+  background: transparent !important;
   width: 100%;
-  background: var(--zen-main-browser-background) !important;
+}
 
-  will-change: background-color;
+#zen-browser-background {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  pointer-events: none;
 
-  &::after {
+  isolation: isolate;
+
+  &::after,
+  &::before {
     content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    position: absolute;
+    inset: 0;
     z-index: 0;
     pointer-events: none;
   }
 
-  &:not([post-animating='true'])::after {
-    transition: background-color var(--inactive-window-transition);
-  }
-
   @media -moz-pref('zen.theme.gradient') {
-    &[animating='true']::after {
-      background: var(--zen-main-browser-background-old);
-      backdrop-filter: blur(5px);
-      animation: zen-main-app-wrapper-animation 0.4s ease forwards;
+    &::after {
+      background: var(--zen-main-browser-background);
+      opacity: var(--zen-background-opacity);
       transition: 0s;
     }
+
+    &::before {
+      background: var(--zen-main-browser-background-old);
+      opacity: calc(1 - var(--zen-background-opacity));
+      transition: 0s;
+    }
+
+    :root[animating-background='true'] &::after {
+      mix-blend-mode: normal;
+    }
+  }
+
+  :root:not([animating-background='true']) &::before {
+    transition: background-color var(--inactive-window-transition);
   }
 
   @media (not (-moz-windows-mica)) and -moz-pref('zen.view.grey-out-inactive-windows') {
     transition: color var(--inactive-window-transition);
     :root:not([zen-welcome-stage]) &:-moz-window-inactive {
       color: var(--toolbox-textcolor-inactive);
-      &::after {
+      &::before {
         background-color: var(--toolbox-bgcolor-inactive);
       }
     }
   }
 
-  &::before {
+  #zen-browser-grain {
     content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    width: 100%;
+    height: 100%;
     background-image: url(chrome://browser/content/zen-images/grain-bg.png);
     pointer-events: none;
     z-index: 0;
     opacity: var(--zen-grainy-background-opacity, 0);
     mix-blend-mode: overlay;
+    transition: opacity 0.3s ease-in-out;
   }
 }
 
@@ -255,3 +270,17 @@
     opacity: 1;
   }
 }
+
+:root:not([customizing]) #TabsToolbar-customization-target > #alltabs-button {
+  display: none;
+}
+
+:root[customizing] #TabsToolbar-customization-target {
+  visibility: collapse;
+}
+
+:root[customizing] #zen-sidebar-top-buttons-customization-target {
+  border: 1px dashed;
+  border-radius: 2px;
+  margin: 10px 2px 0 0;
+}

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

@@ -34,8 +34,6 @@
   --uc-permission-itemcontainer-padding-block: 8px;
   --uc-permission-item-margin-block: 4px;
   --uc-permission-item-padding-inline: 16px;
-
-  --panel-separator-color: var(--zen-colors-border);
   --zen-panel-separator-width: 1px;
 }
 
@@ -283,15 +281,6 @@ menuseparator {
   display: none;
 }
 
-/* Context menu */
-menu,
-menuitem {
-  &:where([_moz-menuactive]:not([disabled='true'])) {
-    background-color: var(--button-hover-bgcolor);
-    color: var(--button-hover-color);
-  }
-}
-
 /*Bookmark workspace selector styles*/
 .workspace-dropdown {
   position: relative;
@@ -373,7 +362,7 @@ menuitem {
     gap: 10px;
     z-index: 1000;
     padding: var(--zen-toast-padding);
-    border-radius: 14px;
+    border-radius: calc(var(--zen-native-inner-radius) + 6px);
     background: linear-gradient(
       170deg,
       var(--zen-primary-color) -40%,
@@ -381,7 +370,7 @@ menuitem {
     );
     color: var(--button-primary-color);
     box-shadow: 0 0 14px 3px rgba(0, 0, 0, 0.05);
-    border: 1px solid rgba(0, 0, 0, 0.1);
+    border: 1px solid light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
     display: flex;
     font-weight: 600;
     align-items: center;
@@ -404,11 +393,12 @@ menuitem {
     }
 
     & button {
+      color-scheme: dark;
       width: min-content;
       padding: 0 12px !important;
       min-width: unset !important;
       margin: 0px !important;
-      border-radius: 8px !important;
+      border-radius: calc(var(--zen-native-inner-radius) + 2px) !important;
 
       :root[zen-right-side='true'] & {
         order: -1;

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

@@ -8,7 +8,7 @@
 #zen-tabbox-wrapper {
   & #sidebar-splitter {
     opacity: 0;
-    margin: 0 calc(-1 * var(--zen-element-separation));
+    margin: 0 calc(-1 * var(--zen-element-separation) + 2px);
   }
 
   & #sidebar-box {
@@ -27,11 +27,11 @@
 
   & #tabbrowser-tabbox[sidebar-positionend] {
     & #sidebar-box {
-      order: 7 !important;
+      order: 8 !important;
     }
 
     & #sidebar-splitter {
-      order: 6 !important;
+      order: 7 !important;
     }
   }
 }

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

@@ -19,6 +19,8 @@
   --zen-border-radius: 7px;
   --zen-primary-color: #ffb787;
 
+  --zen-background-opacity: 1;
+
   /* Branding */
   --zen-branding-dark: #1d1d1d;
   --zen-branding-coral: #f76f53;
@@ -197,6 +199,16 @@
     --zen-themed-toolbar-bg-transparent: transparent;
   }
 
+  &[zen-private-window='true'] {
+    --zen-main-browser-background: linear-gradient(
+      130deg,
+      light-dark(rgb(247, 217, 255), rgb(10, 6, 11)) 0%,
+      light-dark(rgb(242, 198, 255), rgb(19, 7, 22)) 100%
+    );
+    --zen-main-browser-background-toolbar: var(--zen-main-browser-background);
+    --zen-primary-color: light-dark(rgb(93, 42, 107), rgb(110, 48, 125)) !important;
+  }
+
   --toolbar-field-background-color: var(--zen-colors-input-bg) !important;
   --arrowpanel-background: var(--zen-dialog-background) !important;
 

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

@@ -8,6 +8,6 @@
   background: transparent;
 }
 
-:root[inDOMFullscreen='true'] #zen-appcontent-navbar-container {
+:root[inDOMFullscreen='true'] #zen-appcontent-navbar-wrapper {
   visibility: collapse;
 }

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

@@ -24,12 +24,11 @@
   border-radius: calc(var(--toolbarbutton-border-radius) - 2px);
   --urlbarView-results-padding: 10px !important;
 
-  :root:not([zen-single-toolbar='true']) &[zen-floating-urlbar='true'] {
-    --urlbar-container-padding: 2px !important;
-  }
-
   --urlbar-margin-inline: 5px;
   --urlbar-container-padding: 5px;
+  :root[zen-single-toolbar='true'] {
+    --urlbar-container-padding: 4px;
+  }
 }
 
 :root:not([zen-single-toolbar='true']) #urlbar:not([zen-floating-urlbar='true']) {
@@ -102,6 +101,10 @@
   outline: none !important;
 }
 
+#urlbar .urlbar-input {
+  border-radius: 0 !important;
+}
+
 :root[zen-single-toolbar='true'] #urlbar:not([breakout-extend='true']) {
   & #urlbar-input {
     cursor: default;
@@ -175,7 +178,7 @@
       --zen-urlbar-background-transparent,
       var(--zen-urlbar-background-base)
     ) !important;
-    box-shadow: 0px 0px 10rem -2px rgba(0, 0, 0, 0.9) !important;
+    box-shadow: 0px 0px 90px -10px rgba(0, 0, 0, 0.6) !important;
     backdrop-filter: none !important;
     border-radius: 12px !important;
     outline: 0.5px solid light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15)) !important;

src/zen/common/zen-sets.js

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

src/zen/compact-mode/ZenCompactMode.mjs

@@ -51,7 +51,7 @@ var gZenCompactModeManager = {
 
     gZenUIManager.addPopupTrackingAttribute(this.sidebar);
     gZenUIManager.addPopupTrackingAttribute(
-      document.getElementById('zen-appcontent-navbar-container')
+      document.getElementById('zen-appcontent-navbar-wrapper')
     );
 
     // Clear hover states when window state changes (minimize, maximize, etc.)
@@ -76,7 +76,14 @@ var gZenCompactModeManager = {
     return lazyCompactMode.mainAppWrapper.getAttribute('zen-compact-mode') === 'true';
   },
 
+  get shouldBeCompact() {
+    return !document.documentElement.getAttribute('chromehidden').includes('toolbar');
+  },
+
   set preference(value) {
+    if (!this.shouldBeCompact) {
+      value = false;
+    }
     if (
       this.preference === value ||
       document.documentElement.hasAttribute('zen-compact-animating')
@@ -201,18 +208,33 @@ var gZenCompactModeManager = {
     }
     let sidebarWidth = this.sidebar.getBoundingClientRect().width;
     if (sidebarWidth > 1) {
-      gZenUIManager.restoreScrollbarState();
+      if (this.preference && gZenVerticalTabsManager._prefsSidebarExpanded) {
+        sidebarWidth = Math.max(sidebarWidth, 150);
+      }
       // Second variable to get the genuine width of the sidebar
       this.sidebar.style.setProperty('--actual-zen-sidebar-width', `${sidebarWidth}px`);
       window.dispatchEvent(new window.Event('resize')); // To recalculate the layout
-      if (event && this.preference) {
+      if (
+        event &&
+        this.preference &&
+        gZenVerticalTabsManager._prefsSidebarExpanded &&
+        !gZenVerticalTabsManager._hadSidebarCollapse
+      ) {
         return;
       }
+      delete gZenVerticalTabsManager._hadSidebarCollapse;
       this.sidebar.style.setProperty('--zen-sidebar-width', `${sidebarWidth}px`);
     }
     return sidebarWidth;
   },
 
+  get canHideSidebar() {
+    return (
+      Services.prefs.getBoolPref('zen.view.compact.hide-tabbar') ||
+      gZenVerticalTabsManager._hasSetSingleToolbar
+    );
+  },
+
   animateCompactMode() {
     return new Promise((resolve) => {
       // Get the splitter width before hiding it (we need to hide it before animating on right)
@@ -222,9 +244,7 @@ var gZenCompactModeManager = {
         .getElementById('zen-sidebar-splitter')
         .getBoundingClientRect().width;
       const isCompactMode = this.preference;
-      const canHideSidebar =
-        Services.prefs.getBoolPref('zen.view.compact.hide-tabbar') ||
-        gZenVerticalTabsManager._hasSetSingleToolbar;
+      const canHideSidebar = this.canHideSidebar;
       let canAnimate =
         lazyCompactMode.COMPACT_MODE_CAN_ANIMATE_SIDEBAR && !this.isSidebarPotentiallyOpen();
       if (typeof this._wasInCompactMode !== 'undefined') {
@@ -240,6 +260,7 @@ var gZenCompactModeManager = {
       this.sidebar.style.removeProperty('transform');
       window.requestAnimationFrame(() => {
         let sidebarWidth = this.getAndApplySidebarWidth();
+        const elementSeparation = ZenThemeModifier.elementSeparation;
         if (!canAnimate) {
           this.sidebar.removeAttribute('animate');
           document.documentElement.removeAttribute('zen-compact-animating');
@@ -247,17 +268,52 @@ var gZenCompactModeManager = {
           this.getAndApplySidebarWidth({});
           this._ignoreNextResize = true;
 
+          // TODO: Work on this a bit more, needs polishing
+          if (lazyCompactMode.COMPACT_MODE_CAN_ANIMATE_SIDEBAR && false) {
+            gZenUIManager.motion
+              .animate(
+                [
+                  this.sidebar,
+                  ...(gZenVerticalTabsManager._hasSetSingleToolbar &&
+                  !gURLBar.hasAttribute('zen-floating-urlbar')
+                    ? [gURLBar.textbox]
+                    : []),
+                ],
+                {
+                  transform: [
+                    `translateY(${((isCompactMode ? -1 : 1) * elementSeparation) / 2}px) translateX(${
+                      isCompactMode
+                        ? (this.sidebarIsOnRight ? elementSeparation : -elementSeparation) / 2
+                        : (this.sidebarIsOnRight ? -elementSeparation : elementSeparation) / 2
+                    }px)`,
+                    `translateY(0px) translateX(0px)`,
+                  ],
+                },
+                {
+                  ease: 'easeIn',
+                  type: 'spring',
+                  bounce: 0,
+                  duration: 0.2,
+                }
+              )
+              .then(() => {
+                this.sidebar.style.transform = '';
+                gURLBar.textbox.style.transform = '';
+              });
+          }
+
           resolve();
           return;
         }
         if (canHideSidebar && isCompactMode) {
-          const elementSeparation = ZenThemeModifier.elementSeparation;
           if (document.documentElement.hasAttribute('zen-sidebar-expanded')) {
             sidebarWidth -= 0.5 * splitterWidth;
             if (elementSeparation < splitterWidth) {
               // Subtract from the splitter width to end up with the correct element separation
               sidebarWidth += 1.5 * splitterWidth - elementSeparation;
             }
+          } else {
+            sidebarWidth -= elementSeparation;
           }
           gZenUIManager.motion
             .animate(
@@ -406,7 +462,7 @@ var gZenCompactModeManager = {
               keepHoverDuration: 100,
             },
             {
-              element: document.getElementById('zen-appcontent-navbar-container'),
+              element: document.getElementById('zen-appcontent-navbar-wrapper'),
               screenEdge: 'top',
             },
           ]),
@@ -586,7 +642,7 @@ var gZenCompactModeManager = {
   },
 
   toggleToolbar() {
-    let toolbar = document.getElementById('zen-appcontent-navbar-container');
+    let toolbar = document.getElementById('zen-appcontent-navbar-wrapper');
     toolbar.toggleAttribute('zen-user-show');
   },
 
@@ -616,7 +672,8 @@ var gZenCompactModeManager = {
       !this.isSidebarPotentiallyOpen() &&
       this._canShowBackgroundTabToast &&
       !gZenGlanceManager._animating &&
-      !this._nextTimeWillBeActive
+      !this._nextTimeWillBeActive &&
+      this.canHideSidebar
     ) {
       gZenUIManager.showToast('zen-background-tab-opened-toast');
     }

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

@@ -38,11 +38,11 @@
         padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
       }
 
-      &:not([zen-window-buttons-reversed='true']) #zen-appcontent-navbar-container #nav-bar {
+      &:not([zen-window-buttons-reversed='true']) #zen-appcontent-navbar-wrapper #nav-bar {
         margin-left: var(--zen-element-separation) !important;
       }
 
-      &[zen-window-buttons-reversed='true'] #zen-appcontent-navbar-container #nav-bar {
+      &[zen-window-buttons-reversed='true'] #zen-appcontent-navbar-wrapper #nav-bar {
         margin-right: var(--zen-element-separation) !important;
         margin-left: calc(var(--zen-element-separation) - 3px) !important;
       }
@@ -64,12 +64,17 @@
           top: 0;
           bottom: var(--zen-element-separation);
           padding: 0 var(--zen-compact-float) !important;
-
           :root[zen-single-toolbar='true'] & {
             top: calc(var(--zen-element-separation) / 2);
             height: calc(100% - var(--zen-element-separation));
           }
-
+          :root:not([zen-single-toolbar='true']) & {
+            top: calc(var(--zen-element-separation) / -2);
+            height: calc(100% - var(--zen-toolbar-height));
+            @media -moz-pref('zen.view.compact.hide-toolbar') {
+              height: 100%;
+            }
+          }
           & #zen-sidebar-top-buttons {
             margin: 0 0 calc(var(--zen-toolbox-padding) / 2) 0;
           }
@@ -114,7 +119,8 @@
         padding: var(--zen-toolbox-padding) !important;
         :root:not([zen-sidebar-expanded='true']) & {
           padding: var(--zen-toolbox-padding) 0 !important;
-          max-width: var(--zen-sidebar-width);
+          max-width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding) * 2);
+          width: var(--zen-sidebar-width);
         }
         position: relative;
         min-width: var(--zen-toolbox-min-width);
@@ -166,6 +172,7 @@
           z-index: 0;
           opacity: var(--zen-grainy-background-opacity, 0);
           mix-blend-mode: overlay;
+          transition: opacity 0.3s ease-in-out;
         }
       }
 
@@ -299,9 +306,9 @@
               visibility: visible;
             }
 
-            left: calc(var(--zen-element-separation) / -2);
+            left: calc(var(--zen-element-separation) / -2 - 1px);
             :root[zen-right-side='true'] & {
-              right: calc(var(--zen-element-separation) / -2);
+              right: calc(var(--zen-element-separation) / -2 - 1px);
               left: auto;
             }          
           }
@@ -334,68 +341,77 @@
         margin-top: calc(var(--zen-element-separation) * 2) !important;
       }
 
-      & #zen-appcontent-navbar-container {
+      & #zen-appcontent-navbar-wrapper {
         --zen-compact-toolbar-offset: 5px;
         position: absolute;
-        top: calc((-1 * var(--zen-toolbar-height)) + var(--zen-element-separation) + 1px);
+        top: calc(-1 * var(--zen-toolbar-height) + 1px);
         left: 0;
         z-index: 20;
-        box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3) !important;
-        border-bottom-left-radius: var(--zen-border-radius);
-        border-bottom-right-radius: var(--zen-border-radius);
-        border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
-        border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
         transition: all 0.15s ease;
         width: 100%;
-        opacity: 0;
-        background: var(--zen-dialog-background);
 
         max-height: var(--zen-toolbar-height);
         overflow: hidden;
 
-        & > * {
-          position: relative !important;
-        }
-
         & #urlbar:not([breakout-extend='true']) {
           opacity: 0 !important;
         }
 
-        @media -moz-pref('zen.view.compact.color-toolbar') {
-          background-attachment: fixed;
-          background: var(--zen-main-browser-background-toolbar);
-          background-size: 100% 2000px;
-          border-bottom: 1px solid var(--zen-colors-border);
+        & #zen-appcontent-navbar-container {
+          visibility: hidden;
+
+          box-shadow: var(--zen-big-shadow);
+          border-bottom-left-radius: var(--zen-border-radius);
+          border-bottom-right-radius: var(--zen-border-radius);
+          :root:not([sizemode='maximized']) & {
+            border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
+            border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
+          }
+          transition: all 0.15s ease;
+          width: 100%;
+          background: var(--zen-dialog-background);
+
+          & > * {
+            position: relative !important;
+          }
+
+          @media -moz-pref('zen.view.compact.color-toolbar') {
+            background-attachment: fixed;
+            background: var(--zen-main-browser-background-toolbar);
+            background-size: 100% 2000px;
+          }
         }
       }
 
-      & #zen-appcontent-navbar-container[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)),
-      & #zen-appcontent-navbar-container[zen-user-show],
-      & #zen-appcontent-navbar-container[has-popup-menu],
-      & #zen-appcontent-navbar-container:has(
+      & #zen-appcontent-navbar-wrapper[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)),
+      & #zen-appcontent-navbar-wrapper[zen-user-show],
+      & #zen-appcontent-navbar-wrapper[has-popup-menu],
+      & #zen-appcontent-navbar-wrapper:has(
           *:is([panelopen='true'], [open='true'], #urlbar:focus-within, [breakout-extend='true']):not(#urlbar[zen-floating-urlbar='true']):not(.zen-compact-mode-ignore)
         ) {
-        opacity: 1;
+        & #zen-appcontent-navbar-container {
+          visibility: visible !important;
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-image: url(chrome://browser/content/zen-images/grain-bg.png);
+            pointer-events: none;
+            z-index: 0;
+            opacity: var(--zen-grainy-background-opacity, 0);
+            mix-blend-mode: overlay;
+            transition: opacity 0.3s ease-in-out;
+          }
+        }
         border-top-width: 1px;
 
         top: -1px;
         overflow: initial;
         max-height: unset;
 
-        &::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background-image: url(chrome://browser/content/zen-images/grain-bg.png);
-          pointer-events: none;
-          z-index: 0;
-          opacity: var(--zen-grainy-background-opacity, 0);
-          mix-blend-mode: overlay;
-        }
-
         & #urlbar {
           opacity: 1 !important;
         }
@@ -420,7 +436,7 @@
   }
   @media -moz-pref('zen.view.compact.hide-toolbar') {
     &:not([zen-single-toolbar='true']) {
-      & #zen-appcontent-navbar-container {
+      & #zen-appcontent-navbar-wrapper {
         opacity: 0;
       }
     }

src/zen/folders/ZenFolders.mjs

@@ -81,6 +81,7 @@
       if (group.hasAttribute('split-view-group') && !this._piningFolder) {
         this._piningFolder = true;
         for (const otherTab of group.tabs) {
+          gZenPinnedTabManager.resetPinChangedUrl(otherTab);
           if (tab === otherTab) {
             continue;
           }
@@ -111,7 +112,7 @@
           gBrowser.unpinTab(otherTab);
         }
         this._piningFolder = false;
-        ZenWorkspaces.activeWorkspaceStrip.prepend(group);
+        gZenWorkspaces.activeWorkspaceStrip.prepend(group);
         gBrowser.tabContainer._invalidateCachedTabs();
         return true;
       }

src/zen/glance/ZenGlanceManager.mjs

@@ -367,6 +367,13 @@
               this.#currentParentTab._visuallySelected = false;
             }
 
+            if (
+              this.#currentParentTab.linkedBrowser &&
+              !this.#currentParentTab.hasAttribute('split-view')
+            ) {
+              this.#currentParentTab.linkedBrowser.zenModeActive = false;
+            }
+
             // reset everything
             this.browserWrapper = null;
             this.overlay = null;
@@ -445,7 +452,7 @@
           .classList.remove('zen-glance-background');
       }
       if (!justAnimateParent && this.overlay) {
-        if (parentHasBrowser) {
+        if (parentHasBrowser && !this.#currentParentTab.hasAttribute('split-view')) {
           if (closeParentTab) {
             this.#currentParentTab.linkedBrowser
               .closest('.browserSidebarContainer')
@@ -609,7 +616,7 @@
     }
 
     finishOpeningGlance() {
-      ZenWorkspaces.updateTabsContainers();
+      gZenWorkspaces.updateTabsContainers();
       this.browserWrapper.removeAttribute('animate-full');
       this.overlay.classList.remove('zen-glance-overlay');
       this._clearContainerStyles(this.browserWrapper);
@@ -705,7 +712,7 @@
     }
 
     getTabOrGlanceParent(tab) {
-      if (tab.hasAttribute('glance-id')) {
+      if (tab?.hasAttribute('glance-id')) {
         const parentTab = this.#glances.get(tab.getAttribute('glance-id')).parentTab;
         if (parentTab) {
           return parentTab;
@@ -713,6 +720,27 @@
       }
       return tab;
     }
+
+    shouldShowDeckSelected(currentPanel, oldPanel) {
+      // Dont remove if it's a glance background and current panel corresponds to a glance
+      const currentBrowser = currentPanel?.querySelector('browser');
+      const oldBrowser = oldPanel?.querySelector('browser');
+      if (!currentBrowser || !oldBrowser) {
+        return false;
+      }
+      const currentTab = gBrowser.getTabForBrowser(currentBrowser);
+      const oldTab = gBrowser.getTabForBrowser(oldBrowser);
+      if (currentTab && oldTab) {
+        const currentGlanceID = currentTab.getAttribute('glance-id');
+        const oldGlanceID = oldTab.getAttribute('glance-id');
+        if (currentGlanceID && oldGlanceID) {
+          return (
+            currentGlanceID === oldGlanceID && oldPanel.classList.contains('zen-glance-background')
+          );
+        }
+      }
+      return false;
+    }
   }
 
   window.gZenGlanceManager = new ZenGlanceManager();

src/zen/media/ZenMediaController.mjs

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

src/zen/mods/ZenThemesCommon.mjs

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

src/zen/mods/ZenThemesImporter.mjs

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

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

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

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

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

src/zen/split-view/ZenViewSplitter.mjs

@@ -147,7 +147,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
     if (groupIndex < 0) {
       return;
     }
-    this.removeTabFromGroup(tab, groupIndex, event.forUnsplit);
+    this.removeTabFromGroup(tab, groupIndex, true);
   }
 
   /**
@@ -188,6 +188,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
         this.resetTabState(remainingTab, forUnsplit);
       }
       this.removeGroup(groupIndex);
+      gBrowser.selectedTab = remainingTabs[remainingTabs.length - 1];
     } else {
       const node = this.getSplitNodeFromTab(tab);
       const toUpdate = this.removeNode(node);
@@ -334,6 +335,10 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       ]);
       if (this._finishAllAnimatingPromise) {
         this._finishAllAnimatingPromise.then(() => {
+          draggedTab.linkedBrowser.docShellIsActive = false;
+          draggedTab.linkedBrowser
+            .closest('.browserSidebarContainer')
+            .classList.remove('deck-selected');
           this.fakeBrowser.addEventListener('dragleave', this.onBrowserDragEndToSplit);
           this._canDrop = true;
           draggedTab._visuallySelected = true;
@@ -923,7 +928,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       window.gContextMenu.mediaURL ||
       window.gContextMenu.contentData.docLocation ||
       window.gContextMenu.target.ownerDocument.location.href;
-    const currentTab = window.gBrowser.selectedTab;
+    const currentTab = gZenGlanceManager.getTabOrGlanceParent(window.gBrowser.selectedTab);
     const newTab = this.openAndSwitchToTab(url);
     this.splitTabs([currentTab, newTab]);
   }
@@ -1364,7 +1369,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
     }
     const container = event.currentTarget.closest('.browserSidebarContainer');
     const tab = window.gBrowser.tabs.find(
-      (t) => t.linkedBrowser.closest('.browserSidebarContainer') === container
+      (t) => t.linkedBrowser?.closest('.browserSidebarContainer') === container
     );
     if (tab) {
       window.gBrowser.selectedTab = tab;
@@ -1629,7 +1634,9 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
         : containerRect.left - padding - 5,
       event.clientY
     );
-    const browser = dropTarget?.closest('browser');
+    const browser =
+      dropTarget?.closest('browser') ??
+      dropTarget?.closest('.browserSidebarContainer')?.querySelector('browser');
 
     if (!browser) {
       this._maybeRemoveFakeBrowser(false);
@@ -1643,7 +1650,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       browserContainer.style.opacity = '0';
     }
 
-    const droppedOnTab = gBrowser.getTabForBrowser(browser);
+    const droppedOnTab = gZenGlanceManager.getTabOrGlanceParent(gBrowser.getTabForBrowser(browser));
     if (droppedOnTab && droppedOnTab !== draggedTab) {
       // Calculate which side of the target browser the drop occurred
       // const browserRect = browser.getBoundingClientRect();

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

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

src/zen/tabs/ZenPinnedTabManager.mjs

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

src/zen/tabs/ZenTabUnloader.mjs

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

src/zen/tabs/zen-tabs.css

@@ -21,7 +21,7 @@
    Single Toolbar Mode - Top Bar Handling (Includes External CSS)
    ========================================================================== */
 :root[zen-single-toolbar='true']:not([customizing]) {
-  #zen-appcontent-navbar-container {
+  #zen-appcontent-navbar-wrapper {
     display: flex;
     -moz-window-dragging: drag; /* Allow dragging the window via this bar */
     min-height: var(--zen-element-separation);

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

@@ -1,6 +1,10 @@
 height: var(--zen-toolbar-height);
 z-index: 1;
 
+#zen-appcontent-navbar-container {
+  display: flex;
+}
+
 @media -moz-pref('zen.view.hide-window-controls') {
   & {
     transition:

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

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

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

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

src/zen/tests/container_essentials/browser.toml

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

src/zen/tests/container_essentials/browser_container_auto_switch.js

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

src/zen/tests/container_essentials/browser_container_specific_essentials.js

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

src/zen/tests/glance/browser_glance_close.js

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

src/zen/tests/pinned/browser.toml

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

src/zen/tests/pinned/browser_pinned_created.js

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

src/zen/tests/pinned/browser_pinned_to_essential.js

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

src/zen/tests/workspaces/browser.toml

@@ -5,3 +5,4 @@ support-files = [
 
 ["browser_basic_workspaces.js"]
 ["browser_workspace_bookmarks.js"]
+["browser_double_click_newtab.js"]

src/zen/tests/workspaces/browser_basic_workspaces.js

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

src/zen/tests/workspaces/browser_double_click_newtab.js

@@ -0,0 +1,14 @@
+/* Any copyright is dedicated to the Public Domain.
+   https://creativecommons.org/publicdomain/zero/1.0/ */
+
+'use strict';
+
+add_task(async function test_Check_Creation() {
+  const placeToDoubleClick = gZenWorkspaces.activeWorkspaceStrip;
+  EventUtils.sendMouseEvent({ type: 'dblclick' }, placeToDoubleClick, window);
+  await TestUtils.waitForCondition(() => gBrowser.tabs.length === 3, 'New tab should be opened.');
+
+  ok(true, 'New tab should be opened.');
+  await BrowserTestUtils.removeTab(gBrowser.tabs[2]);
+  ok(gBrowser.tabs.length === 2, 'There should be one tab.');
+});

src/zen/tests/workspaces/browser_workspace_bookmarks.js

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

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

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

src/zen/welcome/ZenWelcome.mjs

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

src/zen/welcome/zen-welcome.css

@@ -15,8 +15,13 @@
   -moz-window-dragging: drag;
 }
 
-:root[zen-welcome-stage] #zen-sidebar-splitter {
-  display: none;
+:root[zen-welcome-stage] {
+  min-width: 875px;
+  min-height: 560px;
+
+  #zen-sidebar-splitter {
+    display: none;
+  }
 }
 
 #zen-welcome-start {
@@ -30,6 +35,7 @@
     list-style-image: url(chrome://browser/skin/zen-icons/forward.svg);
     position: absolute;
     bottom: 10%;
+    padding: 0.8em !important;
   }
 
   #zen-welcome-title {

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -18,7 +18,8 @@
       super();
       if (
         !Services.prefs.getBoolPref('zen.theme.gradient', true) ||
-        !ZenWorkspaces.shouldHaveWorkspaces
+        !gZenWorkspaces.shouldHaveWorkspaces ||
+        gZenWorkspaces.privateWindowOrDisabled
       ) {
         return;
       }
@@ -66,7 +67,7 @@
     }
 
     async onDarkModeChange(event, skipUpdate = false) {
-      const currentWorkspace = await ZenWorkspaces.getActiveWorkspace();
+      const currentWorkspace = await gZenWorkspaces.getActiveWorkspace();
       this.onWorkspaceChange(currentWorkspace, skipUpdate);
     }
 
@@ -427,7 +428,7 @@
       dot.classList.add('zen-theme-picker-dot', 'hidden', 'custom');
       dot.style.opacity = 0;
       dot.style.setProperty('--zen-theme-picker-dot-color', color);
-      this.panel.querySelector('.zen-theme-picker-gradient').appendChild(dot);
+      this.panel.querySelector('#PanelUI-zen-gradient-generator-custom-list').prepend(dot);
       this.customColorInput.value = '';
       await this.updateCurrentWorkspace();
     }
@@ -1088,7 +1089,7 @@
         this.isDarkMode ? 0.2 : -0.5,
         `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`
       );
-      const color = result?.match(/\d+/g).map(Number);
+      const color = result?.match(/\d+/g)?.map(Number);
       if (!color || color.length !== 3) {
         return this.getNativeAccentColor();
       }
@@ -1105,7 +1106,7 @@
           return;
         }
         // Do not rebuild if the workspace is not the same as the current one
-        const windowWorkspace = await browser.ZenWorkspaces.getActiveWorkspace();
+        const windowWorkspace = await browser.gZenWorkspaces.getActiveWorkspace();
         if (windowWorkspace.uuid !== uuid && theme !== null) {
           return;
         }
@@ -1121,29 +1122,20 @@
           }
         }
 
-        const appWrapper = browser.document.getElementById('browser');
-        if (!skipUpdate && !this._animatingBackground) {
-          this._animatingBackground = true;
-          appWrapper.removeAttribute('animating');
+        const appBackground = browser.document.getElementById('zen-browser-background');
+        if (!skipUpdate) {
           browser.document.documentElement.style.setProperty(
             '--zen-main-browser-background-old',
             browser.document.documentElement.style.getPropertyValue('--zen-main-browser-background')
           );
-          browser.window.requestAnimationFrame(() => {
-            appWrapper.setAttribute('animating', 'true');
-            setTimeout(() => {
-              this._animatingBackground = false;
-              appWrapper.removeAttribute('animating');
-              appWrapper.setAttribute('post-animating', 'true');
-              browser.document.documentElement.style.removeProperty(
-                '--zen-main-browser-background-old'
-              );
-              setTimeout(() => {
-                // Reactivate the transition after the animation
-                appWrapper.removeAttribute('post-animating');
-              }, 100);
-            }, 300);
-          });
+          browser.document.documentElement.style.setProperty(
+            '--zen-background-opacity',
+            browser.gZenThemePicker.previousBackgroundOpacity
+          );
+          if (browser.gZenThemePicker.previousBackgroundResolve) {
+            browser.gZenThemePicker.previousBackgroundResolve();
+          }
+          delete browser.gZenThemePicker.previousBackgroundOpacity;
         }
 
         const button = browser.document.getElementById(
@@ -1264,6 +1256,7 @@
         );
         browser.gZenThemePicker.updateNoise(workspaceTheme.texture);
 
+        browser.gZenThemePicker.customColorList.innerHTML = '';
         for (const dot of workspaceTheme.gradientColors) {
           if (dot.isCustom) {
             browser.gZenThemePicker.addColorToCustomList(dot.c);
@@ -1374,13 +1367,13 @@
         this.currentRotation,
         this.currentTexture
       );
-      let currentWorkspace = await ZenWorkspaces.getActiveWorkspace();
+      let currentWorkspace = await gZenWorkspaces.getActiveWorkspace();
 
       if (!skipSave) {
         await ZenWorkspacesStorage.saveWorkspaceTheme(currentWorkspace.uuid, gradient);
-        await ZenWorkspaces._propagateWorkspaceData();
+        await gZenWorkspaces._propagateWorkspaceData();
         gZenUIManager.showToast('zen-panel-ui-gradient-generator-saved-message');
-        currentWorkspace = await ZenWorkspaces.getActiveWorkspace();
+        currentWorkspace = await gZenWorkspaces.getActiveWorkspace();
       }
 
       await this.onWorkspaceChange(currentWorkspace, true, skipSave ? gradient : null);

src/zen/workspaces/ZenWorkspace.mjs

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

src/zen/workspaces/ZenWorkspaceIcons.mjs

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

src/zen/workspaces/ZenWorkspacesStorage.mjs

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

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

@@ -0,0 +1,29 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+&:not(:hover) {
+  width: min(var(--zen-overflowed-workspace-button-width), 25px);
+  &::after {
+    content: '';
+    position: absolute;
+    width: 4px;
+    border-radius: 99px;
+    height: 4px;
+    background: color-mix(
+      in srgb,
+      var(--zen-primary-color) 10%,
+      light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4)) 90%
+    );
+    left: 50%;
+    top: 50%;
+    filter: saturate(140%) brightness(110%) !important;
+    transform: translate(-50%, -50%);
+  }
+
+  & .zen-workspace-icon {
+    display: none;
+  }
+}

src/zen/workspaces/zen-workspaces.css

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

surfer.json

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