347468 - Background tabs are too light after visual refresh

Status: VERIFIED FIXED

(Firefox :: General, defect)

Description

[Mark Mentovai]

Background tabs are now too light, such that their titles are unnecessarily difficult to read.  Nothing says to the user scanning the tab strip, "hey, I'm the text that identifies this tab!"

The new appearance of hovered tabs seems more appropriate for use for background tabs.

Comment 1

[Mark Mentovai]

Attachment: Fig. 1. View of the new tab strip

The fifth tab is active, the second tab is hovered, and the rest are backgrounded.

There are other problems visible in this image, such as the gap between the first two tabs, the line drawn to the left of the close box in the hovered tab, and the missing outline around parts of the location bar.  Separate bugs should be filed for these once steps to reproduce are clarified.

Comment 2

[Ryan Flint [:rflint] (ping via IRC for reviews)]

*** Bug 347485 has been marked as a duplicate of this bug. ***

Comment 3

[Ryan Flint [:rflint] (ping via IRC for reviews)]

Carrying over the blocking request from bug 347485.

Comment 4

[Mark Mentovai]

To match the rest of the OS, text in backgrounded tabs should only be lightened as much as the titles in title bars of backgrounded windows are.  We set the GrayText color in CSS to something that we get from the system that's appropriate for this task.

(Actually, GrayText uses kThemeTextColorDialogInactive, and kThemeTextColorWindowHeaderInactive would be more appropriate.  We stuff the latter into inactivecaptiontext, but that doesn't really seem like the right CSS color to use.  I'm pretty sure both wind up being the same color, anyway.)

Comment 5

[:Gavin Sharp [email: [e-mail]]]

*** Bug 347536 has been marked as a duplicate of this bug. ***

Comment 6

[Benjamin Smedberg]

The problem is that the titlebars of inactive windows have a much lighter background, which makes the total contrast greater. The total contrast of background tabs is close to unreadable.

Comment 7

[Mark Mentovai]

To put some numbers on it: they're lighter, but not really much lighter.  In Tiger, an inactive titlebar is striped 0xec and 0xf0, average 0xef.  The new background tabs are darker, between 0xe0 and 0xec.  Perhaps they should be brought a little bit lighter, but it's not so critical.  Titlebar text is mostly drawn in the 0x60 - 0x90 range, where the tab text is in the 0xb0 - 0xc0 range, MUCH too close to its background.

Comment 8

[Mike Connor [:mconnor]]

Even my youngish eyes have problems scanning the background tabs, so I think we need to tweak here.

Comment 9

[Jay Goldman]

Attachment: Changes opacity of background tabs to .5 instead of .3

Changes opacity of background tabs to .5 instead of .3

Comment 10

[Mark Mentovai]

Attachment: Fig. 2. Appearance with proposed patch (att. 232809)

That's better, but I still think that there's not enough contrast between the text and its background.  Compare how easy it is to read the title bar's text in this image with the background tabs.  The hovered tab's appearance is much closer to the appearance I expect of the background tabs.  Also, upon close examination of the hovered tab, you'll note that the background behind the close octagon is slightly darker than the rest of the tab's background.

Comment 11

[Mark Mentovai]

Attachment: Use .6 for background (as currently used for hover), .8 for hover

Comment 12

[Mark Mentovai]

Attachment: Fig. 3. Appearance with subsequent patch (att. 232832)

This also fixes the problem of the hovered tab's background not being consistent behind the close octagon.

Comment 13

[Jay Goldman]

I'm not crazy about .6 and .8 with regards to our orignal mandate for the tabstrip work, which was to substantially increase the differentiation between foreground and background tabs. At .5 (ignoring the close button background which should be adjusted to match), the difference between foreground, hover, and background tabs is much more obvious.

I have pretty good eyesight though - maybe someone with weaker eyes wants to comment on the legibility?

Comment 14

[Dão Gottwald [:dao]]

