Merge branch 'shortcuts-redo' into fix/keybindings

l10n

@@ -1 +1 @@
-Subproject commit 6934ff4f19c344da8fd89bd72c81517217c448f2
+Subproject commit 5185d8badc790814c015b306d456bd7e2233dde9

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);
 
@@ -220,4 +218,4 @@ pref("layout.word_select.eat_space_to_next_word", false);
 
 /****************************************************************************
  * END: BETTERFOX                                                           *
-****************************************************************************/
+****************************************************************************/

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

@@ -78,13 +78,15 @@ pref('zen.theme.content-element-separation', 8); // 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);
@@ -109,6 +111,7 @@ 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);
@@ -144,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/ZenStartup.mjs

@@ -35,6 +35,7 @@
         gBrowser.tabContainer.arrowScrollbox.smoothScroll = false;
 
         ZenWorkspaces.init();
+        gZenUIManager.init();
         gZenVerticalTabsManager.init();
         gZenCompactModeManager.init();
         gZenKeyboardShortcutsManager.init();
@@ -123,16 +124,23 @@
       splitter.setAttribute('resizeafter', 'none');
       toolbox.insertAdjacentElement('afterend', splitter);
 
-      this._moveWindowButtons();
       this._addSidebarButtons();
       this._hideToolbarButtons();
     },
 
     _moveWindowButtons() {
-      const windowControls = document.getElementById('titlebar-buttonbox-container');
+
-      const toolboxIcons = document.getElementById('zen-sidebar-top-buttons');
+      const windowControls = document.getElementsByClassName('titlebar-buttonbox-container');
-      if (AppConstants.platform == 'macosx') {
+      const toolboxIcons = document.getElementById('zen-sidebar-top-buttons-customization-target');
-        toolboxIcons.prepend(windowControls);
+      if (AppConstants.platform === "macosx") {
+        for (let i = 0; i < windowControls.length; i++) {
+          if (i === 0) {
+            toolboxIcons.prepend(windowControls[i]);
+            continue;
+          }
+          windowControls[i].remove();
+        }
+
       }
     },
 
@@ -193,12 +201,20 @@
           if (id === 'zen-workspaces-button' || !elem) continue;
           elem.setAttribute('removable', 'true');
         }
-        CustomizableUI.registerArea('zen-sidebar-icons-wrapper', {
+
-          type: CustomizableUI.TYPE_TOOLBAR,
+        CustomizableUI.registerArea(
-          defaultPlacements: defaultSidebarIcons,
+          "zen-sidebar-icons-wrapper",
-          defaultCollapsed: null,
+          {
-        });
+            type: CustomizableUI.TYPE_TOOLBAR,
-        CustomizableUI.registerToolbarNode(document.getElementById('zen-sidebar-icons-wrapper'));
+            defaultPlacements: defaultSidebarIcons,
+            defaultCollapsed: null,
+          }
+        );
+        CustomizableUI.registerToolbarNode(
+          document.getElementById('zen-sidebar-icons-wrapper')
+        );
+
+        this._moveWindowButtons();
       }, 100);
     },
 

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();
   },
