feat: enhance zen styles for toolbar, sidebar, and tabs; adjust layout and padding

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

@@ -4,7 +4,9 @@
     border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
     position: relative;
 
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+    &:not([zen-split="true"]) {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
   }
 }

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

@@ -99,6 +99,7 @@
       }
 
       #sidebar-box,
+      #titlebar,
       #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

@@ -1,5 +1,5 @@
 
-:root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {
+: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);
@@ -16,6 +16,10 @@
     & #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 {

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

@@ -4,11 +4,11 @@
   visibility: inherit;
 }
 
-#tabbrowser-tabpanels {
+#zen-appcontent-wrapper {
   transition: transform 0.1s ease-in-out;
 }
 
-#tabbrowser-tabpanels:has(.zen-glance-background) {
+#zen-appcontent-wrapper:has(.zen-glance-background) {
   transform: scale(0.98);
   backdrop-filter: blur(5px);
 
@@ -54,8 +54,9 @@
     transform: translate(var(--initial-x), var(--initial-y));
     width: var(--initial-width);
     height: var(--initial-height);
-    position: absolute;
+    position: fixed;
     border-radius: var(--zen-border-radius);
+    overflow: hidden;
     opacity: 0;
     top: 0;
     left: 0;

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

@@ -250,6 +250,12 @@
   animation: better-sidebar-pinned-hide 0.15s ease-in-out forwards !important;
 }
 
+:root:has(#navigator-toolbox:not([zen-right-side='true'])) {
+  #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[pinned='true'])) {
+    margin-left: 0 !important;
+  }
+}
+
 /** UNPINNED **/
 #zen-sidebar-web-panel {
   /* Sets perspective */

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

@@ -17,6 +17,10 @@
 
   #browser {
     --zen-toolbox-padding: calc(var(--zen-element-separation) / 1.5);
+
+    :root[zen-no-padding='true'] & {
+      --zen-toolbox-padding: 4px;
+    }
   }
 
   #vertical-pinned-tabs-container-separator {
@@ -239,7 +243,8 @@
     }
 
     & #zen-sidebar-top-buttons {
-      padding-left: var(--zen-toolbox-padding);
+      padding: var(--zen-element-separation);
+      margin-top: var(--zen-element-separation);
     }
 
     & #zen-workspaces-button[as-button='true'] {

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

@@ -87,7 +87,7 @@
   --zen-button-padding: 0.6rem 1.2rem;
 
   /* Toolbar */
-  --zen-toolbar-height: 41px;
+  --zen-toolbar-height: 38px;
   --zen-toolbar-button-inner-padding: 6px;
   --toolbarbutton-outer-padding: 4px;
 

src/browser/base/content/zenThemeModifier.js

@@ -73,6 +73,11 @@ var ZenThemeModifier = {
   updateElementSeparation() {
     const separation = Services.prefs.getIntPref('zen.theme.content-element-separation');
     document.documentElement.style.setProperty('--zen-element-separation', separation + 'px');
+    if (separation == 0) {
+      document.documentElement.setAttribute("zen-no-padding", true);
+    } else {
+      document.documentElement.removeAttribute("zen-no-padding");
+    }
   },
 
   /**

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

@@ -36,10 +36,10 @@
     }
   }
 
-  class ZenPinnedTabManager extends ZenPreloadedFeature {
+  class ZenPinnedTabManager extends ZenDOMOperatedFeature {
 
     init() {
-      if (!this.enabled || PrivateBrowsingUtils.isWindowPrivate(window)) {
+      if (!this.enabled) {
         return;
       }
       this.observer = new ZenPinnedTabsObserver();
@@ -51,7 +51,7 @@
     }
 
     async initTabs() {
-      if (!this.enabled || PrivateBrowsingUtils.isWindowPrivate(window)) {
+      if (!this.enabled) {
         return;
       }
       await ZenPinnedTabsStorage.init();
@@ -60,7 +60,7 @@
     get enabled() {
       if (typeof this._enabled === 'undefined') {
         this._enabled = !(
-          document.documentElement.hasAttribute('privatebrowsingmode') ||
+          PrivateBrowsingUtils.isWindowPrivate(window) ||
           document.documentElement.getAttribute('chromehidden')?.includes('toolbar') ||
           document.documentElement.getAttribute('chromehidden')?.includes('menubar')
         );