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 alreadyFocused = false;
let inRange = (val, min, max) => min <= val && val <= max;
let tabBoundingRect = undefined;
for (let i = 1; i < frames.length; ++i) {
let frame = frames[i],
previousFrame = frames[i - 1];
@@ -41,6 +43,22 @@ add_task(async function () {
/**
* 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}`;

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

@@ -33,6 +33,9 @@ add_task(async function () {
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.
// Mochitest will fail if we have no assertions, so we add one here
// 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 inRange = (val, min, max) => min <= val && val <= max;
let tabBoundingRect = undefined;
let expectations = {
expectedReflows: EXPECTED_REFLOWS,
frames: {
@@ -108,6 +109,22 @@ add_task(async function () {
) && // in the toolbar
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",
{
version: "1.3.1",
version: "1.3.2",
path: "resource://builtin-themes/light/",
},
],

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

@@ -10,7 +10,7 @@
"name": "Light",
"description": "A theme with a light color scheme.",
"author": "Mozilla",
"version": "1.3.1",
"version": "1.3.2",
"icons": { "32": "icon.svg" },
@@ -20,8 +20,8 @@
"tab_selected": "#fff",
"tab_text": "rgb(21,20,26)",
"icons": "rgb(91,91,102)",
"frame": "rgb(240, 240, 244)",
"frame_inactive": "rgb(235, 235, 239)",
"frame": "rgb(234, 234, 237)",
"frame_inactive": "rgb(240, 240, 244)",
"popup": "#fff",
"popup_text": "rgb(21,20,26)",
"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 */
@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-bgcolor-inactive: var(--toolbox-bgcolor);
--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.toolbarForegroundColor = 0xdddde1;
theme.tabOutlineColor = 0xdddde1;
// found in browser-aero.css ":root[customtitlebar]:not(:-moz-lwtheme)"
// (set to "hsl(235,33%,19%)")
theme.titlebarColor = 0xf0f0f4;
theme.titlebarColor = 0xeaeaed;
// --chrome-content-separator-color in browser.css
theme.chromeContentDividerColor = 0xe1e1e2;
// controlled by css variable --toolbar-color

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

@@ -1229,7 +1229,7 @@
"box": {
"shadow": {
"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": {
"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": {
"layer-1": {
"value": {
"light": "rgba(0, 0, 0, 0.1)",
"dark": "rgba(0, 0, 0, 0.4)"
"light": "rgba(0, 0, 0, 0.15)",
"dark": "rgba(0, 0, 0, 0.2)"
}
},
"layer-2": {
"value": {
"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"
},
"box/shadow/level-1/shadow-1/x": 0,
"box/shadow/level-1/shadow-1/y": 0.125,
"box/shadow/level-1/shadow-1/blur": 0.25,
"box/shadow/level-1/shadow-1/y": 0,
"box/shadow/level-1/shadow-1/blur": 1,
"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/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/inset": false,
"box/shadow/color/darker/layer-1": {
"light": "rgba(0, 0, 0, 0.1)",
"dark": "rgba(0, 0, 0, 0.4)",
"light": "rgba(0, 0, 0, 0.15)",
"dark": "rgba(0, 0, 0, 0.2)",
"forcedColors": "transparent"
},
"box/shadow/color/darker/layer-2": {
"light": "rgba(0, 0, 0, 0.2)",
"dark": "rgba(0, 0, 0, 0.8)",
"dark": "rgba(0, 0, 0, 0.4)",
"forcedColors": "transparent"
},
"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-card: var(--box-shadow-level-2);
--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-2: light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
--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.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-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-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);

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

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