Some UI changes

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

@@ -80,6 +80,7 @@ pref('zen.view.compact.hide-toolbar', 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-expanded', false);
 pref('zen.view.sidebar-expanded.on-hover', false);
 pref('zen.view.sidebar-expanded.show-button', true);

src/browser/base/content/ZenStartup.mjs

@@ -1,129 +1,147 @@
-var ZenStartup = {
-  init() {
-    this._changeSidebarLocation();
-    this._zenInitBrowserLayout();
-    window.SessionStore.promiseInitialized.then(async () => {
-      this._focusSearchBar();
-    });
-  },
 
-  _zenInitBrowserLayout() {
-    if (this.__hasInitBrowserLayout) return;
-    this.__hasInitBrowserLayout = true;
-    this.openWatermark();
-    console.info('ZenThemeModifier: init browser layout');
-    const kNavbarItems = ['nav-bar', 'PersonalToolbar'];
-    const kNewContainerId = 'zen-appcontent-navbar-container';
-    let newContainer = document.getElementById(kNewContainerId);
-    for (let id of kNavbarItems) {
-      const node = document.getElementById(id);
-      console.assert(node, 'Could not find node with id: ' + id);
-      if (!node) continue;
-      newContainer.appendChild(node);
-    }
+{
+  const lazy = {};
+  XPCOMUtils.defineLazyPreferenceGetter(
+    lazy,
+    "sidebarHeightThrottle",
+    "zen.view.sidebar-height-throttle",
+    500
+  );
+  var ZenStartup = {
+    init() {
+      this._changeSidebarLocation();
+      this._zenInitBrowserLayout();
+      window.SessionStore.promiseInitialized.then(async () => {
+        this._focusSearchBar();
+      });
+    },
 
-    // Fix notification deck
-    document
-      .getElementById('zen-appcontent-navbar-container')
-      .appendChild(document.getElementById('tab-notification-deck-template'));
-
-    // Disable smooth scroll
-    gBrowser.tabContainer.arrowScrollbox.smoothScroll = false;
-
-    gZenVerticalTabsManager.init();
-    gZenCompactModeManager.init();
-    gZenKeyboardShortcuts.init();
-
-    function throttle(f, delay) {
-      let timer = 0;
-      return function (...args) {
-        clearTimeout(timer);
-        timer = setTimeout(() => f.apply(this, args), delay);
-      };
-    }
-
-    new ResizeObserver(throttle(this._updateTabsToolbar.bind(this), 1000)).observe(document.getElementById('tabbrowser-tabs'));
-
-    this.closeWatermark();
-  },
-
-  _updateTabsToolbar() {
-    // Set tabs max-height to the "toolbar-items" height
-    const toolbarItems = document.getElementById('tabbrowser-tabs');
-    const tabs = document.getElementById('tabbrowser-arrowscrollbox');
-    tabs.style.maxHeight = '0px'; // reset to 0
-    const toolbarRect = toolbarItems.getBoundingClientRect();
-    // -5 for the controls padding
-    let totalHeight = toolbarRect.height - 15;
-    // remove the height from other elements that aren't hidden
-    const otherElements = document.querySelectorAll('#tabbrowser-tabs > *:not([hidden="true"])');
-    for (let tab of otherElements) {
-      if (tabs === tab) continue;
-      totalHeight -= tab.getBoundingClientRect().height;
-    }
-    tabs.style.maxHeight = totalHeight + 'px';
-    console.info('ZenThemeModifier: set tabs max-height to', totalHeight + 'px');
-  },
-
-  openWatermark() {
-    if (!Services.prefs.getBoolPref('zen.watermark.enabled', false)) {
-      return;
-    }
-    const watermark = window.MozXULElement.parseXULToFragment(`
-      <html:div id="zen-watermark">
-        <image src="chrome://branding/content/about-logo.png" />
-      </html:div>
-    `);
-    document.body.appendChild(watermark);
-  },
-
-  closeWatermark() {
-    const watermark = document.getElementById('zen-watermark');
-    if (watermark) {
-      watermark.setAttribute('hidden', 'true');
-    }
-  },
-
-  _changeSidebarLocation() {
-    const legacyLocation = Services.prefs.getBoolPref('zen.themes.tabs.legacy-location', false);
-    const kElementsToAppend = ['sidebar-splitter', 'sidebar-box'];
-    if (legacyLocation) {
-      kElementsToAppend.push('navigator-toolbox');
-      window.document.documentElement.setAttribute('zen-sidebar-legacy', 'true');
-    }
-    const wrapper = document.getElementById('zen-tabbox-wrapper');
-    const appWrapepr = document.getElementById('zen-sidebar-box-container');
-    for (let id of kElementsToAppend) {
-      const elem = document.getElementById(id);
-      if (elem) {
-        wrapper.prepend(elem);
+    _zenInitBrowserLayout() {
+      if (this.__hasInitBrowserLayout) return;
+      this.__hasInitBrowserLayout = true;
+      this.openWatermark();
+      console.info('ZenThemeModifier: init browser layout');
+      const kNavbarItems = ['nav-bar', 'PersonalToolbar'];
+      const kNewContainerId = 'zen-appcontent-navbar-container';
+      let newContainer = document.getElementById(kNewContainerId);
+      for (let id of kNavbarItems) {
+        const node = document.getElementById(id);
+        console.assert(node, 'Could not find node with id: ' + id);
+        if (!node) continue;
+        newContainer.appendChild(node);
       }
-    }
-    appWrapepr.setAttribute('hidden', 'true');
 
-    const browser = document.getElementById('browser');
-    const toolbox = document.getElementById('navigator-toolbox');
-    if (!legacyLocation) {
-      browser.prepend(toolbox);
-    }
+      // Fix notification deck
+      document
+        .getElementById('zen-appcontent-navbar-container')
+        .appendChild(document.getElementById('tab-notification-deck-template'));
 
-    // remove all styles except for the width, since we are xulstoring the complet style list
-    const width = toolbox.style.width;
-    toolbox.removeAttribute('style');
-    toolbox.style.width = width;
+      // Disable smooth scroll
+      gBrowser.tabContainer.arrowScrollbox.smoothScroll = false;
 
-    // Set a splitter to navigator-toolbox
-    const splitter = document.createXULElement('splitter');
-    splitter.setAttribute('id', 'zen-sidebar-splitter');
-    splitter.setAttribute('orient', 'horizontal');
-    splitter.setAttribute('resizebefore', 'sibling');
-    splitter.setAttribute('resizeafter', 'none');
-    toolbox.insertAdjacentElement('afterend', splitter);
-  },
+      gZenVerticalTabsManager.init();
+      gZenCompactModeManager.init();
+      gZenKeyboardShortcuts.init();
 
-  _focusSearchBar() {
-    gURLBar.focus();
-  },
-};
+      function throttle(f, delay) {
+        let timer = 0;
+        return function (...args) {
+          clearTimeout(timer);
+          timer = setTimeout(() => f.apply(this, args), delay);
+        };
+      }
 
-ZenStartup.init();
+      new ResizeObserver(throttle(this._updateTabsToolbar.bind(this), lazy.sidebarHeightThrottle)).observe(document.getElementById('tabbrowser-tabs'));
+
+      this.closeWatermark();
+    },
+
+    _updateTabsToolbar() {
+      // Set tabs max-height to the "toolbar-items" height
+      const toolbarItems = document.getElementById('tabbrowser-tabs');
+      const tabs = document.getElementById('tabbrowser-arrowscrollbox');
+      tabs.style.maxHeight = '0px'; // reset to 0
+      const toolbarRect = toolbarItems.getBoundingClientRect();
+      // -5 for the controls padding
+      let totalHeight = toolbarRect.height - 15;
+      // remove the height from other elements that aren't hidden
+      const otherElements = document.querySelectorAll('#tabbrowser-tabs > *:not([hidden="true"])');
+      for (let tab of otherElements) {
+        if (tabs === tab) continue;
+        totalHeight -= tab.getBoundingClientRect().height;
+      }
+      tabs.style.maxHeight = totalHeight + 'px';
+      console.info('ZenThemeModifier: set tabs max-height to', totalHeight + 'px');
+
+      const allTabs = document.getElementById('alltabs-button');
+      allTabs.removeAttribute('hidden');
+      allTabs.removeAttribute('badged');
+      allTabs.setAttribute('class', 'toolbarbutton-1 zen-sidebar-action-button');
+      document.getElementById('zen-sidebar-icons-wrapper').prepend(
+        allTabs
+      );
+    },
+
+    openWatermark() {
+      if (!Services.prefs.getBoolPref('zen.watermark.enabled', false)) {
+        return;
+      }
+      const watermark = window.MozXULElement.parseXULToFragment(`
+        <html:div id="zen-watermark">
+          <image src="chrome://branding/content/about-logo.png" />
+        </html:div>
+      `);
+      document.body.appendChild(watermark);
+    },
+
+    closeWatermark() {
+      const watermark = document.getElementById('zen-watermark');
+      if (watermark) {
+        watermark.setAttribute('hidden', 'true');
+      }
+    },
+
+    _changeSidebarLocation() {
+      const legacyLocation = Services.prefs.getBoolPref('zen.themes.tabs.legacy-location', false);
+      const kElementsToAppend = ['sidebar-splitter', 'sidebar-box'];
+      if (legacyLocation) {
+        kElementsToAppend.push('navigator-toolbox');
+        window.document.documentElement.setAttribute('zen-sidebar-legacy', 'true');
+      }
+      const wrapper = document.getElementById('zen-tabbox-wrapper');
+      const appWrapepr = document.getElementById('zen-sidebar-box-container');
+      for (let id of kElementsToAppend) {
+        const elem = document.getElementById(id);
+        if (elem) {
+          wrapper.prepend(elem);
+        }
+      }
+      appWrapepr.setAttribute('hidden', 'true');
+
+      const browser = document.getElementById('browser');
+      const toolbox = document.getElementById('navigator-toolbox');
+      if (!legacyLocation) {
+        browser.prepend(toolbox);
+      }
+
+      // remove all styles except for the width, since we are xulstoring the complet style list
+      const width = toolbox.style.width;
+      toolbox.removeAttribute('style');
+      toolbox.style.width = width;
+
+      // Set a splitter to navigator-toolbox
+      const splitter = document.createXULElement('splitter');
+      splitter.setAttribute('id', 'zen-sidebar-splitter');
+      splitter.setAttribute('orient', 'horizontal');
+      splitter.setAttribute('resizebefore', 'sibling');
+      splitter.setAttribute('resizeafter', 'none');
+      toolbox.insertAdjacentElement('afterend', splitter);
+    },
+
+    _focusSearchBar() {
+      gURLBar.focus();
+    },
+  };
+
+  ZenStartup.init();
+}

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

@@ -194,10 +194,15 @@
   min-height: fit-content;
   --zen-sidebar-action-content-separator: calc(5px + var(--zen-tabbrowser-padding));
   padding-top: var(--zen-sidebar-action-content-separator);
-  margin-top: var(--zen-sidebar-action-content-separator);
   color-scheme: inherit !important;
 }
 
+#alltabs-button {
+  &:hover .toolbarbutton-badge-stack {
+    background: transparent !important;
+  }
+}
+
 #zen-sidebar-icons-wrapper::before {
   content: '';
   position: absolute;

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

