1915862 - Vertical tabs that are pinned do not change appearance when hovered and do not clearly show active state

Status: VERIFIED FIXED

(Firefox :: Sidebar, defect, P2)

Description

[Kestrel]

Attachment: Pinned tabs not responding to mouse hover

STR:

1. Start with sidebar.verticalTabs = true and sidebar.revamp = true.
2. Pin several tabs.
3. Hover the mouse cursor over an inactive pinned tab.
4. Enable the Dark theme.
5. Select a pinned tab to make it active.

Expected:
Pinned tab changes appearance when hovered and the active tab can be clearly seen.

Actual:
Pinned tab appearance does not change when hovered and active pinned tab is difficult to distinguish from others with Dark theme.

Inactive pinned tabs have an "always hovered" appearance which is inconsistent and makes their hovered/active states less clear. Horizontal pinned tabs do not behave like this and for reference, the popular Tree Style Tab extension does not have this inconsistency.

Comment 1

[Kestrel]

Attachment: Active pinned tab is difficult to distinguish with Dark theme

Comment 2

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

The severity field for this bug is set to S3. However, the accessibility severity is higher, .
:sclements, could you consider increasing the severity?

For more information, please visit BugBot documentation.

Comment 4

[:Gijs (he/him)]

The hover thing is a specificity issue where the horizontal tabs mode styling is not applying. I'll put up a patch for this.

Otherwise, the hover/selected colours match horizontal tabs mode. The (non-hover/select) background colour for the pinned tabs is actually a bit darker than the UX spec asks for (meaning more contrast with hover/selected), so the fact that it is difficult to distinguish that selected/active tab from hover/pinned in general is unfortunate. I've asked the design folks to take a look, as it's unclear to me what a fix would look like without more UX/design input.

Comment 5

[:Gijs (he/him)]

Attachment: Bug 1915862 - fix hover background colour on pinned tabs in vertical tabs mode, r?#sidebar-reviewers,#desktop-theme-reviewers

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/01ad08cc7fba
fix hover background colour on pinned tabs in vertical tabs mode, r=desktop-theme-reviewers,tabbrowser-reviewers,dao

Comment 7

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/01ad08cc7fba

Comment 8

[Yulia Popova]

It appears that the colors in our Figma design library and code are not aligned. Could we update the selected state color to color-gray-70: #5B5B66 (in the dark theme)? This adjustment will ensure the selected state stands out from both the default and hover states. Thank you for your attention to this!

Comment 9

[:Gijs (he/him)]

Attachment: Bug 1915862 - update selected tab background in the dark theme to be more differentiated and update tab text colour for contrast, r?dao

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/dcf993cb9bd9
update selected tab background in the dark theme to be more differentiated and update tab text colour for contrast, r=dao,extension-reviewers,desktop-theme-reviewers,rpl

Comment 11

[Cristina Horotan [:chorotan]]

https://hg.mozilla.org/mozilla-central/rev/dcf993cb9bd9

Comment 12

[Alexandru Trif, Desktop Test Engineering [:atrif]]

Reproduced the issue with Firefox 132.0a1 (2024-09-02) on Windows 10x64. The active pined tab state has low contrast and the hover is not working when using the Vertical tabs option.
The issue is verified fixed with Firefox 132.0b5 on Windows 10x64, macOS 12 and Ubuntu 24.04. The active tab state is visible and the hover is working with vertical tabs enabled.