Open Bug 608411 Opened 14 years ago Updated 2 years ago

Glass ( -moz-win-glass ) background can't be added to some elements

Categories

(Core :: Widget: Win32, defect)

x86
Windows 7
defect

Tracking

()

UNCONFIRMED

People

(Reporter: idr.ugoy, Unassigned)

Details

Attachments

(1 file)

User-Agent:       Mozilla/5.0 (Windows NT 6.1; rv:2.0b8pre) Gecko/20101029 Firefox/4.0b8pre
Build Identifier: Mozilla/5.0 (Windows NT 6.1; rv:2.0b8pre) Gecko/20101029 Firefox/4.0b8pre

For some reason, glass background can't be set for the elements like addon-bar, find-bar, etc. If you use this style:
background: transparent !important;
for those elements - then it works, but if you use this style:
background: -moz-win-glass !important;
for some reason - it won't work. I'm not even talking about content elements, currently I'm speaking of chrome elements, though it would be nice if glass would work for content elements too.

Reproducible: Always
Component: General → Widget: Win32
Product: Firefox → Core
QA Contact: general → win32
Version: unspecified → Trunk
-moz-win-glass can only be applied to the toplevel XUL <window>. What effect are you trying to achieve?
I want to apply -moz-wing-glass as a background for addon-bar and find-bar, for example (which is actually written in bug's description).
It also would be awesome to be able to apply it for any element, not only chrome, but for content too.
Why there is such a limit, that it can only be applied to toplevel XUL <window>? I want moar freedom.
The glass effect is actually implemented by Windows in a separate process so we can't use it directly in Gecko. You already seem to have figured out the intended solution of using -moz-win-glass on the <window> and background: transparent; everywhere.

If you want to achieve a glass-like effect for content & such, SVG is the way to go.
I have Addon-bar and Find-bar that are drawn above content, so your solution won't work: they will just have a transparent background, under which there is a currently opened page itself.
Thx for the idea to use SVG, but using an external SVG document is not really as comfortable as having built-in one, if it would be used, when something has -moz-win-glass.
Maybe applying such glass effect using SVG to the whole window would make Firefox work faster (e.g. load faster and consume less resources)?
+ then it would also be possible to make default theme for Firefox be more similar on different OSes...
And currently you keep -moz-win-glass just to work for single element (<window>) on only 2 OS that support it.
Please, seriously consider adding this, as actually, it might be a good trend to have different SVG's in the browser, if applying ones would add different beautiful effects (just remember, that SVG supports animation!).
I bet that Chrome and Opera will steal this idea pretty soon, mark my words.
oh, and could you, please, tell me how to apply an SVG file to be used as a background to an element (let's say for a the active tab)?
I tried converting it to base64 and used style:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

tab[selected="true"] { /* I also tried using background: instead of background-image: */
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIg0KImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHdpZHRoPSI5OTkiIGhlaWdodD0iNjY2IiB2ZXJzaW9uPSIxLjEiDQp4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPGRlZnM+DQo8ZmlsdGVyIGlkPSJHYXVzc2lhbl9CbHVyIj4NCjxmZUdhdXNzaWFuQmx1ciBpbj0iU291cmNlR3JhcGhpYyIgc3RkRGV2aWF0aW9uPSI0IiAvPg0KPC9maWx0ZXI+DQo8L2RlZnM+DQo8aW1hZ2UgeGxpbms6aHJlZj0iYmcuanBnIiB3aWR0aD0iOTk5IiBoZWlnaHQ9IjY2NiIgc3R5bGU9ImZpbHRlcjp1cmwoI0dhdXNzaWFuX0JsdXIpIi8+DQo8L3N2Zz4=") !important;}

But that just makes the active tab's background be just transparent.
What am I doing wrong?
p.s.: I have taken that SVG-file from here: http://files.bungu.ru/aero/svg/ - that page is a working example, that proves, that it's not a bad SVG-file.
(In reply to comment #4)
> I have Addon-bar and Find-bar that are drawn above content, so your solution
> won't work: they will just have a transparent background, under which there is
> a currently opened page itself.
> Thx for the idea to use SVG, but using an external SVG document is not really
> as comfortable as having built-in one, if it would be used, when something has
> -moz-win-glass.

I believe you can use svg inline with xul and html. The disabled-by-default ctrlTab feature does this for example.

> Maybe applying such glass effect using SVG to the whole window would make
> Firefox work faster (e.g. load faster and consume less resources)?
> + then it would also be possible to make default theme for Firefox be more
> similar on different OSes...

I doubt it. Windows uses hardware acceleration for the glass effect and our SVG implementation is software-only. Furthermore, we need to blur the contents behind the window and that's not available to us (design decision in Windows).

> And currently you keep -moz-win-glass just to work for single element
> (<window>) on only 2 OS that support it.

It's extremely easy to support on that single element and those two systems because Windows does most of the work for us. If it were easy to do this on other systems, we probably would.

> Please, seriously consider adding this, as actually, it might be a good trend
> to have different SVG's in the browser, if applying ones would add different
> beautiful effects (just remember, that SVG supports animation!).
> I bet that Chrome and Opera will steal this idea pretty soon, mark my words.

I'm not sure what you mean. I don't see how Chrome and Opera are relevant to this bug.
(In reply to comment #5)
> What am I doing wrong?

(In reply to comment #6)
> I believe you can use svg inline with xul and html. The disabled-by-default
> ctrlTab feature does this for example.

It appeared, that Firefox doesn't support SVG image in CSS at all ( https://bugzilla.mozilla.org/show_bug.cgi?id=231179 ).

> I doubt it. Windows uses hardware acceleration for the glass effect and our SVG
> implementation is software-only.

Is it planned to use hardware acceleration for drawing SVG elements too? It definitely should, but there is no such a bug now. Should I create one?

> It's extremely easy to support on that single element and those two systems
> because Windows does most of the work for us. If it were easy to do this on
> other systems, we probably would.

I just didn't know that Firefox would need to know what is behind it's window and that SVG won't work here.

> I'm not sure what you mean. I don't see how Chrome and Opera are relevant to
> this bug.

I meant that Chrome and Opera might start using SVG elements everywhere, instead of PNG icons and for adding absolutely new effects (glass is just 1 example), which were not available earlier. And Firefox had better to implement it first and be a flagman with that idea. You won't need to have 3 different throbbers for loading tab, 1 svg would be enough + you can paint it to any color using CSS.
(In reply to comment #6)
> I believe you can use svg inline with xul and html. The disabled-by-default
> ctrlTab feature does this for example.

At last I found out how to reach the styles for that element.
But I don't get what svg inline with xul and html are you talking about. How to reach them?
I want to copy that behavior for the add-on bar (with Barlesque extension, which makes addon-bar narrow), could you please help me? What part of code should I copy?
huh? some betas ago i made this userstyle, which worked great for me, just look at the screenshot.

http://userstyles.org/styles/40188

would someone using windows 7 try this?
(In reply to comment #9)

I'm on Windows 7 and it doesn't work for my case. I have addon-bar set to be narrow (not as wide as Fx's window is).
It works only in 1 case, actually - if everything is default.
And I want to be able to apply glass background to any element.
ok, but then at least it can be a starting point.
but i’m wondering: where can you set the addonbar to narrow?
addons like barlesque do it, or some userstyles also do so.
but "list all tabs" has a window with glassed background. I used DOMi but couldn't specify what part of code do I need to copy from it to make my narrow addon-bar (or just any element in the UI) get a glass background? How is it done there? using SVG's gaussian blur or somehow else?
why not just let users apply -moz-appearance: -moz-win-glass everywhere they like? why there are such big limitations for it?
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: