ZenBrowserMirrors/zen-desktop
1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-07 11:25:31 +02:00
Code Releases Wiki Activity

feat: Add grey-out effect for inactive windows and adjust opacity settings, b=no-bug, c=workspaces, styles

Browse source
This commit is contained in:
mr. m 2025-06-27 16:39:23 +02:00
parent 84183910b7
commit 5930552cdc
No known key found for this signature in database
GPG key ID: 928E01ED4C97749F
8 changed files with 36 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/browser/app/profile/features/view.inc
View file

@ -18,5 +18,7 @@ pref('zen.view.experimental-force-window-controls-left', false);
pref('zen.view.hide-window-controls', true);
pref('zen.view.experimental-no-window-controls', false);
pref('zen.view.grey-out-inactive-windows', true);
pref('zen.view.show-newtab-button-border-top', false);
pref('zen.view.show-newtab-button-top', true);

2
src/browser/base/content/zen-panels/gradient-generator.inc
View file

@ -100,7 +100,7 @@
</defs>
</svg>
</box>
<html:input type="range" min="0.3" max="0.8" value="0.4" step="0.001" id="PanelUI-zen-gradient-generator-opacity" />
<html:input type="range" min="0.2" max="0.8" value="0.4" step="0.001" id="PanelUI-zen-gradient-generator-opacity" />
</vbox>
<vbox id="PanelUI-zen-gradient-generator-texture-wrapper">
</vbox>

6
src/zen/common/styles/zen-browser-ui.css
View file

