feat: Restore top toolbar compact mode, b=no-bug, c=tabs, compact-mode, common

2025-10-15 14:26:12 +00:00 · 2025-10-07 01:06:16 +02:00
parent d0fb8aea03
commit 9f42abf789
16 changed files with 481 additions and 285 deletions
--- a/locales/en-US/browser/browser/preferences/zen-preferences.ftl
+++ b/locales/en-US/browser/browser/preferences/zen-preferences.ftl
@@ -8,9 +8,9 @@ zen-warning-language = Changing the default language could make it easier for We
 zen-vertical-tabs-layout-header = Browser Layout
 zen-vertical-tabs-layout-description = Choose the layout that suits you best

-zen-layout-single-toolbar = Single toolbar
-zen-layout-multiple-toolbar = Multiple toolbars
-zen-layout-collapsed-toolbar = Collapsed toolbar
+zen-layout-single-toolbar = Only Sidebar
+zen-layout-multiple-toolbar = Sidebar and Top Toolbar
+zen-layout-collapsed-toolbar = Collapsed Sidebar

 sync-currently-syncing-workspaces = Workspaces
 sync-engine-workspaces =
--- a/locales/en-US/browser/browser/zen-general.ftl
+++ b/locales/en-US/browser/browser/zen-general.ftl
@@ -50,6 +50,7 @@ zen-library-sidebar-mods =
    .label = Mods

 zen-toggle-compact-mode-button =
+    .label = Compact Mode
    .tooltiptext = Toggle Compact Mode

 # note: Do not translate the "<br/>" tags in the following string
--- a/locales/en-US/browser/browser/zen-vertical-tabs.ftl
+++ b/locales/en-US/browser/browser/zen-vertical-tabs.ftl
@@ -6,6 +6,14 @@ zen-toolbar-context-tabs-right =
 zen-toolbar-context-compact-mode-enable =
    .label = Enable compact mode
    .accesskey = D
+zen-toolbar-context-compact-mode-just-tabs =
+    .label = Hide sidebar
+zen-toolbar-context-compact-mode-just-toolbar =
+    .label = Hide toolbar
+zen-toolbar-context-compact-mode-hide-both =
+    .label = Hide both
+    .accesskey = H
+
 zen-toolbar-context-new-folder =
    .label = New Folder
    .accesskey = N
--- a/prefs/compact-mode.yaml
+++ b/prefs/compact-mode.yaml
@@ -2,6 +2,12 @@
 # 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/.

+- name: zen.view.compact.hide-tabbar
+  value: true
+
+- name: zen.view.compact.hide-toolbar
+  value: false
+
 - name: zen.view.compact.toolbar-flash-popup
  value: false

--- a/src/browser/base/content/zen-panels/site-data.inc
+++ b/src/browser/base/content/zen-panels/site-data.inc
@@ -17,7 +17,8 @@
      <hbox id="zen-site-data-header">
        <toolbarbutton id="zen-site-data-header-share"
                        data-l10n-id="zen-site-data-share"
-                        flex="1" />
+                        flex="1"
+                        closemenu="none" />
        <toolbarbutton id="zen-site-data-header-reader-mode"
                        command="View:ReaderView"
                        flex="1" />
--- a/src/browser/themes/shared/zen-icons/icons.css
+++ b/src/browser/themes/shared/zen-icons/icons.css
@@ -56,7 +56,7 @@
 #sidebar-button:-moz-locale-dir(ltr):not([positionend]),
 #sidebar-button:-moz-locale-dir(rtl)[positionend],
 #zen-toggle-compact-mode {
-  list-style-image: url('chrome://browser/skin/sidebars.svg') !important;
+  list-style-image: url('sidebar.svg') !important;
 }

 #downloads-button,
