feat: add top buttons separator in Zen UI manager; update icon references and clean up styles

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

@@ -123,6 +123,10 @@ pref('zen.view.sidebar-expanded.max-width', 400);
 pref('zen.view.show-bottom-border', false);
 pref('zen.view.use-single-toolbar', true);
 
+#ifndef XP_MACOSX
+pref('zen.view.hide-window-controls', true);
+#endif
+
 pref('zen.tabs.dim-pending', true);
 pref('zen.tabs.newtab-on-middle-click', true);
 

src/browser/base/content/ZenUIManager.mjs

@@ -167,6 +167,16 @@ var gZenVerticalTabsManager = {
     return !(window.AppConstants.platform === 'macosx'|| window.matchMedia('(-moz-gtk-csd-reversed-placement)').matches);
   },
 
+  get _topButtonsSeparatorElement() {
+    if (this.__topButtonsSeparatorElement) {
+      return this.__topButtonsSeparatorElement;
+    }
+    this.__topButtonsSeparatorElement = document.createElement('div');
+    this.__topButtonsSeparatorElement.id = 'zen-sidebar-top-buttons-separator';
+    this.__topButtonsSeparatorElement.setAttribute('skipintoolbarset', 'true');
+    return this.__topButtonsSeparatorElement;
+  },
+
   _updateEvent() {
     this._updateMaxWidth();
     const topButtons = document.getElementById('zen-sidebar-top-buttons');
@@ -197,16 +207,22 @@ var gZenVerticalTabsManager = {
       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');
+      // Add separator if it doesn't exist
+      if (!buttonsTarget.contains(this._topButtonsSeparatorElement)) {
+        buttonsTarget.append(this._topButtonsSeparatorElement);
+      }
       for (const button of elements) {
         buttonsTarget.append(button);
       }
-      topButtons.appendChild(document.getElementById('unified-extensions-button'));
+      buttonsTarget.prepend(document.getElementById('unified-extensions-button'));
-      topButtons.appendChild(document.getElementById('PanelUI-button'));
+      buttonsTarget.prepend(document.getElementById('PanelUI-button'));
       if (this.isWindowsStyledButtons) {
-        document.getElementById('zen-appcontent-navbar-container').append(
+        const windowButtons = document.querySelector('#nav-bar > .titlebar-buttonbox-container');
-          document.querySelector('#nav-bar > .titlebar-buttonbox-container')
+        if (windowButtons) {
-        );
+          document.getElementById('zen-appcontent-navbar-container').append(windowButtons);
+        }
       }
+      document.documentElement.setAttribute("zen-single-toolbar", true);
     }
     
     // Always move the splitter next to the sidebar

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

@@ -7,6 +7,24 @@
     height: 100%;
   }
 
+  :root[zen-single-toolbar='true'] {
+    & #zen-appcontent-navbar-container,
+    & #zen-sidebar-top-buttons {
+      --zen-toolbar-height: 32px;
+      height: var(--zen-toolbar-height);
+    } 
+    
+    & #zen-sidebar-top-buttons .toolbarbutton-1 {
+      & > .toolbarbutton-icon {
+        padding: 5px;
+      }
+    }
+
+    & #zen-sidebar-top-buttons-separator {
+      width: 100%;
+    }
+  }
+
   #TabsToolbar > * {
     justify-content: center;
   }
@@ -17,12 +35,53 @@
 
   #browser {
     --zen-toolbox-padding: calc(var(--zen-element-separation) / 1.5);
-
     :root[zen-no-padding='true'] & {
       --zen-toolbox-padding: 4px;
     }
   }
 
+  :root[zen-single-toolbar='true'] {
+    #urlbar-container {
+      width: -moz-available !important;
+    }
+
+    .sharing-icon,
+    #identity-icon,
+    .urlbar-icon,
+    #permissions-granted-icon,
+    #tracking-protection-icon,
+    #tracking-protection-icon-box,
+    #blocked-permissions-container > .blocked-permission-icon {
+      width: 12px;
+      height: 12px;
+    }
+
+    #identity-icon-box,
+    #identity-permission-box {
+      margin-top: auto;
+      margin-bottom: auto;
+      padding: 6px;
+    }
+
+    & #urlbar-container,
+    & #urlbar {
+      --urlbar-container-height: 40px !important;
+      --urlbar-height: 38px !important;
+    }
+
+    & #nav-bar {
+      margin-bottom: 8px;
+    }
+
+    & #zen-sidebar-top-buttons {
+      margin: 4px 0;
+    }
+
+    & #PanelUI-menu-button {
+      padding: 0 !important;
+    }
+  }
+
   #vertical-pinned-tabs-container-separator {
     background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
     margin: 8px auto;
