2022115 - Tab Group Label does not respect touch density in vertical tab bar

Status: RESOLVED FIXED

(Firefox :: Tabbed Browser: Tab Groups, defect)

Description

[DING Zhuocheng]

In horizontal tab bar mode, the height of tab group label is larger in touch density than in normal density. But in vertical tab bar mode, the height of tab group label is always 24px, whether it is touch or normal density. This is not desired.

Comment 1

[Nikki Sharpley (:nikkis) (she/her)]

When tabs are horizontal, the tab group label size increases to 27px when uidensity="touch". We should do the same for vertical tabs mode.

You can switch to vertical tabs by right clicking the toolbar and selecting "Turn on vertical tabs".
You can switch to uidensity touch by navigating to about:config and setting browser.uidensity to 2.

Comment 2

[Mary cathline]

Attachment: Bug 2022115 - Tab Group Label does not respect touch density in vertical tab bar. r=nsharpley

Comment 3

[Mary cathline]

I was able to notice that in Firefox’s vertical tabs mode, the tab group label did not adjust its size when uidensity="touch" was enabled, unlike in horizontal tabs where the height increases from 24px to 27px. I used toolbox to identify the exact height and realized a hard corded height.
So i simply introduced a CSS variable (--tab-group-label-height) to replace hardcoded values and added a condition for touch density so the label dynamically updates to 27px. I have also applied this variable consistently across height, width, and line-height to ensure uniform behavior in both collapsed and expanded states.
The final result is now the vertical tab view is correctly responding to touch density, improving UI consistency and accessibility. here is the review link https://phabricator.services.mozilla.com/D289723. would be glad to get a feedback and make adjustments or take on another bug thank you.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/66a9e6c09167
https://hg.mozilla.org/integration/autoland/rev/8ad4224f116e
Tab Group Label does not respect touch density in vertical tab bar. r=nsharpley,desktop-theme-reviewers,tabbrowser-reviewers,sfoster

Comment 5

[amarc]

https://hg.mozilla.org/mozilla-central/rev/8ad4224f116e