--- a/src/zen/common/ZenCustomizableUI.sys.mjs
+++ b/src/zen/common/ZenCustomizableUI.sys.mjs
@@ -70,7 +70,8 @@ export var ZenCustomizableUI = new (class {
          <toolbarbutton id="zen-toggle-compact-mode"
            class="toolbarbutton-1"
            command="cmd_toggleCompactModeIgnoreHover"
-            data-l10n-id="zen-toggle-compact-mode-button" />
+            data-l10n-id="zen-toggle-compact-mode-button"
+            removable="true" />
          <html:div id="zen-sidebar-top-buttons-separator" skipintoolbarset="true" overflows="false"></html:div>
        </hbox>
      </toolbar>
--- a/src/zen/common/ZenUIManager.mjs
+++ b/src/zen/common/ZenUIManager.mjs
@@ -1049,7 +1049,7 @@ var gZenVerticalTabsManager = {
        topButtons.prepend(windowButtons);
      }

-      if (!isSingleToolbar && isCompactMode) {
+      if ((!isSingleToolbar && isCompactMode) || !isSidebarExpanded) {
        navBar.prepend(topButtons);
      }

@@ -1091,6 +1091,7 @@ var gZenVerticalTabsManager = {
        appContentNavbarContaienr.append(windowButtons);
      }

+      gZenCompactModeManager.updateCompactModeContext(isSingleToolbar);
      this.recalculateURLBarHeight();

      // Always move the splitter next to the sidebar
--- a/src/zen/common/styles/zen-browser-ui.css
+++ b/src/zen/common/styles/zen-browser-ui.css
@@ -311,3 +311,10 @@
    opacity: 1;
  }
 }
+
+#zen-appcontent-navbar-wrapper #zen-sidebar-top-buttons {
+  max-width: fit-content;
+  :root[zen-right-side='true'] & {
+    order: 999;
+  }
+}
--- a/src/zen/common/styles/zen-theme.css
+++ b/src/zen/common/styles/zen-theme.css
@@ -210,6 +210,10 @@

  --zen-workspace-indicator-height: 46px;

+  &:not([zen-sidebar-expanded='true']) {
+    --zen-workspace-indicator-height: 38px;
+  }
+
  --toolbar-field-color: var(--toolbox-textcolor) !important;

  &[zen-private-window='true'] {
--- a/src/zen/compact-mode/ZenCompactMode.mjs
+++ b/src/zen/compact-mode/ZenCompactMode.mjs
@@ -174,12 +174,60 @@ var gZenCompactModeManager = {

  addContextMenu() {
    const fragment = window.MozXULElement.parseXULToFragment(`
-      <menuitem id="zen-context-menu-compact-mode-toggle" data-l10n-id="zen-toolbar-context-compact-mode-enable" type="checkbox" command="cmd_zenCompactModeToggle"/>
+      <menu id="zen-context-menu-compact-mode" data-l10n-id="zen-toolbar-context-compact-mode">
+        <menupopup>
+          <menuitem id="zen-context-menu-compact-mode-toggle" data-l10n-id="zen-toolbar-context-compact-mode-enable" type="checkbox" command="cmd_zenCompactModeToggle"/>
+          <menuseparator/>
+          <menuitem id="zen-context-menu-compact-mode-hide-sidebar" data-l10n-id="zen-toolbar-context-compact-mode-just-tabs" type="radio" />
+          <menuitem id="zen-context-menu-compact-mode-hide-toolbar" data-l10n-id="zen-toolbar-context-compact-mode-just-toolbar" type="radio" />
+          <menuitem id="zen-context-menu-compact-mode-hide-both" data-l10n-id="zen-toolbar-context-compact-mode-hide-both" type="radio" />
+        </menupopup>
+      </menu>
    `);
+
+    const idToAction = {
+      'zen-context-menu-compact-mode-hide-sidebar': this.hideSidebar.bind(this),
+      'zen-context-menu-compact-mode-hide-toolbar': this.hideToolbar.bind(this),
+      'zen-context-menu-compact-mode-hide-both': this.hideBoth.bind(this),
+    };
+
+    for (let menuitem of fragment.querySelectorAll('menuitem')) {
+      if (menuitem.id in idToAction) {
+        menuitem.addEventListener('command', idToAction[menuitem.id]);
+      }
+    }
+
    document.getElementById('viewToolbarsMenuSeparator').before(fragment);
    this.updateContextMenu();
  },

+  updateCompactModeContext(isSingleToolbar) {
+    const menuitem = document.getElementById('zen-context-menu-compact-mode-toggle');
+    const menu = document.getElementById('zen-context-menu-compact-mode');
+    if (isSingleToolbar) {
+      menu.setAttribute('hidden', 'true');
+      menu.before(menuitem);
+    } else {
+      menu.removeAttribute('hidden');
+      menu.querySelector('menupopup').prepend(menuitem);
+    }
+  },
+
+  hideSidebar() {
+    Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true);
+    Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', false);
+  },
+
+  hideToolbar() {
+    Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true);
+    Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', false);
+  },
+
+  hideBoth() {
+    Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true);
+    Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true);
+  },
+
  addEventListener(callback) {
    this._evenListeners.push(callback);
  },
