corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1954490 - Improve contrast between active tab and tabstrip. r=desktop-theme-reviewers,reusable-components-reviewers,emilio,mstriemer

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D243454
This commit is contained in:
Julian Gaibler
2025-04-17 13:07:02 +00:00
parent bbc73b381b
commit 3a1fd68604
11 changed files with 68 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
browser/base/content/test/performance/browser_startup_flicker.js
View File

@@ -20,6 +20,8 @@ add_task(async function () {
let unexpectedRects = 0; let unexpectedRects = 0;
let alreadyFocused = false; let alreadyFocused = false;
let inRange = (val, min, max) => min <= val && val <= max;
let tabBoundingRect = undefined;
for (let i = 1; i < frames.length; ++i) { for (let i = 1; i < frames.length; ++i) {
let frame = frames[i], let frame = frames[i],
previousFrame = frames[i - 1]; previousFrame = frames[i - 1];
@@ -41,6 +43,22 @@ add_task(async function () {
/** /**
* Please don't add anything new unless justified! * Please don't add anything new unless justified!
*/ */
{
name: "Shadow around active tab should not flicker on macOS (bug 1960967)",
condition(r) {
const tabRect = tabBoundingRect
? tabBoundingRect
: (tabBoundingRect = gBrowser.tabContainer
.querySelector("tab[selected=true] .tab-background")
.getBoundingClientRect());
return (
inRange(r.x1, tabRect.x - 2, tabRect.x + 2) &&
inRange(r.y1, tabRect.y - 2, tabRect.y + 2) &&
inRange(r.w, tabRect.width - 4, tabRect.width + 4) &&
inRange(r.h, tabRect.height - 4, tabRect.height + 4)
);
},
},
]; ];
let rectText = `${rect.toSource()}, window width: ${width}`; let rectText = `${rect.toSource()}, window width: ${width}`;

3
browser/base/content/test/performance/browser_windowclose.js
View File

@@ -33,6 +33,9 @@ add_task(async function () {
waitForFocus(resolve, win); waitForFocus(resolve, win);
}); });
// Disable active tab shadow, which causes flickering (bug 1960967)
win.gBrowser.tabContainer.setAttribute("noshadowfortests", "true");
// At the time of writing, there are no reflows on window closing. // At the time of writing, there are no reflows on window closing.
// Mochitest will fail if we have no assertions, so we add one here // Mochitest will fail if we have no assertions, so we add one here
// to make sure nobody adds any new ones. // to make sure nobody adds any new ones.

17
browser/base/content/test/performance/browser_windowopen.js
View File

@@ -41,6 +41,7 @@ add_task(async function () {
let alreadyFocused = false; let alreadyFocused = false;
let inRange = (val, min, max) => min <= val && val <= max; let inRange = (val, min, max) => min <= val && val <= max;
let tabBoundingRect = undefined;
let expectations = { let expectations = {
expectedReflows: EXPECTED_REFLOWS, expectedReflows: EXPECTED_REFLOWS,
frames: { frames: {
@@ -108,6 +109,22 @@ add_task(async function () {
) && // in the toolbar ) && // in the toolbar
inRange(r.x1, 30, 90), // close to the left of the screen inRange(r.x1, 30, 90), // close to the left of the screen
}, },
{
name: "Shadow around active tab should not flicker on macOS (bug 1960967)",
condition(r) {
const tabRect = tabBoundingRect
? tabBoundingRect
: (tabBoundingRect = gBrowser.tabContainer
.querySelector("tab[selected=true] .tab-background")
.getBoundingClientRect());
return (
inRange(r.x1, tabRect.x - 2, tabRect.x + 2) &&
inRange(r.y1, tabRect.y - 2, tabRect.y + 2) &&
inRange(r.w, tabRect.width - 4, tabRect.width + 4) &&
inRange(r.h, tabRect.height - 4, tabRect.height + 4)
);
},
},
], ],
}, },
}; };

2
browser/themes/BuiltInThemeConfig.sys.mjs
View File

@@ -22,7 +22,7 @@ export const BuiltInThemeConfig = new Map([
[ [
"firefox-compact-light@mozilla.org", "firefox-compact-light@mozilla.org",
{ {
version: "1.3.1", version: "1.3.2",
path: "resource://builtin-themes/light/", path: "resource://builtin-themes/light/",
}, },
], ],

6
browser/themes/addons/light/manifest.json
View File

@@ -10,7 +10,7 @@
"name": "Light", "name": "Light",
"description": "A theme with a light color scheme.", "description": "A theme with a light color scheme.",
"author": "Mozilla", "author": "Mozilla",
"version": "1.3.1", "version": "1.3.2",
"icons": { "32": "icon.svg" }, "icons": { "32": "icon.svg" },
@@ -20,8 +20,8 @@
"tab_selected": "#fff", "tab_selected": "#fff",
"tab_text": "rgb(21,20,26)", "tab_text": "rgb(21,20,26)",
"icons": "rgb(91,91,102)", "icons": "rgb(91,91,102)",
"frame": "rgb(240, 240, 244)", "frame": "rgb(234, 234, 237)",
"frame_inactive": "rgb(235, 235, 239)", "frame_inactive": "rgb(240, 240, 244)",
"popup": "#fff", "popup": "#fff",
"popup_text": "rgb(21,20,26)", "popup_text": "rgb(21,20,26)",
"popup_border": "rgb(240,240,244)", "popup_border": "rgb(240,240,244)",

2
browser/themes/shared/browser-colors.css
View File

@@ -111,7 +111,7 @@
/* stylelint-disable-next-line media-query-no-invalid */ /* stylelint-disable-next-line media-query-no-invalid */
@media not ((-moz-windows-mica) or ((-moz-windows-accent-color-in-titlebar) and -moz-pref("browser.theme.windows.accent-color-in-tabs.enabled"))) { @media not ((-moz-windows-mica) or ((-moz-windows-accent-color-in-titlebar) and -moz-pref("browser.theme.windows.accent-color-in-tabs.enabled"))) {
--toolbox-bgcolor: light-dark(rgb(240, 240, 244), rgb(28, 27, 34)); --toolbox-bgcolor: light-dark(rgb(234, 234, 237), rgb(28, 27, 34));
--toolbox-textcolor: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); --toolbox-textcolor: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
--toolbox-bgcolor-inactive: var(--toolbox-bgcolor); --toolbox-bgcolor-inactive: var(--toolbox-bgcolor);
--toolbox-textcolor-inactive: var(--toolbox-textcolor); --toolbox-textcolor-inactive: var(--toolbox-textcolor);

4
mozglue/misc/PreXULSkeletonUI.cpp
View File

@@ -1365,9 +1365,7 @@ ThemeColors GetTheme(ThemeMode themeId) {
theme.tabColor = 0xf9f9fb; theme.tabColor = 0xf9f9fb;
theme.toolbarForegroundColor = 0xdddde1; theme.toolbarForegroundColor = 0xdddde1;
theme.tabOutlineColor = 0xdddde1; theme.tabOutlineColor = 0xdddde1;
// found in browser-aero.css ":root[customtitlebar]:not(:-moz-lwtheme)" theme.titlebarColor = 0xeaeaed;
// (set to "hsl(235,33%,19%)")
theme.titlebarColor = 0xf0f0f4;
// --chrome-content-separator-color in browser.css // --chrome-content-separator-color in browser.css
theme.chromeContentDividerColor = 0xe1e1e2; theme.chromeContentDividerColor = 0xe1e1e2;
// controlled by css variable --toolbar-color // controlled by css variable --toolbar-color

8
toolkit/themes/shared/design-system/design-tokens.json
View File

@@ -1229,7 +1229,7 @@
"box": { "box": {
"shadow": { "shadow": {
"level-1": { "level-1": {
"value": "0 0.125px 0.25px {box.shadow.color.darker.layer-1}, 0 1px 2px {box.shadow.color.darker.layer-2}" "value": "0 0 1px {box.shadow.color.darker.layer-1}, 0 1px 2px {box.shadow.color.darker.layer-2}"
}, },
"level-2": { "level-2": {
"value": "0 0.25px 0.75px {box.shadow.color.lighter.layer-1}, 0 2px 6px {box.shadow.color.lighter.layer-2}" "value": "0 0.25px 0.75px {box.shadow.color.lighter.layer-1}, 0 2px 6px {box.shadow.color.lighter.layer-2}"
@@ -1256,14 +1256,14 @@
"darker": { "darker": {
"layer-1": { "layer-1": {
"value": { "value": {
"light": "rgba(0, 0, 0, 0.1)", "light": "rgba(0, 0, 0, 0.15)",
"dark": "rgba(0, 0, 0, 0.4)" "dark": "rgba(0, 0, 0, 0.2)"
} }
}, },
"layer-2": { "layer-2": {
"value": { "value": {
"light": "rgba(0, 0, 0, 0.2)", "light": "rgba(0, 0, 0, 0.2)",
"dark": "rgba(0, 0, 0, 0.8)" "dark": "rgba(0, 0, 0, 0.4)"
} }
} }
}, },

10
toolkit/themes/shared/design-system/tokens-figma-theme.json
View File

@@ -403,8 +403,8 @@
"forcedColors": "664px" "forcedColors": "664px"
}, },
"box/shadow/level-1/shadow-1/x": 0, "box/shadow/level-1/shadow-1/x": 0,
"box/shadow/level-1/shadow-1/y": 0.125, "box/shadow/level-1/shadow-1/y": 0,
"box/shadow/level-1/shadow-1/blur": 0.25, "box/shadow/level-1/shadow-1/blur": 1,
"box/shadow/level-1/shadow-1/spread": 0, "box/shadow/level-1/shadow-1/spread": 0,
"box/shadow/level-1/shadow-1/color": "{Theme$box/shadow/color/darker/layer-1}", "box/shadow/level-1/shadow-1/color": "{Theme$box/shadow/color/darker/layer-1}",
"box/shadow/level-1/shadow-1/inset": false, "box/shadow/level-1/shadow-1/inset": false,
@@ -451,13 +451,13 @@
"box/shadow/level-4/shadow-2/color": "{Theme$box/shadow/color/lighter/layer-2}", "box/shadow/level-4/shadow-2/color": "{Theme$box/shadow/color/lighter/layer-2}",
"box/shadow/level-4/shadow-2/inset": false, "box/shadow/level-4/shadow-2/inset": false,
"box/shadow/color/darker/layer-1": { "box/shadow/color/darker/layer-1": {
"light": "rgba(0, 0, 0, 0.1)", "light": "rgba(0, 0, 0, 0.15)",
"dark": "rgba(0, 0, 0, 0.4)", "dark": "rgba(0, 0, 0, 0.2)",
"forcedColors": "transparent" "forcedColors": "transparent"
}, },
"box/shadow/color/darker/layer-2": { "box/shadow/color/darker/layer-2": {
"light": "rgba(0, 0, 0, 0.2)", "light": "rgba(0, 0, 0, 0.2)",
"dark": "rgba(0, 0, 0, 0.8)", "dark": "rgba(0, 0, 0, 0.4)",
"forcedColors": "transparent" "forcedColors": "transparent"
}, },
"box/shadow/color/lighter/layer-1": { "box/shadow/color/lighter/layer-1": {

6
toolkit/themes/shared/design-system/tokens-shared.css
View File

@@ -30,11 +30,11 @@
/** Box Shadow **/ /** Box Shadow **/
--box-shadow-card: var(--box-shadow-level-2); --box-shadow-card: var(--box-shadow-level-2);
--box-shadow-card-hover: var(--box-shadow-level-4); --box-shadow-card-hover: var(--box-shadow-level-4);
--box-shadow-color-darker-layer-1: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)); --box-shadow-color-darker-layer-1: light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.2));
--box-shadow-color-darker-layer-2: light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8)); --box-shadow-color-darker-layer-2: light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
--box-shadow-color-lighter-layer-1: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2)); --box-shadow-color-lighter-layer-1: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2));
--box-shadow-color-lighter-layer-2: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)); --box-shadow-color-lighter-layer-2: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
--box-shadow-level-1: 0 0.125px 0.25px var(--box-shadow-color-darker-layer-1), 0 1px 2px var(--box-shadow-color-darker-layer-2); --box-shadow-level-1: 0 0 1px var(--box-shadow-color-darker-layer-1), 0 1px 2px var(--box-shadow-color-darker-layer-2);
--box-shadow-level-2: 0 0.25px 0.75px var(--box-shadow-color-lighter-layer-1), 0 2px 6px var(--box-shadow-color-lighter-layer-2); --box-shadow-level-2: 0 0.25px 0.75px var(--box-shadow-color-lighter-layer-1), 0 2px 6px var(--box-shadow-color-lighter-layer-2);
--box-shadow-level-3: 0 0.375px 1.5px var(--box-shadow-color-lighter-layer-1), 0 3px 12px var(--box-shadow-color-lighter-layer-2); --box-shadow-level-3: 0 0.375px 1.5px var(--box-shadow-color-lighter-layer-1), 0 3px 12px var(--box-shadow-color-lighter-layer-2);
--box-shadow-level-4: 0 0.5px 2px var(--box-shadow-color-lighter-layer-1), 0 4px 16px var(--box-shadow-color-lighter-layer-2); --box-shadow-level-4: 0 0.5px 2px var(--box-shadow-color-lighter-layer-1), 0 4px 16px var(--box-shadow-color-lighter-layer-2);

