From c883572de8484f6c2713aa71ba2eb975e67d9ad0 Mon Sep 17 00:00:00 2001 From: "mr. m" <91018726+mr-cheffy@users.noreply.github.com> Date: Mon, 20 Oct 2025 17:17:59 +0200 Subject: [PATCH] feat: Make use of the has polyfill for toolbar compact mode, p=#10883, c=compact-mode, tabs, workspaces --- src/zen/common/ZenHasPolyfill.mjs | 4 +-- src/zen/compact-mode/ZenCompactMode.mjs | 21 +++++++++++--- src/zen/compact-mode/toolbar.inc.css | 12 ++++---- .../zen-tabs/vertical-tabs-topbar.inc.css | 4 +-- src/zen/workspaces/ZenGradientGenerator.mjs | 28 +++++++------------ 5 files changed, 35 insertions(+), 34 deletions(-) diff --git a/src/zen/common/ZenHasPolyfill.mjs b/src/zen/common/ZenHasPolyfill.mjs index 1f50dc4f2..4513033e9 100644 --- a/src/zen/common/ZenHasPolyfill.mjs +++ b/src/zen/common/ZenHasPolyfill.mjs @@ -24,11 +24,11 @@ const { exists: shouldExist = true } = descendantSelectors; if (exists === shouldExist) { if (!element.hasAttribute(stateAttribute)) { - element.setAttribute(stateAttribute, 'true'); + gZenCompactModeManager._setElementExpandAttribute(element, true, stateAttribute); } } else { if (element.hasAttribute(stateAttribute)) { - element.removeAttribute(stateAttribute); + gZenCompactModeManager._setElementExpandAttribute(element, false, stateAttribute); } } }; diff --git a/src/zen/compact-mode/ZenCompactMode.mjs b/src/zen/compact-mode/ZenCompactMode.mjs index 6e691f507..685607190 100644 --- a/src/zen/compact-mode/ZenCompactMode.mjs +++ b/src/zen/compact-mode/ZenCompactMode.mjs @@ -143,6 +143,7 @@ var gZenCompactModeManager = { }, addHasPolyfillObserver() { + const attributes = ['panelopen', 'open', 'breakout-extend', 'zen-floating-urlbar']; this.sidebarObserverId = ZenHasPolyfill.observeSelectorExistence( this.sidebar, [ @@ -152,8 +153,21 @@ var gZenCompactModeManager = { }, ], 'zen-compact-mode-active', - ['panelopen', 'open', 'breakout-extend', 'zen-floating-urlbar'] + attributes ); + this.toolbarObserverId = ZenHasPolyfill.observeSelectorExistence( + document.getElementById('zen-appcontent-navbar-wrapper'), + [ + { + selector: + ":is([panelopen='true'], [open='true'], #urlbar:focus-within, [breakout-extend='true']):not(.zen-compact-mode-ignore)", + }, + ], + 'zen-compact-mode-active', + attributes + ); + // Always connect this observer, we need it even if compact mode is disabled + ZenHasPolyfill.connectObserver(this.toolbarObserverId); }, flashSidebarIfNecessary(aInstant = false) { @@ -601,7 +615,7 @@ var gZenCompactModeManager = { }, _setElementExpandAttribute(element, value, attr = 'zen-has-hover') { - const kVerifiedAttributes = ['zen-has-hover', 'has-popup-menu']; + const kVerifiedAttributes = ['zen-has-hover', 'has-popup-menu', 'zen-compact-mode-active']; const isToolbar = element.id === 'zen-appcontent-navbar-wrapper'; if (value) { element.setAttribute(attr, 'true'); @@ -612,8 +626,7 @@ var gZenCompactModeManager = { document.documentElement.hasAttribute('zen-has-bookmarks'))) || (this.preference && Services.prefs.getBoolPref('zen.view.compact.hide-toolbar') && - !gZenVerticalTabsManager._hasSetSingleToolbar && - !gURLBar.hasAttribute('breakout-extend'))) + !gZenVerticalTabsManager._hasSetSingleToolbar)) ) { gBrowser.tabpanels.setAttribute('has-toolbar-hovered', 'true'); } diff --git a/src/zen/compact-mode/toolbar.inc.css b/src/zen/compact-mode/toolbar.inc.css index 44554528c..db1a81a00 100644 --- a/src/zen/compact-mode/toolbar.inc.css +++ b/src/zen/compact-mode/toolbar.inc.css @@ -48,13 +48,11 @@ } } - & #zen-appcontent-navbar-wrapper[zen-has-hover], - & #zen-appcontent-navbar-wrapper[has-popup-menu], - & - #zen-appcontent-navbar-wrapper:has( - *:is([panelopen='true'], [open='true'], #urlbar:focus-within, [breakout-extend='true']):not(.zen-compact-mode-ignore) - ) { - + & #zen-appcontent-navbar-wrapper:is( + [zen-has-hover], + [has-popup-menu], + [zen-compact-mode-active] + ) { height: var(--zen-toolbar-height-with-bookmarks); overflow: inherit; diff --git a/src/zen/tabs/zen-tabs/vertical-tabs-topbar.inc.css b/src/zen/tabs/zen-tabs/vertical-tabs-topbar.inc.css index 791d52044..1ceac456b 100644 --- a/src/zen/tabs/zen-tabs/vertical-tabs-topbar.inc.css +++ b/src/zen/tabs/zen-tabs/vertical-tabs-topbar.inc.css @@ -22,9 +22,7 @@ z-index: 1; %include ../../compact-mode/windows-captions-fix-active.inc.css - &:not([zen-has-hover='true']):not([has-popup-menu]):not(:focus-within):not( - :has(*:is([panelopen='true'], [open='true'])) - ) { + &:not([zen-has-hover='true']):not([has-popup-menu]):not([zen-compact-mode-active]) { height: var(--zen-element-separation); opacity: 0; & #zen-appcontent-navbar-container { diff --git a/src/zen/workspaces/ZenGradientGenerator.mjs b/src/zen/workspaces/ZenGradientGenerator.mjs index 557e769ba..28f79ce52 100644 --- a/src/zen/workspaces/ZenGradientGenerator.mjs +++ b/src/zen/workspaces/ZenGradientGenerator.mjs @@ -1305,12 +1305,13 @@ // Do not rebuild if the workspace is not the same as the current one const windowWorkspace = await browser.gZenWorkspaces.getActiveWorkspace(); - if (windowWorkspace.uuid !== uuid && theme !== null) { + if (windowWorkspace.uuid !== uuid) { return; } // get the theme from the window workspaceTheme = this.fixTheme(theme || windowWorkspace.theme); + const docElement = browser.document.documentElement; if (!skipUpdate) { for (const dot of browser.gZenThemePicker.panel.querySelectorAll( @@ -1328,17 +1329,15 @@ } if (!skipUpdate) { - browser.document.documentElement.style.setProperty( + docElement.style.setProperty( '--zen-main-browser-background-old', - browser.document.documentElement.style.getPropertyValue('--zen-main-browser-background') + docElement.style.getPropertyValue('--zen-main-browser-background') ); - browser.document.documentElement.style.setProperty( + docElement.style.setProperty( '--zen-main-browser-background-toolbar-old', - browser.document.documentElement.style.getPropertyValue( - '--zen-main-browser-background-toolbar' - ) + docElement.style.getPropertyValue('--zen-main-browser-background-toolbar') ); - browser.document.documentElement.style.setProperty( + docElement.style.setProperty( '--zen-background-opacity', browser.gZenThemePicker.previousBackgroundOpacity ?? 1 ); @@ -1461,16 +1460,9 @@ } } - browser.document.documentElement.style.setProperty( - '--zen-main-browser-background-toolbar', - gradientToolbar - ); - browser.document.documentElement.style.setProperty( - '--zen-main-browser-background', - gradient - ); + docElement.style.setProperty('--zen-main-browser-background-toolbar', gradientToolbar); + docElement.style.setProperty('--zen-main-browser-background', gradient); const isDarkModeWindow = browser.gZenThemePicker.isDarkMode; - const docElement = browser.document.documentElement; if (isDefaultTheme) { docElement.setAttribute('zen-default-theme', 'true'); } else { @@ -1499,7 +1491,7 @@ } // Set `--toolbox-textcolor` to have a contrast with the primary color const textColor = this.getToolbarColor(isDarkMode); - document.documentElement.style.setProperty( + docElement.style.setProperty( '--toolbox-textcolor', `rgba(${textColor[0]}, ${textColor[1]}, ${textColor[2]}, ${textColor[3]})` );