From 94445283ac66c96efbc9882db68c661f09224bec Mon Sep 17 00:00:00 2001
From: Vijay A <vraravam@users.noreply.github.com>
Date: Thu, 28 Nov 2024 03:50:28 +0530
Subject: [PATCH 01/12] Add auto-release for twilight homebrew cask

---
 .github/workflows/build.yml | 37 +++++++++++++++++++++++++++++++------
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 33ccfa668..cd2de6f63 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -206,7 +206,7 @@ jobs:
       contents: write
     runs-on: ubuntu-latest
     needs: [build-data, check-release]
-    
+
     steps:
       - name: Install Node.js
         uses: actions/setup-node@v3
@@ -341,7 +341,7 @@ jobs:
         run: |
           npm install -g pnpm
           sudo apt-get update
-          sudo apt-get -y install libfuse2 desktop-file-utils appstream 
+          sudo apt-get -y install libfuse2 desktop-file-utils appstream
 
       - name: Download linux build
         uses: actions/download-artifact@v4
@@ -431,7 +431,7 @@ jobs:
           mkdir -p updates
           cp -a ../linux_update_manifest_generic/.  updates/
           cp -a ../linux_update_manifest_specific/.  updates/
-          cp -a ../linux_update_manifest_aarch64/.  updates/ 
+          cp -a ../linux_update_manifest_aarch64/.  updates/
 
           if [[ $RELEASE_BRANCH == 'alpha' ]]; then
             cp -a ../.github/workflows/object/windows-x64-signed-generic/update_manifest/.  updates/
@@ -664,10 +664,10 @@ jobs:
           git-token: ${{ secrets.DEPLOY_KEY }}
           delete-branch: true
 
-  release-homebrew:
+  release-homebrew-alpha:
     if: ${{ inputs.create_release && inputs.update_branch == 'alpha' }}
     permissions: write-all
-    name: Homebrew release
+    name: Homebrew release for alpha build
     needs: [release, mac, build-data]
     runs-on: macos-latest
 
@@ -683,8 +683,33 @@ jobs:
         with:
           username: zen-browser-auto
 
-      - name: Bump zen-browser
+      - name: Bump cask
         uses: Homebrew/actions/bump-packages@master
         with:
           token: ${{ secrets.DEPLOY_KEY }}
           casks: zen-browser
+
+  release-homebrew-twilight:
+    if: ${{ inputs.create_release && inputs.update_branch == 'twilight' }}
+    permissions: write-all
+    name: Homebrew release for twilight build
+    needs: [release, mac, build-data]
+    runs-on: macos-latest
+
+    steps:
+      - name: Set up Homebrew
+        uses: Homebrew/actions/setup-homebrew@master
+        with:
+          cask: true
+          test-bot: false
+
+      - name: Setup git
+        uses: Homebrew/actions/git-user-config@master
+        with:
+          username: zen-browser-auto
+
+      - name: Bump cask
+        uses: Homebrew/actions/bump-packages@master
+        with:
+          token: ${{ secrets.DEPLOY_KEY }}
+          casks: zen-browser@twilight

From d28fe8730d627bec581ec994f90fce263264adb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kristijan=20Ribari=C4=87?= <kriba13@gmail.com>
Date: Thu, 28 Nov 2024 09:13:50 +0100
Subject: [PATCH 02/12] feat: Add option to enable container-specific
 essentials

---
 src/browser/components/preferences/zenTabsManagement.inc.xhtml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/browser/components/preferences/zenTabsManagement.inc.xhtml b/src/browser/components/preferences/zenTabsManagement.inc.xhtml
index b69d8e951..4d44f572e 100644
--- a/src/browser/components/preferences/zenTabsManagement.inc.xhtml
+++ b/src/browser/components/preferences/zenTabsManagement.inc.xhtml
@@ -81,6 +81,9 @@
       <checkbox id="zenPinnedTabRestorePinnedTabsToPinnedUrl"
                 data-l10n-id="zen-pinned-tab-manager-restore-pinned-tabs-to-pinned-url"
                 preference="zen.pinned-tab-manager.restore-pinned-tabs-to-pinned-url"/>
+      <checkbox id="zenPinnedTabContainerSpecificEssentials"
+                data-l10n-id="zen-pinned-tab-manager-container-specific-essentials-enabled"
+                preference="zen.workspaces.container-specific-essentials-enabled"/>
 
       <hbox align="center">
             <label id="zenPinnedTabCloseShortcutBehaviorLabel" data-l10n-id="zen-pinned-tab-manager-close-shortcut-behavior-label"/>

From 83859c19254ba70b381b45d35e89cc88c669205c Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Thu, 28 Nov 2024 10:44:29 +0100
Subject: [PATCH 03/12] Update @zen-browser/surfer to version 1.6.4 and modify
 vertical tabs CSS for improved overflow indicator handling

---
 package.json                                           |  2 +-
 pnpm-lock.yaml                                         | 10 +++++-----
 .../base/content/zen-styles/zen-tabs/vertical-tabs.css |  6 ++++++
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index bc3c6cf97..14a77dbf4 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
   },
   "homepage": "https://github.com/zen-browser/core#readme",
   "dependencies": {
-    "@zen-browser/surfer": "^1.6.3"
+    "@zen-browser/surfer": "^1.6.4"
   },
   "devDependencies": {
     "husky": "^9.1.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9f9705861..46a49dd57 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@zen-browser/surfer':
-        specifier: ^1.6.3
-        version: 1.6.3
+        specifier: ^1.6.4
+        version: 1.6.4
     devDependencies:
       husky:
         specifier: ^9.1.5
@@ -119,8 +119,8 @@ packages:
   '@types/node@17.0.45':
     resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==}
 
-  '@zen-browser/surfer@1.6.3':
-    resolution: {integrity: sha512-OpBJu4c6AV4P1o9whtvp2BQjcqxS+fMbXJKtgKWuW7E8cfOLIMbHpuxCbTllO/LGz60T0aszxZRPbToTQuwPog==}
+  '@zen-browser/surfer@1.6.4':
+    resolution: {integrity: sha512-JmTHLHTbTLPgrakdU/m1KQgetPMQNGjYgGGVoi2AenvVDlJf3j+L2it0XehAqRFIQhXmbEuF1nSDV4Vla/vUUg==}
     hasBin: true
 
   ansi-escapes@7.0.0:
@@ -1003,7 +1003,7 @@ snapshots:
 
   '@types/node@17.0.45': {}
 
-  '@zen-browser/surfer@1.6.3':
+  '@zen-browser/surfer@1.6.4':
     dependencies:
       '@resvg/resvg-js': 1.4.0
       async-icns: 1.0.2
diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index e749532b0..c3355a6f0 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -299,6 +299,11 @@
     &::part(scrollbox) {
       gap: 0px !important;
     }
+
+    &::part(overflow-start-indicator),
+    &::part(overflow-end-indicator) {
+      display: none !important;
+    }
   }
 
   #vertical-pinned-tabs-container {
@@ -479,6 +484,7 @@
         &:is(:hover, [visuallyselected]) .tab-close-button {
           display: block;
           --tab-inline-padding: 0; /* Avoid weird padding */
+          margin-inline-end: 0 !important;
         }
 
         .tab-throbber,

From 583d55298ea958194adf2be6daf0e04b69a8d288 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Thu, 28 Nov 2024 10:48:23 +0100
Subject: [PATCH 04/12] Bump display versions for Zen Browser and Zen Twilight
 to 1.0.1-a.22 and 1.0.1-t.22 respectively

---
 surfer.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/surfer.json b/surfer.json
