Closed Bug 350689 Opened 18 years ago Closed 18 years ago

Winstripe tabstrip background image should darken the native color

Categories

(Firefox :: Tabbed Browser, defect)

2.0 Branch
x86
Windows XP
defect
Not set
normal

Tracking

()

RESOLVED FIXED
Firefox 2

People

(Reporter: dao, Assigned: dao)

References

Details

(Keywords: fixed1.8.1, Whiteboard: [Fx2 theme change])

Attachments

(4 files, 8 obsolete files)

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
Flags: blocking-firefox2?
Version: unspecified → 2.0 Branch
Blocks: NewTheme
Whiteboard: [Fx2 theme change]
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).
Blocks: 348975
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.
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."
Blocks: 350139
(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?
Assignee: nobody → sspitzer
Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: blocking-firefox2? → blocking-firefox2+
> 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.
Status: NEW → ASSIGNED
Attached image winstripe tabbrowser-tabs-bkgnd.png (obsolete) (deleted) —
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
Attachment #236391 - Flags: review?
Attached image before / after screenshot (obsolete) (deleted) —
Attached image before / after screenshot (classic) (obsolete) (deleted) —
Attachment #236391 - Flags: review? → review?(mconnor)
(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
This bug actually depends on bug 350690 since the tab images have to fit different backgrounds.
Depends on: 350690
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
(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
(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.
(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
Attached image winstripe tabbrowser-tabs-bkgnd.png v2 (obsolete) (deleted) —
shorter gradient, starting with black at 20% opacity
Attachment #236391 - Attachment is obsolete: true
Attachment #236400 - Flags: review?(mconnor)
Attachment #236391 - Flags: review?(mconnor)
(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;
Attached image tabbrowser-tabs-bkgnd.png v2 screenshots (obsolete) (deleted) —
Attachment #236392 - Attachment is obsolete: true
Attachment #236393 - Attachment is obsolete: true
(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
(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.
No longer blocks: 350139
Setting target milestone. This background looks really nice.
Target Milestone: --- → Firefox 2
(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
Attached image winstripe tabbrowser-tabs-bkgnd.png v3 (deleted) —
After working on bug 350690, I think starting with 15% opacity is better because the tabs inherit from that color.
Attachment #236400 - Attachment is obsolete: true
Attachment #236402 - Attachment is obsolete: true
Attachment #236794 - Flags: review?(mconnor)
Attachment #236400 - Flags: review?(mconnor)
(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)
Attached image v3 screenshots (obsolete) (deleted) —
(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
(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 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.
Attachment #236794 - Flags: review?(mconnor)
(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.
Attached image winstripe tabbrowser-tabs-bkgnd.png v4 (obsolete) (deleted) —
Attachment #236794 - Attachment is obsolete: true
Attachment #236835 - Attachment is obsolete: true
Attachment #237110 - Flags: review?(mconnor)
Attached image v4 screenshots (obsolete) (deleted) —
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)
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).
v3 has implied r/a mconnor, as part of bug #350690
Status: ASSIGNED → RESOLVED
Closed: 18 years ago
Keywords: fixed1.8.1
Resolution: --- → FIXED
(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.
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
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.
Attached image winstripe tabbrowser-tabs-bkgnd.png v5 (deleted) —
Attachment #237370 - Flags: review?(mconnor)
Attached image v3 vs. v5 screenshot (deleted) —
(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.
Reopening in order to get a decision on v5.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
accepting, I believe we will be going with v5 and I'll be landing it with a bunch of other images and css changes.
Status: REOPENED → ASSIGNED
(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.
> 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
Status: ASSIGNED → RESOLVED
Closed: 18 years ago18 years ago
Keywords: fixed1.8.1
Resolution: --- → FIXED
Attachment #236794 - Flags: review?(mconnor)
Comment on attachment 237370 [details] winstripe tabbrowser-tabs-bkgnd.png v5 note, v5 had r/a=mconnor, and I landed it last night.
Attachment #237370 - Flags: review?(mconnor) → review+
(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.
Assignee: moco → dao+bmo
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: