Refactor subproject commit in zen-components and update keyboard shortcuts preferences

Shortcuts redo

.gitattributes

@@ -1,2 +1 @@
 *.patch linguist-language=C++
-.github/workflows/object/*.tar.gz filter=lfs diff=lfs merge=lfs -text

.github/workflows/alpha.yml

@@ -53,7 +53,7 @@ jobs:
       - name: Bump version
         if: ${{ github.event.inputs.update_version == 'true' }}
         run: |
-          pnpm surfer ci --brand alpha --bump prepatch
+          pnpm surfer ci --brand alpha --bump prerelease
 
       - name: Bump version without new version
         if: ${{ github.event.inputs.update_version == 'false' }}
@@ -317,23 +317,16 @@ jobs:
         with:
           submodules: recursive
           token: ${{ secrets.DEPLOY_KEY }}
-          lfs: true
 
       - name: Git Pull
         run: |
           git pull
-          git lfs pull
 
       - uses: actions/download-artifact@v4
 
       - name: List
         run: find .
 
-      - name: Unpack windows build (.tar.gz)
-        run: |
-          tar -xvf .github/workflows/object/windows-x64-signed-generic.tar.gz -C .
-          tar -xvf .github/workflows/object/windows-x64-signed-specific.tar.gz -C .
-
       - name: Clone updates repo
         uses: actions/checkout@v4
         with:
@@ -348,8 +341,8 @@ jobs:
           cp -a ../linux_update_manifest_generic/.  updates/
           cp -a ../linux_update_manifest_specific/.  updates/
 
-          cp -a ../windows-x64-signed-generic/update_manifest/.  updates/
+          cp -a ../.github/workflows/object/windows-x64-signed-generic/update_manifest/.  updates/
-          cp -a ../windows-x64-signed-specific/update_manifest/.  updates/
+          cp -a ../.github/workflows/object/windows-x64-signed-specific/update_manifest/.  updates/
 
           cp -a ../macos_update_manifest_aarch64/.  updates/
           cp -a ../macos_update_manifest_x64/.  updates/
@@ -376,16 +369,16 @@ jobs:
             zen-generic.AppImage.zsync
             zen-specific.AppImage
             zen-specific.AppImage.zsync
-            windows-x64-signed-generic/zen.win-generic.zip
+            .github/workflows/object/windows-x64-signed-generic/zen.win-generic.zip
-            windows-x64-signed-specific/zen.win-specific.zip
+            .github/workflows/object/windows-x64-signed-specific/zen.win-specific.zip
             linux.mar
             linux-generic.mar
-            windows-x64-signed-generic/windows-generic.mar
+            .github/workflows/object/windows-x64-signed-generic/windows-generic.mar
-            windows-x64-signed-specific/windows.mar
+            .github/workflows/object/windows-x64-signed-specific/windows.mar
             macos-x64.mar
             macos-aarch64.mar
-            windows-x64-signed-specific/zen.installer.exe
+            .github/workflows/object/windows-x64-signed-specific/zen.installer.exe
-            windows-x64-signed-generic/zen.installer-generic.exe
+            .github/workflows/object/windows-x64-signed-generic/zen.installer-generic.exe
             zen.macos-x64.dmg
             zen.macos-aarch64.dmg
 

.github/workflows/object/windows-x64-signed-generic.tar.gz

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:805f5d9f727596007dc64057d456e87a2648dff596230ca12af6cf48860843fa
-size 237797081

.github/workflows/object/windows-x64-signed-generic/update_manifest/browser/WINNT_x86_64-msvc-x64/alpha-generic/update.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0"?>
+<updates>
+  <update type="minor" displayVersion="1.0.1-a.2" appVersion="1.0.1-a.2" platformVersion="130.0" buildID="20240918002655">
+    <patch type="complete" URL="https://github.com/zen-browser/desktop/releases/download/1.0.1-a.2/windows-generic.mar" hashFunction="sha512" hashValue="75c5b879a4398dd28482e95ebc27e2eb922e040bb7efa3d1cb68a09165c694e2b8d58a09a0e8b7360ba8f667c9273b8d6132a49840f9df8711e614bc5ee8c913" size="72325896"/>
+  </update>
+</updates>

.github/workflows/object/windows-x64-signed-generic/update_manifest/browser/WINNT_x86_64-msvc/alpha-generic/update.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0"?>
+<updates>
+  <update type="minor" displayVersion="1.0.1-a.2" appVersion="1.0.1-a.2" platformVersion="130.0" buildID="20240918002655">
+    <patch type="complete" URL="https://github.com/zen-browser/desktop/releases/download/1.0.1-a.2/windows-generic.mar" hashFunction="sha512" hashValue="75c5b879a4398dd28482e95ebc27e2eb922e040bb7efa3d1cb68a09165c694e2b8d58a09a0e8b7360ba8f667c9273b8d6132a49840f9df8711e614bc5ee8c913" size="72325896"/>
+  </update>
+</updates>

.github/workflows/object/windows-x64-signed-specific.tar.gz

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:51d3bb5508804e438755658157f0f18331675b418bdb11db485f938a4fc5fd8a
-size 237484305

.github/workflows/object/windows-x64-signed-specific/update_manifest/browser/WINNT_x86_64-msvc-x64/alpha/update.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0"?>
+<updates>
+  <update type="minor" displayVersion="1.0.1-a.2" appVersion="1.0.1-a.2" platformVersion="130.0" buildID="20240918002634">
+    <patch type="complete" URL="https://github.com/zen-browser/desktop/releases/download/1.0.1-a.2/windows.mar" hashFunction="sha512" hashValue="12f748e7eec386ea4d559d2cd6163cff94aa2adf058f7d1037434235ae1b09ed4ed9e524ea85d3d2f330878ad8bccf7c578ef7c32c79a5804333f6137bb0fe00" size="72311992"/>
+  </update>
+</updates>

.github/workflows/object/windows-x64-signed-specific/update_manifest/browser/WINNT_x86_64-msvc/alpha/update.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0"?>
+<updates>
+  <update type="minor" displayVersion="1.0.1-a.2" appVersion="1.0.1-a.2" platformVersion="130.0" buildID="20240918002634">
+    <patch type="complete" URL="https://github.com/zen-browser/desktop/releases/download/1.0.1-a.2/windows.mar" hashFunction="sha512" hashValue="12f748e7eec386ea4d559d2cd6163cff94aa2adf058f7d1037434235ae1b09ed4ed9e524ea85d3d2f330878ad8bccf7c578ef7c32c79a5804333f6137bb0fe00" size="72311992"/>
+  </update>
+</updates>

README.md

@@ -40,6 +40,24 @@ Zen is built with performance in mind, and we have optimized the browser to be a
 
 Zen is available for Linux, macOS, and Windows. You can download the latest version from the official website at [zen-browser.app](https://zen-browser.app/download), or from the [GitHub Releases](https://github.com/zen-browser/desktop/releases) page.
 
+### Windows
+
+#### Winget
+
+- Generic
+
+```
+winget install --id Zen-Team.Zen-Browser
+```
+
+- Optimized
+
+```
+winget install --id Zen-Team.Zen-Browser.Optimized
+```
+
+#### 
+
 ### macOS
 
 - Requires macOS 10.15 or later

build/winsign/sign.ps1

@@ -28,14 +28,17 @@ function SignAndPackage($name) {
     $files = Get-ChildItem engine\obj-x86_64-pc-windows-msvc\ -Recurse -Include *.exe
     $files += Get-ChildItem engine\obj-x86_64-pc-windows-msvc\ -Recurse -Include *.dll
 
-    signtool.exe sign /n "$SignIdentity" /t http://time.certum.pl/ /fd sha1 /v $files
+    signtool.exe sign /n "$SignIdentity" /t http://time.certum.pl/ /fd sha256 /v $files
     echo "Packaging $name"
     $env:SURFER_SIGNING_MODE="sign"
     $env:MAR="$PWD\\build\\winsign\\mar.exe"
     if ($name -eq "generic") {
         $env:SURFER_COMPAT="true"
+    } else {
+        rm env:SURFER_COMPAT -ErrorAction SilentlyContinue
     }
 
+    echo "Compat Mode? $env:SURFER_COMPAT"
     pnpm surfer package --verbose
 
     # In the release script, we do the following:
@@ -67,13 +70,22 @@ function SignAndPackage($name) {
     # Move the zip
     mv (Get-Item .\dist\*.en-US.win64.zip) windsign-temp\windows-x64-signed-$name\zen.win-$name.zip
 
+    # Extract the zip, sign everything inside, and repackage it
+    Expand-Archive -Path windsign-temp\windows-x64-signed-$name\zen.win-$name.zip -DestinationPath windsign-temp\windows-x64-signed-$name\zen.win-$name
+    rm windsign-temp\windows-x64-signed-$name\zen.win-$name.zip
+    $files = Get-ChildItem windsign-temp\windows-x64-signed-$name\zen.win-$name -Recurse -Include *.exe
+    $files += Get-ChildItem windsign-temp\windows-x64-signed-$name\zen.win-$name -Recurse -Include *.dll
+    signtool.exe sign /n "$SignIdentity" /t http://time.certum.pl/ /fd sha256 /v $files
+    Compress-Archive -Path windsign-temp\windows-x64-signed-$name\zen.win-$name -DestinationPath windsign-temp\windows-x64-signed-$name\zen.win-$name.zip
+    rmdir windsign-temp\windows-x64-signed-$name\zen.win-$name -Recurse -ErrorAction SilentlyContinue
+
     # Move the manifest
-    foreach ($file in Get-ChildItem .\dist\update\) {
+    mv .\dist\update\. windsign-temp\windows-x64-signed-$name\update_manifest
-        mv ".\\dist\\update\\$file" windsign-temp\windows-x64-signed-$name\update_manifest
-    }
 
     echo "Invoking tar for $name"
-    tar -czvf .\.github\workflows\object\windows-x64-signed-$name.tar.gz -C .\windsign-temp\windows-x64-signed-$name .
+    # note: We need to sign it into a parent folder, called windows-x64-signed-$name
+    rmdir .\.github\workflows\object\windows-x64-signed-$name -Recurse -ErrorAction SilentlyContinue
+    mv .\windsign-temp\windows-x64-signed-$name .\.github\workflows\object\windows-x64-signed-$name -Force
 
     echo "Finished $name"
 }

package.json

@@ -33,7 +33,7 @@
   },
   "homepage": "https://github.com/zen-browser/core#readme",
   "dependencies": {
-    "@zen-browser/surfer": "^1.4.18"
+    "@zen-browser/surfer": "^1.4.21"
   },
   "devDependencies": {
     "husky": "^9.1.5",

pnpm-lock.yaml

@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@zen-browser/surfer':
-        specifier: ^1.4.18
+        specifier: ^1.4.21
-        version: 1.4.18
+        version: 1.4.21
     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.4.18':
+  '@zen-browser/surfer@1.4.21':
-    resolution: {integrity: sha512-NFqF5amqa4TuGFk+uVQNY4FngIvyhXvtZdpHUbU8Oeq3nfKE+bsLUHbFz8j9I5sFLQkuHmCsfTtR5gKA5el4YA==}
+    resolution: {integrity: sha512-v05Mq6kjISGwWD7d6Bwl0zuH3JKu+xV5x/iJmMjgW3kReYwlKjexqkxQquKpn8bhwAbOBS/CtYBlRKi17Pqxpg==}
     hasBin: true
 
   ansi-escapes@7.0.0:
@@ -1003,7 +1003,7 @@ snapshots:
 
   '@types/node@17.0.45': {}
 
-  '@zen-browser/surfer@1.4.18':
+  '@zen-browser/surfer@1.4.21':
     dependencies:
       '@resvg/resvg-js': 1.4.0
       async-icns: 1.0.2

src/browser/app/profile/better-fox.js

@@ -13,7 +13,7 @@
 /****************************************************************************
  * Betterfox                                                                *
  * "Ad meliora"                                                             *
- * version: 128                                                             *
+ * version: 130                                                             *
  * url: https://github.com/yokoffing/Betterfox                              *
 ****************************************************************************/
 
@@ -21,7 +21,7 @@
  * SECTION: FASTFOX                                                         *
 ****************************************************************************/
 /** GENERAL ***/
-pref("content.notify.interval", 100000); // (.10s); alt=500000 (.50s)
+//pref("content.notify.interval", 100000); // (.10s); alt=500000 (.50s)
 
 /** GFX ***/
 pref("gfx.canvas.accelerated.cache-items", 32768);
@@ -37,8 +37,6 @@ pref("media.cache_readahead_limit", 9000);
 pref("media.cache_resume_threshold", 3600);
 pref("media.memory_caches_combined_limit_kb", 2560000);
 
-pref("browser.cache.memory.max_entry_size", 0); 
-
 /** IMAGE CACHE ***/
 pref("image.mem.decode_bytes_at_a_time", 32768);
 

src/browser/app/profile/zen-browser.js

@@ -52,7 +52,7 @@ pref('pdfjs.enableHighlightFloatingButton', true);
 
 pref("alerts.showFavicons", true);
 
-pref("browser.tabs.loadBookmarksInTabs", true);
+pref("browser.tabs.loadBookmarksInTabs", false);
 pref('browser.toolbars.bookmarks.visibility', 'never');
 
 // Enable Do Not Track and GPC by default.
@@ -73,20 +73,22 @@ 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.border-radius', 10); // In pixels
+pref('zen.theme.border-radius', 5); // In pixels
-pref('zen.theme.content-element-separation', 4); // In pixels
+pref('zen.theme.content-element-separation', 6); // In pixels
 pref('zen.theme.toolbar-themed', true);
 pref('zen.theme.pill-button', false);
 pref('zen.view.compact', false);
-pref('zen.view.compact.hide-toolbar', false);
 
 pref('zen.theme.color-prefs.amoled', false);
 pref('zen.theme.color-prefs.colorful', false);
 
+pref('zen.view.compact.hide-tabbar', true);
+pref('zen.view.compact.hide-toolbar', false);
 pref('zen.view.compact.toolbar-flash-popup', true);
 pref('zen.view.compact.toolbar-flash-popup.duration', 800);
+pref('zen.view.compact.toolbar-hide-after-hover.duration', 1000);
 
-pref('zen.view.sidebar-height-throttle', 500); // in ms
+pref('zen.view.sidebar-height-throttle', 200); // in ms
 pref('zen.view.sidebar-expanded', false);
 pref('zen.view.sidebar-expanded.on-hover', false);
 pref('zen.view.sidebar-expanded.show-button', true);
@@ -99,7 +101,6 @@ pref('zen.keyboard.shortcuts', ""); // Empty string means default shortcuts
 pref('zen.keyboard.shortcuts.disable-firefox', false);
 pref('zen.tabs.dim-pending', true);
 pref('zen.themes.updated-value-observer', false);
-pref('zen.themes.tabs.legacy-location', false);
 
 // Pref to enable the new profiles (TODO: Check this out!)
 //pref("browser.profiles.enabled", true);
@@ -111,11 +112,13 @@ pref('zen.sidebar.close-on-blur', true);
 
 // Zen Split View
 pref('zen.splitView.working', false);
+pref('zen.splitView.min-resize-width', 7);
 
 // Zen Workspaces
 pref('zen.workspaces.enabled', true);
 pref('zen.workspaces.hide-default-container-indicator', true);
 pref('zen.workspaces.individual-pinned-tabs', true);
+pref('zen.workspaces.show-icon-strip', true);
 pref('zen.workspaces.icons', '["🌐", "📁", "📎", "📝", "📅", "📊"]');
 
 // Zen Watermark
@@ -145,6 +148,7 @@ pref('xpinstall.signatures.required', false);
 // Experimental Zen Features
 // Strategy to use for bytecode cache (Thanks https://github.com/gunir)
 pref('dom.script_loader.bytecode_cache.strategy', 2);
+pref("dom.text_fragments.enabled", true);
 
 // Enable private suggestions
 pref('browser.search.suggest.enabled', true);
@@ -195,6 +199,9 @@ pref("widget.non-native-theme.use-theme-accent", true);
 pref("privacy.resistFingerprinting.letterboxing", false);
 pref("privacy.resistFingerprinting.letterboxing.dimensions", "");
 
+// Remove Inspect Accessibity Properties menu
+pref("devtools.accessibility.enabled", false);
+
 // Enable GPU by default
 pref('gfx.webrender.all', true);
 pref('layers.acceleration.force-enabled', true);

src/browser/base/content/ZenCustomizableUI.sys.mjs