24
toolkit/themes/shared/design-system/tokens-storybook.mjs
View File

@@ -900,7 +900,7 @@ export const storybookTables = {
"box-shadow": [ "box-shadow": [
{ {
value: value:
"0 0.125px 0.25px var(--box-shadow-color-darker-layer-1), 0 1px 2px var(--box-shadow-color-darker-layer-2)", "0 0 1px var(--box-shadow-color-darker-layer-1), 0 1px 2px var(--box-shadow-color-darker-layer-2)",
name: "--box-shadow-level-1", name: "--box-shadow-level-1",
}, },
{ {
@@ -924,17 +924,17 @@ export const storybookTables = {
{ value: "var(--box-shadow-level-3)", name: "--box-shadow-popup" }, { value: "var(--box-shadow-level-3)", name: "--box-shadow-popup" },
{ {
value: { value: {
light: "rgba(0, 0, 0, 0.1)", light: "rgba(0, 0, 0, 0.15)",
dark: "rgba(0, 0, 0, 0.4)", dark: "rgba(0, 0, 0, 0.2)",
default: "light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4))", default: "light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.2))",
}, },
name: "--box-shadow-color-darker-layer-1", name: "--box-shadow-color-darker-layer-1",
}, },
{ {
value: { value: {
light: "rgba(0, 0, 0, 0.2)", light: "rgba(0, 0, 0, 0.2)",
dark: "rgba(0, 0, 0, 0.8)", dark: "rgba(0, 0, 0, 0.4)",
default: "light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8))", default: "light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4))",
}, },
name: "--box-shadow-color-darker-layer-2", name: "--box-shadow-color-darker-layer-2",
}, },
@@ -1514,7 +1514,7 @@ export const variableLookupTable = {
"space-xlarge": "calc(6 * var(--space-xsmall))", "space-xlarge": "calc(6 * var(--space-xsmall))",
"space-xxlarge": "calc(8 * var(--space-xsmall))", "space-xxlarge": "calc(8 * var(--space-xsmall))",
"box-shadow-level-1": "box-shadow-level-1":
"0 0.125px 0.25px var(--box-shadow-color-darker-layer-1), 0 1px 2px var(--box-shadow-color-darker-layer-2)", "0 0 1px var(--box-shadow-color-darker-layer-1), 0 1px 2px var(--box-shadow-color-darker-layer-2)",
"box-shadow-level-2": "box-shadow-level-2":
"0 0.25px 0.75px var(--box-shadow-color-lighter-layer-1), 0 2px 6px var(--box-shadow-color-lighter-layer-2)", "0 0.25px 0.75px var(--box-shadow-color-lighter-layer-1), 0 2px 6px var(--box-shadow-color-lighter-layer-2)",
"box-shadow-level-3": "box-shadow-level-3":
@@ -1526,14 +1526,14 @@ export const variableLookupTable = {
"box-shadow-card-hover": "var(--box-shadow-level-4)", "box-shadow-card-hover": "var(--box-shadow-level-4)",
"box-shadow-popup": "var(--box-shadow-level-3)", "box-shadow-popup": "var(--box-shadow-level-3)",
"box-shadow-color-darker-layer-1": { "box-shadow-color-darker-layer-1": {
light: "rgba(0, 0, 0, 0.1)", light: "rgba(0, 0, 0, 0.15)",
dark: "rgba(0, 0, 0, 0.4)", dark: "rgba(0, 0, 0, 0.2)",
default: "light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4))", default: "light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.2))",
}, },
"box-shadow-color-darker-layer-2": { "box-shadow-color-darker-layer-2": {
light: "rgba(0, 0, 0, 0.2)", light: "rgba(0, 0, 0, 0.2)",
dark: "rgba(0, 0, 0, 0.8)", dark: "rgba(0, 0, 0, 0.4)",
default: "light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8))", default: "light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4))",
}, },
"box-shadow-color-lighter-layer-1": { "box-shadow-color-lighter-layer-1": {
light: "rgba(0, 0, 0, 0.05)", light: "rgba(0, 0, 0, 0.05)",