mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-04-25 08:44:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: Improved swipe performance and new toolbar bg for compact mode, b=no-bug, c=common, compact-mode, tabs, workspaces

Browse Source
This commit is contained in:
mr. m
2025-09-12 16:10:48 +02:00
parent dc78a44e9c
commit 6d05b86728
8 changed files with 58 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/zen/common/ZenStartup.mjs
View File

@@ -23,10 +23,14 @@
#initBrowserBackground() {
const background = document.createXULElement('box');
background.id = 'zen-browser-background';
background.classList.add('zen-browser-generic-background');
const grain = document.createXULElement('box');
grain.id = 'zen-browser-grain';
grain.classList.add('zen-browser-grain');
background.appendChild(grain);
document.getElementById('browser').prepend(background);
const toolbarBackground = background.cloneNode(true);
toolbarBackground.id = 'zen-toolbar-background';
document.getElementById('titlebar').prepend(toolbarBackground);
}
#zenInitBrowserLayout() {

24
src/zen/common/styles/zen-browser-ui.css
View File

@@ -36,7 +36,7 @@
width: 100%;
}
#zen-browser-background {
.zen-browser-generic-background {
width: 100%;
height: 100%;
position: absolute;
@@ -44,6 +44,7 @@
left: 0;
z-index: 0;
pointer-events: none;
overflow: clip;
isolation: isolate;
background: var(--zen-themed-toolbar-bg-transparent);
@@ -64,6 +65,12 @@
transition: 0s;
}
&:is(#zen-toolbar-background) {
&::after {
background: var(--zen-main-browser-background-toolbar);
}
}
@media (-moz-pref('zen.view.grey-out-inactive-windows')) {
&:-moz-window-inactive {
background: InactiveCaption;
@@ -76,8 +83,15 @@
transition: 0s;
}
:root[animating-background='true'] &::after {
mix-blend-mode: normal;
&:is(#zen-toolbar-background) {
&::before {
background: var(--zen-main-browser-background-toolbar-old);
}
}
:root[animating-background='true'] &::after,
:root[animating-background='true'] &::before {
mix-blend-mode: plus-lighter;
}
}
@@ -85,11 +99,11 @@
transition: background-color var(--inactive-window-transition);
}
& #zen-browser-grain {
& .zen-browser-grain {
display: none;
}
:root[zen-show-grainy-background='true'] & #zen-browser-grain {
:root[zen-show-grainy-background='true'] & .zen-browser-grain {
display: flex;
width: 100%;
height: 100%;

4
src/zen/common/styles/zen-theme.css
View File

@@ -208,7 +208,7 @@
--input-border-color: var(--zen-input-border-color) !important;
--zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #171717);
--zen-workspace-indicator-height: 48px;
--zen-workspace-indicator-height: 46px;
--toolbar-field-color: var(--toolbox-textcolor) !important;
@@ -277,7 +277,7 @@
&,
& panel,
& menupopup,
& #zen-browser-background,
& .zen-browser-generic-background,
& #urlbar[breakout-extend='true'],
& #tabbrowser-tabpanels browser[type='content'],
&:not([zen-should-be-dark-mode]) #zen-toast-container {

47
src/zen/compact-mode/zen-compact-mode.css
View File

@@ -5,6 +5,11 @@
*/
/* All overrides for compact mode go here */
#zen-toolbar-background {
display: none;
pointer-events: none;
}
:root[zen-compact-mode='true']:not([customizing]):not([inDOMFullscreen='true']) {
%include ../tabs/zen-tabs/vertical-tabs-topbuttons-fix.css
@@ -140,44 +145,16 @@
margin-left: 0 !important;
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--zen-dialog-background);
outline: 1px solid rgba(255,255,255,.15);
outline-offset: -1px;
box-shadow: var(--zen-big-shadow);
pointer-events: none;
z-index: -1;
& #zen-toolbar-background {
display: flex;
outline: 1px solid rgba(255, 255, 255, .15);
border-radius: calc(var(--zen-native-inner-radius) + var(--zen-element-separation) / 4 - var(--zen-compact-mode-no-padding-radius-fix, 0px));
@media -moz-pref('zen.view.compact.color-sidebar') {
background: var(--zen-main-browser-background-toolbar) !important;
background-attachment: fixed !important;
background-size: 2000px !important;
@media -moz-pref('zen.theme.acrylic-elements') {
backdrop-filter: blur(42px) saturate(110%) brightness(0.25) contrast(100%) !important;
}
z-index: -1;
box-shadow: var(--zen-big-shadow);
@media -moz-pref('zen.theme.acrylic-elements') {
backdrop-filter: blur(42px) saturate(110%) brightness(0.25) contrast(100%) !important;
}
}
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(chrome://browser/content/zen-images/grain-bg.png);
pointer-events: none;
z-index: 0;
opacity: var(--zen-grainy-background-opacity, 0);
mix-blend-mode: overlay;
transition: opacity 0.3s ease-in-out;
}
}
#navigator-toolbox[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)),