@@ -0,0 +1,127 @@
+
+export var ZenCustomizableUI = new class {
+  constructor() {}
+
+  TYPE_TOOLBAR = 'toolbar';
+  defaultSidebarIcons = [
+    'zen-sidepanel-button',
+    'zen-workspaces-button',
+    'new-tab-button'
+  ];
+
+  startup(CustomizableUIInternal) {
+    CustomizableUIInternal.registerArea(
+      "zen-sidebar-top-buttons",
+      {
+        type: this.TYPE_TOOLBAR,
+        defaultPlacements: [
+          "PanelUI-menu-button", "zen-expand-sidebar-button", "zen-profile-button"
+        ],
+        defaultCollapsed: null,
+      }
+    );
+    CustomizableUIInternal.registerArea(
+      "zen-sidebar-icons-wrapper",
+      {
+        type: this.TYPE_TOOLBAR,
+        defaultPlacements: this.defaultSidebarIcons,
+        defaultCollapsed: null,
+      }
+    );
+  }
+
+  // We do not have access to the window object here
+  init(window) {
+    this._addSidebarButtons(window);
+    this._hideToolbarButtons(window);
+  }
+
+  _addSidebarButtons(window) {
+    const sidebarBox = window.MozXULElement.parseXULToFragment(`
+      <toolbar id="zen-sidebar-top-buttons"
+        fullscreentoolbar="true" 
+        class="browser-toolbar customization-target zen-dont-hide-on-fullscreen"
+        brighttext="true"
+        data-l10n-id="tabs-toolbar"
+        customizable="true"
+        toolbarname="Zen Sidebar Top Buttons"
+        context="toolbar-context-menu"
+        flex="1"
+        customizationtarget="zen-sidebar-top-buttons-customization-target"
+        mode="icons">
+        <hbox id="zen-sidebar-top-buttons-customization-target" class="customization-target" flex="1">
+          <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 id="zen-profile-button" 
+            class="zen-sidebar-action-button toolbarbutton-1 chromeclass-toolbar-additional"
+            delegatesanchor="true"
+            onmousedown="ZenProfileDialogUI.showSubView(this, event)"
+            onkeypress="ZenProfileDialogUI.showSubView(this, event)"
+            consumeanchor="zen-profile-button"
+            closemenu="none"
+            data-l10n-id="toolbar-button-account"
+            cui-areatype="toolbar"
+            badged="true"
+            removable="true">
+            <vbox>
+              <image id="zen-profile-button-icon" />
+            </vbox>
+          </toolbarbutton>
+        </hbox>
+      </toolbar>
+    `);
+    window.document.getElementById('navigator-toolbox').prepend(sidebarBox);
+    const sideBarTopButtons = window.document.getElementById('zen-sidebar-top-buttons')
+      .querySelector('#zen-sidebar-top-buttons-customization-target');
+
+    const newTab = window.document.getElementById('vertical-tabs-newtab-button');
+    newTab.classList.add('zen-sidebar-action-button');
+
+    window.CustomizableUI.registerToolbarNode(
+      window.document.getElementById('zen-sidebar-top-buttons')
+    );
+
+    const panelMenu = window.document.getElementById('PanelUI-menu-button');
+    panelMenu.classList.add('zen-sidebar-action-button');
+    panelMenu.setAttribute('cui-areatype', 'toolbar');
+
+    sideBarTopButtons.prepend(panelMenu);
+
+    for (let id of this.defaultSidebarIcons) {
+      const elem = window.document.getElementById(id);
+      if (id === 'zen-workspaces-button' || !elem) continue;
+      elem.setAttribute('removable', 'true');
+    }
+
+    window.CustomizableUI.registerToolbarNode(
+      window.document.getElementById('zen-sidebar-icons-wrapper')
+    );
+
+    this._moveWindowButtons(window);
+  }
+
+  _moveWindowButtons(window) {
+    const windowControls = window.document.getElementsByClassName('titlebar-buttonbox-container');
+    const toolboxIcons = window.document.getElementById('zen-sidebar-top-buttons-customization-target');
+    if (window.AppConstants.platform === "macosx") {
+      for (let i = 0; i < windowControls.length; i++) {
+        if (i === 0) {
+          toolboxIcons.prepend(windowControls[i]);
+          continue;
+        }
+        windowControls[i].remove();
+      }
+    }
+  }
+
+  _hideToolbarButtons(window) {
+    const elementsToHide = [
+      'alltabs-button',
+    ];
+    for (let id of elementsToHide) {
+      const elem = window.document.getElementById(id);
+      if (elem) {
+        elem.setAttribute('hidden', 'true');
+      }
+    }
+  }
+};

src/browser/base/content/ZenStartup.mjs

@@ -9,6 +9,7 @@
   );
   var ZenStartup = {
     init() {
+      this.logHeader();
       this.openWatermark();
       window.SessionStore.promiseInitialized.then(async () => {
         this._changeSidebarLocation();
@@ -40,6 +41,8 @@
         // Disable smooth scroll
         gBrowser.tabContainer.arrowScrollbox.smoothScroll = false;
 
+        ZenWorkspaces.init();
+        gZenUIManager.init();
         gZenVerticalTabsManager.init();
         gZenCompactModeManager.init();
         gZenKeyboardShortcuts.init();
@@ -66,7 +69,7 @@
       tabs.style.maxHeight = '0px'; // reset to 0
       const toolbarRect = toolbarItems.getBoundingClientRect();
       // -5 for the controls padding
-      let totalHeight = toolbarRect.height - 15;
+      let totalHeight = toolbarRect.height - 5;
       // remove the height from other elements that aren't hidden
       const otherElements = document.querySelectorAll('#tabbrowser-tabs > *:not([hidden="true"])');
       for (let tab of otherElements) {
@@ -75,14 +78,6 @@
       }
       tabs.style.maxHeight = totalHeight + 'px';
       //console.info('ZenThemeModifier: set tabs max-height to', totalHeight + 'px');
-
-      const allTabs = document.getElementById('alltabs-button');
-      allTabs.removeAttribute('hidden');
-      allTabs.removeAttribute('badged');
-      allTabs.setAttribute('class', 'toolbarbutton-1 zen-sidebar-action-button');
-      document.getElementById('zen-sidebar-icons-wrapper').prepend(
-        allTabs
-      );
     },
 
     openWatermark() {
@@ -105,12 +100,7 @@
     },
 
     _changeSidebarLocation() {
-      const legacyLocation = Services.prefs.getBoolPref('zen.themes.tabs.legacy-location', false);
       const kElementsToAppend = ['sidebar-splitter', 'sidebar-box'];
-      if (legacyLocation) {
-        kElementsToAppend.push('navigator-toolbox');
-        window.document.documentElement.setAttribute('zen-sidebar-legacy', 'true');
-      }
       const wrapper = document.getElementById('zen-tabbox-wrapper');
       const appWrapepr = document.getElementById('zen-sidebar-box-container');
       for (let id of kElementsToAppend) {
@@ -123,9 +113,7 @@
 
       const browser = document.getElementById('browser');
       const toolbox = document.getElementById('navigator-toolbox');
-      if (!legacyLocation) {
       browser.prepend(toolbox);
-      }
 
       // remove all styles except for the width, since we are xulstoring the complet style list
       const width = toolbox.style.width;
@@ -144,6 +132,21 @@
     _focusSearchBar() {
       gURLBar.focus();
     },
+
+    logHeader() {
+      console.info(`
+
+    Welcome to Zen Browser!
+
+  If you are seeing this message, it means that you have successfully opened Zen's developer console.
+  Here you can see all the logs and errors that Zen is generating.
+
+  If you have any questions or need help, please contact us in any media in https://zen-browser.app/
+
+  Note: This developer console is not the same as the browser console, it has access to Zen's internal functions and variables, including your passwords and other sensitive information. Please do not paste any code here unless you know what you are doing.
+
+  `);
+    }
   };
 
   ZenStartup.init();

src/browser/base/content/ZenUIManager.mjs

@@ -1,4 +1,12 @@
 var gZenUIManager = {
+  _popupTrackingElements: [],
+
+  init () {
+
+    document.addEventListener('popupshowing', this.onPopupShowing.bind(this));
+    document.addEventListener('popuphidden', this.onPopupHidden.bind(this));
+  },
+
   openAndChangeToTab(url, options) {
     if (window.ownerGlobal.parent) {
       let tab = window.ownerGlobal.parent.gBrowser.addTrustedTab(url, options);
@@ -24,6 +32,46 @@ var gZenUIManager = {
   createValidXULText(text) {
     return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
   },
+
+  /**
+   * Adds the 'has-popup-menu' attribute to the element when popup is opened on it.
+   * @param element element to track
+   */
+  addPopupTrackingAttribute(element) {
+    this._popupTrackingElements.push(element);
+  },
+
+  removePopupTrackingAttribute(element) {
+    this._popupTrackingElements.remove(element);
+  },
+
+  onPopupShowing(showEvent) {
+    for (const el of this._popupTrackingElements) {
+      if (!el.contains(event.explicitOriginalTarget)) {
+        continue;
+      }
+      document.removeEventListener('mousemove', this.__removeHasPopupAttribute);
+      el.setAttribute('has-popup-menu', '');
+      this.__currentPopup = showEvent.target;
+      this.__currentPopupTrackElement = el;
+      break;
+    }
+  },
+
+  onPopupHidden(hideEvent) {
+    if (!this.__currentPopup || this.__currentPopup !== hideEvent.target) {
+      return;
+    }
+    const element = this.__currentPopupTrackElement;
+    if (document.getElementById('main-window').matches(':hover')) {
+      element.removeAttribute('has-popup-menu');
+    } else {
+      this.__removeHasPopupAttribute = () => element.removeAttribute('has-popup-menu');
+      document.addEventListener('mousemove', this.__removeHasPopupAttribute, {once: true});
+    }
+    this.__currentPopup = null;
+    this.__currentPopupTrackElement = null;
+  },
 };
 
 var gZenVerticalTabsManager = {
@@ -33,6 +81,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.sidebar-expanded.on-hover', updateEvent);
+    gZenCompactModeManager.addEventListener(updateEvent);
     this._updateEvent();
     this.initRightSideOrderContextMenu();
   },
@@ -72,16 +121,33 @@ var gZenVerticalTabsManager = {
 
   _updateEvent() {
     this._updateMaxWidth();
-    if (Services.prefs.getBoolPref('zen.view.sidebar-expanded')) {
+    const topButtons = document.getElementById('zen-sidebar-top-buttons');
-      this.navigatorToolbox.setAttribute('zen-expanded', 'true');
+    const customizationTarget = document.getElementById('nav-bar-customization-target');
-    } else {
+    const tabboxWrapper = document.getElementById('zen-tabbox-wrapper');
-      this.navigatorToolbox.removeAttribute('zen-expanded');
+    const browser = document.getElementById('browser');
-    }
     if (Services.prefs.getBoolPref('zen.tabs.vertical.right-side')) {
       this.navigatorToolbox.setAttribute('zen-right-side', 'true');
     } else {
       this.navigatorToolbox.removeAttribute('zen-right-side');
     }
+    if (Services.prefs.getBoolPref('zen.view.sidebar-expanded')) {
+      this.navigatorToolbox.setAttribute('zen-expanded', 'true');
+    } else {
+      this.navigatorToolbox.removeAttribute('zen-expanded');
+    }
+
+    if (this.navigatorToolbox.hasAttribute('zen-expanded') && !this.navigatorToolbox.hasAttribute('zen-right-side')
+      && !Services.prefs.getBoolPref('zen.view.compact') && !Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover')) {
+      this.navigatorToolbox.prepend(topButtons);
+      browser.prepend(this.navigatorToolbox);
+    } else {
+      customizationTarget.prepend(topButtons);
+      tabboxWrapper.prepend(this.navigatorToolbox);
+    }
+
+    // Always move the splitter next to the sidebar
+    this.navigatorToolbox.after(document.getElementById('zen-sidebar-splitter'));
+
     this._updateOnHoverVerticalTabs();
   },
 
@@ -126,68 +192,3 @@ var gZenVerticalTabsManager = {
     Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false);
   },
 };
-
-var gZenCompactModeManager = {
-  _flashSidebarTimeout: null,
-
-  init() {
-    Services.prefs.addObserver('zen.view.compact', this._updateEvent.bind(this));
-    Services.prefs.addObserver('zen.view.compact.toolbar-flash-popup.duration', this._updatedSidebarFlashDuration.bind(this));
-  },
-
-  get prefefence() {
-    return Services.prefs.getBoolPref('zen.view.compact');
-  },
-
-  set preference(value) {
-    Services.prefs.setBoolPref('zen.view.compact', value);
-  },
-
-  _updateEvent() {
-    Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false);
-  },
-
-  toggle() {
-    this.preference = !this.prefefence;
-  },
-
-  _updatedSidebarFlashDuration() {
-    this._flashSidebarDuration = Services.prefs.getIntPref('zen.view.compact.toolbar-flash-popup.duration');
-  },
-
-  toggleSidebar() {
-    let sidebar = document.getElementById('navigator-toolbox');
-    sidebar.toggleAttribute('zen-user-show');
-  },
-
-  get flashSidebarDuration() {
-    if (this._flashSidebarDuration) {
-      return this._flashSidebarDuration;
-    }
-    return Services.prefs.getIntPref('zen.view.compact.toolbar-flash-popup.duration');
-  },
-
-  flashSidebar() {
-    let sidebar = document.getElementById('navigator-toolbox');
-    let tabPanels = document.getElementById('tabbrowser-tabpanels');
-    if (sidebar.matches(':hover') || tabPanels.matches("[zen-split-view='true']")) {
-      return;
-    }
-    if (this._flashSidebarTimeout) {
-      clearTimeout(this._flashSidebarTimeout);
-    } else {
-      window.requestAnimationFrame(() => sidebar.setAttribute('flash-popup', ''));
-    }
-    this._flashSidebarTimeout = setTimeout(() => {
-      window.requestAnimationFrame(() => {
-        sidebar.removeAttribute('flash-popup');
-        this._flashSidebarTimeout = null;
-      });
-    }, this.flashSidebarDuration);
-  },
-
-  toggleToolbar() {
-    let toolbar = document.getElementById('zen-appcontent-navbar-container');
-    toolbar.toggleAttribute('zen-user-show');
-  },
-};

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

@@ -1,8 +1,16 @@
 diff --git a/browser/base/content/browser-init.js b/browser/base/content/browser-init.js
-index f8d49ac2a3a62f389ea44b07a26fcb102abc0b24..c29415e10c776ebc435f33e55f8afb71f0dcf22a 100644
+index bee5309c04775adff8652bfe6c54b2d466e821ac..e9741628dcc9eda3500f69441bae293548179e71 100644
 --- a/browser/base/content/browser-init.js
 +++ b/browser/base/content/browser-init.js
-@@ -237,6 +237,10 @@ var gBrowserInit = {
+@@ -143,6 +143,7 @@ var gBrowserInit = {
+     gNavToolbox.palette = document.getElementById(
+       "BrowserToolbarPalette"
+     ).content;
++    ZenCustomizableUI.init(window);
+     for (let area of CustomizableUI.areas) {
+       let type = CustomizableUI.getAreaType(area);
+       if (type == CustomizableUI.TYPE_TOOLBAR) {
+@@ -239,6 +240,10 @@ var gBrowserInit = {
      gPrivateBrowsingUI.init();
      BrowserSearch.init();
      BrowserPageActions.init();

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

@@ -1,8 +1,16 @@
 diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
-index b18f371a47fec53882c3dfb68e34d1a474eaf446..2c183d7e7fc65e00403f5e40e7859b915a3ea700 100644
+index a29d7a84e84651ea0bdc9be8e4ac650bde2e048a..e1d1cf3bb925b8efb1411d1dc77a56f086858b5a 100644
 --- a/browser/base/content/browser.js
 +++ b/browser/base/content/browser.js
-@@ -630,6 +630,15 @@ XPCOMUtils.defineLazyPreferenceGetter(
+@@ -32,6 +32,7 @@ ChromeUtils.defineESModuleGetters(this, {
+   ContextualIdentityService:
+     "resource://gre/modules/ContextualIdentityService.sys.mjs",
+   CustomizableUI: "resource:///modules/CustomizableUI.sys.mjs",
++  ZenCustomizableUI: "chrome://browser/content/ZenCustomizableUI.sys.mjs",
+   DevToolsSocketStatus:
+     "resource://devtools/shared/security/DevToolsSocketStatus.sys.mjs",
+   DownloadUtils: "resource://gre/modules/DownloadUtils.sys.mjs",
+@@ -629,6 +630,15 @@ XPCOMUtils.defineLazyPreferenceGetter(
    false
  );
  
@@ -18,7 +26,7 @@ index b18f371a47fec53882c3dfb68e34d1a474eaf446..2c183d7e7fc65e00403f5e40e7859b91
  customElements.setElementCreationCallback("screenshots-buttons", () => {
    Services.scriptloader.loadSubScript(
      "chrome://browser/content/screenshots/screenshots-buttons.js",
-@@ -3679,6 +3688,9 @@ var XULBrowserWindow = {
+@@ -3435,6 +3445,9 @@ var XULBrowserWindow = {
      AboutReaderParent.updateReaderButton(gBrowser.selectedBrowser);
      TranslationsParent.onLocationChange(gBrowser.selectedBrowser);
  
@@ -28,7 +36,7 @@ index b18f371a47fec53882c3dfb68e34d1a474eaf446..2c183d7e7fc65e00403f5e40e7859b91
      PictureInPicture.updateUrlbarToggle(gBrowser.selectedBrowser);
  
      if (!gMultiProcessBrowser) {
-@@ -5001,7 +5013,7 @@ function setToolbarVisibility(
+@@ -4769,7 +4782,7 @@ function setToolbarVisibility(
        );
      }
  
@@ -37,7 +45,7 @@ index b18f371a47fec53882c3dfb68e34d1a474eaf446..2c183d7e7fc65e00403f5e40e7859b91
      switch (isVisible) {
        case true:
        case "always":
-@@ -7832,6 +7844,12 @@ var gDialogBox = {
+@@ -7609,6 +7622,12 @@ var gDialogBox = {
      parentElement.showModal();
      this._didOpenHTMLDialog = true;
  

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

@@ -26,7 +26,9 @@
 <script type="text/javascript">
 window.addEventListener("DOMContentLoaded", async () => {
   // Theme importer always needs to be loaded first
+  Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenThemesCommon.mjs");
   Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenThemesImporter.mjs");
+  Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenCompactMode.mjs");
   Services.scriptloader.loadSubScript("chrome://browser/content/ZenUIManager.mjs");
   Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenSidebarManager.mjs");
   Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenWorkspaces.mjs");

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

@@ -3,7 +3,10 @@
         content/browser/zenThemeModifier.js                     (content/zenThemeModifier.js)
         content/browser/ZenStartup.mjs                          (content/ZenStartup.mjs)
         content/browser/ZenUIManager.mjs                        (content/ZenUIManager.mjs)
+        content/browser/ZenCustomizableUI.sys.mjs               (content/ZenCustomizableUI.sys.mjs)
+        content/browser/zen-components/ZenCompactMode.mjs       (content/zen-components/src/ZenCompactMode.mjs)
         content/browser/zen-components/ZenViewSplitter.mjs      (content/zen-components/src/ZenViewSplitter.mjs)
+        content/browser/zen-components/ZenThemesCommon.mjs      (content/zen-components/src/ZenThemesCommon.mjs)
         content/browser/zen-components/ZenWorkspaces.mjs        (content/zen-components/src/ZenWorkspaces.mjs)
         content/browser/zen-components/ZenSidebarManager.mjs    (content/zen-components/src/ZenSidebarManager.mjs)
         content/browser/zen-components/ZenProfileDialogUI.mjs   (content/zen-components/src/ZenProfileDialogUI.mjs)

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

@@ -1,9 +1,11 @@
-<toolbar brighttext="true" id="zen-sidebar-icons-wrapper" class="zen-dont-hide-on-fullscreen">
+<toolbar brighttext="true" 
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button chromeclass-toolbar-additional subviewbutton-nav" badge="true" closemenu="none" removable="true" delegatesanchor="true" cui-areatype="toolbar" id="zen-profile-button" data-l10n-id="toolbar-button-account" onclick="ZenProfileDialogUI.showSubView(this, event)">
+  id="zen-sidebar-icons-wrapper" 
-  </toolbarbutton>
+  fullscreentoolbar="true" 
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" data-l10n-id="sidebar-zen-expand" oncommand="gZenVerticalTabsManager.toggleExpand();"></toolbarbutton>
+  class="browser-toolbar customization-target zen-dont-hide-on-fullscreen"
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
+  data-l10n-id="tabs-toolbar"
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-bookmark-button" data-l10n-id="sidebar-menu-bookmarks" onclick="gZenUIManager.toogleBookmarksSidebar();"></toolbarbutton>
+  customizable="true"
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-history-button" data-l10n-id="sidebar-menu-history" oncommand="PanelUI.showSubView('PanelUI-history', this);"></toolbarbutton>
+  toolbarname="Zen Sidebar Icons"
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-preferences-button" data-l10n-id="toolbar-settings-button" onclick="event.target.ownerGlobal.openPreferences(undefined);"></toolbarbutton>
+  context="toolbar-context-menu"
+  mode="icons">
+  <toolbarbutton removeable="true" class="toolbarbutton-1 zen-sidebar-action-button" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
 </toolbar>

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

@@ -1,4 +1,4 @@
-<box id="zen-sidebar-web-panel-wrapper">
+<hbox id="zen-sidebar-web-panel-wrapper">
   <box id="zen-sidebar-web-panel" class="chromeclass-extrachrome" hidden="true" persist="pinned style hidden">
     <toolbar mode="icons" flex="1" id="zen-sidebar-web-header">
       <hbox>
@@ -29,4 +29,4 @@
     <html:span id="zen-sidebar-web-panel-splitter"></html:span>
     <html:span id="zen-sidebar-web-panel-hsplitter"></html:span>
   </box>
-</box>
+</hbox>

src/browser/base/content/zen-styles/zen-animations.css

@@ -35,7 +35,7 @@
 
 @keyframes zen-slide-in {
   from {
-    transform: translateX(-10px);
+    transform: translateX(-30px);
     opacity: 0;
   }
   to {
@@ -94,7 +94,7 @@
 @keyframes zen-vtabs-animation {
   0% {
     opacity: 0;
-    transform: translateX(-5px);
+    transform: translateX(-10px);
   }
 
   20% {
@@ -109,7 +109,7 @@
 @keyframes zen-sidebar-panel-animation-right {
   0% {
     opacity: 0;
-    transform: translateX(5px);
+    transform: translateX(10px);
   }
   
   20% {
@@ -136,3 +136,33 @@
     display: none !important;
   }
 }
+
+@keyframes zen-workspaces-button-active {
+  from {
+    bottom: -20px;
+  } 
+
+  to {
+    bottom: -2px;
+  }
+}
+
+@keyframes zen-workspaces-button-active-collapsed-left {
+  from {
+    left: -20px;
+  } 
+
+  to {
+    left: -2px;
+  }
+}
+
+@keyframes zen-workspaces-button-active-collapsed-right {
+  from {
+    right: -20px;
+  } 
+
+  to {
+    right: -2px;
+  }
+}

src/browser/base/content/zen-styles/zen-browser-container.css

@@ -5,19 +5,12 @@
     transform: translate3d(0, 0, 0);
     position: relative;
 
-    /* This fixes an issue with the left border */
+    overflow: hidden;
-    --zen-webview-correction-margin: 2px;
-    margin-left: var(--zen-webview-correction-margin);
-    
-    #browser:has(#navigator-toolbox[zen-right-side="true"]) & {
-      margin-left: 0;
-      margin-right: var(--zen-webview-correction-margin);
-    }
 
     --uc-tweak-rounded-corners-shadow-color: var(--zen-colors-border);
 
     --uc-tweak-rounded-corners-shadow:
-      0 0 1px 1px var(--uc-tweak-rounded-corners-shadow-color);
+      0 0 0 1px var(--uc-tweak-rounded-corners-shadow-color);
 
     box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;
 
@@ -32,7 +25,7 @@
        * same shadow from the browser window on top. */
       box-shadow:
         var(--uc-tweak-rounded-corners-shadow, 0 0 transparent),
-        0 0 0 16px var(--zen-themed-toolbar-bg) !important;
+        0 0 0 16px var(--zen-main-browser-background) !important;
       clip-path: inset(0);
       pointer-events: none;
     }

src/browser/base/content/zen-styles/zen-browser-ui.css

@@ -33,11 +33,11 @@
   width: 100%;
 }
 
-:not([inDOMFullscreen='true']) #appcontent {
+:root:not([inDOMFullscreen='true']) #appcontent {
   overflow: hidden;
 }
 
-:not([inDOMFullscreen='true']) #appcontent,
+:root:not([inDOMFullscreen='true']) #appcontent,
 #sidebar-box {
   /** Sidebar is already hidden in full screen mode */
   border: none;
@@ -51,3 +51,7 @@
   display: flex;
   flex-direction: row;
 }
+
+:root:not([inDOMFullscreen='true']) #tabbrowser-tabbox {
+  padding: 1px; /* To allow the web view's shadow to be visible */
+}

src/browser/base/content/zen-styles/zen-compact-mode.css

@@ -7,214 +7,120 @@
 }
 
 @media (-moz-bool-pref: 'zen.view.compact') {
-  :root[sizemode='fullscreen'],
+  :root:not([customizing]) {
-  #navigator-toolbox[inFullscreen] {
+    @media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') {
-    margin-top: 0 !important;
+      #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
+        margin-left: calc(var(--zen-sidebar-web-panel-spacing) * 2) !important;
       }
 
-  #nav-bar {
+      #zen-sidebar-top-buttons-customization-target {
-    padding-left: 5px !important;
+        padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
       }
 
-  #navigator-toolbox {
+      /* Set the extra paddings */
-    --zen-compact-toolbox-margin-single: calc(var(--zen-element-separation) * 2);
+      #tabbrowser-tabpanels {
-    --zen-compact-toolbox-margin: var(--zen-compact-toolbox-margin-single);
+        :root:not([inDOMFullscreen='true']) #browser:has(#navigator-toolbox[zen-right-side='true']) & {
-    position: absolute;
+          padding-right: var(--zen-element-separation) !important;
-    display: block;
-    transition: 200ms ease-in-out !important;
-    transform: translateX(calc(-100% + (var(--zen-compact-toolbox-margin-single) / 2)));
-    opacity: 0;
-    line-height: 0;
-    z-index: 2;
-    height: 100%;
-    margin: 0;
-    padding: var(--zen-compact-toolbox-margin) !important;
-
-    & #titlebar {
-      border: 1px solid var(--zen-colors-border);
-      transition-delay: 200ms;
-      background: var(--zen-colors-tertiary) !important;
-      padding: var(--zen-toolbox-padding);
-      border-radius: var(--zen-panel-radius);
         }
 
-    & > * {
+        :root:not([inDOMFullscreen='true']) #browser:has(#navigator-toolbox:not([zen-right-side='true'])) & {
-      pointer-events: none;
+          padding-left: var(--zen-element-separation) !important;
         }
-
-    &,
-    & #titlebar {
-      min-width: var(--zen-toolbox-min-width) !important;
-    }
-  }
-
-  @media not (-moz-bool-pref: 'zen.view.sidebar-expanded') {
-    #navigator-toolbox {
-      width: fit-content !important;
-      --zen-toolbox-max-width: calc(50px + var(--zen-compact-toolbox-margin-single) * 2) !important;
-    }
-  }
-
-  @media (-moz-bool-pref: 'zen.view.sidebar-expanded') {
-    #navigator-toolbox {
-      min-width: calc(var(--zen-navigation-toolbar-min-width) + var(--zen-compact-toolbox-margin-single) * 2) !important;
-    }
-  }
-
-  #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[hidden='true'])),
-  #sidebar-box:not([positionend='true']) {
-    margin-right: 0 !important;
-    margin-left: var(--zen-sidebar-web-panel-spacing) !important;
-  }
-
-  #sidebar-box[positionend='true'] {
-    margin-left: 0 !important;
-    margin-right: var(--zen-sidebar-web-panel-spacing) !important;
-  }
-
-  #sidebar-splitter {
-    margin: 0 !important;
-  }
-
-  @media not (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
-    #navigator-toolbox {
-      /* Remove the top margin */
-      /* The toolbox isn't relative to the webview anymore, meaning we can't just add a static value and call it a day... 
-       * The top margin is calculated by taking the following factors into account:
-       *  1. Element separation
-       *  2. Extra margin to separate from the webview
-       *  3. Add element separation variable, to avoid overlaping with the toolbar
-       *  4. Calculate toolbar height, taken from zen-urlbar.css
-       */
-      --zen-compact-toolbox-margin: calc(
-          var(--zen-compact-toolbox-margin-single) + 0.15rem + var(--zen-element-separation) +
-            (18px + (var(--toolbarbutton-inner-padding) * 2))
-        )
-        var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single)
-        var(--zen-compact-toolbox-margin-single);
-
-      :root[zen-sidebar-legacy='true'] & {
-        --zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) / 2)
-          var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single)
-          var(--zen-compact-toolbox-margin-single);
-      }
-    }
-
-    #zen-sidebar-web-panel-wrapper,
-    #sidebar-box {
-      margin-top: 0 !important;
-    }
-  }
-
-  #navigator-toolbox:hover,
-  #navigator-toolbox:focus-within,
-  #navigator-toolbox[zen-user-show],
-  #navigator-toolbox[flash-popup],
-  #navigator-toolbox[movingtab],
-  #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
-  #navigator-toolbox:has(.tabbrowser-tab:active),
-  #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
-    transform: none !important;
-    opacity: 1;
-
-    & > * {
-      pointer-events: all;
-    }
-  }
-
-  #navigator-toolbox > * {
-    line-height: normal;
-  }
-
-  #navigator-toolbox,
-  #navigator-toolbox > * {
-    -moz-appearance: none !important;
       }
 
       #zen-sidebar-splitter {
         display: none !important;
       }
 
-  /* Don't apply transform before window has been fully created */
+      #navigator-toolbox {
-  :root:not([sessionrestored]) #navigator-toolbox {
+        position: absolute;
-    transform: none !important;
+        height: 98%;
+        z-index: 9;
+        background: var(--zen-themed-toolbar-bg) !important;
+        box-shadow: 0 0 2px 2px rgba(0,0,0,.1);
+        border-top-right-radius: var(--zen-border-radius);
+        border-bottom-right-radius: var(--zen-border-radius);
+        border: 1px solid var(--zen-colors-border);
+        border-left-width: 0;
+        padding: var(--zen-toolbox-padding) !important;
+        transition: all 0.2s ease-in-out;
+        right: calc(100% - var(--zen-element-separation) + 1px);
+        top: 50%;
+        opacity: 0;
+
+        transform: translate3d(0, -50%, 0);
+
+        #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+          border-left-width: 1px;
+          border-right-width: 0;
+
+          left: calc(100% - var(--zen-element-separation) - 1px);
+          right: unset;
+
+          border-top-left-radius: var(--zen-border-radius);
+          border-bottom-left-radius: var(--zen-border-radius);
+
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
       }
       
-  :root[customizing] #navigator-toolbox {
+      #navigator-toolbox:hover,
-    position: relative !important;
+      #navigator-toolbox[zen-has-hover],
-    transform: none !important;
+      #navigator-toolbox:focus-within,
-    opacity: 1 !important;
+      #navigator-toolbox[zen-user-show],
-  }
+      #navigator-toolbox[flash-popup],
+      #navigator-toolbox[has-popup-menu],
+      #navigator-toolbox[movingtab],
+      #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
+      #navigator-toolbox:has(.tabbrowser-tab:active),
+      #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
+        opacity: 1;
         
-  #navigator-toolbox[inFullscreen] > #PersonalToolbar,
+        transform: translate3d(calc(100% - var(--zen-element-separation)), -50%, 0);
-  #PersonalToolbar[collapsed='true'] {
+        #browser:has(#navigator-toolbox[zen-right-side='true']) & {
-    display: none;
+          transform: translate3d(calc(-100% + var(--zen-element-separation)), -50%, 0);
         }
