From a4edeb5b49948cd22dc2397ff8dcd682e97dbc14 Mon Sep 17 00:00:00 2001 From: mauro-balades Date: Sat, 21 Sep 2024 16:58:22 +0200 Subject: [PATCH] Refactor ZenUIManager to add event listener for gZenCompactModeManager --- src/browser/base/content/ZenUIManager.mjs | 1 + src/browser/base/content/zen-components | 2 +- .../content/zen-styles/zen-browser-ui.css | 2 +- .../content/zen-styles/zen-compact-mode.css | 16 +++++++-------- .../zen-styles/zen-tabs/vertical-tabs.css | 20 +++++++++---------- .../content/zen-styles/zen-workspaces.css | 2 +- 6 files changed, 21 insertions(+), 22 deletions(-) diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs index 65d52ae93..52d455be3 100644 --- a/src/browser/base/content/ZenUIManager.mjs +++ b/src/browser/base/content/ZenUIManager.mjs @@ -81,6 +81,7 @@ var gZenVerticalTabsManager = { Services.prefs.addObserver('zen.tabs.vertical.right-side', updateEvent); Services.prefs.addObserver('zen.view.sidebar-expanded.max-width', updateEvent); Services.prefs.addObserver('zen.view.sidebar-expanded.on-hover', updateEvent); + gZenCompactModeManager.addEventListener(updateEvent); this._updateEvent(); this.initRightSideOrderContextMenu(); }, diff --git a/src/browser/base/content/zen-components b/src/browser/base/content/zen-components index 80a8904bb..e14fbd8e5 160000 --- a/src/browser/base/content/zen-components +++ b/src/browser/base/content/zen-components @@ -1 +1 @@ -Subproject commit 80a8904bbc1642e98d1b6cd2e5f7bcf3e0788655 +Subproject commit e14fbd8e5c069abf1717e674712229c67b80d461 diff --git a/src/browser/base/content/zen-styles/zen-browser-ui.css b/src/browser/base/content/zen-styles/zen-browser-ui.css index c7491e695..5c2b7b4cc 100644 --- a/src/browser/base/content/zen-styles/zen-browser-ui.css +++ b/src/browser/base/content/zen-styles/zen-browser-ui.css @@ -35,7 +35,6 @@ :root:not([inDOMFullscreen='true']) #appcontent { overflow: hidden; - padding: 1px; } :root:not([inDOMFullscreen='true']) #appcontent, @@ -51,4 +50,5 @@ #tabbrowser-tabbox { display: flex; flex-direction: row; + padding: 1px; /* To allow the web view's shadow to be visible */ } \ No newline at end of file diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/src/browser/base/content/zen-styles/zen-compact-mode.css index 6ae7c4e08..2004ee89c 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -43,8 +43,8 @@ border: 1px solid var(--zen-colors-border); border-left-width: 0; padding: var(--zen-toolbox-padding) !important; - transition: all 0.1s ease-in-out; - right: calc(100% - var(--zen-element-separation)); + transition: all 0.2s ease-in-out; + right: calc(100% - var(--zen-element-separation) + 1px); top: 50%; opacity: 0; @@ -54,7 +54,7 @@ border-left-width: 1px; border-right-width: 0; - left: calc(100% - var(--zen-element-separation)); + left: calc(100% - var(--zen-element-separation) - 1px); right: unset; border-top-left-radius: var(--zen-border-radius); @@ -77,9 +77,9 @@ #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) { opacity: 1; - transform: translate3d(calc(100% - var(--zen-element-separation) - 1px), -50%, 0); + transform: translate3d(calc(100% - var(--zen-element-separation)), -50%, 0); #browser:has(#navigator-toolbox[zen-right-side='true']) & { - transform: translate3d(calc(-100% + var(--zen-element-separation) + 1px), -50%, 0); + transform: translate3d(calc(-100% + var(--zen-element-separation)), -50%, 0); } } } @@ -92,16 +92,16 @@ #zen-appcontent-navbar-container { position: absolute; top: 0; - transform: translateY(calc(-100% + var(--zen-element-separation))); + transform: translateY(calc(-100% + var(--zen-element-separation) + 1px)); left: 0; z-index: 10; background: var(--zen-themed-toolbar-bg); - box-shadow: 0 0 2px 2px rgba(0,0,0,.1); + box-shadow: 0 0 2px 2px rgba(0,0,0,.1) !important; border-bottom-left-radius: var(--zen-border-radius); border-bottom-right-radius: var(--zen-border-radius); border: 1px solid var(--zen-colors-border); border-top-width: 0px; - transition: all 0.1s ease-in-out; + transition: all 0.2s ease-in-out; width: 100%; opacity: 0; } 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 187d2e8ae..b79e0c79b 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 @@ -31,8 +31,6 @@ min-width: var(--zen-toolbox-min-width); padding: var(--zen-toolbox-padding); - /* We do this to fix the padding of webview, the shadow overlaps one pixel */ - padding-left: calc(var(--zen-toolbox-padding) - 1px); padding-top: var(--zen-toolbox-top-align); padding-bottom: var(--zen-element-separation); @@ -152,7 +150,6 @@ #navigator-toolbox[zen-user-hover='true'][movingtab], #navigator-toolbox[zen-user-hover='true'][flash-popup], #navigator-toolbox[zen-user-hover='true'][has-popup-menu], - #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox, #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)), #navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])) { --zen-toolbox-min-width: fit-content; @@ -161,8 +158,13 @@ min-width: 150px; } - & #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] { - display: none; + & #zen-workspaces-button { + margin-left: 2px; + margin-right: 2px; + + & .zen-workspace-sidebar-icon[no-icon='true'] { + display: none; + } } & #zen-sidebar-icons-wrapper { @@ -274,7 +276,6 @@ #navigator-toolbox[zen-user-hover='true'][movingtab], #navigator-toolbox[zen-user-hover='true'][flash-popup], #navigator-toolbox[zen-user-hover='true'][has-popup-menu], - #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox, #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)), #navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true']))) { --zen-toolbox-max-width: 51px; @@ -434,8 +435,6 @@ } #TabsToolbar { - --hovered-verticaltab-width: 20em; - z-index: 1; background-repeat: no-repeat !important; background-position: center center !important; @@ -449,15 +448,14 @@ border-top-right-radius: var(--zen-border-radius); } - #navigator-toolbox:hover, + #navigator-toolbox[zen-has-hover], #navigator-toolbox:focus-within, #navigator-toolbox[movingtab], #navigator-toolbox[flash-popup], #navigator-toolbox[has-popup-menu], - #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: 50px !important; + --zen-navigation-toolbar-min-width: 55.5px !important; /* + the width of the splitter */ max-width: var(--zen-navigation-toolbar-min-width) !important; min-width: var(--zen-navigation-toolbar-min-width) !important; diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css index 1c0c43c0d..9678c3ccc 100644 --- a/src/browser/base/content/zen-styles/zen-workspaces.css +++ b/src/browser/base/content/zen-styles/zen-workspaces.css @@ -8,7 +8,7 @@ &:not([as-button='true']) { border-radius: var(--zen-button-border-radius); background: color-mix(in srgb, var(--zen-colors-border) 50%, transparent 50%); - padding: 6px; + padding: 5px; height: fit-content; gap: 3px;