1
src/zen/tabs/zen-tabs/vertical-tabs.css
View File

@@ -742,6 +742,7 @@
/* Center items in essentials container */
& .zen-essentials-container {
will-change: transform;
justify-content: center;
grid-template-columns: 1fr !important;
padding: 0 !important;

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

@@ -1325,6 +1325,12 @@
'--zen-main-browser-background-old',
browser.document.documentElement.style.getPropertyValue('--zen-main-browser-background')
);
browser.document.documentElement.style.setProperty(
'--zen-main-browser-background-toolbar-old',
browser.document.documentElement.style.getPropertyValue(
'--zen-main-browser-background-toolbar'
)
);
browser.document.documentElement.style.setProperty(
'--zen-background-opacity',
browser.gZenThemePicker.previousBackgroundOpacity ?? 1
@@ -1648,6 +1654,7 @@
this.currentOpacity = theme.opacity ?? 0.5;
this.#currentLightness = theme.lightness ?? 50;
const gradient = this.getGradient(theme.gradientColors);
const toolbarGradient = this.getGradient(theme.gradientColors, true);
let dominantColor = this.getMostDominantColor(theme.gradientColors);
const isDefaultTheme = !dominantColor;
if (isDefaultTheme) {
@@ -1662,6 +1669,7 @@
}
this.#gradientsCache[uuid] = {
gradient,
toolbarGradient,
grain: theme.texture ?? 0,
isDarkMode,
isExplicitMode,

12
src/zen/workspaces/ZenWorkspaces.mjs
View File

@@ -1747,8 +1747,11 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature {
// Find the next workspace we are scrolling to
const nextWorkspace = workspaces.workspaces[workspaceIndex + (offsetPixels > 0 ? -1 : 1)];
if (nextWorkspace) {
const { gradient: nextGradient, grain: nextGrain } =
gZenThemePicker.getGradientForWorkspace(nextWorkspace);
const {
gradient: nextGradient,
grain: nextGrain,
toolbarGradient: nextToolbarGradient,
} = gZenThemePicker.getGradientForWorkspace(nextWorkspace);
const existingGrain = gZenThemePicker.getGradientForWorkspace(workspace).grain;
const percentage = Math.abs(offsetPixels) / 200;
await new Promise((resolve) => {
@@ -1760,6 +1763,11 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature {
'--zen-main-browser-background-old',
nextGradient
);
document.documentElement.style.setProperty(
'--zen-main-browser-background-toolbar-old',
nextToolbarGradient
);
document.documentElement.setAttribute('animating-background', 'true');
}
resolve();
});

1
src/zen/workspaces/zen-workspaces.css
View File

@@ -250,6 +250,7 @@
/* mark: workspace element */
zen-workspace {
will-change: transform;
flex-direction: column;
width: calc(100% + var(--zen-toolbox-padding) * 2);
position: absolute;