@@ -247,6 +295,13 @@ var gZenCompactModeManager = {
    return sidebarWidth;
  },

+  get canHideSidebar() {
+    return (
+      Services.prefs.getBoolPref('zen.view.compact.hide-tabbar') ||
+      gZenVerticalTabsManager._hasSetSingleToolbar
+    );
+  },
+
  animateCompactMode() {
    // Get the splitter width before hiding it (we need to hide it before animating on right)
    document.documentElement.setAttribute('zen-compact-animating', 'true');
@@ -256,6 +311,7 @@ var gZenCompactModeManager = {
        .getElementById('zen-sidebar-splitter')
        .getBoundingClientRect().width;
      const isCompactMode = this.preference;
+      const canHideSidebar = this.canHideSidebar;
      let canAnimate =
        lazyCompactMode.COMPACT_MODE_CAN_ANIMATE_SIDEBAR && !this.isSidebarPotentiallyOpen();
      if (typeof this._wasInCompactMode !== 'undefined') {
@@ -286,7 +342,7 @@ var gZenCompactModeManager = {
          resolve();
          return;
        }
-        if (isCompactMode) {
+        if (canHideSidebar && isCompactMode) {
          if (document.documentElement.hasAttribute('zen-sidebar-expanded')) {
            sidebarWidth -= 0.5 * splitterWidth;
            if (elementSeparation < splitterWidth) {
@@ -346,7 +402,7 @@ var gZenCompactModeManager = {
                });
              });
            });
-        } else {
+        } else if (canHideSidebar && !isCompactMode) {
          document.getElementById('browser').style.overflow = 'clip';
          if (this.sidebarIsOnRight) {
            this.sidebar.style.marginRight = `-${sidebarWidth}px`;
@@ -382,6 +438,9 @@ var gZenCompactModeManager = {
                resolve();
              });
            });
+        } else {
+          this.sidebar.removeAttribute('animate'); // remove the attribute if we are not animating
+          document.documentElement.removeAttribute('zen-compact-animating');
        }
      });
    });
