Update subproject commit in l10n and zen-components

Fix event handling for macOS in zen-settings.js

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

@@ -1,6 +1,6 @@
 <?xml version="1.0"?>
 <updates>
-  <update type="minor" displayVersion="1.0.1-a.1" appVersion="1.0.1-a.1" platformVersion="130.0" buildID="20240917001725">
-    <patch type="complete" URL="https://github.com/zen-browser/desktop/releases/download/1.0.1-a.1/windows-generic.mar" hashFunction="sha512" hashValue="972023778514d694851f4e1ed4dc25d6a76b99873fb5e2ccaee39cfd1e16831e860fe8d5b8a79609126e5f3a30af493ad91bebc33c5e6c9cff03933bb48d50bf" size="72275244"/>
+  <update type="minor" displayVersion="1.0.1-a.4" appVersion="1.0.1-a.4" platformVersion="130.0.1" buildID="20240923205830">
+    <patch type="complete" URL="https://github.com/zen-browser/desktop/releases/download/1.0.1-a.4/windows-generic.mar" hashFunction="sha512" hashValue="ca66dda03aa051564c52c0e324e4f3d0246a0274f50f40c351e074bd905f8d21f5fc4e21abcb7e58544c1589b1e0d85923324e4e04491aec0e56ac55e27b1cd8" size="72276852"/>
   </update>
 </updates>

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

@@ -1,6 +1,6 @@
 <?xml version="1.0"?>
 <updates>
-  <update type="minor" displayVersion="1.0.1-a.1" appVersion="1.0.1-a.1" platformVersion="130.0" buildID="20240917001725">
-    <patch type="complete" URL="https://github.com/zen-browser/desktop/releases/download/1.0.1-a.1/windows-generic.mar" hashFunction="sha512" hashValue="972023778514d694851f4e1ed4dc25d6a76b99873fb5e2ccaee39cfd1e16831e860fe8d5b8a79609126e5f3a30af493ad91bebc33c5e6c9cff03933bb48d50bf" size="72275244"/>
+  <update type="minor" displayVersion="1.0.1-a.4" appVersion="1.0.1-a.4" platformVersion="130.0.1" buildID="20240923205830">
+    <patch type="complete" URL="https://github.com/zen-browser/desktop/releases/download/1.0.1-a.4/windows-generic.mar" hashFunction="sha512" hashValue="ca66dda03aa051564c52c0e324e4f3d0246a0274f50f40c351e074bd905f8d21f5fc4e21abcb7e58544c1589b1e0d85923324e4e04491aec0e56ac55e27b1cd8" size="72276852"/>
   </update>
 </updates>

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

@@ -1,6 +1,6 @@
 <?xml version="1.0"?>
 <updates>
-  <update type="minor" displayVersion="1.0.1-a.1" appVersion="1.0.1-a.1" platformVersion="130.0" buildID="20240917001715">
-    <patch type="complete" URL="https://github.com/zen-browser/desktop/releases/download/1.0.1-a.1/windows.mar" hashFunction="sha512" hashValue="94a67207ea7c6cd9833397a339d647b4c8498d04976133f409aad06eb77e397fc5d3e6a325133d39dfa7d0a73a198f35954563dcbed1c2de089700ff1baf37b7" size="72228768"/>
+  <update type="minor" displayVersion="1.0.1-a.4" appVersion="1.0.1-a.4" platformVersion="130.0.1" buildID="20240923205720">
+    <patch type="complete" URL="https://github.com/zen-browser/desktop/releases/download/1.0.1-a.4/windows.mar" hashFunction="sha512" hashValue="f6db2c947f718e6bd91af7f7ba0b88117a1c08410819b4ae37a19f22cd3d7a0b3aec123271a41c8ac19bedebb2e5927286eb5a5d76e4bf5ba1e3b07db985c099" size="72375516"/>
   </update>
 </updates>

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

@@ -1,6 +1,6 @@
 <?xml version="1.0"?>
 <updates>
-  <update type="minor" displayVersion="1.0.1-a.1" appVersion="1.0.1-a.1" platformVersion="130.0" buildID="20240917001715">
-    <patch type="complete" URL="https://github.com/zen-browser/desktop/releases/download/1.0.1-a.1/windows.mar" hashFunction="sha512" hashValue="94a67207ea7c6cd9833397a339d647b4c8498d04976133f409aad06eb77e397fc5d3e6a325133d39dfa7d0a73a198f35954563dcbed1c2de089700ff1baf37b7" size="72228768"/>
+  <update type="minor" displayVersion="1.0.1-a.4" appVersion="1.0.1-a.4" platformVersion="130.0.1" buildID="20240923205720">
+    <patch type="complete" URL="https://github.com/zen-browser/desktop/releases/download/1.0.1-a.4/windows.mar" hashFunction="sha512" hashValue="f6db2c947f718e6bd91af7f7ba0b88117a1c08410819b4ae37a19f22cd3d7a0b3aec123271a41c8ac19bedebb2e5927286eb5a5d76e4bf5ba1e3b07db985c099" size="72375516"/>
   </update>
 </updates>

build/winsign/sign.ps1

@@ -28,7 +28,7 @@ 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"
@@ -75,7 +75,7 @@ function SignAndPackage($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 sha1 /v $files
+    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
 
@@ -101,3 +101,6 @@ Read-Host "Press Enter to continue"
 
 echo "Cleaning up" 
 rmdir windsign-temp -Recurse -ErrorAction SilentlyContinue
+
+echo "Opening visual studio code"
+code .

package.json

@@ -33,7 +33,7 @@
   },
   "homepage": "https://github.com/zen-browser/core#readme",
   "dependencies": {
-    "@zen-browser/surfer": "^1.4.20"
+    "@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.20
-        version: 1.4.20
+        specifier: ^1.4.21
+        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.20':
-    resolution: {integrity: sha512-M9+Jax/B+UQsebJ0K3BaNEKUi/EelKufvG2frWQ4uVAQF9LzFwyyliS5wbcUTs3Ufit4b8xQK7ddt02DmK/Lng==}
+  '@zen-browser/surfer@1.4.21':
+    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.20':
+  '@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

@@ -74,17 +74,19 @@ pref('zen.tabs.vertical', true);
 pref('zen.tabs.vertical.right-side', false);
 pref('zen.theme.accent-color', "#aac7ff");
 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', 200); // in ms
 pref('zen.view.sidebar-expanded', false);
@@ -96,16 +98,9 @@ pref('zen.view.sidebar-collapsed.hide-mute-button', true);
 
 pref('zen.keyboard.shortcuts.enabled', true);
 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);
 
-#ifdef XP_MACOSX
-pref('zen.themes.tabs.legacy-location', true);
-#else
-pref('zen.themes.tabs.legacy-location', false);
-#endif
-
 // Pref to enable the new profiles (TODO: Check this out!)
 //pref("browser.profiles.enabled", true);
 
@@ -116,11 +111,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
@@ -150,6 +147,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);

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

