mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-01-25 14:16:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Make use of the has polyfill for toolbar compact mode, p=#10883, c=compact-mode, tabs, workspaces

Browse Source
This commit is contained in:
mr. m
2025-10-20 17:17:59 +02:00
committed by GitHub
parent a53b4f9c94
commit c883572de8
5 changed files with 35 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/zen/common/ZenHasPolyfill.mjs
View File

@@ -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);
}
}
};

21
src/zen/compact-mode/ZenCompactMode.mjs
View File

@@ -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');
}

12
src/zen/compact-mode/toolbar.inc.css
View File

@@ -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;

4
src/zen/tabs/zen-tabs/vertical-tabs-topbar.inc.css
View File

@@ -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 {

28
src/zen/workspaces/ZenGradientGenerator.mjs
View File

@@ -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]})`
);