From aabde4fb0530f7d703dcbe4366789fcd83ed69d0 Mon Sep 17 00:00:00 2001 From: "Mr. M" Date: Thu, 10 Jul 2025 02:30:51 +0200 Subject: [PATCH] feat: Improve accessibility contrast checks and add mroe padding to HSL color detection, b=no-bug, c=common, workspaces --- src/browser/app/profile/windows.inc | 4 +++ .../content/zen-panels/gradient-generator.inc | 8 ++++- src/zen/common/styles/zen-theme.css | 13 ++++---- src/zen/workspaces/ZenGradientGenerator.mjs | 30 ++++++++++++------- src/zen/workspaces/ZenWorkspaces.mjs | 2 +- src/zen/workspaces/zen-workspaces.css | 4 +-- surfer.json | 2 +- 7 files changed, 41 insertions(+), 22 deletions(-) diff --git a/src/browser/app/profile/windows.inc b/src/browser/app/profile/windows.inc index 631f0e5b3..be9a83d3b 100644 --- a/src/browser/app/profile/windows.inc +++ b/src/browser/app/profile/windows.inc @@ -5,4 +5,8 @@ # Mica pref("widget.windows.mica", true); pref("widget.windows.mica.popups", true); + +# 1. DWMSBT_MAINWINDOW +# 2. DWMSBT_TRANSIENTWINDOW (default, also used for popups) +# 3(default). DWMSBT_TABBEDWINDOW pref("widget.windows.mica.toplevel-backdrop", 2); diff --git a/src/browser/base/content/zen-panels/gradient-generator.inc b/src/browser/base/content/zen-panels/gradient-generator.inc index d4d3b1449..f9cbc7de9 100644 --- a/src/browser/base/content/zen-panels/gradient-generator.inc +++ b/src/browser/base/content/zen-panels/gradient-generator.inc @@ -100,7 +100,13 @@ - + diff --git a/src/zen/common/styles/zen-theme.css b/src/zen/common/styles/zen-theme.css index 9c8219d53..cb340362a 100644 --- a/src/zen/common/styles/zen-theme.css +++ b/src/zen/common/styles/zen-theme.css @@ -121,6 +121,11 @@ color-mix(in oklch, var(--toolbox-textcolor) 15%, transparent) ); + --zen-toolbar-element-bg-hover: light-dark( + color-mix(in srgb, var(--zen-toolbar-element-bg) 75%, transparent), + color-mix(in srgb, var(--zen-toolbar-element-bg) 60%, transparent) + ); + /* Toolbar */ --tab-selected-color-scheme: inherit; @@ -130,7 +135,7 @@ --toolbarbutton-inner-padding: 5px !important; - --toolbarbutton-hover-background: var(--zen-toolbar-element-bg) !important; + --toolbarbutton-hover-background: var(--zen-toolbar-element-bg-hover) !important; --toolbarbutton-active-background: color-mix( in srgb, @@ -172,11 +177,7 @@ --toolbar-field-color: var(--toolbox-textcolor) !important; &[zen-private-window='true'] { - --zen-main-browser-background: linear-gradient( - 130deg, - light-dark(rgb(247, 217, 255), rgb(10, 6, 11)) 0%, - light-dark(rgb(242, 198, 255), rgb(19, 7, 22)) 100% - ); + --zen-main-browser-background: linear-gradient(130deg, rgb(10, 6, 11) 0%, rgb(19, 7, 22) 100%); --zen-main-browser-background-toolbar: var(--zen-main-browser-background); --zen-primary-color: light-dark(rgb(93, 42, 107), rgb(110, 48, 125)) !important; --toolbox-textcolor: currentColor !important; diff --git a/src/zen/workspaces/ZenGradientGenerator.mjs b/src/zen/workspaces/ZenGradientGenerator.mjs index 59e783fcb..39d113f90 100644 --- a/src/zen/workspaces/ZenGradientGenerator.mjs +++ b/src/zen/workspaces/ZenGradientGenerator.mjs @@ -41,7 +41,7 @@ } const MAX_OPACITY = 0.9; - const MIN_OPACITY = 0.3; + const MIN_OPACITY = AppConstants.platform === 'macosx' ? 0.3 : 0.25; const EXPLICIT_LIGHTNESS_TYPE = 'explicit-lightness'; @@ -425,7 +425,7 @@ calculateInitialPosition([r, g, b]) { // This function is called before the picker is even rendered, so we hard code the dimensions // important: If any sort of sizing is changed, make sure changes are reflected here - const padding = 20; + const padding = 30; const rect = { width: 338, height: 338, @@ -445,7 +445,7 @@ // Return a color as hsl based on the position in the gradient const gradient = this.panel.querySelector('.zen-theme-picker-gradient'); const rect = gradient.getBoundingClientRect(); - const padding = 20; // each side + const padding = 30; // each side const dotHalfSize = 36 / 2; // half the size of the dot x += dotHalfSize; y += dotHalfSize; @@ -691,7 +691,7 @@ const dotPad = this.panel.querySelector('.zen-theme-picker-gradient'); const rect = dotPad.getBoundingClientRect(); - const padding = 20; + const padding = 30; let updatedDots = [...dots]; const centerPosition = { x: rect.width / 2, y: rect.height / 2 }; @@ -840,7 +840,7 @@ const gradient = this.panel.querySelector('.zen-theme-picker-gradient'); const rect = gradient.getBoundingClientRect(); - const padding = 20; + const padding = 30; const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; @@ -973,7 +973,7 @@ if (this.dragging) { event.preventDefault(); const rect = this.panel.querySelector('.zen-theme-picker-gradient').getBoundingClientRect(); - const padding = 20; // each side + const padding = 30; // each side // do NOT let the ball be draged outside of an imaginary circle. You can drag it anywhere inside the circle // if the distance between the center of the circle and the dragged ball is bigger than the radius, then the ball // should be placed on the edge of the circle. If it's inside the circle, then the ball just follows the mouse @@ -1074,7 +1074,13 @@ } luminance([r, g, b]) { - return 0.2126 * (r / 255) + 0.7152 * (g / 255) + 0.0722 * (b / 255); + // These magic numbers are extracted from the wikipedia article on relative luminance + // https://en.wikipedia.org/wiki/Relative_luminance + var a = [r, g, b].map((v) => { + v /= 255; + return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); + }); + return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; } contrastRatio(rgb1, rgb2) { @@ -1163,7 +1169,9 @@ let darkText = this.getToolbarColor(true); // e.g. [r, g, b, a] let lightText = this.getToolbarColor(false); // e.g. [r, g, b, a] - lightText[3] -= 0.4; // Reduce alpha for light text + if (this.canBeTransparent) { + lightText[3] -= 0.15; // Reduce alpha for light text + } // Composite text color over background darkText = this.blendColors(bg, darkText.slice(0, 3), (1 - darkText[3]) * 100); @@ -1315,7 +1323,7 @@ let workspaceTheme = theme || workspace.theme; await this.foreachWindowAsActive(async (browser) => { - if (!browser.gZenThemePicker.promiseInitialized) { + if (!browser.gZenThemePicker?.promiseInitialized) { return; } @@ -1505,7 +1513,7 @@ } if (!skipUpdate) { - this.dots = []; + browser.gZenThemePicker.dots = []; browser.gZenThemePicker.recalculateDots(workspaceTheme.gradientColors); } }); @@ -1599,7 +1607,7 @@ currentWorkspace = await gZenWorkspaces.getActiveWorkspace(); } - await this.onWorkspaceChange(currentWorkspace, true, skipSave ? gradient : null); + await this.onWorkspaceChange(currentWorkspace, skipSave, skipSave ? gradient : null); } async handlePanelClose() { diff --git a/src/zen/workspaces/ZenWorkspaces.mjs b/src/zen/workspaces/ZenWorkspaces.mjs index a89ed5e96..1e2ec606b 100644 --- a/src/zen/workspaces/ZenWorkspaces.mjs +++ b/src/zen/workspaces/ZenWorkspaces.mjs @@ -889,6 +889,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature { async initializeWorkspaces() { let activeWorkspace = await this.getActiveWorkspace(); this.activeWorkspace = activeWorkspace?.uuid; + await gZenSessionStore.promiseInitialized; try { if (activeWorkspace) { window.gZenThemePicker = new nsZenThemePicker(); @@ -897,7 +898,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature { } catch (e) { console.error('gZenWorkspaces: Error initializing theme picker', e); } - await gZenSessionStore.promiseInitialized; await this.workspaceBookmarks(); await this.initializeTabsStripSections(); this._initializeEmptyTab(); diff --git a/src/zen/workspaces/zen-workspaces.css b/src/zen/workspaces/zen-workspaces.css index 15f9fadf9..ebbe67895 100644 --- a/src/zen/workspaces/zen-workspaces.css +++ b/src/zen/workspaces/zen-workspaces.css @@ -69,7 +69,7 @@ &:hover, &[dragged='true']{ - background-color: var(--zen-toolbar-element-bg); + background-color: var(--toolbarbutton-hover-background); } & label { @@ -215,7 +215,7 @@ transition: opacity 0.1s; order: 5; --toolbarbutton-inner-padding: 6px; - --tab-border-radius: 8px; + --tab-border-radius: 6px; :root[zen-renaming-tab='true'] & { display: none; diff --git a/surfer.json b/surfer.json index bcc805fa6..80d563cb1 100644 --- a/surfer.json +++ b/surfer.json @@ -19,7 +19,7 @@ "brandShortName": "Zen", "brandFullName": "Zen Browser", "release": { - "displayVersion": "1.14.3b", + "displayVersion": "1.14.4b", "github": { "repo": "zen-browser/desktop" },