From 7a4a7681b97f9611dfcbb36c5dca7608ed5400b2 Mon Sep 17 00:00:00 2001 From: nitro <143457057+n7itro@users.noreply.github.com> Date: Mon, 19 Aug 2024 14:36:15 +0200 Subject: [PATCH 1/5] centered expand tab sidebar button --- src/browser/base/content/zen-styles/zen-sidebar.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/browser/base/content/zen-styles/zen-sidebar.css b/src/browser/base/content/zen-styles/zen-sidebar.css index 5930d16eb..734da711f 100644 --- a/src/browser/base/content/zen-styles/zen-sidebar.css +++ b/src/browser/base/content/zen-styles/zen-sidebar.css @@ -215,7 +215,7 @@ @media (-moz-bool-pref: "zen.view.sidebar-expanded.show-button") { #zen-expand-sidebar-button { - display: block; + display: flex; } } From fb58c429386780b46a614704780c0026ebf03f92 Mon Sep 17 00:00:00 2001 From: nitro <143457057+n7itro@users.noreply.github.com> Date: Mon, 19 Aug 2024 14:46:52 +0200 Subject: [PATCH 2/5] chore: remove unintended button shadow Tested with Browser Toolbox --- src/browser/base/content/zen-styles/zen-sidebar.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/browser/base/content/zen-styles/zen-sidebar.css b/src/browser/base/content/zen-styles/zen-sidebar.css index 734da711f..d6d48b5af 100644 --- a/src/browser/base/content/zen-styles/zen-sidebar.css +++ b/src/browser/base/content/zen-styles/zen-sidebar.css @@ -73,7 +73,6 @@ display: none; } -#TabsToolbar .toolbarbutton-1:hover > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack), #TabsToolbar .toolbarbutton-1[open="true"] > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack), .zen-sidebar-action-button:hover, .zen-sidebar-action-button[open="true"] { From 1b5881c0fb89baf64618ccf2ba812e0a4a38d5de Mon Sep 17 00:00:00 2001 From: Mauro Balades Date: Mon, 19 Aug 2024 17:25:00 +0200 Subject: [PATCH 3/5] Added expand on hover for tabs! --- src/browser/app/profile/zen-browser.js | 7 +++ src/browser/base/content/ZenUIManager.mjs | 46 +++++++++++++++++++ .../zen-styles/zen-tabs/vertical-tabs.css | 23 ++++++++++ .../components/preferences/zen-settings.js | 32 +++++++++++++ .../preferences/zenLooksAndFeel.inc.xhtml | 20 ++++++-- .../browser/preferences/zen-preferences.ftl | 9 +++- .../shared/preferences/zen-preferences.css | 13 ++++++ 7 files changed, 145 insertions(+), 5 deletions(-) diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index 97bb4b15f..e87871597 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/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) diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs index c6f235fcb..c0a4b8663 100644 --- a/src/browser/base/content/ZenUIManager.mjs +++ b/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(); }, diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css index fab835df1..bd455a684 100644 --- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css +++ b/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; + } + } + } } diff --git a/src/browser/components/preferences/zen-settings.js b/src/browser/components/preferences/zen-settings.js index 0d5d18d1e..f2e9851d0 100644 --- a/src/browser/components/preferences/zen-settings.js +++ b/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 = ""; diff --git a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml index b0d497449..02dda0754 100644 --- a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml +++ b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml @@ -96,9 +96,23 @@ - + + + +
+ + + + + + + + + + + + +
diff --git a/src/browser/locales/en-US/browser/preferences/zen-preferences.ftl b/src/browser/locales/en-US/browser/preferences/zen-preferences.ftl index 5e9929ce8..2772d4a9d 100644 --- a/src/browser/locales/en-US/browser/preferences/zen-preferences.ftl +++ b/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. diff --git a/src/browser/themes/shared/preferences/zen-preferences.css b/src/browser/themes/shared/preferences/zen-preferences.css index 5ee3dc57b..3e29474a2 100644 --- a/src/browser/themes/shared/preferences/zen-preferences.css +++ b/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"); } From b187c9383b990b538d46dcc72608628d1b67ab95 Mon Sep 17 00:00:00 2001 From: nitro <143457057+n7itro@users.noreply.github.com> Date: Mon, 19 Aug 2024 17:48:14 +0200 Subject: [PATCH 4/5] removed effect shadow on button press --- src/browser/base/content/zen-styles/zen-sidebar.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/browser/base/content/zen-styles/zen-sidebar.css b/src/browser/base/content/zen-styles/zen-sidebar.css index d6d48b5af..ce06d1a27 100644 --- a/src/browser/base/content/zen-styles/zen-sidebar.css +++ b/src/browser/base/content/zen-styles/zen-sidebar.css @@ -73,9 +73,7 @@ display: none; } -#TabsToolbar .toolbarbutton-1[open="true"] > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack), -.zen-sidebar-action-button:hover, -.zen-sidebar-action-button[open="true"] { +.zen-sidebar-action-button:hover { background: var(--toolbarbutton-hover-background) !important; } From cba262e090a957b8857c2175a465a8ad97367e76 Mon Sep 17 00:00:00 2001 From: Mauro Balades Date: Mon, 19 Aug 2024 19:10:44 +0200 Subject: [PATCH 5/5] feat: Add expand on hover functionality for tabs --- src/browser/base/content/ZenUIManager.mjs | 57 +--- src/browser/base/content/zen-components | 2 +- .../zen-styles/zen-tabs/vertical-tabs.css | 315 +++++++++++------- .../content/zen-styles/zen-workspaces.css | 34 +- .../components/preferences/zen-settings.js | 3 +- 5 files changed, 223 insertions(+), 188 deletions(-) diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs index c0a4b8663..d6e46354f 100644 --- a/src/browser/base/content/ZenUIManager.mjs +++ b/src/browser/base/content/ZenUIManager.mjs @@ -30,8 +30,18 @@ var gZenVerticalTabsManager = { 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(); + this._updateOnHoverVerticalTabs(); + }, + + _updateOnHoverVerticalTabs() { + let onHover = Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover'); + let sidebar = document.getElementById('navigator-toolbox'); + if (onHover) { + sidebar.setAttribute('zen-user-hover', 'true'); + } else { + sidebar.removeAttribute('zen-user-hover'); + } }, initRightSideOrderContextMenu() { @@ -49,50 +59,6 @@ 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(); }, @@ -135,6 +101,7 @@ var gZenVerticalTabsManager = { toggleExpand() { let expanded = !this.expanded; Services.prefs.setBoolPref('zen.view.sidebar-expanded', expanded); + Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false); }, }; diff --git a/src/browser/base/content/zen-components b/src/browser/base/content/zen-components index 5cb3a8da2..9a0959c50 160000 --- a/src/browser/base/content/zen-components +++ b/src/browser/base/content/zen-components @@ -1 +1 @@ -Subproject commit 5cb3a8da2c861c4aabd56a9b28d76f2db61fd80f +Subproject commit 9a0959c50e6d0622caab575501df27e80ef9c0b5 diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css index bd455a684..012cda7e1 100644 --- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css +++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css @@ -235,124 +235,131 @@ display: none; /* TODO: fix this */ } + @media (-moz-bool-pref: "zen.view.sidebar-expanded") { + #navigator-toolbox:is([zen-user-hover="true"]:hover, :not([zen-user-hover="true"])) { + & #navigator-toolbox { + --zen-navigation-toolbar-min-width: 155px; + min-width: var(--zen-navigation-toolbar-min-width) !important; + align-items: start; + transition: .2s; + width: 170px; + border: none; + padding-left: 2px; + } + + & .tab-label-container { + display: block; + } + + & #titlebar, + & #TabsToolbar, + & #TabsToolbar .toolbar-items { + width: 100%; + align-items: flex-start; + } + + & #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) { + width: 100% !important; + border-radius: 8px; + } + + & #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button):hover { + background: var(--button-hover-bgcolor); + } + + & #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-text, + & #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-icon, + & #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-badge-stack { + background: transparent !important; + } + + & #tabbrowser-arrowscrollbox-periphery > toolbarbutton { + display: flex; + justify-content: center; + align-items: center; + } + + & .tabbrowser-tab { + max-width: unset !important; + + &:not([pinned]) { + width: 100%; + + &:hover .tab-close-button { + display: block !important; + } + + & .tab-content { + position: relative; + width: 100%; + } + + & .tab-stack { + justify-content: start; + padding: 10px; + width: 100% !important; + } + + & .tab-label-container { + + #tabbrowser-tabs:not([secondarytext-unsupported]) & { + display: flex; + align-items: center; + padding-left: 10px; + } + } + } + + &:active, + .zen-sidebar-panel-button:active { + transform: scale(0.96) !important; + } + + &[pinned] { + margin: 0 !important; + } + } + + & #tabbrowser-arrowscrollbox::part(scrollbox) { + /* We have the pinned tabs on the top, next to each other, + * and the rest of the tabs are below them. */ + display: grid; + grid-template-columns: repeat(auto-fill, minmax(var(--tab-min-height), 1fr)); + padding: calc(var(--zen-tabbrowser-padding) / 2); + } + + & .tabbrowser-tab:not([pinned]), + & #tabbrowser-arrowscrollbox-periphery { + grid-column: 1 / -1; + } + + & .tabbrowser-tab[pinned] { + grid-column: span 1; + min-width: 100%; + } + + & #zen-sidebar-icons-wrapper { + width: -moz-available; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(37px, 1fr)); + transition: .1s; + } + + & #zen-sidebar-icons-wrapper::before { + width: 100%; + } + } + } + @media not (-moz-bool-pref: "zen.view.sidebar-expanded") { #navigator-toolbox { width: fit-content !important; } } - @media (-moz-bool-pref: "zen.view.sidebar-expanded") { - #navigator-toolbox { - --zen-navigation-toolbar-min-width: 155px; - min-width: var(--zen-navigation-toolbar-min-width) !important; - align-items: start; - transition: .2s; - width: 170px; - border: none; - padding-left: 2px; - } - - .tab-label-container { - display: block; - } - - #titlebar, - #TabsToolbar, - #TabsToolbar .toolbar-items { - width: 100%; - align-items: flex-start; - } - - #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) { - width: 100% !important; - border-radius: 8px; - } - - #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button):hover { - background: var(--button-hover-bgcolor); - } - - #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-text, - #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-icon, - #TabsToolbar > .toolbar-items toolbarbutton:not(#zen-workspaces-button) .toolbarbutton-badge-stack { - background: transparent !important; - } - - #tabbrowser-arrowscrollbox-periphery > toolbarbutton { - display: flex; - justify-content: center; - align-items: center; - } - - .tabbrowser-tab { - max-width: unset !important; - - &:not([pinned]) { - width: 100%; - - &:hover .tab-close-button { - display: block !important; - } - - & .tab-content { - position: relative; - width: 100%; - } - - & .tab-stack { - justify-content: start; - padding: 10px; - width: 100% !important; - } - - & .tab-label-container { - - #tabbrowser-tabs:not([secondarytext-unsupported]) & { - display: flex; - align-items: center; - padding-left: 10px; - } - } - } - - &:active, - .zen-sidebar-panel-button:active { - transform: scale(0.96) !important; - } - - &[pinned] { - margin: 0 !important; - } - } - #tabbrowser-arrowscrollbox::part(scrollbox) { - /* We have the pinned tabs on the top, next to each other, - * and the rest of the tabs are below them. */ - display: grid; - grid-template-columns: repeat(auto-fill, minmax(var(--tab-min-height), 1fr)); - padding: calc(var(--zen-tabbrowser-padding) / 2); - } - - .tabbrowser-tab:not([pinned]), - #tabbrowser-arrowscrollbox-periphery { - grid-column: 1 / -1; - } - - .tabbrowser-tab[pinned] { - grid-column: span 1; - min-width: 100%; - } - - #zen-sidebar-icons-wrapper { - width: -moz-available; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(37px, 1fr)); - transition: .1s; - } - - #zen-sidebar-icons-wrapper::before { - width: 100%; - } - } + #navigator-toolbox[zen-user-hover="true"] { + width: fit-content !important; + } /* Display the vertical tabs on the right side */ @media (-moz-bool-pref: "zen.tabs.vertical.right-side") and (not (-moz-bool-pref: "zen.view.compact")) { @@ -381,25 +388,83 @@ } @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; + #zen-sidebar-splitter { + display: none !important; + } + #navigator-toolbox { 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); + #TabsToolbar { + --hovered-verticaltab-width: 20em; + + transition: 200ms, margin 400ms, border-color 0 ease-in-out !important; + z-index: 1; + background-repeat: no-repeat !important; + background-position: center center !important; + background-size: cover !important; + + border-top: 1px solid transparent; + border-right: 1px solid transparent; border-top-right-radius: var(--zen-border-radius); - - #zen-tabbox-wrapper:has(&) { - padding-left: 3.4rem; + transform: translateY(-1px); + } + + #TabsToolbar:not(:hover) #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab .tab-content[class] > .tab-close-button[class] { + display: none !important; + visibility: hidden !important; + } + + #TabsToolbar-customization-target:hover > .toolbarbutton-1 > .toolbarbutton-text { + transition-delay: 0.2s !important; + } + + #TabsToolbar-customization-target:not(:hover) > #tabbrowser-tabs > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-content > .tab-label-container { + opacity: 0; + visibility: collapse; + transition: opacity 370ms, + visibility 370ms, + width 370ms ease-in-out !important; + } + + #TabsToolbar-customization-target:not(:hover) > .toolbarbutton-1 > .toolbarbutton-text { + opacity: 0; + visibility: collapse; + transition: all 370ms !important; + } + + #TabsToolbar-customization-target:hover > .toolbarbutton-1 > .toolbarbutton-text { + transition-delay: 0.2s !important; + } + + #TabsToolbar:hover { + padding-right: .1rem !important; + } + + #TabsToolbar:hover { + z-index: 100 !important; + width: 250px !important; + background-color: var(--zen-dialog-background); + border-top-color: var(--zen-colors-border); + border-right-color: var(--zen-colors-border); + + margin-right: calc((var(--hovered-verticaltab-width) + 10px) * -1) !important; + } + + @media (-moz-bool-pref: "zen.tabs.vertical.right-side") { + #TabsToolbar:hover { + margin-left: calc((var(--hovered-verticaltab-width) + 10px) * -1) !important; } } + + #TabsToolbar-customization-target:not(:hover) > #tabbrowser-tabs > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-content > .tab-label-container { + opacity: 0; + visibility: collapse; + transition: opacity 370ms, + visibility 370ms, + width 370ms ease-in-out !important; + } } } diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css index b4abae549..b9b23ad20 100644 --- a/src/browser/base/content/zen-styles/zen-workspaces.css +++ b/src/browser/base/content/zen-styles/zen-workspaces.css @@ -18,25 +18,27 @@ } @media (-moz-bool-pref: "zen.view.sidebar-expanded") { - #zen-workspaces-button .zen-workspace-sidebar-name { - display: block; - } + #navigator-toolbox:is([zen-user-hover="true"]:hover, :not([zen-user-hover="true"])) { + & #zen-workspaces-button .zen-workspace-sidebar-name { + display: block; + } - #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon="true"] { - display: none; - } + & #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon="true"] { + display: none; + } - #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon="true"] + .zen-workspace-sidebar-name { - margin-left: 0; - } + & #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon="true"] + .zen-workspace-sidebar-name { + margin-left: 0; + } - #zen-workspaces-button { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - display: flex; - padding: 2px 10px; - width: calc(100% - var(--zen-tabbrowser-padding) * 8) !important; + & #zen-workspaces-button { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: flex; + padding: 2px 10px; + width: calc(100% - var(--zen-tabbrowser-padding) * 8) !important; + } } } diff --git a/src/browser/components/preferences/zen-settings.js b/src/browser/components/preferences/zen-settings.js index f2e9851d0..1c220418c 100644 --- a/src/browser/components/preferences/zen-settings.js +++ b/src/browser/components/preferences/zen-settings.js @@ -171,9 +171,10 @@ var gZenLooksAndFeel = { case "none": Services.prefs.setBoolPref(onHoverPref, false); Services.prefs.setBoolPref(defaultExpandPref, false); + break; case "hover": Services.prefs.setBoolPref(onHoverPref, true); - Services.prefs.setBoolPref(defaultExpandPref, false); + Services.prefs.setBoolPref(defaultExpandPref, true); break; } });