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: Improved contrasting and font colors, b=no-bug, c=common, tabs, workspaces

Browse source
This commit is contained in:
mr. m 2025-06-27 02:50:12 +02:00
parent 48df87da98
commit 84183910b7
No known key found for this signature in database
GPG key ID: 928E01ED4C97749F
11 changed files with 55 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -15,12 +15,6 @@ pref('zen.view.sidebar-expanded', true);
pref('zen.view.sidebar-collapsed.hide-mute-button', true);
pref('zen.view.experimental-force-window-controls-left', false);
#ifdef XP_MACOSX
pref('zen.view.grey-out-inactive-windows', false);
#else
pref('zen.view.grey-out-inactive-windows', true);
#endif
pref('zen.view.hide-window-controls', true);
pref('zen.view.experimental-no-window-controls', false);

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

@ -100,13 +100,7 @@
</defs>
</svg>
</box>
<html:input type="range" max="0.9" value="0.4" step="0.01" id="PanelUI-zen-gradient-generator-opacity"
#ifdef XP_WIN
min="0.2"
#else
min="0.15"
#endif
/>
<html:input type="range" min="0.3" 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>

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

@ -65,6 +65,10 @@
transition: 0s;
}
&:-moz-window-inactive::after {
background: var(--zen-main-browser-background-toolbar);
}
&::before {
background: var(--zen-main-browser-background-old);
opacity: calc(1 - var(--zen-background-opacity));
@ -134,14 +138,6 @@
background: ActiveCaption;
color: CaptionText;
}
@media -moz-pref('zen.view.grey-out-inactive-windows') {
transition: background-color var(--inactive-window-transition);
&:-moz-window-inactive {
background-color: InactiveCaption;
color: InactiveCaptionText;
}
}
}
#zen-appcontent-wrapper {

2
src/zen/common/styles/zen-single-components.css
View file

@ -119,6 +119,6 @@ body > #confetti {
background-color 0.1s,
scale 0.2s;
&:active {
transform: scale(0.95);
transform: scale(0.98);
}
}

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

@ -116,10 +116,7 @@
--zen-button-border-radius: 5px;
--zen-button-padding: 0.6rem 1.2rem;
--zen-toolbar-element-bg: light-dark(
color-mix(in srgb, currentColor 6%, transparent 94%),
color-mix(in srgb, currentColor 10%, transparent 90%)
) !important;
--zen-toolbar-element-bg: color-mix(in srgb, currentColor 15%, transparent 85%);
/* Toolbar */
--zen-toolbar-height: 38px;
@ -128,11 +125,7 @@
--toolbarbutton-inner-padding: 5px !important;
--toolbarbutton-hover-background: color-mix(
in srgb,
var(--zen-branding-bg-reverse) 7.5%,
transparent 92.5%
);
--toolbarbutton-hover-background: color-mix(in srgb, currentColor 6%, transparent 94%) !important;
--toolbarbutton-active-background: color-mix(
in srgb,
@ -225,23 +218,12 @@
#main-window:not([chromehidden~='toolbar']) {
min-height: 495px !important;
@media (-moz-windows-mica) or (-moz-platform: macos) {
@media (-moz-windows-mica) or (-moz-platform: macos) or ((-moz-platform: linux) and -moz-pref('zen.widget.linux.transparency')) {
background: transparent;
--zen-themed-toolbar-bg-transparent: transparent;
@media -moz-pref('widget.windows.mica.toplevel-backdrop', 2) {
--zen-themed-toolbar-bg-transparent: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3));
}
&[zen-should-be-dark-mode] {
--zen-themed-toolbar-bg-transparent: var(--zen-themed-browser-overlay-bg);
}
}
@media (-moz-platform: linux) and -moz-pref('zen.widget.linux.transparency') {
background: transparent;
--zen-themed-toolbar-bg-transparent: transparent;
&[zen-should-be-dark-mode] {
--zen-themed-toolbar-bg-transparent: var(--zen-themed-browser-overlay-bg);
}
}
&[zen-should-be-dark-mode='true'] #browser {

2
src/zen/common/styles/zen-urlbar.css
View file

@ -66,7 +66,7 @@
}
&:hover #urlbar-background {
background-color: light-dark(rgba(89, 89, 89, 0.15), rgba(255, 255, 255, 0.2)) !important;
background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2)) !important;
}
}

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

