refactor: update styling and structure of Zen UI components; remove deprecated toolbar styles and adjust margins for better layout

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

@@ -118,12 +118,10 @@ pref('zen.glance.activation-method', 'ctrl'); // ctrl, alt, shift, none, hold
 #endif
 
 pref('zen.view.sidebar-height-throttle', 200); // in ms
-pref('zen.view.sidebar-expanded', true);
-pref('zen.view.sidebar-expanded.on-hover', false);
 pref('zen.view.sidebar-expanded.max-width', 400);
 
 pref('zen.view.show-bottom-border', false);
-pref('zen.view.sidebar-collapsed.hide-mute-button', true);
+pref('zen.view.use-single-toolbar', true);
 
 pref('zen.tabs.dim-pending', true);
 pref('zen.tabs.newtab-on-middle-click', true);

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

@@ -9,7 +9,7 @@ export var ZenCustomizableUI = new (class {
       'zen-sidebar-top-buttons',
       {
         type: this.TYPE_TOOLBAR,
-        defaultPlacements: ['preferences-button', 'zen-expand-sidebar-button', 'zen-sidepanel-button'],
+        defaultPlacements: ['zen-sidepanel-button'],
         defaultCollapsed: null,
       },
       true
@@ -45,7 +45,6 @@ export var ZenCustomizableUI = new (class {
         customizationtarget="zen-sidebar-top-buttons-customization-target"
         mode="icons">
         <hbox id="zen-sidebar-top-buttons-customization-target" class="customization-target" flex="1">
-          <toolbarbutton removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" data-l10n-id="sidebar-zen-expand" cui-areatype="toolbar" oncommand="gZenVerticalTabsManager.toggleExpand();"></toolbarbutton>
           <toolbarbutton removable="true" class="toolbarbutton-1 zen-sidebar-action-button zen-compact-mode-ignore" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
         </hbox>
       </toolbar>

src/browser/base/content/ZenUIManager.mjs

@@ -118,10 +118,8 @@ var gZenUIManager = {
 var gZenVerticalTabsManager = {
   init() {
     var updateEvent = this._updateEvent.bind(this);
-    Services.prefs.addObserver('zen.view.sidebar-expanded', updateEvent);
     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();
@@ -152,31 +150,6 @@ var gZenVerticalTabsManager = {
     return this._navigatorToolbox;
   },
 
-  _updateOnHoverVerticalTabs() {
-    const onHover = Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover');
-    const expanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded');
-    const sidebar = this.navigatorToolbox;
-
-    if (onHover) {
-      // if the sidebar is not expanded, and hover detection is enabled, show the sidebar
-      sidebar.removeAttribute('zen-expanded');
-      sidebar.setAttribute('zen-user-hover', 'true');
-
-      sidebar.removeAttribute('zen-has-hover');
-    } 
-    else if (expanded) {
-      // if the sidebar is expanded, close, and remove hover detection
-      sidebar.setAttribute('zen-expanded', 'true');
-      sidebar.removeAttribute('zen-user-hover');
-      sidebar.removeAttribute('zen-has-hover');
-    } else {
-      // if the sidebar is not expanded, and hover detection is disabled, hide the sidebar
-      sidebar.removeAttribute('zen-expanded');
-      sidebar.removeAttribute('zen-user-show');
-      sidebar.removeAttribute('zen-user-hover');
-    }
-  },
-
   initRightSideOrderContextMenu() {
     const kConfigKey = 'zen.tabs.vertical.right-side';
     const fragment = window.MozXULElement.parseXULToFragment(`
@@ -190,13 +163,14 @@ var gZenVerticalTabsManager = {
     document.getElementById('viewToolbarsMenuSeparator').before(fragment);
   },
 
+  get isWindowsStyledButtons() {
+    return !(window.AppConstants.platform === 'macosx'|| window.matchMedia('(-moz-gtk-csd-reversed-placement)').matches);
+  },
+
   _updateEvent() {
     this._updateMaxWidth();
     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');
-    const sidebarExpanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded');
 
     if (Services.prefs.getBoolPref('zen.tabs.vertical.right-side')) {
       this.navigatorToolbox.setAttribute('zen-right-side', 'true');
@@ -206,10 +180,8 @@ var gZenVerticalTabsManager = {
 
     // Check if the sidebar is in hover mode
     if (
-      sidebarExpanded &&
       !this.navigatorToolbox.hasAttribute('zen-right-side') &&
-      !Services.prefs.getBoolPref('zen.view.compact') &&
+      !Services.prefs.getBoolPref('zen.view.compact')
-      !Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover')
     ) {
       this.navigatorToolbox.prepend(topButtons);
     //  browser.prepend(this.navigatorToolbox);
@@ -218,28 +190,39 @@ var gZenVerticalTabsManager = {
     //  tabboxWrapper.prepend(this.navigatorToolbox);
     }
 
+    if (Services.prefs.getBoolPref('zen.view.use-single-toolbar')) {
+      if (!topButtons.contains(document.getElementById('nav-bar'))) {
+        topButtons.after(document.getElementById('nav-bar'));
+      }
+      let elements = document.querySelectorAll('#nav-bar-customization-target > *:is(toolbarbutton, #stop-reload-button)');
+      elements = Array.from(elements);
+      const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
+      for (const button of elements) {
+        buttonsTarget.append(button);
+      }
+      topButtons.appendChild(document.getElementById('PanelUI-button'));
+      if (this.isWindowsStyledButtons) {
+        document.getElementById('zen-appcontent-navbar-container').append(
+          document.querySelector('#nav-bar > .titlebar-buttonbox-container')
+        );
+      }
+    }
+    
     // Always move the splitter next to the sidebar
     this.navigatorToolbox.after(document.getElementById('zen-sidebar-splitter'));
-
-    this._updateOnHoverVerticalTabs();
   },
 
   _updateMaxWidth() {
     const isCompactMode = Services.prefs.getBoolPref('zen.view.compact');
-    const expanded = this.expanded;
     const maxWidth = Services.prefs.getIntPref('zen.view.sidebar-expanded.max-width');
     const toolbox = document.getElementById('navigator-toolbox');
-    if (expanded && !isCompactMode) {
+    if (!isCompactMode) {
       toolbox.style.maxWidth = `${maxWidth}px`;
     } else {
       toolbox.style.removeProperty('maxWidth');
     }
   },
 
-  get expanded() {
-    return Services.prefs.getBoolPref('zen.view.sidebar-expanded');
-  },
-
   get expandButton() {
     if (this._expandButton) {
       return this._expandButton;
@@ -248,30 +231,6 @@ var gZenVerticalTabsManager = {
     return this._expandButton;
   },
 
-  toggleExpand() {
-    const pausedForExpand = this._hoverPausedForExpand;
-    const onHover = Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover');
-    const expanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded');
-
-  
-    if (onHover && !expanded) {
-      // Expand sidebar and disable hover detection
-      Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false);
-      this._hoverPausedForExpand = true;
-      Services.prefs.setBoolPref('zen.view.sidebar-expanded', true);
-    } else if (pausedForExpand && expanded) {
-      // Re-enable hover detection when closing
-      this._hoverPausedForExpand = false;
-      Services.prefs.setBoolPref('zen.view.sidebar-expanded', false);
-      Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', true); // Re-enable hover detection when closing
-    }
-    else {
-      // Toggle sidebar
-      Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false);
-      Services.prefs.setBoolPref('zen.view.sidebar-expanded', !expanded);
-    }
-  },
-
   toggleTabsOnRight() {
     const newVal = !Services.prefs.getBoolPref('zen.tabs.vertical.right-side');
     Services.prefs.setBoolPref('zen.tabs.vertical.right-side', newVal);

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

@@ -20,7 +20,6 @@
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-profile-dialog.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-sidebar-panels.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-popup.css" />
-<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-cool-toolbar.css" />
 
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-compact-mode.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/skin/zen-icons/icons.css" />

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

@@ -43,7 +43,6 @@
         content/browser/zen-styles/zen-popup.css                (content/zen-styles/zen-popup.css)
         content/browser/zen-styles/zen-sidebar-panels.css       (content/zen-styles/zen-sidebar-panels.css)
         content/browser/zen-styles/zen-gradient-generator.css   (content/zen-styles/zen-gradient-generator.css)
-        content/browser/zen-styles/zen-cool-toolbar.css         (content/zen-styles/zen-cool-toolbar.css)
         
         content/browser/zen-styles/zen-panels/bookmarks.css     (content/zen-styles/zen-panels/bookmarks.css)
         content/browser/zen-styles/zen-panels/extensions.css    (content/zen-styles/zen-panels/extensions.css)

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

@@ -4,9 +4,17 @@
     border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
     position: relative;
 
-    &:not([zen-split="true"]) {
+    box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
-      border-bottom-left-radius: 0;
+    border-radius: var(--zen-border-radius);
-      border-bottom-right-radius: 0;
+    overflow: hidden;
+    
+    #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+      margin-right: 0;
+      margin-left: var(--zen-element-separation);
+    }
+
+    :root[zen-no-padding='true'] &:not([zen-split="true"]) {
+      border-radius: 0 !important;
     }
   }
 }

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

@@ -77,6 +77,19 @@
   overflow-x: hidden;
 }
 
+:root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {
+  & #zen-appcontent-wrapper {
+    margin: var(--zen-element-separation);
+    margin-left: 0;
+    margin-top: 0;
+  }
+
+  #browser:has(#navigator-toolbox[zen-right-side='true']) & #zen-appcontent-wrapper {
+    margin-right: 0;
+    margin-left: var(--zen-element-separation);
+  }
+}
+
 #tabbrowser-tabbox {
   display: flex;
   flex-direction: row;

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

@@ -1,45 +0,0 @@
-
-:root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']):not(:has(#tabbrowser-tabpanels[zen-split-view='true'])) {
-  & #zen-appcontent-wrapper {
-    box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
-    border-radius: var(--zen-border-radius);
-    padding: 0;
-    overflow: hidden;
-    margin: var(--zen-element-separation);
-    margin-left: 0;
-    
-    #browser:has(#navigator-toolbox[zen-right-side='true']) & {
-      margin-right: 0;
-      margin-left: var(--zen-element-separation);
-    }
-
-    & #zen-appcontent-navbar-container {
-      background: color-mix(in srgb, var(--zen-colors-tertiary) 90%, transparent 10%);
-    }
-
-    :root[zen-no-padding='true'] & {
-      border-radius: 0 !important;
-    }
-  }
-
-  & #zen-appcontent-navbar-container {
-    padding-left: 5px;
-  }
-
-  @media (-moz-platform: macos) {
-    & #zen-appcontent-navbar-container {
-      padding-right: 5px;
-    }
-  }
-
-  & #zen-appcontent-navbar-container {
-    border-bottom: 1px solid light-dark(rgba(0,0,0,.04), rgba(255,255,255,.04));
-  }
-
-  @media (-moz-bool-pref: 'zen.view.compact') {
-    @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
-      @media not (-moz-platform: macos) {
-      }
-    }
-  }
-}

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

@@ -4,11 +4,11 @@
   visibility: inherit;
 }
 
-#zen-appcontent-wrapper {
+#tabbrowser-tabpanels {
   transition: transform 0.1s ease-in-out;
 }
 
-#zen-appcontent-wrapper:has(.zen-glance-background) {
+#tabbrowser-tabpanels:has(.zen-glance-background) {
   transform: scale(0.98);
   backdrop-filter: blur(5px);
 

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

@@ -51,6 +51,19 @@
     order: 0 !important;
 
     display: flex;
+
+    & toolbarspring { display: none; }
+  }
+
+  @media (-moz-bool-pref: 'zen.view.use-single-toolbar') { 
+    & #zen-appcontent-navbar-container > .titlebar-buttonbox-container {
+      margin-left: auto;
+      width: fit-content;
+    }
+
+    & #urlbar-container {
+      width: -moz-available !important;
+    }
   }
 
   .titlebar-spacer[type='pre-tabs'],
@@ -219,15 +232,7 @@
   }
 
   /* Mark: toolbox as expanded */
-  #navigator-toolbox:is(
+  #navigator-toolbox {
-      #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],
-      #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(.zen-compact-mode-ignore)),
-      #navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])
-    ) {
     --zen-toolbox-min-width: fit-content;
     --tab-icon-end-margin: 8.5px;
     padding: var(--zen-toolbox-padding);
@@ -242,11 +247,16 @@
       margin-inline: var(--tab-block-margin);
     }
 
-    & #zen-sidebar-top-buttons {
+    & #zen-sidebar-top-buttons,
+    & #nav-bar {
       padding: var(--zen-element-separation);
       margin-top: var(--zen-element-separation);
     }
 
+    & #nav-bar {
+      margin-top: 0;
+    }
+
     & #zen-workspaces-button[as-button='true'] {
       width: calc(100% - 10px) !important;
     }
@@ -378,198 +388,6 @@
     }
   }
 
-  /* Mark: toolbox as collapsed */
-  #navigator-toolbox:not(
-      #navigator-toolbox:is(
-          #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],
-          #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(.zen-compact-mode-ignore)),
-          #navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])
-        )
-    ) {
-    --tab-min-width: 36px !important;
-
-    /* Important: When changin this value, make sure expand on hover doesn't break! */
-    --zen-toolbox-padding: calc(var(--zen-element-separation) / 2 + 1px);
-    --zen-toolbox-max-width: calc(var(--tab-min-width) + var(--zen-toolbox-padding) * 2);
-    max-width: var(--zen-toolbox-max-width) !important;
-    min-width: var(--zen-toolbox-max-width) !important;
-
-    --zen-tabbar-offset: 1px; /* Fix the tabbar offset, because there's a shadow */
-    &[zen-right-side='true'] {
-      margin-left: var(--zen-tabbar-offset);
-    }
-
-    &:not([zen-right-side='true']) {
-      margin-right: var(--zen-tabbar-offset);
-    }
-
-    & #zen-current-workspace-indicator-name {
-      display: none;
-    }
-
-    & #TabsToolbar {
-      padding-top: var(--zen-element-separation);
-    }
-
-    & #zen-current-workspace-indicator {
-      padding-left: 0;
-      padding-right: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      opacity: .4;
-    }
-
-    & #zen-essentials-container {
-      justify-content: center;
-    }
-
-    & #vertical-tabs-newtab-button {
-      padding: 0 !important;
-      background: transparent !important;
-    }
-
-    :root[customizing] & #zen-sidebar-icons-wrapper {
-      min-width: unset !important;
-    }
-
-    & #zen-sidebar-icons-wrapper {
-      display: flex;
-      flex-direction: column;
-      padding-top: var(--zen-element-separation);
-      align-items: center;
-    }
-
-    :root:has(&) #zen-sidebar-splitter {
-      display: none !important;
-    }
-
-    & #tabbrowser-arrowscrollbox-periphery {
-      & > toolbarbutton {
-        margin: 0 auto !important;
-        padding: 0 !important;
-      }
-
-      &::before {
-        width: 90% !important;
-      }
-    }
-
-    & #EssentialsToolbar {
-      display: none !important;
-    }
-
-    & #essentials-accordion-header {
-      display: none !important;
-    }
-
-    & #vertical-pinned-tabs-container:has(tab:not([hidden])) {
-      position: relative;
-
-      & .tabbrowser-tab {
-        max-width: var(--tab-min-width);
-      }
-    }
-
-    & #TabsToolbar-customization-target {
-      padding-bottom: var(--zen-toolbox-padding);
-
-      &::after {
-        bottom: -1px !important;
-      }
-    }
-
-    & #tabbrowser-tabs {
-      margin-top: -2px;
-
-      & .tabbrowser-tab {
-        margin: 0 auto;
-
-        & .tab-background {
-          margin-inline: auto !important;
-
-          &:is([selected], [multiselected]) {
-            box-shadow: 0 0 1px 1px rgba(0,0,0,.1);
-            
-            @media not (prefers-color-scheme: dark) {
-              box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.12) !important;
-            }
-          }
-        }
-
-        & .tab-reset-button {
-          display: none !important;
-        }
-
-        & .tab-content {
-          display: flex;
-          align-content: center;
-          justify-content: center;
-          padding: 0 !important;
-
-          & .tab-label-container {
-            display: none !important;
-          }
-
-          & .tab-icon-image,
-          & .tab-icon-pending {
-            margin-inline-end: 0 !important;
-          }
-
-          /* Hide glances */
-          & .tabbrowser-tab {
-            display: none !important;
-          }
-        }
-      }
-
-      @media (-moz-bool-pref: 'zen.view.sidebar-collapsed.hide-mute-button') {
-        & .tab-icon-overlay:is([soundplaying], [muted]):not([selected]) {
-          display: none !important;
-
-          :is(
-              :root[uidensity='compact'],
-              #tabbrowser-tabs[secondarytext-unsupported],
-              :root:not([uidensity='compact']) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:hover
-            )
-            .tab-icon-stack[indicator-replaces-favicon]
-            > :not(&),
-          :root:not([uidensity='compact'])
-            #tabbrowser-tabs:not([secondarytext-unsupported])
-            .tabbrowser-tab:not(:hover)
-            &[indicator-replaces-favicon] {
-            opacity: 1 !important;
-          }
-        }
-      }
-
-      & .tab-throbber,
-      & .tab-icon-pending,
-      & .tab-icon-image,
-      & .tab-sharing-icon-overlay,
-      & .tab-icon-overlay {
-        margin-inline-end: 0 !important;
-      }
-    }
-
-    & #zen-workspaces-button {
-      flex-direction: column;
-
-      &:not([as-button='true']) {
-        & toolbarbutton {
-          &[active='true']::after {
-            bottom: 50% !important;
-            transform: translateY(50%) !important;
-          }
-        }
-      }
-    }
-  }
-
   /* Mark: Separator styling */
   #zen-sidebar-splitter {
     opacity: 0;
@@ -577,91 +395,6 @@
     height: 100%;
   }
 
-  /* Mark: Expand on hover */
-  @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;
-    }
-
-    #navigator-toolbox {
-      z-index: 1;
-    }
-
-    #TabsToolbar {
-      z-index: 1;
-      background-repeat: no-repeat !important;
-      background-position: center center !important;
-      background-size: cover !important;
-
-      border-top: 1px solid transparent;
-
-      height: 100%;
-
-      border-top-right-radius: var(--zen-border-radius);
-      width: var(--zen-toolbox-max-width);
-
-      & .tabbrowser-tab {
-        transition: 0s !important;
-      }
-    }
-
-    #navigator-toolbox[zen-has-hover],
-    #navigator-toolbox:focus-within,
-    #navigator-toolbox[movingtab],
-    #navigator-toolbox[flash-popup],
-    #navigator-toolbox[has-popup-menu],
-    #navigator-toolbox:has(.tabbrowser-tab:active),
-    #navigator-toolbox:has(*[open='true']:not(tab):not(.zen-compact-mode-ignore)) {
-      --zen-toolbox-max-width: 45px;
-      max-width: var(--zen-toolbox-max-width) !important;
-      min-width: var(--zen-toolbox-max-width) !important;
-      padding: 0 !important;
-
-      & #TabsToolbar {
-        z-index: 100 !important;
-        width: 250px !important;
-        
-        background: var(--zen-main-browser-background-toolbar) !important;
-        background-attachment: fixed !important;
-        background-size: 2000px !important; /* Dont ask me why */
-
-        box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
-
-        position: absolute;
-        padding: var(--zen-toolbox-padding);
-        transition: 0 !important;
-        /*animation: zen-vtabs-animation 0.3s ease-in-out;*/
-        -moz-window-dragging: no-drag;
-        overflow: hidden;
-        transition: width 0.2s !important;
-
-        & .tab-throbber,
-        & .tab-icon-pending,
-        & .tab-icon-image,
-        & .tab-sharing-icon-overlay,
-        & .tab-icon-overlay {
-          transition: 0.1s !important;
-        }
-      }
-
-      &[zen-right-side='true'] #TabsToolbar {
-        right: 0;
-        border-top-left-radius: var(--zen-border-radius);
-        border-top-right-radius: 0;
-      }
-
-      #navigator-toolbox:not(&)
-        #TabsToolbar
-        #tabbrowser-tabs[closebuttons='activetab']
-        .tabbrowser-tab
-        .tab-content[class]
-        > .tab-close-button[class] {
-        display: none !important;
-        visibility: hidden !important;
-      }
-    }
-  }
-
   /* Mark: Move sidebar to the right */
   #browser:has(#navigator-toolbox[zen-right-side='true']) {
     & #navigator-toolbox {

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

@@ -108,46 +108,37 @@
   font-size: 13px;
 }
 
-@media (-moz-bool-pref: 'zen.view.sidebar-expanded') {
+/** Keep these selectors in sync with the ones in vertical-tabs.css */
-  /** Keep these selectors in sync with the ones in vertical-tabs.css */
+#navigator-toolbox {
-  #navigator-toolbox:is(
+  & #zen-workspaces-button[as-button='true'] {
-      #navigator-toolbox[zen-user-hover='true'][zen-has-hover],
+    width: calc(100% - var(--toolbarbutton-outer-padding));
-      #navigator-toolbox[zen-user-hover='true'][has-popup-menu],
+    margin: 2px;
-      #navigator-toolbox[zen-user-hover='true']:focus-within,
+    min-width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
-      #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox,
+    height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
-      #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
+  }
-      :not([zen-user-hover='true'])
-    ) {
-    & #zen-workspaces-button[as-button='true'] {
-      width: calc(100% - var(--toolbarbutton-outer-padding));
-      margin: 2px;
-      min-width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
-      height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
-    }
 
-    & #zen-workspaces-button .zen-workspace-sidebar-name {
+  & #zen-workspaces-button .zen-workspace-sidebar-name {
-      display: block;
+    display: block;
-    }
+  }
 
-    & #zen-workspaces-button .zen-workspace-sidebar-icon {
+  & #zen-workspaces-button .zen-workspace-sidebar-icon {
-      margin-inline-end: 5px;
+    margin-inline-end: 5px;
 
-      & [no-icon='true'] {
+    & [no-icon='true'] {
-        display: none;
+      display: none;
-      }
     }
+  }
 
-    & #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] + .zen-workspace-sidebar-name {
+  & #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] + .zen-workspace-sidebar-name {
-      margin-left: 0;
+    margin-left: 0;
-    }
+  }
 
-    & #zen-workspaces-button {
+  & #zen-workspaces-button {
-      overflow: hidden;
+    overflow: hidden;
-      white-space: nowrap;
+    white-space: nowrap;
-      text-overflow: ellipsis;
+    text-overflow: ellipsis;
-      display: flex;
+    display: flex;
-      gap: 0.5ch;
+    gap: 0.5ch;
-    }
   }
 }
 

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

@@ -1,5 +1,5 @@
 diff --git a/browser/components/customizableui/CustomizableUI.sys.mjs b/browser/components/customizableui/CustomizableUI.sys.mjs
-index 989e69245aeb1185125752db6b9c58e462d554e4..a4825653b48aa5012e58a277c862caaf0e37abab 100644
+index 989e69245aeb1185125752db6b9c58e462d554e4..7f03aa20386ace32a340131a84c484865883905f 100644
 --- a/browser/components/customizableui/CustomizableUI.sys.mjs
 +++ b/browser/components/customizableui/CustomizableUI.sys.mjs
 @@ -13,6 +13,7 @@ ChromeUtils.defineESModuleGetters(lazy, {
@@ -78,13 +78,11 @@ index 989e69245aeb1185125752db6b9c58e462d554e4..a4825653b48aa5012e58a277c862caaf
        // For toolbars that need it, mark as dirty.
        let defaultPlacements = areaProperties.get("defaultPlacements");
        if (
-@@ -3521,6 +3527,9 @@ var CustomizableUIInternal = {
+@@ -3603,6 +3609,7 @@ var CustomizableUIInternal = {
-         gSeenWidgets.add(widgetId);
+         if (area.get("type") == CustomizableUI.TYPE_TOOLBAR) {
-       }
+           let defaultCollapsed = area.get("defaultCollapsed");
-     }
+           let win = areaNode.ownerGlobal;
-+
++          win.gZenVerticalTabsManager._updateEvent();
-+    
+           if (defaultCollapsed !== null) {
-+
+             win.setToolbarVisibility(
-     if (gSeenWidgets.size || gNewElementCount) {
+               areaNode,
-       gDirty = true;
-       this.saveState();

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

@@ -563,17 +563,11 @@ var gZenLooksAndFeel = {
       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;
@@ -582,7 +576,6 @@ var gZenLooksAndFeel = {
             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;
@@ -591,47 +584,6 @@ var gZenLooksAndFeel = {
     }
   },
 
-  _initializeTabbarExpandForm() {
-    const form = document.getElementById('zen-expand-tabbar-strat');
-    const radios = form.querySelectorAll('input[type=radio]');
-    const onHoverPref = 'zen.view.sidebar-expanded.on-hover';
-    const defaultExpandPref = 'zen.view.sidebar-expanded';
-    if (Services.prefs.getBoolPref(onHoverPref)) {
-      form.querySelector('input[value="hover"]').checked = true;
-    } else if (Services.prefs.getBoolPref(defaultExpandPref)) {
-      form.querySelector('input[value="expand"]').checked = true;
-    } 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) {
-          case 'expand':
-            Services.prefs.setBoolPref(onHoverPref, false);
-            Services.prefs.setBoolPref(defaultExpandPref, true);
-            break;
-          case 'none':
-            Services.prefs.setBoolPref(onHoverPref, false);
-            Services.prefs.setBoolPref(defaultExpandPref, false);
-            break;
-          case 'hover':
-            disableCompactTabbar();
-            Services.prefs.setBoolPref(onHoverPref, true);
-            Services.prefs.setBoolPref(defaultExpandPref, false);
-            break;
-        }
-      });
-    }
-  },
-
   _initializeColorPicker(accentColor) {
     let elem = document.getElementById('zenLooksAndFeelColorOptions');
     elem.innerHTML = '';
@@ -1000,11 +952,6 @@ Preferences.addAll([
     type: 'bool',
     default: true,
   },
-  {
-    id: 'zen.view.sidebar-expanded',
-    type: 'bool',
-    default: true,
-  },
   {
     id: 'zen.theme.pill-button',
     type: 'bool',

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

@@ -337,23 +337,6 @@
                 data-l10n-id="zen-vertical-tabs-show-bottom-border"
                 preference="zen.view.show-bottom-border"/>
     </vbox>
-    
-      <label><html:h2 data-l10n-id="zen-vertical-tabs-expand-tabs-header"/></label>
-      <description class="description-deemphasized" data-l10n-id="zen-vertical-tabs-expand-tabs-description" />
-      <form xmlns="http://www.w3.org/1999/xhtml" id="zen-expand-tabbar-strat" autocomplete="off" class="indent">
-            <hbox>
-                  <input id="zenVerticalTabsExpandDefault" type="radio" name="zen-expand-tabbar-value" value="expand" data-l10n-id="zen-vertical-tabs-expand-tabs-by-default" />
-                  <label for="zenVerticalTabsExpandDefault" data-l10n-id="zen-vertical-tabs-expand-tabs-by-default" />
-            </hbox>
-            <hbox>
-                  <input id="zenVerticalTabsExpandOnHover" type="radio" name="zen-expand-tabbar-value" value="hover" data-l10n-id="zen-vertical-tabs-expand-tabs-on-hover" />
-                  <label for="zenVerticalTabsExpandOnHover" data-l10n-id="zen-vertical-tabs-expand-tabs-on-hover" />
-            </hbox>
-            <hbox>
-                  <input id="zenVerticalTabsExpandDontExpand" type="radio" name="zen-expand-tabbar-value" value="none" data-l10n-id="zen-vertical-tabs-dont-expand-tabs-by-default" />
-                  <label for="zenVerticalTabsExpandDontExpand" data-l10n-id="zen-vertical-tabs-dont-expand-tabs-by-default" />
-            </hbox>
-      </form>
 </groupbox>
 
 </html:template>

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 d48aad3a397909056ee43be4e65797875e80b772..89d2b381153d137ccfd080844bdb9abbbd90e1d5 100644
+index d48aad3a397909056ee43be4e65797875e80b772..d9728867a69a935caf2176d492a7aa78dcee7424 100644
 --- a/browser/themes/shared/tabbrowser/tabs.css
 +++ b/browser/themes/shared/tabbrowser/tabs.css
 @@ -26,7 +26,7 @@
@@ -40,6 +40,15 @@ index d48aad3a397909056ee43be4e65797875e80b772..89d2b381153d137ccfd080844bdb9abb
        direction: rtl;
        mask-image: linear-gradient(to right, transparent, black var(--tab-label-mask-size));
      }
+@@ -863,7 +862,7 @@ tab-group {
+   margin-inline: var(--tab-inner-inline-margin);
+ 
+   #tabbrowser-tabs[orient="vertical"]:not([expanded]) & > .toolbarbutton-text {
+-    display: none;
++    display: flex;
+   }
+ 
+   &:hover {
 @@ -1052,7 +1051,7 @@ tab-group {
    toolbarbutton:not(#firefox-view-button),
    toolbarpaletteitem:not(#wrapper-firefox-view-button)