index eded62b5d..3ddaa0c64 100644
--- a/surfer.json
+++ b/surfer.json
@@ -18,7 +18,7 @@
       "brandShortName": "Zen Browser",
       "brandFullName": "Zen Browser",
       "release": {
-        "displayVersion": "1.0.1-a.21",
+        "displayVersion": "1.0.1-a.22",
         "github": {
           "repo": "zen-browser/desktop"
         },
@@ -40,7 +40,7 @@
       "brandShortName": "Zen Twilight",
       "brandFullName": "Zen Twilight",
       "release": {
-        "displayVersion": "1.0.1-t.21",
+        "displayVersion": "1.0.1-t.22",
         "github": {
           "repo": "zen-browser/desktop"
         }

From ec4e44fcf2174fc2e14a0dd7d80e6453bfa6de3c Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Thu, 28 Nov 2024 10:51:27 +0100
Subject: [PATCH 05/12] Update navigator-toolbox.inc.xhtml to optimize toolbar
 button visibility and enhance layout

---
 .../content/navigator-toolbox-inc-xhtml.patch    | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/browser/base/content/navigator-toolbox-inc-xhtml.patch b/src/browser/base/content/navigator-toolbox-inc-xhtml.patch
index d39865e50..9dfba3614 100644
--- a/src/browser/base/content/navigator-toolbox-inc-xhtml.patch
+++ b/src/browser/base/content/navigator-toolbox-inc-xhtml.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
-index eb2d8670874bd5bcaf9253caafb98444cb8cfcd9..eba11edbbcebe8201a6e1153d66a5b63ab62acc7 100644
+index eb2d8670874bd5bcaf9253caafb98444cb8cfcd9..51e6c01c279e0105ec8ac08df0763027179c0616 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
 @@ -2,7 +2,7 @@
@@ -29,7 +29,15 @@ index eb2d8670874bd5bcaf9253caafb98444cb8cfcd9..eba11edbbcebe8201a6e1153d66a5b63
        <toolbartabstop/>
        <hbox id="TabsToolbar-customization-target" flex="1">
          <toolbarbutton id="firefox-view-button"
-@@ -55,9 +55,14 @@
+@@ -40,6 +40,7 @@
+                        data-l10n-id="toolbar-button-firefox-view-2"
+                        role="button"
+                        aria-pressed="false"
++                       hidden="true"
+                        cui-areatype="toolbar"
+                        removable="true"/>
+ 
+@@ -55,9 +56,14 @@
  # significantly, there is an optimization in
  # DisplayPortUtils::MaybeCreateDisplayPortInFirstScrollFrameEncountered based
  # the current structure that we may want to revisit.
@@ -45,7 +53,7 @@ index eb2d8670874bd5bcaf9253caafb98444cb8cfcd9..eba11edbbcebe8201a6e1153d66a5b63
              <tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>
              <hbox id="tabbrowser-arrowscrollbox-periphery">
                <toolbartabstop/>
-@@ -100,11 +105,12 @@
+@@ -100,11 +106,12 @@
  #include private-browsing-indicator.inc.xhtml
      <toolbarbutton id="content-analysis-indicator"
                     class="toolbarbutton-1 content-analysis-indicator-icon"/>
@@ -61,7 +69,7 @@ index eb2d8670874bd5bcaf9253caafb98444cb8cfcd9..eba11edbbcebe8201a6e1153d66a5b63
    <toolbar id="nav-bar"
             class="browser-toolbar chromeclass-location"
             data-l10n-id="navbar-accessible"
-@@ -487,10 +493,12 @@
+@@ -487,10 +494,12 @@
                       consumeanchor="PanelUI-button"
                       data-l10n-id="appmenu-menu-button-closed2"/>
      </toolbaritem>

From a8831bfa7393d0ebc32cf5d4c0f52ae95bc4ab83 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Thu, 28 Nov 2024 10:52:08 +0100
Subject: [PATCH 06/12] Enable single toolbar mode in Zen Browser preferences

---
 src/browser/app/profile/zen-browser.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index f7df0d30a..9f9044756 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -121,7 +121,7 @@ pref('zen.view.sidebar-height-throttle', 200); // in ms
 pref('zen.view.sidebar-expanded.max-width', 400);
 
 pref('zen.view.show-bottom-border', false);
-pref('zen.view.use-single-toolbar', false, locked);
+pref('zen.view.use-single-toolbar', true);
 
 #ifndef XP_MACOSX
 pref('zen.view.hide-window-controls', true);

From 66254e79d37327fb8ca95ff2f32b10e20da0ad7a Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Thu, 28 Nov 2024 11:38:31 +0100
Subject: [PATCH 07/12] Added back collapsed toolbar mode!

---
 src/browser/app/profile/zen-browser.js        |   2 +
 .../base/content/ZenCustomizableUI.sys.mjs    |   2 +-
 src/browser/base/content/ZenUIManager.mjs     |  17 +-
 .../zen-styles/zen-tabs/vertical-tabs.css     | 150 +++++++++++++++++-
 .../base/content/zen-styles/zen-urlbar.css    |   4 +
 5 files changed, 171 insertions(+), 4 deletions(-)

diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index 9f9044756..2e8c1603e 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -122,6 +122,8 @@ pref('zen.view.sidebar-expanded.max-width', 400);
 
 pref('zen.view.show-bottom-border', false);
 pref('zen.view.use-single-toolbar', true);
+pref('zen.view.sidebar-expanded', true);
+pref('zen.view.sidebar-collapsed.hide-mute-button', true);
 
 #ifndef XP_MACOSX
 pref('zen.view.hide-window-controls', true);
diff --git a/src/browser/base/content/ZenCustomizableUI.sys.mjs b/src/browser/base/content/ZenCustomizableUI.sys.mjs
index c2359b748..212b810d8 100644
--- a/src/browser/base/content/ZenCustomizableUI.sys.mjs
+++ b/src/browser/base/content/ZenCustomizableUI.sys.mjs
@@ -45,7 +45,7 @@ export var ZenCustomizableUI = new (class {
         customizationtarget="zen-sidebar-top-buttons-customization-target"
         mode="icons">
         <hbox id="zen-sidebar-top-buttons-customization-target" class="customization-target" flex="1">
-          <toolbarbutton hidden="true" removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" data-l10n-id="sidebar-zen-expand" cui-areatype="toolbar" oncommand="gZenVerticalTabsManager.toggleExpand();"></toolbarbutton>
+          <toolbarbutton removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" data-l10n-id="sidebar-zen-expand" cui-areatype="toolbar" oncommand="gZenVerticalTabsManager.toggleExpand();"></toolbarbutton>
           <toolbarbutton removable="true" class="toolbarbutton-1 zen-sidebar-action-button zen-compact-mode-ignore" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
         </hbox>
       </toolbar>
diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs
index 8d6427e27..d7d39b63c 100644
--- a/src/browser/base/content/ZenUIManager.mjs
+++ b/src/browser/base/content/ZenUIManager.mjs
@@ -126,6 +126,7 @@ var gZenVerticalTabsManager = {
     Services.prefs.addObserver('zen.tabs.vertical.right-side', updateEvent);
     Services.prefs.addObserver('zen.view.sidebar-expanded.max-width', updateEvent);
     Services.prefs.addObserver('zen.view.use-single-toolbar', updateEvent);
+    Services.prefs.addObserver('zen.view.sidebar-expanded', updateEvent);
 
     this._toolbarOriginalParent = document.getElementById('nav-bar').parentElement;
 
@@ -154,6 +155,11 @@ var gZenVerticalTabsManager = {
     }
   },
 
+  toggleExpand() {
+    const newVal = !Services.prefs.getBoolPref('zen.view.sidebar-expanded');
+    Services.prefs.setBoolPref('zen.view.sidebar-expanded', newVal);
+  },
+
   get navigatorToolbox() {
     if (this._navigatorToolbox) {
       return this._navigatorToolbox;
@@ -202,15 +208,16 @@ var gZenVerticalTabsManager = {
     const topButtons = document.getElementById('zen-sidebar-top-buttons');
     const isCompactMode = Services.prefs.getBoolPref('zen.view.compact');
     const isVerticalTabs = Services.prefs.getBoolPref('zen.tabs.vertical');
+    const isSidebarExpanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded') && isVerticalTabs;
     const isRightSide = Services.prefs.getBoolPref('zen.tabs.vertical.right-side') && isVerticalTabs;
-    const isSingleToolbar = Services.prefs.getBoolPref('zen.view.use-single-toolbar') && isVerticalTabs;
+    const isSingleToolbar = Services.prefs.getBoolPref('zen.view.use-single-toolbar') && isVerticalTabs && isSidebarExpanded;
     const titlebar = document.getElementById('titlebar');
 
     gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
     gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
 
     const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
-    if (isRightSide && isVerticalTabs) {
+    if (isRightSide) {
       this.navigatorToolbox.setAttribute('zen-right-side', 'true');
       document.documentElement.setAttribute('zen-right-side', 'true');
     } else {
@@ -218,6 +225,12 @@ var gZenVerticalTabsManager = {
       document.documentElement.removeAttribute('zen-right-side');
     }
 
+    if (isSidebarExpanded) {
+      this.navigatorToolbox.setAttribute('zen-sidebar-expanded', 'true');
+    } else {
+      this.navigatorToolbox.removeAttribute('zen-sidebar-expanded');
+    }
+
     const appContentNavbarContaienr = document.getElementById('zen-appcontent-navbar-container');
     if ((!isRightSide && this.isWindowsStyledButtons) || (isRightSide && !this.isWindowsStyledButtons) || isCompactMode) {
       appContentNavbarContaienr.setAttribute('should-hide', 'true');
diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index c3355a6f0..27d44e825 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -327,12 +327,13 @@
   }
 
   /* Mark: toolbox as expanded */
-  #navigator-toolbox {
+  #navigator-toolbox[zen-sidebar-expanded='true'] {
     --zen-toolbox-min-width: fit-content;
     --tab-icon-end-margin: 8.5px;
     padding: var(--zen-toolbox-padding);
     padding-left: 0;
     padding-top: 0;
+    z-index: 1;
 
     & #titlebar {
       min-width: 150px;
@@ -499,6 +500,153 @@
     }
   }
 
+  /* Mark: toolbox as collapsed */
+  #navigator-toolbox:not([zen-sidebar-expanded='true']) {
+    --tab-min-width: 36px !important;
+    /* Important: When changin this value, make sure expand on hover doesn't break! */
+    --zen-toolbox-padding: calc(var(--zen-element-separation) / 2 + 1px);
+    --zen-toolbox-max-width: calc(var(--tab-min-width) + var(--zen-toolbox-padding) * 2);
+    max-width: var(--zen-toolbox-max-width) !important;
+    min-width: var(--zen-toolbox-max-width) !important;
+    --zen-tabbar-offset: 1px; /* Fix the tabbar offset, because there's a shadow */
+    &[zen-right-side='true'] {
+      margin-left: var(--zen-tabbar-offset);
+    }
+    &:not([zen-right-side='true']) {
+      margin-right: var(--zen-tabbar-offset);
+    }
+    & #zen-current-workspace-indicator-name,
+    & .toolbarbutton-text {
+      display: none !important;
+    }
+    & #zen-current-workspace-indicator {
+      padding-left: 0;
+      padding-right: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: .4;
+    }
+    & #zen-essentials-container {
+      justify-content: center;
+    }
+    & #vertical-tabs-newtab-button {
+      padding: 0 !important;
+      background: transparent !important;
+    }
+    :root[customizing] & #zen-sidebar-icons-wrapper {
+      min-width: unset !important;
+    }
+    & #zen-sidebar-icons-wrapper {
+      display: flex;
+      flex-direction: column;
+      padding-top: var(--zen-element-separation);
+      align-items: center;
+    }
+    :root:has(&) #zen-sidebar-splitter {
+      display: none !important;
+    }
+    & #tabbrowser-arrowscrollbox-periphery {
+      & > toolbarbutton {
+        margin: 0 auto !important;
+        padding: 0 !important;
+      }
+      &::before {
+        width: 90% !important;
+      }
+    }
+    & #EssentialsToolbar {
+      display: none !important;
+    }
+    & #essentials-accordion-header {
+      display: none !important;
+    }
+    & #vertical-pinned-tabs-container:has(tab:not([hidden])) {
+      position: relative;
+      & .tabbrowser-tab {
+        max-width: var(--tab-min-width);
+      }
+    }
+    & #TabsToolbar-customization-target {
+      padding-bottom: var(--zen-toolbox-padding);
+      &::after {
+        bottom: -1px !important;
+      }
+    }
+    & #tabbrowser-tabs {
+      margin-top: -2px;
+      & .tabbrowser-tab {
+        margin: 0 auto;
+        & .tab-background {
+          margin-inline: auto !important;
+          &:is([selected], [multiselected]) {
+            box-shadow: 0 0 1px 1px rgba(0,0,0,.1);
+            
+            @media not (prefers-color-scheme: dark) {
+              box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.12) !important;
+            }
+          }
+        }
+        & .tab-reset-button {
+          display: none !important;
+        }
+        & .tab-content {
+          display: flex;
+          align-content: center;
+          justify-content: center;
+          padding: 0 !important;
+          & .tab-label-container {
+            display: none !important;
+          }
+          & .tab-icon-image,
+          & .tab-icon-pending {
+            margin-inline-end: 0 !important;
+          }
+          /* Hide glances */
+          & .tabbrowser-tab {
+            display: none !important;
+          }
+        }
+      }
+      @media (-moz-bool-pref: 'zen.view.sidebar-collapsed.hide-mute-button') {
+        & .tab-icon-overlay:is([soundplaying], [muted]):not([selected]) {
+          display: none !important;
+          :is(
+              :root[uidensity='compact'],
+              #tabbrowser-tabs[secondarytext-unsupported],
+              :root:not([uidensity='compact']) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:hover
+            )
+            .tab-icon-stack[indicator-replaces-favicon]
+            > :not(&),
+          :root:not([uidensity='compact'])
+            #tabbrowser-tabs:not([secondarytext-unsupported])
+            .tabbrowser-tab:not(:hover)
+            &[indicator-replaces-favicon] {
+            opacity: 1 !important;
+          }
+        }
+      }
+      & .tab-throbber,
+      & .tab-icon-pending,
+      & .tab-icon-image,
+      & .tab-sharing-icon-overlay,
+      & .tab-icon-overlay {
+        margin-inline-end: 0 !important;
+      }
+    }
+    & #zen-workspaces-button {
+      flex-direction: column;
+      &:not([as-button='true']) {
+        & toolbarbutton {
+          &[active='true']::after {
+            bottom: 50% !important;
+            transform: translateY(50%) !important;
+          }
+        }
+      }
+    }
+  }
+
   /* Mark: Separator styling */
   #zen-sidebar-splitter {
     opacity: 0;
diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css
index 8491e2be1..fb97032b2 100644
--- a/src/browser/base/content/zen-styles/zen-urlbar.css
+++ b/src/browser/base/content/zen-styles/zen-urlbar.css
@@ -126,6 +126,10 @@
 }
 
 :root[zen-single-toolbar='true'] {
+  #urlbar[breakout-extend='true'] {
+    top: calc(var(--zen-toolbar-height) + 2px) !important;
+  }
+
   #notification-popup-box {
     align-items: center;
     justify-content: center;

From eb72f81bf7984c8797fc8e1d8a1f7dd793fa3f3b Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Thu, 28 Nov 2024 11:42:49 +0100
Subject: [PATCH 08/12] Remove border-radius from zen-browser-container and
 clean up vertical-tabs CSS for improved layout

---
 .../base/content/zen-styles/zen-browser-container.css      | 1 -
 .../base/content/zen-styles/zen-tabs/vertical-tabs.css     | 7 -------
 2 files changed, 8 deletions(-)

diff --git a/src/browser/base/content/zen-styles/zen-browser-container.css b/src/browser/base/content/zen-styles/zen-browser-container.css
index b165cd293..d340d0d3e 100644
--- a/src/browser/base/content/zen-styles/zen-browser-container.css
+++ b/src/browser/base/content/zen-styles/zen-browser-container.css
@@ -5,7 +5,6 @@
     position: relative;
 
     box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
-    border-radius: var(--zen-border-radius);
     overflow: hidden;
     margin: 1px;
     
diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index 27d44e825..274251320 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -508,13 +508,6 @@
     --zen-toolbox-max-width: calc(var(--tab-min-width) + var(--zen-toolbox-padding) * 2);
     max-width: var(--zen-toolbox-max-width) !important;
     min-width: var(--zen-toolbox-max-width) !important;
