2053333 - Border radius mismatches between chrome blocks and outer window

Status: RESOLVED FIXED

(Firefox :: Theme, defect)

Description

[Lars Eggert [:lars]]

Attachment: Screenshot 2026-07-08 at 10.04.30.png

Comment 1

[Lars Eggert [:lars]]

Attachment: Screenshot 2026-07-08 at 10.05.11.png

Comment 2

[Jason Prickett]

What panel or menu is this occurring in?

Comment 3

[Lars Eggert [:lars]]

The first is just the normal macOS window border and the Nova insert.

The second is the bookmark bar.

Comment 4

[Hackbot]

Triage (Nova / browser.nova.enabled): this is a rounded-corner mismatch in the Nova chrome. I couldn't render the two attached screenshots in my environment, so I localized from the CSS; please confirm which elements the shots show.

Nova's rounded "blocks" (.chrome-block: #navigator-toolbox, #sidebar-container/#sidebar-box, and the content area) get border-radius: var(--chrome-block-radius) + a 1px solid border with overflow: clip (browser/themes/shared/browser-shared.css:301-308). --chrome-block-radius is 10px (default) / 4px (Windows) / 8px (Mica) / 16px (macOS Tahoe). Corner mismatches here come from adjacent/nested radii that don't agree.

Most concrete inconsistency I found: in browser/themes/shared/tabbrowser/tabs.css, tab-split-view-wrapper is border-radius: var(--tab-border-radius) (= --button-border-radius = --border-radius-medium = 8px) at ~line 1458, but is overridden to var(--border-radius-large) (16px) at ~lines 1470 and 1491, while the child .tabbrowser-tabs stay at 8px — so the wrapper's corners don't follow the tab corners.

Proposed approach: make nested radii concentric/consistent — pick one radius token for the split-view wrapper and its child tabs (drop the stray 16px overrides, or reduce the tab radius to match), and for bordered .chrome-blocks ensure inner clipped children use --chrome-block-radius minus the 1px border so the border and inner corner align. Target files: browser/themes/shared/tabbrowser/tabs.css, browser/themes/shared/tabbrowser/content-area.css, browser/themes/shared/browser-shared.css.

No existing test covers these radii (split-view tests under browser/components/tabbrowser/test/browser/ are functional only). Please confirm from the screenshots which elements are mismatched so the fix can be scoped precisely.

This is an automated analysis result. If this result is incorrect please add a needinfo and feel free to correct the error.

Comment 5

[kpatenio]

Hi Lars, thanks for the info. Could you please provide more steps to reproduce the issue?

Comment 6

[Lars Eggert [:lars]]

There is nothing to reproduce. You look at any web page in a window.l for the first. For the second, you turn on the bookmark bar.

Comment 7

[Stephen Thompson [:sthompson]]

Screenshot 1: The outer border is drawn by macOS, the inner border is from a chrome block (content area or sidebar). This is a clear example of how concentric rounded corners with the same radius do not look quite right -- inner rounded corners need to have lower border radius to look good.

Screenshot 2: The outer border is from a chrome block (bookmarks toolbar when that toolbar is the bottom visible toolbar) and the "inner border" is the border around an individual bookmark. This is not quite concentric rounded corners because the first bookmark is also offset from the edge by a margin.

Either way, will raise to UX.

Comment 8

[Juliana Gaibler [:juliana]]

these are two separate issues, I filed 2056624 for the latter one.

Comment 9

[Juliana Gaibler [:juliana]]

Attachment: Bug 2053333 - Adjust chrome block border radius for macOS Tahoe window corners.

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/1dac50cdc602
https://hg.mozilla.org/integration/autoland/rev/21bebd5e1ef4
Adjust chrome block border radius for macOS Tahoe window corners. r=desktop-theme-reviewers,tgiles

Comment 11

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/21bebd5e1ef4