1956314 - Container tabs hairline not visible in collapsed sidebar

Status: VERIFIED FIXED

(Firefox :: Tabbed Browser, defect, P1)

Description

[Stephen Thompson [:sthompson]]

Attachment: vertical-tabs-collapsed-four-container-tabs.png

Steps to reproduce [can add screenshots or video recordings for reference]:

1. Enable vertical tabs
2. Open some tab(s) as container tabs
3. Resize the sidebar to the collapsed (minimum) size

Expected behavior [What should have happened?]:

Container tab hairline should be visible

Actual behavior [What actually happened?]:

The container tab hairlines are covered up by the sidebar's scrollbar gutter after the changes in bug 1939518.

Notes:

• occurs in both LTR and RTL locales
• occurs with sidebar on either side of window

Comment 1

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

:dao, since you are the author of the regressor, bug 1939518, could you take a look?

For more information, please visit BugBot documentation.

Comment 2

[Stephen Thompson [:sthompson]]

No additional info needed at this time

Comment 3

[Stephen Thompson [:sthompson]]

With the expanded sidebar, <tabs> takes the full width of the sidebar including the scrollbar, while tab > .tab-stack is 11px narrower so that it doesn't overlap the scrollbar at all.

With the unexpanded sidebar, <tabs> takes the full width of the sidebar including the scrollbar, but tab > .tab-stack also takes the full width. On macOS, this is cutting off the right edge of the tab background active/hover outline. It's also responsible for making the moved container line not visible.

I followed the issue down to https://searchfox.org/mozilla-central/source/browser/themes/shared/tabbrowser/tabs.css#1583 -- with this rule disabled, the .tab-stack's width is 11px narrower than the <tabs> component, which is consistent with the expanded sidebar. This makes enough clearance for the scrollbar. However, with that rule removed, the tab background active/hover outline is too small and not centered.

I think the root issue is that the unexpanded sidebar design keeps the tab icons centered in the <tabs> component. When no scrollbar is present, the tab strip looks well balanced, but when the scrollbar is present next to them, the tab icons don't look well-placed.

Comment 4

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

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

Comment 5

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

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

Comment 8

[Dão Gottwald [:dao]]

Attachment: Bug 1956314 - Align container line with tab background in vertical tabs. r=nsharpley

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/81903bd5add8
Align container line with tab background in vertical tabs. r=nsharpley,tabbrowser-reviewers

Comment 10

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/81903bd5add8

Comment 11

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

The patch landed in nightly and beta is affected.
:dao, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
• If no, please set status-firefox138 to wontfix.

For more information, please visit BugBot documentation.

Comment 12

[Dão Gottwald [:dao]]

Attachment: Bug 1956314 - Align container line with tab background in vertical tabs. r=#release-managers

Comment 13

[Phabricator Automation]

beta Uplift Approval Request

• User impact if declined: See https://bugzilla.mozilla.org/show_bug.cgi?id=1956314#c0
• Code covered by automated testing: no
• Fix verified in Nightly: no
• Needs manual QE test: yes
• Steps to reproduce for manual QE testing: See See https://bugzilla.mozilla.org/show_bug.cgi?id=1956314#c0
• Risk associated with taking this patch: low
• Explanation of risk level: pretty straightforward CSS fix
• String changes made/needed: none
• Is Android affected?: no

Comment 14

[Rares Doghi, Desktop QA]

Verified as fixed in our latest Nightly 139.0a1 (2025-04-08).

Comment 15

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-beta/rev/e56bf7849900

Comment 16

[Rares Doghi, Desktop QA]

Verified as fixed in our latest Beta 138.0b5