2034863 - Decide how webextension themes will appear in Nova floating chrome mode

Status: RESOLVED FIXED

(Firefox :: Theme, defect, P1)

Description

[Jeremy Swinarton]

Follow-up work from bug2023711 (https://phabricator.services.mozilla.com/D293109).

Now that the work of reorganizing the chrome for nova has started, there are open questions around how user themes should appear. The biggest question so far is how custom user defined backgrounds should appear in Nova-land. See the attached files for a comparison of how the Alpenglow theme appears before and after the introduction of floating chrome.

To me, the obvious thing to do would be to put the custom background image behind the toolbar and the sidebar in such a way as to make it appear as if there is one image that is being projected behind both elements (even though in practice this would really be "stitched together" with two elements that have the same background image, only revealing different parts of that image to produce a composite).

This needs confirmation from UX before moving forward.

Comment 1

[Jeremy Swinarton]

Attachment: Screenshot 2026-04-24 at 11.56.02 AM.png

Comment 2

[Jeremy Swinarton]

Attachment: Screenshot 2026-04-24 at 11.56.05 AM.png

Comment 3

[Dão Gottwald [:dao]]

Gonna call this a defect for bookkeeping purposes, as third-party theme support is arguably broken with Nova.

Comment 4

[Ania]

To me, the obvious thing to do would be to put the custom background image behind the toolbar and the sidebar in such a way as to make it appear as if there is one image that is being projected behind both elements (even though in practice this would really be "stitched together" with two elements that have the same background image, only revealing different parts of that image to produce a composite).

From poking around custom themes, this approach looks fantastic in cases when the creator used the image with a repeating pattern that would tile well.

Comment 6

[Stephen Thompson [:sthompson]]

See also bug 2038855 for some other examples of themes that look less good than intended

Comment 7

[Nikki Sharpley (:nikkis) (she/her)]

After investigating the way themes work with floating chrome, it seems we need to make a decision on how best to handle custom background images that were once intended for the toolbox background but now sit behind the chrome. If we can confirm that we indeed want to proceed with those images behind the chrome, there are some consideration to make:

• Some images only span the height of the previous toolbar. Do we want to have that background image repeat in that case?
• We would need to update the custom theme previews in the about:addons to reflect the image sitting behind the toolbox
• It would be good to provide recommendations to users on how to adapt. Eg. either use a fullsize image, have your original image repeart OR something similar to what Emilio implemented (I think) for the Alpenglow theme - top image with a gradient transparent effect combined with a solid color background image.

Comment 8

[Merci chao]

Attachment: samples.png

(In reply to Nikki Sharpley (:nikkis) (she/her) from comment #7)

After investigating the way themes work with floating chrome, it seems we need to make a decision on how best to handle custom background images that were once intended for the toolbox background but now sit behind the chrome. If we can confirm that we indeed want to proceed with those images behind the chrome, there are some consideration to make:

• Some images only span the height of the previous toolbar. Do we want to have that background image repeat in that case?
• We would need to update the custom theme previews in the about:addons to reflect the image sitting behind the toolbox
• It would be good to provide recommendations to users on how to adapt. Eg. either use a fullsize image, have your original image repeart OR something similar to what Emilio implemented (I think) for the Alpenglow theme - top image with a gradient transparent effect combined with a solid color background image.

Regarding 152.0a1 (2026-05-14), I’ve observed two actual situations. In general, themes display the background image on the body, while themes with vertical alignment (:root[lwtheme-image-y-align]) display the background image on the toolbox.

Compared to showing the background image on the body — where it gets covered by the chrome block’s background color and is only clearly visible in the chrome block gap — it seems better to display the background image directly on the chrome block. I tested several themes, and in fact this approach better matches the original effect intended by the theme. Some themes even have a completely transparent toolbox background color (for example, Praise the sun), where only displaying the background image on the chrome block produces the proper chrome block visual effect. Although for certain themes like latar_bunga_hejo_bodas, showing it on the body looks a bit nicer.

I don’t fully understand the architecture of themes, but I see that currently there is support (:root[lwtheme-image]) for two background images: --lwt-header-image and --lwt-additional-images. The former is set to no repeat, while the latter has --lwt-background-tiling that allows theme authors to decide whether it should repeat.

If --lwt-additional-images were displayed on the body, with --lwt-background-tiling determining whether to repeat, and --lwt-header-image displayed on the chrome block, wouldn’t this give theme authors the freedom to decide how their theme should appear on Nova, achieving greater flexibility and better visual effects?

Comment 9

[Nikki Sharpley (:nikkis) (she/her)]

Attachment: Bug 2034863 - Adjust background for web extension theme compatability r=emilio

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/18b5397a8204
https://hg.mozilla.org/integration/autoland/rev/0104eef62b75
Adjust background for web extension theme compatability r=emilio,desktop-theme-reviewers

Comment 11

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/0104eef62b75