612812 - remove text shadows from tab text

Status: RESOLVED FIXED

(Firefox :: Theme, defect)

Description

[John Daggett (:jtd)]

Tab titles are currently rendered with a text-shadow.  Especially in the case of inactive tabs where the background is darker, this leads to text that is blurry and tiring to read.  In Firefox 4 we've switched to using DirectWrite by default.  DirectWrite text rendering is much more subtle than Cleartype GDI rendering, so when a text shadow is placed on it the text tends to get washed out.

I would strongly recommend removing the text-shadow from tab title text.

Bug 594324 has a lot of background info related to this.

Comment 1

[John Daggett (:jtd)]

The first screenshot on this page also shows the problem:

https://wiki.mozilla.org/Firefox/Projects/New_Theme/Timeline

Note how the inactive tab "Bug 569255" looks washed out.

Comment 3

[Dão Gottwald [:dao]]

Attachment: patch

Comment 4

[Stephen Horlander [:shorlander]]

Attachment: Patch Result

This is what I get when I apply the patch.

Looks like it might be inheriting a rule:

http://mxr.mozilla.org/mozilla-central/source/browser/themes/winstripe/browser/browser-aero.css#117

Comment 5

[Dão Gottwald [:dao]]

Attachment: patch v2

Indeed, I thought we already prevented the text shadow from being inherited, but we intentionally don't do that for personas.

Comment 6

[Stephen Horlander [:shorlander]]

Comment on attachment 491697 [details] [diff] [review]
patch v2

Looks good!

Comment 7

[Dão Gottwald [:dao]]

http://hg.mozilla.org/mozilla-central/rev/97b3ddd2c690

Comment 8

[John Daggett (:jtd)]

Awesome, thanks Dão!

Comment 9

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

Hmm, browser.css still has this:
  #toolbar-menubar:not(:-moz-lwtheme),
  #TabsToolbar[tabsontop="true"]:not(:-moz-lwtheme),
  #navigator-toolbox[tabsontop="false"] > #nav-bar:not(:-moz-lwtheme),
  #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"] + #TabsToolbar[tabsontop="false"]:last-child:not(:-moz-lwtheme) {
    background: transparent !important;
    color: black;
    text-shadow: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255,255,255,.4);
  }

So active tab titles still have shadows.

The appmenu button also has
#appmenu-button {
  -moz-appearance: none;
  background: -moz-linear-gradient(rgb(247,182,82), rgb(215,98,10) 95%);
  background-clip: padding-box;
  border-radius: 0 0 4px 4px;
  border: 1px solid rgba(83,42,6,.9);
  border-top: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
              0 0 0 1px rgba(255,255,255,.25) inset;
  color: white;
  text-shadow: 0 0 1px rgba(0,0,0,.7),
               0 1px 1.5px rgba(0,0,0,.5);

So it has a shadow.

Comment 10

[Dão Gottwald [:dao]]

(In reply to comment #9)
> So active tab titles still have shadows.

I'll file a new bug on this.

> The appmenu button also has [...] So it has a shadow.

Yeah, it's supposed to have a shadow.

Comment 11

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

OK thanks, I just need to know which display list optimizations we're going to need for the long term :-)