@@ -0,0 +1,125 @@
+
+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: [
+          "preferences-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"
+        skipintoolbarset="true"
+        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 newTab = window.document.getElementById('vertical-tabs-newtab-button');
+    newTab.classList.add('zen-sidebar-action-button');
+
+    const wrapper = window.document.createXULElement('toolbarbutton');
+    wrapper.id = 'zen-workspaces-button';
+    window.document.getElementById('zen-sidebar-icons-wrapper').prepend(wrapper);
+
+    for (let id of this.defaultSidebarIcons) {
+      const elem = window.document.getElementById(id);
+      if (!elem) continue;
+      elem.setAttribute('removable', 'true');
+    }
+
+    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');
+      }
+    }
+  }
+
+  registerToolbarNodes(window) {
+    window.CustomizableUI.registerToolbarNode(
+      window.document.getElementById('zen-sidebar-top-buttons')
+    );
+    window.CustomizableUI.registerToolbarNode(
+      window.document.getElementById('zen-sidebar-icons-wrapper')
+    );
+  }
+};

src/browser/base/content/ZenStartup.mjs

@@ -1,14 +1,9 @@
-
 {
   const lazy = {};
-  XPCOMUtils.defineLazyPreferenceGetter(
-    lazy,
-    "sidebarHeightThrottle",
-    "zen.view.sidebar-height-throttle",
-    500
-  );
+  XPCOMUtils.defineLazyPreferenceGetter(lazy, 'sidebarHeightThrottle', 'zen.view.sidebar-height-throttle', 500);
   var ZenStartup = {
     init() {
+      this.logHeader();
       this.openWatermark();
       window.SessionStore.promiseInitialized.then(async () => {
         this._changeSidebarLocation();
@@ -41,9 +36,10 @@
         gBrowser.tabContainer.arrowScrollbox.smoothScroll = false;
 
         ZenWorkspaces.init();
+        gZenUIManager.init();
         gZenVerticalTabsManager.init();
         gZenCompactModeManager.init();
-        gZenKeyboardShortcuts.init();
+        gZenKeyboardShortcutsManager.init();
 
         function throttle(f, delay) {
           let timer = 0;
@@ -53,7 +49,9 @@
           };
         }
 
-        new ResizeObserver(throttle(this._updateTabsToolbar.bind(this), lazy.sidebarHeightThrottle)).observe(document.getElementById('tabbrowser-tabs'));
+        new ResizeObserver(throttle(this._updateTabsToolbar.bind(this), lazy.sidebarHeightThrottle)).observe(
+          document.getElementById('tabbrowser-tabs')
+        );
       } catch (e) {
         console.error('ZenThemeModifier: Error initializing browser layout', e);
       }
@@ -76,14 +74,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() {
@@ -106,12 +96,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) {
@@ -124,9 +109,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;
@@ -145,6 +128,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')) {
-      this.navigatorToolbox.setAttribute('zen-expanded', 'true');
-    } else {
-      this.navigatorToolbox.removeAttribute('zen-expanded');
-    }
+    const topButtons = document.getElementById('zen-sidebar-top-buttons');
+    const customizationTarget = document.getElementById('nav-bar-customization-target');
+    const tabboxWrapper = document.getElementById('zen-tabbox-wrapper');
+    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,25 @@
 diff --git a/browser/base/content/browser-init.js b/browser/base/content/browser-init.js
-index f8d49ac2a3a62f389ea44b07a26fcb102abc0b24..c29415e10c776ebc435f33e55f8afb71f0dcf22a 100644
+index bee5309c04775adff8652bfe6c54b2d466e821ac..cfeaf7cf2e98c35e76bdd5451f90b004a04d4474 100644
 --- a/browser/base/content/browser-init.js
 +++ b/browser/base/content/browser-init.js
-@@ -237,6 +237,10 @@ var gBrowserInit = {
+@@ -143,13 +143,15 @@ 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) {
++      if (type == CustomizableUI.TYPE_TOOLBAR && !area.startsWith("zen-")) {
+         let node = document.getElementById(area);
+         CustomizableUI.registerToolbarNode(node);
+       }
+     }
++    ZenCustomizableUI.registerToolbarNodes(window);
+     BrowserSearch.initPlaceHolder();
+ 
+     // Hack to ensure that the various initial pages favicon is loaded
+@@ -239,6 +241,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">
-  <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)">
-  </toolbarbutton>
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" data-l10n-id="sidebar-zen-expand" oncommand="gZenVerticalTabsManager.toggleExpand();"></toolbarbutton>
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-bookmark-button" data-l10n-id="sidebar-menu-bookmarks" onclick="gZenUIManager.toogleBookmarksSidebar();"></toolbarbutton>
-  <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>
-  <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>
+<toolbar brighttext="true" 
+  id="zen-sidebar-icons-wrapper" 
+  fullscreentoolbar="true" 
+  class="browser-toolbar customization-target zen-dont-hide-on-fullscreen"
+  data-l10n-id="tabs-toolbar"
+  customizable="true"
+  toolbarname="Zen Sidebar Icons"
+  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

@@ -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,16 +5,6 @@
     transform: translate3d(0, 0, 0);
     position: relative;
 
-    /* This fixes an issue with the left border */
-    --zen-webview-correction-margin: 2px;
-    margin-left: var(--zen-webview-correction-margin);
-    margin-top: 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:

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,11 @@
   display: flex;
   flex-direction: row;
 }
+
+.titlebar-buttonbox-container {
+  height: 100%;
+}
+
+: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,203 +7,124 @@
 }
 
 @media (-moz-bool-pref: 'zen.view.compact') {
-  :root[sizemode='fullscreen'],
-  #navigator-toolbox[inFullscreen] {
-    margin-top: 0 !important;
+  :root:not([customizing]) {
+    @media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') {
+      #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
+        margin-left: calc(var(--zen-sidebar-web-panel-spacing) * 2) !important;
       }
 
-  #navigator-toolbox {
-    --zen-compact-toolbox-margin-single: calc(var(--zen-element-separation) * 2);
-    --zen-compact-toolbox-margin: 
-      calc(var(--zen-compact-toolbox-margin-single) / 2) var(--zen-compact-toolbox-margin-single) 
-      calc(var(--zen-compact-toolbox-margin-single) + var(--zen-element-separation)) var(--zen-compact-toolbox-margin-single);
-    position: absolute !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;
-    margin-top: var(--zen-element-separation) !important;
-    padding: var(--zen-compact-toolbox-margin) !important;
-
-    min-width: 500px !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);
+      #zen-sidebar-top-buttons-customization-target {
+        padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
       }
 
-    & > * {
-      pointer-events: none;
+      /* Set the extra paddings */
+      #tabbrowser-tabpanels {
+        :root:not([inDOMFullscreen='true']) #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+          padding-right: var(--zen-element-separation) !important;
         }
 
-    &,
-    & #titlebar {
-      min-width: var(--zen-toolbox-min-width) !important;
+        :root:not([inDOMFullscreen='true']) #browser:has(#navigator-toolbox:not([zen-right-side='true'])) & {
+          padding-left: var(--zen-element-separation) !important;
         }
       }
 
-  :root:not([inDOMFullscreen='true']) #tabbrowser-tabpanels {
-    padding: var(--zen-element-separation) !important;
-    padding-top: 0 !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-element-separation) + 0.8rem + 
-        (18px + (var(--toolbarbutton-inner-padding) * 2)) 
-      ) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single);
-
-      margin-top: 0 !important;
-      :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[zen-right-side='true'] {
-    right: 0 !important;
-    transform: translateX(calc(100% - (var(--zen-compact-toolbox-margin-single) / 2))) !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;
-    position: absolute !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 */
-  :root:not([sessionrestored]) #navigator-toolbox {
-    transform: none !important;
+      #navigator-toolbox {
+        position: absolute;
+        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 {
-    position: relative !important;
-    transform: none !important;
-    opacity: 1 !important;
-  }
+      #navigator-toolbox:hover,
+      #navigator-toolbox[zen-has-hover],
+      #navigator-toolbox:focus-within,
+      #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,
-  #PersonalToolbar[collapsed='true'] {
-    display: none;
+        transform: translate3d(calc(100% - var(--zen-element-separation)), -50%, 0);
+        #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+          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;
-      transition: 0.2s ease-in-out;
-      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;
+
+      #navigator-toolbox {
+        --zen-toolbox-top-align: var(--zen-element-separation);
       }
 
-    #zen-appcontent-navbar-container:hover,
-    #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 {
+      &:not([inDOMFullscreen='true']) #tabbrowser-tabpanels {
         padding-top: var(--zen-element-separation) !important;
       }
 
-    #zen-sidebar-web-panel-wrapper {
-      margin-top: 10px !important;
+      #zen-appcontent-navbar-container {
+        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;
+
+        border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
+        border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
+      }
+
+      #zen-appcontent-navbar-container:hover,
+      #zen-appcontent-navbar-container[zen-has-hover],
+      #zen-appcontent-navbar-container:focus-within,
+      #zen-appcontent-navbar-container[zen-user-show],
+      #zen-appcontent-navbar-container[has-popup-menu],
+      #zen-appcontent-navbar-container:has(*[open='true']) {
+        opacity: 1;
+        border-top-width: 1px;
+
+        transform: translateY(-1px);
+      }
     }
   }
 }

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);
-  column-gap: calc(var(--zen-element-separation) / 2);
+  row-gap: 0;
+  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);
-  height: calc(100% - var(--zen-element-separation));
+  margin: var(--zen-sidebar-web-panel-spacing);
+  /* 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,33 +4,36 @@ toolbar {
 }
 
 #zen-profile-button {
-  display: flex;
-  justify-content: center;
-  position: relative;
-  align-items: center;
-  list-style-image: var(--avatar-image-url);
-  position: relative;
-  border-radius: var(--tab-border-radius);
 
-  width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
-  height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
-
-  & image {
-    border-radius: 999px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: calc(var(--toolbarbutton-inner-padding) + 10px);
-    width: calc(var(--toolbarbutton-inner-padding) + 10px);
+  & stack {
     padding: 0;
   }
 
-  &:hover {
-    background-color: var(--toolbarbutton-hover-background);
-
-    & image {
-      background: transparent !important;
+  & .toolbarbutton-badge {
+    display: none !important;
   }
+
+  & stack {
+    width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
+    height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  
+    & > image {
+      width: 0;
+    }
+  }
+
+  & #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;
   }
 }
 

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

@@ -8,16 +8,17 @@
     height: 100%;
   }
 
+  #TabsToolbar > * {
+    justify-content: center;
+
+  }
+
   #private-browsing-indicator-with-label {
     display: none !important;
   }
 
   #browser {
-    --zen-toolbox-padding: 5px;
-
-    :root:not([zen-sidebar-legacy='true']) & {
-      --zen-toolbox-top-align: var(--zen-toolbox-padding);
-    }
+    --zen-toolbox-padding: 4px;
   }
 
   #navigator-toolbox {
@@ -28,18 +29,19 @@
     --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);
 
-    margin-top: 0 !important;
     display: flex;
   }
 
 
   #TabsToolbar-customization-target {
     position: relative;
-    gap: var(--zen-toolbox-padding);
+    gap: 0;
     &::after {
       content: '';
       display: block;
@@ -52,6 +54,16 @@
       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 {
@@ -62,6 +74,7 @@
     border-bottom: 0px solid transparent !important;
 
     --tab-block-margin: 2px;
+    --tab-selected-bgcolor: var(--zen-colors-primary);
     grid-gap: 0 !important;
 
     & .tabbrowser-tab {
@@ -70,8 +83,6 @@
       max-width: unset !important;
       padding: 0 !important;
 
-      font-size: var(--urlbarView-small-font-size);
-
       position: relative;
 
       height: calc(var(--tab-min-height) + var(--tab-block-margin) * 2) !important;
@@ -82,6 +93,12 @@
       & .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;
@@ -98,32 +115,17 @@
 
   #zen-sidebar-icons-wrapper {
     background: transparent;
+    padding: 0;
+    gap: 5px;
+    align-items: center;
 
-    & toolbarbutton {
-      width: fit-content;
+    & > toolbarbutton:not(#zen-workspaces-button) {
       padding: 0 !important;
     }
   }
 
   #newtab-button-container {
-    margin-inline-end: 0 !important;
-    padding-top: 0 !important;
-    border-top: solid transparent 0px !important;
-    margin: 0 2px !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%;
-      }
-    }
+    display: none !important;
   }
 
   #tabbrowser-arrowscrollbox {
@@ -151,68 +153,91 @@
 
   /* 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));
-      gap: 4px;
+      flex-direction: row;
       justify-content: space-between;
 
-      padding-top: calc(var(--zen-toolbox-padding) * 2);
+      padding-top: var(--zen-element-separation);
 
       width: 100%;
       position: relative;
 
-      --toolbarbutton-inner-padding: 9px !important;
-
-      justify-content: space-between;
+      --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;
     }
 
     & #TabsToolbar-customization-target {
       &::after {
-        width: 98%;
+        width: 100%;
         bottom: calc(-0.5 * var(--zen-toolbox-padding));
       }
-    }
 
-    & #newtab-button-container {
-      &::before {
+      & > *:not(tabs):not(#search-container) {
         width: 100%;
-        margin-block-end: calc(var(--zen-toolbox-padding) + 2px);
-      }
+        border-radius: var(--tab-border-radius);
 
-      & #vertical-tabs-newtab-button {
-        padding: 0 !important;
+        padding-left: var(--toolbarbutton-inner-padding);
+        padding-right: var(--toolbarbutton-inner-padding);
 
         & label {
           display: flex;
-          text-align: start;
-          align-items: center;
-          padding: 0;
+          width: 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 {
@@ -239,44 +264,34 @@
         }
       }
     }
-
-    @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') {
-      :root:not([zen-sidebar-legacy='true']) #navigator-toolbox:is([zen-user-hover='true']:hover, :not([zen-user-hover='true'])) {
-        padding-right: 47px !important;
-      }
-      
-      & #zen-profile-button {
-        width: 100% !important;
-        padding: var(--toolbarbutton-inner-padding) !important;
-  
-        & label {
-          padding-left: calc(var(--toolbarbutton-inner-padding) * 1.5);
-        }
-      }
-    }
   }
 
   /* 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: 45px;
     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;
     }
 
@@ -284,6 +299,56 @@
       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;
 
@@ -292,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;
@@ -333,6 +404,31 @@
         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;
+          }
+        }
+      }
+    }
   }
 
   /* Mark: Separator styling */
