Incorrect "close tab" button background color on hover

[BynariStar]

Chrome:

MaterialFox:

Edit: The color also appears to be incorrect when the button is active.

[muckSponge]

This has historically been difficult to get right while maintaining lightweight theme support.

Here's what it looks like in Chrome with 3 different themes:

Top and bottom themes have the same colour close button hover state between selected and non-selected tabs. The dark theme does not; non-selected tabs have a darker button background. The blue theme's close icon colour is the same as the text colour and this too is different between selected and non-selected tabs, and hovered tabs and non-hovered tabs. It's also different compared to the toolbar icon colour (see the cog icon).

So, I can match the icon colour to the tab text except for non-hovered tabs, which might just have a reduced opacity icon.

Chrome must have a dark/bright text flag set, so when the text colour is dark, it uses a specific button background colour and when it is light, it uses a different one which happens to have a different colour for selected vs non-selected tabs (yay, more complexity).

TLDR; seems like this is possible to replicate, but it's going to be headache-inducing.

[BynariStar]

I'm admittedly not very familiar with Firefox's userChrome system and what information it provides, but perhaps it's possible to do filter manipulations using the theme's color?

[muckSponge]

Firefox provides [lwthemetextcolor] and [lwt-popup-brighttext] attributes on the :root (usually this is the window element) which allows us to determine whether the text is bright or dark (and therefore whether the background colours are bright or dark, because they will be the inverse). Sometimes these attributes may be applied to toolbars as well; you can have a dark tab bar with bright text and a light nav bar with dark text, for example.

For the actual theme colours, Firefox provides CSS variables. It's not exhaustive but you can see a number of these variables being overridden in variables.css (an example is --toolbar-bgcolor). I only override them for the built-in lightweight themes and default theme (which is not actually a lightweight theme, but a lack of lightweight theme). I can tell if it is a built-in theme by checking the :root[style] attribute for specific variable declarations with specific colours - if the text colour is exactly rgb(227, 228, 230) or white, it's probably the built-in light theme, for example (and default theme wouldn't have a [style] attribute at all). I've commented above the variable overrides so I can match the variable with the name in the lightweight theme manifest, because all these variables are being set by Firefox according to the lightweight theme currently in use. Some are set procedurally, by which I mean, Firefox has inspected the theme and automatically decided certain bits of the UI should be a certain colour, but these variables are not explicitly set in the theme manifest.

I tend to call them lightweight themes because that's what they're called internally but I think Mozilla brands them externally as "Browser Themes".

Anyways, the CSS variables are the most impactful because most of Firefox's UI is either XUL, HTML, or SVG (used for icons and some background images). All of these elements can be coloured via CSS with either regular CSS like background-color: var(--some-colour) or SVG-specific CSS like fill: var(--some-colour).

The tricky part is coordinating all of these colours and behaviours in such a way that it replicates Chrome. Chrome and Firefox share an almost identical theme manifest so in theory that's not an issue, but there are certain combinations of colours which produce outlined tabs, some combinations which enforce a background on inactive tabs and buttons in the tab bar, and other intricacies such as the close tab button being different colours across different tabs depending on the theme. Firefox by default has its own way of handling these combinations so it's a lot of work to override this to match Chrome's behaviour, especially considering the behaviour varies sometimes depending on the OS.

[BynariStar]

I see, thanks for the thorough explanation. The only thing I can think to suggest then would be to create a config flag that would help better mimic Chrome on Firefox's default themes, but be likely to break compatibility with others. What's your opinion on something like that?