Update ZenStartup.mjs, zen-components, zen-theme.css, and zen-urlbar.css

Update zen-browser.js

.github/workflows/object/windows-x64-signed-generic/update_manifest/browser/WINNT_x86_64-msvc-x64/alpha-generic/update.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0"?>
 <updates>
-  <update type="minor" displayVersion="1.0.1-a" appVersion="1.0.1-a" platformVersion="130.0" buildID="20240916093302">
-    <patch type="complete" URL="https://github.com/zen-browser/desktop/releases/download/1.0.1-a/windows-generic.mar" hashFunction="sha512" hashValue="1d57da64dfe08f84093cb58ee28037880740541757a2cab73e5ac2adcc5ea67b33783e2947c955bca50e74d8b7203ba54f71e61395d95fa2c43f2a9ce2c7b1c6" size="72337408"/>
+  <update type="minor" displayVersion="1.0.1-a.1" appVersion="1.0.1-a.1" platformVersion="130.0" buildID="20240917001725">
+    <patch type="complete" URL="https://github.com/zen-browser/desktop/releases/download/1.0.1-a.1/windows-generic.mar" hashFunction="sha512" hashValue="972023778514d694851f4e1ed4dc25d6a76b99873fb5e2ccaee39cfd1e16831e860fe8d5b8a79609126e5f3a30af493ad91bebc33c5e6c9cff03933bb48d50bf" size="72275244"/>
   </update>
 </updates>

.github/workflows/object/windows-x64-signed-generic/update_manifest/browser/WINNT_x86_64-msvc/alpha-generic/update.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0"?>
 <updates>
-  <update type="minor" displayVersion="1.0.1-a" appVersion="1.0.1-a" platformVersion="130.0" buildID="20240916093302">
-    <patch type="complete" URL="https://github.com/zen-browser/desktop/releases/download/1.0.1-a/windows-generic.mar" hashFunction="sha512" hashValue="1d57da64dfe08f84093cb58ee28037880740541757a2cab73e5ac2adcc5ea67b33783e2947c955bca50e74d8b7203ba54f71e61395d95fa2c43f2a9ce2c7b1c6" size="72337408"/>
+  <update type="minor" displayVersion="1.0.1-a.1" appVersion="1.0.1-a.1" platformVersion="130.0" buildID="20240917001725">
+    <patch type="complete" URL="https://github.com/zen-browser/desktop/releases/download/1.0.1-a.1/windows-generic.mar" hashFunction="sha512" hashValue="972023778514d694851f4e1ed4dc25d6a76b99873fb5e2ccaee39cfd1e16831e860fe8d5b8a79609126e5f3a30af493ad91bebc33c5e6c9cff03933bb48d50bf" size="72275244"/>
   </update>
 </updates>

.github/workflows/object/windows-x64-signed-specific/update_manifest/browser/WINNT_x86_64-msvc-x64/alpha-generic/update.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0"?>
-<updates>
-  <update type="minor" displayVersion="1.0.1-a" appVersion="1.0.1-a" platformVersion="130.0" buildID="20240916093142">
-    <patch type="complete" URL="https://github.com/zen-browser/desktop/releases/download/1.0.1-a/windows-generic.mar" hashFunction="sha512" hashValue="ed11d2af249f3c6290943c9a8bc7a4eab7a2bfc24268b927a4ea003e168cf509760782d01e974492b4af477ec649d627c6c69290f1e0c91849f44b09cc85febe" size="72214812"/>
-  </update>
-</updates>

.github/workflows/object/windows-x64-signed-specific/update_manifest/browser/WINNT_x86_64-msvc-x64/alpha/update.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0"?>
+<updates>
+  <update type="minor" displayVersion="1.0.1-a.1" appVersion="1.0.1-a.1" platformVersion="130.0" buildID="20240917001715">
+    <patch type="complete" URL="https://github.com/zen-browser/desktop/releases/download/1.0.1-a.1/windows.mar" hashFunction="sha512" hashValue="94a67207ea7c6cd9833397a339d647b4c8498d04976133f409aad06eb77e397fc5d3e6a325133d39dfa7d0a73a198f35954563dcbed1c2de089700ff1baf37b7" size="72228768"/>
+  </update>
+</updates>