@@ -391,6 +450,15 @@ var gZenCompactModeManager = {
    document
      .getElementById('zen-context-menu-compact-mode-toggle')
      .setAttribute('checked', this.preference);
+
+    const hideTabBar = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar', false);
+    const hideToolbar = Services.prefs.getBoolPref('zen.view.compact.hide-toolbar', false);
+    const hideBoth = hideTabBar && hideToolbar;
+
+    const idName = 'zen-context-menu-compact-mode-hide-';
+    document.getElementById(idName + 'sidebar').setAttribute('checked', !hideBoth && hideTabBar);
+    document.getElementById(idName + 'toolbar').setAttribute('checked', !hideBoth && hideToolbar);
+    document.getElementById(idName + 'both').setAttribute('checked', hideBoth);
  },

  _removeOpenStateOnUnifiedExtensions() {
--- a/src/zen/compact-mode/sidebar.inc.css
+++ b/src/zen/compact-mode/sidebar.inc.css
@@ -0,0 +1,265 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+&:not([zen-compact-animating]) {
+  & #zen-sidebar-splitter {
+    display: none !important;
+  }
+
+  #zen-tabbox-wrapper {
+    /* Remove extra 1px of margine we have to add to the tabbox */
+    margin-left: var(--zen-element-separation) !important;
+    margin-right: var(--zen-element-separation) !important;
+  }
+
+  #zen-appcontent-wrapper {
+    & #tabbrowser-tabbox {
+      margin-left: 0 !important;
+    }
+  }
+
+  #zen-sidebar-splitter {
+    display: none !important;
+  }
+
+  #zen-sidebar-top-buttons-customization-target {
+    padding-inline-start: calc(
+      var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)
+    ) !important;
+  }
+
+  &[zen-window-buttons-reversed='true'] #zen-appcontent-navbar-wrapper #nav-bar {
+    margin-right: var(--zen-element-separation) !important;
+    margin-left: calc(var(--zen-element-separation) - 3px) !important;
+  }
+
+  #navigator-toolbox {
+    --zen-toolbox-max-width: 74px !important;
+    --zen-compact-float: var(--zen-element-separation);
+    :root[zen-no-padding='true'] & {
+      --zen-compact-float: 10px;
+      --zen-compact-mode-no-padding-radius-fix: 2px;
+    }
+
+    /* Initial padding for when we are animating */
+    padding: 0 0 0 var(--zen-toolbox-padding) !important;
+
+    &:not([animate='true']) {
+      position: fixed;
+      z-index: 10;
+      transition:
+        left 0.15s ease,
+        right 0.15s ease,
+        visibility 0.15s ease;
+      bottom: var(--zen-compact-float);
+      padding: 0 var(--zen-compact-float) !important;
+      :root[zen-single-toolbar='true'] & {
+        /* We add an extra offset since windows users have a border top
+             * in the window in order to compensate how windows renders the
+             * titlebar */
+        top: calc(var(--zen-compact-float) / 2 + var(--zen-sidebar-compact-top-offset, 0px));
+        height: calc(100% - var(--zen-compact-float));
+      }
+      :root:not([zen-single-toolbar='true']) & {
+        bottom: calc(var(--zen-compact-float) / 2);
+        height: calc(100% - var(--zen-toolbar-height));
+        @media -moz-pref('zen.view.compact.hide-toolbar') {
+          height: 100%;
+        }
+      }
+      & #zen-sidebar-top-buttons {
+        margin: 0 0 calc(var(--zen-toolbox-padding) / 2) 0;
+      }
+    }
+
+    &:not([zen-right-side='true']) #nav-bar {
+      margin-left: 0 !important;
+    }
+  }
+
+  &:not([zen-right-side='true']) #navigator-toolbox {
+    left: calc(-1 * var(--actual-zen-sidebar-width) + var(--zen-element-separation) / 2 + 1px);
+  }
+
+  /* When we have multiple toolbars and the top-toolbar is NOT being hidden,
+       * we need to adjust the top-padding of the toolbox to account for the
+       * extra toolbar height. */
+  @media not -moz-pref('zen.view.compact.hide-toolbar') {
+    &:not([zen-single-toolbar='true']) {
+      #navigator-toolbox:not([animate='true']) {
+        margin-top: var(--zen-toolbar-height) !important;
+      }
+    }
+  }
+
+  &:not([zen-sidebar-expanded='true']) .zen-essentials-container {
+    padding: 0;
+  }
+
+  &[zen-right-side='true'] {
+    & #navigator-toolbox:not([animate='true']) {
+      right: calc(-1 * var(--actual-zen-sidebar-width) + var(--zen-element-separation) / 2 + 1px);
+    }
+
+    & .browserSidebarContainer {
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+    }
+  }
+
+  #navigator-toolbox:not([animate='true']) #titlebar {
+    padding: var(--zen-toolbox-padding) !important;
+    :root:not([zen-sidebar-expanded='true']) & {
+      padding: var(--zen-toolbox-padding) 0 !important;
+      max-width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding) * 2);
+      width: var(--zen-sidebar-width);
+    }
+    position: relative;
+    min-width: var(--zen-toolbox-min-width);
+    transition: visibility 0.15s; /* Same as the toolbox */
+    visibility: hidden;
+
+    :root[zen-sidebar-expanded='true'] & {
+      width: calc(var(--zen-sidebar-width) + var(--zen-toolbox-padding));
+    }
+
+    & .zen-toolbar-background {
+      display: flex;
+    }
+  }
+
+  #navigator-toolbox[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)),
+  #navigator-toolbox[zen-user-show],
+  #navigator-toolbox[zen-has-empty-tab],
+  #navigator-toolbox[flash-popup],
+  #navigator-toolbox[has-popup-menu],
+  #navigator-toolbox[movingtab],
+  &[zen-renaming-tab='true'] #navigator-toolbox,
+  #navigator-toolbox[zen-compact-mode-active] {
+    &:not([animate='true']) {
+      --zen-compact-mode-func: linear(
+        0 0%,
+        0.002748 1%,
+        0.010544 2%,
+        0.022757 3%,
+        0.038804 4%,
+        0.058151 5%,
+        0.080308 6%,
+        0.104828 7.000000000000001%,
+        0.131301 8%,
+        0.159358 9%,
+        0.188662 10%,
+        0.21891 11%,
+        0.249828 12%,
+        0.281172 13%,
+        0.312724 14.000000000000002%,
+        0.344288 15%,
+        0.375693 16%,
+        0.40679 17%,
+        0.437447 18%,
+        0.467549 19%,
+        0.497 20%,
+        0.525718 21%,
+        0.553633 22%,
+        0.580688 23%,
+        0.60684 24%,
+        0.632052 25%,
+        0.656298 26%,
+        0.679562 27%,
+        0.701831 28.000000000000004%,
+        0.723104 28.999999999999996%,
+        0.743381 30%,
+        0.76267 31%,
+        0.780983 32%,
+        0.798335 33%,
+        0.814744 34%,
+        0.830233 35%,
+        0.844826 36%,
+        0.858549 37%,
+        0.87143 38%,
+        0.883498 39%,
+        0.894782 40%,
+        0.905314 41%,
+        0.915125 42%,
+        0.924247 43%,
+        0.93271 44%,
+        0.940547 45%,
+        0.947787 46%,
+        0.954463 47%,
+        0.960603 48%,
+        0.966239 49%,
+        0.971397 50%,
+        0.976106 51%,
+        0.980394 52%,
+        0.984286 53%,
+        0.987808 54%,
+        0.990984 55.00000000000001%,
+        0.993837 56.00000000000001%,
+        0.99639 56.99999999999999%,
+        0.998664 57.99999999999999%,
+        1.000679 59%,
+        1.002456 60%,
+        1.004011 61%,
+        1.005363 62%,
+        1.006528 63%,
+        1.007522 64%,
+        1.008359 65%,
+        1.009054 66%,
+        1.009618 67%,
+        1.010065 68%,
+        1.010405 69%,
+        1.010649 70%,
+        1.010808 71%,
+        1.01089 72%,
+        1.010904 73%,
+        1.010857 74%,
+        1.010757 75%,
+        1.010611 76%,
+        1.010425 77%,
+        1.010205 78%,
+        1.009955 79%,
+        1.009681 80%,
+        1.009387 81%,
+        1.009077 82%,
+        1.008754 83%,
+        1.008422 84%,
+        1.008083 85%,
+        1.00774 86%,
+        1.007396 87%,
+        1.007052 88%,
+        1.00671 89%,
+        1.006372 90%,
+        1.00604 91%,
+        1.005713 92%,
+        1.005394 93%,
+        1.005083 94%,
+        1.004782 95%,
+        1.004489 96%,
+        1.004207 97%,
+        1.003935 98%,
+        1.003674 99%,
+        1.003423 100%
+      );
+      --zen-compact-mode-time: 0.25s;
+      transition:
+        left var(--zen-compact-mode-time) var(--zen-compact-mode-func),
+        right var(--zen-compact-mode-time) var(--zen-compact-mode-func);
+
+      :root:not([supress-primary-adjustment='true']) & {
+        & #titlebar {
+          transition: none;
+          visibility: visible;
+        }
+
+        left: calc(var(--zen-compact-float) / -2);
+        :root[zen-right-side='true'] & {
+          right: calc(var(--zen-compact-float) / -2);
+          left: auto;
+        }
+      }
+    }
+  }
+}
--- a/src/zen/compact-mode/toolbar.inc.css
+++ b/src/zen/compact-mode/toolbar.inc.css
@@ -0,0 +1,84 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+&:not([zen-single-toolbar='true']) {
+  & #navigator-toolbox {
+    --zen-toolbox-top-align: var(--zen-element-separation);
+  }
+
+  & #titlebar,
+  & #zen-appcontent-wrapper {
+    margin-top: var(--zen-element-separation) !important;
+  }
+
+  & #zen-appcontent-wrapper {
+    z-index: 3 !important;
+  }
+
+  & #zen-appcontent-navbar-wrapper {
+    & .zen-toolbar-background {
+      display: flex;
+    }
+    --zen-compact-toolbar-offset: 5px;
+    position: absolute;
+    top: calc(-1 * var(--zen-toolbar-height) + 1px);
+    left: 0;
+    z-index: 20;
+    transition: all 0.15s ease;
+    width: 100%;
+
+    max-height: var(--zen-toolbar-height);
+    overflow: hidden;
+
+    & #urlbar:not([breakout-extend='true']) {
+      opacity: 0 !important;
+    }
+
+    & #zen-appcontent-navbar-container {
+      visibility: hidden;
+
+      box-shadow: var(--zen-big-shadow);
+      border-bottom-left-radius: var(--zen-border-radius);
+      border-bottom-right-radius: var(--zen-border-radius);
+      :root:not([sizemode='maximized']) & {
+        border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
+        border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
+      }
+      transition: all 0.15s ease;
+      width: 100%;
+    }
+  }
+
+  &
+    #zen-appcontent-navbar-wrapper[zen-has-hover]:not(
+      :has(#urlbar[zen-floating-urlbar='true']:hover)
+    ),
+  & #zen-appcontent-navbar-wrapper[has-popup-menu],
+  &
+    #zen-appcontent-navbar-wrapper:has(
+      *:is([panelopen='true'], [open='true'], #urlbar:focus-within, [breakout-extend='true']):not(
+          #urlbar[zen-floating-urlbar='true']
+        ):not(.zen-compact-mode-ignore)
+    ) {
+    & #zen-appcontent-navbar-container {
+      visibility: visible !important;
+    }
+    border-top-width: 0px;
+
+    top: -1px;
+    overflow: initial;
+    max-height: unset;
+
+    & #urlbar {
+      opacity: 1 !important;
+    }
+
+    & #urlbar[breakout-extend='true']:not([zen-floating-urlbar='true']) {
+      top: 2px !important;
+      opacity: 1;
+    }
+  }
+}
--- a/src/zen/compact-mode/zen-compact-mode.css
+++ b/src/zen/compact-mode/zen-compact-mode.css
@@ -20,7 +20,7 @@

  &::before,
  &::after {
-    outline: 1px solid rgba(255, 255, 255, 0.15);
+    outline: 1px solid rgba(255, 255, 255, .15);
    outline-offset: -1px;
    background-attachment: fixed !important;
    background-size: 100vw 100vh !important;
@@ -29,285 +29,41 @@
  &,
  &::before,
  &::after {
-    border-radius: calc(
-      var(--zen-native-inner-radius) - var(--zen-compact-mode-no-padding-radius-fix, 0px)
-    );
+    border-radius: calc(var(--zen-native-inner-radius) - var(--zen-compact-mode-no-padding-radius-fix, 0px));
  }
 }

 :root[zen-compact-mode='true']:not([customizing]):not([inDOMFullscreen='true']) {
+
 %include ../tabs/zen-tabs/vertical-tabs-topbuttons-fix.css

  & #urlbar {
    visibility: visible;
  }

