1989112 - Tab group labels should use same border radius as tabs

Status: RESOLVED FIXED

(Firefox :: Tabbed Browser, task, P3)

Description

[Stephen Thompson [:sthompson]]

Attachment: tab-group-label-border-comparisons.png

:amylee agreed that the collapsed tab group label highlight should use the same 8px border-radius as the tab background.

The tab group label sits within the tab group label highlight and it doesn't look so good when they use the same border-radius. As a result, :amylee would like the inner element (the tab group label) to have a border-radius 2px smaller than the outer element (tab group label highlight). I agree that this looks better, so the tab group label itself would have a 6px border-radius.

Comment 1

[Stephen Thompson [:sthompson]]

Attachment: Bug 1989112 - tab group labels use border-radius design token r=dao,jules

We want the tab group label's hover highlight to match the tab background's hover highlight by using --tab-border-radius. However, we are implementing this highlight effect with a combination of border-radius and box-shadow with spread. Those rules interact so that the visual border radius of the shadow is the sum of the element's border-radius and the box-shadow's spread radius. Since we also wanted a different amount of shadow spread for the different tab strip variations, that means the element's border-radius needs to vary in order to get a constant 8px visual border radius on the shadow.

Since it looks strange to have multiple nested rounded rectangles that use the same border radius, the tab group label is using a 2px smaller border-radius in order to look good when the 8px border-radius of the tab group label hover highlight is actively surrounding the label.

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/49ce39a2bb31
https://hg.mozilla.org/integration/autoland/rev/c91adbf48574
tab group labels use border-radius design token r=dao,desktop-theme-reviewers,tabbrowser-reviewers,emilio

Comment 3

[Cosmin Sabou [:CosminS]]

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