Contrast of diving line between tabs regressed with Photon theme between 115esr and 128esr

[theres-waldo]

Abstract

When upgrading a Firefox installation from 115esr to 128esr, I noticed that the contrast of the dividing line between tabs in the Tree Style Tab sidebar (relative to the background of the tabs) has regressed with the "Photon" theme.

This can be seen in the following screenshots. Before:

After:

I used mozregression to find the regression window where the contrast changed, the window is the following:

https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=9867c50c335041a02e09cfe626f359dda31d1bae&tochange=3fe8b7d8b3f7f163eafd11115c59e2f18f20cbfc

The bugs in the regression range are all of the form "Make deprecated system color [blah] same as css-color-4 system color [blah]". They all landed in the same push to the integration branch so mozregression cannot tell me which specific commit is the cause.

It's not clear me whether this should be considered a Firefox bug, or if this is an expected sort of Firefox change that Tree Style Tab should perhaps consider adapting to (to maintain a better contrast between tabs).

Steps to reproduce

1. Start Firefox with clean profile.
2. Install TST.
3. In TST preferences, change "Theme" to "Photon".
4. Open several tabs
5. Observe the contrast between the color of the tab background, and the color of the dividing line between the tabs

Expected result

The contrast is high (it's easy to see where one tab ends and the next tab begins).

Actual result

The contrast is low (the tabs kind of blend together visually).

Environment

• Platform (OS): Linux (Debian 11 with KDE destkop environment)
• Version of Firefox: 128esr (see above for regression window)
• Version (or revision) of Tree Style Tab: 4.0.22

[piroor]

Thanks, I've introduced some changes to simulate deprecated system colors.

[mika]

Note: I'm not entirely sure, whether this is the same issue (since I'm using the same Firefox version but only different TST versions), sorry for the noise if this should be the same issue.

With Firefox v130.0 and TST v4.0.22 (2024.8.9), the Photon theme looks as expected:

Whereas with Firefox v130.0 and TST v4.0.23 (2024.9.11), the Photon theme looks strange:

Thanks for TST, I'm loving it! :)

[theres-waldo]

@mika I would suggest trying TST v4.0.22 with Firefox 115esr (or any version earlier than 124; mozregression is a convenient way to test different Firefox versions).

I suspect it may look like the second screenshot (and so TST v4.0.23 is fixing an appearance regression introduced in Firefox 124).

[theres-waldo]

I suspect it may look like the second screenshot (and so TST v4.0.23 is fixing an appearance regression introduced in Firefox 124).

Hmm, actually that's not quite true, at least on my machine: the dividing lines are darker in TST v4.0.23 than they were in v4.0.22 even in older Firefox versions. (I'm in a Wayland session right now and can't take screenshots, but I can upload some later if that would be helpful.)

[piroor]

New colors on TST 4.0.23 are defined with CSS color-mix as:

treestyletab/webextensions/resources/ui-color.css

Lines 126 to 131 in 0a2e630

	/* simulating deprecated CSS system colors */
	--ThreeDShadow: color-mix(in srgb, ButtonText 30%, ButtonFace);
	--ThreeDHighlight: color-mix(in srgb, ButtonText 5%, ButtonFace);
	--AppWorkspace: color-mix(in srgb, CanvasText 20%, Canvas);
	--MenuText: color-mix(in srgb, ButtonText 85%, ButtonFace);
	--Menu: ButtonFace;

Deprecated system colors were depend on the theme color of the platform (GNOME theme and so on) so new colors simulated by color-mix may be different from deprecated system colors. You can override them with a user style sheet like following, if you hope to apply colors exact same to the platform:

:root {
  --ThreeDShadow: rgb(xxx, xxx, xxx);
  --ThreeDHighlight: hsl(xxx, xxx, xxx);
  --MenuText: #RRGGBB;
  --Menu: #RGB;
}

[mika]

Thanks for your feedback!

FTR: I've got the same problem also with Firefox v115.15.0esr and TST v4.0.23, so it seems to be unrelated to the Firefox version, at least for me.

I don't have any desktop environment but am running only a minimal tiling window manager (i3) on Debian.

But what indeed works around the behavior for me is adjusting the user style sheet with this:

:root {
  --ThreeDShadow: #FFFFFF;
  --ThreeDHighlight: #9E9E9E9B;
}

[piroor]

@mika Run i3-config-wizard and open the file ~/.config/i3/config, if you have not prepared it. The generated file should contain color definitions of default color scheme.

[mika]

@mika Run i3-config-wizard and open the file ~/.config/i3/config, if you have not prepared it. The generated file should contain color definitions of default color scheme.

Ah interesting, thanks for the hint! Though I don't get any color definitions generated, maybe my i3 version is too old. :)

[github-actions]

This issue has been closed due to no response within 14 days after labeled as "fixed", 7 days after last reopened, and 7 days after last commented.