-  &:not([zen-compact-animating]) {
-    & #zen-sidebar-splitter {
-      display: none !important;
-    }
-
-    #zen-tabbox-wrapper {
-      /* Remove extra 1px of margine we have to add to the tabbox */
-      margin-left: var(--zen-element-separation) !important;
-      margin-right: var(--zen-element-separation) !important;
-    }
-
-    #zen-appcontent-wrapper {
-      & #tabbrowser-tabbox {
-        margin-left: 0 !important;
-      }
-    }
-
-    #zen-sidebar-splitter {
-      display: none !important;
-    }
-
-    #zen-sidebar-top-buttons-customization-target {
-      padding-inline-start: calc(
-        var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)
-      ) !important;
-    }
-
-    &:not([zen-window-buttons-reversed='true']) #zen-appcontent-navbar-wrapper #nav-bar {
-      margin-left: var(--zen-element-separation) !important;
-    }
-
-    &[zen-window-buttons-reversed='true'] #zen-appcontent-navbar-wrapper #nav-bar {
-      margin-right: var(--zen-element-separation) !important;
-      margin-left: calc(var(--zen-element-separation) - 3px) !important;
-    }
-
-    #navigator-toolbox {
-      --zen-toolbox-max-width: 74px !important;
-      --zen-compact-float: var(--zen-element-separation);
-      :root[zen-no-padding='true'] & {
-        --zen-compact-float: 10px;
-        --zen-compact-mode-no-padding-radius-fix: 2px;
-      }
-
-      /* Initial padding for when we are animating */
-      padding: 0 0 0 var(--zen-toolbox-padding) !important;
-
-      &:not([animate='true']) {
-        position: fixed;
-        z-index: 10;
-        transition:
-          left 0.15s ease,
-          right 0.15s ease,
-          visibility 0.15s ease;
-        bottom: var(--zen-compact-float);
-        padding: 0 var(--zen-compact-float) !important;
-
-        :root[zen-single-toolbar='true'] & {
-          /* We add an extra offset since windows users have a border top
-            * in the window in order to compensate how windows renders the
-            * titlebar */
-          top: calc(var(--zen-compact-float) / 2 + var(--zen-sidebar-compact-top-offset, 0px));
-          height: calc(100% - var(--zen-compact-float));
-        }
-
-        :root:not([zen-single-toolbar='true']) & {
-          bottom: calc(var(--zen-compact-float) / 2);
-          height: calc(100% - var(--zen-toolbar-height));
-        }
-
-        & #zen-sidebar-top-buttons {
-          margin: 0 0 calc(var(--zen-toolbox-padding) / 2) 0;
-        }
-      }
-
-      &:not([zen-right-side='true']) #nav-bar {
-        margin-left: 0 !important;
-      }
-    }
-
-    &:not([zen-right-side='true']) #navigator-toolbox {
-      left: calc(-1 * var(--actual-zen-sidebar-width) + var(--zen-element-separation) / 2 + 1px);
-    }
-
-    &:not([zen-sidebar-expanded='true']) .zen-essentials-container {
-      padding: 0;
-    }
-
-    &[zen-right-side='true'] {
-      & #navigator-toolbox:not([animate='true']) {
-        right: calc(-1 * var(--actual-zen-sidebar-width) + var(--zen-element-separation) / 2 + 1px);
-      }
-
-      & .browserSidebarContainer {
-        margin-left: 0 !important;
-        margin-right: 0 !important;
-      }
-    }
-
-    #navigator-toolbox:not([animate='true']) #titlebar {
-      padding: var(--zen-toolbox-padding) !important;
-      :root:not([zen-sidebar-expanded='true']) & {
-        padding: var(--zen-toolbox-padding) 0 !important;
-        max-width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding) * 2);
-        width: var(--zen-sidebar-width);
-      }
-      position: relative;
-      min-width: var(--zen-toolbox-min-width);
-      transition: visibility 0.15s; /* Same as the toolbox */
-      visibility: hidden;
-
-      :root[zen-sidebar-expanded='true'] & {
-        width: calc(var(--zen-sidebar-width) + var(--zen-toolbox-padding));
-      }
-
-      & .zen-toolbar-background {
-        display: flex;
-      }
-    }
-
-    #navigator-toolbox[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)),
-    #navigator-toolbox[zen-user-show],
-    #navigator-toolbox[zen-has-empty-tab],
-    #navigator-toolbox[flash-popup],
-    #navigator-toolbox[has-popup-menu],
-    #navigator-toolbox[movingtab],
-    &[zen-renaming-tab='true'] #navigator-toolbox,
-    #navigator-toolbox[zen-compact-mode-active] {
-      &:not([animate='true']) {
-        --zen-compact-mode-func: linear(
-          0 0%,
-          0.002748 1%,
-          0.010544 2%,
-          0.022757 3%,
-          0.038804 4%,
-          0.058151 5%,
-          0.080308 6%,
-          0.104828 7.000000000000001%,
-          0.131301 8%,
-          0.159358 9%,
-          0.188662 10%,
-          0.21891 11%,
-          0.249828 12%,
-          0.281172 13%,
-          0.312724 14.000000000000002%,
-          0.344288 15%,
-          0.375693 16%,
-          0.40679 17%,
-          0.437447 18%,
-          0.467549 19%,
-          0.497 20%,
-          0.525718 21%,
-          0.553633 22%,
-          0.580688 23%,
-          0.60684 24%,
-          0.632052 25%,
-          0.656298 26%,
-          0.679562 27%,
-          0.701831 28.000000000000004%,
-          0.723104 28.999999999999996%,
-          0.743381 30%,
-          0.76267 31%,
-          0.780983 32%,
-          0.798335 33%,
-          0.814744 34%,
-          0.830233 35%,
-          0.844826 36%,
-          0.858549 37%,
-          0.87143 38%,
-          0.883498 39%,
-          0.894782 40%,
-          0.905314 41%,
-          0.915125 42%,
-          0.924247 43%,
-          0.93271 44%,
-          0.940547 45%,
-          0.947787 46%,
-          0.954463 47%,
-          0.960603 48%,
-          0.966239 49%,
-          0.971397 50%,
-          0.976106 51%,
-          0.980394 52%,
-          0.984286 53%,
-          0.987808 54%,
-          0.990984 55.00000000000001%,
-          0.993837 56.00000000000001%,
-          0.99639 56.99999999999999%,
-          0.998664 57.99999999999999%,
-          1.000679 59%,
-          1.002456 60%,
-          1.004011 61%,
-          1.005363 62%,
-          1.006528 63%,
-          1.007522 64%,
-          1.008359 65%,
-          1.009054 66%,
-          1.009618 67%,
-          1.010065 68%,
-          1.010405 69%,
-          1.010649 70%,
-          1.010808 71%,
-          1.01089 72%,
-          1.010904 73%,
-          1.010857 74%,
-          1.010757 75%,
-          1.010611 76%,
-          1.010425 77%,
-          1.010205 78%,
-          1.009955 79%,
-          1.009681 80%,
-          1.009387 81%,
-          1.009077 82%,
-          1.008754 83%,
-          1.008422 84%,
-          1.008083 85%,
-          1.00774 86%,
-          1.007396 87%,
-          1.007052 88%,
-          1.00671 89%,
-          1.006372 90%,
-          1.00604 91%,
-          1.005713 92%,
-          1.005394 93%,
-          1.005083 94%,
-          1.004782 95%,
-          1.004489 96%,
-          1.004207 97%,
-          1.003935 98%,
-          1.003674 99%,
-          1.003423 100%
-        );
-        --zen-compact-mode-time: 0.25s;
-        transition:
-          left var(--zen-compact-mode-time) var(--zen-compact-mode-func),
-          right var(--zen-compact-mode-time) var(--zen-compact-mode-func);
-
-        :root:not([supress-primary-adjustment='true']) & {
-          & #titlebar {
-            transition: none;
-            visibility: visible;
-          }
-
-          left: calc(var(--zen-compact-float) / -2);
-          :root[zen-right-side='true'] & {
-            right: calc(var(--zen-compact-float) / -2);
-            left: auto;
-          }
-        }
-      }
-    }
+  @media -moz-pref('zen.view.compact.hide-tabbar') or -moz-pref('zen.view.use-single-toolbar') {
+%include sidebar.inc.css
  }

