Refactor browser preferences and styles

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

@@ -211,6 +211,8 @@ pref('image.jxl.enabled', true);
 pref('browser.sessionstore.restore_pinned_tabs_on_demand', true);
 pref('browser.newtabpage.activity-stream.system.showWeather', true);
 
+pref("browser.toolbars.bookmarks.visibility", "never");
+
 // Enable experimental settings page (Usef for Zen Labs)
 pref('browser.preferences.experimental', true);
 

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

@@ -2,14 +2,14 @@ export var ZenCustomizableUI = new (class {
   constructor() {}
 
   TYPE_TOOLBAR = 'toolbar';
-  defaultSidebarIcons = ['zen-sidepanel-button', 'zen-workspaces-button', 'downloads-button'];
+  defaultSidebarIcons = ['zen-profile-button', 'zen-workspaces-button', 'downloads-button'];
 
   startup(CustomizableUIInternal) {
     CustomizableUIInternal.registerArea(
       'zen-sidebar-top-buttons',
       {
         type: this.TYPE_TOOLBAR,
-        defaultPlacements: ['preferences-button', 'zen-expand-sidebar-button', 'zen-profile-button'],
+        defaultPlacements: ['zen-sidepanel-button', 'preferences-button', 'zen-expand-sidebar-button'],
         defaultCollapsed: null,
       },
       true
@@ -61,6 +61,7 @@ export var ZenCustomizableUI = new (class {
               <image id="zen-profile-button-icon" />
             </vbox>
           </toolbarbutton>
+          <toolbarbutton removeable="true" class="toolbarbutton-1 zen-sidebar-action-button" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
         </hbox>
       </toolbar>
     `);

src/browser/base/content/ZenStartup.mjs

@@ -122,7 +122,7 @@
       }
 
       // remove all styles except for the width, since we are xulstoring the complet style list
-      const width = toolbox.style.width || '250px';
+      const width = toolbox.style.width || '270px';
       toolbox.removeAttribute('style');
       toolbox.style.width = width;
 

src/browser/base/content/zen-components

@@ -1 +1 @@
-Subproject commit 9d41110b8b181c9493540cc590c95b6f30d021f3
+Subproject commit 2adc19bc21031dbb5806c38072128ce5318b47f6

src/browser/base/content/zen-sidebar-icons.inc.xhtml

@@ -7,5 +7,4 @@
   skipintoolbarset="true"
   context="toolbar-context-menu"
   mode="icons">
-  <toolbarbutton removeable="true" class="toolbarbutton-1 zen-sidebar-action-button" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
 </toolbar>

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

@@ -4,7 +4,8 @@
     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), var(--zen-colors-border));
+    box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
+    border: 1px solid light-dark(transparent, rgba(255,255,255,.08));
     
     & .browserContainer,
     #zen-glance-browser browser {

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

@@ -127,7 +127,7 @@
         border-bottom-left-radius: var(--zen-border-radius);
         border-bottom-right-radius: var(--zen-border-radius);
         transition: all 0.1s ease-in-out;
-        width: calc(100% - ((var(--zen-element-separation) + var(--zen-compact-toolbar-offset)) * 2));
+        width: 100%;
         opacity: 0;
         background: var(--zen-dialog-background);
 

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

@@ -16,14 +16,19 @@
   }
 
   #browser {
-    --zen-toolbox-padding: 5px;
+    --zen-toolbox-padding: calc(var(--zen-element-separation) / 1.5);
   }
 
   #vertical-pinned-tabs-container-separator {
-    background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.075));
+    background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.18));
-    margin: var(--zen-toolbox-padding) 0;
+    margin: var(--zen-toolbox-padding) auto;
     border: none;
     height: 1px;
+    width: 98%;
+
+    #vertical-pinned-tabs-container:not(:has(tab:not([hidden]))) + & {
+      display: none;
+    }
   }
 
   #navigator-toolbox {
@@ -256,8 +261,6 @@
 
       width: 100%;
       position: relative;
-
-      --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
     }
 
     /* Mark: Fix separator paddings */
@@ -373,7 +376,7 @@
     --tab-min-width: 36px !important;
 
     /* Important: When changin this value, make sure expand on hover doesn't break! */
-    --zen-toolbox-padding: 6px;
+    --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;
@@ -415,7 +418,7 @@
       }
 
       &::before {
-        width: 60% !important;
+        width: 90% !important;
       }
     }
 
@@ -718,17 +721,17 @@
         --zen-colors-border: var(--zen-colors-tertiary);
       }
 
-      margin-top: 10px;
+      margin-top: 11px;
       position: relative;
 
       &::before {
         content: '';
         display: block;
         height: 1px;
-        background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.075));
+        background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.18));
-        width: 96%;
+        width: 98%;
         position: absolute;
-        top: -5px;
+        top: -7px;
         left: 50%;
         transform: translateX(-50%);
       }
@@ -738,7 +741,6 @@
 
 /* Mark: Essentials Toolbar */
 #EssentialsToolbar {
-  border-bottom: 1px solid light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.075));
   padding-bottom: var(--zen-toolbox-padding);
   margin-bottom: var(--zen-toolbox-padding);
   & .bookmark-item {
@@ -765,7 +767,7 @@
   max-width: unset;
 
   border-radius: var(--border-radius-medium);
-  --zen-essential-tabs-bgcolor: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.12));
+  --zen-essential-tabs-bgcolor: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.18));
   background: var(--tab-hover-background-color);
   
   &:hover {

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

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

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

@@ -11,10 +11,12 @@
     --toolbarbutton-hover-background: transparent !important;
     border-radius: var(--zen-button-border-radius) !important;
     background: transparent;
-    padding: 5px;
+    padding: 2px;
     appearance: unset !important;
     height: fit-content;
     gap: 3px;
+    background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
+    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
 
     & toolbarbutton {
       margin: auto;