-    --zen-tabbar-offset: 1px; /* Fix the tabbar offset, because there's a shadow */
-    &[zen-right-side='true'] {
-      margin-left: var(--zen-tabbar-offset);
-    }
-    &:not([zen-right-side='true']) {
-      margin-right: var(--zen-tabbar-offset);
-    }
     & #zen-current-workspace-indicator-name,
     & .toolbarbutton-text {
       display: none !important;

From 63a2ccf3da0abdb953a4ca0e4ed3af95485d35b0 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Thu, 28 Nov 2024 16:32:04 +0100
Subject: [PATCH 09/12] Enhance Zen Browser UI with layout adjustments, z-index
 updates, and color changes

---
 src/browser/app/profile/zen-browser.js        |   2 +-
 src/browser/base/content/ZenUIManager.mjs     |  10 +-
 .../content/zen-styles/zen-browser-ui.css     |   1 +
 .../content/zen-styles/zen-sidebar-panels.css |  35 +-
 .../base/content/zen-styles/zen-tabs.css      |   2 +-
 .../zen-styles/zen-tabs/horizontal-tabs.css   | 330 +++++++++++++++++-
 .../zen-styles/zen-tabs/vertical-tabs.css     |  14 +-
 .../base/content/zen-styles/zen-theme.css     |  54 ++-
 .../base/content/zen-styles/zen-urlbar.css    |   3 +-
 .../zen-components/ZenProfileDialogUI.mjs     |   6 +-
 .../base/zen-components/ZenThemeBuilder.mjs   |   2 +-
 .../shared/light-dark-overrides-css.patch     |  10 +
 .../shared/in-content/common-shared-css.patch |  14 +-
 13 files changed, 418 insertions(+), 65 deletions(-)
 create mode 100644 src/browser/themes/shared/light-dark-overrides-css.patch

diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index 2e8c1603e..e1367bd2e 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -76,7 +76,7 @@ pref('zen.welcomeScreen.seen', false);
 
 pref('zen.tabs.vertical', true);
 pref('zen.tabs.vertical.right-side', false);
-pref('zen.theme.accent-color', "#aac7ff");
+pref('zen.theme.accent-color', "#ffb787");
 pref('zen.theme.content-element-separation', 6); // In pixels
 pref('zen.theme.pill-button', false);
 pref('zen.theme.gradient', true);
diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs
index d7d39b63c..9db9a8cfb 100644
--- a/src/browser/base/content/ZenUIManager.mjs
+++ b/src/browser/base/content/ZenUIManager.mjs
@@ -208,9 +208,9 @@ var gZenVerticalTabsManager = {
     const topButtons = document.getElementById('zen-sidebar-top-buttons');
     const isCompactMode = Services.prefs.getBoolPref('zen.view.compact');
     const isVerticalTabs = Services.prefs.getBoolPref('zen.tabs.vertical');
-    const isSidebarExpanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded') && isVerticalTabs;
+    const isSidebarExpanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded') || !isVerticalTabs;
     const isRightSide = Services.prefs.getBoolPref('zen.tabs.vertical.right-side') && isVerticalTabs;
-    const isSingleToolbar = Services.prefs.getBoolPref('zen.view.use-single-toolbar') && isVerticalTabs && isSidebarExpanded;
+    const isSingleToolbar = Services.prefs.getBoolPref('zen.view.use-single-toolbar') && (isVerticalTabs && isSidebarExpanded) || !isVerticalTabs;
     const titlebar = document.getElementById('titlebar');
 
     gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
@@ -250,9 +250,9 @@ var gZenVerticalTabsManager = {
     //  tabboxWrapper.prepend(this.navigatorToolbox);
     }
 
-    if (!isVerticalTabs) {
-      document.getElementById("urlbar-container").after(document.getElementById('navigator-toolbox'));
-    }
+    //if (!isVerticalTabs) {
+    //  document.getElementById("urlbar-container").after(document.getElementById('navigator-toolbox'));
+    //}
 
     let windowButtons = this.actualWindowButtons;
     let doNotChangeWindowButtons = !isCompactMode && isRightSide && this.isWindowsStyledButtons;
diff --git a/src/browser/base/content/zen-styles/zen-browser-ui.css b/src/browser/base/content/zen-styles/zen-browser-ui.css
index 0d1055e55..c15f5d088 100644
--- a/src/browser/base/content/zen-styles/zen-browser-ui.css
+++ b/src/browser/base/content/zen-styles/zen-browser-ui.css
@@ -75,6 +75,7 @@
 #zen-appcontent-wrapper {
   max-width: 100%;
   overflow-x: hidden;
+  z-index: 1;
 }
 
 :root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {
diff --git a/src/browser/base/content/zen-styles/zen-sidebar-panels.css b/src/browser/base/content/zen-styles/zen-sidebar-panels.css
index 891aac3f5..f67331070 100644
--- a/src/browser/base/content/zen-styles/zen-sidebar-panels.css
+++ b/src/browser/base/content/zen-styles/zen-sidebar-panels.css
@@ -80,7 +80,7 @@
 
 #zen-sidebar-web-panel {
   border-radius: var(--zen-panel-radius);
-  overflow: hidden;
+  z-index: 2;
   box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
   border: 1px solid var(--zen-colors-border);
   background: var(--zen-colors-tertiary);
@@ -105,21 +105,47 @@
   top: 0;
   left: 0;
   height: 100%;
-  width: 4px;
+  width: calc(var(--zen-element-separation) * 2 - 3px);
   background: transparent;
   border: none;
   cursor: ew-resize;
+
+  &::before {
+    height: 30px;
+    width: 3px;
+    background: var(--zen-colors-border);
+    border-radius: 2px;
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    transition: opacity 0.1s ease-in-out;
+    pointer-events: none;
+  }
+
+  &:hover::before {
+    opacity: 1;
+  }
 }
 
 .zen-sidebar-web-panel-splitter[side='right'] {
-  left: initial;
-  right: 0;
+  left: 100%;
+}
+
+.zen-sidebar-web-panel-splitter[side='left'] {
+  right: 100%;
 }
 
 .zen-sidebar-web-panel-splitter[orient='horizontal'] {
   width: 100%;
   height: 7px;
   cursor: ns-resize;
+
+  &::before {
+    display: none;
+  }
 }
 
 .zen-sidebar-web-panel-splitter[side='bottom'] {
@@ -253,6 +279,7 @@
 :root:not([zen-right-side='true']) {
   #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[pinned='true'])) {
     margin-left: 0 !important;
+    margin-right: calc(var(--zen-element-separation) * 2 - 3px) !important;
   }
 }
 
diff --git a/src/browser/base/content/zen-styles/zen-tabs.css b/src/browser/base/content/zen-styles/zen-tabs.css
index 6ac218e66..3603023a4 100644
--- a/src/browser/base/content/zen-styles/zen-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs.css
@@ -1,6 +1,6 @@
 /* Styles for both vertical and horizontal tabs */
-@import url('chrome://browser/content/zen-styles/zen-tabs/horizontal-tabs.css');
 @import url('chrome://browser/content/zen-styles/zen-tabs/vertical-tabs.css');
+@import url('chrome://browser/content/zen-styles/zen-tabs/horizontal-tabs.css');
 
 #zen-tabbox-wrapper {
   position: relative;
diff --git a/src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css
index 91f3bbbae..427ebeabf 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css
@@ -1,20 +1,332 @@
 @media not (-moz-bool-pref: 'zen.tabs.vertical') {
-  #browser,
-  #navigator-toolbox {
-    flex-direction: row;
-
-    max-width: unset !important;
-    width: 100% !important;
+  :root #browser {
+    display: flex !important;
+    flex-direction: column !important;
   }
 
-  #zen-sidebar-splitter {
-    display: none !important;
+    & #navigator-toolbox {
+        display: flex !important;
+        flex-direction: row !important;
+        max-width: unset !important;
+        min-width: unset !important;
+        width: 100%;
+        padding: var(--zen-toolbox-padding) !important;
+    }
+
+
+  #tabbrowser-tabs {
+      display: -webkit-box !important;
+      -webkit-box-orient: horizontal;
+      -webkit-box-pack: start;
+      max-width: 10000px !important;
   }
 
+  #vertical-pinned-tabs-container-separator {
+      display: none !important;
+  }
+
+  #zen-essentials-container, 
+  #vertical-pinned-tabs-container, 
   #tabbrowser-arrowscrollbox {
-    max-height: unset !important;
+      -webkit-box-flex: 1;
+  }
+
+  #vertical-pinned-tabs-container:empty {
+      -webkit-box-flex: 0 !important;
+      width: 0 !important;
+      padding: 0 !important;
+      margin: 0 !important;
+      border: none !important;
+      visibility: collapse !important;
+  }
+  #navigator-toolbox {
+      flex-direction: row !important;
   }
 
   #titlebar {
+      flex-direction: row !important;
+      width: 100%;
+      height: 40px !important;
+  }
+
+  #zen-essentials-container {
+      --tab-min-height: 36px !important;
+      display: flex !important;
+      flex-direction: row !important;
+      padding-inline-end: 0 !important;
+  }
+
+  #vertical-pinned-tabs-container {
+      display: flex !important;
+      flex-direction: row !important;
+      padding-inline-end: 0 !important;
+  }
+
+  #zen-essentials-container .tabbrowser-tab {
+      width: 0% !important;
+  }
+
+  #vertical-pinned-tabs-container .tabbrowser-tab {
+      width: 0% !important;
+  }
+
+  .tabbrowser-tab[zen-glance-tab="true"] {
+      .tab-content {
+      }
+      
+      .tab-label-container {
+          display: none !important;
+          width: 0px !important;
+          max-width: 0px !important;
+      }
+  }
+
+  #tabbrowser-arrowscrollbox {
+      display: flex !important;
+      max-width: -moz-available;
+      overflow: hidden !important;
+  }
+
+  #TabsToolbar {
+      flex-direction: row !important;
+      gap: 8px;
+      overflow: hidden !important;
+      display: flex !important;
+  }
+
+  #TabsToolbar-customization-target {
+      flex-direction: row !important;
+  }
+
+  #tabbrowser-tabs[orient="vertical"] {
+      flex-direction: row !important;
+  }
+
+  tabs {
+      flex-direction: row !important;
+  }
+
+  #zen-essentials-container {
+      container-name: tab-container;
+      container-type: normal;
+      max-width: 36px !important;
+      flex: 1 1 36px !important; 
+  }
+  #vertical-pinned-tabs-container {
+      container-name: tab-container;
+      container-type: normal;
+      max-width: 36px !important;
+      min-width: 36px !important;
+      flex: 1 1 36px !important; 
+  }
+
+  #vertical-pinned-tabs-container .tab-close-button {
+      display: none !important;
+  }
+
+  #vertical-pinned-tabs-container .tab-label-container {
+      display: none !important;
+  }
+
+  #vertical-pinned-tabs-container .tab-icon-image {
+      margin: 0 !important;
+  }
+
+  .tabbrowser-tab {
+      container-name: tab-container;
+      container-type: normal;
+      max-width: 200px !important;
+      min-width: 36px !important;
+      flex: 1 1 150px !important; 
+  }
+
+  .tabbrowser-tab[selected] {
+      flex: 2 1 150px !important; 
+      min-width: 32px !important;
+  }
+
+  @container tab-container (max-width: 80px) {
+      .tab-close-button {
+          margin-right: 0px !important;
+      }
+      .tab-icon-image {
+          padding: 0 !important;
+          margin-left: min(2.5px, 5%) !important;
+          margin-right: min(10px, 5%) !important;
+      }
+      .tab-label-container,
+      .tab-content {
+          margin: 0 !important;
+          padding-left: min(8px, 5%) !important;
+          padding-right: min(8px, 5%) !important;
+      }
+  }
+
+  @container tab-container (max-width: 44px) {
+      .tab-label-container {
+          display: none !important;
+      }
+      .tab-content {
+          justify-content: space-around !important;
+      }
+      .tab-close-button {
+          display: none !important;
+      }
+      .tabbrowser-tab[selected] {
+          & .tab-icon-image,
+          .tab-icon-stack {
+              display: none !important;
+          }
+          & .tab-content {
+              justify-content: space-around !important;
+              padding: 0 !important;
+          }
+          .tab-close-button {
+              display: block !important;
+          }
+      }
+  }
+
+  #vertical-pinned-tabs-container::after {
+      z-index: -1;
+      content: "";
+      position: absolute;
+      right: 0;
+      width: 1px;
+      height: 45%;
+      top: 50%;
+      transform: translateY(-50%);
+      background: hsl(255, 10%, 100%);
+  }
+
+  slot {
+      flex-direction: row !important;
+  }
+
+  box.scrollbox-clip scrollbox slot {
+      display: flex !important;
+      width: 100% !important;
+      overflow: hidden !important;
+  }
+
+  .menupopup-arrowscrollbox > slot:nth-child(1) {
+      display: flex;
+      flex-direction: column !important;
+  }
+
+  /* Other UI Elements */
+  #zen-current-workspace-indicator {
+      display: none !important;
+  }
+
+  #zen-sidebar-splitter {
+      display: none !important;
+  }
+
+  #tabbrowser-tabpanels {
+      padding-left: var(--zen-element-separation) !important;
+  }
+
+  #appcontent * {
+      overflow: visible !important;
+  }
+
+  #TabsToolbar-customization-target::after {
+      display: none !important;
+  }
+
+  #zen-sidebar-icons-wrapper {
+      width: auto !important;
+      padding: 0 !important;
+  }
+
+  /* Height Adjustments */
+  #vertical-pinned-tabs-container,
+  #zen-essentials-container,
+  #tabbrowser-arrowscrollbox {
+      max-height: none !important;
+  }
+
+  #PanelUI-zen-gradient-generator {
+      min-width: 390px !important;
+  }
+
+
+  #zen-essentials-container:not(:empty), 
+  #vertical-pinned-tabs-container:not(:empty), 
+  #tabbrowser-arrowscrollbox {
+      -webkit-box-flex: 1;
+      min-width: min-content;
+      width: auto !important;
+  }
+
+  #vertical-pinned-tabs-container:not(:empty) {
+      display: -webkit-box !important;
+      -webkit-box-orient: horizontal;
+      min-width: fit-content !important;
+      width: fit-content !important;
+      position: relative;
+      margin-right: -1px !important;
+  }
+
+  #vertical-pinned-tabs-container:not(:empty) .tabbrowser-tab {
+      position: relative;
+      display: -webkit-box !important;
+  }
+
+  #tabbrowser-arrowscrollbox {
+      margin-left: 0 !important;
+  }
+
+  #vertical-pinned-tabs-container:empty,
+  #zen-essentials-container:empty {
+      -webkit-box-flex: 0 !important;
+      width: 0 !important;
+      min-width: 0 !important;
+      padding: 0 !important;
+      margin: 0 !important;
+      border: none !important;
+      visibility: collapse !important;
+  }
+
+  #tabbrowser-arrowscrollbox-periphery {
+    margin: 0 !important;
+  }
+
+  hbox#nav-bar-customization-target toolbarbutton.chromeclass-toolbar-additional:nth-of-type(1) {
+      padding-inline-start: var(--toolbar-start-end-padding) !important;
+  }
+
+  toolbar#PersonalToolbar {
+      padding-left: 6px !important;
+  }
+
+  .tab-context-line {
+      width: 100% !important;
+      height: 3px !important;
+  }
+
+  .tabbrowser-tab[zen-glance-tab="true"] { 
+      flex-basis: fit-content !important;
+      max-width: 36px !important;
+  }
+
+  #zen-essentials-container .tabbrowser-tab[zen-glance-tab="true"] {
+      left: 2px;
+  }
+
+  #vertical-pinned-tabs-container .tabbrowser-tab[zen-glance-tab="true"] {
+      position: absolute !important;
+  }
+
+  #TabsToolbar-customization-target toolbarbutton,
+  #TabsToolbar-customization-target toolbarpaletteitem {
+      -webkit-box-flex: 0 !important;
+      min-width: min-content;
+      width: auto !important;
+      
+      .toolbarbutton-text {
+          display: none !important;
+      }
   }
 }
diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index 274251320..b5018fe3d 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -1,4 +1,3 @@
-@media (-moz-bool-pref: 'zen.tabs.vertical') {
   #tabbrowser-tabs,
   #TabsToolbar,
   #titlebar,
@@ -350,16 +349,13 @@
         margin-left: var(--zen-toolbox-padding);
         width: calc(100% - var(--zen-toolbox-padding));
         & .urlbar-input-container {
-          padding-left: 2px;
+          padding-left: 4px;
+          padding-right: 4px;
         }
         
         :root[zen-right-side='true'] & {
           margin-left: 0;
           margin-right: var(--zen-toolbox-padding);
-  
-          & .urlbar-input-container {
-            padding-right: 2px;
-          }
         }
       }
     }
@@ -830,7 +826,7 @@
     }
     }
   }
-}
+
 
 /* Mark: Essentials Toolbar */
 #zen-essentials-container {
@@ -858,8 +854,8 @@
   border-radius: var(--border-radius-medium);
 
   &:not([selected]) .tab-background {
-    background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
-    box-shadow: none;
+    background: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
+    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
   }
 
   backdrop-filter: blur(10px);
diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css
index 56fb077a4..31a4e33eb 100644
--- a/src/browser/base/content/zen-styles/zen-theme.css
+++ b/src/browser/base/content/zen-styles/zen-theme.css
@@ -1,4 +1,4 @@
-/* Here, we contain all the theme related variables, for example theme
+  /* Here, we contain all the theme related variables, for example theme
  * colors, border radius, etc.
  * We have `--zen-border-radius` and `--zen-primary-color` as variables.
  */
@@ -12,7 +12,11 @@
 
   /* Default values */
   --zen-border-radius: 7px;
-  --zen-primary-color: #4a90e2;
+  --zen-primary-color: #ffb787;
+
+  --zen-branding-bg-dark: #202020;
+  --zen-branding-bg: light-dark(#F2F0E3, var(--zen-branding-bg-dark));
+  --zen-branding-bg-reverse: light-dark(var(--zen-branding-bg-dark), #F2F0E3);
 
   /** Zen colors are generated automatically from the primary color */
   --zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);
@@ -20,7 +24,7 @@
   --zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 2%, white 98%);
 
   --zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, white 10%);
-  --zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, black 20%);
+  --zen-colors-primary-foreground: var(--zen-branding-bg-reverse);
   --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 97%, black 3%);
 
   --zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-colors-tertiary) 99%);
@@ -30,19 +34,10 @@
 
   --zen-secondary-btn-color: var(--zen-colors-primary-foreground);
 
-  --in-content-primary-button-background: light-dark(
-    color-mix(in srgb, var(--zen-primary-color) 35%, black 65%),
-    color-mix(in srgb, var(--zen-primary-color) 85%, black 15%)
-  ) !important;
-  --in-content-primary-button-background-hover: light-dark(
-    color-mix(in srgb, var(--zen-primary-color) 40%, black 60%),
-    color-mix(in srgb, var(--zen-primary-color) 40%, white 60%)
-  ) !important;
-  --in-content-primary-button-background-active: light-dark(
-    color-mix(in srgb, var(--zen-primary-color) 50%, black 50%),
-    color-mix(in srgb, var(--zen-primary-color) 80%, rgba(255,255,255,.2) 20%)
-  ) !important;
-  --in-content-primary-button-text-color: light-dark(white, black) !important;
+  --in-content-primary-button-background: color-mix(in srgb, var(--zen-primary-color) 10%, var(--zen-branding-bg-reverse) 90%) !important;
+  --in-content-primary-button-background-hover: color-mix(in srgb, var(--zen-primary-color) 5%, var(--zen-branding-bg-reverse) 60%) !important;
+  --in-content-primary-button-background-active: color-mix(in srgb, var(--zen-primary-color) 7%, var(--zen-branding-bg-reverse) 50%) !important;
+  --in-content-primary-button-text-color: var(--zen-colors-primary-foreground) !important;
   --in-content-primary-button-border-color: transparent !important;
   --in-content-primary-button-border-hover: transparent !important;
   --in-content-primary-button-border-active: var(--zen-colors-border) !important;
@@ -51,18 +46,14 @@
   --in-content-accent-color: var(--zen-colors-primary) !important;
 
   /* This is like the secondary button */
-  --in-content-button-background: light-dark(
-    color-mix(in srgb, var(--zen-primary-color) 20%, transparent 80%),
-    color-mix(in srgb, var(--zen-primary-color) 10%, transparent 90%)
-  ) !important;
-  --in-content-button-background-hover: light-dark(
-    color-mix(in srgb, var(--zen-primary-color) 10%, rgb(255, 255, 255) 90%),
-    color-mix(in srgb, var(--zen-primary-color) 15%, transparent 85%)
-  ) !important;
+  --in-content-button-background: transparent !important;
+  --in-content-button-text-color: var(--zen-secondary-btn-color) !important;
+  --in-content-button-background-hover: color-mix(in srgb, var(--zen-primary-color) 5%, var(--zen-branding-bg-reverse) 60%) !important;
+  --in-content-button-text-color-hover: var(--zen-branding-bg) !important;
   --button-bgcolor: var(--in-content-button-background) !important;
   --button-hover-bgcolor: var(--in-content-button-background-hover) !important;
+  --button-hover-color: var(--in-content-button-text-color-hover) !important;
   --focus-outline-color: var(--button-bgcolor) !important;
-  --in-content-button-text-color: var(--zen-secondary-btn-color) !important;
 
   --toolbarbutton-icon-fill-attention: var(--zen-primary-color) !important;
   --toolbarbutton-icon-fill: light-dark(rgb(57, 57, 58), rgb(251, 251, 254)) !important;
@@ -74,6 +65,7 @@
 
   --button-background-color: var(--in-content-button-background) !important;
   --button-background-color-hover: var(--in-content-button-background-hover) !important;