@@ -55,22 +114,51 @@
     & 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'],
   .titlebar-spacer[type='post-tabs'] {
     display: none;
   }
 
+  :root[zen-single-toolbar='true'] {
+    #zen-appcontent-navbar-container {
+      display: flex;
+      -moz-window-dragging: drag;
+
+      & #PersonalToolbar {
+        width: -moz-available;
+      }
+      
+      @media (not (-moz-platform: macos)) and (not (-moz-gtk-csd-reversed-placement)) {
+        @media (-moz-bool-pref: 'zen.view.hide-window-controls') { 
+          & {
+            transition: height 0.2s ease-out, opacity 0.2s ease-out;
+          }
+
+          &:not([zen-has-hover='true']):not([has-popup-menu]):not(:focus-within) {
+            transition-delay: 0.2s;
+            height: var(--zen-element-separation);
+            overflow: hidden;
+            opacity: 0;
+            & > * {
+              pointer-events: none;
+            }
+          }
+        }
+        
+        & .titlebar-buttonbox-container {
+          margin-left: auto;
+          width: fit-content;
+        }
+      }
+
+      @media (-moz-platform: macos) and (-moz-gtk-csd-reversed-placement) {
+        &:has(#PersonalToolbar[collapsed="true"]) {
+          display: none;
+        }
+      }
+    }
+  }
+
   #TabsToolbar-customization-target {
     position: relative;
     max-width: 100%;
@@ -248,12 +336,24 @@
     }
 
     & #nav-bar {
-      padding: var(--zen-element-separation);
       padding-right: 0;
 
-      #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+      :root[zen-single-toolbar='true'] & {
-        padding-left: 0;
+        margin-left: var(--zen-toolbox-padding);
-        padding-right: var(--zen-element-separation);
+        width: calc(100% - var(--zen-toolbox-padding));
+        & .urlbar-input-container {
+          padding-left: 2px;
+        }
+        
+        #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+          padding-left: 0;
+          margin-right: var(--zen-toolbox-padding);
+  
+          & .urlbar-input-container {
+            padding-right: 2px;
+            padding-left: 0;
+          }
+        }
       }
     }
 
@@ -503,18 +603,20 @@
     order: -1;
 
     min-width: unset !important;
-    --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
+    --toolbarbutton-inner-padding: calc(var(--zen-toolbar-button-inner-padding) - 2px) !important;
 
     & #zen-sidebar-top-buttons-customization-target {
       height: 100%;
       align-items: center;
+      padding-inline-start: var(--zen-toolbox-padding);
 
       #nav-bar:has(&) & {
         padding-inline-start: var(--toolbarbutton-outer-padding);
       }
 
       #browser:has(#navigator-toolbox[zen-right-side='true']) & {
-        padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
+        padding-inline-start: 0;
+        padding-inline-end: var(--zen-toolbox-padding);
       }
 
       & toolbarbutton {

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

@@ -9,7 +9,6 @@
   --urlbarView-separator-color: var(--zen-colors-border);
   --urlbarView-hover-background: var(--toolbarbutton-hover-background);
   --urlbarView-highlight-background: var(--toolbarbutton-hover-background);
-  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
   border-radius: var(--toolbarbutton-border-radius);
   overflow: hidden;
   padding: 1px;
@@ -36,12 +35,14 @@
 }
 
 #urlbar:not([focused='true']):not([breakout-extend="true"]) > #urlbar-background {
-  background: color-mix(in srgb, light-dark(#fff, var(--zen-colors-tertiary)) 60%, transparent 40%) !important;
+  background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)) !important;
   backdrop-filter: blur(10px);
 }
 
 #urlbar-background {
   border: transparent !important;
+  margin: 1px;
+  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
 }
 
 #urlbar[focused='true']:not([suppress-focus-border]) > #urlbar-background,
@@ -51,15 +52,13 @@
   outline-color: none !important;
 }
 
-#identity-icon-box,
+#identity-icon-box {
-#identity-permission-box {
+  background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)) !important;
-  background: color-mix(in srgb, var(--zen-colors-secondary) 50%, transparent 50%) !important;
-  margin: 0 8px 0 0 !important;
 }
 
-#identity-permission-box {
+#identity-permission-box:not(:hover):not(:focus-within) {
-  background: var(--zen-colors-border) !important;
+  background: transparent !important;
-}
+} 
 
 #urlbar:is([focused], [open]) > #urlbar-background,
 #searchbar:focus-within {
@@ -95,6 +94,10 @@
   padding: 0 !important;
   justify-content: center !important;
   align-items: center !important;
+  margin: 0;
+}
+
+#tracking-protection-icon-container {
   margin: 0 0 0 2px !important;
 }
 