-  &:not([zen-single-toolbar='true']) #zen-sidebar-top-buttons {
-    max-width: fit-content;
-    :root[zen-right-side='true'] & {
-      order: 999;
-    }
+  @media -moz-pref('zen.view.compact.hide-toolbar') {
+%include toolbar.inc.css
  }
 }

 /* Fix for https://github.com/zen-browser/desktop/issues/7615 */
 :root[zen-compact-mode='true']:not([customizing])[inDOMFullscreen='true'] {
-  &:not([zen-compact-animating]) {
-    #navigator-toolbox {
-      opacity: 0;
+  @media -moz-pref('zen.view.compact.hide-tabbar') or -moz-pref('zen.view.use-single-toolbar') {
+    &:not([zen-compact-animating]) {
+      #navigator-toolbox {
+        opacity: 0;
+      }
+    }
+  }
+  @media -moz-pref('zen.view.compact.hide-toolbar') {
+    &:not([zen-single-toolbar='true']) {
+      & #zen-appcontent-navbar-wrapper {
+        opacity: 0;
+      }
    }
  }
 }
--- a/src/zen/tabs/zen-tabs/vertical-tabs.css
+++ b/src/zen/tabs/zen-tabs/vertical-tabs.css
@@ -124,10 +124,6 @@
  }
 }

