859106 - Aero glass tab fog could be improved for some window colors

Status: RESOLVED WONTFIX

(Firefox :: Theme, defect)

Description

[fx4waldi]

Attachment: Current fog

Fog on the tab bar changes color window in Aero. Currently the fog is slightly blue, window color is incorrect. I think that if the fog would be white it would look better.

Comment 1

[fx4waldi]

Attachment: gadget

Comment 2

[fx4waldi]

Attachment: My Computer

Comment 3

[fx4waldi]

Attachment: White fog

Comment 4

[Matthew N. [:MattN]]

fx4waldi, it would be good if your white fog screnshots showed icons on the desktop behind background tabs so we could tell how readable the background tab titles would be.

Stephen, what are you thoughts on the glass fog when when using different window colors? See attachment 734384 [details] for the current state. Thanks.

Comment 5

[fx4waldi]

Attachment: icons on the desktop

UserStyles: http://userstyles.org/styles/86298/white-fog-australis

Comment 6

[Stephen Horlander [:shorlander]]

(In reply to Matthew N. [:MattN] from comment #4)
> fx4waldi, it would be good if your white fog screnshots showed icons on the
> desktop behind background tabs so we could tell how readable the background
> tab titles would be.
> 
> Stephen, what are you thoughts on the glass fog when when using different
> window colors? See attachment 734384 [details] for the current state. Thanks.

I don't think pure white fog is the answer because it will mess with the foreground/background contrast. We can probably find a more neutral color though.

Comment 7

[Mike Conley (:mconley) (:⚙️)]

We'd really like this, but I don't think it blocks us landing.

Comment 9

[Terrell Kelley]

Attachment: See the Aero fog on the word Calculator

It really, really should block landing. It doesn't look like fog. It looks like the color rendering got screwed up. It makes it look like Australis is somehow not getting the color rendering for titlebars. It makes Australis look broken, and that's the last thing you need when implementing something completely new. People are already going to be looking for problems.

If you need fog, follow the model used by Microsoft, which will be what people will expect. I'll attach another screenshot showing what Windows Aero users expect fog to look like. It only covers the text, not the entire titlebar, and is a lighter shade of the Aero color (or possibly just transparent white.)

Comment 10

[Terrell Kelley]

Attachment: crude titlebar

And it's not just the bright pink or orange colors. I just changed my color to the Twilight Aero theme (a darker theme where the fog should be most useful). It still doesn't look like fog. It looks like you are rendering at a much lighter color than the color the user set for glass. Glass is supposed to appear the same color throughout. Fog by definition should not make it look like you've changed the color of the titlebar. It is an effect, not an overall color change.

My point is that we need to preserve more of the original color, so that the effect looks like fog, and not a color change. At the very least, keep the original color in front of the first tab, near the window control buttons, and  above and below the text line, only fading in to maximum opacity just above and below the text. Though having the original color also visible when there's no tab would be even better (although I realize that would be complicated to do with CSS.)

I wish I'd had a Windows 7 machine to test on earlier, as I'd have caught this quite early on. I worry now that it may be too late.

I've included a very crude markup of what I mean, under the Twilight theme. Imagine it with cleaner lines and more gradual fog.

Comment 11

[Matthew N. [:MattN]]

We agree that this is a problem and that's why it's assigned to Stephen, our designer. I think you might be referring to comment 7 which was referring to landing on Nightly which isn't the same as shipping. It's not too late to fix this.

Comment 12

[sjw]

I use black with transparent disabled and it looks really ugly...

Comment 13

[sjw]

Attachment: black with transparent disabled

Comment 14

[Terrell Kelley]

(In reply to Matthew N. [:MattN] from comment #11)
> We agree that this is a problem and that's why it's assigned to Stephen, our
> designer. I think you might be referring to comment 7 which was referring to
> landing on Nightly which isn't the same as shipping. It's not too late to
> fix this.

No, it's just that Australis has been cooking for so long, that I thought the basic idea of how the fog looks (if not the exact color) might be set in stone. I've reported many other things on the UX build, and I've discovered that there just seems to be a very big reluctance to change things in Australis. 

But if you're still tweaking the look, then I have another suggestion: the ability to turn fog completely off. Ideally, this would be automatic, using the Aero customization settings (transparency, brightness, color) to determine whether it is needed. But I'd understand if there's not enough time before release to both code and test something like that. A pref would be a nice workaround.

People with dark themes might also be happy with just reducing transparency and using a light grey* font. In theory, at least, you could just have the fog be a less transparent version of the Aero color. Thus it will only look like fog on light, highly transparent Aero colors.

*Not white, so the unselected tabs won't stand out too much.

Comment 15

[Terrell Kelley]

Attachment: Mockup of idea in comment 14

I've prepared some mockups showing what I mean. (I chopped off the buttons because I screwed them up) I'm not sure if I should continue for every Aero color or not, as I don't know if you like my idea.

I really do not see a way to fix this without there being a way to grab the Aero color from the registry (probably with a moz prefixed aeroColor property). And that's again where the timetable worries me. Australis lands in Aurora in a week, and this bug is not seeing much activity, save that from people reporting problems.

Comment 17

[patrickjdempsey]

Fixing this is doable.  Please see Bug 578780, Comment 31:
https://bugzilla.mozilla.org/show_bug.cgi?id=578780#c31

I've played around with the box-shadow gradient currently being used and there will have to be some work done to make it more opaque and less "square" in the corners for Aero.

Comment 18

[Imanuel]

This will remove the fog and add a white shadow only behind the titles of the tabs:

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

@-moz-document url(chrome://browser/content/browser.xul) {
  #TabsToolbar:not(:-moz-lwtheme)::after {
    box-shadow: none;
  }
  
  .tabbrowser-tab:not([selected=true]) {
    text-shadow:  0px 0px 10px rgba(255, 255, 255, .9),
                  2px 0px 10px rgba(255, 255, 255, .9),
                 -2px 0px 10px rgba(255, 255, 255, .9),
                 0px  2px 10px rgba(255, 255, 255, .9),
                 0px -2px 10px rgba(255, 255, 255, .9);
  }
}

Comment 19

[Imanuel]

For the "new tab" icon:

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

@-moz-document url(chrome://browser/content/browser.xul) {
  #TabsToolbar:not(:-moz-lwtheme)::after {
    box-shadow: none;
  }
  
  .tabbrowser-tab:not([selected=true]) {
    text-shadow:  0px 0px 10px rgba(255, 255, 255, .9),
                  2px 0px 10px rgba(255, 255, 255, .9),
                 -2px 0px 10px rgba(255, 255, 255, .9),
                 0px  2px 10px rgba(255, 255, 255, .9),
                 0px -2px 10px rgba(255, 255, 255, .9);
  }
  
  .tabs-newtab-button::before {
    content: "+";
    color: transparent;
    display: block;
    text-shadow:  0px 0px 10px rgba(255, 255, 255, .9),
                  2px 0px 10px rgba(255, 255, 255, .9),
                 -2px 0px 10px rgba(255, 255, 255, .9),
                 0px  2px 10px rgba(255, 255, 255, .9),
                 0px -2px 10px rgba(255, 255, 255, .9);
    margin-right: -16px;
    margin-top: -3px;
    font-size: 2em;
  }
}

Comment 20

[Terrell Kelley]

Another option would be to use text shadows. Supposedly white text with a sufficient black shadow (or black outline) is legible on everything: http://2.bp.blogspot.com/-TGEt81O_qaI/Uxns70ZKVEI/AAAAAAAACE4/V5v81OF9sT4/s1600/white-text-black-outline.png

BTW, the shadowing looks a lot better when I have three rows of tabs. where the original color is still visible on the top and bottom. This suggests shrinking the fog by a third would look good.