.github/workflows/object/windows-x64-signed-specific/update_manifest/browser/WINNT_x86_64-msvc/alpha-generic/update.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0"?>
-<updates>
-  <update type="minor" displayVersion="1.0.1-a" appVersion="1.0.1-a" platformVersion="130.0" buildID="20240916093142">
-    <patch type="complete" URL="https://github.com/zen-browser/desktop/releases/download/1.0.1-a/windows-generic.mar" hashFunction="sha512" hashValue="ed11d2af249f3c6290943c9a8bc7a4eab7a2bfc24268b927a4ea003e168cf509760782d01e974492b4af477ec649d627c6c69290f1e0c91849f44b09cc85febe" size="72214812"/>
-  </update>
-</updates>

.github/workflows/object/windows-x64-signed-specific/update_manifest/browser/WINNT_x86_64-msvc/alpha/update.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0"?>
+<updates>
+  <update type="minor" displayVersion="1.0.1-a.1" appVersion="1.0.1-a.1" platformVersion="130.0" buildID="20240917001715">
+    <patch type="complete" URL="https://github.com/zen-browser/desktop/releases/download/1.0.1-a.1/windows.mar" hashFunction="sha512" hashValue="94a67207ea7c6cd9833397a339d647b4c8498d04976133f409aad06eb77e397fc5d3e6a325133d39dfa7d0a73a198f35954563dcbed1c2de089700ff1baf37b7" size="72228768"/>
+  </update>
+</updates>

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

@@ -52,7 +52,7 @@ pref('pdfjs.enableHighlightFloatingButton', true);
 
 pref("alerts.showFavicons", true);
 
-pref("browser.tabs.loadBookmarksInTabs", true);
+pref("browser.tabs.loadBookmarksInTabs", false);
 pref('browser.toolbars.bookmarks.visibility', 'never');
 
 // Enable Do Not Track and GPC by default.
@@ -73,7 +73,7 @@ pref('zen.welcomeScreen.seen', false);
 pref('zen.tabs.vertical', true);
 pref('zen.tabs.vertical.right-side', false);
 pref('zen.theme.accent-color', "#aac7ff");
-pref('zen.theme.border-radius', 10); // In pixels
+pref('zen.theme.border-radius', 5); // In pixels
 pref('zen.theme.content-element-separation', 4); // In pixels
 pref('zen.theme.toolbar-themed', true);
 pref('zen.theme.pill-button', false);
@@ -86,7 +86,7 @@ pref('zen.theme.color-prefs.colorful', false);
 pref('zen.view.compact.toolbar-flash-popup', true);
 pref('zen.view.compact.toolbar-flash-popup.duration', 800);
 
-pref('zen.view.sidebar-height-throttle', 500); // in ms
+pref('zen.view.sidebar-height-throttle', 200); // in ms
 pref('zen.view.sidebar-expanded', false);
 pref('zen.view.sidebar-expanded.on-hover', false);
 pref('zen.view.sidebar-expanded.show-button', true);
@@ -99,7 +99,12 @@ pref('zen.keyboard.shortcuts', ""); // Empty string means default shortcuts
 pref('zen.keyboard.shortcuts.disable-firefox', false);
 pref('zen.tabs.dim-pending', true);
 pref('zen.themes.updated-value-observer', false);
+
+#ifdef XP_MACOSX
+pref('zen.themes.tabs.legacy-location', true);
+#else
 pref('zen.themes.tabs.legacy-location', false);
+#endif
 
 // Pref to enable the new profiles (TODO: Check this out!)
 //pref("browser.profiles.enabled", true);
@@ -195,6 +200,9 @@ pref("widget.non-native-theme.use-theme-accent", true);
 pref("privacy.resistFingerprinting.letterboxing", false);
 pref("privacy.resistFingerprinting.letterboxing.dimensions", "");
 
+// Remove Inspect Accessibity Properties menu
+pref("devtools.accessibility.enabled", false);
+
 // Enable GPU by default
 pref('gfx.webrender.all', true);
 pref('layers.acceleration.force-enabled', true);
@@ -202,4 +210,4 @@ pref('media.ffmpeg.vaapi.enabled', true);
 pref('media.ffmpeg.encoder.enabled', true);
 
 pref("media.hardware-video-decoding.enabled", true);
-pref("gfx.canvas.accelerated", true);
+pref("gfx.canvas.accelerated", true);

src/browser/base/content/ZenStartup.mjs

@@ -40,6 +40,7 @@
         // Disable smooth scroll
         gBrowser.tabContainer.arrowScrollbox.smoothScroll = false;
 
+        ZenWorkspaces.init();
         gZenVerticalTabsManager.init();
         gZenCompactModeManager.init();
         gZenKeyboardShortcuts.init();
@@ -66,7 +67,7 @@
       tabs.style.maxHeight = '0px'; // reset to 0
       const toolbarRect = toolbarItems.getBoundingClientRect();
       // -5 for the controls padding
-      let totalHeight = toolbarRect.height - 15;
+      let totalHeight = toolbarRect.height - 5;
       // remove the height from other elements that aren't hidden
       const otherElements = document.querySelectorAll('#tabbrowser-tabs > *:not([hidden="true"])');
       for (let tab of otherElements) {

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

@@ -35,7 +35,7 @@
 
 @keyframes zen-slide-in {
   from {
-    transform: translateX(-10px);
+    transform: translateX(-30px);
     opacity: 0;
   }
   to {
@@ -94,7 +94,7 @@
 @keyframes zen-vtabs-animation {
   0% {
     opacity: 0;
-    transform: translateX(-5px);
+    transform: translateX(-10px);
   }
 
   20% {
@@ -109,7 +109,7 @@
 @keyframes zen-sidebar-panel-animation-right {
   0% {
     opacity: 0;
-    transform: translateX(5px);
+    transform: translateX(10px);
   }
   
   20% {

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

@@ -8,6 +8,7 @@
     /* This fixes an issue with the left border */
     --zen-webview-correction-margin: 2px;
     margin-left: var(--zen-webview-correction-margin);
+    margin-top: var(--zen-webview-correction-margin);
     
     #browser:has(#navigator-toolbox[zen-right-side="true"]) & {
       margin-left: 0;
@@ -17,7 +18,7 @@
     --uc-tweak-rounded-corners-shadow-color: var(--zen-colors-border);
 
     --uc-tweak-rounded-corners-shadow:
-      0 0 1px 1px var(--uc-tweak-rounded-corners-shadow-color);
+      0 0 0 1px var(--uc-tweak-rounded-corners-shadow-color);
 
     box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;
 

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

@@ -12,14 +12,12 @@
     margin-top: 0 !important;
   }
 
-  #nav-bar {
-    padding-left: 5px !important;
-  }
-
   #navigator-toolbox {
     --zen-compact-toolbox-margin-single: calc(var(--zen-element-separation) * 2);
-    --zen-compact-toolbox-margin: var(--zen-compact-toolbox-margin-single);
-    position: absolute;
+    --zen-compact-toolbox-margin: 
+      calc(var(--zen-compact-toolbox-margin-single) / 2) var(--zen-compact-toolbox-margin-single) 
+      calc(var(--zen-compact-toolbox-margin-single) + var(--zen-element-separation)) var(--zen-compact-toolbox-margin-single);
+    position: absolute !important;
     display: block;
     transition: 200ms ease-in-out !important;
     transform: translateX(calc(-100% + (var(--zen-compact-toolbox-margin-single) / 2)));
@@ -28,6 +26,7 @@
     z-index: 2;
     height: 100%;
     margin: 0;
+    margin-top: var(--zen-element-separation) !important;
     padding: var(--zen-compact-toolbox-margin) !important;
 
     min-width: 500px !important;
@@ -50,7 +49,7 @@
     }
   }
 
-  #tabbrowser-tabpanels {
+  :root:not([inDOMFullscreen='true']) #tabbrowser-tabpanels {
     padding: var(--zen-element-separation) !important;
     padding-top: 0 !important;
   }
@@ -98,6 +97,7 @@
         (18px + (var(--toolbarbutton-inner-padding) * 2)) 
       ) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single);
 
+      margin-top: 0 !important;
       :root[zen-sidebar-legacy='true'] & {
         --zen-compact-toolbox-margin: calc(var(--zen-compact-toolbox-margin-single) / 2)
           var(--zen-compact-toolbox-margin-single) var(--zen-compact-toolbox-margin-single)
@@ -111,6 +111,11 @@
     }
   }
 
+  #navigator-toolbox[zen-right-side='true'] {
+    right: 0 !important;
+    transform: translateX(calc(100% - (var(--zen-compact-toolbox-margin-single) / 2))) !important;
+  }
+
   #navigator-toolbox:hover,
   #navigator-toolbox:focus-within,
   #navigator-toolbox[zen-user-show],
@@ -120,6 +125,7 @@
   #navigator-toolbox:has(.tabbrowser-tab:active),
   #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
     transform: none !important;
+    position: absolute !important;
     opacity: 1;
 
     & > * {
@@ -200,27 +206,4 @@
       margin-top: 10px !important;
     }
   }