@@ -143,106 +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));
-
-    addEventListener('popupshowing', this.keepSidebarVisibleOnContextMenu.bind(this));
-  },
-
-  get prefefence() {
-    return Services.prefs.getBoolPref('zen.view.compact');
-  },
-
-  set preference(value) {
-    Services.prefs.setBoolPref('zen.view.compact', value);
-  },
-
-  get sidebar() {
-    if (!this._sidebar) {
-      this._sidebar= document.getElementById('navigator-toolbox');
-    }
-    return this._sidebar;
-  },
-
-  _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() {
-    this.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 tabPanels = document.getElementById('tabbrowser-tabpanels');
-    if (this.sidebar.matches(':hover') || tabPanels.matches("[zen-split-view='true']")) {
-      return;
-    }
-    if (this._flashSidebarTimeout) {
-      clearTimeout(this._flashSidebarTimeout);
-    } else {
-      window.requestAnimationFrame(() => this.sidebar.setAttribute('flash-popup', ''));
-    }
-    this._flashSidebarTimeout = setTimeout(() => {
-      window.requestAnimationFrame(() => {
-        this.sidebar.removeAttribute('flash-popup');
-        this._flashSidebarTimeout = null;
-      });
-    }, this.flashSidebarDuration);
-  },
-
-  keepSidebarVisibleOnContextMenu(event) {
-    if (!this.sidebar.contains(event.explicitOriginalTarget)) {
-      return;
-    }
-    this.sidebar.setAttribute('has-popup-menu', '');
-    /* If the cursor is on the popup when it hides, the :hover effect will not be reapplied to the sidebar until the cursor moves,
-     to mitigate this: Wait for mousemove when popup item selected
-     */
-    if (!this.__removeHasPopupAttribute) {
-      this.__removeHasPopupAttribute = () => this.sidebar.removeAttribute('has-popup-menu');
-    }
-    removeEventListener('mousemove', this.__removeHasPopupAttribute);
-
-    const waitForMouseMoveOnPopupSelect = (event) => {
-      if (event.target.tagName === 'menuitem') {
-        removeEventListener('click', waitForMouseMoveOnPopupSelect);
-        removeEventListener('popuphidden', removeHasPopupOnPopupHidden);
-        addEventListener('mousemove', this.__removeHasPopupAttribute, {once: true});
-      }
-    }
-    const removeHasPopupOnPopupHidden = (hiddenEvent) => {
-      if (event.target === hiddenEvent.target) {
-        removeEventListener('click', waitForMouseMoveOnPopupSelect);
-        removeEventListener('popuphidden', removeHasPopupOnPopupHidden);
-        this.__removeHasPopupAttribute();
-      }
-    }
-    addEventListener('click', waitForMouseMoveOnPopupSelect);
-    addEventListener('popuphidden', removeHasPopupOnPopupHidden);
-  },
-
-  toggleToolbar() {
-    let toolbar = document.getElementById('zen-appcontent-navbar-container');
-    toolbar.toggleAttribute('zen-user-show');
-  },
-};

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

@@ -28,6 +28,7 @@ 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,6 +3,7 @@
         content/browser/zenThemeModifier.js                     (content/zenThemeModifier.js)
         content/browser/ZenStartup.mjs                          (content/ZenStartup.mjs)
         content/browser/ZenUIManager.mjs                        (content/ZenUIManager.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)

src/browser/base/content/zen-components

@@ -1 +1 @@
-Subproject commit 3c66cbdc24936c4827443d6946baa708173c6d62
+Subproject commit f56b8c0e59a346bd0c2c36da89a23681a2721f32

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

@@ -1,4 +1,4 @@
-<hbox flex="1" 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>

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

@@ -35,7 +35,6 @@
 
 :root:not([inDOMFullscreen='true']) #appcontent {
   overflow: hidden;
-  padding: 1px;
 }
 
 :root:not([inDOMFullscreen='true']) #appcontent,
@@ -51,4 +50,5 @@
 #tabbrowser-tabbox {
   display: flex;
   flex-direction: row;
-}
+  padding: 1px; /* To allow the web view's shadow to be visible */
+}

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

@@ -7,72 +7,121 @@
 }
 
 @media (-moz-bool-pref: 'zen.view.compact') {
-  /* Set the extra paddings */
+  :root:not([customizing]) {
-  #tabbrowser-tabpanels {
+    @media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') {
-    #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+      #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
-      padding-right: var(--zen-element-separation);
+        margin-left: calc(var(--zen-sidebar-web-panel-spacing) * 2) !important;
+      }
+
+      #zen-sidebar-top-buttons-customization-target {
+        padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
+      }
+
+      /* Set the extra paddings */
+      #tabbrowser-tabpanels {
+        #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+          padding-right: var(--zen-element-separation);
+        }
+
+        #browser:has(#navigator-toolbox:not([zen-right-side='true'])) & {
+          padding-left: var(--zen-element-separation);
+        }
+      }
+
+      #zen-sidebar-splitter {
+        display: 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;
+        }
+      }
+      
+      #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;
+        
+        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);
+        }
+      }
     }
 
-    #browser:has(#navigator-toolbox:not([zen-right-side='true'])) & {
+    @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
-      padding-left: var(--zen-element-separation);
-    }
-  }
 