-:root:not([zen-single-toolbar='true']) #tabbrowser-tabs {
-  margin-top: -2px;
-}
-
 /* ==========================================================================
   Pinned Tabs Separator
   ========================================================================== */
@@ -708,7 +704,6 @@

  & #titlebar {
    display: grid;
-    grid-template-rows: auto 1fr;
    overflow: clip;
  }

@@ -975,14 +970,8 @@
    height: 100%;
    align-items: center;

-    :root:not([zen-sidebar-expanded='true']):not([zen-right-side='true']) {
-      padding-inline-start: var(--zen-toolbox-padding);
-    }
    #nav-bar & {
-      padding-inline-start: var(--toolbarbutton-outer-padding);
-    }
-    :root[zen-right-side='true']:not([zen-window-buttons-reversed='true']) {
-      padding-inline-end: var(--zen-toolbox-padding);
+      padding-inline-end: var(--toolbarbutton-outer-padding);
    }

    :root:not([zen-sidebar-expanded='true']) & toolbarspring {
--- a/src/zen/urlbar/ZenSiteDataPanel.sys.mjs
+++ b/src/zen/urlbar/ZenSiteDataPanel.sys.mjs
@@ -2,6 +2,8 @@
 * 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/. */

+import { AppConstants } from 'resource://gre/modules/AppConstants.sys.mjs';
+
 export class nsZenSiteDataPanel {
  #iconMap = {
    install: 'extension',
@@ -373,6 +375,9 @@ export class nsZenSiteDataPanel {
        } else {
          this.window.gZenCommonActions.copyCurrentURLToClipboard();
        }
+        if (AppConstants.platform !== 'macosx') {
+          this.panel.hidePopup();
+        }
      }
    }
  }