-
-  :root:not([inDOMFullscreen='true']) #tabbrowser-tabbox #tabbrowser-tabpanels {
-    padding-left: var(--zen-element-separation) !important;
       }
-
-  #zen-appcontent-navbar-container { 
-    z-index: 2;
     }
 
     @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
-    #zen-appcontent-navbar-container {
+
-      --urlbar-height: unset;
+      #navigator-toolbox {
-      transition: 0.2s ease-in-out;
+        --zen-toolbox-top-align: var(--zen-element-separation);
-      transform: translateY(calc(-100% + var(--zen-element-separation)));
-      opacity: 0;
-      position: absolute;
-      width: 100%;
-      border-bottom-left-radius: 8px;
-      border-bottom-right-radius: 8px;
-      border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
-      border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
-      border-bottom: 1px solid var(--zen-colors-border);
-      top: 0;
-      background: var(--zen-colors-tertiary);
-      transition: 0.2s ease-in-out;
       }
 
-    #zen-appcontent-navbar-container:hover,
+      &:not([inDOMFullscreen='true']) #tabbrowser-tabpanels {
-    #zen-appcontent-navbar-container:focus-within,
-    #zen-appcontent-navbar-container:active,
-    #zen-appcontent-navbar-container[zen-user-show],
-    #mainPopupSet:has(> #appMenu-popup:hover) ~ #zen-appcontent-navbar-container,
-    #zen-appcontent-navbar-container:has(*[open='true']) {
-      transform: translateY(0);
-      opacity: 1;
-    }
-
-    :root:not([inDOMFullscreen='true']) #tabbrowser-tabpanels {
         padding-top: var(--zen-element-separation) !important;
       }
 
-    #zen-sidebar-web-panel-wrapper {
+      #zen-appcontent-navbar-container {
-      margin-top: 10px !important;
+        position: absolute;
-    }
+        top: 0;
+        transform: translateY(calc(-100% + var(--zen-element-separation) + 1px));
+        left: 0;
+        z-index: 10;
+        background: var(--zen-themed-toolbar-bg);
+        box-shadow: 0 0 2px 2px rgba(0,0,0,.1) !important;
+        border-bottom-left-radius: var(--zen-border-radius);
+        border-bottom-right-radius: var(--zen-border-radius);
+        border: 1px solid var(--zen-colors-border);
+        border-top-width: 0px;
+        transition: all 0.2s ease-in-out;
+        width: 100%;
+        opacity: 0;
       }
 
-  #navigator-toolbox[zen-right-side='true'] {
+      #zen-appcontent-navbar-container:hover,
-    & {
+      #zen-appcontent-navbar-container[zen-has-hover],
-      right: 0 !important;
+      #zen-appcontent-navbar-container:focus-within,
-      transform: translateX(calc(100% - (var(--zen-compact-toolbox-margin-single) / 2))) !important;
+      #zen-appcontent-navbar-container[zen-user-show],
-    }
+      #zen-appcontent-navbar-container[has-popup-menu],
-
+      #zen-appcontent-navbar-container:has(*[open='true']) {
-    &:hover,
-    &:focus-within,
-    &[zen-user-show],
-    &[flash-popup],
-    &[movingtab],
-    &:has(.tabbrowser-tab:active),
-    & #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
-    &:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
-      transform: none !important;
         opacity: 1;
+        border-top-width: 1px;
 
-      & > * {
+        transform: translateY(-1px);
-        pointer-events: all;
       }
     }
   }

src/browser/base/content/zen-styles/zen-decks.css

@@ -18,7 +18,6 @@
 
 #tabbrowser-tabpanels[zen-split-view='true'] > [zen-split='true'] {
   flex: 1;
-  margin-right: 5px;
 }
 
 #tabbrowser-tabpanels[zen-split-view='true'] > [zen-split-anim='true'] {
@@ -31,8 +30,27 @@
 
 #tabbrowser-tabpanels:has(> [zen-split='true']) {
   display: grid;
-  row-gap: var(--zen-element-separation);
+  row-gap: 0;
-  column-gap: calc(var(--zen-element-separation) / 2);
+  column-gap: 0;
+  --zen-split-row-gap: calc(var(--zen-element-separation) + 2px);
+  --zen-split-column-gap: calc(var(--zen-element-separation) + 1px);
+}
+
+#tabbrowser-tabpanels[zen-split-view] {
+  .zen-split-view-splitter {
+    display: inherit;
+  }
+}
+
+.zen-split-view-splitter {
+  display: none;
+  visibility: inherit;
+  cursor: ew-resize;
+  -moz-subtree-hidden-only-visually: 0;
+}
+
+.zen-split-view-splitter[orient='horizontal'] {
+  cursor: n-resize;
 }
 
 #zen-split-views-box:not([hidden='true']) {