-  #zen-sidebar-splitter {
+      #navigator-toolbox {
-    display: none !important;
+        --zen-toolbox-top-align: var(--zen-element-separation);
-  }
+      }
 
-  #navigator-toolbox {
+      #tabbrowser-tabpanels {
-    position: absolute;
+        padding-top: var(--zen-element-separation) !important;
-    height: 98%;
+      }
-    z-index: 9;
-    background: var(--zen-themed-toolbar-bg) !important;
-    box-shadow: 0 0 2px 2px rgba(0,0,0,.1);
-    border-top-right-radius: var(--zen-border-radius);
-    border-bottom-right-radius: var(--zen-border-radius);
-    border: 1px solid var(--zen-colors-border);
-    border-left-width: 0;
-    padding: var(--zen-toolbox-padding) !important;
-    transition: all 0.1s ease-in-out;
-    right: calc(100% - var(--zen-element-separation));
-    top: 50%;
-    opacity: 0;
 
-    transition-delay: 0.8s;
+      #zen-appcontent-navbar-container {
-    backface-visibility: hidden;
+        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;
+      }
 
-    transform: translate3d(0, calc(-50% - 2px), 0);
+      #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;
 
-    #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+        transform: translateY(-1px);
-      border-left-width: 1px;
+      }
-      border-right-width: 0;
-
-      left: calc(100% - var(--zen-element-separation));
-      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;
-    }
-  }
-  
-  #navigator-toolbox: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;
-    transition-delay: 0s !important;
-    
-    transform: translate3d(calc(100% - var(--zen-element-separation) - 1px), calc(-50% - 2px), 0);
-    #browser:has(#navigator-toolbox[zen-right-side='true']) & {
-      transform: translate3d(calc(-100% + var(--zen-element-separation) + 1px), calc(-50% - 2px), 0);
     }
   }
 }

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

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

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