@@ -343,7 +439,7 @@
   }
 
   /* Mark: Expand on hover */
-  @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') and (not (-moz-bool-pref: 'zen.view.compact')) {
+  @media (-moz-bool-pref: 'zen.view.sidebar-expanded.on-hover') and (not ((-moz-bool-pref: 'zen.view.compact') and (-moz-bool-pref: 'zen.view.compact.hide-tabbar'))) {
     #zen-sidebar-splitter {
       display: none !important;
     }
@@ -353,8 +449,6 @@
     }
 
     #TabsToolbar {
-      --hovered-verticaltab-width: 20em;
-
       z-index: 1;
       background-repeat: no-repeat !important;
       background-position: center center !important;
@@ -368,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: 50px !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;
@@ -391,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 {
@@ -412,31 +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;
-        }
-      }
     }
   }
 
@@ -465,11 +535,51 @@
   }
 
   /* Customization mode */
-  :root[customizing] #navigator-toolbox {
+  /*: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;

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,9 @@
 /* URL and tool bars */
 
+#urlbar-container {
+  padding-block: 0 !important;
+}
+
 #urlbar {
   --toolbarbutton-border-radius: 10px;
   --urlbarView-separator-color: var(--zen-colors-border);
@@ -171,8 +175,7 @@ button.popup-notification-dropmarker {
   margin-top: 5px;
 }
 