-
-  #navigator-toolbox[zen-right-side='true'] {
-    & {
-      right: 0 !important;
-      transform: translateX(calc(100% - (var(--zen-compact-toolbox-margin-single) / 2))) !important;
-    }
-
-    &:hover,
-    &:focus-within,
-    &[zen-user-show],
-    &[flash-popup],
-    &[movingtab],
-    &:has(.tabbrowser-tab:active),
-    & #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
-    &:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
-      transform: none !important;
-      opacity: 1;
-
-      & > * {
-        pointer-events: all;
-      }
-    }
-  }
 }

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

@@ -10,12 +10,33 @@ toolbar {
   align-items: center;
   list-style-image: var(--avatar-image-url);
   position: relative;
+  border-radius: var(--tab-border-radius);
+
+  width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
+  height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
 
   & image {
+    border-radius: 999px;
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 8px;
+    height: calc(var(--toolbarbutton-inner-padding) + 10px);
+    width: calc(var(--toolbarbutton-inner-padding) + 10px);
+    padding: 0;
+  }
+
+  &:hover {
+    background-color: var(--toolbarbutton-hover-background);
+
+    & image {
+      background: transparent !important;
+    }
+  }
+}
+
+@media not (-moz-bool-pref: 'zen.view.sidebar-expanded.show-button') {
+  #zen-expand-sidebar-button {
+    display: none !important;
   }
 }
 

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

@@ -8,9 +8,16 @@
     height: 100%;
   }
 
+  #private-browsing-indicator-with-label {
+    display: none !important;
+  }
+
   #browser {
     --zen-toolbox-padding: 5px;
-    --zen-toolbox-top-align: var(--zen-toolbox-padding);
+
+    :root:not([zen-sidebar-legacy='true']) & {
+      --zen-toolbox-top-align: var(--zen-toolbox-padding);
+    }
   }
 
   #navigator-toolbox {
@@ -18,40 +25,62 @@
     --tab-border-radius: var(--border-radius-medium);
     --zen-toolbox-min-width: 1px;
 
+    --tab-hover-background-color: var(--toolbarbutton-hover-background) !important;
+
     min-width: var(--zen-toolbox-min-width);
 
     padding: var(--zen-toolbox-padding);
     padding-top: var(--zen-toolbox-top-align);
 
     margin-top: 0 !important;
+    display: flex;
   }
 
 
   #TabsToolbar-customization-target {
+    position: relative;
     gap: var(--zen-toolbox-padding);
+    &::after {
+      content: '';
+      display: block;
+      height: 1px;
+      background: color-mix(in srgb, var(--zen-colors-border) 70%, transparent 30%);
+      margin: 0 auto;
+      width: 80%;
+      left: 50%;
+      transform: translateX(-50%);
+      position: absolute;
+      bottom: calc(-1 * var(--zen-toolbox-padding));
+    }
   }
 
   #tabbrowser-tabs {
     margin-inline-start: 0 !important;
     padding-inline-start: 0 !important;
-    grid-gap: 2px !important;
 
-    border-bottom: 1px solid var(--zen-colors-border) !important;
+    position: relative;
+    border-bottom: 0px solid transparent !important;
 
     --tab-block-margin: 2px;
+    grid-gap: 0 !important;
 
     & .tabbrowser-tab {
+      animation: zen-slide-in 0.2s;
+
       max-width: unset !important;
       padding: 0 !important;
 
-      overflow: hidden;
+      font-size: var(--urlbarView-small-font-size);
+
       position: relative;
 
+      height: calc(var(--tab-min-height) + var(--tab-block-margin) * 2) !important;
+      min-height: calc(var(--tab-min-height) + var(--tab-block-margin) * 2) !important;
+
       border-radius: var(--border-radius-medium);
 
       & .tab-background {
         overflow: hidden;
-        margin: 2px 2px;
 
         & .tab-context-line {
           margin: 0 0px !important;
@@ -97,6 +126,12 @@
     }
   }
 
+  #tabbrowser-arrowscrollbox {
+    &::part(scrollbox) {
+      gap: 0px !important;
+    }
+  }
+
   #vertical-pinned-tabs-container {
     padding-inline-end: 0 !important;
     gap: 3px !important;
@@ -134,8 +169,12 @@
 
       padding-top: calc(var(--zen-toolbox-padding) * 2);
 
-      width: calc(100% - var(--zen-toolbox-padding));
+      width: 100%;
       position: relative;
+
+      --toolbarbutton-inner-padding: 9px !important;
+
+      justify-content: space-between;
     }
 
     /* Mark: Fix separator paddings */
@@ -147,6 +186,13 @@
       padding-right: 0 !important;
     }
 
