feat: add zen-cool-toolbar styles and adjust layout for sidebar and workspace indicators

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

@@ -85,13 +85,6 @@ pref('zen.tabs.show-newtab-vertical', true);
 pref('zen.view.show-newtab-button-border-top', true);
 pref('zen.view.show-newtab-button-top', false);
 
-#ifdef XP_MACOSX
-// Disable for macos in the meantime until @HarryHeres finds a solution for hight DPI screens
-pref('zen.view.experimental-rounded-view', false);
-#else
-pref('zen.view.experimental-rounded-view', true);
-#endif
-
 #ifdef XP_MACOSX
 pref('zen.theme.border-radius', 10); // In pixels
 #else

src/browser/base/content/ZenUIManager.mjs

@@ -173,10 +173,10 @@ var gZenVerticalTabsManager = {
       !Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover')
     ) {
       this.navigatorToolbox.prepend(topButtons);
-      browser.prepend(this.navigatorToolbox);
+    //  browser.prepend(this.navigatorToolbox);
     } else {
       customizationTarget.prepend(topButtons);
-      tabboxWrapper.prepend(this.navigatorToolbox);
+    //  tabboxWrapper.prepend(this.navigatorToolbox);
     }
 
     // Always move the splitter next to the sidebar

src/browser/base/content/browser-box-inc-xhtml.patch

@@ -1,11 +1,12 @@
 diff --git a/browser/base/content/browser-box.inc.xhtml b/browser/base/content/browser-box.inc.xhtml
-index 7f71abe7d80e4c09dd088517ec9ef106c7cb8654..281a3716d56edda243bfca7ebbe0797d75c844e7 100644
+index 7f71abe7d80e4c09dd088517ec9ef106c7cb8654..7e764f08346a048fd352d7f7c06ea434f9b19903 100644
 --- a/browser/base/content/browser-box.inc.xhtml
 +++ b/browser/base/content/browser-box.inc.xhtml
-@@ -22,7 +22,13 @@
+@@ -22,7 +22,14 @@
      <browser id="sidebar" autoscroll="false" disablehistory="true" disablefullscreen="true" tooltip="aHTMLTooltip"/>
    </vbox>
    <splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
++#include zen-sidebar-panel.inc.xhtml
 +<vbox flex="1" id="zen-appcontent-wrapper">
 +<html:div id="zen-appcontent-navbar-container"></html:div>
 +<hbox id="zen-tabbox-wrapper" flex="1">

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

@@ -20,6 +20,7 @@
 <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,6 +43,7 @@
         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,19 +4,7 @@
     border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
     position: relative;
 
-    box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
-    
-    & .browserContainer {
-      overflow: hidden;
-      border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
-    }
-  }
-
-  @media (-moz-bool-pref: 'zen.view.experimental-rounded-view') {
-    #tabbrowser-tabpanels {
-      mix-blend-mode: multiply;
-      -moz-osx-font-smoothing: grayscale;
-      isolation: isolate;
-    }
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
   }
 }

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

@@ -9,19 +9,6 @@
   --inactive-titlebar-opacity: 1;
 }
 
-:root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {
-  & #tabbrowser-tabpanels {
-    padding-right: var(--zen-element-separation);
-    padding-bottom: var(--zen-element-separation);
-    padding-left: 1px; /* Shadow offset */
-
-    #browser:has(#navigator-toolbox[zen-right-side='true']) & {
-      padding-right: 0;
-      padding-left: var(--zen-element-separation);
-    }
-  }
-}
-
 :root:is([inDOMFullscreen='true'], [chromehidden~='location'], [chromehidden~='toolbar']) {
   #navigator-toolbox,
   #zen-sidebar-splitter {

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

@@ -7,19 +7,12 @@
         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;
+      #zen-appcontent-wrapper {
+        margin-left: var(--zen-element-separation) !important;
       }
 
-      /* Set the extra paddings */
-      #tabbrowser-tabpanels {
-        :root:not([inDOMFullscreen='true']) #browser:has(#navigator-toolbox[zen-right-side='true']) & {
-          padding-right: var(--zen-element-separation) !important;
-        }
-
-        :root:not([inDOMFullscreen='true']) #browser:has(#navigator-toolbox:not([zen-right-side='true'])) & {
-          padding-left: var(--zen-element-separation) !important;
-        }
+      #zen-sidebar-top-buttons-customization-target {
+        padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
       }
 
       #zen-sidebar-splitter {
@@ -105,10 +98,6 @@
         --zen-toolbox-top-align: var(--zen-element-separation);
       }
 
-      &:not([inDOMFullscreen='true']) #tabbrowser-tabpanels {
-        padding-top: var(--zen-element-separation) !important;
-      }
-
       #sidebar-box,
       #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel:not([pinned='true'])) {
         margin-top: var(--zen-element-separation) !important;

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

@@ -0,0 +1,38 @@
+
+:root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {
+  & #zen-appcontent-wrapper {
+    box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
+    background: var(--zen-colors-tertiary);
+    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 {
+    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-sidebar-panels.css

@@ -36,9 +36,7 @@
 
 .zen-sidebar-panel-button image {
   border-radius: 10px !important;
-  background: var(--toolbarbutton-hover-background);
   border: 2px solid transparent;
-  transition: background 0.1s ease-in-out;
 }
 
 .zen-sidebar-panel-button:hover image {
@@ -146,7 +144,7 @@
 }
 
 #zen-sidebar-web-panel-wrapper {
-  margin: 0 calc(var(--zen-element-separation) / 2) var(--zen-element-separation) var(--zen-element-separation);
+  margin: var(--zen-element-separation) calc(var(--zen-element-separation) / 2) var(--zen-element-separation) var(--zen-element-separation);
 }
 
 #zen-sidebar-web-panel[pinned='true'] {
@@ -163,7 +161,7 @@
 #zen-sidebar-web-header,
 #zen-sidebar-panels-wrapper {
   width: 100%;
-  min-height: 50px;
+  min-height: var(--zen-toolbar-height) !important;
   display: flex;
   align-items: center;
   padding: 0 5px;
@@ -174,6 +172,8 @@
   position: relative;
   color-scheme: var(--toolbar-color-scheme);
   -moz-window-dragging: no-drag;
+
+  --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
 }
 
 #zen-sidebar-web-header {
@@ -225,7 +225,7 @@
 }
 
 #zen-sidebar-web-panel-title {
-  font-size: 1em;
+  font-size: .9em;
   font-weight: 600;
   margin: 0 10px;
   padding: 0;

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

@@ -41,7 +41,6 @@
     min-width: var(--zen-toolbox-min-width);
     margin-top: 0 !important; /* Fix full screen mode */
 
-    padding-top: var(--zen-toolbox-top-align);
     padding-bottom: var(--zen-element-separation) !important;
 
     border: none;
@@ -372,12 +371,6 @@
         }
       }
     }
-
-    @media (-moz-bool-pref: 'zen.view.compact') and (-moz-bool-pref: 'zen.view.compact.hide-toolbar') and (not (-moz-bool-pref: 'zen.view.compact.hide-tabbar')) {
-      & {
-        margin-top: var(--zen-element-separation) !important;
-      }
-    }
   }
 
   /* Mark: toolbox as collapsed */
@@ -413,6 +406,10 @@
       display: none;
     }
 
+    & #TabsToolbar {
+      padding-top: var(--zen-element-separation);
+    }
+
     & #zen-current-workspace-indicator {
       padding-left: 0;
       padding-right: 0;

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

@@ -431,7 +431,7 @@
   }
 
   & #zen-current-workspace-indicator-icon:not([hidden]) + #zen-current-workspace-indicator-name  {
-    margin-left: 25px;
+    margin-left: 22px;
   }
 }
 

src/browser/base/content/zen-tabbrowser-elements.inc.xhtml

@@ -1,3 +1,2 @@
-#include zen-sidebar-panel.inc.xhtml
 #include zen-splitview-overlay.inc.xhtml
 #include zen-glance.inc.xhtml

src/browser/base/zen-components/ZenSidebarManager.mjs

@@ -35,7 +35,7 @@ class ZenBrowserManagerSidebar extends ZenDOMOperatedFeature {
   }
 
   onlySafeWidthAndHeight() {
-    const panel = document.getElementById('zen-sidebar-web-panel');
+    const panel = this.sidebar;
     const width = panel.style.width;
     const height = panel.style.height;
     panel.setAttribute('style', '');
@@ -239,8 +239,7 @@ class ZenBrowserManagerSidebar extends ZenDOMOperatedFeature {
   }
 
   _handleClickOutside(event) {
-    let sidebar = document.getElementById('zen-sidebar-web-panel');
-    if (!sidebar.hasAttribute('pinned') || this._isDragging || !this.shouldCloseOnBlur) {
+    if (!this.sidebar.hasAttribute('pinned') || this._isDragging || !this.shouldCloseOnBlur) {
       return;
     }
     let target = event.target;
@@ -272,6 +271,8 @@ class ZenBrowserManagerSidebar extends ZenDOMOperatedFeature {
     let sidebar = document.getElementById('zen-sidebar-web-panel');
     if (!this.sidebar.hasAttribute('pinned')) {
       this.moveToTabBoxWrapper();
+    } else {
+      this.moveToTabBox();
     }
     sidebar.removeAttribute('hidden');
     this.update();
@@ -598,7 +599,7 @@ class ZenBrowserManagerSidebar extends ZenDOMOperatedFeature {
   }
 
   moveToTabBoxWrapper() {
-    this.tabBox.before(this.sidebarWrapper);
+    document.getElementById('zen-appcontent-wrapper').before(this.sidebarWrapper);
     this.sidebarWrapper.style.order = '';
   }
 
@@ -609,10 +610,10 @@ class ZenBrowserManagerSidebar extends ZenDOMOperatedFeature {
   togglePinned(elem) {
     if (this.sidebar.hasAttribute('pinned')) {
       this._removePinnedFromElements();
-      //this.moveToTabBoxWrapper();
+      this.moveToTabBoxWrapper();
     } else {
       this._setPinnedToElements();
-      //this.moveToTabBox();
+      this.moveToTabBox();
     }
     this.update();  
   }