2058936 - Triple borders between the toolbar and the content if sidebar.revamp is false and the UI density is compact

Status: NEW

(Firefox :: Theme, defect, P3)

Description

[Tooru Fujisawa [:arai]]

Attachment: borders and gap

Steps to reproduce:

1. Set the macOS system theme to Dark
2. Run Nightly 155.0a1 (2026-07-29) (aarch64) on macOS with clean profile
3. Open about:preferences#appearance
4. Choose "Window density" -> "Compact"
5. Open about:preferences#tabsBrowsing
6. Uncheck "Browser layout" -> "Show sidebar"
7. Unfocus the window

Actual result:
At step 6, notice that the light border of the toolbar becomes dark, and there's 4px border (actually 1px dark + 2px semi-dark + 1px dark, but not really distinguishable) remains between the toolbar and the content area.
At step 7, there are 1px dark, 2px semi-light, 1px dark borders, which looks something is broken. It feels like the borders are actually gaps, and the gap is a collapsed extra-toolbar or something.

At least the styling doesn't reflect the new nova UI design where the toolbar and content have borders, with a gap between them, because the
border and the gap has the same color when the window is focused, and the gap becomes lighter when unfocused.

Expected result:
only 1-2px border/gap between the toolbar and the content, or perhaps make the contrast between the border vs the gap higher?

Comment 1

[Tooru Fujisawa [:arai]]

The border color difference comes from the following 2 definitions, where the former is used by default, and the latter is used once the sidebar.revamp is disabled

https://searchfox.org/firefox-main/rev/272c6937c93bf6c3f132ce962d9ad7d798fce830/browser/themes/shared/browser-colors.css#21,35-39,59,66-67,72-76

:root {
...
  @media -moz-pref("browser.nova.enabled") and (not (forced-colors)) {
    &:is([theme-in-app], :not([lwtheme])) {
      --chrome-content-separator-color: light-dark(rgb(201, 192, 227), rgb(63, 62, 66));
    }
  }
...
}
...
@media not ((forced-colors) or (-moz-native-theme)) {
  :root:not([lwtheme]) {
...
    @media not -moz-pref("sidebar.revamp") {
      --chrome-content-separator-color: light-dark(rgb(204, 204, 204), hsl(240, 5%, 5%));
    }
  }
}

Comment 2

[Dão Gottwald [:dao]]

Seems expected, but I'll let the nova frontend team triage this.

Comment 3

[Tooru Fujisawa [:arai]]

With the light theme, the border is always dark enough and the gap is light enough so that it's clearer the 4px space is 1px border + 2px gap + 1px border, both for sidebar.revamp==true and false cases.
Perhaps the separator color for the dark + sidebar.revamp==false need to be lighter?

Comment 4

[Tooru Fujisawa [:arai]]

Attachment: border above the bookmark toobar vs the notification

If the sidebar.revamp is set to false, some borders become darker, but some other borders remain lighter.
The attached screenshot shows that the border above the bookmark toolbar is dark, but the border above the notification is light.

I don't see the similar effect on light theme.

Comment 5

[Stephen Thompson [:sthompson]]

Thanks for the report. I'm not sure offhand about the design spec, so we'll need to look later and confirm.

Comment 6

[BugBot [:suhaib / :marco]]

The severity field is not set for this bug.
:jules, could you have a look please?

For more information, please visit BugBot documentation.

Comment 7

[BugBot [:suhaib / :marco]]

The severity field is not set for this bug.
:jules, could you have a look please?

For more information, please visit BugBot documentation.

Comment 8

[Stephen Thompson [:sthompson]]

We may be making some design changes to this gap between the toolbar and content area, and we are very likely to remove the gap entirely with compact UI density. I'll try to link it up to any related bugs if we file them in the near future.