@@ -23,6 +23,8 @@ toolbar {
     height: calc(var(--toolbarbutton-inner-padding) + 10px);
     width: calc(var(--toolbarbutton-inner-padding) + 10px);
     padding: 0;
+
+    margin: 0 var(--toolbarbutton-inner-padding) !important;
   }
 
   &:hover {

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

@@ -31,8 +31,6 @@
     min-width: var(--zen-toolbox-min-width);
 
     padding: var(--zen-toolbox-padding);
-    /* We do this to fix the padding of webview, the shadow overlaps one pixel */
-    padding-left: calc(var(--zen-toolbox-padding) - 1px);
     padding-top: var(--zen-toolbox-top-align);
     padding-bottom: var(--zen-element-separation);
 
@@ -75,6 +73,7 @@
     border-bottom: 0px solid transparent !important;
 
     --tab-block-margin: 2px;
+    --tab-selected-bgcolor: var(--zen-colors-primary);
     grid-gap: 0 !important;
 
     & .tabbrowser-tab {
@@ -147,12 +146,11 @@
 
   /* 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],
     #navigator-toolbox[zen-user-hover='true'][has-popup-menu],
-    #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)),
     #navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])) {
     --zen-toolbox-min-width: fit-content;
@@ -161,8 +159,13 @@
       min-width: 150px;
     }
 
-    & #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] {
+    & #zen-workspaces-button {
-      display: none;
+      margin-left: 2px;
+      margin-right: 2px;
+
+      & .zen-workspace-sidebar-icon[no-icon='true'] {
+        display: none;
+      }
     }
 
     & #zen-sidebar-icons-wrapper {
@@ -269,12 +272,11 @@
 
   /* 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],
     #navigator-toolbox[zen-user-hover='true'][has-popup-menu],
-    #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)),
     #navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true']))) {
     --zen-toolbox-max-width: 51px;
@@ -434,8 +436,6 @@
     }
 
     #TabsToolbar {
-      --hovered-verticaltab-width: 20em;
-
       z-index: 1;
       background-repeat: no-repeat !important;
       background-position: center center !important;
@@ -449,15 +449,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],
     #navigator-toolbox[has-popup-menu],
-    #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
     #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;
@@ -549,7 +548,7 @@
       align-items: center;
 
       #nav-bar:has(&) & {
-        padding-inline-start: calc(var(--zen-toolbox-padding) + 2px);
+        padding-inline-start: calc(var(--zen-toolbox-padding) + var(--toolbarbutton-outer-padding));
       }
 
       #browser:has(#navigator-toolbox[zen-right-side='true']) & {

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

@@ -259,9 +259,6 @@ button.popup-notification-dropmarker {
   align-items: center;
 }
 
-#browser:not(:has([zen-expanded="true"])) #nav-bar {
-  padding-left: calc(var(--zen-toolbox-padding) 4px);
-}
 
 /* Other small tweaks */
 #nav-bar-customization-target {

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

@@ -8,7 +8,7 @@
   &:not([as-button='true']) {
     border-radius: var(--zen-button-border-radius);
     background: color-mix(in srgb, var(--zen-colors-border) 50%, transparent 50%);
-    padding: 6px;
+    padding: 5px;
     height: fit-content;
     gap: 3px;
 
@@ -82,7 +82,7 @@
 @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,
@@ -94,6 +94,7 @@
       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);

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

@@ -95,6 +95,11 @@ var gZenMarketplaceManager = {
     this.triggerThemeUpdate();
   },
 
+  _triggerBuildUpdateWithoutRebuild() {
+    this._doNotRebuildThemesList = true;
+    this.triggerThemeUpdate();
+  },
+
   async _buildThemesList() {
     if (!this.themesList) return;
     if (this._doNotRebuildThemesList) {
@@ -303,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');
@@ -376,6 +382,7 @@ var gZenMarketplaceManager = {
                   const value = event.target.value;
 
                   Services.prefs.setStringPref(property, value);
+                  this._triggerBuildUpdateWithoutRebuild();
 
                   if (value === '') {
                     browser.document.querySelector(':root').style.removeProperty(`--${sanitizedProperty}`);
@@ -441,6 +448,7 @@ var gZenLooksAndFeel = {
       }
     }, 500);
     this.setDarkThemeListener();
+    this.setCompactModeStyle();
   },
 
   onPreferColorSchemeChange(event) {
@@ -454,9 +462,9 @@ var gZenLooksAndFeel = {
   },
 
   setDarkThemeListener() {
-    this.chooser = document.getElementById('zen-dark-theme-styles-form');
+    const chooser = document.getElementById('zen-dark-theme-styles-form');
-    this.radios = [...this.chooser.querySelectorAll('input')];
+    const radios = [...chooser.querySelectorAll('input')];
-    for (let radio of this.radios) {
+    for (let radio of radios) {
       if (radio.value === 'amoled' && Services.prefs.getBoolPref('zen.theme.color-prefs.amoled')) {
         radio.checked = true;
       } else if (radio.value === 'colorful' && Services.prefs.getBoolPref('zen.theme.color-prefs.colorful')) {
@@ -488,6 +496,41 @@ var gZenLooksAndFeel = {
     }
   },
 
+  setCompactModeStyle() {
+    const chooser = document.getElementById('zen-compact-mode-styles-form');
+    const radios = [...chooser.querySelectorAll('input')];
+    for (let radio of radios) {
+      if (radio.value === 'left' && Services.prefs.getBoolPref('zen.view.compact.hide-tabbar')) {
+        radio.checked = true;
+      } else if (radio.value === 'top' && Services.prefs.getBoolPref('zen.view.compact.hide-toolbar')) {
+        radio.checked = true;
+      } else if (
+        radio.value === 'both' &&
+        !Services.prefs.getBoolPref('zen.view.compact.hide-tabbar') &&
+        !Services.prefs.getBoolPref('zen.view.compact.hide-toolbar')
+      ) {
+        radio.checked = true;
+      }
+      radio.addEventListener('change', (e) => {
+        let value = e.target.value;
+        switch (value) {
+          case 'left':
+            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:
+            Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true);
+            Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true);
+            break;
+        }
+      });
+    }
+  },
+
   _initializeTabbarExpandForm() {
     const form = document.getElementById('zen-expand-tabbar-strat');
     const radios = form.querySelectorAll('input[type=radio]');

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,10 +190,44 @@
       <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"/>

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

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

@@ -580,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;
@@ -892,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,
@@ -1063,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;
+}