src/browser/base/content/zen-styles/zen-sidebar-panels.css

@@ -68,12 +68,16 @@
 }
 
 #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
-  margin: var(--zen-appcontent-separator-from-window);
   position: absolute;
   z-index: 1;
   width: -moz-available;
-  padding: var(--zen-sidebar-web-panel-spacing);
+  margin: var(--zen-sidebar-web-panel-spacing);
-  height: calc(100% - var(--zen-element-separation));
+  /* Why times 3? 
+   *  + 1 for the top margin, making the element overflow the view.
+   *  + 1 for the margin we want to add at the bottom
+   *  + 1 so that the panel can be correctly spaced from the border of the webview
+   */ 
+  height: calc(100% - var(--zen-sidebar-web-panel-spacing) * 3);
 }
 
 #zen-sidebar-web-panel {
@@ -147,6 +151,7 @@
   position: absolute;
   z-index: 1;
   animation: zen-sidebar-panel-animation-2 0.15s ease-in-out forwards;
+  max-height: 100%;
 }
 
 #zen-sidebar-web-panel[hidden='true'][pinned='true'] {

src/browser/base/content/zen-styles/zen-sidebar.css

@@ -4,18 +4,30 @@ toolbar {
 }
 
 #zen-profile-button {
-  display: flex;
-  justify-content: center;
-  position: relative;
-  align-items: center;
-  list-style-image: var(--avatar-image-url);
-  position: relative;
 
-  & image {
+  & stack {
-    display: flex;
+    padding: 0;
-    justify-content: center;
+  }
-    align-items: center;
+
-    padding: 8px;
+  & .toolbarbutton-badge {
+    display: none !important;
+  }
+
+  & #zen-profile-button-icon {
+    width: 16px;
+    height: 16px;
+    list-style-image: var(--avatar-image-url);
+    border-radius: 50%;
+    pointer-events: none;
+    list-style-image: var(--avatar-image-url);
+    -moz-context-properties: fill;
+    fill: currentColor;
+  }
+}
+
+@media not (-moz-bool-pref: 'zen.view.sidebar-expanded.show-button') {
+  #zen-expand-sidebar-button {
+    display: none !important;
   }
 }
 
@@ -54,3 +66,8 @@ toolbar {
     }
   }
 }
+
+/* Menubar */
+#toolbar-menubar {
+  display: none !important;
+}

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -8,9 +8,17 @@
     height: 100%;
   }
 
+  #TabsToolbar > * {
+    justify-content: center;
+
+  }
+
+  #private-browsing-indicator-with-label {
+    display: none !important;
+  }
+
   #browser {
     --zen-toolbox-padding: 5px;
-    --zen-toolbox-top-align: var(--zen-toolbox-padding);
   }
 
   #navigator-toolbox {
@@ -18,33 +26,79 @@
     --tab-border-radius: var(--border-radius-medium);
     --zen-toolbox-min-width: 1px;
 
+    --tab-hover-background-color: var(--toolbarbutton-hover-background) !important;
+
     min-width: var(--zen-toolbox-min-width);
+    margin-top: 0 !important; /* Fix full screen mode */
 
     padding: var(--zen-toolbox-padding);
     padding-top: var(--zen-toolbox-top-align);
+    padding-bottom: var(--zen-element-separation);
+
+    display: flex;
   }
 
 
   #TabsToolbar-customization-target {
-    gap: var(--zen-toolbox-padding);
+    position: relative;
+    gap: 0;
+    &::after {
+      content: '';
+      display: block;
+      height: 1px;
+      background: color-mix(in srgb, var(--zen-colors-border) 70%, transparent 30%);
+      margin: 0 auto;
+      width: 80%;
+      left: 50%;
+      transform: translateX(-50%);
+      position: absolute;
+      bottom: calc(-1 * var(--zen-toolbox-padding));
+    }
+
+    & > * {
+      border-top-width: 0 !important;
+    }
+  }
+
+  #vertical-tabs-newtab-button {
+    &:hover, &:not(:is(:hover, :active)) .toolbarbutton-icon {
+      background: transparent !important;
+    }
   }
 
   #tabbrowser-tabs {
     margin-inline-start: 0 !important;
     padding-inline-start: 0 !important;
-    grid-gap: 2px !important;
 
-    border-bottom: 1px solid var(--zen-colors-border) !important;
+    position: relative;
+    border-bottom: 0px solid transparent !important;
 
     --tab-block-margin: 2px;
+    --tab-selected-bgcolor: var(--zen-colors-primary);
+    grid-gap: 0 !important;
 
     & .tabbrowser-tab {
+      animation: zen-slide-in 0.2s;
+
       max-width: unset !important;
       padding: 0 !important;
 
+      position: relative;
+
+      height: calc(var(--tab-min-height) + var(--tab-block-margin) * 2) !important;
+      min-height: calc(var(--tab-min-height) + var(--tab-block-margin) * 2) !important;
+
+      border-radius: var(--border-radius-medium);
+
       & .tab-background {
         overflow: hidden;
 
+        &:is([selected], [multiselected]) {
+          @media not (prefers-color-scheme: dark) {
+            border: 1px solid color-mix(in srgb, var(--zen-colors-primary) 60%, transparent 40%) !important;
+          }
+        }
+
         & .tab-context-line {
           margin: 0 0px !important;
           width: 3px !important;
@@ -61,30 +115,22 @@
 
   #zen-sidebar-icons-wrapper {
     background: transparent;
+    padding: 0;
+    gap: 5px;
+    align-items: center;
 
-    & toolbarbutton {
+    & > toolbarbutton:not(#zen-workspaces-button) {
-      width: fit-content;
       padding: 0 !important;
     }
   }
 
   #newtab-button-container {
-    margin-inline-end: 0 !important;
+    display: none !important;
-    padding-top: 0 !important;
-    border-top: solid transparent 0px !important;
-
-    &[showborder] {
-      padding-top: 4px !important;
-
-      &::before {
-        content: '';
-        display: block;
-        height: 1px;
-        background: color-mix(in srgb, var(--zen-colors-border) 70%, transparent 30%);
-        margin: 0 auto;
-        margin-block-end: 4px;
-        width: 80%;
   }
+
+  #tabbrowser-arrowscrollbox {
+    &::part(scrollbox) {
+      gap: 0px !important;
     }
   }
 
@@ -107,101 +153,202 @@
 
   /* Mark: toolbox as expanded */
   #navigator-toolbox:is(
-    #navigator-toolbox[zen-user-hover='true']:hover,
+    #navigator-toolbox[zen-user-hover='true'][zen-has-hover],
     #navigator-toolbox[zen-user-hover='true']:focus-within,
     #navigator-toolbox[zen-user-hover='true'][movingtab],
     #navigator-toolbox[zen-user-hover='true'][flash-popup],
-    #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox,
+    #navigator-toolbox[zen-user-hover='true'][has-popup-menu],
     #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
     #navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])) {
-    --zen-toolbox-min-width: 150px;
+    --zen-toolbox-min-width: fit-content;
+
+    & #titlebar {
+      min-width: 150px;
+    }
+
+    & #zen-workspaces-button {
+      margin-left: 2px;
+      margin-right: 2px;
+
+      & .zen-workspace-sidebar-icon[no-icon='true'] {
+        display: none;
+      }
+    }
 
     & #zen-sidebar-icons-wrapper {
-      display: grid;
+      display: flex;
       /* Make sure the icons take most of the space, smartly */
-      grid-template-columns: repeat(auto-fit, minmax(34px, auto));
+      flex-direction: row;
-      gap: 4px;
       justify-content: space-between;
 
-      padding-top: calc(var(--zen-toolbox-padding) * 2);
+      padding-top: var(--zen-element-separation);
 
-      width: calc(100% - var(--zen-toolbox-padding));
+      width: 100%;
       position: relative;
+
+      --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
     }
 
     /* Mark: Fix separator paddings */
     &[zen-right-side='true'] {
-      padding-left: 0 !important;
+      padding-left: 0;
     }
 
     &:not([zen-right-side='true']) {
-      padding-right: 0 !important;
+      padding-right: 0;
     }
 
-    & #newtab-button-container {
+    & #TabsToolbar-customization-target {
-      &::before {
+      &::after {
         width: 100%;
-        margin-block-end: calc(var(--zen-toolbox-padding) + 2px);
+        bottom: calc(-0.5 * var(--zen-toolbox-padding));
       }
 
-      & #vertical-tabs-newtab-button {
+      & > *:not(tabs):not(#search-container) {
-        padding: 0 !important;
+        width: 100%;
+        border-radius: var(--tab-border-radius);
+
+        padding-left: var(--toolbarbutton-inner-padding);
+        padding-right: var(--toolbarbutton-inner-padding);
 
         & label {
           display: flex;
-          text-align: start;
+          width: 0;
-          align-items: center;
-          padding: 0;
         }
 
-        &:hover * {
+        & image {
+          height: 16px;
+          width: 16px;
+          padding: 0 !important;
+        }
+
+        &:is([open], [checked]) {
+          background: var(--toolbarbutton-active-background) !important;
+
+          & image, label {
             background: transparent !important;
           }
         }
+
+        &:hover {
+          background: var(--toolbarbutton-hover-background) !important;
+
+          & image, label {
+            background: transparent !important;
+          }
+        }
+      }
     }
 
     & #tabbrowser-tabs {
       & .tabbrowser-tab {
-        &:not([pinned]):is(:hover, [visuallyselected]) .tab-close-button {
+        & .tab-background {
-          display: block !important;
+          @media not (prefers-color-scheme: dark) {
-        }
+            box-shadow: none !important;
           }
         }
 
-    @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') {
+        &:not([pinned]):is(:hover, [visuallyselected]) .tab-close-button {
-      :root:not([zen-sidebar-legacy='true']) #navigator-toolbox:is([zen-user-hover='true']:hover, :not([zen-user-hover='true'])) {
+          display: block !important;
-        padding-right: 47px !important;
+        }
+
+        .tab-throbber,
+        .tab-icon-pending,
+        .tab-icon-image,
+        .tab-sharing-icon-overlay,
+        .tab-icon-overlay {
+          &:not([pinned]) {
+            margin-inline-end: var(--toolbarbutton-inner-padding) !important;
+            margin-inline-start: calc(var(--toolbarbutton-inner-padding) / 4) !important;    
+          }
+        }
       }
     }
   }
 
   /* Mark: toolbox as collapsed */
   #navigator-toolbox:not(#navigator-toolbox:is(
-    #navigator-toolbox[zen-user-hover='true']:hover,
+    #navigator-toolbox[zen-user-hover='true'][zen-has-hover],
     #navigator-toolbox[zen-user-hover='true']:focus-within,
     #navigator-toolbox[zen-user-hover='true'][movingtab],
     #navigator-toolbox[zen-user-hover='true'][flash-popup],
-    #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox,
+    #navigator-toolbox[zen-user-hover='true'][has-popup-menu],
     #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
     #navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true']))) {
-    --zen-toolbox-max-width: 50px;
+    --zen-toolbox-max-width: 51px;
     max-width: var(--zen-toolbox-max-width) !important;
+    min-width: calc(var(--zen-toolbox-max-width) + var(--zen-toolbox-padding) / 2 + 2px) !important;
 
-    #vertical-tabs-newtab-button {
+    & #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: calc(var(--zen-toolbox-padding) * 2);
+      padding-top: var(--zen-element-separation);
+      align-items: center;
     }
 
     :root:has(&) #zen-sidebar-splitter {
       display: none !important;
     }
 
+    & #vertical-pinned-tabs-container:has(tab:not([hidden])) {
+      margin-bottom: 8px;
+      position: relative;
+
+      &::after {
+        bottom: -4px;
+        content: '';
+        display: block;
+        height: 1px;
+        background: color-mix(in srgb, var(--zen-colors-border) 80%, transparent 20%);
+        width: 70%;
+        left: 50%;
+        transform: translateX(-50%);
+        position: absolute;
+      }
+    }
+
+    & #zen-workspaces-button[as-button='true']::after {
+      content: '';
+      display: block;
+      height: 80%;
+      width: 3px;
+      background: color-mix(in srgb, var(--zen-primary-color) 50%, transparent 50%);
+      position: absolute;
+      left: calc(-1 * var(--zen-toolbox-padding) - 1px);
+      top: 50%;
+      transform: translateY(-50%);
+      border-top-right-radius: var(--zen-border-radius);
+      border-bottom-right-radius: var(--zen-border-radius);
+    }
+
+    &[zen-right-side='true'] #zen-workspaces-button[as-button='true']::after {
+      left: unset;
+      right: calc(-1 * var(--zen-toolbox-padding) - 1px);
+
+      border-top-left-radius: var(--zen-border-radius);
+      border-bottom-left-radius: var(--zen-border-radius);
+
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    & #TabsToolbar-customization-target {
+      padding-bottom: var(--zen-toolbox-padding);
+
+      &::after {
+        bottom: -1px !important;
+      }
+    }
+
     & #tabbrowser-tabs {
       --tab-min-width: 36px !important;
 
@@ -210,6 +357,12 @@
         width: var(--tab-min-width) !important;
         height: var(--tab-min-width) !important;
 
+        & .tab-background:is([selected], [multiselected]) {
+          @media not (prefers-color-scheme: dark) {
+            box-shadow: 0 0 1px 1px rgba(0,0,0,.05) !important;
+          }
+        }
+
         & .tab-content {
           display: flex;
           align-content: center;
@@ -225,6 +378,56 @@
           }
         }
       }
+
+      #vertical-pinned-tabs-container {
+        display: flex;
+        flex-direction: column;
+        gap: 0 !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;
+          }
+        
+          :root:has(#navigator-toolbox:not([zen-right-side='true'])) &[active='true']::after {
+            left: -2px;
+            animation: zen-workspaces-button-active-collapsed-left 0.1s ease-in-out !important;
+          }
+
+          :root:has(#navigator-toolbox[zen-right-side='true']) &[active='true']::after {
+            left: unset !important;
+            right: -2px;
+            animation: zen-workspaces-button-active-collapsed-right 0.1s ease-in-out !important;
+          }
+        }
+      }
     }
   }
 
@@ -246,8 +449,6 @@
     }
 
     #TabsToolbar {
-      --hovered-verticaltab-width: 20em;
-
       z-index: 1;
       background-repeat: no-repeat !important;
       background-position: center center !important;
@@ -261,14 +462,14 @@
       border-top-right-radius: var(--zen-border-radius);
     }
 
-    #navigator-toolbox:hover,
+    #navigator-toolbox[zen-has-hover],
     #navigator-toolbox:focus-within,
     #navigator-toolbox[movingtab],
     #navigator-toolbox[flash-popup],
-    #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
+    #navigator-toolbox[has-popup-menu],
     #navigator-toolbox:has(.tabbrowser-tab:active),
     #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
-      --zen-navigation-toolbar-min-width: 3.4rem !important;
+      --zen-navigation-toolbar-min-width: 55.5px !important; /* + the width of the splitter */
 
       max-width: var(--zen-navigation-toolbar-min-width) !important;
       min-width: var(--zen-navigation-toolbar-min-width) !important;
@@ -284,6 +485,7 @@
         padding: var(--zen-toolbox-padding);
         transition: 0 !important;
         animation: zen-vtabs-animation 0.3s ease-in-out;
+        -moz-window-dragging: no-drag;
       }
 
       &[zen-right-side='true'] #TabsToolbar {
@@ -305,37 +507,6 @@
         display: none !important;
         visibility: hidden !important;
       }
-
-      & #zen-sidebar-icons-wrapper {
-        display: block !important;
-      }
-
-      & .zen-sidebar-action-button {
-        width: 100%;
-        border-radius: var(--zen-button-border-radius);
-
-        &:hover {
-          background: var(--button-hover-bgcolor);
-        }
-
-        & > *,
-        &:hover > * {
-          background: transparent !important;
-          --toolbarbutton-active-background: transparent;
-        }
-
-        & label:not(.toolbarbutton-badge) {
-          --toolbarbutton-hover-background: transparent;
-          display: block !important;
-          text-align: start;
-        }
-      }
-
-      #navigator-toolbox,
-      #titlebar,
-      #TabsToolbar {
-        transition: .1s !important;
-      }
     }
   }
 
@@ -349,4 +520,66 @@
       order: 2;
     }
   }
+
+  /* Mark: Override the default tab close button */
+  #tabbrowser-tabs {
+    & .tabbrowser-tab {
+      &[pinned] .tab-close-button {
+        display: none !important;
+      }
+
+      &[selected] .tab-background {
+        background: var(--zen-colors-secondary) !important;
+      }
+    }
+  }
+
+  /* Customization mode */
+  /*:root[customizing] #TabsToolbar > *:not(#zen-sidebar-icons-wrapper) {
+    overflow: hidden;
+    max-width: 0 !important;
+    margin-right: var(--zen-element-separation);
+    padding: 0 !important;
+    opacity: 0;
+    display: none;
+  }*/
+
+  :root[customizing] #TabsToolbar > *,
+  :root[customizing] #TabsToolbar-customization-target {
+    min-width: unset !important;
+  }
+
+  /* Mark: Sidebar top buttons */
+  #zen-sidebar-top-buttons {
+    order: -1;
+
+    min-width: unset !important;
+    --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
+    
+    & #zen-sidebar-top-buttons-customization-target {
+      height: 100%;
+      align-items: center;
+
+      #nav-bar:has(&) & {
+        padding-inline-start: calc(var(--zen-toolbox-padding) + var(--toolbarbutton-outer-padding));
+      }
+
+      #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+        padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
+      }
+
+      & toolbarbutton {
+        height: 100%;
+        padding: 0 var(--toolbarbutton-outer-padding) !important;
+      }
+    }
+
+    & .zen-sidebar-action-button {
+      padding: 0 !important;
+
+      & label {
+        display: none !important;
+      }
+    }
+  }
 }

