1852603 - --newtab variables are no longer accessible from Firefox View with "System theme - auto" on Windows and macOS

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P2)

Description

[Kelly Cochrane [:kcochrane]]

Attachment: Screenshot 2023-09-08 at 11.26.05 AM.png

To reproduce:
Set your browser's theme to "System theme - auto" and set your OS-level theme to Dark.
Notice how the body background color of Firefox View is now falling back to --in-content-page-background which is much darker than the expected --newtab-background-color.

In Firefox View, we define a CSS variable for the background color here that's defaulted to use --newtab-background-color, but falls back to --in-content-page-background if that's not found.
We should ideally work out a way to reuse the variables defined in activity-stream-[os].css files such as here so we aren't redefining the same variable in two different places.

This was a regression caused by bug 1843044.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

For context, this is not a regression on Linux, this never worked there.

Comment 2

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

Set release status flags based on info from the regressing bug 1843044

Comment 3

[Kelly Cochrane [:kcochrane]]

Jules, are these variables something we can consider adding to design-tokens-shared.css? It looks we have these colors/values hardcoded in activity-stream[os].css files for the New Tab page when we also rely on them in Firefox View and Shopping

Firefox View specifically relies on:
--newtab-background-color
--newtab-background-color-secondary
--newtab-text-primary-color
--newtab-primary-action-background

Comment 4

[Sam Foster [:sfoster] (he/him)]

--newtab-background-color is defined as in-content-page-background for about:welcome/about:newab in the theme SASS file which in turn gets its value from the variables as #F9F9FB (light) / #2B2A33 (dark).

These colors show up in our XUL stylesheet for windows tooltips, as well as a few other places.

Comment 5

[Jules Simplicio [:jules]]

Attachment: light and dark differences between new tab and common shared.png

Hey Kelly, I am wondering if it's still possible for you to still make use of the activity-stream variables for now instead of us making these additions to design tokens.

There's an underlying issue here that I am hoping UX will help us decide with how we want light/dark mode to look like: like New tab code or like common-shared code. The problem today is that how we treat page background color and secondary background color variables (cards use this) today is different between these two contexts. I am attaching a picture that shows the differences.

I've spoken to Dao earlier this year about this, and have started a proposal to standardize our grays as well as their applications across different contexts. Ideally we standardize these colors through the tokens work so that we no longer have two page and secondary background colors going on. I can prioritize to solve this gray scale issue earlier in h2, and get the UX feedback.

Comment 6

[Donal Meehan [:dmeehan]]

:dao could this be triaged for severity?
Do you need to address this for Fx119, or will it be in a later release?

Comment 7

[Dão Gottwald [:dao]]

Three possible solutions here:

1. update common-shared.css to use the same color values for the relevant colors from activity-stream.
2. update activity-stream to use the the same color values for the relevant colors from common-shared.css.
3. have Firefox View specify default values for the relevant new-tab variables, copying over the color values from activity-stream.

Jules, what would be the preferred fix here from a design system perspective?

Comment 8

[Kelly Cochrane [:kcochrane]]

We are hoping to get a fix in for Fx119 if possible. I'm happy to pick this work up whenever Jules weighs in on a preferred solution from above.

Comment 9

[Dão Gottwald [:dao]]

Yes, to clarify, we're looking for a short-term fix here while waiting for bug 1821203.

Comment 10

[Jules Simplicio [:jules]]

Hey Dão, I'd say from the systems perspective for now, although not necessarily ideal, to go ahead and choose option 3:
"have Firefox View specify default values for the relevant new-tab variables, copying over the color values from activity-stream."

Seems to me from recent work and talks with UX that they prefer the new tab colors, however it may be a bad idea to suddenly change dark mode in other about pages before we do the standardization of grays with 1821303. So if it's okay for now, it would be better if Fx View just has their domain-specific variables that copy activity-stream.

Comment 11

[Kelly Cochrane [:kcochrane]]

Attachment: Bug 1852603 - Copy newtab default css variables over to firefoxview-next.css r=dao

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/93fd62af9c5c
Copy newtab default css variables over to firefoxview-next.css r=dao,desktop-theme-reviewers,fxview-reviewers,sclements

Comment 13

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/93fd62af9c5c

Comment 14

[Anca Soncutean, Desktop QA]

Reproduced with Fx 119.0a1 (2023-09-11) on Windows 10.
Verified fixed with Fx 120.0a1 (2023-10-02) and Fx 119.0b4 on Windows 10 and macOS 13.