+    & #TabsToolbar-customization-target {
+      &::after {
+        width: 98%;
+        bottom: calc(-0.5 * var(--zen-toolbox-padding));
+      }
+    }
+
     & #newtab-button-container {
       &::before {
         width: 100%;
@@ -171,9 +217,26 @@
 
     & #tabbrowser-tabs {
       & .tabbrowser-tab {
+        & .tab-background {
+          @media not (prefers-color-scheme: dark) {
+            box-shadow: none !important;
+          }
+        }
+
         &:not([pinned]):is(:hover, [visuallyselected]) .tab-close-button {
           display: block !important;
         }
+
+        .tab-throbber,
+        .tab-icon-pending,
+        .tab-icon-image,
+        .tab-sharing-icon-overlay,
+        .tab-icon-overlay {
+          &:not([pinned]) {
+            margin-inline-end: var(--toolbarbutton-inner-padding) !important;
+            margin-inline-start: calc(var(--toolbarbutton-inner-padding) / 4) !important;    
+          }
+        }
       }
     }
 
@@ -181,6 +244,15 @@
       :root:not([zen-sidebar-legacy='true']) #navigator-toolbox:is([zen-user-hover='true']:hover, :not([zen-user-hover='true'])) {
         padding-right: 47px !important;
       }
+      
+      & #zen-profile-button {
+        width: 100% !important;
+        padding: var(--toolbarbutton-inner-padding) !important;
+  
+        & label {
+          padding-left: calc(var(--toolbarbutton-inner-padding) * 1.5);
+        }
+      }
     }
   }
 
@@ -235,6 +307,31 @@
           }
         }
       }
+
+      #vertical-pinned-tabs-container {
+        display: flex;
+        flex-direction: column;
+        gap: 0 !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;
+      }
     }
   }
 
@@ -278,7 +375,7 @@
     #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
     #navigator-toolbox:has(.tabbrowser-tab:active),
     #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
-      --zen-navigation-toolbar-min-width: 3.4rem !important;
+      --zen-navigation-toolbar-min-width: 50px !important;
 
       max-width: var(--zen-navigation-toolbar-min-width) !important;
       min-width: var(--zen-navigation-toolbar-min-width) !important;
@@ -340,12 +437,6 @@
           text-align: start;
         }
       }
-
-      #navigator-toolbox,
-      #titlebar,
-      #TabsToolbar {
-        transition: .1s !important;
-      }
     }
   }
 
@@ -366,6 +457,19 @@
       &[pinned] .tab-close-button {
         display: none !important;
       }
+
+      &[selected] .tab-background {
+        background: var(--zen-colors-secondary) !important;
+      }
     }
   }
+
+  /* Customization mode */
+  :root[customizing] #navigator-toolbox {
+    overflow: hidden;
+    max-width: 0 !important;
+    margin-right: var(--zen-element-separation);
+    padding: 0 !important;
+    opacity: 0;
+  }
 }

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

@@ -103,6 +103,8 @@
   --fp-contextmenu-bgcolor: light-dark(Menu, rgb(43 42 51 / 0.95));
   --toolbar-bgcolor: transparent;
 
+  --toolbarbutton-active-background: var(--zen-colors-border) !important;
+
   --input-bgcolor: var(--zen-colors-tertiary) !important;
   --input-border-color: var(--zen-input-border-color) !important;
   --zen-themed-toolbar-bg: var(--zen-colors-tertiary);

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

@@ -285,3 +285,18 @@ button.popup-notification-dropmarker {
     padding-inline-start: 0;
   }
 }
+
+@media (-moz-bool-pref: 'zen.view.compact') or (-moz-bool-pref: 'zen.themes.tabs.legacy-location') {
+  #nav-bar {
+    padding-left: var(--zen-element-separation) !important;
+  }
+
+  .titlebar-button:last-child {
+    padding-right: var(--zen-element-separation) !important;
+  }
+}
+
+
+#PersonalToolbar:not([collapsed="true"]) {
+  padding-bottom: 6px;
+}

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

@@ -16,6 +16,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 12px;
+  pointer-events: none;
 }
 
 @media (-moz-bool-pref: 'zen.view.sidebar-expanded') {

surfer.json

@@ -18,7 +18,7 @@
       "brandShortName": "Zen Browser",
       "brandFullName": "Zen Browser",
       "release": {
-        "displayVersion": "1.0.1-a.1",
+        "displayVersion": "1.0.1-a.2",
         "github": {
           "repo": "zen-browser/desktop"
         },