(In reply to comment #13)
> I'm not crazy about .6 and .8 with regards to our orignal mandate for the
> tabstrip work, which was to substantially increase the differentiation between
> foreground and background tabs.

Both of you are right. The text is easier to read but the difference between foreground and background tabs is too weak, imho. Isn't it possible to tweak those two things independently?

Comment 15

[philippe (part-time)]

(In reply to comment #13)
 
> I have pretty good eyesight though - maybe someone with weaker eyes wants to
> comment on the legibility?
> 

Based on the screenshots, at .5 the text is still quite hard to read on my PowerBook, with its lower contrast monitor. On the 20inch iMac we have here, it is just just, reports the user of that machine. For my not-so-young eyes it is not easy either.

note: all this in bright day light - that may affect perception.

Comment 16

[Mark Mentovai]

I think there's sufficient difference between .6 and 1 to make which tab is active plainly evident.  This may be easier to see in fig. 3 if you cover the hovered tab.  Recall that the hover effect won't be visible at most times, and when it is, it'll be clear that the effect is due to the hover.

In low light, I found that .6 gave me a critical few extra inches that I didn't have at .5 to make background tabs legible at a comfortable difference.  I'd even give .7 a try, but that probably wouldn't leave enough room for hover between background and active.  Maybe hover should use a different effect (darkening?)

Comment 17

[Dão Gottwald [:dao]]

(In reply to comment #16)
> I think there's sufficient difference between .6 and 1 to make which tab is
> active plainly evident.

The old theme's solution was sufficient too, but the intention was to increase clarity:

http://wiki.mozilla.org/images/6/6f/Fx2-new-theme-in-xp-v1.jpg

Comment 18

[Jay Goldman]

I'm much less concerned about the hover state appearing to be substantially different than the current tab since it is, as Mark points out, a much less frequent occurrence. I'm really just concerned that you can tell two things at a quick glance:

1) Which is the foreground tab?

2) What are background tabs and what's the empty tabstrip?

Do we feel that Fig.3 addresses those issues? I'm fairly confident that it takes care of number 2, though there isn't any empty tabstrip visible in the screenshot. It looks like enough of a contrast between the background tabs and the bits of tabstrip visible between them. I'm less sure that it addresses number 1, though I'm willing to live with it if it improves legibility.

It's too bad we don't have more opacity settings above 1 so that we could put more distance between them without going less than .6 :)

Comment 19

[Dão Gottwald [:dao]]

(In reply to comment #18)
> 2) What are background tabs and what's the empty tabstrip?

Looking at http://wiki.mozilla.org/images/6/6f/Fx2-new-theme-in-xp-v1.jpg, I don't think that's important. Certainly it's less important than 1) and the readability of the text.

Comment 20

[Mike Beltzner [:beltzner, not reading bugmail]]

(In reply to comment #18)
> I'm much less concerned about the hover state appearing to be substantially
> different than the current tab since it is, as Mark points out, a much less
> frequent occurrence. I'm really just concerned that you can tell two things at

I'm less concerned about that as well, and would be tempted to even suggest that the tab underneath the hover get a full 1.0 opacity like the selected one. Let's stick with the .8 for now, though.

> Do we feel that Fig.3 addresses those issues? I'm fairly confident that it

I think it does, yes, and without the cost of totally obscuring the titles on the background tabs. As you and I discussed on IM, it would be better if we could get some underlying XUL changes to allow us to change the opacity of the background without obscuring the text or favicons ...

Comment 21

[Dão Gottwald [:dao]]

(In reply to comment #20)
> As you and I discussed on IM, it would be better if we
> could get some underlying XUL changes to allow us to change the opacity of the
> background without obscuring the text or favicons ...

Why don't you change the image to a less opaque one instead of altering CSS opacity?

Comment 22

[Mike Beltzner [:beltzner, not reading bugmail]]

Mark/Jay, if we're going with these CSS changes as the solution, can we get a review-request on the bug and get it landed for beta2? Unreadable tabs is something I'd like to prevent for that milestone.

Comment 23

[Jay Goldman]

I believe we made the decision to go with Mark's patch for FX2 and revisit the issue later to see if there was a better long term solution. Assigning to mconnor.

Comment 24

[Mark Mentovai]

Checked in on MOZILLA_1_8_BRANCH before 1.8.1b2.

Comment 25

[Alex R.]

Can't this be revisited a moment? I personally think the background tabs are too light at the moment, even after this patch. It doesn't even look native.

Comment 26

[Mark Mentovai]

The tab strip strategy was changed in bug 350139.  Opacity is no longer used to manipulate the tab's appearance.  Instead, the background images change.  Text is always displayed in black, improving legibility.