src/browser/base/content/zen-styles/zen-theme.css

@@ -74,6 +74,11 @@
   --zen-button-border-radius: 7px;
   --zen-button-padding: 0.6rem 1.2rem;
 
+  /* Toolbar */
+  --zen-toolbar-height: 39px;
+  --zen-toolbar-button-inner-padding: 6px;
+  --toolbarbutton-outer-padding: 4px;
+
   /* Other colors */
   --urlbar-box-bgcolor: var(--zen-urlbar-background) !important;
   --toolbar-field-focus-background-color: var(--urlbar-box-bgcolor) !important;
@@ -103,6 +108,8 @@
   --fp-contextmenu-bgcolor: light-dark(Menu, rgb(43 42 51 / 0.95));
   --toolbar-bgcolor: transparent;
 
+  --toolbarbutton-active-background: var(--zen-colors-border) !important;
+
   --input-bgcolor: var(--zen-colors-tertiary) !important;
   --input-border-color: var(--zen-input-border-color) !important;
   --zen-themed-toolbar-bg: var(--zen-colors-tertiary);

src/browser/base/content/zen-styles/zen-toolbar.css

@@ -1,4 +1,5 @@
-#nav-bar {
+#nav-bar,
+#zen-sidebar-top-buttons {
   background: transparent;
 }
 

src/browser/base/content/zen-styles/zen-urlbar.css

@@ -1,5 +1,10 @@
 /* URL and tool bars */
 
+#urlbar-container {
+  padding-block: 0 !important;
+  padding-bottom: 2px !important;
+}
+
 #urlbar {
   --toolbarbutton-border-radius: 10px;
   --urlbarView-separator-color: var(--zen-colors-border);
@@ -171,32 +176,6 @@ button.popup-notification-dropmarker {
   margin-top: 5px;
 }
 
-:root:not([zen-sidebar-legacy='true']) {
-  @media (max-width: 650px) {
-    #urlbar-container {
-      width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
-    }
-
-    #nav-bar[downloadsbuttonshown] #urlbar-container,
-    #nav-bar[unifiedextensionsbuttonshown] #urlbar-container {
-      width: calc(76px + 24px + 2 * var(--toolbarbutton-inner-padding));
-    }
-
-    #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container {
-      width: 176px;
-    }
-
-    #identity-icon-box {
-      max-width: 70px;
-    }
-
-    #urlbar-zoom-button {
-      display: none;
-    }
-  }
-}
-
-:root[zen-sidebar-legacy='true'] {
 @media (max-width: 550px) {
   #urlbar-container {
     width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
@@ -219,7 +198,6 @@ button.popup-notification-dropmarker {
     display: none;
   }
 }
-}
 
 /* Thanks to https://github.com/JLBlk!
  * Checkout https://github.com/JLBlk/Zen-Themes/blob/main/SuperUrlBar/SuperUrlBar.css
@@ -272,6 +250,16 @@ button.popup-notification-dropmarker {
   }
 }
 
+#nav-bar,
+#zen-sidebar-top-buttons {
+  min-height: var(--zen-toolbar-height) !important;
+  height: var(--zen-toolbar-height) !important;
+  max-height: var(--zen-toolbar-height) !important;
+  display: flex;
+  align-items: center;
+}
+
+
 /* Other small tweaks */
 #nav-bar-customization-target {
   /* Don't grow if potentially-user-sized elements (like the searchbar or the
@@ -279,9 +267,20 @@ button.popup-notification-dropmarker {
    * available space as much as possible, see bug 1795260. */
   min-width: 0;
 
+  --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding);
+
   /* Add space to beginning of toolbar and make that space click the first <toolbarbutton> */
   > :is(toolbarbutton, toolbaritem):first-child,
   > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) {
     padding-inline-start: 0;
   }
 }
+
+/* TODO: Fix this for windows and macos */
+/*.titlebar-button:last-child {
+  padding-right: var(--zen-element-separation) !important;
+}*/
+
+#PersonalToolbar:not([collapsed="true"]) {
+  padding-bottom: 6px;
+}

src/browser/base/content/zen-styles/zen-workspaces.css

@@ -1,12 +1,73 @@
 #zen-workspaces-button {
-  border: 1px solid var(--zen-colors-border);
-  border-radius: var(--zen-button-border-radius);
-  min-height: 33px;
   justify-content: center;
   align-items: center;
   display: flex;
-  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
+
-  -moz-window-dragging: no-drag;
+  position: relative;
+
+  &:not([as-button='true']) {
+    border-radius: var(--zen-button-border-radius);
+    background: color-mix(in srgb, var(--zen-colors-border) 50%, transparent 50%);
+    padding: 5px;
+    height: fit-content;
+    gap: 3px;
+
+    & toolbarbutton {
+      margin: 0 !important;
+      width: 25px;
+      display: flex;
+      justify-content: center;
+      padding: 0 !important;
+      align-items: center;
+      position: relative;
+
+      & > * {
+        opacity: .6;
+      }
+
+      &[active='true']::after {
+        content: '';
+        position: absolute;
+        width: 4px;
+        border-radius: 99px;
+        height: 4px;
+        background: var(--zen-primary-color);
+        bottom: -2px;
+        left: 50%;
+        transform: translateX(-50%);
+        animation: zen-workspaces-button-active 0.1s ease-in-out;
+      }
+    }
+  }
+
+  &[as-button='true'] {
+    border-radius: var(--tab-border-radius);
+
+    &:hover {
+      background: var(--toolbarbutton-hover-background);
+    }
+  }
+
+  :root:has(#navigator-toolbox:not([zen-expanded='true'])) &[as-button='true'] {
+    margin: 0 !important;
+    padding: var(--toolbarbutton-inner-padding) !important;
+    width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
+    height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
+    border-radius: var(--tab-border-radius) !important;
+
+    &:hover {
+      background: var(--toolbarbutton-hover-background) !important;
+    }
+  }
+}
+
+#zen-workspaces-button .zen-workspace-sidebar-wrapper {
+  position: absolute;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
 }
 
 #zen-workspaces-button .zen-workspace-sidebar-name {
@@ -15,32 +76,43 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  font-size: 12px;
+  font-size: 13px;
 }
 
 @media (-moz-bool-pref: 'zen.view.sidebar-expanded') {
   /** Keep these selectors in sync with the ones in vertical-tabs.css */
   #navigator-toolbox:is(
-      #navigator-toolbox[zen-user-hover='true']:hover,
+      #navigator-toolbox[zen-user-hover='true'][zen-has-hover],
+      #navigator-toolbox[zen-user-hover='true'][has-popup-menu],
       #navigator-toolbox[zen-user-hover='true']:focus-within,
       #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox,
       #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
       :not([zen-user-hover='true'])
     ) {
 
-    & #zen-workspaces-button {
+    & #zen-workspaces-button[as-button='true'] {
-      width: calc(var(--zen-sidebar-action-button-width) - 1px) !important;
+      width: 100% !important;
-      margin-top: .2rem;
+      margin: 2px;
-      height: calc(var(--zen-sidebar-action-button-width) - 10px) !important;
+      min-width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
+      height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
+
+      & .zen-workspace-sidebar-wrapper {
+        left: calc(var(--toolbarbutton-outer-padding) + 5px);
+        width: calc(100% - (var(--toolbarbutton-outer-padding) * 3  ));
+      }
     }
     
     & #zen-workspaces-button .zen-workspace-sidebar-name {
       display: block;
     }
 
-    & #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] {
+    & #zen-workspaces-button .zen-workspace-sidebar-icon {
+      margin-inline-end: 5px;
+      
+      & [no-icon='true'] {
         display: none;
       }
+    }
 
     & #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] + .zen-workspace-sidebar-name {
       margin-left: 0;
@@ -51,7 +123,6 @@
       white-space: nowrap;
       text-overflow: ellipsis;
       display: flex;
-      padding: 2px 10px;
       width: calc(100% - var(--zen-tabbrowser-padding) * 6) !important;
       gap: 0.5ch;
     }

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

@@ -1,8 +1,16 @@
 diff --git a/browser/components/customizableui/CustomizableUI.sys.mjs b/browser/components/customizableui/CustomizableUI.sys.mjs
-index f466105b8290b13c672351bb68dd92644dd670fe..b195cd59d7ff07ff512e7388c9dc33f3c661d955 100644
+index 289c3df7dcd6fa6b35681ce61c1e920b6a2651d7..aa7d86770cce41a720e92f63392a763b16381f55 100644
 --- a/browser/components/customizableui/CustomizableUI.sys.mjs
 +++ b/browser/components/customizableui/CustomizableUI.sys.mjs
