1817882 - Private Browsing pseudo dark theme doesn't apply to some elements in about:privatebrowsing

Status: VERIFIED FIXED

(Firefox :: Messaging System, defect, P3)

Description

[Shane Hughes [:aminomancer]]

STR

1. Open a private browsing window in a fresh profile (without dark mode enabled) so that a promo card is displayed in about:privatebrowsing, with a primary colored button (probably will say Pin to taskbar)

Expected

The button should have dark gray text (#2B2A33) on a cyan background (#00DDFF), see figma prototype

Actual

The button has white text on a blue background — the primary button color for light mode.

Switching to dark mode (e.g. with ui.systemUsesDarkTheme) changes the button's color to what it should be. But that's not part of the private browsing implementation, it's just the prefers-color-scheme media query in the common styles.

This is the only element I noticed but I was thinking we should just do a general audit of these styles. Or maybe it would be better overall if we override the media query on about:privatebrowsing. This should be pretty easy to do, by overriding this rule for about:privatebrowsing. contentTheme.js (used by other system pages) uses an inline style on the browser element to do this, and I guess we might want to do that just for the sake of being thorough. An alternative would be to specify the styles we want manually, but that will require a lot more maintenance trying to keep up with changes to the common styles, when we could just inherit them by forcing the color scheme. Though I'm not sure if there's an easy place to slot this behavior in specifically for about:privatebrowsing, as it requires JS access to the browser element (the element in the chrome where the content viewer is inserted)

Comment 1

[Shane Hughes [:aminomancer]]

Attachment: Screenshot of the issue

Here's a screenshot - see the primary button is white on blue instead of black on cyan.

Comment 2

[Dão Gottwald [:dao]]

I think the figma is wrong here. about:privatebrowsing is being consistent with other UI in that window. It's essentially in light mode and therefore getting shared light mode colors. I think things like primary buttons users would expect to be styled consistently and not get a different look just because a page wants to be dark independently from dark mode.

Comment 3

[Shane Hughes [:aminomancer]]

(In reply to Dão Gottwald [::dao] from comment #2)

I think the figma is wrong here. about:privatebrowsing is being consistent with other UI in that window. It's essentially in light mode and therefore getting shared light mode colors. I think things like primary buttons users would expect to be styled consistently and not get a different look just because a page wants to be dark independently from dark mode.

Hey Misha, do you have a feeling one way or the other on how this button should be colored? For reference, although the browser chrome is dark in PBM, the other system pages are still light (website appearance = automatic)

Comment 4

[misha [:mbruk]]

(In reply to Shane Hughes [:aminomancer] from comment #3)

(In reply to Dão Gottwald [::dao] from comment #2)

I think the figma is wrong here. about:privatebrowsing is being consistent with other UI in that window. It's essentially in light mode and therefore getting shared light mode colors. I think things like primary buttons users would expect to be styled consistently and not get a different look just because a page wants to be dark independently from dark mode.

Hey Misha, do you have a feeling one way or the other on how this button should be colored? For reference, although the browser chrome is dark in PBM, the other system pages are still light (website appearance = automatic)

my thought is to go with the most consistent user experience here. i think we all agree that our layering of color themes can be confusing but i think if the page is in 'dark mode' we should apply dark mode styling?

Comment 5

[Shane Hughes [:aminomancer]]

Thanks! I'll treat this as a messaging system issue and just adjust our styles in aboutPrivateBrowsing.css. I think there are no other primary CTAs on this page, aside from our own promo cards.

Comment 6

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

The component has been changed since the backlog priority was decided, so we're resetting it.
For more information, please visit auto_nag documentation.

Comment 7

[Russell Chan]

Attachment: Bug 1817882 - fix styling of CTA in about:privatebrowsing to match Figma design r?#omc-reviewers

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b800c8fae7e3
fix styling of CTA in about:privatebrowsing to match Figma design r=omc-reviewers,aminomancer

Comment 9

[Noemi Erli[:noemi_erli]]

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

Comment 10

[Marius Coman [:mcoman], Ecosystem QA]

I have verified that this issue is no longer reproducible using the latest Firefox Beta (112.0b4 Build ID - 20230319180129) installed on Windows 10 x64, macOS 12.6.1, and Ubuntu 22.04 x64. I can confirm that the color of the primary button's background is rgb(0,221,255) and the color of the text is set to rgb(43,42,51).