547805 - Implement lightweight theming with -moz-element()

Status: RESOLVED WONTFIX

(Firefox :: General, defect)

Description

[Markus Stange [:mstange]]

When bug 506826 lands we can make LightweightThemeConsumer a little more elegant: Instead of setting the image as background-image on the documentElement and the "footer", we can use mozSetImageElement to make the header and footer images available to be used everywhere.

One advantage of this is that we won't need the lightweightthemesfooter attribute any more and instead have a far more general solution. The other advantage is that this opens up styling possibilities that weren't feasible before:

 1. Fixing the "active tab" problem in the Mac theme:
    Right now we can't give the tab strip a darker background because the
    active tab should be filled with the undarkened original Persona image.
    If we have -moz-element(), we can just set the image on the active tab
    again, thusly covering the darker tabstrip.
    background-attachment: fixed will do the hard positioning work for us.

 2. Blurred button backgrounds:
    At the moment the navbar buttons are pretty opaque in order to make them
    "readable". But this unreadability is primarily caused by noisy background
    textures. If buttons were made of some kind of "glass" that blurred the
    background they could be made less opaque without compromising readability.
    Now that we're converting buttons to use border-radius and stuff, this
    becomes possible pretty easily: LightweightThemeConsumer can just set two
    versions of the persona image using mozSetImageElement - the original one,
    and a blurred one. Then the navbar buttons can do
    background: -moz-element(lwtheme-header-blurred) top right no-repeat fixed;
    and we're done.

Comment 1

[Markus Stange [:mstange]]

Attachment: v1

Comment 2

[Markus Stange [:mstange]]

Comment on attachment 472609 [details] [diff] [review]
v1

new patch coming

Comment 3

[Markus Stange [:mstange]]

Attachment: v2

Comment 4

[Markus Stange [:mstange]]

Attachment: v3

Dão, I'd really like to get this in, it allows us to make the tabs look so much better... Do you think this affects many addons?

Comment 5

[Dão Gottwald [:dao]]

Comment on attachment 497332 [details] [diff] [review]
v3

Since header images can be quite large, I was concerned about duplicating them negatively affecting tab animations or tab switching performance. However, depending on how efficient -moz-element is, this might still perform better than how we ended up doing it today. But I don't really know that. Needs reliable data.