@ -65,8 +65,10 @@
transition: 0s;
}
&:-moz-window-inactive::after {
background: var(--zen-main-browser-background-toolbar);
@media (-moz-pref('zen.view.grey-out-inactive-windows')) {
&:-moz-window-inactive::after {
background: var(--zen-main-browser-background-toolbar);
}
}
&::before {

8
src/zen/common/styles/zen-theme.css
View file

@ -116,7 +116,10 @@
--zen-button-border-radius: 5px;
--zen-button-padding: 0.6rem 1.2rem;
--zen-toolbar-element-bg: color-mix(in srgb, currentColor 15%, transparent 85%);
--zen-toolbar-element-bg: light-dark(
color-mix(in srgb, currentColor 10%, transparent 90%),
color-mix(in srgb, currentColor 15%, transparent 85%)
);
/* Toolbar */
--zen-toolbar-height: 38px;
@ -240,7 +243,8 @@
& panel,
& menupopup,
& #zen-browser-background,
& #urlbar[breakout-extend='true'] {
& #urlbar[breakout-extend='true'],
& #tabbrowser-tabpanels browser[type='content'] {
@media -moz-pref('zen.theme.window.scheme', 'dark') {
color-scheme: dark;
}

2
src/zen/tabs/zen-tabs/vertical-tabs.css
View file

@ -626,8 +626,8 @@
--tab-inline-padding: 8px; /* Define padding for tab content */
& .tabbrowser-tab {
/* Show tab label */
& .tab-label-container {
opacity: 1;
display: flex;
}

19
src/zen/workspaces/ZenGradientGenerator.mjs
View file

@ -41,7 +41,7 @@
}
const MAX_OPACITY = 0.8;
const MIN_OPACITY = 0.3;
const MIN_OPACITY = 0.2;
class nsZenThemePicker extends ZenMultiWindowFeature {
static MAX_DOTS = 3;
@ -975,10 +975,11 @@
themedColors(colors) {
const colorToBlend = this.isDarkMode ? [255, 255, 255] : [0, 0, 0]; // Default to white for dark mode, black otherwise
const opacity = this.currentOpacity;
// Convert opacity into a percentage where the lowest is 80% and the highest is 100%
// Convert opacity into a percentage where the lowest is 60% and the highest is 100%
// The more transparent, the more white the color will be blended with. In order words,
// make the transparency relative to these 2 ends.
const blendPercentage = 80 + opacity * 20; // 80% to 100% range
// e.g. 0% opacity becomes 60% blend, 100% opacity becomes 100% blend
const blendPercentage = Math.max(30, 30 + opacity * 70);
return colors.map((color) => ({
c: color.isCustom ? color.c : this.blendColors(color.c, colorToBlend, blendPercentage),
isCustom: color.isCustom,
@ -991,8 +992,9 @@
onOpacityChange(event) {
this.currentOpacity = parseFloat(event.target.value);
// If we reached a whole number (e.g., 0.1, 0.2, etc.), send a haptic feedback.
if (((this.currentOpacity * 10) | 0) % 10 === 0) {
if (Math.abs((this.currentOpacity * 10) % 1) !== this._lastHapticFeedback) {
Services.zen.playHapticFeedback();
this._lastHapticFeedback = Math.abs((this.currentOpacity * 10) % 1);
}
this.updateCurrentWorkspace();
}
@ -1020,8 +1022,11 @@
let opacity = this.currentOpacity;
if (forToolbar) {
opacity = 1; // Toolbar colors should always be fully opaque
color = this.blendColors(color.c, this.getToolbarModifiedBaseRaw().slice(0, 3), 80);
} else {
color = color.c;
}
return `rgba(${color.c[0]}, ${color.c[1]}, ${color.c[2]}, ${opacity})`;
return `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${opacity})`;
}
luminance([r, g, b]) {
@ -1449,7 +1454,9 @@
await gZenUIManager.motion.animate(
browser.document.documentElement,
{
'--toolbox-textcolor': isDarkMode ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)',
'--toolbox-textcolor': isDarkMode
? 'rgba(255, 255, 255, 0.7)'
: 'rgba(23, 23, 23, 0.7)',
},
{
duration: 0.05,

16
src/zen/workspaces/ZenWorkspaces.mjs
View file

@ -706,10 +706,12 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
event.stopPropagation();
const delta = event.delta * 300;
const stripWidth = document.getElementById('tabbrowser-tabs').getBoundingClientRect().width;
const stripWidth =
document.getElementById('navigator-toolbox').getBoundingClientRect().width +
document.getElementById('zen-sidebar-splitter').getBoundingClientRect().width * 2;
let translateX = this._swipeState.lastDelta + delta;
// Add a force multiplier as we are translating the strip depending on how close to the edge we are
let forceMultiplier = Math.min(1, 1 - Math.abs(translateX) / (stripWidth * 4.5)); // 4.5 instead of 4 to add a bit of a buffer
let forceMultiplier = Math.min(1, 1 - Math.abs(translateX) / (stripWidth * 5)); // 4.5 instead of 4 to add a bit of a buffer
if (forceMultiplier > 0.5) {
translateX *= forceMultiplier;
this._swipeState.lastDelta = delta + (translateX - delta) * 0.5;
@ -1672,20 +1674,15 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (nextWorkspace) {
const [nextGradient, nextGrain] =
await gZenThemePicker.getGradientForWorkspace(nextWorkspace);
const [existingBackground, existingGrain] =
await gZenThemePicker.getGradientForWorkspace(workspace);
const [_, existingGrain] = await gZenThemePicker.getGradientForWorkspace(workspace);
const percentage = Math.abs(offsetPixels) / 200;
await new Promise((resolve) => {
requestAnimationFrame(() => {
document.documentElement.style.setProperty('--zen-background-opacity', percentage);
document.documentElement.style.setProperty('--zen-background-opacity', 1 - percentage);
if (!this._hasAnimatedBackgrounds) {
this._hasAnimatedBackgrounds = true;
document.documentElement.style.setProperty(
'--zen-main-browser-background-old',
existingBackground
);
document.documentElement.style.setProperty(
'--zen-main-browser-background',
nextGradient
);
}
@ -1783,6 +1780,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (previousBackgroundOpacity == 1 || !previousBackgroundOpacity) {
previousBackgroundOpacity = 0;
}
previousBackgroundOpacity = 1 - previousBackgroundOpacity;
gZenThemePicker.previousBackgroundOpacity = previousBackgroundOpacity;
await new Promise((resolve) => {
requestAnimationFrame(() => {

2
src/zen/workspaces/zen-gradient-generator.css
View file

@ -276,12 +276,14 @@
border: 3px solid #ffffff;
animation: zen-theme-picker-dot-animation 0.5s;
transform: translate(-50%, -50%);
pointer-events: none;
&:first-of-type {
width: 36px;
height: 36px;
border-width: 4px;
z-index: 2;
pointer-events: all;
transition: transform 0.2s;
&:hover {
transform: scale(1.05) translate(-50%, -50%);