-:root:not([zen-sidebar-legacy='true']) {
-  @media (max-width: 650px) {
+@media (max-width: 550px) {
   #urlbar-container {
     width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
   }
@@ -193,32 +196,6 @@ button.popup-notification-dropmarker {
   #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)));
-    }
-
-    #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;
-    }
-  }
 }
 
 /* Thanks to https://github.com/JLBlk!
@@ -272,6 +249,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,6 +266,8 @@ 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) {
@@ -286,17 +275,12 @@ button.popup-notification-dropmarker {
   }
 }
 
-@media (-moz-bool-pref: 'zen.view.compact') or (-moz-bool-pref: 'zen.themes.tabs.legacy-location') {
-  #nav-bar {
-    padding-left: var(--zen-element-separation) !important;
-  }
-
-  .titlebar-button:last-child {
+/* 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;
+  padding-left: 0 !important;
 }

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

@@ -1,12 +1,76 @@
 #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']) {
+    --zen-workspaces-strip-background-color: color-mix(in srgb, var(--zen-colors-border) 50%, transparent 50%);
+    --toolbarbutton-hover-background: var(--toolbarbutton-hover-background) !important;
+    border-radius: var(--zen-button-border-radius) !important;
+    background: var(--zen-workspaces-strip-background-color) !important;
+    padding: 5px;
+    appearance: unset !important;
+    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,33 +79,43 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  font-size: 12px;
-  pointer-events: none;
+  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 {
-      width: calc(var(--zen-sidebar-action-button-width) - 1px) !important;
-      margin-top: .2rem;
-      height: calc(var(--zen-sidebar-action-button-width) - 10px) !important;
+    & #zen-workspaces-button[as-button='true'] {
+      width: 100% !important;
+      margin: 2px;
+      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;
@@ -52,7 +126,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..a31dc07c8b756e09f43cd5f81bad8d4a3c5f7fce 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,7 @@ index f466105b8290b13c672351bb68dd92644dd670fe..b195cd59d7ff07ff512e7388c9dc33f3
  
  const kSpecialWidgetPfx = "customizableui-special-";
  
-@@ -253,10 +253,9 @@ var CustomizableUIInternal = {
+@@ -253,13 +254,14 @@ var CustomizableUIInternal = {
        "spring",
        "urlbar-container",
        "spring",
@@ -23,12 +31,50 @@ index f466105b8290b13c672351bb68dd92644dd670fe..b195cd59d7ff07ff512e7388c9dc33f3
        lazy.resetPBMToolbarButtonEnabled ? "reset-pbm-toolbar-button" : null,
      ].filter(name => name);
  
-@@ -288,7 +287,7 @@ var CustomizableUIInternal = {
++    lazy.ZenCustomizableUI.startup(this);
++
+     this.registerArea(
+       CustomizableUI.AREA_NAVBAR,
+       {
+@@ -288,10 +290,10 @@ var CustomizableUIInternal = {
        {
          type: CustomizableUI.TYPE_TOOLBAR,
          defaultPlacements: [
 -          "firefox-view-button",
 +//          "firefox-view-button",
            "tabbrowser-tabs",
-           "new-tab-button",
-           "alltabs-button",
+-          "new-tab-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);
+@@ -1033,6 +1036,9 @@ var CustomizableUIInternal = {
+         placements = gPlacements.get(area);
+       }
+ 
++      // remove "zen-sidebar-top-buttons" from the placements
++      placements = placements.filter(p => p != "zen-sidebar-top-buttons");
++
+       // For toolbars that need it, mark as dirty.
+       let defaultPlacements = areaProperties.get("defaultPlacements");
+       if (
+@@ -3289,6 +3295,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

@@ -1,26 +1,6 @@
 // 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/.
-
-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,136 +59,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);
-    console.info('ZenThemeMarketplaceParent(settings): Removing theme ', themePath);
+    const themePath = ZenThemesCommon.getThemeFolder(themeId);
+
+    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() {
-    if (!this._themes) {
-      if (!(await IOUtils.exists(this.themesDataFile))) {
-        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;
-  },
-
-  __throttle(mainFunction, delay) {
-    let timerFlag = null;
-
-    return (...args) => {
-      if (timerFlag === null) {
-        mainFunction(...args);
-        timerFlag = setTimeout(() => {
-          timerFlag = null;
-        }, delay);
-      }
-    };
+  _triggerBuildUpdateWithoutRebuild() {
+    this._doNotRebuildThemesList = true;
+    this.triggerThemeUpdate();
   },
 
   async _buildThemesList() {
@@ -218,16 +107,17 @@ 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">
@@ -238,7 +128,7 @@ var gZenMarketplaceManager = {
             <description class="description-deemphasized zenThemeMarketplaceItemDescription"></description>
           </vbox>
           <hbox class="zenThemeMarketplaceItemActions">
-            <button id="zenThemeMarketplaceItemConfigureButton-${sanitizedName}" 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>
@@ -260,16 +150,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.title = theme.enabled ? 'Disable theme' : 'Enable theme';
+      mozToggle.pressed = isThemeEnabled;
+      browser.document.l10n.setAttributes(
+        mozToggle,
+        `zen-theme-marketplace-toggle-${isThemeEnabled ? 'enabled' : 'disabled'}-button`
+      );
 
       baseHeader.appendChild(mozToggle);
 
@@ -293,40 +188,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(themeId);
+
+        await this.removeTheme(event.target.getAttribute('zen-theme-id'));
       });
+
+      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.setAttribute('flex', '1');
 
-        for (let entry of preferences) {
-          const { property, label, type } = entry;
+        for (const entry of preferences) {
+          const { property, label, type, placeholder } = entry;
 
           switch (type) {
             case 'dropdown': {
@@ -351,18 +260,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;
                 }
@@ -394,6 +308,7 @@ var gZenMarketplaceManager = {
                 element.setAttribute(property?.replaceAll(/\./g, '-'), value);
 
                 Services.prefs.setStringPref(property, value === 'none' ? '' : value);
+                this._triggerBuildUpdateWithoutRebuild();
               });
 
               const nameLabel = document.createXULElement('label');
@@ -423,9 +338,9 @@ var gZenMarketplaceManager = {
               }
 
               checkbox.querySelector('.zenThemeMarketplaceItemPreferenceCheckbox').addEventListener('click', (event) => {
-                let target = event.target.closest('.zenThemeMarketplaceItemPreferenceCheckbox');
-                let key = target.getAttribute('zen-pref');
-                let checked = target.hasAttribute('checked');
+                const target = event.target.closest('.zenThemeMarketplaceItemPreferenceCheckbox');
+                const key = target.getAttribute('zen-pref');
+                const checked = target.hasAttribute('checked');
 
                 if (!checked) {
                   target.removeAttribute('checked');
@@ -455,12 +370,19 @@ var gZenMarketplaceManager = {
               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',
-                this.__throttle((event) => {
+                ZenThemesCommon.throttle((event) => {
                   const value = event.target.value;
 
                   Services.prefs.setStringPref(property, value);
+                  this._triggerBuildUpdateWithoutRebuild();
 
                   if (value === '') {
                     browser.document.querySelector(':root').style.removeProperty(`--${sanitizedProperty}`);
@@ -486,7 +408,7 @@ var gZenMarketplaceManager = {
 
             default:
               console.log(
-                `ZenThemeMarketplaceParent(settings): Warning, unknown preference type received (${type}), skipping.`
+                `[ZenThemeMarketplaceParent:settings]: Warning, unknown preference type received (${type}), skipping.`
               );
               continue;
           }
@@ -510,13 +432,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(() => {
@@ -529,6 +448,7 @@ var gZenLooksAndFeel = {
       }
     }, 500);
     this.setDarkThemeListener();
+    this.setCompactModeStyle();
   },
 
   onPreferColorSchemeChange(event) {
@@ -542,9 +462,9 @@ var gZenLooksAndFeel = {
   },
 
   setDarkThemeListener() {
-    this.chooser = document.getElementById('zen-dark-theme-styles-form');
-    this.radios = [...this.chooser.querySelectorAll('input')];
-    for (let radio of this.radios) {
+    const chooser = document.getElementById('zen-dark-theme-styles-form');
+    const radios = [...chooser.querySelectorAll('input')];
+    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')) {
@@ -576,11 +496,43 @@ var gZenLooksAndFeel = {
     }
   },
 
-  async onLegacyToolbarChange(event) {
-    let buttonIndex = await confirmRestartPrompt(true, 1, true, false);
-    if (buttonIndex == CONFIRM_RESTART_PROMPT_RESTART_NOW) {
-      Services.startup.quit(Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart);
-      return;
+  setCompactModeStyle() {
+    const chooser = document.getElementById('zen-compact-mode-styles-form');
+    const radios = [...chooser.querySelectorAll('input')];
+
+    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;
+        }
+      });
     }
   },
 
@@ -596,6 +548,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) {
@@ -608,6 +568,7 @@ var gZenLooksAndFeel = {
             Services.prefs.setBoolPref(defaultExpandPref, false);
             break;
           case 'hover':
+            disableCompactTabbar();
             Services.prefs.setBoolPref(onHoverPref, true);
             Services.prefs.setBoolPref(defaultExpandPref, true);
             break;
@@ -619,7 +580,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');
@@ -642,7 +603,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]);
   },
 };
 
@@ -669,150 +630,246 @@ var gZenWorkspacesSettings = {
   },
 };
 
+const ZEN_CKS_CLASS_BASE = 'zenCKSOption';
+const ZEN_CKS_INPUT_FIELD_CLASS = `${ZEN_CKS_CLASS_BASE}-input`;
+const ZEN_CKS_LABEL_CLASS = `${ZEN_CKS_CLASS_BASE}-label`;
+const ZEN_CKS_WRAPPER_ID = `${ZEN_CKS_CLASS_BASE}-wrapper`;
+const ZEN_CKS_GROUP_PREFIX = `${ZEN_CKS_CLASS_BASE}-group`;
+const KEYBIND_ATTRIBUTE_KEY = 'key';
+
+var zenMissingKeyboardShortcutL10n = {
+  key_quickRestart: "zen-key-quick-restart",
+  key_delete: "zen-key-delete",
+  goBackKb: "zen-key-go-back",
+  goForwardKb: "zen-key-go-forward",
+  key_enterFullScreen: "zen-key-enter-full-screen",
+  key_exitFullScreen: "zen-key-exit-full-screen",
+  key_aboutProcesses: "zen-key-about-processes",
+  key_stop: "zen-key-stop",
+  key_sanitize: "zen-key-sanitize",
+  key_wrCaptureCmd: "zen-key-wr-capture-cmd", 
+  key_wrToggleCaptureSequenceCmd: "zen-key-wr-toggle-capture-sequence-cmd",
+  key_undoCloseWindow: "zen-key-undo-close-window",
+
+  key_selectTab1: "zen-key-select-tab-1",
+  key_selectTab2: "zen-key-select-tab-2",
+  key_selectTab3: "zen-key-select-tab-3",
+  key_selectTab4: "zen-key-select-tab-4",
+  key_selectTab5: "zen-key-select-tab-5",
+  key_selectTab6: "zen-key-select-tab-6",
+  key_selectTab7: "zen-key-select-tab-7",
+  key_selectTab8: "zen-key-select-tab-8",
+  key_selectLastTab: "zen-key-select-tab-last",
+
+  key_showAllTabs: "zen-key-show-all-tabs",
+  key_gotoHistory: "zen-key-goto-history",
+
+  goHome: "zen-key-go-home",
+}  
+
 var gZenCKSSettings = {
-  init() {
-    this._currentAction = null;
+  async init() {
+    if (this.__hasInitialized) return;
+    this.__hasInitialized = true;
+    this._currentActionID = null;
     this._initializeEvents();
-    this._initializeCKS();
-    this._addPrefObservers();
+    await this._initializeCKS();
+  },
+
+  _initializeEvents() {
+    const resetAllListener = this.resetAllShortcuts.bind(this);
+    const handleKeyDown = this._handleKeyDown.bind(this);
+    window.addEventListener('keydown', handleKeyDown);
+    const button = document.getElementById('zenCKSResetButton');
+    button.addEventListener('click', resetAllListener);
     window.addEventListener('unload', () => {
-      Services.prefs.removeObserver('zen.keyboard.shortcuts.disable-firefox', this);
+      window.removeEventListener('keydown', handleKeyDown);
+      button.removeEventListener('click', resetAllListener);
     });
   },
 
-  _addPrefObservers() {
-    Services.prefs.addObserver('zen.keyboard.shortcuts.disable-firefox', this);
-  },
-
-  observe(subject, topic, data) {
-    this.onDisableFirefoxShortcutsChange();
-  },
-
-  async onDisableFirefoxShortcutsChange(event) {
-    let checked = Services.prefs.getBoolPref('zen.keyboard.shortcuts.disable-firefox');
-    if (checked) return;
+  async resetAllShortcuts() {
     let buttonIndex = await confirmRestartPrompt(true, 1, true, false);
     if (buttonIndex == CONFIRM_RESTART_PROMPT_RESTART_NOW) {
+      await gZenKeyboardShortcutsManager.resetAllShortcuts();
       Services.startup.quit(Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart);
-      return;
     }
   },
 
-  _initializeCKS() {
-    let wrapepr = document.getElementById('zenCKSOptions-wrapper');
+  async _initializeCKS() {
+    let wrapper = document.getElementById(ZEN_CKS_WRAPPER_ID);
 
-    // Create the groups first.
-    for (let key in kZKSActions) {
-      const data = kZKSActions[key];
-      const group = data[2];
-      if (!wrapepr.querySelector(`[data-group="${group}"]`)) {
+    let shortcuts = await gZenKeyboardShortcutsManager.getModifiableShortcuts();
+
+    if (!shortcuts) {
+      throw Error('No shortcuts defined!');
+    }
+
+    // Generate section per each group
+    for (let group of VALID_SHORTCUT_GROUPS) {
+      let groupClass = `${ZEN_CKS_GROUP_PREFIX}-${group}`;
+      if (!wrapper.querySelector(`[data-group="${groupClass}"]`)) {
         let groupElem = document.createElement('h2');
-        groupElem.setAttribute('data-group', group);
-        document.l10n.setAttributes(groupElem, `zen-cks-group-${group}`);
-        wrapepr.appendChild(groupElem);
+        groupElem.setAttribute('data-group', groupClass);
+        document.l10n.setAttributes(groupElem, groupClass);
+        wrapper.appendChild(groupElem);
       }
     }
 
-    const keys = Object.keys(kZKSActions);
-    for (let i = keys.length - 1; i >= 0; i--) {
-      const key = keys[i];
-      const data = kZKSActions[key];
-      const l10nId = data[1];
-      const group = data[2];
+    for (let shortcut of shortcuts) {
+      const keyID = shortcut.getID();
+      const action = shortcut.getAction();
+      const l10nID = shortcut.getL10NID();
+      const group = shortcut.getGroup();
+      const keyInString = shortcut.toUserString();
+
+      const labelValue = zenMissingKeyboardShortcutL10n[keyID] ?? l10nID;
+      
       let fragment = window.MozXULElement.parseXULToFragment(`
-        <hbox class="zenCKSOption">
-          <label class="zenCKSOption-label" for="zenCKSOption-${key}"></label>
-          <html:input readonly="1" class="zenCKSOption-input" id="zenCKSOption-${key}" />
+        <hbox class="${ZEN_CKS_CLASS_BASE}">
+          <label class="${ZEN_CKS_LABEL_CLASS}" for="${ZEN_CKS_CLASS_BASE}-${action}"></label>
+          <vbox flex="1">
+            <html:input readonly="1" class="${ZEN_CKS_INPUT_FIELD_CLASS}" id="${ZEN_CKS_INPUT_FIELD_CLASS}-${action}" />
+          </vbox>
         </hbox>
       `);
-      document.l10n.setAttributes(fragment.querySelector('.zenCKSOption-label'), l10nId);
 
-      let input = fragment.querySelector('.zenCKSOption-input');
-      let shortcut = gZenKeyboardShortcuts.getShortcut(key);
-      if (shortcut) {
-        input.value = gZenKeyboardShortcuts.shortCutToString(shortcut);
+      const label = fragment.querySelector(`.${ZEN_CKS_LABEL_CLASS}`);
+      if (!labelValue) {
+        label.textContent = action; // Just in case
       } else {
-        this._resetCKS(input, key);
+        document.l10n.setAttributes(label, labelValue);
       }
 
-      input.setAttribute('data-key', key);
+      let input = fragment.querySelector(`.${ZEN_CKS_INPUT_FIELD_CLASS}`);
+      if (keyInString && !shortcut.isEmpty()) {
+        input.value = keyInString;
+      } else {
+        this._resetShortcut(input);
+      }
+
+      input.setAttribute(KEYBIND_ATTRIBUTE_KEY, keyID);
+      input.setAttribute('data-group', group);
+      input.setAttribute('data-id', keyID);
+
       input.addEventListener('focus', (event) => {
-        const key = event.target.getAttribute('data-key');
-        this._currentAction = key;
-        event.target.classList.add('zenCKSOption-input-editing');
+        const value = event.target.getAttribute(KEYBIND_ATTRIBUTE_KEY);
+        this._currentActionID = event.target.getAttribute('data-id');
+        event.target.classList.add(`${ZEN_CKS_INPUT_FIELD_CLASS}-editing`);
+      });
+
+      input.addEventListener('editDone', (event) => {
+        const target = event.target;
+        target.classList.add(`${ZEN_CKS_INPUT_FIELD_CLASS}-editing`);
+        this._editDone(target);
       });
 
       input.addEventListener('blur', (event) => {
-        this._currentAction = null;
-        event.target.classList.remove('zenCKSOption-input-editing');
+        const target = event.target;
+        target.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-editing`);
+        this._editDone(target);
       });
 
-      const groupElem = wrapepr.querySelector(`[data-group="${group}"]`);
+      const groupElem = wrapper.querySelector(`[data-group="${ZEN_CKS_GROUP_PREFIX}-${group}"]`);
       groupElem.after(fragment);
     }
   },
 
-  _resetCKS(input, key) {
+  async _resetShortcut(input) {
     input.value = 'Not set';
-    input.classList.add('zenCKSOption-input-not-set');
-    input.classList.remove('zenCKSOption-input-invalid');
-    gZenKeyboardShortcuts.setShortcut(key, null);
+    input.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-invalid`);
+    input.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-editing`);
+    input.classList.add(`${ZEN_CKS_INPUT_FIELD_CLASS}-not-set`);
+
+    if (this._currentActionID) {
+      this._editDone();
+      await gZenKeyboardShortcutsManager.setShortcut(this._currentActionID, null, null);
+    }
   },
 
-  _initializeEvents() {
-    window.addEventListener('keydown', this._handleKeyDown.bind(this));
+  _editDone(shortcut, modifiers) {
+    // Check if we have a valid key
+    if (!shortcut || !modifiers) {
+      return;
+    }
+    gZenKeyboardShortcutsManager.setShortcut(this._currentActionID, shortcut, modifiers);
+    this._currentActionID = null;
   },
 
-  _handleKeyDown(event) {
-    if (!this._currentAction) {
+  //TODO Check for duplicates
+  async _handleKeyDown(event) {
+    if (!this._currentActionID) {
       return;
     }
 
-    let input = document.querySelector(`.zenCKSOption-input[data-key="${this._currentAction}"]`);
-    let shortcut = {
-      ctrl: event.ctrlKey,
-      alt: event.altKey,
-      shift: event.shiftKey,
-      meta: event.metaKey,
-    };
-
-    const shortcutWithoutModifiers = !shortcut.ctrl && !shortcut.alt && !shortcut.shift && !shortcut.meta;
-
-    if (event.key === 'Tab' && shortcutWithoutModifiers) {
-      return;
-    } else if (event.key === 'Escape' && shortcutWithoutModifiers) {
-      this._currentAction = null;
-      input.blur();
-      return;
-    } else if (event.key === 'Backspace' && shortcutWithoutModifiers) {
-      this._resetCKS(input, this._currentAction);
-      return;
-    }
-
-    if (!shortcut.ctrl && !shortcut.alt && !shortcut.shift && !shortcut.meta) {
-      this._resetCKS(input, this._currentAction);
-      return; // No modifiers, ignore.
-    }
-
-    if (!['Control', 'Alt', 'Meta', 'Shift'].includes(event.key)) {
-      if (event.keycode) {
-        shortcut.keycode = event.keycode;
-      } else {
-        shortcut.key = event.key;
-      }
-    }
-
     event.preventDefault();
-    gZenKeyboardShortcuts.setShortcut(this._currentAction, shortcut);
 
-    input.value = gZenKeyboardShortcuts.shortCutToString(shortcut);
-    input.classList.remove('zenCKSOption-input-not-set');
-
-    if (gZenKeyboardShortcuts.isValidShortcut(shortcut)) {
-      input.classList.remove('zenCKSOption-input-invalid');
+    let input = document.querySelector(`.${ZEN_CKS_INPUT_FIELD_CLASS}[${KEYBIND_ATTRIBUTE_KEY}="${this._currentActionID}"]`);
+    let accelKey = false;
+    let controlKey = false;
+    if (AppConstants.platform === 'macosx') {
+      accelKey = event.ctrlKey;
     } else {
-      input.classList.add('zenCKSOption-input-invalid');
+      accelKey = event.ctrlKey;
     }
+    const modifiers = new KeyShortcutModifiers(controlKey, event.altKey, event.shiftKey, event.metaKey, accelKey);
+    const modifiersActive = modifiers.areAnyActive();
+
+    let shortcut = event.key;
+
+    shortcut = shortcut.replace(/Ctrl|Control|Shift|Alt|Option|Cmd|Meta/, ''); // Remove all modifiers
+
+    if (shortcut == 'Tab' && !modifiersActive) {
+      input.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-editing`);
+      this._latestValidKey = null;
+      return;
+    } else if (shortcut == 'Escape' && !modifiersActive) {
+      const hasConflicts = gZenKeyboardShortcutsManager.checkForConflicts(
+        this._latestValidKey ? this._latestValidKey : shortcut,
+        this._latestModifier ? this._latestModifier : modifiers, this._currentActionID);
+
+      if (!this._latestValidKey && !this._latestModifier) {
+      } else if (!this._latestValidKey || hasConflicts) {
+        if (!input.classList.contains(`${ZEN_CKS_INPUT_FIELD_CLASS}-invalid`)) {
+          input.classList.add(`${ZEN_CKS_INPUT_FIELD_CLASS}-invalid`);
+        }
+        if (hasConflicts && !input.nextElementSibling) {
+          input.after(window.MozXULElement.parseXULToFragment(`
+            <label class="${ZEN_CKS_CLASS_BASE}-conflict">Conflict with another shortcut</label>
+          `));
+        }
+      } else {
+        input.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-editing`);
+        input.blur();
+
+        this._editDone(this._latestValidKey, this._latestModifier);
+        this._latestValidKey = null;
+        this._latestModifier = null;
+        input.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-invalid`);
+        input.classList.add(`${ZEN_CKS_INPUT_FIELD_CLASS}-valid`);
+        setTimeout(() => {
+          input.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-valid`);
+        }, 1000);
+        const sibling = input.nextElementSibling;
+        if (sibling && sibling.classList.contains(`${ZEN_CKS_CLASS_BASE}-conflict`)) {
+          sibling.remove();
+        }
+      }
+      input.blur();
+      this._currentActionID = null;
+      return;
+    } else if (shortcut == 'Backspace' && !modifiersActive) {
+      this._resetShortcut(input);
+      this._latestValidKey = null;
+      this._latestModifier = null;
+      return;
+    }
+
+    this._latestModifier = modifiers;
+    input.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-invalid`);
+    input.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-not-set`);
+    input.value = modifiers.toUserString() + shortcut;
+    this._latestValidKey = shortcut;
   },
 };
 
@@ -867,16 +924,6 @@ Preferences.addAll([
     type: 'bool',
     default: true,
   },
-  {
-    id: 'zen.keyboard.shortcuts.disable-firefox',
-    type: 'bool',
-    default: false,
-  },
-  {
-    id: 'zen.themes.tabs.legacy-location',
-    type: 'bool',
-    default: false,
-  },
   {
     id: 'zen.workspaces.hide-default-container-indicator',
     type: 'bool',
@@ -887,4 +934,9 @@ Preferences.addAll([
     type: 'bool',
     default: true,
   },
+  {
+    id: 'zen.workspaces.show-icon-strip',
+    type: 'bool',
+    default: true,
+  },
 ]);

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

@@ -10,12 +10,10 @@
 <groupbox id="zenCKSGroup" data-category="paneZenCKS" hidden="true" class="highlighting-group">
       <label><html:h2 data-l10n-id="zen-settings-CKS-header"/></label>
       <description class="description-deemphasized" data-l10n-id="zen-settings-CKS-description" />
-      <vbox class="indent">
-            <checkbox id="zenKSCDisableFirefoxShortcuts"
-                  data-l10n-id="zen-settings-CKS-disable-firefox"
-                  preference="zen.keyboard.shortcuts.disable-firefox" />
-      </vbox>
-      <vbox id="zenCKSOptions-wrapper"></vbox>
+      <hbox>
+            <button id="zenCKSResetButton" data-l10n-id="zen-settings-CKS-reset-shortcuts" class="reset-button"/>      
+      </hbox>
+      <vbox id="zenCKSOption-wrapper"></vbox>
 </groupbox>
 
 </html:template>

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,10 +1,24 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..c776348e776c1f9efc9b9f2ca479b1050f0a750b 100644
+index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..807eb0c493f15643412b05d8dad81d36d7470155 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
-@@ -453,10 +453,12 @@
+@@ -452,11 +452,26 @@
+       return duplicateTabs;
      },
  
++    get _numVisiblePinTabs() {
++      let i = 0;
++      for (let tab of this.tabs) {
++        if (!tab.pinned) {
++          break;
++        }
++        if (!tab.hidden) {
++          i++;
++        }
++      }
++      return i;
++    },
++
      get _numPinnedTabs() {
 -      for (var i = 0; i < this.tabs.length; i++) {
 -        if (!this.tabs[i].pinned) {
@@ -17,7 +31,7 @@ index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..c776348e776c1f9efc9b9f2ca479b105
        }
        return i;
      },
-@@ -2704,6 +2706,11 @@
+@@ -2704,6 +2719,11 @@
          );
        }
  
@@ -29,7 +43,7 @@ index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..c776348e776c1f9efc9b9f2ca479b105
        if (!UserInteraction.running("browser.tabs.opening", window)) {
          UserInteraction.start("browser.tabs.opening", "initting", window);
        }
-@@ -2771,6 +2778,9 @@
+@@ -2771,6 +2791,9 @@
            noInitialLabel,
            skipBackgroundNotify,
          });
@@ -39,7 +53,7 @@ index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..c776348e776c1f9efc9b9f2ca479b105
          if (insertTab) {
            // insert the tab into the tab container in the correct position
            this._insertTabAtIndex(t, {
-@@ -3248,6 +3258,14 @@
+@@ -3248,6 +3271,14 @@
          ) {
            tabWasReused = true;
            tab = this.selectedTab;
@@ -54,7 +68,7 @@ index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..c776348e776c1f9efc9b9f2ca479b105
            if (!tabData.pinned) {
              this.unpinTab(tab);
            } else {
-@@ -3297,6 +3315,13 @@
+@@ -3297,6 +3328,13 @@
              preferredRemoteType,
            });
  
@@ -68,7 +82,7 @@ index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..c776348e776c1f9efc9b9f2ca479b105
            if (select) {
              tabToSelect = tab;
            }
-@@ -4184,6 +4209,7 @@
+@@ -4184,6 +4222,7 @@
          isLastTab ||
          aTab.pinned ||
          aTab.hidden ||
@@ -76,7 +90,7 @@ index ef857bd81f2cd7c163ecc74ac1cf81a0b63ce838..c776348e776c1f9efc9b9f2ca479b105
          this._removingTabs.size >
            3 /* don't want lots of concurrent animations */ ||
          !aTab.hasAttribute(
-@@ -5117,10 +5143,10 @@
+@@ -5117,10 +5156,10 @@
        SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
      },
  

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

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index 282e7f31fe158d929130c17628f7e30f690fd666..7225cb6bae5af213718a4e2df41f855631d6ce4e 100644
+index 282e7f31fe158d929130c17628f7e30f690fd666..213e6f1ea1cd454b4d0f3679a5acb414b0ef9242 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -1387,10 +1387,12 @@
@@ -18,3 +18,12 @@ index 282e7f31fe158d929130c17628f7e30f690fd666..7225cb6bae5af213718a4e2df41f8556
        selectedTab._notselectedsinceload = false;
      }
  