+  --button-text-color-hover: var(--in-content-button-text-color-hover) !important;
   --button-background-color-active: var(--in-content-primary-button-background-active) !important;
 
   --color-accent-primary: var(--button-primary-bgcolor) !important;
@@ -91,16 +83,18 @@
   --zen-toolbar-button-inner-padding: 6px;
   --toolbarbutton-outer-padding: 4px;
 
+  --toolbarbutton-hover-background: color-mix(in srgb, var(--zen-branding-bg-reverse) 10%, transparent 90%);
+
   /* Other colors */
   --urlbar-box-bgcolor: var(--zen-urlbar-background) !important;
   --urlbar-box-active-bgcolor: var(--toolbarbutton-hover-background) !important;
   --toolbar-field-focus-background-color: var(--urlbar-box-bgcolor) !important;
   --zen-input-border-color: light-dark(rgb(204, 204, 204), rgb(66, 65, 77));
+  --urlbar-box-hover-bgcolor: var(--toolbarbutton-hover-background) !important;
 
   /* XUL */
   --zen-main-browser-background: light-dark(rgb(235, 235, 235), #1b1b1b);
   --zen-main-browser-background-toolbar: var(--zen-main-browser-background);
-  --zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 50%, white 50%);
 
   --zen-appcontent-border: 1px solid var(--zen-colors-border);
   --zen-panel-radius: var(--zen-border-radius);
@@ -127,8 +121,8 @@
 
   --input-bgcolor: var(--zen-colors-tertiary) !important;
   --input-border-color: var(--zen-input-border-color) !important;
-  --zen-themed-toolbar-bg: light-dark(#f7f7f7, var(--zen-colors-tertiary));
-  --zen-themed-toolbar-bg-transparent: light-dark(#f7f7f7, var(--zen-colors-tertiary));
+  --zen-themed-toolbar-bg: light-dark(var(--zen-branding-bg), var(--zen-colors-tertiary));
+  --zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), var(--zen-colors-tertiary));
 
   @supports (-moz-osx-font-smoothing: auto) {
     --zen-themed-toolbar-bg-transparency: 0.05;
@@ -142,8 +136,8 @@
 @media (prefers-color-scheme: dark) {
   :host(:is(.anonymous-content-host, notification-message)),
   :root {
-    --zen-in-content-dialog-background: rgb(23, 23, 23);
-    --zen-dark-color-mix-base: rgb(21, 21, 21);
+    --zen-in-content-dialog-background: var(--zen-branding-bg);
+    --zen-dark-color-mix-base: var(--zen-branding-bg);
     --zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 20%, var(--zen-dark-color-mix-base) 80%);
     --zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 30%, var(--zen-dark-color-mix-base) 70%);
     --zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-dark-color-mix-base) 99%);
diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css
index fb97032b2..7930f6e1e 100644
--- a/src/browser/base/content/zen-styles/zen-urlbar.css
+++ b/src/browser/base/content/zen-styles/zen-urlbar.css
@@ -127,7 +127,8 @@
 
 :root[zen-single-toolbar='true'] {
   #urlbar[breakout-extend='true'] {
-    top: calc(var(--zen-toolbar-height) + 2px) !important;
+    top: 0px !important;
+    width: calc(var(--urlbar-width) + 2 * var(--urlbar-margin-inline) * 4);
   }
 
   #notification-popup-box {
