350689 - Winstripe tabstrip background image should darken the native color

Status: RESOLVED FIXED

(Firefox :: Tabbed Browser, defect)

Description

[Dão Gottwald [:dao]]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a1) Gecko/20060829 Minefield/3.0a1
Build Identifier: 

As of bug 350139, the tabstrip's background looks rather gray, see attachment 236060 [details].

tabbrowser-tabs-bkgnd.png has a constant opacity of 70% and a gray-to-white gradient. Instead it should be constantly gray and the opacity should go from
70% to 0% (or black / 50%-0% opaque or something like that).

Reproducible: Always

Comment 1

[ronin.achilles]

I agree. It should have some semblance of the theme. The solution proposed (constantly gray and the opacity should go from 70% to 0%) looks good since in that case, it will match the tab color (grayish) as well as the theme color (whatever it is).

Comment 2

[Dão Gottwald [:dao]]

Attachment: real Luna capture vs. tabbrowser-tabs-bkgnd.png overlaying Luna's beige

The left part is from attachment 236060 [details], the right part is a mockup (tabbrowser-tabs-bkgnd.png overlaying Luna's rgb(239,235,222) as it is present in Firefox 1.5).

Conclusion: The native color isn't present at all, even though the current image is 70% opaque.

Comment 3

[Dão Gottwald [:dao]]

marking blocking bug 350139 since this goal was missed:

"We should also have a semi-transparent image for the tabstrip, instead of being
tinted to match Lune Blue's beige, we want to blend more seamlessly, so we
should be able to darken the native color, but not shift colors."

Comment 4

[Dão Gottwald [:dao]]

(In reply to comment #2)
> Conclusion: The native color isn't present at all, even though the current
> image is 70% opaque.

Turns out, the tabbrowser-tabs-bkgnd.png that was checked in isn't transparent at all.

Seth, could it be that you broke that when making the image 1px wide?

Comment 5

[(not reading, please use [e-mail] instead)]

> Turns out, the tabbrowser-tabs-bkgnd.png that was checked in isn't transparent
> at all.
>
> Seth, could it be that you broke that when making the image 1px wide?

yes, I could have easily done this.  I'll go back double check.

Comment 6

[Dão Gottwald [:dao]]

Attachment: winstripe tabbrowser-tabs-bkgnd.png

I don't know how to create diffs, sorry. I made this change to browser.css:

-  background: #e0dccf url("chrome://global/skin/icons/tabbrowser-tabs-bkgnd.png") !important;
+  background-image: url("chrome://global/skin/icons/tabbrowser-tabs-bkgnd.png") !important;

screenshots coming

Comment 7

[Dão Gottwald [:dao]]

Attachment: before / after screenshot

Comment 8

[Dão Gottwald [:dao]]

Attachment: before / after screenshot (classic)

Comment 9

[Bryan]

(In reply to comment #8)
> Created an attachment (id=236393) [edit]
> before / after screenshot (classic)

I appreciate your work here but I disagree with the direction it's going.  I don't believe we should "darken" the native color.  It still looks "off" IMO.  We should leave the theme color intact as much as possible if not exactly as it is.

~B

Comment 10

[Dão Gottwald [:dao]]

This bug actually depends on bug 350690 since the tab images have to fit different backgrounds.

Comment 11

[Bryan]

The (In reply to comment #8)
> Created an attachment (id=236393) [edit]
> before / after screenshot (classic)

I think one could argue that the "darkened" colored is indeed a different color than the native color.  Your screenshot for classic looks like it has brown in it at the top of the tab strip.

(In reply to comment #10)
> This bug actually depends on bug 350690 since the tab images have to fit
> different backgrounds.

Are you stating that in your screenshots you're not using transparent tab images?

~B

Comment 12

[Bryan]

(In reply to comment #8)
> Created an attachment (id=236393) [edit]
> before / after screenshot (classic)

Actually I think the tab strip looks much worse now.  If you take the whole theme into account with these changes, the tab strip stands out because of the dark "blob" of color and doesn't transition seamlessly into the rest of the browser.

~B

Comment 13

[Dão Gottwald [:dao]]

(In reply to comment #11)
> I think one could argue that the "darkened" colored is indeed a different color
> than the native color.  Your screenshot for classic looks like it has brown in
> it at the top of the tab strip.

It's actually a dark gray, inspired by the current tabbrowser-tabs-bkgnd.png. Does it hurt?
Black and a lower opacity could be used instead.

> Are you stating that in your screenshots you're not using transparent tab
> images?

Yes. See bug 350690 for screenshots with semi-transparent tab images.

Comment 14

[Bryan]

(In reply to comment #13)
> It's actually a dark gray, inspired by the current tabbrowser-tabs-bkgnd.png.
> Does it hurt?
> Black and a lower opacity could be used instead.

I don't know if it hurts or not but I don't believe we should darken it as much as the screenshot shows (if at all).  Could you put together several different screenshots that show varying degrees of transparency with more of the actual native color shown and not darkened?

I don't believe any one part of the theme should stick out like this makes the tab strip stick out.  Going this darkened route makes it look incoherent.

~B

Comment 15

[Dão Gottwald [:dao]]

Attachment: winstripe tabbrowser-tabs-bkgnd.png v2

shorter gradient, starting with black at 20% opacity

Comment 16

[Dão Gottwald [:dao]]

(In reply to comment #15)
> Created an attachment (id=236400) [edit]
> winstripe tabbrowser-tabs-bkgnd.png v2

Again, browser.css needs change:

> -  background: #e0dccf url("chrome://global/skin/icons/tabbrowser-tabs-bkgnd.png") !important;
> +  background-image: url("chrome://global/skin/icons/tabbrowser-tabs-bkgnd.png") !important;

Comment 17

[Dão Gottwald [:dao]]

Attachment: tabbrowser-tabs-bkgnd.png v2 screenshots

Comment 18

[Bryan]

(In reply to comment #15)
> Created an attachment (id=236400) [edit]
> winstripe tabbrowser-tabs-bkgnd.png v2
> 
> shorter gradient, starting with black at 20% opacity

Looking much better!  How about 5% lighter to show a little more of the native color?

Thanks for you all of your efforts!

~B

Comment 19

[Dão Gottwald [:dao]]

(In reply to comment #18)
> Looking much better!  How about 5% lighter to show a little more of the native
> color?

I'll wait for a review or comment by mconnor/beltzner/somebody who's in charge first. I don't know if they accept images for the new theme from sb. but Radiant Core at all.

Comment 20

[Peter Kasting]

Setting target milestone.  This background looks really nice.

Comment 21

[Bryan]

(In reply to comment #20)
> Setting target milestone.  This background looks really nice.

Peter, I believe we need them a little lighter to better show the native color.  Maybe 5/10% lighter.

~B

Comment 22

[Dão Gottwald [:dao]]

Attachment: winstripe tabbrowser-tabs-bkgnd.png v3

After working on bug 350690, I think starting with 15% opacity is better because the tabs inherit from that color.

Comment 23

[Peter Kasting]

(In reply to comment #22)
> Created an attachment (id=236794) [edit]
> winstripe tabbrowser-tabs-bkgnd.png v3

Screenshot of this version?  (Not sure what differs between it and v2)

Comment 24

[Dão Gottwald [:dao]]

Attachment: v3 screenshots

Comment 25

[Bryan]

(In reply to comment #24)
> Created an attachment (id=236835) [edit]
> v3 screenshots

Looking great but can we not soften the horizontal "line" that exists in the focused tab?  I think it looks bad IMO.

~B

Comment 26

[Dão Gottwald [:dao]]

(In reply to comment #25)
> Looking great but can we not soften the horizontal "line" that exists in the
> focused tab?  I think it looks bad IMO.

See bug 350690.

Comment 27

[Mike Connor [:mconnor]]

Comment on attachment 236794 [details]
winstripe tabbrowser-tabs-bkgnd.png v3

I don't think this is quite the right look, we wanted to make the tabstrip a lot darker, to better contrast background icons.  This steps away from that, which isn't really the right answer.

Comment 28

[Dão Gottwald [:dao]]

(In reply to comment #27)
> (From update of attachment 236794 [details] [edit])
> I don't think this is quite the right look, we wanted to make the tabstrip a
> lot darker, to better contrast background icons.

I'll go back to v2 then and try to tweak it to match the mockup.

Comment 29

[Dão Gottwald [:dao]]

Attachment: winstripe tabbrowser-tabs-bkgnd.png v4

Comment 30

[Dão Gottwald [:dao]]

Attachment: v4 screenshots

Comment 31

[(not reading, please use [e-mail] instead)]

fyi: dao, I'm using your latest image for this bug in bug #350690.

thanks for the image, let's take the conversation to #350690 (for now)

Comment 32

[(not reading, please use [e-mail] instead)]

sorry for all the spam.  v3 + the images in bug #350690 leads to an optical illusion where the selected tab appears 1px lower than the others.

I've discussed this with mconnor, and we're going to use v3.

thanks again to dao for these images.

after I land the images and the css (in bug #350690), please feel free to come up with v5 (as long as it doesn't cause the dreaded illusion).

Comment 33

[(not reading, please use [e-mail] instead)]

v3 has implied r/a mconnor, as part of bug #350690

Comment 34

[Dão Gottwald [:dao]]

(In reply to comment #32)
> after I land the images and the css (in bug #350690), please feel free to come
> up with v5 (as long as it doesn't cause the dreaded illusion).

Okay, I'll try something like a lighter revision of v4.

Comment 35

[Bryan]

I appreciate all of the hard work put into this but it looks too dark IMO.  Definitely in classic mode.  Almost looks like different colors and that it's not my native color.

~B

Comment 36

[u88484]

Dao, I can't remember but the tabs in Windows Media Center Edition, are they the same as in luna or a different color? I know MCE has a lot of blues and not sure what the tabs look like.

Comment 37

[Dão Gottwald [:dao]]

Attachment: winstripe tabbrowser-tabs-bkgnd.png v5

Comment 38

[Dão Gottwald [:dao]]

Attachment: v3 vs. v5 screenshot

Comment 39

[Dão Gottwald [:dao]]

(In reply to comment #36)
> Dao, I can't remember but the tabs in Windows Media Center Edition, are they
> the same as in luna or a different color? I know MCE has a lot of blues and not
> sure what the tabs look like.

Royale usually tints background tabs blue (though not with the new theme). But this isn't related to this bug.

Comment 40

[Dão Gottwald [:dao]]

Reopening in order to get a decision on v5.

Comment 41

[(not reading, please use [e-mail] instead)]

accepting, I believe we will be going with v5 and I'll be landing it with a bunch of other images and css changes.

Comment 42

[Peter Kasting]

(In reply to comment #41)
> accepting, I believe we will be going with v5 and I'll be landing it with a
> bunch of other images and css changes.

Can't say I like v5 as well... it would be nice to know what perceived problem with v3 it fixes, since it looks "busier" to me and confuses my eye more.

Comment 43

[(not reading, please use [e-mail] instead)]

> Can't say I like v5 as well... it would be nice to know what perceived problem
> with v3 it fixes, since it looks "busier" to me and confuses my eye more.

the issue it fixes is the "optical illusion" where the selected tab appears 1px shorter (but it isn't).  see comment #32

I have just landed v5 on the branch, as part of bug #351775

Comment 44

[(not reading, please use [e-mail] instead)]

Comment on attachment 237370 [details]
winstripe tabbrowser-tabs-bkgnd.png v5

note, v5 had r/a=mconnor, and I landed it last night.

Comment 45

[Worcester12345]

(In reply to comment #38)
> Created an attachment (id=237371) [edit]
> v3 vs. v5 screenshot
> 

I'm hoping the bottom one is the new one. The tabs are more distinguishable (but still not enough) there.