-@@ -25,7 +25,7 @@ ChromeUtils.defineLazyGetter(lazy, "gWidgetsBundle", function () {
+@@ -13,6 +13,7 @@ ChromeUtils.defineESModuleGetters(lazy, {
+   AddonManagerPrivate: "resource://gre/modules/AddonManager.sys.mjs",
+   BrowserUsageTelemetry: "resource:///modules/BrowserUsageTelemetry.sys.mjs",
+   CustomizableWidgets: "resource:///modules/CustomizableWidgets.sys.mjs",
++  ZenCustomizableUI: "chrome://browser/content/ZenCustomizableUI.sys.mjs",
+   HomePage: "resource:///modules/HomePage.sys.mjs",
+   PanelMultiView: "resource:///modules/PanelMultiView.sys.mjs",
+   PrivateBrowsingUtils: "resource://gre/modules/PrivateBrowsingUtils.sys.mjs",
+@@ -25,7 +26,7 @@ ChromeUtils.defineLazyGetter(lazy, "gWidgetsBundle", function () {
    return Services.strings.createBundle(kUrl);
  });
  
@@ -11,7 +19,16 @@ index f466105b8290b13c672351bb68dd92644dd670fe..b195cd59d7ff07ff512e7388c9dc33f3
  
  const kSpecialWidgetPfx = "customizableui-special-";
  
-@@ -253,10 +253,9 @@ var CustomizableUIInternal = {
+@@ -222,6 +223,8 @@ var CustomizableUIInternal = {
+     this._updateForNewProtonVersion();
+     this._markObsoleteBuiltinButtonsSeen();
+ 
++    lazy.ZenCustomizableUI.startup(this);
++
+     this.registerArea(
+       CustomizableUI.AREA_FIXED_OVERFLOW_PANEL,
+       {
+@@ -253,10 +256,9 @@ var CustomizableUIInternal = {
        "spring",
        "urlbar-container",
        "spring",
@@ -23,12 +40,35 @@ index f466105b8290b13c672351bb68dd92644dd670fe..b195cd59d7ff07ff512e7388c9dc33f3
        lazy.resetPBMToolbarButtonEnabled ? "reset-pbm-toolbar-button" : null,
      ].filter(name => name);
  
-@@ -288,7 +287,7 @@ var CustomizableUIInternal = {
+@@ -288,10 +290,10 @@ var CustomizableUIInternal = {
        {
          type: CustomizableUI.TYPE_TOOLBAR,
          defaultPlacements: [
 -          "firefox-view-button",
 +//          "firefox-view-button",
            "tabbrowser-tabs",
-           "new-tab-button",
+-          "new-tab-button",
-           "alltabs-button",
+-          "alltabs-button",
++//          "new-tab-button",
++//          "alltabs-button",
+         ],
+         defaultCollapsed: null,
+       },
+@@ -331,6 +333,7 @@ var CustomizableUIInternal = {
+       CustomizableUI.AREA_NAVBAR,
+       CustomizableUI.AREA_BOOKMARKS,
+       CustomizableUI.AREA_TABSTRIP,
++      "zen-sidebar-top-buttons",
+     ]);
+     if (AppConstants.platform != "macosx") {
+       toolbars.add(CustomizableUI.AREA_MENUBAR);
+@@ -3289,6 +3292,9 @@ var CustomizableUIInternal = {
+         gSeenWidgets.add(widgetId);
+       }
+     }
++
++    
++
+     if (gSeenWidgets.size || gNewElementCount) {
+       gDirty = true;
+       this.saveState();

src/browser/components/places/content/zenNewWebPanel.js

@@ -34,7 +34,7 @@ var gZenNewWebPanel = {
   handleDialogAccept: async function (aEvent) {
     document.commandDispatcher.focusedElement?.blur();
     let url = document.getElementById('zenNWP_url');
-    let ua = document.getElementById('zenNWP_userAgent');
+    let ua = document.getElementById('zenNWP_userAgent'); // checbkox
     if (!url || !ua) {
       return;
     }
@@ -44,12 +44,12 @@ var gZenNewWebPanel = {
     } catch (_) {
       urlValue = this.addHttpIfMissing(url.value);
     }
-    if (!url.value || !ua.value) {
+    if (!url.value) {
       return;
     }
     let newSite = {
       url: urlValue,
-      ua: ua.value,
+      ua: ua.checked,
     };
     let currentData = JSON.parse(Services.prefs.getStringPref('zen.sidebar.data'));
     let newName = 'p' + new Date().getTime();

src/browser/components/preferences/zen-settings.js

@@ -2,25 +2,6 @@
 // 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/.
 
-const kZenColors = [
-  '#aac7ff',
-  '#74d7cb',
-  '#a0d490',
-  '#dec663',
-  '#ffb787',
-  '#dec1b1',
-  '#ffb1c0',
-  '#ddbfc3',
-  '#f6b0ea',
-  '#d4bbff',
-];
-
-const kZenOSToSmallName = {
-  WINNT: 'windows',
-  Darwin: 'macos',
-  Linux: 'linux',
-};
-
 var gZenMarketplaceManager = {
   init() {
     const checkForUpdates = document.getElementById('zenThemeMarketplaceCheckForUpdates');
@@ -79,123 +60,45 @@ var gZenMarketplaceManager = {
     return document.getElementById('zenThemeMarketplaceList');
   },
 
-  get themesDataFile() {
-    return PathUtils.join(PathUtils.profileDir, 'zen-themes.json');
-  },
-
-  get themesRootPath() {
-    return PathUtils.join(PathUtils.profileDir, 'chrome', 'zen-themes');
-  },
-
   async removeTheme(themeId) {
-    const themePath = PathUtils.join(this.themesRootPath, themeId);
+    const themePath = ZenThemesCommon.getThemeFolder(themeId);
-    console.info('ZenThemeMarketplaceParent(settings): Removing theme ', themePath);
+
+    console.info(`[ZenThemeMarketplaceParent:settings]: Removing theme ${themePath}`);
+
     await IOUtils.remove(themePath, { recursive: true, ignoreAbsent: true });
 
-    let themes = await this._getThemes();
+    const themes = await ZenThemesCommon.getThemes();
     delete themes[themeId];
-    await IOUtils.writeJSON(this.themesDataFile, themes);
+    await IOUtils.writeJSON(ZenThemesCommon.themesDataFile, themes);
 
     this.triggerThemeUpdate();
   },
 
   async disableTheme(themeId) {
-    const themes = await this._getThemes();
+    const themes = await ZenThemesCommon.getThemes();
     const theme = themes[themeId];
 
     theme.enabled = false;
 
-    await IOUtils.writeJSON(this.themesDataFile, themes);
+    await IOUtils.writeJSON(ZenThemesCommon.themesDataFile, themes);
     this._doNotRebuildThemesList = true;
     this.triggerThemeUpdate();
   },
 
   async enableTheme(themeId) {
-    const themes = await this._getThemes();
+    const themes = await ZenThemesCommon.getThemes();
     const theme = themes[themeId];
 
     theme.enabled = true;
 
-    await IOUtils.writeJSON(this.themesDataFile, themes);
+    await IOUtils.writeJSON(ZenThemesCommon.themesDataFile, themes);
     this._doNotRebuildThemesList = true;
     this.triggerThemeUpdate();
   },
 
-  async _getThemes() {
+  _triggerBuildUpdateWithoutRebuild() {
-    if (!this._themes) {
+    this._doNotRebuildThemesList = true;
-      if (!(await IOUtils.exists(this.themesDataFile))) {
+    this.triggerThemeUpdate();
-        await IOUtils.writeJSON(this.themesDataFile, {});
-      }
-      this._themes = await IOUtils.readJSON(this.themesDataFile);
-    }
-    return this._themes;
-  },
-
-  get currentOperatingSystem() {
-    let os = Services.appinfo.OS;
-    return kZenOSToSmallName[os];
-  },
-
-  _getValidPreferences(preferences) {
-    for (let entry of preferences) {
-      const key = entry.property;
-      // [!][os:]key
-      let restOfPreferences = key;
-      let isNegation = false;
-      if (key.startsWith('!')) {
-        isNegation = true;
-        restOfPreferences = key.slice(1);
-      }
-      let os = '';
-      if (restOfPreferences.includes(':')) {
-        [os, restOfPreferences] = restOfPreferences.split(':');
-      }
-      if (isNegation && os === this.currentOperatingSystem) {
-        delete preferences[key];
-      } else if (os && os !== this.currentOperatingSystem && !isNegation) {
-        delete preferences[key];
-      } else {
-        // Change the key to contain only the rest of the preferences.
-        preferences[restOfPreferences] = preferences[key];
-        if (key !== restOfPreferences) {
-          delete preferences[key];
-        }
-      }
-    }
-    return preferences;
-  },
-
-  async _getThemePreferences(theme) {
-    const themePath = PathUtils.join(this.themesRootPath, theme.id, 'preferences.json');
-    if (!(await IOUtils.exists(themePath)) || !theme.preferences) {
-      return [];
-    }
-
-    let themePreferences = await IOUtils.readJSON(themePath);
-
-    // compat mode for old preferences, all of them can only be checkboxes
-    if (typeof themePreferences === 'object' && !Array.isArray(themePreferences)) {
-      console.warn(
-        `[ZenThemeMarketplaceManager]: 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: `
-      );
-      themePreferences = Object.entries(themePreferences).map(([property, label]) => {
-        return {
-          property,
-          label,
-          type: 'checkbox',
-        };
-      });
-    }
-
-    return this._getValidPreferences(themePreferences);
-  },
-
-  _getBrowser() {
-    if (!this.__browser) {
-      this.__browser = Services.wm.getMostRecentWindow('navigator:browser');
-    }
-
-    return this.__browser;
   },
 
   async _buildThemesList() {
@@ -205,15 +108,18 @@ var gZenMarketplaceManager = {
       return;
     }
 
-    console.log('ZenThemeMarketplaceParent(settings): Building themes list');
+    console.log('[ZenThemeMarketplaceParent:settings]: Building themes list');
 
-    let themes = await this._getThemes();
+    const themes = await ZenThemesCommon.getThemes();
 
-    const browser = this._getBrowser();
+    const browser = ZenThemesCommon.currentBrowser;
 
     const themeList = document.createElement('div');
 
-    for (let theme of Object.values(themes)) {
+    for (const theme of Object.values(themes)) {
+      const sanitizedName = `theme-${theme.name?.replaceAll(/\s/g, '-')?.replaceAll(/[^A-z_-]+/g, '')}`;
+      const isThemeEnabled = theme.enabled === undefined || theme.enabled;
+
       const fragment = window.MozXULElement.parseXULToFragment(`
         <vbox class="zenThemeMarketplaceItem">
           <vbox class="zenThemeMarketplaceItemContent">
@@ -223,14 +129,13 @@ var gZenMarketplaceManager = {
             <description class="description-deemphasized zenThemeMarketplaceItemDescription"></description>
           </vbox>
           <hbox class="zenThemeMarketplaceItemActions">
-            <button class="zenThemeMarketplaceItemConfigureButton" hidden="true"></button>
+            ${theme.preferences ? `<button id="zenThemeMarketplaceItemConfigureButton-${sanitizedName}" class="zenThemeMarketplaceItemConfigureButton" hidden="true"></button>` : ''}
             <button class="zenThemeMarketplaceItemUninstallButton" data-l10n-id="zen-theme-marketplace-remove-button" zen-theme-id="${theme.id}"></button>
           </hbox>
         </vbox>
       `);
 
       const themeName = `${theme.name} (v${theme.version || '1.0.0'})`;
-      const sanitizedName = `theme-${theme.name?.replaceAll(/\s/g, '-')?.replaceAll(/[^A-z_-]+/g, '')}`;
 
       const base = fragment.querySelector('.zenThemeMarketplaceItem');
       const baseHeader = fragment.querySelector('#zenThemeMarketplaceItemContentHeader');
@@ -246,16 +151,21 @@ var gZenMarketplaceManager = {
       mainDialogDiv.className = 'zenThemeMarketplaceItemPreferenceDialog';
       headerDiv.className = 'zenThemeMarketplaceItemPreferenceDialogTopBar';
       headerTitle.textContent = themeName;
-      headerTitle.title = `CSS Selector: ${sanitizedName}`;
+      browser.document.l10n.setAttributes(headerTitle, 'zen-theme-marketplace-theme-header-title', {
+        name: sanitizedName,
+      });
       headerTitle.className = 'zenThemeMarketplaceItemTitle';
       closeButton.id = `${sanitizedName}-modal-close`;
-      closeButton.textContent = 'Close';
+      browser.document.l10n.setAttributes(closeButton, 'zen-theme-marketplace-close-modal');
       contentDiv.id = `${sanitizedName}-preferences-content`;
       contentDiv.className = 'zenThemeMarketplaceItemPreferenceDialogContent';
       mozToggle.className = 'zenThemeMarketplaceItemPreferenceToggle';
 
-      mozToggle.pressed = theme.enabled;
+      mozToggle.pressed = isThemeEnabled;
-      mozToggle.title = theme.enabled ? 'Disable theme' : 'Enable theme';
+      browser.document.l10n.setAttributes(
+        mozToggle,
+        `zen-theme-marketplace-toggle-${isThemeEnabled ? 'enabled' : 'disabled'}-button`
+      );
 
       baseHeader.appendChild(mozToggle);
 
@@ -279,38 +189,54 @@ var gZenMarketplaceManager = {
 
         if (!event.target.hasAttribute('pressed')) {
           await this.disableTheme(themeId);
+
+          browser.document.l10n.setAttributes(mozToggle, 'zen-theme-marketplace-toggle-disabled-button');
+
+          if (theme.preferences) {
+            document.getElementById(`zenThemeMarketplaceItemConfigureButton-${sanitizedName}`).setAttribute('hidden', true);
+          }
         } else {
           await this.enableTheme(themeId);
+
+          browser.document.l10n.setAttributes(mozToggle, 'zen-theme-marketplace-toggle-enabled-button');
+
+          if (theme.preferences) {
+            document.getElementById(`zenThemeMarketplaceItemConfigureButton-${sanitizedName}`).removeAttribute('hidden');
+          }
         }
       });
 
       fragment.querySelector('.zenThemeMarketplaceItemTitle').textContent = themeName;
       fragment.querySelector('.zenThemeMarketplaceItemDescription').textContent = theme.description;
       fragment.querySelector('.zenThemeMarketplaceItemUninstallButton').addEventListener('click', async (event) => {
-        if (!confirm('Are you sure you want to remove this theme?')) {
+        const [msg] = await document.l10n.formatValues([{ id: 'zen-theme-marketplace-remove-confirmation' }]);
+
+        if (!confirm(msg)) {
           return;
         }
-        const target = event.target;
+
-        const themeId = target.getAttribute('zen-theme-id');
+        await this.removeTheme(event.target.getAttribute('zen-theme-id'));
-        await this.removeTheme(themeId);
       });
+
+      if (theme.preferences) {
         fragment.querySelector('.zenThemeMarketplaceItemConfigureButton').addEventListener('click', () => {
           dialog.showModal();
         });
 
-      if (theme.enabled && theme.preferences) {
+        if (isThemeEnabled) {
           fragment.querySelector('.zenThemeMarketplaceItemConfigureButton').removeAttribute('hidden');
         }
+      }
 
-      const preferences = await this._getThemePreferences(theme);
+      const preferences = await ZenThemesCommon.getThemePreferences(theme);
 
       if (preferences.length > 0) {
         const preferencesWrapper = document.createXULElement('vbox');
 
-        preferencesWrapper.classList.add('zenThemeMarketplaceItemPreferences');
+        preferencesWrapper.setAttribute('flex', '1');
 
-        for (let entry of preferences) {
+        for (const entry of preferences) {
-          const { property, label, type } = entry;
+          const { property, label, type, placeholder } = entry;
 
           switch (type) {
             case 'dropdown': {
@@ -335,18 +261,23 @@ var gZenMarketplaceManager = {
               const defaultItem = document.createXULElement('menuitem');
 
               defaultItem.setAttribute('value', 'none');
-              defaultItem.setAttribute('label', '-');
+
+              if (placeholder) {
+                defaultItem.setAttribute('label', placeholder || '-');
+              } else {
+                browser.document.l10n.setAttributes(defaultItem, 'zen-theme-marketplace-dropdown-default-label');
+              }
 
               menupopup.appendChild(defaultItem);
 
-              for (let option of options) {
+              for (const option of options) {
                 const { label, value } = option;
 
                 const valueType = typeof value;
 
                 if (!['string', 'number'].includes(valueType)) {
                   console.log(
-                    `ZenThemeMarketplaceParent(settings): Warning, invalid data type received (${valueType}), skipping.`
+                    `[ZenThemeMarketplaceParent:settings]: Warning, invalid data type received (${valueType}), skipping.`
                   );
                   continue;
                 }
@@ -378,6 +309,7 @@ var gZenMarketplaceManager = {
                 element.setAttribute(property?.replaceAll(/\./g, '-'), value);
 
                 Services.prefs.setStringPref(property, value === 'none' ? '' : value);
+                this._triggerBuildUpdateWithoutRebuild();
               });
 
               const nameLabel = document.createXULElement('label');
@@ -395,7 +327,7 @@ var gZenMarketplaceManager = {
             }
 
             case 'checkbox': {
-              const fragment = window.MozXULElement.parseXULToFragment(`
+              const checkbox = window.MozXULElement.parseXULToFragment(`
                 <hbox class="zenThemeMarketplaceItemPreference">
                   <checkbox class="zenThemeMarketplaceItemPreferenceCheckbox" label="${label}" tooltiptext="${property}" zen-pref="${property}"></checkbox>
                 </hbox>
@@ -403,13 +335,13 @@ var gZenMarketplaceManager = {
 
               // Checkbox only works with "true" and "false" values, it's not like HTML checkboxes.
               if (Services.prefs.getBoolPref(property, false)) {
-                fragment.querySelector('.zenThemeMarketplaceItemPreferenceCheckbox').setAttribute('checked', 'true');
+                checkbox.querySelector('.zenThemeMarketplaceItemPreferenceCheckbox').setAttribute('checked', 'true');
               }
 
-              fragment.querySelector('.zenThemeMarketplaceItemPreferenceCheckbox').addEventListener('click', (event) => {
+              checkbox.querySelector('.zenThemeMarketplaceItemPreferenceCheckbox').addEventListener('click', (event) => {
-                let target = event.target.closest('.zenThemeMarketplaceItemPreferenceCheckbox');
+                const target = event.target.closest('.zenThemeMarketplaceItemPreferenceCheckbox');
-                let key = target.getAttribute('zen-pref');
+                const key = target.getAttribute('zen-pref');
-                let checked = target.hasAttribute('checked');
+                const checked = target.hasAttribute('checked');
 
                 if (!checked) {
                   target.removeAttribute('checked');
@@ -420,13 +352,64 @@ var gZenMarketplaceManager = {
                 Services.prefs.setBoolPref(key, !checked);
               });
 
-              preferencesWrapper.appendChild(fragment);
+              preferencesWrapper.appendChild(checkbox);
+              break;
+            }
+
+            case 'string': {
+              const container = document.createXULElement('hbox');
+              container.classList.add('zenThemeMarketplaceItemPreference');
+              container.setAttribute('align', 'center');
+              container.setAttribute('role', 'group');
+
+              const savedValue = Services.prefs.getStringPref(property, '');
+              const sanitizedProperty = property?.replaceAll(/\./g, '-');
+
+              const input = document.createElement('input');
+              input.setAttribute('flex', '1');
+              input.setAttribute('type', 'text');
+              input.id = `${sanitizedProperty}-input`;
+              input.value = savedValue;
+
+              if (placeholder) {
+                input.setAttribute('placeholder', placeholder || '-');
+              } else {
+                browser.document.l10n.setAttributes(input, 'zen-theme-marketplace-input-default-placeholder');
+              }
+
+              input.addEventListener(
+                'input',
+                ZenThemesCommon.throttle((event) => {
+                  const value = event.target.value;
+
+                  Services.prefs.setStringPref(property, value);
+                  this._triggerBuildUpdateWithoutRebuild();
+
+                  if (value === '') {
+                    browser.document.querySelector(':root').style.removeProperty(`--${sanitizedProperty}`);
+                  } else {
+                    browser.document.querySelector(':root').style.setProperty(`--${sanitizedProperty}`, value);
+                  }
+                }, 500)
+              );
+
+              const nameLabel = document.createXULElement('label');
+              nameLabel.setAttribute('flex', '1');
+              nameLabel.setAttribute('class', 'zenThemeMarketplaceItemPreferenceLabel');
+              nameLabel.setAttribute('value', label);
+              nameLabel.setAttribute('tooltiptext', property);
+
+              container.appendChild(nameLabel);
+              container.appendChild(input);
+              container.setAttribute('aria-labelledby', label);
+
+              preferencesWrapper.appendChild(container);
               break;
             }
 
             default:
               console.log(
-                `ZenThemeMarketplaceParent(settings): Warning, unknown preference type received (${type}), skipping.`
+                `[ZenThemeMarketplaceParent:settings]: Warning, unknown preference type received (${type}), skipping.`
               );
               continue;
           }
@@ -450,13 +433,10 @@ var gZenLooksAndFeel = {
     this._initializeTabbarExpandForm();
     gZenThemeBuilder.init();
     gZenMarketplaceManager.init();
-    var onLegacyToolbarChange = this.onLegacyToolbarChange.bind(this);
-    Services.prefs.addObserver('zen.themes.tabs.legacy-location', onLegacyToolbarChange);
     var onPreferColorSchemeChange = this.onPreferColorSchemeChange.bind(this);
     window.matchMedia('(prefers-color-scheme: dark)').addListener(onPreferColorSchemeChange);
     this.onPreferColorSchemeChange();
     window.addEventListener('unload', () => {
-      Services.prefs.removeObserver('zen.themes.tabs.legacy-location', onLegacyToolbarChange);
       window.matchMedia('(prefers-color-scheme: dark)').removeListener(onPreferColorSchemeChange);
     });
     setTimeout(() => {
@@ -469,6 +449,7 @@ var gZenLooksAndFeel = {
       }
     }, 500);
     this.setDarkThemeListener();
+    this.setCompactModeStyle();
   },
 
   onPreferColorSchemeChange(event) {
@@ -482,9 +463,9 @@ var gZenLooksAndFeel = {
   },
 
   setDarkThemeListener() {
-    this.chooser = document.getElementById('zen-dark-theme-styles-form');
+    const chooser = document.getElementById('zen-dark-theme-styles-form');
-    this.radios = [...this.chooser.querySelectorAll('input')];
+    const radios = [...chooser.querySelectorAll('input')];
-    for (let radio of this.radios) {
+    for (let radio of radios) {
       if (radio.value === 'amoled' && Services.prefs.getBoolPref('zen.theme.color-prefs.amoled')) {
         radio.checked = true;
       } else if (radio.value === 'colorful' && Services.prefs.getBoolPref('zen.theme.color-prefs.colorful')) {
@@ -516,11 +497,43 @@ var gZenLooksAndFeel = {
     }
   },
 
-  async onLegacyToolbarChange(event) {
+  setCompactModeStyle() {
-    let buttonIndex = await confirmRestartPrompt(true, 1, true, false);
+    const chooser = document.getElementById('zen-compact-mode-styles-form');
-    if (buttonIndex == CONFIRM_RESTART_PROMPT_RESTART_NOW) {
+    const radios = [...chooser.querySelectorAll('input')];
-      Services.startup.quit(Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart);
+
-      return;
+    let value = '';
+    if (Services.prefs.getBoolPref('zen.view.compact.hide-tabbar')
+          && Services.prefs.getBoolPref('zen.view.compact.hide-toolbar')) {
+      value = 'both';
+    } else {
+      value = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar') ? 'left' : 'top';
+    }
+    chooser.querySelector(`[value='${value}']`).checked = true;
+    const disableExpandTabsOnHover = () => {
+      if (Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover')) {
+        document.querySelector(`#zen-expand-tabbar-strat input[value='expand']`).click();
+      }
+    }
+    for (let radio of radios) {
+      radio.addEventListener('change', (e) => {
+        let value = e.target.value;
+        switch (value) {
+          case 'left':
+            disableExpandTabsOnHover();
+            Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true);
+            Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', false);
+            break;
+          case 'top':
+            Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', false);
+            Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true);
+            break;
+          default:
+            disableExpandTabsOnHover();
+            Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true);
+            Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true);
+            break;
+        }
+      });
     }
   },
 
@@ -536,6 +549,14 @@ var gZenLooksAndFeel = {
     } else {
       form.querySelector('input[value="none"]').checked = true;
     }
+    const disableCompactTabbar = () => {
+      const toolbarEnable = Services.prefs.getBoolPref('zen.view.compact.hide-toolbar');
+      if (toolbarEnable) {
+        document.querySelector(`#ZenCompactModeStyle input[value='top']`).click();
+      } else if (Services.prefs.getBoolPref('zen.view.compact')) {
+        document.getElementById('zenLooksAndFeelShowCompactView').click();
+      }
+    }
     for (let radio of radios) {
       radio.addEventListener('change', (e) => {
         switch (e.target.value) {
@@ -548,6 +569,7 @@ var gZenLooksAndFeel = {
             Services.prefs.setBoolPref(defaultExpandPref, false);
             break;
           case 'hover':
+            disableCompactTabbar();
             Services.prefs.setBoolPref(onHoverPref, true);
             Services.prefs.setBoolPref(defaultExpandPref, true);
             break;
@@ -559,7 +581,7 @@ var gZenLooksAndFeel = {
   _initializeColorPicker(accentColor) {
     let elem = document.getElementById('zenLooksAndFeelColorOptions');
     elem.innerHTML = '';
-    for (let color of kZenColors) {
+    for (let color of ZenThemesCommon.kZenColors) {
       let colorElemParen = document.createElement('div');
       let colorElem = document.createElement('div');
       colorElemParen.classList.add('zenLooksAndFeelColorOptionParen');
@@ -582,7 +604,7 @@ var gZenLooksAndFeel = {
   },
 
   _getInitialAccentColor() {
-    return Services.prefs.getStringPref('zen.theme.accent-color', kZenColors[0]);
+    return Services.prefs.getStringPref('zen.theme.accent-color', ZenThemesCommon.kZenColors[0]);
   },
 };
 
@@ -812,11 +834,6 @@ Preferences.addAll([
     type: 'bool',
     default: false,
   },
-  {
-    id: 'zen.themes.tabs.legacy-location',
-    type: 'bool',
-    default: false,
-  },
   {
     id: 'zen.workspaces.hide-default-container-indicator',
     type: 'bool',
@@ -827,4 +844,9 @@ Preferences.addAll([
     type: 'bool',
     default: true,
   },
+  {
+    id: 'zen.workspaces.show-icon-strip',
+    type: 'bool',
+    default: true,
+  },
 ]);

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -36,10 +36,10 @@
         </g>
         <g id="Outline">
             <g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
-                <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-colors-secondary);stroke-width:7.21px;"/>
+                <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
             </g>
             <g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
-                <path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-colors-secondary);stroke-width:8.78px;"/>
+                <path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
             </g>
         </g>
         <g id="Top-Bar" serif:id="Top Bar">
@@ -77,14 +77,14 @@
 <svg width="50%" height="50%" viewBox="0 0 229 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
     <g id="Icon-1--Icon-2" serif:id="Icon 1, Icon 2">
         <g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
-            <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:color-mix(in srgb, var(--zen-colors-secondary) 40%, transparent 40%)"/>
+            <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:color-mix(in srgb, var(--zen-colors-secondary) 17%, transparent 98%)"/>
         </g>
         <g id="Outline">
             <g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
-                <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-colors-secondary);stroke-width:7.21px;"/>
+                <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
             </g>
             <g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
-                <path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-colors-secondary);stroke-width:8.78px;"/>
+                <path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-colors-border);stroke-width:4.78px;"/>
             </g>
         </g>
         <g id="Top-Bar" serif:id="Top Bar">
@@ -126,10 +126,10 @@
         </g>
         <g id="Outline">
             <g transform="matrix(0.983827,0,0,0.922551,1.56302,5.09242)">
-                <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-primary-color);stroke-width:7.21px;"/>
+                <path d="M223.674,41.506L223.674,93.788C223.674,114.914 207.591,132.065 187.78,132.065L41.807,132.065C21.996,132.065 5.913,114.914 5.913,93.788L5.913,41.506C5.913,20.38 21.996,3.228 41.807,3.228L187.78,3.228C207.591,3.228 223.674,20.38 223.674,41.506Z" style="fill:none;stroke:var(--zen-primary-color);stroke-width:4px;"/>
             </g>
             <g transform="matrix(0.790162,0,0,0.603645,44.881,47.2089)">
-                <path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-primary-color);stroke-width:8.78px;"/>
+                <path d="M223.674,3.228L223.674,77.954C223.674,107.819 205.151,132.065 182.335,132.065L5.913,132.065L5.913,41.506C5.913,20.38 19.016,3.228 35.155,3.228L223.674,3.228Z" style="fill:none;stroke:var(--zen-primary-color);stroke-width:4.78px;"/>
             </g>
         </g>
         <g id="Top-Bar" serif:id="Top Bar">
@@ -190,17 +190,48 @@
       <checkbox id="zenLooksAndFeelShowCompactView"
             data-l10n-id="zen-look-and-feel-compact-view-enabled"
             preference="zen.view.compact"/>
+        <html:div id="ZenCompactModeStyle">
+            <form xmlns="http://www.w3.org/1999/xhtml" autocomplete="off" id="zen-compact-mode-styles-form">
+                  <label class="web-appearance-choice">
+                        <div class="web-appearance-choice-image-container">
+                            <div class="zen-compact-mode-styles-browser-wrapper" left="">
+                                <div></div>
+                            </div>
+                        </div>
+                        <div class="web-appearance-choice-footer">
+                        <input type="radio" name="web-appearance" value="left" data-l10n-id="preferences-web-appearance-choice-input-auto"
+                        /><span data-l10n-id="zen-compact-mode-styles-left" />
+                  </div>
+                  </label>
+                        <label class="web-appearance-choice">
+                        <div class="web-appearance-choice-image-container">
+                            <div class="zen-compact-mode-styles-browser-wrapper" top="">
+                                <div></div>
+                            </div>
+                        </div>
+                        <div class="web-appearance-choice-footer">
+                        <input type="radio" name="web-appearance" value="top" data-l10n-id="preferences-web-appearance-choice-input-light"
+                        /><span data-l10n-id="zen-compact-mode-styles-top" />
+                  </div>
+                  </label>
+                        <label class="web-appearance-choice">
+                        <div class="web-appearance-choice-image-container">
+                            <div class="zen-compact-mode-styles-browser-wrapper" both="">
+                                <div></div>
+                            </div>
+                        </div>
+                        <div class="web-appearance-choice-footer">
+                        <input type="radio" name="web-appearance" value="both" data-l10n-id="preferences-web-appearance-choice-input-dark"
+                        /><span data-l10n-id="zen-compact-mode-styles-both" />
+                  </div>
+                  </label>
+            </form>
+      </html:div>
       <vbox class="indent">
-            <checkbox id="zenLooksAndFeelShowCompactViewToolbar"
-                  data-l10n-id="zen-look-and-feel-compact-view-top-toolbar"
-                  preference="zen.view.compact.hide-toolbar"/>
             <checkbox id="zenLooksAndFeelEnableToolbarFlashPopup"
                       data-l10n-id="zen-look-and-feel-compact-toolbar-flash-popup"
                       preference="zen.view.compact.toolbar-flash-popup"/>
       </vbox>
-      <checkbox id="zenLooksAndFeelShowLegacyToolbar"
-            data-l10n-id="zen-look-and-feel-legacy-toolbar"
-            preference="zen.themes.tabs.legacy-location"/>
 </groupbox>
 
 <hbox id="zenSidePanelsCategory"

src/browser/components/preferences/zenMarketplace.inc.xhtml

@@ -1,3 +1,4 @@
+<script src="chrome://browser/content/zen-components/ZenThemesCommon.mjs" defer=""/>
 <html:template id="template-paneZenMarketplace">
 <hbox id="ZenMarketplaceCategory"
       class="subcategory"

src/browser/components/preferences/zenWorkspaces.inc.xhtml

@@ -27,6 +27,9 @@
             <checkbox id="zenWorkspacesAllowPinnedTabsForDifferentWorkspaces"
                   data-l10n-id="zen-settings-workspaces-allow-pinned-tabs-for-different-workspaces"
                   preference="zen.workspaces.individual-pinned-tabs"/>
+            <checkbox id="zenWorkspacesDisplayAsIconStrip"
+                  data-l10n-id="zen-settings-workspaces-display-as-icon-strip"
+                  preference="zen.workspaces.show-icon-strip"/>
       </vbox>
 </groupbox>
 

src/browser/components/sidebar/browser-sidebar-js.patch

@@ -1,8 +1,8 @@
 diff --git a/browser/components/sidebar/browser-sidebar.js b/browser/components/sidebar/browser-sidebar.js
-index d05d561b6d01b11a36c762fc39dc13e14181bce7..b3aaf776c1fdeb1c02f88f2e8d5f424215b2cc26 100644
+index 8b4f22ebc13fd013b82e9544dabcbe53d4429c13..22d21bcb825d35648213945bd4275d37b5c10a11 100644
 --- a/browser/components/sidebar/browser-sidebar.js
 +++ b/browser/components/sidebar/browser-sidebar.js
-@@ -446,7 +446,7 @@ var SidebarController = {
+@@ -473,7 +473,7 @@ var SidebarController = {
     */
    setPosition() {
      // First reset all ordinals to match DOM ordering.
@@ -11,7 +11,7 @@ index d05d561b6d01b11a36c762fc39dc13e14181bce7..b3aaf776c1fdeb1c02f88f2e8d5f4242
      [...browser.children].forEach((node, i) => {
        node.style.order = i + 1;
      });
-@@ -460,9 +460,11 @@ var SidebarController = {
+@@ -487,9 +487,11 @@ var SidebarController = {
        let boxOrdinal = this._box.style.order;
        this._box.style.order = appcontent.style.order;
  
@@ -25,11 +25,11 @@ index d05d561b6d01b11a36c762fc39dc13e14181bce7..b3aaf776c1fdeb1c02f88f2e8d5f4242
        // Indicate we've switched ordering to the box
        this._box.setAttribute("positionend", true);
        sidebarMain.setAttribute("positionend", true);
-@@ -471,6 +473,8 @@ var SidebarController = {
+@@ -498,6 +500,8 @@ var SidebarController = {
        this._box.removeAttribute("positionend");
        sidebarMain.removeAttribute("positionend");
        sidebarContainer.removeAttribute("positionend");
-+      this._box.style.order = 0;
++      this._box.style.order = 1;
 +      this._splitter.style.removeProperty("margin-right");
      }
  

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 ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..7774dbf9f963529570b08465d107df236fcefae7 100644
+index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..c776348e776c1f9efc9b9f2ca479b1050f0a750b 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
-@@ -453,10 +453,13 @@
+@@ -453,10 +453,12 @@
      },
  
      get _numPinnedTabs() {
@@ -13,12 +13,11 @@ index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..7774dbf9f963529570b08465d107df23
 +        if (!tab.pinned) {
            break;
          }
-+        if (tab.hidden) continue;
 +        i++;
        }
        return i;
      },
-@@ -2704,6 +2707,11 @@
+@@ -2704,6 +2706,11 @@
          );
        }
  
@@ -30,7 +29,7 @@ index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..7774dbf9f963529570b08465d107df23
        if (!UserInteraction.running("browser.tabs.opening", window)) {
          UserInteraction.start("browser.tabs.opening", "initting", window);
        }
-@@ -2771,6 +2779,9 @@
+@@ -2771,6 +2778,9 @@
            noInitialLabel,
            skipBackgroundNotify,
          });
@@ -40,7 +39,7 @@ index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..7774dbf9f963529570b08465d107df23
          if (insertTab) {
            // insert the tab into the tab container in the correct position
            this._insertTabAtIndex(t, {
-@@ -3248,6 +3259,14 @@
+@@ -3248,6 +3258,14 @@
          ) {
            tabWasReused = true;
            tab = this.selectedTab;
@@ -55,7 +54,7 @@ index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..7774dbf9f963529570b08465d107df23
            if (!tabData.pinned) {
              this.unpinTab(tab);
            } else {
-@@ -3297,6 +3316,13 @@
+@@ -3297,6 +3315,13 @@
              preferredRemoteType,
            });
  
@@ -69,7 +68,7 @@ index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..7774dbf9f963529570b08465d107df23
            if (select) {
              tabToSelect = tab;
            }
-@@ -4184,6 +4210,7 @@
+@@ -4184,6 +4209,7 @@
          isLastTab ||
          aTab.pinned ||
          aTab.hidden ||
@@ -77,7 +76,7 @@ index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..7774dbf9f963529570b08465d107df23
          this._removingTabs.size >
            3 /* don't want lots of concurrent animations */ ||
          !aTab.hasAttribute(
-@@ -5117,10 +5144,10 @@
+@@ -5117,10 +5143,10 @@
        SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
      },
  

src/browser/themes/BuiltInThemeConfig-sys-mjs.patch

@@ -1,8 +1,8 @@
 diff --git a/browser/themes/BuiltInThemeConfig.sys.mjs b/browser/themes/BuiltInThemeConfig.sys.mjs
-index 7cfea4b705a1338b1eb5c4f255808aeac4bdb819..9a2d2e096db483f5b93fd39886bee5dda38ce9c4 100644
+index 7cfea4b705a1338b1eb5c4f255808aeac4bdb819..cf7dc720a3bd2b14535d57262ad2297f9478eddc 100644
 --- a/browser/themes/BuiltInThemeConfig.sys.mjs
 +++ b/browser/themes/BuiltInThemeConfig.sys.mjs
-@@ -22,22 +22,29 @@ export const BuiltInThemeConfig = new Map([
+@@ -22,24 +22,17 @@ export const BuiltInThemeConfig = new Map([
    [
      "firefox-compact-light@mozilla.org",
      {
@@ -19,21 +19,13 @@ index 7cfea4b705a1338b1eb5c4f255808aeac4bdb819..9a2d2e096db483f5b93fd39886bee5dd
        path: "resource://builtin-themes/dark/",
      },
    ],
-   [
+-  [
 -    "firefox-alpenglow@mozilla.org",
-+    "firefox-compact-galaxy@mozilla.org",
+-    {
-     {
 -      version: "1.4",
 -      path: "resource://builtin-themes/alpenglow/",
-+      version: "1.3",
+-    },
-+      path: "resource://builtin-themes/galaxy/",
+-  ],
-+    },
-+  ],
-+  [
-+    "firefox-compact-dream@mozilla.org",
-+    {
-+      version: "1.3",
-+      path: "resource://builtin-themes/dream/",
-     },
-   ],
    [
+     "2022red-colorway@mozilla.org",
+     {

src/browser/themes/addons/dream/experiment.css

@@ -1,6 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-/* Proton Light theme */
-@import url('chrome://browser/skin/light-dark-overrides.css');

src/browser/themes/addons/dream/icon.svg

@@ -1,12 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg width="63" height="62" viewBox="0 0 63 62" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="31.5" cy="31" r="31" fill="url(#paint0_linear)"/>
-  <defs>
-    <linearGradient id="paint0_linear" x1="11.4829" y1="51" x2="43.4829" y2="19" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#F0F0F4"/>
-      <stop offset="1" stop-color="#F9F9FB"/>
-    </linearGradient>
-  </defs>
-</svg>

src/browser/themes/addons/dream/manifest.json

@@ -1,101 +0,0 @@
-{
-  "manifest_version": 2,
-
-  "browser_specific_settings": {
-    "gecko": {
-      "id": "firefox-compact-dream@mozilla.org"
-    }
-  },
-
-  "name": "Zen Dream",
-  "description": "A theme with a light color scheme and a dream-y vibe.",
-  "author": "Zen",
-  "version": "1.3",
-
-  "icons": { "32": "icon.svg" },
-
-  "theme": {
-    "colors": {
-      "tab_background_text": "rgb(21,20,26)",
-      "tab_selected": "#fff",
-      "tab_text": "rgb(21,20,26)",
-      "icons": "rgb(91,91,102)",
-      "frame": "rgb(240, 240, 244)",
-      "frame_inactive": "rgb(235, 235, 239)",
-      "popup": "#fff",
-      "popup_text": "rgb(21,20,26)",
-      "popup_border": "rgb(240,240,244)",
-      "popup_highlight": "#e0e0e6",
-      "popup_highlight_text": "#15141a",
-      "tab_line": "transparent",
-      "toolbar": "#f9f9fb",
-      "toolbar_top_separator": "transparent",
-      "toolbar_bottom_separator": "#ccc",
-      "toolbar_field": "rgb(240, 240, 244)",
-      "toolbar_field_text": "rgb(21, 20, 26)",
-      "toolbar_field_border": "transparent",
-      "toolbar_field_focus": "white",
-      "toolbar_text": "rgb(21,20,26)",
-      "ntp_background": "#F9F9FB",
-      "ntp_text": "rgb(21, 20, 26)",
-      "popup_action_color": "rgb(91,91,102)",
-      "button": "rgba(207,207,216,.33)",
-      "button_hover": "rgba(207,207,216,.66)",
-      "button_active": "rgb(207,207,216)",
-      "button_primary": "#000",
-      "button_primary_hover": "rgb(31, 31, 31)",
-      "button_primary_active": "rgb(207,207,216)",
-      "button_primary_color": "#fff",
-      "input_color": "rgb(21,20,26)",
-      "input_background": "#f0f0f4",
-      "urlbar_popup_hover": "rgb(240,240,244)",
-      "urlbar_popup_separator": "rgb(240,240,244)",
-      "appmenu_update_icon_color": "#2AC3A2",
-      "appmenu_info_icon_color": "#0090ED",
-      "tab_icon_overlay_stroke": "rgb(255,255,255)",
-      "tab_icon_overlay_fill": "rgb(91,91,102)"
-    },
-    "properties": {
-      "color_scheme": "light",
-      "panel_hover": "color-mix(in srgb, currentColor 12%, transparent)",
-      "panel_active": "color-mix(in srgb, currentColor 20%, transparent)",
-      "panel_active_darker": "color-mix(in srgb, currentColor 27%, transparent)",
-      "toolbar_field_icon_opacity": "0.72",
-      "input_border_color": "rgba(0, 0, 0, .3)",
-      "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)",
-      "zen_main_browser_background": "radial-gradient(ellipse, var(--zen-browser-gradient-base, #1B1E27) 20%, rgb(255, 255, 255) 100%)"
-    }
-  },
-
-  "theme_experiment": {
-    "stylesheet": "experiment.css",
-    "colors": {
-      "popup_action_color": "--urlbarView-action-color",
-      "button": "--button-bgcolor",
-      "button_hover": "--button-hover-bgcolor",
-      "button_active": "--button-active-bgcolor",
-      "button_primary": "--button-primary-bgcolor",
-      "button_primary_hover": "--button-primary-hover-bgcolor",
-      "button_primary_active": "--button-primary-active-bgcolor",
-      "button_primary_color": "--button-primary-color",
-      "input_background": "--input-bgcolor",
-      "input_color": "--input-color",
-      "input_border": "--input-border-color",
-      "urlbar_popup_hover": "--urlbarView-hover-background",
-      "urlbar_popup_separator": "--urlbarView-separator-color",
-      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
-      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
-      "tab_icon_overlay_stroke": "--tab-icon-overlay-stroke",
-      "tab_icon_overlay_fill": "--tab-icon-overlay-fill"
-    },
-    "properties": {
-      "panel_hover": "--panel-item-hover-bgcolor",
-      "panel_active": "--arrowpanel-dimmed-further",
-      "panel_active_darker": "--panel-item-active-bgcolor",
-      "toolbar_field_icon_opacity": "--urlbar-icon-fill-opacity",
-      "input_border_color": "--input-border-color",
-      "zap_gradient": "--panel-separator-zap-gradient",
-      "zen_main_browser_background": "--zen-main-browser-background"
-    }
-  }
-}

src/browser/themes/addons/dream/preview.svg

@@ -1,36 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg width="680" height="92" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="680" height="92" fill="#F0F0F4" />
-  <g filter="url(#filter0_dd)">
-    <rect x="28" y="5" width="166" height="34" rx="4" fill="white" />
-  </g>
-  <rect x="51" y="20" width="121" height="4" rx="2" fill="#15141A" />
-  <rect x="221" y="20" width="121" height="4" rx="2" fill="#15141A" />
-  <rect y="44" width="680" height="48" fill="#F9F9FB" />
-  <circle cx="24" cy="68" r="6.25" stroke="#5B5B66" stroke-width="1.5" />
-  <circle cx="60" cy="68" r="6.25" stroke="#5B5B66" stroke-width="1.5" />
-  <line x1="663" y1="73.75" x2="649" y2="73.75" stroke="#5B5B66" stroke-width="1.5" />
-  <line x1="663" y1="67.75" x2="649" y2="67.75" stroke="#5B5B66" stroke-width="1.5" />
-  <line x1="663" y1="61.75" x2="649" y2="61.75" stroke="#5B5B66" stroke-width="1.5" />
-  <rect x="114" y="52" width="488" height="32" rx="4" fill="#F0F0F4" />
-  <circle cx="130" cy="68" r="6.25" stroke="#5B5B66" stroke-width="1.5" />
-  <rect x="146" y="66" width="308" height="4" rx="2" fill="#5B5B66" />
-  <defs>
-    <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
-      <feOffset />
-      <feGaussianBlur stdDeviation="2" />
-      <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0" />
-      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
-      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
-      <feOffset />
-      <feGaussianBlur stdDeviation="0.5" />
-      <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0" />
-      <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
-      <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
-    </filter>
-  </defs>
-</svg>

src/browser/themes/addons/galaxy/experiment.css

@@ -1,6 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-/* Proton Dark theme */
-@import url('chrome://browser/skin/light-dark-overrides.css');

src/browser/themes/addons/galaxy/icon.svg

@@ -1,12 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg width="63" height="62" viewBox="0 0 63 62" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="31.5" cy="31" r="31" fill="url(#paint0_linear)"/>
-  <defs>
-    <linearGradient id="paint0_linear" x1="44.4829" y1="19" x2="10.4829" y2="53" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#42414D"/>
-      <stop offset="1" stop-color="#1C1B22"/>
-    </linearGradient>
-  </defs>
-</svg>

src/browser/themes/addons/galaxy/manifest.json

@@ -1,95 +0,0 @@
-{
-  "manifest_version": 2,
-
-  "browser_specific_settings": {
-    "gecko": {
-      "id": "firefox-compact-galaxy@mozilla.org"
-    }
-  },
-
-  "name": "Zen Galaxy",
-  "description": "A theme with a dark color scheme and galaxy effects.",
-  "author": "Zen",
-  "version": "1.3",
-
-  "icons": { "32": "icon.svg" },
-
-  "theme": {
-    "colors": {
-      "tab_background_text": "#fbfbfe",
-      "tab_selected": "rgb(66,65,77)",
-      "tab_text": "rgb(251,251,254)",
-      "icons": "rgb(251,251,254)",
-      "frame": "rgb(28, 27, 34)",
-      "frame_inactive": "rgb(31, 30, 37)",
-      "popup": "rgb(66,65,77)",
-      "popup_text": "rgb(251,251,254)",
-      "popup_border": "rgb(82,82,94)",
-      "popup_highlight": "rgb(43,42,51)",
-      "tab_line": "transparent",
-      "toolbar": "rgb(43,42,51)",
-      "toolbar_top_separator": "transparent",
-      "toolbar_bottom_separator": "hsl(240, 5%, 5%)",
-      "toolbar_field": "rgb(28,27,34)",
-      "toolbar_field_border": "transparent",
-      "toolbar_field_text": "rgb(251,251,254)",
-      "toolbar_field_focus": "rgb(66,65,77)",
-      "toolbar_text": "rgb(251, 251, 254)",
-      "ntp_background": "rgb(43, 42, 51)",
-      "ntp_card_background": "rgb(66,65,77)",
-      "ntp_text": "rgb(251, 251, 254)",
-      "sidebar_text": "rgb(249, 249, 250)",
-      "sidebar_border": "rgba(255, 255, 255, 0.1)",
-      "button": "rgba(0, 0, 0, .33)",
-      "button_hover": "rgba(207, 207, 216, .20)",
-      "button_active": "rgba(207, 207, 216, .40)",
-      "button_primary": "#fff",
-      "button_primary_hover": "rgb(207, 207, 216)",
-      "button_primary_active": "rgb(207, 207, 216)",
-      "button_primary_color": "#000",
-      "input_background": "#42414D",
-      "input_color": "rgb(251,251,254)",
-      "input_border": "#fff",
-      "urlbar_popup_separator": "rgb(82,82,94)",
-      "appmenu_update_icon_color": "#54FFBD",
-      "appmenu_info_icon_color": "#80EBFF",
-      "tab_icon_overlay_stroke": "rgb(66,65,77)",
-      "tab_icon_overlay_fill": "rgb(251,251,254)"
-    },
-    "properties": {
-      "color_scheme": "dark",
-      "panel_active": "color-mix(in srgb, currentColor 14%, transparent)",
-      "toolbar_field_icon_opacity": "1",
-      "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)",
-      "zen_main_browser_background": "radial-gradient(ellipse, var(--zen-browser-gradient-base, #1B1E27) 20%, #1b1b1b 100%)"
-    }
-  },
-
-  "theme_experiment": {
-    "stylesheet": "experiment.css",
-    "colors": {
-      "button": "--button-bgcolor",
-      "button_hover": "--button-hover-bgcolor",
-      "button_active": "--button-active-bgcolor",
-      "button_primary": "--button-primary-bgcolor",
-      "button_primary_hover": "--button-primary-hover-bgcolor",
-      "button_primary_active": "--button-primary-active-bgcolor",
-      "button_primary_color": "--button-primary-color",
-      "input_background": "--input-bgcolor",
-      "input_color": "--input-color",
-      "input_border": "--input-border-color",
-      "urlbar_popup_separator": "--urlbarView-separator-color",
-      "zoom_controls": "--zoom-controls-bgcolor",
-      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
-      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
-      "tab_icon_overlay_stroke": "--tab-icon-overlay-stroke",
-      "tab_icon_overlay_fill": "--tab-icon-overlay-fill"
-    },
-    "properties": {
-      "panel_active": "--arrowpanel-dimmed-further",
-      "toolbar_field_icon_opacity": "--urlbar-icon-fill-opacity",
-      "zap_gradient": "--panel-separator-zap-gradient",
-      "zen_main_browser_background": "--zen-main-browser-background"
-    }
-  }
-}

src/browser/themes/addons/galaxy/preview.svg

@@ -1,18 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg width="680" height="92" viewBox="0 0 680 92" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="680" height="92" fill="#1C1B22" />
-  <rect x="28" y="5" width="166" height="34" rx="4" fill="#42414D" />
-  <rect x="51" y="20" width="121" height="4" rx="2" fill="#FBFBFE" />
-  <rect x="221" y="20" width="121" height="4" rx="2" fill="#B8B7BB" />
-  <rect y="44" width="680" height="48" fill="#2B2A33" />
-  <circle cx="24" cy="68" r="6.25" stroke="#FBFBFE" stroke-width="1.5" />
-  <circle cx="60" cy="68" r="6.25" stroke="#FBFBFE" stroke-width="1.5" />
-  <line x1="663" y1="73.75" x2="649" y2="73.75" stroke="#FBFBFE" stroke-width="1.5" />
-  <line x1="663" y1="67.75" x2="649" y2="67.75" stroke="#FBFBFE" stroke-width="1.5" />
-  <line x1="663" y1="61.75" x2="649" y2="61.75" stroke="#FBFBFE" stroke-width="1.5" />
-  <rect x="114" y="52" width="488" height="32" rx="4" fill="#1C1B22" />
-  <circle cx="130" cy="68" r="6.25" stroke="white" stroke-width="1.5" />
-  <rect x="146" y="66" width="308" height="4" rx="2" fill="white" />
-</svg>

src/browser/themes/addons/zen-addons.inc.mn

@@ -1,8 +1 @@
 
-  content/builtin-themes/galaxy                      (galaxy/*.svg)
-  content/builtin-themes/galaxy                      (galaxy/*.css)
-  content/builtin-themes/galaxy/manifest.json        (galaxy/manifest.json)
-
-  content/builtin-themes/dream                      (dream/*.svg)
-  content/builtin-themes/dream                      (dream/*.css)
-  content/builtin-themes/dream/manifest.json        (dream/manifest.json)

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

@@ -179,7 +179,8 @@ groupbox h2 {
   margin-bottom: 15px;
 }
 
-#zen-dark-theme-styles-form {
+#zen-dark-theme-styles-form,
+#zen-compact-mode-styles-form {
   display: flex;
   justify-content: space-between;
   gap: var(--space-large);
@@ -234,6 +235,43 @@ groupbox h2 {
   border-color: var(--zen-primary-color);
 }
 
+.zen-compact-mode-styles-browser-wrapper {
+  width: 55%;
+  height: 60px;
+  display: flex;
+  border-radius: 10px;
+  border: 1px solid var(--zen-colors-border);
+  background: var(--zen-colors-tertiary);
+  position: relative;
+  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
+
+  padding: 7px;
+
+  &[left] div {
+    width: 100%;
+    background: var(--zen-primary-color);
+    border-radius: 5px;
+    height: 18px;
+    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
+  }
+
+  &[top] div {
+    width: 18px;
+    background: var(--zen-primary-color);
+    border-radius: 5px;
+    height: 100%;
+    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
+  }
+
+  &[both] div {
+    width: 100%;
+    height: 100%;
+    background: var(--zen-colors-secondary);
+    border-radius: 5px;
+    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
+  }
+}
+
 .zenLooksAndFeelColorOption {
   width: 60px;
   height: 60px;
@@ -315,7 +353,7 @@ groupbox h2 {
   border-color: red;
 }
 
-#zenCKSOptions-wrapper > [data-group]:not(:first-of-type) {
+#zenCKSOption-wrapper > [data-group]:not(:first-of-type) {
   border-top: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
   padding-top: 10px;
 }
@@ -480,6 +518,10 @@ groupbox h2 {
   flex-direction: row;
 }
 
+.zenThemeMarketplaceItemPreferenceToggle {
+  align-self: start;
+}
+
 #zenThemeMarketplaceItemContentHeader {
   display: flex;
   flex-direction: row;

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

@@ -19,8 +19,8 @@
   list-style-image: url('back.svg') !important;
 }
 
-:root[zen-sidebar-legacy='true'] #forward-button,
+#forward-button,
-:root[zen-sidebar-legacy='true'] #zen-sidebar-web-panel-forward {
+#zen-sidebar-web-panel-forward {
   list-style-image: url('forward.svg') !important;
 
   @media (max-width: 650px) {
@@ -28,17 +28,8 @@
   }
 }
 
-:root:not([zen-sidebar-legacy='true']) #forward-button,
+#reload-button,
-:root:not([zen-sidebar-legacy='true']) #zen-sidebar-web-panel-forward {
+#zen-sidebar-web-panel-reload {
-  list-style-image: url('forward.svg') !important;
-
-  @media (max-width: 650px) {
-    display: none;
-  }
-}
-
-:root[zen-sidebar-legacy='true'] #reload-button,
-:root[zen-sidebar-legacy='true'] #zen-sidebar-web-panel-reload {
   list-style-image: url('reload.svg') !important;
 
   @media (max-width: 650px) {
@@ -46,15 +37,6 @@
   }
 }
 
-:root:not([zen-sidebar-legacy='true']) #reload-button,
-:root:not([zen-sidebar-legacy='true']) #zen-sidebar-web-panel-reload {
-  list-style-image: url('reload.svg') !important;
-
-  @media (max-width: 700px) {
-    display: none;
-  }
-}
-
 #stop-button,
 .close-icon,
 #zen-sidebar-web-panel-close {
@@ -191,7 +173,7 @@
 
 #zoom-in-button,
 #tabs-newtab-button,
-#TabsToolbar #new-tab-button,
+#new-tab-button,
 #appMenu-zoomEnlarge-button2,
 #PanelUI-zen-profiles-newProfile,
 #zen-sidebar-add-panel-button,
@@ -598,9 +580,6 @@
 }
 
 /* Context Menu Icons */
-menupopup > menuitem:is([checked='true'], [selected='true']) .menu-iconic-icon {
-  list-style-image: url('checkmark.svg') !important;
-}
 
 #context-video-pictureinpicture:not([checked='true']) .menu-iconic-icon {
   list-style-image: url('media-pip.svg') !important;
@@ -910,6 +889,10 @@ menuitem[contexttype='fullscreen'][label*='Exit'] {
   --menu-image: url('duplicate-tab.svg');
 }
 
+#zen-context-menu-compact-mode {
+  --menu-image: url('sidebars.svg');
+}
+
 #context_bookmarkTab,
 #context_bookmarkSelectedTabs,
 #toggle_PersonalToolbar,
@@ -1081,3 +1064,10 @@ menuitem[id='placesContext_new:separator'] {
     var(--fp-contextmenu-menuitem-padding-inline) + 16px + var(--fp-contextmenu-menuicon-margin-inline)
   ) !important;
 }
+
+menupopup > menuitem:is([type='checkbox']) .menu-iconic-left {
+  --menu-image: none !important;
+  margin-inline-start: 4px;
+  margin-inline-end: 0;
+  padding-inline-end: 0;
+}

src/dom/events/KeyHandlerEvent-cpp.patch

@@ -0,0 +1,13 @@
+diff --git a/dom/events/KeyEventHandler.cpp b/dom/events/KeyEventHandler.cpp
+index 3f3ca808e8..0828b37f51 100644
+--- a/dom/events/KeyEventHandler.cpp
++++ b/dom/events/KeyEventHandler.cpp
+@@ -641,7 +641,7 @@ void KeyEventHandler::BuildModifiers(nsAString& aModifiers) {
+       } else if (strcmp(token, "control") == 0) {
+         mKeyMask |= cControl | cControlMask;
+       } else if (strcmp(token, "accel") == 0) {
+-        mKeyMask |= AccelKeyMask();
++        mKeyMask |= cControl | cControlMask;
+       } else if (strcmp(token, "access") == 0) {
+         mKeyMask |= KeyToMask(LookAndFeel::GetMenuAccessKey());
+       } else if (strcmp(token, "any") == 0) {

src/toolkit/modules/UpdateUtils-sys-mjs.patch

@@ -0,0 +1,13 @@
+diff --git a/toolkit/modules/UpdateUtils.sys.mjs b/toolkit/modules/UpdateUtils.sys.mjs
+index be9ce9d5402c30bf4a9712f1ce9026503c191a53..230882363b3e1bbe7f0977567db61f72494a19ea 100644
+--- a/toolkit/modules/UpdateUtils.sys.mjs
++++ b/toolkit/modules/UpdateUtils.sys.mjs
+@@ -81,7 +81,7 @@ export var UpdateUtils = {
+           replacement = Services.appinfo.name;
+           break;
+         case "VERSION":
+-          replacement = Services.appinfo.version;
++          replacement = AppConstants.ZEN_FIREFOX_VERSION;
+           break;
+         case "BUILD_ID":
+           replacement = Services.appinfo.appBuildID;

src/toolkit/mozapps/extensions/internal/XPIDatabase-sys-mjs.patch

@@ -1,8 +1,8 @@
 diff --git a/toolkit/mozapps/extensions/internal/XPIDatabase.sys.mjs b/toolkit/mozapps/extensions/internal/XPIDatabase.sys.mjs
-index 0e02963b7e2f44e7669a34ded9f0f0636e36e66c..03e203b4eb0c9436ff9767756bfe8e64dd49096e 100644
+index 17219a88b42b0954f7bd7f7ea7ae8dcad55cc77c..e59373c2cac68fb3075e32143bb8940749c20a8a 100644
 --- a/toolkit/mozapps/extensions/internal/XPIDatabase.sys.mjs
 +++ b/toolkit/mozapps/extensions/internal/XPIDatabase.sys.mjs
-@@ -137,7 +137,7 @@ const KEY_APP_GLOBAL = "app-global";
+@@ -138,7 +138,7 @@ const KEY_APP_GLOBAL = "app-global";
  const KEY_APP_PROFILE = "app-profile";
  const KEY_APP_TEMPORARY = "app-temporary";
  
@@ -11,12 +11,3 @@ index 0e02963b7e2f44e7669a34ded9f0f0636e36e66c..03e203b4eb0c9436ff9767756bfe8e64
  
  // Properties to cache and reload when an addon installation is pending
  const PENDING_INSTALL_METADATA = [
-@@ -214,7 +214,7 @@ const SIGNED_TYPES = new Set(["extension", "locale", "theme"]);
- // Time to wait before async save of XPI JSON database, in milliseconds
- const ASYNC_SAVE_DELAY_MS = 20;
- 
--const l10n = new Localization(["browser/appExtensionFields.ftl"], true);
-+const l10n = new Localization(["browser/appExtensionFields.ftl", "browser/zenAppExtensionFields.ftl"], true);
- 
- /**
-  * Schedules an idle task, and returns a promise which resolves to an

surfer.json

@@ -5,7 +5,7 @@
   "binaryName": "zen",
   "version": {
     "product": "firefox",
-    "version": "130.0"
+    "version": "130.0.1"
   },
   "buildOptions": {
     "generateBranding": true
@@ -18,7 +18,7 @@
       "brandShortName": "Zen Browser",
       "brandFullName": "Zen Browser",
       "release": {
-        "displayVersion": "1.0.1-a",
+        "displayVersion": "1.0.1-a.3",
         "github": {
           "repo": "zen-browser/desktop"
         },