@ -1191,7 +1191,7 @@
/* Hide the button wrapper by default */
#tabs-newtab-button {
display: none;
opacity: 0.5; /* Dimmed by default */
font-weight: 500;
-moz-user-focus: ignore !important; /* Prevent focus */
}
@ -1216,7 +1216,6 @@
/* Style when placed "in urlbar" (likely a state/attribute) */
&[in-urlbar] {
background: var(--tab-selected-bgcolor) !important;
opacity: 1 !important; /* Full opacity */
box-shadow: var(--tab-selected-shadow); /* Apply selected tab shadow */
}
}
@ -1358,7 +1357,7 @@
}
&:hover .tab-background {
background: light-dark(rgba(89, 89, 89, 0.15), var(--tab-selected-bgcolor));
background: light-dark(rgba(0, 0, 0, 0.1), var(--tab-selected-bgcolor));
}
/* Optional blurred favicon background effect (if pref `zen.theme.essentials-favicon-bg` is enabled) */

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

@ -40,8 +40,8 @@
return points;
}
const MAX_OPACITY = 0.9;
const MIN_OPACITY = AppConstants.platform === 'win' ? 0.2 : 0.15;
const MAX_OPACITY = 0.8;
const MIN_OPACITY = 0.3;
class nsZenThemePicker extends ZenMultiWindowFeature {
static MAX_DOTS = 3;
@ -973,10 +973,14 @@
}
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%
// 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
return colors.map((color) => ({
c: color.isCustom
? color.c
: [Math.min(255, color.c[0]), Math.min(255, color.c[1]), Math.min(255, color.c[2])],
c: color.isCustom ? color.c : this.blendColors(color.c, colorToBlend, blendPercentage),
isCustom: color.isCustom,
algorithm: color.algorithm,
lightness: color.lightness,
@ -986,8 +990,8 @@
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) % 1 === 0) {
// If we reached a whole number (e.g., 0.1, 0.2, etc.), send a haptic feedback.
if (((this.currentOpacity * 10) | 0) % 10 === 0) {
Services.zen.playHapticFeedback();
}
this.updateCurrentWorkspace();
@ -1032,7 +1036,7 @@
return (brightest + 0.05) / (darkest + 0.05);
}
blendColorsRaw(rgb1, rgb2, percentage) {
blendColors(rgb1, rgb2, percentage) {
const p = percentage / 100;
return [
Math.round(rgb1[0] * p + rgb2[0] * (1 - p)),
@ -1048,7 +1052,7 @@
for (let i = 0; i < 10; i++) {
const mid = (low + high) / 2;
const blended = this.blendColorsRaw(dominantColor, blendTarget, mid);
const blended = this.blendColors(dominantColor, blendTarget, mid);
const contrast = this.contrastRatio(blended, blendTarget);
if (contrast >= minContrast) {
@ -1059,7 +1063,7 @@
}
}
return bestMatch || this.blendColorsRaw(dominantColor, blendTarget, 10); // fallback
return bestMatch || this.blendColors(dominantColor, blendTarget, 10); // fallback
}
getGradient(colors, forToolbar = false) {
@ -1118,7 +1122,7 @@
if (!this.canBeTransparent) {
// Blend the color with the toolbar background
const toolbarBg = this.getToolbarModifiedBaseRaw();
accentColor = this.blendColorsRaw(
accentColor = this.blendColors(
toolbarBg.slice(0, 3),
accentColor,
(1 - this.currentOpacity) * 100
@ -1260,11 +1264,6 @@
return color;
}
blendColors(rgb1, rgb2, percentage) {
const blended = this.blendColorsRaw(rgb1, rgb2, percentage);
return `rgb(${blended[0]}, ${blended[1]}, ${blended[2]})`;
}
async onWorkspaceChange(workspace, skipUpdate = false, theme = null) {
const uuid = workspace.uuid;
// Use theme from workspace object or passed theme
@ -1279,6 +1278,10 @@
return;
}
if (theme === null) {
browser.gZenThemePicker.invalidateGradientCache();
}
// 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) {
@ -1296,25 +1299,6 @@
}
}
if (this.isDarkMode) {
if (window.matchMedia('(-moz-windows-mica)').matches) {
browser.document.documentElement.style.setProperty(
'--zen-themed-browser-overlay-bg',
'transparent'
);
} else {
browser.document.documentElement.style.setProperty(
'--zen-themed-browser-overlay-bg',
'rgba(255, 255, 255, 0.3)'
);
}
} else {
browser.document.documentElement.style.setProperty(
'--zen-themed-browser-overlay-bg',
'rgba(0, 0, 0, 0.2)'
);
}
if (!skipUpdate) {
browser.document.documentElement.style.setProperty(
'--zen-main-browser-background-old',
@ -1328,7 +1312,6 @@
browser.gZenThemePicker.previousBackgroundResolve();
}
delete browser.gZenThemePicker.previousBackgroundOpacity;
browser.gZenThemePicker.invalidateGradientCache();
}
browser.gZenThemePicker.resetCustomColorList();
@ -1463,12 +1446,10 @@
browser.document.documentElement.removeAttribute('zen-should-be-dark-mode');
}
// Set `--toolbox-textcolor` to have a contrast with the primary color
const blendTarget = isDarkMode ? [255, 255, 255] : [0, 0, 0];
const blendedColor = this.blendColors(dominantColor, blendTarget, 15); // 15% dominantColor, 85% target
await gZenUIManager.motion.animate(
browser.document.documentElement,
{
'--toolbox-textcolor': blendedColor,
'--toolbox-textcolor': isDarkMode ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)',
},
{
duration: 0.05,

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

@ -650,6 +650,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
Services.prefs.setBoolPref('zen.swipe.is-fast-swipe', false);
document.documentElement.removeAttribute('swipe-gesture');
gZenUIManager.tabsWrapper.style.removeProperty('scrollbar-width');
document.documentElement.style.setProperty('--zen-background-opacity', '1');
delete this._hasAnimatedBackgrounds;
this.updateTabsContainers();
document.removeEventListener('popupshown', this.popupOpenHandler, { once: true });
@ -1674,15 +1675,23 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
const [existingBackground, existingGrain] =
await gZenThemePicker.getGradientForWorkspace(workspace);
const percentage = Math.abs(offsetPixels) / 200;
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);
}
document.documentElement.style.setProperty('--zen-background-opacity', percentage);
await new Promise((resolve) => {
requestAnimationFrame(() => {
document.documentElement.style.setProperty('--zen-background-opacity', 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
);
}
resolve();
});
});
// Fit the offsetPixels into the grain limits. Both ends may be nextGrain and existingGrain,
// so we need to use the min and max of both. For example, existing may be 0.2 and next may be 0.5,
// meaning we should convert the offset to a percentage between 0.2 and 0.5. BUT if existingGrain

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

@ -455,6 +455,6 @@
}
#PanelUI-zen-gradient-slider-wave svg path {
stroke: dimgray !important;
stroke: light-dark(rgba(77, 77, 77, 0.5), rgba(161, 161, 161, 0.5)) !important;
}
}

7
src/zen/workspaces/zen-workspaces.css
View file

@ -138,7 +138,7 @@
/* Mark workspaces indicator */
.zen-current-workspace-indicator {
padding: calc(2px + var(--tab-inline-padding) + var(--zen-toolbox-padding));
font-weight: 600;
font-weight: 500;
position: relative;
max-height: var(--zen-workspace-indicator-height);
min-height: var(--zen-workspace-indicator-height);
@ -160,7 +160,7 @@
position: absolute;
top: var(--zen-toolbox-padding);
left: calc(var(--zen-toolbox-padding) + 2px);
width: calc(100% - var(--zen-toolbox-padding) * 2 - 4px);
width: calc(100% - var(--zen-toolbox-padding) * 3);
height: calc(100% - var(--zen-toolbox-padding) * 2);
}
@ -194,7 +194,6 @@
}
.zen-current-workspace-indicator-name {
opacity: 0.5;
display: block;
white-space: nowrap;
overflow: hidden;
@ -208,6 +207,8 @@
visibility: collapse;
transition: opacity 0.1s;
order: 5;
--toolbarbutton-inner-padding: 6px;
--tab-border-radius: 8px;
:root[zen-renaming-tab='true'] & {
display: none;