Added expand on hover for tabs!

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

@@ -68,9 +68,12 @@ pref('zen.theme.toolbar-themed', true);
 pref('zen.theme.pill-button', false);
 pref('zen.view.compact', false);
 pref('zen.view.compact.hide-toolbar', false);
+
 pref('zen.view.sidebar-expanded', false);
+pref('zen.view.sidebar-expanded.on-hover', false);
 pref('zen.view.sidebar-expanded.show-button', true);
 pref('zen.view.sidebar-expanded.max-width', 400);
+
 pref('zen.keyboard.shortcuts.enabled', true);
 pref('zen.keyboard.shortcuts', ""); // Empty string means default shortcuts
 pref('zen.keyboard.shortcuts.disable-firefox', false);
@@ -127,6 +130,10 @@ pref('dom.script_loader.bytecode_cache.strategy', 2);
 // Extremly experimental features
 pref("dom.webgpu.enabled", true);
 
+// Font rendering
+pref('gfx.font_rendering.cleartype_params.rendering_mode', 5);
+pref('gfx.font_rendering.cleartype_params.gamma', 1750);
+
 #include better-fox.js
 
 // Betterfox overrides (Stay below the include directive)

src/browser/base/content/ZenUIManager.mjs

@@ -28,7 +28,9 @@ var gZenVerticalTabsManager = {
     //Services.prefs.addObserver('zen.view.compact', this._updateEvent.bind(this));
     Services.prefs.addObserver('zen.view.sidebar-expanded', this._updateEvent.bind(this));
     Services.prefs.addObserver('zen.view.sidebar-expanded.max-width', this._updateEvent.bind(this));
+    Services.prefs.addObserver('zen.view.sidebar-expanded.on-hover', this._updateOnHoverVerticalTabs.bind(this));
     this._updateMaxWidth();
+    this._updateOnHoverVerticalTabs();
     this.initRightSideOrderContextMenu();
   },
 
@@ -47,6 +49,50 @@ var gZenVerticalTabsManager = {
     document.getElementById('viewToolbarsMenuSeparator').before(fragment);
   },
 
+  _updateOnHoverVerticalTabs() {
+    const active = Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover');
+    const toolbox = document.getElementById('navigator-toolbox');
+    // Use 'var' to avoid garbage collection so we can remove the listener later
+    var listener = this._onHoverVerticalTabs.bind(this);
+    var listenerOut = this._onBlurVerticalTabs.bind(this);
+    if (active) {
+      toolbox.addEventListener('mouseover', listener);
+      toolbox.addEventListener('mouseout', listenerOut);
+    } else {
+      toolbox.removeEventListener('mouseover', listener);
+      toolbox.removeEventListener('mouseout', listenerOut);
+    }
+  },
+
+  get navigatorToolbox() {
+    if (this._navigatorToolbox) {
+      return this._navigatorToolbox;
+    }
+    this._navigatorToolbox = document.getElementById('navigator-toolbox');
+    return this._navigatorToolbox;
+  },
+
+  _onHoverVerticalTabs(event) {
+    const target = event.target;
+    const isCompactMode = Services.prefs.getBoolPref('zen.view.compact');
+    const isToolbar = target.id === 'navigator-toolbox' 
+      || target.closest('#navigator-toolbox');
+    if (isToolbar && !isCompactMode && !this.navigatorToolbox.hasAttribute('zen-user-show')) {
+      this.navigatorToolbox.setAttribute('zen-user-show', 'true');
+      Services.prefs.setBoolPref('zen.view.sidebar-expanded', true);
+    }
+  },
+
+  _onBlurVerticalTabs(event) {
+    const target = event.target;
+    const isToolbar = target.id === 'navigator-toolbox'
+      || target.closest('#navigator-toolbox');
+    if (isToolbar && this.navigatorToolbox.hasAttribute('zen-user-show')) {
+      this.navigatorToolbox.removeAttribute('zen-user-show');
+      Services.prefs.setBoolPref('zen.view.sidebar-expanded', false);
+    }
+  },
+
   _updateEvent() {
     this._updateMaxWidth();
   },

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

@@ -379,4 +379,27 @@
       margin-right: 0 !important;
     }
   }
+
+  @media (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") and (not (-moz-bool-pref: "zen.view.compact")) {
+    #navigator-toolbox[zen-user-show="true"] {
+      transition: none !important;
+      position: absolute !important;
+   
+      top: -1px;
+      left: 0px;
+
+      z-index: 1;
+      height: 100%;
+      background: var(--zen-dialog-background) !important;
+
+      border-top: 1px solid var(--zen-colors-border);
+      border-right: 1px solid var(--zen-colors-border);
+
+      border-top-right-radius: var(--zen-border-radius);
+      
+      #zen-tabbox-wrapper:has(&) {
+        padding-left: 3.4rem;
+      }
+    }
+  }
 }

src/browser/components/preferences/zen-settings.js