+@@ -1629,7 +1631,7 @@
+       }
+ 
+       let pinned = draggedTab.pinned;
+-      let numPinned = gBrowser._numPinnedTabs;
++      let numPinned = gBrowser._numVisiblePinTabs;
+       let tabs = this._getVisibleTabs().slice(
+         pinned ? 0 : numPinned,
+         pinned ? numPinned : undefined

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;
@@ -289,17 +327,29 @@ groupbox h2 {
   user-select: none;
   cursor: text;
   background: transparent;
+  transition: border-color 0.1s;
 }
 
 .zenCKSOption {
   margin-bottom: 10px;
   display: flex;
   align-items: center;
+
+  & > vbox {
+    width: fit-content;
+    justify-content: end;
+    min-width: 70%;
+
+    & > label {
+      margin-left: auto;
+    }
+  }
 }
 
 .zenCKSOption > label {
   font-size: 14px;
   color: light-dark(rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.7));
+  width: 100%;
 }
 
 .zenCKSOption-input.zenCKSOption-input-not-set {
@@ -311,13 +361,25 @@ groupbox h2 {
   box-shadow: 0 0 0 2px var(--zen-primary-color);
 }
 
+.zenCKSOption-conflict {
+  color: red;
+  margin-left: 10px;
+  margin-top: 5px;
+}
+
 .zenCKSOption-input.zenCKSOption-input-invalid {
   border-color: red;
 }
 
-#zenCKSOptions-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;
+.zenCKSOption-input.zenCKSOption-input-valid {
+  border-color: green;
+}
+
+#zenCKSOption-wrapper > [data-group] {
+  border-bottom: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+  padding-top: 20px;
+  padding-bottom: 10px;
+  margin-bottom: 15px;
 }
 
 /* Theme builder */