@@ -30,30 +30,10 @@
       --zen-sidebar-action-button-width: 30px;
     }
 
-    & #vertical-tabs-newtab-button {
-      background: color-mix(in srgb, var(--button-hover-bgcolor) 40%, transparent 60%);
-    }
-
-    &::before {
-      width: 70%;
-      height: 1px;
-      background: var(--zen-colors-border);
-      content: '';
-      position: absolute;
-      top: -1px;
-      left: 50%;
-      display: none;
-      transform: translateX(-50%);
-    }
-
     &[showborder] {
       margin-top: var(--space-small);
       border-top: 0px solid transparent !important;
       padding-top: var(--space-small) !important;
-
-      &::before {
-        display: block;
-      }
     }
   }
 
@@ -256,8 +236,8 @@
   }
 
   #nav-bar > *:not(.titlebar-buttonbox-container) {
-    padding-top: 5px;
-    padding-bottom: 5px;
+    padding-top: 3px;
+    padding-bottom: 3px;
   }
 
   #TabsToolbar-customization-target {
@@ -335,17 +315,16 @@
       #newtab-button-container {
         margin: calc(var(--zen-tabbrowser-padding) - 2px);
         margin-bottom: 0;
-        margin-bottom: var(--space-small);
 
-        &[showborder] {
-          margin-top: 0;
-          padding-top: calc(var(--space-small) / 2) !important;
-        }
-
-        &::before {
-          width: 100%;
-          top: calc(100% + var(--space-small) / 2);
-          display: block;
+        & #vertical-tabs-newtab-button {
+          padding: 0 !important;
+        
+          & label {
+            display: flex;
+            text-align: start;
+            align-items: center;
+            padding: 0;
+          }
         }
       }
 