diff --git a/src/browser/base/zen-components/ZenProfileDialogUI.mjs b/src/browser/base/zen-components/ZenProfileDialogUI.mjs
index cdc8f7c3b..09faa3232 100644
--- a/src/browser/base/zen-components/ZenProfileDialogUI.mjs
+++ b/src/browser/base/zen-components/ZenProfileDialogUI.mjs
@@ -49,7 +49,11 @@ var ZenProfileDialogUI = {
   },
 
   _openProfile(profile) {
-    Services.startup.createInstanceWithProfile(profile);
+    SelectableProfileService.getProfile(
+      aEvent.target.getAttribute("profileid")
+    ).then(profile => {
+      SelectableProfileService.launchInstance(profile);
+    });
   },
 
   _getProfilesSize(profiles) {
diff --git a/src/browser/base/zen-components/ZenThemeBuilder.mjs b/src/browser/base/zen-components/ZenThemeBuilder.mjs
index 0c375b1e8..7293c9d39 100644
--- a/src/browser/base/zen-components/ZenThemeBuilder.mjs
+++ b/src/browser/base/zen-components/ZenThemeBuilder.mjs
@@ -120,7 +120,7 @@ var gZenThemeBuilder = {
     //ctx.fillRect(0, 0, size, size);
 
     // Add the thumb.
-    const accentColor = Services.prefs.getStringPref(kZenAccentColorConfigKey, '#aac7ff');
+    const accentColor = Services.prefs.getStringPref(kZenAccentColorConfigKey, '#ffb787');
     const pos = this._getPositionFromColor(ctx, this._hexToRgb(accentColor));
 
     let x = pos ? pos[0] : center;
diff --git a/src/browser/themes/shared/light-dark-overrides-css.patch b/src/browser/themes/shared/light-dark-overrides-css.patch
new file mode 100644
index 000000000..91a8dbccb
--- /dev/null
+++ b/src/browser/themes/shared/light-dark-overrides-css.patch
@@ -0,0 +1,10 @@
+diff --git a/browser/themes/shared/light-dark-overrides.css b/browser/themes/shared/light-dark-overrides.css
+index 8b10da7c3ccbbfca30f77e2b7602794dccbf306d..f9188accee0e02d3ef6944b155da613fa6bd335d 100644
+--- a/browser/themes/shared/light-dark-overrides.css
++++ b/browser/themes/shared/light-dark-overrides.css
+@@ -5,5 +5,4 @@
+ #urlbar {
+   --urlbar-box-bgcolor: var(--toolbar-field-focus-background-color);
+   --urlbar-box-focus-bgcolor: var(--button-background-color);
+-  --urlbar-box-hover-bgcolor: var(--button-background-color-hover);
+ }
diff --git a/src/toolkit/themes/shared/in-content/common-shared-css.patch b/src/toolkit/themes/shared/in-content/common-shared-css.patch
index 387b8ffdb..aecd238d8 100644
--- a/src/toolkit/themes/shared/in-content/common-shared-css.patch
+++ b/src/toolkit/themes/shared/in-content/common-shared-css.patch
@@ -1,5 +1,5 @@
 diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes/shared/in-content/common-shared.css
-index 2b59a0604b4bfefd3bdcfdb9a3964937e9699114..d9f5f81158790336c7fa5ad366fd815abfe67087 100644
+index 646a11b699a0b34204cd766836678bfc17e8548e..14ebf803000ccea0de7c4f09ed2a9528bb017778 100644
 --- a/toolkit/themes/shared/in-content/common-shared.css
 +++ b/toolkit/themes/shared/in-content/common-shared.css
 @@ -5,6 +5,8 @@
@@ -11,7 +11,7 @@ index 2b59a0604b4bfefd3bdcfdb9a3964937e9699114..d9f5f81158790336c7fa5ad366fd815a
  @namespace html "http://www.w3.org/1999/xhtml";
  @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
  
-@@ -63,7 +65,7 @@
+@@ -54,7 +56,7 @@
    --in-content-table-border-color: var(--in-content-box-border-color);
    --in-content-table-header-background: var(--in-content-primary-button-background);
    --in-content-table-header-color: var(--in-content-primary-button-text-color);
@@ -20,7 +20,15 @@ index 2b59a0604b4bfefd3bdcfdb9a3964937e9699114..d9f5f81158790336c7fa5ad366fd815a
  
    --dialog-warning-text-color: var(--red-60);
  
-@@ -791,7 +793,8 @@ html|*#categories > html|*.category:dir(rtl) {
+@@ -740,7 +742,6 @@ html|*#categories {
+   color: inherit;
+   margin-inline-start: 34px;
+   padding-inline: 10px;
+-  transition: background-color 150ms;
+ }
+ 
+ html|*#categories > html|*.category {
+@@ -777,7 +778,8 @@ html|*#categories > html|*.category:dir(rtl) {
  @media not (forced-colors) {
    #categories > .category[selected],
    #categories > .category.selected {

From f35cc90ea4e91788ab2966d87f23193f5bfebafd Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Thu, 28 Nov 2024 18:29:22 +0100
Subject: [PATCH 10/12] Enhance animations and sidebar panel styles for
 improved UI transitions

---
 .../content/zen-styles/zen-animations.css     | 40 +++++++-------
 .../zen-styles/zen-browser-container.css      |  3 ++
 .../base/content/zen-styles/zen-glance.css    |  3 +-
 .../content/zen-styles/zen-sidebar-panels.css |  2 +-
 .../zen-styles/zen-tabs/vertical-tabs.css     | 16 +++++-
 .../base/zen-components/ZenWorkspaces.mjs     | 16 ++++++
 .../tabbrowser/content/tabbrowser-js.patch    | 53 +++++++++++--------
 .../tabbrowser/content/tabs-js.patch          | 47 +++++++++++++++-
 8 files changed, 134 insertions(+), 46 deletions(-)

diff --git a/src/browser/base/content/zen-styles/zen-animations.css b/src/browser/base/content/zen-styles/zen-animations.css
index b6fe193f6..f67a1d3a7 100644
--- a/src/browser/base/content/zen-styles/zen-animations.css
+++ b/src/browser/base/content/zen-styles/zen-animations.css
@@ -56,7 +56,18 @@
 
 @keyframes zen-slide-in {
   from {
-    transform: translateX(-30px);
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes zen-slide-in-reverse {
+  from {
+    transform: translateX(100%);
     opacity: 0;
   }
   to {
@@ -228,9 +239,9 @@
     height: 0%;
   }
 
-  70% {
+  80% {
     /* make the box grow to full width/height */
-    opacity: .5;
+    opacity: 1;
     transform: translate(-50%, -50%) translateZ(0);
     top: 50%;
     left: 50%;
@@ -253,31 +264,22 @@
   0% {
     /* make the box shrink to final width/height and x/y coordinates */
     transform: translate(-50%, -50%) translateZ(0);
-    opacity: 1;
     width: 85%;
     height: 100%;
     top: 50%;
     left: 50%;
-  }
-
-  50% {
-    /* make the box grow to full width/height */
     opacity: 1;
-    transform: translate(-50%, -50%) translateZ(0);
-    top: 50%;
-    left: 50%;
-    width: 87%;
-    height: 102%;
   }
 
   100% {
     /* make the box appear from initial width/height and x/y coordinates */
+    transform: translate(-50%, -50%) translateZ(0);
     opacity: 0;
+    width: 47%;
+    height: 53%;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%) translateZ(0);
-    width: 0%;
-    height: 0%;
+    opacity: 0;
   }
 }
 
@@ -293,10 +295,10 @@
   to {
     width: 100%;
     height: 100%;
-    top: 0;
-    left: 0;
+    top: 50%;
+    left: 50%;
     opacity: 1;
-    transform: none;
+    transform: translate(-50%, -50%); 
   }
 }
 
diff --git a/src/browser/base/content/zen-styles/zen-browser-container.css b/src/browser/base/content/zen-styles/zen-browser-container.css
index d340d0d3e..65b154417 100644
--- a/src/browser/base/content/zen-styles/zen-browser-container.css
+++ b/src/browser/base/content/zen-styles/zen-browser-container.css
@@ -4,6 +4,9 @@
     border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
     position: relative;
 
+    /* For glance */
+    transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
+
     box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
     overflow: hidden;
     margin: 1px;
diff --git a/src/browser/base/content/zen-styles/zen-glance.css b/src/browser/base/content/zen-styles/zen-glance.css
index 2ec5956ff..8c09c5095 100644
--- a/src/browser/base/content/zen-styles/zen-glance.css
+++ b/src/browser/base/content/zen-styles/zen-glance.css
@@ -5,7 +5,6 @@
 }
 
 .zen-glance-background {
-  transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
   transform: scale(0.98);
   backdrop-filter: blur(5px);
   opacity: 0.6;
@@ -28,7 +27,7 @@
 
     & .browserContainer {
       opacity: 1;
-      animation: zen-glance-content-animation-out .5s ease-in-out forwards !important;
+      animation: zen-glance-content-animation-out .3s ease-in-out forwards !important;
 
       & browser {
         opacity: 1 !important;
diff --git a/src/browser/base/content/zen-styles/zen-sidebar-panels.css b/src/browser/base/content/zen-styles/zen-sidebar-panels.css
index f67331070..cd44cfbad 100644
--- a/src/browser/base/content/zen-styles/zen-sidebar-panels.css
+++ b/src/browser/base/content/zen-styles/zen-sidebar-panels.css
@@ -277,7 +277,7 @@
 }
 
 :root:not([zen-right-side='true']) {
-  #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[pinned='true'])) {
+  #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel:is([hidden='true'], [pinned='true']))) {
     margin-left: 0 !important;
     margin-right: calc(var(--zen-element-separation) * 2 - 3px) !important;
   }
diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index b5018fe3d..41117a5ff 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -215,7 +215,21 @@
     }
 
     & .tabbrowser-tab {
-      animation: zen-slide-in 0.2s ease-in-out;
+      animation: none;
+      transition: none;
+      &[fadein='true']:not([zen-essential='true']) {
+        #tabbrowser-tabs[zen-workspace-animation='previous'] & {
+          animation: zen-slide-in-reverse 0.2s ease-in-out;
+        }
+
+        #tabbrowser-tabs[zen-workspace-animation='next'] & {
+          animation: zen-slide-in 0.2s ease-in-out;
+        }
+  
+        &[pinned] {
+          animation-delay: .03s !important;
+        }
+      }
 
       max-width: unset;
       padding: 0 !important;
diff --git a/src/browser/base/zen-components/ZenWorkspaces.mjs b/src/browser/base/zen-components/ZenWorkspaces.mjs
index 15c5272da..16afbf22d 100644
--- a/src/browser/base/zen-components/ZenWorkspaces.mjs
+++ b/src/browser/base/zen-components/ZenWorkspaces.mjs
@@ -1106,6 +1106,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   async _performWorkspaceChange(window, onInit) {
+    const previousWorkspace = await this.getActiveWorkspace();
+
     this.activeWorkspace = window.uuid;
     const containerId = window.containerTabId?.toString();
     const workspaces = await this._workspaces();
@@ -1121,6 +1123,20 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
 
     // Update UI and state
     await this._updateWorkspaceState(window, onInit);
+
+    // Animate acordingly
+    if (previousWorkspace && !this._animatingChange) {
+      // we want to know if we are moving forward or backward in sense of animation
+      let isNextWorkspace = onInit || 
+        (workspaces.workspaces.findIndex((w) => w.uuid === previousWorkspace.uuid) 
+          < workspaces.workspaces.findIndex((w) => w.uuid === window.uuid));
+      gBrowser.tabContainer.setAttribute('zen-workspace-animation', isNextWorkspace ? 'next' : 'previous');
+      this._animatingChange = true;
+      setTimeout(() => {
+        this._animatingChange = false;
+        gBrowser.tabContainer.removeAttribute('zen-workspace-animation');
+      }, 300);
+    }
   }
 
 
diff --git a/src/browser/components/tabbrowser/content/tabbrowser-js.patch b/src/browser/components/tabbrowser/content/tabbrowser-js.patch
index 33fed7d35..699cafcd8 100644
--- a/src/browser/components/tabbrowser/content/tabbrowser-js.patch
+++ b/src/browser/components/tabbrowser/content/tabbrowser-js.patch
@@ -1,8 +1,8 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338e14216df 100644
+index fec3dc8129a4d235fdd05e0390145a02064ebaa5..636b56754f48c1ec931152cf34bab8414a75cebc 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
-@@ -462,11 +462,26 @@
+@@ -402,11 +402,26 @@
        return count;
      },
  
@@ -31,7 +31,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
        }
        return i;
      },
-@@ -860,7 +875,7 @@
+@@ -800,7 +815,7 @@
        if (this.tabContainer.verticalMode) {
          let wasFocused = document.activeElement == this.selectedTab;
          let oldPosition = aTab._tPos;
@@ -40,7 +40,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
          this._updateAfterMoveTabTo(aTab, oldPosition, wasFocused);
        } else {
          this.moveTabTo(aTab, this.pinnedTabCount);
-@@ -1107,6 +1122,7 @@
+@@ -1047,6 +1062,7 @@
  
        let LOCAL_PROTOCOLS = ["chrome:", "about:", "resource:", "data:"];
  
@@ -48,7 +48,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
        if (
          aIconURL &&
          !aLoadingPrincipal &&
-@@ -1117,6 +1133,9 @@
+@@ -1057,6 +1073,9 @@
          );
          return;
        }
@@ -58,7 +58,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
  
        let browser = this.getBrowserForTab(aTab);
        browser.mIconURL = aIconURL;
-@@ -1346,6 +1365,7 @@
+@@ -1286,6 +1305,7 @@
        if (!this._previewMode) {
          newTab.recordTimeFromUnloadToReload();
          newTab.updateLastAccessed();
@@ -66,7 +66,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
          oldTab.updateLastAccessed();
          // if this is the foreground window, update the last-seen timestamps.
          if (this.ownerGlobal == BrowserWindowTracker.getTopWindow()) {
-@@ -2431,7 +2451,7 @@
+@@ -2371,7 +2391,7 @@
  
        let panel = this.getPanel(browser);
        let uniqueId = this._generateUniquePanelID();
@@ -75,7 +75,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
        aTab.linkedPanel = uniqueId;
  
        // Inject the <browser> into the DOM if necessary.
-@@ -2491,7 +2511,7 @@
+@@ -2431,7 +2451,7 @@
        // hasSiblings=false on both the existing browser and the new browser.
        if (this.tabs.length == 2) {
          this.tabs[0].linkedBrowser.browsingContext.hasSiblings = true;
@@ -84,7 +84,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
        } else {
          aTab.linkedBrowser.browsingContext.hasSiblings = this.tabs.length > 1;
        }
-@@ -2711,6 +2731,11 @@
+@@ -2651,6 +2671,11 @@
          );
        }
  
@@ -96,7 +96,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
        if (!UserInteraction.running("browser.tabs.opening", window)) {
          UserInteraction.start("browser.tabs.opening", "initting", window);
        }
-@@ -2780,6 +2805,9 @@
+@@ -2720,6 +2745,9 @@
            noInitialLabel,
            skipBackgroundNotify,
          });
