486264 - need CSS rule similar to -moz-appearance that allows setting colors and backgrounds

Status: NEW

(Core :: Widget, enhancement)

Description

[Myk Melez [:myk] [@mykmelez]]

Attachment: testcase demonstrating problem

In same cases it's useful to override individual declarations set by -moz-appearance.  For example, -moz-appearance sets a toolbarbutton background color/image with some OS themes, but toolbarbuttons look best when their backgrounds are mostly transparent when the Personas extension is installed.

But right now there's no way to override just the background declaration(s), so Personas has to set |-moz-appearance: none| to get rid of them.  And that gets rid of a bunch of other declarations that shouldn't be removed (like those that specify border style).

In other words, -moz-appearance is all or nothing, and there's no way to selectively override the style it applies.  It would be useful if there was.

I've attached a testcase that demonstrates the problem.  It tries to set the background color of a toolbarbutton to green (using an !important rule inside the toolbarbutton's style attribute).  Here are some results on various OS themes:

Ubuntu 8.10, default Human theme: background isn't green
Mac OS X: background is green
Windows XP, default "Windows XP" (Luna) theme: background isn't green
Windows XP, "Windows Classic" theme: background is green
Windows Vista, default "Windows Vista" (Aero) theme: background isn't green
Windows Vista, "Windows Classic" theme: background is green

The desired result would be for the background color to be green on all these themes.

Note: there are a bunch of "backup" rules in Pinstripe/Winstripe/Gnomestripe that take effect when -moz-appearance doesn't specify some or other style, so a solution to this bug will have to be careful that those rules don't start overriding -moz-appearance rules.

Comment 1

[[e-mail]]

Those "backup" styles also take effect when -moz-appearance does not apply to the platform being styled e.g. BeOS, OS/2.

I don't pretend to understand the concept of Personas, nor am I a graphic designer, but I would have thought you would be better off with a translucent border image, thus allowing the background to bleed through.

Comment 2

[Mike Connor [:mconnor]]

Argh, I didn't file this already? Guess not.

So I talked with vlad about this a while back, the way -moz-appearance works is that we hand over the drawing to native appearance bits, so we can't just override things.  That said, what we can get is to support an alternate syntax that gives us what we want from -moz-appearance, like dimensions, font, etc, and let us set colors and background image.

Moving to Widget, ccing vlad.

Comment 3

[Myk Melez [:myk] [@mykmelez]]

(In reply to comment #1)
> I don't pretend to understand the concept of Personas, nor am I a graphic
> designer, but I would have thought you would be better off with a translucent
> border image, thus allowing the background to bleed through.

Yes, you're right, we do want translucent borders, so on OSes that don't have them, we have to override border style too.  My point was more general: that we don't necessarily want to get rid of all style applied by -moz-appearance, we just want to modify the style enough to make it play well with Personas.

Vlad's solution as described in comment 2 seems promising.

Comment 4

[Vladimir Vukicevic [:vlad] [:vladv] (needinfo me, slow to respond)]

As a first step, can we identify the individual aspects that are needed?  I think we can do:

- the "look" (image, e.g. the image of the button)
- size/padding/margin dimensions
- foreground/background(/highlight?) color
- font

Is there something else?  The big piece that we can't do is break up the look -- for example, we can't say "have the border look the same as a platform native button, but allow us to modify the interior fill".

Comment 5

[Robert O'Callahan (:roc) (email my personal email if necessary)]

-moz-appearance doesn't deal with fonts, does it? I thought that was handled through nsILookAndFeel. Ditto for colors.

We could allow independent selection of theme dimensions and theme drawing, but is that really worth it? It might not work very well anyway since to some extent the drawing depends on the dimensions.

For this use-case at least, what if we could just specify -moz-appearance-opacity, which would draw the theme background+borders with the given opacity?

Comment 6

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Or maybe that should be -moz-background-border-opacity, which would control the opacity of CSS borders and backgrounds as well as -moz-appearance, so it would work whether the theme author was using native appearance or CSS appearance.

Comment 7

[Myk Melez [:myk] [@mykmelez]]

(In reply to comment #6)
> Or maybe that should be -moz-background-border-opacity, which would control the
> opacity of CSS borders and backgrounds as well as -moz-appearance, so it would
> work whether the theme author was using native appearance or CSS appearance.

I think that'd work for Personas.  The only element for which it wouldn't work is the window, for which we want to both hide native style and apply a background image (the persona header image).  But we're probably ok just setting -moz-appearance: none for it, as I don't think -moz-appearance contributes anything to the window but a background-color on any platform.

Comment 8

[Myk Melez [:myk] [@mykmelez]]

(In reply to comment #7)
> I think that'd work for Personas.

The one exception I can find perusing the code is tabs on Mac, where we make the background completely transparent but the borders only partially transparent.

Otherwise, Personas sets -moz-appearance: none on some elements (like toolbarbuttons) to make their background and borders both partially transparent; on other elements it does so to make their background and borders both completely transparent (the toolbox, toolbars, the status bar, the find bar).

Both cases seem like they would be solved by -moz-background-border-opacity.

Comment 9

[Myk Melez [:myk] [@mykmelez]]

(In reply to comment #8)
> (In reply to comment #7)
> > I think that'd work for Personas.
> 
> The one exception I can find perusing the code is tabs on Mac, where we make
> the background completely transparent but the borders only partially
> transparent.

But tabs on Mac with a persona selected are fairly broken anyway (bug 482820), so it would be premature to try to address that aspect of the current implementation.  Plus Mac doesn't have multiple OS themes, so it's easier to emulate the appearance of its native theme in CSS when a persona is selected.

Comment 10

[[e-mail]]

Or some sort of opacity that applied before child elements were drawn?

Comment 11

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Is that different from -moz-background-border-opacity? In most cases the only thing an element draws before its children are the background and border.