@@ -480,6 +542,10 @@ groupbox h2 {
   flex-direction: row;
 }
 
+.zenThemeMarketplaceItemPreferenceToggle {
+  align-self: start;
+}
+
 #zenThemeMarketplaceItemContentHeader {
   display: flex;
   flex-direction: row;

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

@@ -1,5 +1,5 @@
 diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css
-index 1ef4874d6e7f3b43f4c82db6a679883cf34ab493..33837e5f56e4fbefa2a2d2ee68ee51750357db59 100644
+index 1ef4874d6e7f3b43f4c82db6a679883cf34ab493..12eef770f5ae48b83cadd10a4ed21b8fab508bfe 100644
 --- a/browser/themes/shared/tabbrowser/tabs.css
 +++ b/browser/themes/shared/tabbrowser/tabs.css
 @@ -17,7 +17,7 @@
@@ -53,3 +53,11 @@ index 1ef4874d6e7f3b43f4c82db6a679883cf34ab493..33837e5f56e4fbefa2a2d2ee68ee5175
    padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width) + 2px);
    margin-inline-start: 2px;
  }
+@@ -962,7 +961,6 @@ toolbar:not(#TabsToolbar) #firefox-view-button {
+   list-style-image: url(chrome://global/skin/icons/plus.svg);
+ }
+ 
+-#tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow]) ~ #new-tab-button,
+ #tabbrowser-tabs[orient="vertical"] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button,
+ #tabbrowser-tabs[overflow] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button,
+ #tabbrowser-tabs:not([hasadjacentnewtabbutton]) > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button,

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,
-:root[zen-sidebar-legacy='true'] #zen-sidebar-web-panel-forward {
+#forward-button,
+#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,
-:root:not([zen-sidebar-legacy='true']) #zen-sidebar-web-panel-forward {
-  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 {
+#reload-button,
+#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/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.2",
+        "displayVersion": "1.0.1-a.5",
         "github": {
           "repo": "zen-browser/desktop"
         },