1704201 - The container-tab indicator can blend into the toolbar color (e.g. pink strip for Shopping clashes with Alpenglow colors)

Status: NEW

(Firefox :: Theme, defect, P5)

Description

[Daniel Holbert [:dholbert]]

Attachment: screenshot (with arrow pointing to the barely-noticeable pink bar)

STR:

1. Ensure you have the proton pref enabled (it's enabled by default in Nightly as of earlier this week)
2. Turn on the Alpenglow theme (which ships by default with Firefox)
3. Open a new "shopping" container-tab (e.g. by long-pressing the "+" icon)
4. Look at the tabstrip and try to distinguish between that tab and the other ones.

ACTUAL RESULTS:
There's a pink strip just above the tab, but it's really hard to see, since (with proton) it's layered on top of the toolbar background, and it happens to be the same color that Alpenglow uses for the tabstrip background.

EXPECTED RESULTS:
Should be able to distinguish between container tabs and other tabs by looking at the tabstrip.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot with Proton disabled, for comparison (pink indicator-bar is easier to see due to being overlayed on gray part of tab)

Here's a screenshot with Proton disabled, for comparison.

For the foreground tab at least, it's easier to see this pink-line indicator on the tab, since it's drawn over the tab's gray background (and it stands out against that).

Comment 2

[Daniel Holbert [:dholbert]]

(Note that this was already sort of a problem pre-proton, for background tabs -- the pink label was and still is pretty hard to see there. But for the foreground tab at least, it used to be a fairly noticeable indicator, and you can't really see it anymore [with Alpenglow], as shown in the screenshots.)

Comment 3

[Daniel Holbert [:dholbert]]

I should clarify: the attached screenshots are taken in Linux Nightly. I can also reproduce in macOS Nightly, if my macOS system theme is "light". I haven't tested in Windows, but I assume this is reproducible there, too.

(If I have a macOS "dark" system theme, then alpenglow uses a darker color for the tabstrip background, which is more purple than pink; and the contrast there is sufficient for me to see the container-tab's pink bar over the tabstrip background.)

Comment 4

[Sam Foster [:sfoster] (he/him)]

Linking to bug 1704347 which is being tracked for a11y and distinguishability problems. You could fix this without completely redesigning the tabs of course, but I think they should be considered together.

Comment 6

[Danny Colin [:sdk]]

:dao since you closed bug 1703029 as a duplicate, does it mean that this bug will aim to fix this issue for all themes and not only Alpenglow. I'm asking because that does influence what kind of patch would be acceptable for this bug.

If it's limited to Alpenglow, we could tweak the CSS custom properties with the theme experiment. However, if we want to have a patch that covers any custom theme, we'd have to think about a better solution like exposing container indicator colors through the WebExtension API (bug 1796236).

The latter would prevent us from the need of redesigning the tab like :sfoster is suggesting and it might not need to depend as much or at all on UX to approve this.

Also possible duplicates:

• https://bugzilla.mozilla.org/show_bug.cgi?id=1715763
• https://bugzilla.mozilla.org/show_bug.cgi?id=1586960

Comment 7

[Sam Foster [:sfoster] (he/him)]

I don't think there's any point in tweaking the colors to "fix" a particular theme. It will just break some other theme. Any fix to this issue needs to work for all themes or not at all.

I'm also not sure that giving themes control over how we differentiate containers is necessarily the solution - though its worth exploring. Fundamentally, if the only cue is color, we're always going to have this problem in one way or another.

Comment 8

[Dão Gottwald [:dao]]

Yeah, we're looking for a solution that isn't specific to Alpenglow. The proton regression in particular, shown in the screenshots, could be fixed by moving the indicator back into the tab, although that would only help with the selected tab.

Comment 9

[Danny Colin [:sdk]]

[:dao] Yeah, we're looking for a solution that isn't specific to Alpenglow. The proton regression in particular, shown in the screenshots, could be fixed by moving the indicator back into the tab, although that would only help with the selected tab.

It would only help if the tab background color has enough contrast with the 8 hardcoded colors for containers. This isn't necessarily the case with all themes.

[:sfoster] I don't think there's any point in tweaking the colors to "fix" a particular theme. It will just break some other theme. Any fix to this issue needs to work for all themes or not at all.

I totally agree that it's best to have a solution that covers all themes ;).

I'm also not sure that giving themes control over how we differentiate containers is necessarily the solution - though its worth exploring. Fundamentally, if the only cue is color, we're always going to have this problem in one way or another.

I can think of one scenario, colorblindness, that wouldn't be covered be simply exposing the 8 hardcoded colors. We could always, in a follow-up bug, implement a solution for that in the Theming API as a more general effort to make themes more accessible. We do expose the container name in the tooltip as an alternative but I agree there might be a better solution to visually identify containers in the tabbar. Exposing colors could be part of that biggest solution too.

What other scenarios do you think isn't covered by exposing the colors to theme authors?