@@ -106,7 +106,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
          if (insertTab) {
            // insert the tab into the tab container in the correct position
            this._insertTabAtIndex(t, {
-@@ -3291,6 +3319,23 @@
+@@ -3342,6 +3370,23 @@
          ) {
            tabWasReused = true;
            tab = this.selectedTab;
@@ -130,7 +130,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
            if (!tabData.pinned) {
              this.unpinTab(tab);
            } else {
-@@ -3304,6 +3349,9 @@
+@@ -3355,6 +3400,9 @@
              restoreTabsLazily && !select && !tabData.pinned;
  
            let url = "about:blank";
@@ -140,7 +140,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
            if (tabData.entries?.length) {
              let activeIndex = (tabData.index || tabData.entries.length) - 1;
              // Ensure the index is in bounds.
-@@ -3340,6 +3388,21 @@
+@@ -3391,6 +3439,21 @@
              preferredRemoteType,
            });
  
@@ -162,7 +162,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
            if (select) {
              tabToSelect = tab;
            }
-@@ -3374,7 +3437,6 @@
+@@ -3444,7 +3507,6 @@
              this.tabContainer._invalidateCachedTabs();
            }
          }
@@ -170,7 +170,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
          tab.initialize();
        }
  
-@@ -3831,6 +3893,10 @@
+@@ -3992,6 +4054,10 @@
          return;
        }
  
@@ -181,7 +181,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
        this.removeTabs(selectedTabs);
      },
  
-@@ -4148,6 +4214,13 @@
+@@ -4309,6 +4375,13 @@
          TelemetryStopwatch.start("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab);
        }
  
@@ -195,7 +195,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
        // Handle requests for synchronously removing an already
        // asynchronously closing tab.
        if (!animate && aTab.closing) {
-@@ -4163,6 +4236,10 @@
+@@ -4324,6 +4397,10 @@
        // state).
        let tabWidth = window.windowUtils.getBoundsWithoutFlushing(aTab).width;
  
@@ -206,7 +206,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
        if (
          !this._beginRemoveTab(aTab, {
            closeWindowFastpath: true,
-@@ -4311,7 +4388,7 @@
+@@ -4472,7 +4549,7 @@
  
        var closeWindow = false;
        var newTab = false;
@@ -215,7 +215,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
          closeWindow =
            closeWindowWithLastTab != null
              ? closeWindowWithLastTab
-@@ -5123,10 +5200,10 @@
+@@ -5265,10 +5342,10 @@
        SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
      },
  
@@ -228,7 +228,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
          aTab.selected ||
          aTab.closing ||
          // Tabs that are sharing the screen, microphone or camera cannot be hidden.
-@@ -7042,6 +7119,7 @@
+@@ -7181,6 +7258,7 @@
              aWebProgress.isTopLevel
            ) {
              this.mTab.setAttribute("busy", "true");
@@ -236,7 +236,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
              gBrowser._tabAttrModified(this.mTab, ["busy"]);
              this.mTab._notselectedsinceload = !this.mTab.selected;
              gBrowser.syncThrobberAnimations(this.mTab);
-@@ -7874,7 +7952,7 @@ var TabContextMenu = {
+@@ -8114,7 +8192,7 @@ var TabContextMenu = {
      );
      contextUnpinSelectedTabs.hidden =
        !this.contextTab.pinned || !multiselectionContext;
@@ -245,7 +245,16 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..439879a6b9c8cc69c569edb6318fe338
      // Move Tab items
      let contextMoveTabOptions = document.getElementById(
        "context_moveTabOptions"
-@@ -8136,6 +8214,7 @@ var TabContextMenu = {
+@@ -8148,7 +8226,7 @@ var TabContextMenu = {
+     let contextMoveTabToStart = document.getElementById("context_moveToStart");
+     let isFirstTab =
+       tabsToMove[0] == visibleTabs[0] ||
+-      tabsToMove[0] == visibleTabs[gBrowser.pinnedTabCount];
++      tabsToMove[0] == visibleTabs[gBrowser._numVisiblePinTabs];
+     contextMoveTabToStart.disabled = isFirstTab && allSelectedTabsAdjacent;
+ 
+     document.getElementById("context_openTabInWindow").disabled =
+@@ -8376,6 +8454,7 @@ var TabContextMenu = {
      if (this.contextTab.multiselected) {
        gBrowser.removeMultiSelectedTabs();
      } else {
diff --git a/src/browser/components/tabbrowser/content/tabs-js.patch b/src/browser/components/tabbrowser/content/tabs-js.patch
index 7eebd0b7b..a749c8346 100644
--- a/src/browser/components/tabbrowser/content/tabs-js.patch
+++ b/src/browser/components/tabbrowser/content/tabs-js.patch
@@ -1,7 +1,16 @@
 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index f9e256b143786c18ba85859ca1b11182ab23f1aa..82368b940a6f2c526c471c0e4cc608b836cedbbd 100644
+index f9e256b143786c18ba85859ca1b11182ab23f1aa..f60a8850305f1d7c2eadb6ac6996302f42a08a8a 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
+@@ -541,7 +541,7 @@
+       if (this.#isContainerVerticalPinnedExpanded(tab)) {
+         // In expanded vertical mode, the max number of pinned tabs per row is dynamic
+         // Set this before adjusting dragged tab's position
+-        let pinnedTabs = this.visibleTabs.slice(0, gBrowser.pinnedTabCount);
++        let pinnedTabs = this.visibleTabs.slice(0, gBrowser._numVisiblePinTabs);
+         let tabsPerRow = 0;
+         let position = 0;
+         for (let pinnedTab of pinnedTabs) {
 @@ -918,7 +918,7 @@
              let postTransitionCleanup = () => {
                tab.removeAttribute("tabdrop-samewindow");
@@ -55,6 +64,15 @@ index f9e256b143786c18ba85859ca1b11182ab23f1aa..82368b940a6f2c526c471c0e4cc608b8
        selectedTab._notselectedsinceload = false;
      }
  
+@@ -1571,7 +1574,7 @@
+         if (isEndTab && !this._hasTabTempMaxWidth) {
+           return;
+         }
+-        let numPinned = gBrowser.pinnedTabCount;
++        let numPinned = gBrowser._numVisiblePinTabs;
+         // Force tabs to stay the same width, unless we're closing the last tab,
+         // which case we need to let them expand just enough so that the overall
+         // tabbar width is the same.
 @@ -1586,7 +1589,7 @@
          let tabsToReset = [];
          for (let i = numPinned; i < tabs.length; i++) {
@@ -80,6 +98,33 @@ index f9e256b143786c18ba85859ca1b11182ab23f1aa..82368b940a6f2c526c471c0e4cc608b8
          }
        }
  
+@@ -1681,7 +1684,7 @@
+ 
+     _positionPinnedTabs() {
+       let tabs = this.visibleTabs;
+-      let numPinned = gBrowser.pinnedTabCount;
++      let numPinned = gBrowser._numVisiblePinTabs;
+       let absPositionHorizontalTabs =
+         this.overflowing && tabs.length > numPinned && numPinned > 0;
+ 
+@@ -1762,7 +1765,7 @@
+         return;
+       }
+ 
+-      let tabs = this.visibleTabs.slice(0, gBrowser.pinnedTabCount);
++      let tabs = this.visibleTabs.slice(0, gBrowser._numVisiblePinTabs);
+ 
+       let directionX = screenX > dragData.animLastScreenX;
+       let directionY = screenY > dragData.animLastScreenY;
+@@ -1948,7 +1951,7 @@
+       }
+ 
+       let pinned = draggedTab.pinned;
+-      let numPinned = gBrowser.pinnedTabCount;
++      let numPinned = gBrowser._numVisiblePinTabs;
+       let tabs = this.visibleTabs.slice(
+         pinned ? 0 : numPinned,
+         pinned ? numPinned : undefined
 @@ -2140,8 +2143,8 @@
        );
      }

From 2bf6ff560480cb6c22562d810c8dfd0880e05d36 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Thu, 28 Nov 2024 18:30:48 +0100
Subject: [PATCH 11/12] Refactor zen.glance.activation-method preference for
 macOS

---
 src/browser/app/profile/zen-browser.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index e1367bd2e..78b7c6d4a 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -111,11 +111,7 @@ pref('zen.view.compact.color-sidebar', true);
 pref('zen.glance.enabled', true);
 pref('zen.glance.hold-duration', 300); // in ms
 
-#ifdef XP_MACOSX
 pref('zen.glance.activation-method', 'alt'); // ctrl, alt, shift, none, hold
-#else
-pref('zen.glance.activation-method', 'ctrl'); // ctrl, alt, shift, none, hold
-#endif
 
 pref('zen.view.sidebar-height-throttle', 200); // in ms
 pref('zen.view.sidebar-expanded.max-width', 400);

From ca9b14696c303fa17e2894a8f81c72c9b09ddc67 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Thu, 28 Nov 2024 18:46:28 +0100
Subject: [PATCH 12/12] Ensure horizontal tabs width is enforced with
 !important for consistent layout

---
 .../base/content/zen-styles/zen-tabs/horizontal-tabs.css        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css
index 427ebeabf..29dcc61cb 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css
@@ -9,7 +9,7 @@
         flex-direction: row !important;
         max-width: unset !important;
         min-width: unset !important;
-        width: 100%;
+        width: 100% !important;
         padding: var(--zen-toolbox-padding) !important;
     }