1751807 - Foreground tab is indistinguishable from background tabs that are multiselect-selected

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P2)

Description

[Daniel Holbert [:dholbert]]

STR:

1. Open 3 or more new tabs.
2. Ctrl-click some background tab that is far away from your foreground tab, to select it.
   [Does it look any different from your foreground tab? It looks pretty similar...]
3. Now just click that selected background tab, to make it your foreground tab. Watch the tab very closely as you click it.

ACTUAL RESULTS:
The selected tab and foreground tab are indistinguishable. In particular:

• In step 2, I cannot visually distinguish my foreground tab from my selected tab.
• In step 3 (when the selected tab becomes the foreground tab), the tab's rendering does not change at all.

EXPECTED RESULTS:
There should be some visual distinction so the user can keep track of which tabs are selected vs. which one is the foreground.

Comment 1

[Daniel Holbert [:dholbert]]

There are kind of 3 distinct regressions that got us to the current state.

1. Pre-proton, the foreground tab's tab-title looked like it was "connected to the toolbar" -- it didn't have any bottom-border between the tab-title and the navigation toolbar, whereas background tabs (including multiselect-selected background tabs) were separated via a horizontal bottom-border. As part of the proton redesign, there's now no such distinction; the foreground tab and multiselect-selected tab both get a 'bubble' around the tab-title, with no "connected-to-the-toolbar" visual metaphor anymore. However, that's not fully responsible for the regression, because there were originally still some visual cues to help distinguish (though those cues have since been removed as discussed below).

2. At one point with the Proton tab-bar (before it was enabled by default), the background multiselect-selected tabs were a different color from the foreground tab. That changed in https://hg.mozilla.org/integration/autoland/rev/0f50601f9914 such that they became the same color (I think).

3. After that^, you could still distinguish foreground vs. multiselect tabs via the border/shadow around the "bubble" -- it was noticeably darker/bolder around the foreground tab. That changed in https://hg.mozilla.org/integration/autoland/rev/a6092057c08d (Bug 1702329).

From that point on, I think, foreground tabs and multiselect-selected tabs are indistinguishable (if you have proton enabled, which had recently become the default in Bug 1700109).

So I think this is essentially a regression from bug 1702329. Glancing at that bug, it doesn't look like it intended to make foreground tabs and selected tabs indistinguishable, though it does seem to have done that (on my system at least).

--> ni=jaws to take a look.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screencast

Here's a screencast of the STR with 3 example.org tabs. The issue is most obvious at the end when the rightmost tab goes from being "selected" to being the foreground tab -- I cannot see any visual change in the tab's styling at that point.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: screenshot in current Nightly 2022-02-24 (can you tell whether the far-left tab or the far-right tab is the foreground tab?)

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: screenshot from Nightly 2021-04-08 before regression; foreground tab (left) has darker border/shadow than selected tab (right)

Here's a screenshot from just before bug 1702329 landed. The left tab is the foreground tab, and it's got a noticeably darker border/shadow as compared to the right tab (which is multiselect-selected).

Comment 5

[Daniel Holbert [:dholbert]]

(One exception / special-case: if you have enough tabs open to overflow or nearly-overflow the tabstrip, then the "x" close-button disappears from all background tabs. This is a good visual cue about which tab is the foreground one, in this special case. But if you don't have that many tabs open, this doesn't help you.)

Comment 6

[Mike Hommey [:glandium]]

it's got a noticeably darker border/shadow

Honestly, if you don't pause and look back and forth, it's hard to see the difference, even though yes, there is one. People with some kinds of visual impairment might not be able to tell the difference at all.

Comment 7

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1702329

Comment 8

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Bug 1751807 - Place a focus outline on multiselected tabs to help distinguish the foreground tab.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9b62583fcfed
Place a focus outline on multiselected tabs to help distinguish the foreground tab. r=desktop-theme-reviewers,dao

Comment 10

[Marian-Vasile Laza]

https://hg.mozilla.org/mozilla-central/rev/9b62583fcfed

Comment 11

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Reproducible on Firefox 98.0(20220304153049) on Linux x86_64(Ubuntu 20.04). Confirmed as fixed on Firefox 99.0b3(20220313185831) and Nightly 100.0a1(20220314094248) on Linux x86_64(Ubuntu 20.04), macOS Big Sur 11 and Win 10 64-bit.