@@ -570,7 +549,7 @@
           --toolbarbutton-active-background: transparent;
         }
 
-        & label {
+        & label:not(.toolbarbutton-badge) {
           --toolbarbutton-hover-background: transparent;
           display: block !important;
           text-align: start;

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

@@ -270,3 +270,17 @@ button.popup-notification-dropmarker {
     }
   }
 }
+
+/* Other small tweaks */
+#nav-bar-customization-target {
+  /* Don't grow if potentially-user-sized elements (like the searchbar or the
+   * bookmarks toolbar item list) are too wide. This forces them to flex to the
+   * available space as much as possible, see bug 1795260. */
+  min-width: 0;
+
+  /* Add space to beginning of toolbar and make that space click the first <toolbarbutton> */
+  > :is(toolbarbutton, toolbaritem):first-child,
+  > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) {
+    padding-inline-start: 0;
+  }
+}

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

@@ -1,14 +1,14 @@
 #zen-workspaces-button {
   --zen-workspaces-button-vmargin: 0.4rem;
   border: 1px solid var(--zen-colors-border);
-  border-radius: 50px;
+  border-radius: var(--zen-button-border-radius);
   width: calc(var(--zen-sidebar-action-button-width) - 5px) !important;
-  height: calc(var(--zen-sidebar-action-button-width) - 10px) !important;
-  margin-top: var(--zen-workspaces-button-vmargin) !important;
+  height: calc(var(--zen-sidebar-action-button-width) - 5px) !important;
   margin-bottom: var(--zen-workspaces-button-vmargin) !important;
   justify-content: center;
   align-items: center;
   display: flex;
+  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
 
   :root[zen-sidebar-legacy='true'] & {
     margin-top: 0 !important;
@@ -33,6 +33,13 @@
       #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
       :not([zen-user-hover='true'])
     ) {
+
+    & #zen-workspaces-button {
+      width: calc(var(--zen-sidebar-action-button-width) - 1px) !important;
+      margin-top: .2rem;
+      height: calc(var(--zen-sidebar-action-button-width) - 10px) !important;
+    }
+    
     & #zen-workspaces-button .zen-workspace-sidebar-name {
       display: block;
     }