@@ -102,11 +105,8 @@
 #tracking-protection-icon-container {
   width: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
   height: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
-}
+  margin-top: auto !important;
-
+  margin-bottom: auto !important;
-#identity-permission-box {
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
 }
 
 #identity-box:has(#notification-popup-box:not([hidden='true'])) #identity-icon-box,
@@ -205,15 +205,6 @@ button.popup-notification-dropmarker {
   border-radius: 10px !important;
 }
 
-/* Border radius of boxes on the left */
-#identity-box:has(#identity-permission-box:is([hasPermissions], [hasSharingIcon])):not([pageproxystate='invalid'])
-  #identity-icon-box {
-  border-top-left-radius: 10px !important;
-  border-bottom-left-radius: 10px !important;
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
 /* Extensions or similar */
 #urlbar:not([breakout-extend='true']) #identity-box.chromeUI:not([pageproxystate='invalid']) #identity-icon-box {
   border-radius: 10px !important;
@@ -275,6 +266,5 @@ button.popup-notification-dropmarker {
 }*/
 
 #PersonalToolbar:not([collapsed='true']) {
-  padding-bottom: 10px;
   padding-left: 0 !important;
 }

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

@@ -491,7 +491,6 @@ var gZenLooksAndFeel = {
     this.__hasInitialized = true;
     this._initializeColorPicker(this._getInitialAccentColor());
     window.zenPageAccentColorChanged = this._handleAccentColorChange.bind(this);
-    this._initializeTabbarExpandForm();
     gZenThemeBuilder.init();
     gZenMarketplaceManager.init();
     var onPreferColorSchemeChange = this.onPreferColorSchemeChange.bind(this);

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

@@ -74,7 +74,7 @@
 #sidebar-button:-moz-locale-dir(ltr):not([positionend]),
 #sidebar-button:-moz-locale-dir(rtl)[positionend],
 #zen-sidepanel-button {
-  list-style-image: url('sidebars.svg') !important;
+  list-style-image: url('chrome://browser/skin/sidebars.svg') !important;
 }
 
 #downloads-button,
@@ -927,7 +927,7 @@ menuitem[contexttype='fullscreen'][label*='Exit'] {
 }
 
 #zen-context-menu-compact-mode {
-  --menu-image: url('sidebars.svg');
+  --menu-image: url('chrome://browser/skin/sidebars.svg');
 }
 
 #context_bookmarkTab,
@@ -954,7 +954,7 @@ menuitem[id='placesContext_showAllBookmarks'],
 }
 
 #BMB_viewBookmarksSidebar {
-  --menu-image: url('sidebars.svg');
+  --menu-image: url('chrome://browser/skin/sidebars.svg');
 }
 
 #BMB_searchBookmarks {

src/browser/themes/shared/zen-icons/jar.inc.mn

@@ -113,7 +113,6 @@
   skin/classic/browser/zen-icons/settings.svg                      (../shared/zen-icons/settings.svg) 
   skin/classic/browser/zen-icons/share.svg                      (../shared/zen-icons/share.svg) 
   skin/classic/browser/zen-icons/sidebars-right.svg                      (../shared/zen-icons/sidebars-right.svg) 
-  skin/classic/browser/zen-icons/sidebars.svg                      (../shared/zen-icons/sidebars.svg) 
   skin/classic/browser/zen-icons/source-code.svg                      (../shared/zen-icons/source-code.svg) 
   skin/classic/browser/zen-icons/spell-check.svg                      (../shared/zen-icons/spell-check.svg) 
   skin/classic/browser/zen-icons/split.svg                      (../shared/zen-icons/split.svg) 

src/browser/themes/shared/zen-icons/sidebars.svg

@@ -1,3 +0,0 @@
-<svg width="15" height="13" viewBox="0 0 15 11" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.13525 1.5824H12.7046C13.2569 1.5824 13.7046 2.03011 13.7046 2.5824V8.5824C13.7046 9.13468 13.2569 9.5824 12.7046 9.5824H6.13525V1.5824ZM5.13525 0.582397H6.13525H12.7046C13.8092 0.582397 14.7046 1.47783 14.7046 2.5824V8.5824C14.7046 9.68697 13.8092 10.5824 12.7046 10.5824L6.13525 10.5824H5.13525L2.70459 10.5824C1.60002 10.5824 0.70459 9.68697 0.70459 8.5824V2.5824C0.70459 1.47783 1.60002 0.582397 2.70459 0.582397H5.13525ZM5.13525 9.5824H2.70459C2.15231 9.5824 1.70459 9.13468 1.70459 8.5824V2.5824C1.70459 2.03011 2.15231 1.5824 2.70459 1.5824H5.13525V9.5824Z"/>
-</svg>