2023768 - Nova theme for private windows

Status: RESOLVED FIXED

(Firefox :: Private Browsing, task, P3)

Description

[Stephen Thompson [:sthompson]]

UX spec: https://www.figma.com/design/VUeCQGzSoo3w7n6ibibu2Q/Private-Window-UX-Specifications--Sprint-3-?node-id=3796-142219&p=f&t=H4hIiMrTckrua2fu-0

Private windows will now have their own theme. See https://searchfox.org/firefox-main/source/browser/themes/addons/aiwindow/manifest.in.json as an example for how smart windows got their own theme. Update iconography, color palette. Note that the updated private browsing logo/icon will be updated separately by the Privacy team.

Comment 1

[Stephen Thompson [:sthompson]]

Reach out to Acorn team about the availability of private browsing-specific tokens

Comment 2

[Stephen Thompson [:sthompson]]

There is a Felt Privacy initiative that dovetails into this, where there is a desire to make private browsing feel more different, not just the standard dark theme. Since Nova is updating our standard themes, this is considered a great time to make our private windows do something distinctive.

When I discussed the requirements with the private browsing team, the expectation was that third-party/custom themes should be supported for private windows. The specific expectations are not clear (e.g. would the third-party theme apply completely, or in some mix with the built-in private window). There is an active discussion right now about this requirement.

Comment 3

[Stephen Thompson [:sthompson]]

It's not totally clear to me how we're expected to integrate with design tokens. I recommend reaching out to Jules or Mark Striemer to get an understanding of how they think you can best leverage tokens. It did look like the Acorn team was juggling an entire separate set of tokens for private browsing and an entire set for smart window, but I was not sure whether they expected to end up with the design system specifying those tokens in the same way that light, dark, HCM are currently specified. The Figma variable make it seem like they are thinking of them as equivalent: https://searchfox.org/firefox-main/source/toolkit/themes/shared/design-system/src/nova-export-clean-variables.json

There is similar coloring and theming present in the spec for about:privatebrowsing (see bug 2033037). Ideally, it would be nice if there were shared design tokens and/or CSS properties that could be accessed by both the private window theming system and the about:privatebrowsing page. If there isn't a simple and useful way to share, though, then it's OK for each feature to use its own style definitions.

Comment 4

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

Attachment: Bug 2023768 - Load a theme manifest for private windows+nova. r?emilio

Comment 5

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

Attachment: WIP: Bug 2023768 - Add a layer of tokens for private window styling

Comment 6

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

Attachment: WIP: Bug 2023768 - Nova theme for private windows

Comment 7

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

I think I've got the theme manifest properties about right - see attachment 9589074 [details]. But, with this technique, :root:[lwtheme] ends up being true. That means the rule that provides the gradient outline for selected tabs does not apply. I'm not sure if we want this to be treated as a lightweight-theme, or what the consequences would be if we loaded the manifest and populated those style properties but lwtheme was left false.

For now, the color-mixed colors from the spec (e.g. #B6AAD9 · 40% which would be a 0.4 opacity mix with var(--violet-desaturated-30)) are left as rgba values as those color properties in the theme manifest are literals not real CSS value expressions.

ni? emilio for the color-mix properties. It would be nice to use the token name, but I guess we'd need some additional parsing of the json property values to support this case - and I'm not sure if we have any kind of plan for that.

Comment 8

[Emilio Cobos Álvarez [:emilio]]

(In reply to Sam Foster [:sfoster] (he/him) from comment #7)

I think I've got the theme manifest properties about right - see attachment 9589074 [details]. But, with this technique, :root:[lwtheme] ends up being true. That means the rule that provides the gradient outline for selected tabs does not apply. I'm not sure if we want this to be treated as a lightweight-theme, or what the consequences would be if we loaded the manifest and populated those style properties but lwtheme was left false.

Yeah I think we need to start considering it a lwtheme... If we need that rule (why is it specific to default themes to begin with?) we could add a manifest key or something that enabled it... FWIW that rule feels like a workaround for not having background-clip: border-area (bug 1880365), which we could implement, right? Or am I missing something?

ni? emilio for the color-mix properties. It would be nice to use the token name, but I guess we'd need some additional parsing of the json property values to support this case - and I'm not sure if we have any kind of plan for that.

I mean, feel free to change process_tokens.py at your will, it shouldn't be hard to allow interpolations? Ideally with something that's somewhat consistent with how tokens reference each other in the nova manifest, to avoid inventing a bespoke syntax. But no strong opinion there...

Comment 9

[Stephen Thompson [:sthompson]]

The Smart Window team also flagged that the selected tab gradient border is not visible for them for the same reason.

Comment 10

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

Yeah I think we need to start considering it a lwtheme... If we need that rule (why is it specific to default themes to begin with?) we could add a manifest key or something that enabled it...

Right, differentiating based the [lwtheme] attribute isn't the right solution here. We want an opt-in that is a bit more targeted. I don't really want to mess with the manifest schema but we need some way to toggle a 'fancy-gradient-tab-outlines` attribute on the documentElement. I can just implement some logic in LightweightThemeConsumer for now I guess.

Comment 11

[Emilio Cobos Álvarez [:emilio]]

Yeah I'm doing something very similar in https://phabricator.services.mozilla.com/D304770 fwiw. But adding an experimental key in the manifest is also trivial fwiw.

Comment 12

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

(In reply to Emilio Cobos Álvarez [:emilio] from comment #11)

Yeah I'm doing something very similar in https://phabricator.services.mozilla.com/D304770 fwiw. But adding an experimental key in the manifest is also trivial fwiw.

We're throwing a lot of noodles at the wall right now. I'd prefer to see what sticks before we start optimizing/rationalizing all these different theme variants. I don't think we want to individually maintain system, dark, light, alpenglow, private window, smart window as well as AMO themes long term? I'm hoping when/if the dust settles a bit we can step back and see what we're actually trying to accomplish with all this and find a more succinct and maintainable way to express it.

Comment 13

[Emilio Cobos Álvarez [:emilio]]

I mean, we do have existing very similar things right? Like zap_gradient. Those are in the experiments bits and we can change them whenever we want, it's not like we'd be committing to stability. But sure

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/23212aed13d6
https://hg.mozilla.org/integration/autoland/rev/01abbc1463e9
Load a theme manifest for private windows+nova. r=emilio,extension-reviewers,desktop-theme-reviewers,tabbrowser-reviewers,sthompson,rpl

Comment 15

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/01abbc1463e9