@@ -144,10 +144,42 @@ var gZenLooksAndFeel = {
   init() {
     this._initializeColorPicker(this._getInitialAccentColor());
     window.zenPageAccentColorChanged = this._handleAccentColorChange.bind(this);
+    this._initializeTabbarExpandForm();
     gZenThemeBuilder.init();
     gZenMarketplaceManager.init();
   },
 
+  _initializeTabbarExpandForm() {
+    const form = document.getElementById("zen-expand-tabbar-strat");
+    const radios = form.querySelectorAll("input[type=radio]");
+    const onHoverPref = "zen.view.sidebar-expanded.on-hover";
+    const defaultExpandPref = "zen.view.sidebar-expanded";
+    if (Services.prefs.getBoolPref(onHoverPref)) {
+      form.querySelector("input[value=\"hover\"]").checked = true;
+    } else if (Services.prefs.getBoolPref(defaultExpandPref)) {
+      form.querySelector("input[value=\"expand\"]").checked = true;
+    } else {
+      form.querySelector("input[value=\"none\"]").checked = true;
+    }
+    for (let radio of radios) {
+      radio.addEventListener("change", e => {
+        switch (e.target.value) {
+          case "expand":
+            Services.prefs.setBoolPref(onHoverPref, false);
+            Services.prefs.setBoolPref(defaultExpandPref, true);
+            break;
+          case "none":
+            Services.prefs.setBoolPref(onHoverPref, false);
+            Services.prefs.setBoolPref(defaultExpandPref, false);
+          case "hover":
+            Services.prefs.setBoolPref(onHoverPref, true);
+            Services.prefs.setBoolPref(defaultExpandPref, false);
+            break;
+        }
+      });
+    }
+  },
+
   _initializeColorPicker(accentColor) {
     let elem = document.getElementById("zenLooksAndFeelColorOptions");
     elem.innerHTML = "";

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -96,9 +96,23 @@
       <checkbox id="zenLooksAndFeelShowTabExpandButton"
             data-l10n-id="zen-vertical-tabs-show-expand-button"
             preference="zen.view.sidebar-expanded.show-button"/>
-      <checkbox id="zenLooksAndFeelExpandTabsByDefault"
-            data-l10n-id="zen-vertical-tabs-expand-tabs-by-default"
-            preference="zen.view.sidebar-expanded"/>
+
+      <label><html:h2 data-l10n-id="zen-vertical-tabs-expand-tabs-header"/></label>
+      <description class="description-deemphasized" data-l10n-id="zen-vertical-tabs-expand-tabs-description" />
+      <form xmlns="http://www.w3.org/1999/xhtml" id="zen-expand-tabbar-strat" autocomplete="off" class="indent">
+            <hbox>
+                  <input type="radio" name="zen-expand-tabbar-value" value="expand" data-l10n-id="zen-vertical-tabs-expand-tabs-by-default" />
+                  <span data-l10n-id="zen-vertical-tabs-expand-tabs-by-default" />
+            </hbox>
+            <hbox>
+                  <input type="radio" name="zen-expand-tabbar-value" value="hover" data-l10n-id="zen-vertical-tabs-expand-tabs-on-hover" />
+                  <span data-l10n-id="zen-vertical-tabs-expand-tabs-on-hover" />
+            </hbox>
+            <hbox>
+                  <input type="radio" name="zen-expand-tabbar-value" value="none" data-l10n-id="zen-vertical-tabs-dont-expand-tabs-by-default" />
+                  <span data-l10n-id="zen-vertical-tabs-dont-expand-tabs-by-default" />
+            </hbox>
+      </form>
 </groupbox>
 
 </html:template>

src/browser/locales/en-US/browser/preferences/zen-preferences.ftl

@@ -51,8 +51,13 @@ zen-vertical-tabs-header = Vertical Tabs
 zen-vertical-tabs-description = Manage your tabs in a vertical layout
 zen-vertical-tabs-show-expand-button = 
     .label = Show Expand Button
-zen-vertical-tabs-expand-tabs-by-default = 
-    .label = Expand Tabs by Default
+
+zen-vertical-tabs-expand-tabs-by-default = Expand Tabs by Default
+zen-vertical-tabs-dont-expand-tabs-by-default = Don't Expand Tabs by Default
+zen-vertical-tabs-expand-tabs-on-hover = Expand Tabs on Hover (Wont work on compact mode)
+
+zen-vertical-tabs-expand-tabs-header = How to expand tabs
+zen-vertical-tabs-expand-tabs-description = Choose how to expand tabs in the sidebar
 
 zen-theme-marketplace-header = Theme Store
 zen-theme-marketplace-description = Find and install themes from the store.

src/browser/themes/shared/preferences/zen-preferences.css

@@ -17,6 +17,10 @@
   margin: auto;
 }
 
+description {
+  margin-top: 0 !important;
+}
+
 groupbox {
   background: light-dark(white, color-mix(in srgb, var(--zen-primary-color) 10%, #1b1b1b 90%));
   padding-inline: unset !important;
@@ -132,6 +136,15 @@ groupbox h2 {
 
 /* Look and feel */
 
+#zen-expand-tabbar-strat {
+  display: flex;
+  flex-direction: column;
+}
+
+#zen-expand-tabbar-strat > hbox {
+  margin-top: 10px;
+}
+
 #category-zen-looks > .category-icon {
   list-style-image: url("chrome://browser/skin/customize.svg");
 }