420236 - Update Vista's main window appearance

Status: RESOLVED FIXED

(Firefox :: Theme, enhancement, P2)

Description

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

(See attachment 306449 [details] for a mockup of toolbar styling for vista)

The background of the tabstrip on Vista should match the solid colour from -moz-appearance: toolbox 

I *believe* that this is #D3DAED (211,218,237)

Comment 1

[Dão Gottwald [:dao]]

(In reply to comment #0)
> I *believe* that this is #D3DAED (211,218,237)

That depends on the theme ...

Attachment 306449 [details] looks a little bit pale to me, due to the background being 100% solid.

Comment 2

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

(In reply to comment #1)
> (In reply to comment #0)
> > I *believe* that this is #D3DAED (211,218,237)
> 
> That depends on the theme ...

Not on Vista, afaict. No matter what I do, I can't really change that colour.

> Attachment 306449 [details] looks a little bit pale to me, due to the background being
> 100% solid.

That's an OmniGraffle mockup. My value came from eyedroppering my Vista UI.

Comment 3

[Dão Gottwald [:dao]]

(In reply to comment #2)
> (In reply to comment #1)
> > (In reply to comment #0)
> > > I *believe* that this is #D3DAED (211,218,237)
> > 
> > That depends on the theme ...
> 
> Not on Vista, afaict. No matter what I do, I can't really change that colour.

I would be surprised if Vista shipped without alternative themes like XP did, but in any case there are also third-party themes, e.g.:
http://www.myvistathemes.com/skins-and-themes/aero-gold-theme-free-download/

Comment 4

[Dão Gottwald [:dao]]

Attachment: modified mockup

Basically the same, but with a different appearance for the tabs. Background tabs are transparent and the foreground tab uses -moz-field.

Comment 5

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

Comment on attachment 306472 [details]
modified mockup

Alex, you OK with this? If so we can get away using a system based color ...

Comment 6

[Alex Faaborg [:faaborg] (Firefox UX)]

>Alex, you OK with this? If so we can get away using a system based color ...

Looks good to me, perhaps use -moz-field for the site button and search buttons as well to tie the theme together?

Comment 7

[Alex Faaborg [:faaborg] (Firefox UX)]

Comment on attachment 306472 [details]
modified mockup

Looks great :)

Comment 8

[Dão Gottwald [:dao]]

(In reply to comment #5)
> (From update of attachment 306472 [details])
> Alex, you OK with this? If so we can get away using a system based color ...

I was using #D3DAED just like you, not a system based color. (The image looks different because we used different gamma settings.)

Can we consider http://digiku.freepgs.com/files/vistaui_clean.png as a plan B? Looks much easier.

Comment 9

[Alex Faaborg [:faaborg] (Firefox UX)]

I can confirm that the correct color on native vista toolbars is #D3DAED (although this is changing in the rumored IE8 screen shot, looks like they weren't really a fan of sickly purple as well).

>Can we consider http://digiku.freepgs.com/files/vistaui_clean.png as a plan B?
>Looks much easier.

We wanted to give the navigation toolbar the forward pushing appearance, and also reduce the overall amount of sickly purple (#D3DAED) in the UI (no applications on Vista actually use the native toolbar color).

Is there any way we could get the tab strip to pick up the toolbox appearance being carried through the menu bar and bookmarks toolbar (and is it even possibly to do that with the navigation toolbar picking up an alternate background?)  That would allow us to to get the right color without having another strip of the UI bubbling towards the user.

Comment 10

[Alex Faaborg [:faaborg] (Firefox UX)]

Actually the rumored color change in IE8 was for the tabs (they got a little darker), no change to sickly purple.

Comment 11

[Dão Gottwald [:dao]]

(In reply to comment #9)
> >Can we consider http://digiku.freepgs.com/files/vistaui_clean.png as a plan B?
> >Looks much easier.
> 
> We wanted to give the navigation toolbar the forward pushing appearance, and
> also reduce the overall amount of sickly purple (#D3DAED) in the UI (no
> applications on Vista actually use the native toolbar color).

Was that an answer? :)
Put your good intentions aside, http://digiku.freepgs.com/files/vistaui_clean.png looks less stressful than beltzner's mockup and my modification of it. It's also better to implement, since we wouldn't have to hard code a random color but use the browsertabbar-toolbox appearance (which, according to its name, seems to be just right for the tab bar).

> Is there any way we could get the tab strip to pick up the toolbox appearance
> being carried through the menu bar and bookmarks toolbar

As far as I can tell, no. The tab bar isn't part of the toolbox, and moving it there isn't something that we would do right before or even after the last beta.

Comment 12

[Alex Faaborg [:faaborg] (Firefox UX)]

Right now I think we have two big problems with the Vista theme:

1) #D3DAED is a really unpleasant color
2) The tab strip is not in the same range of colors as toolbox

I agree that hard coding a color to solve 2 is bad (we had original talked about extracting the color from toolbox).  Instead of hard coding a color, perhaps we could use an unconventional system color, like InactiveBorder.

In terms of the navigation toolbar, I think I'm in favor of it blending into the bookmarks bar, similar to the vistaui_clean mockup (I'll attach a mockup).  However the vistaui_clean mockup doesn't address the prevalence of #D3DAED, which while a native color ends up making us look non-native because we are the only app displaying it.

Comment 13

[Alex Faaborg [:faaborg] (Firefox UX)]

>I think I'm in favor of it blending into the bookmarks bar, similar to the vistaui_clean mockup

Actually never mind, it gets lighter again on the bottom so this really doesn't work.

Comment 14

[Dão Gottwald [:dao]]

You mean blending the navigation toolbar into the bookmarks bar doesn't work if we use #D3DAED for the tab bar?

Comment 15

[Alex Faaborg [:faaborg] (Firefox UX)]

Attachment: Simplified toolbar that doesn't look right

This is what I meant

Comment 16

[Dão Gottwald [:dao]]

Yes, blending works only if you don't use browsertabbar-toolbox for the navigation toolbar.

Comment 17

[Alex Faaborg [:faaborg] (Firefox UX)]

Attachment: Negative space bookmarks toolbar idea

Here is another idea, the bookmarks toolbar and the tab strip are both in negative space, using the system color ThreeDFace.

Comment 18

[Alex Faaborg [:faaborg] (Firefox UX)]

Trying to make the theme look decent on Vista without glass support really isn't easy.

Comment 19

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

Can we get a patch for attachment 306472 [details] put together? Yes, it might look awkward on classic (though really, a lot of Vista does) but it would help if we could actually touch and experience these things as more than mockups.

Comment 20

[Dão Gottwald [:dao]]

For me, that proposal doesn't end the discussion but morphs the question to: Why shouldn't we touch and experience <http://digiku.freepgs.com/files/vistaui_clean.png>? It has the advantage of not being a hack.

Comment 21

[Dão Gottwald [:dao]]

Attachment: modified vistaui_clean.png mockup

same polishing that I did for beltzner's mockup

Comment 22

[Alex Faaborg [:faaborg] (Firefox UX)]

Changing the bug title since we are discussing more than just the tabstrip.

Comment 24

[Dão Gottwald [:dao]]

(In reply to comment #12)
> Right now I think we have two big problems with the Vista theme:
> 
> 1) #D3DAED is a really unpleasant color
> 2) The tab strip is not in the same range of colors as toolbox
> 
> I agree that hard coding a color to solve 2 is bad (we had original talked
> about extracting the color from toolbox).

Also, how does hard coding #D3DAED solve 1)? Seems backwards.

> Instead of hard coding a color,
> perhaps we could use an unconventional system color, like InactiveBorder.

Probably impossible to find the right foreground color for that.

> However the vistaui_clean mockup doesn't address the prevalence of #D3DAED,
> which while a native color ends up making us look non-native because we are the
> only app displaying it.

Even if attachment 306472 [details] would solve the color issue satisfyingly, I see clutter in it, which seems like the bigger evil. Firefox acts as a frame for the actual content; it's important to look sleek and not distracting.

Comment 25

[Alvaro Muñoz]

Attachment: mockups' mix

A mix of the mockups plus a bit of IE. I think this looks good

Comment 26

[Alex Faaborg [:faaborg] (Firefox UX)]

>A mix of the mockups plus a bit of IE. I think this looks good

Yeah, that is the best looking design I've seen so far.  I think we are tying our hands by trying to only use extracted toolbar appearances and system colors.  I tried to pull of something similar to Alvaro's mockup but gave up when I realized it wasn't possible give the constraints (comments 15 and 16).  After creating a variety of mockups that frankly don't look that great, I'm pretty convinced that the only way to create a decent Vista theme is to punt on trying to also support Windows Classic.  We can release a "Windows Classic" Firefox theme for users on Vista who still run in that mode, and this won't be a problem in the next release if we are able to find a way to add css selectors on the OS theme.

Also, if we start hard coding image backgrounds and colors, we should do that for all of the toolbars and the tabstrip, so at least Firefox looks internally consistent when using the Windows Classic theme.  Otherwise we will have a tan toolbar followed by a light purple tab strip or something clearly broken.

Comment 27

[Dão Gottwald [:dao]]

We should not start hard coding image backgrounds and colors for toolbars. -moz-appearance:toolbox and browsertabbar-toolbox are our friends. No need to break support for Vista themes other than the default one.

Comment 28

[Alex Faaborg [:faaborg] (Firefox UX)]

Is there any way for us to package firefox with two themes?  We used chrome overrides so that we wouldn't have to do two builds, and so the icons would appear right by default.  I'm personally fine with Classic users having to go to the addon manager to switch to another pre-populated theme if it makes our Vista theme actually look good by default, and in review screenshots.

Comment 29

[Dão Gottwald [:dao]]

I don't have a strong opinion about attachment 307588 [details] vs. attachment 307778 [details], but I see one problem with attachment 307778 [details]. It would require grouping all toolbars excluding the menu bar. Currently, all toolbars /including/ the menu bar are grouped in the navigator-toolbox.

(In reply to comment #28)
Getting the window appearance right while preserving OS integration (which means to be auto-adaptive instead of trying to mime a certain look) is probably easier than shipping a dedicated classic themes.

Comment 30

[Alex Faaborg [:faaborg] (Firefox UX)]

I thought attachment 307778 [details] is impossible to pull off using -moz-appearance:toolbox and browsertabbar-toolbox because it would end up looking like attachment 307186 [details] (no seamless edge between navigation toolbar and bookmarks toolbar).

Comment 31

[Dão Gottwald [:dao]]

We would apply the toolbox appearance to the hypothetical container of the navigation toolbar and the bookmarks toolbar. That's not exactly what attachment 307778 [details] shows, but probably close.

Comment 32

[Dão Gottwald [:dao]]

Attachment: use browsertabbar-toolbox for the tabbar (checked in)

This is the easiest, least harmful and most effective first step. It makes the tabbar use the browsertabbar-toolbox appearance if available.

Comment 33

[Alvaro Muñoz]

Changed my mind, I think this (http://forums.mozillazine.org/viewtopic.php?p=3287056#3287056) looks way better and it isn't hardcoded

Comment 35

[Dão Gottwald [:dao]]

(In reply to comment #33)
> Changed my mind, I think this
> (http://forums.mozillazine.org/viewtopic.php?p=3287056#3287056) looks way
> better and it isn't hardcoded

The text color is hardcoded as #fff, which is bad because the communications-toolbox appearance isn't guaranteed to be present, and I guess it's not guaranteed to be dark blue either.

Comment 36

[Alvaro Muñoz]

(In reply to comment #35)
> (In reply to comment #33)
> > Changed my mind, I think this
> > (http://forums.mozillazine.org/viewtopic.php?p=3287056#3287056) looks way
> > better and it isn't hardcoded
> 
> The text color is hardcoded as #fff, which is bad because the
> communications-toolbox appearance isn't guaranteed to be present, and I guess
> it's not guaranteed to be dark blue either.
> 

Text color is also white in Windows Explorer and Mail and I haven't found any theme with light toolbars so I think it's safe to hardcode it in Firefox for Vista

Comment 37

[Alvaro Muñoz]

BTW isn't there any white system color?

Comment 38

[Dão Gottwald [:dao]]

The fact that Window Explorer is using white doesn't mean that they're hardcoding white.

highlighttext is often white, but it doesn't have to be, and it's not clear if it will always be in sync with the special toolbox appearances.

Comment 39

[Dão Gottwald [:dao]]

And of course, if the special appearance isn't present at all, both white and highlighttext will definitely be wrong.

Comment 40

[Alvaro Muñoz]

(In reply to comment #38)
> The fact that Window Explorer is using white doesn't mean that they're
> hardcoding white.
> 
> highlighttext is often white, but it doesn't have to be, and it's not clear if
> it will always be in sync with the special toolbox appearances.
> 

But if Firefox uses the same system color Explorer does it will always look ok (I don't think 3rd party themes will want to break Explorer)

(In reply to comment #39)
> And of course, if the special appearance isn't present at all, both white and
> highlighttext will definitely be wrong.
> 

What do you mean by not present, Firefox not "finding" it or Windows not having it?

Comment 41

[Dão Gottwald [:dao]]

(In reply to comment #40)
> But if Firefox uses the same system color Explorer does it will always look ok
> (I don't think 3rd party themes will want to break Explorer)

I can't tell which mechanism Explorer is using.

> (In reply to comment #39)
> > And of course, if the special appearance isn't present at all, both white and
> > highlighttext will definitely be wrong.
> > 
> 
> What do you mean by not present, Firefox not "finding" it or Windows not having
> it?

Windows not having it. That would apply to the Classic theme and probably a few third-party themes. (Although I know that Alex cares less about third-party themes, I'm pretty sure we don't want to make Firefox unusable for them.)

Comment 42

[Wesley Johnston (:wesj)]

(In reply to comment #35)
> (In reply to comment #33)
> > Changed my mind, I think this
> > (http://forums.mozillazine.org/viewtopic.php?p=3287056#3287056) looks way
> > better and it isn't hardcoded
> 
> The text color is hardcoded as #fff, which is bad because the
> communications-toolbox appearance isn't guaranteed to be present, and I guess
> it's not guaranteed to be dark blue either.

You're not guaranteed that browsertabbar-toolbox won't be black either, are you? Unless the theme code is modified to pull out those text colors, its a zero sum game. Personally, I think you're better foregoing native styles all together, or assuming that themers will always use dark backgrounds for some toolbars and light background for others.

Comment 43

[Dão Gottwald [:dao]]

(In reply to comment #42)
> You're not guaranteed that browsertabbar-toolbox won't be black either, are
> you?

That's right. That's why we're wouldn't hard code black for the text color there.
A theme should in fact be allowed to make that toolbar black -- it just needs to update the dialog text color accordingly.

Comment 44

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

Comment on attachment 308121 [details] [diff] [review]
use browsertabbar-toolbox for the tabbar (checked in)

As Dao says, this is a good start, and looks better than the button background colour we have now. I would almost rather that we make this a Vista-only rule using chrome-overrides so that the Vista-only bits are all in one place, but if it gracefully degrades, who am I to argue?

As a note, I'm aware that this puts a bright white line at the top of the tabstrip - that's due to the contrast from the toolbox styling in the bookmark and navigation toolbars above, and we'll fix it with one of the designs we're discussing in this bug.

Comment 45

[Alex Faaborg [:faaborg] (Firefox UX)]

Dao: let's land this in the nightly builds to start getting feedback.

Comment 46

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

(In reply to comment #41)
> Windows not having it. That would apply to the Classic theme and probably a few
> third-party themes. (Although I know that Alex cares less about third-party
> themes, I'm pretty sure we don't want to make Firefox unusable for them.)

Firefox won't be unusable for them, they'll just need to find a third-party theme for Firefox as well. While I have no data on the subject, I'm pretty sure that anyone who goes to the effort of installing a third-party Windows theme will also be comfortable finding its equal third-party Firefox theme. :)

Alex's point, and I think he's right here, is that we shouldn't be limiting ourselves simply to support non-standard configuration options. While I'd love to see us get things working more-or-less on Windows Classic in Vista, I'd be happy if we got things to a point where they're workable-but-awkward on Classic in Vista in order to be rocking-and-modern in the default Vista theme.

I'm going to come out and say it: we should not be optimizing our Vista theme for the Classic theme on Vista. I've double checked with Schrep and Connor, and they're both in agreement. This should not jeopardize the Windows XP default theme nor that theme's support for classic as we can use chrome overrides to split out Vista-specific parts of the CSS.

We should keep track of what doesn't work so well in Classic, though, and think about how to fix it in the future if Vista continues to support that theme. Further, we should probably out how to ship a Vista-Classic theme. Perhaps just enabling the XP theme on Vista?

Anyway, you know where to send complaints. :)

Comment 47

[Dão Gottwald [:dao]]

While I'm okay with treating Vista/Classic as a second-class citizen, we shouldn't stretch "awkward" too much. People who choose or have to use that theme aren't necessarily those who'd also switch the Firefox theme. For example, if we'd hardcode a black background for the navigation toolbar, that would probably drive away quite a few corporate users.

Alex made some good points about why he thinks visual integration with the platform is important:

> -Cross platform apps that establish their own cross platform visual style
> (like RealPlayer and Java Swing) feel foreign and strange
> -The Web browser is a central part of your computing experience
> -We want the user's first impression to be feeling comfortable with the UI
> -If the transition in and out of Firefox is visually jarring the user won't
> achieve flow when completing tasks (like when you are driving a car, and you
> realize you haven't been thinking about driving for quite awhile).
> -We want Firefox to feel like the browser your computer should have shipped
> with 

We have to consider Classic as one of the possible defaults. And right now, with some of the proposals, it seems like we'd fail on most of these points.

Comment 48

[Dão Gottwald [:dao]]

BTW, as we break compatibility with third-party OS themes, we also lose forward-compatibility with themes that Microsoft decides to ship. That can happen even between major releases at any time, as with the Royale theme for Windows XP Media Center Edition.

Comment 49

[Alex Faaborg [:faaborg] (Firefox UX)]

>BTW, as we break compatibility with third-party OS themes, we also lose
>forward-compatibility with themes that Microsoft decides to ship.

I totally agree that breaking compatibility with different OS themes on Vista isn't ideal, but hypothetically we can ship a 3.1 release with OS theme detection before microsoft releases additional Vista themes, or windows 7.

In the meantime, getting a well crafted Firefox theme for the default os theme on Vista has to be our top priority.  This is the theme that will be pictured in every review, discussed by tech journalists in podcasts, etc.

Comment 50

[Wesley Johnston (:wesj)]

From Bug 419383, it sounds like at least the Communications Rebar (the blue one?) specifies a text color. How hard would it be to pull that out? I can't find a bug filed to do it. If it isn't to hard, it could at least negate all this discussion for the main window (until MS releases a theme with browsertabbar painted entirely chartreuse).

Comment 51

[Dão Gottwald [:dao]]

(In reply to comment #49)
Well, the default appearance on Vista is important. And even if it is the top priority, it can't be the only one. The key question is how close we can get to an ideal Vista appearance and how much breakage for other OS settings we can accept. I think breaking the Classic appearance significantly would be a mistake (comment 47), and breaking third-party themes doesn't seem like a small price to pay to me either anymore (comment 48; having to play catch-up with a hypothetical 3.1 release isn't that desirable).

I disagree that tech reviews play an important role in this. As we discuss nuances, choosing option A for being less dangerous over option B, which might look slightly better on a standard Vista, won't make hordes of journalists and the limited number of their readers trash Firefox. One way or another Firefox 3 will be a big leap forward.

*If* we can get OS theme detection for 3.1, that would be the right time to ship more radical changes.

Comment 52

[Mike Connor [:mconnor]]

Comment on attachment 308121 [details] [diff] [review]
use browsertabbar-toolbox for the tabbar (checked in)

Let's just ship it, and we'll reevaluate after b5 if we think we've made a massive mistake.

Comment 53

[Cheng Khoon]

The tabbar feels awkward after applying the tabbox changes. I think it should look better with a sunken look rather than the raised look.

>> Instead of hard coding a color,
>> perhaps we could use an unconventional system color, like InactiveBorder.

> Probably impossible to find the right foreground color for that.

My impression is that the active tab background shouldn't be a problem but rather the inactive tab background. In that case, we can always make it less opaque so that the foreground color is easier to pick.

Comment 54

[Cheng Khoon]

> My impression is that the active tab background shouldn't be a problem but
> rather the inactive tab background. In that case, we can always make it less
> opaque so that the foreground color is easier to pic

Sorry, I mean less transparent.

Comment 55

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

Comment on attachment 308121 [details] [diff] [review]
use browsertabbar-toolbox for the tabbar (checked in)

a1.9=beltzner

Comment 56

[Reed Loden [:reed]]

Checking in browser/themes/winstripe/browser/browser.css;
/cvsroot/mozilla/browser/themes/winstripe/browser/browser.css,v  <--  browser.css
new revision: 1.187; previous revision: 1.186
done

Comment 57

[Ryan A. C.]

Attachment: Slightly less sickly purple

I found an appearance that gets rid of some of the sickly purple, and doesn't look too bad. Also looks completely normal on classic.

userchrome.css:

toolbar {
   -moz-appearance: none !important;
}

/* Menu Bar */
#toolbar-menubar {
-moz-appearance: toolbox !important
}

#navigator-toolbox { 
-moz-appearance: browsertabbar-toolbox !important 
} 

of course if the container for the nav-bar and PersonalToolbar were to be made then we could apply browsertabbar-toolbox to that container.

Comment 58

[Ryan A. C.]

Attachment: media nav-bar, hidden menu, browsertabbar on bookmarks

Forgive the somewhat crude mock-up..

This one is a bit of a drastic change, probably a little too much this late in the game unfortunately.
If we intend to support aero in the future then we're already looking at a black nav-bar on top scenario, so I figure why not use media-toolbox on nav-bar. After that, unifying the bookmarks and tabbar into browsertabbar-toolbox looks nice.

The issue of the lack of menu afterwords however would be a problem...

Comment 59

[Dão Gottwald [:dao]]

another one:
http://digiku.freepgs.com/files/vistaui_clean2.png

Comment 60

[Marco]

Just to express my support for vistaui_clean2, I based it off attachment 307778 [details], and I really like it. Here's the userstyle:

/* An adjustment made solely to allow border changes; without this, borders don't change in Aero. */
#navigator-toolbox toolbar {
	-moz-appearance: none !important;
}

/* Menu Bar */
#toolbar-menubar {
	border-bottom-color: threedshadow !important;
}

/* Navigation Bar (Back, Forward, Address Bar, etc.) */
#nav-bar {
	border-top-color: threedhighlight !important;
	border-bottom: 0 !important;
}

/* Personal/Bookmarks Toolbar */
#PersonalToolbar {
	border: 0 !important;
}

The only issue is the sickly purple. On another note, I find this degrades really well to Windows Classic:

http://digiku.freepgs.com/files/vistaui_clean2_winclassic.png

The only border is on the top menubar. I don't think it'd be much of a problem for the other toolbars to lack any dividers, considering MSPaint does the same thing. The only borders it has are, again, on the top menubar. Look at the diagram below, or open MSPaint up for yourself:

http://digiku.freepgs.com/files/mspaint_ui.png

Comment 61

[Marco]

Attachment: Sickly purple replacement

Also, about the sickly purple, I think it's worth noting that MSPaint and Wordpad use the gray toolbar color for their toolbars, which the Appearance settings calls "3D Objects".

http://digiku.freepgs.com/files/3dobjects.png

And I thought to use the default 3D Objects color for Firefox's toolbars, and it looks really good; see attachment. It fits with what MSPaint and Wordpad do. Here's a test userstyle -- #F0F0F0 is the default 3D Objects color:

/* An adjustment made solely to allow border changes; without this, borders don't change in Aero. */
#navigator-toolbox toolbar {
	-moz-appearance: none !important;
}

/* Menu Bar */
#toolbar-menubar {
	border-bottom-color: threedshadow !important;
}

/* Navigation Bar (Back, Forward, Address Bar, etc.) */
#nav-bar {
	border-top-color: threedhighlight !important;
	border-bottom: 0 !important;
	background-color: #F0F0F0 !important; /* 3D Objects color; MSPaint and Wordpad use this for their toolbars. */
}

/* Personal/Bookmarks Toolbar */
#PersonalToolbar {
	border-top: 0 !important;
	border-bottom-color: threedshadow !important;
	background-color: #F0F0F0 !important; /* 3D Objects color; MSPaint and Wordpad use this for their toolbars. */
}

Are the CSS colors "threedhighlight" and "threedshadow" hardcoded, or do they refer to the Windows user settings? If the latter is the case, I think a color named "threedobject", for instance, can expose the 3D Objects color and *that's* what can be used to replace the sickly purple.

Comment 62

[Jordan]

I was messing around with existing toolbars, and came up with these mockups.

I guess it is too late in the day to make the Vista theme look like any of them, or whether any of them are actually an improvement on the current theme.

Nevertheless, here they are:
http://i256.photobucket.com/albums/hh194/cyberkilla04/moztestszz.png

Any thoughts?

Comment 63

[Wesley Johnston (:wesj)]

Attachment: Toolbox on the window

Just had a thought last night. One way to get rid of the sickly purple in the tabbar without giving it a toolbox style might be to set the window appearance to browsertabbar-toolbox, and then making the tabbar transparent (you can also get rid of the gray in the statusbar that way, although its not standard on Vista). Attachment shows that done:

#main-window { -moz-appearance: browsertabbar-toolbox !important; }

.tabbrowser-tabs {
  -moz-appearance: none !important;
  background-color: transparent !important;
  background-position: bottom left !important;
}

#status-bar {
  -moz-appearance: none !important;
  background-color: transparent !important;  
}

Bottom pic shows the browsertabbar background (quickly) extended over the PersonalToolbar to create a more recessed look.

Comment 64

[Victor Bielawski]

Why not use browsertabbar-toolbox for #nav-bar, like in the previous mockups? It gets rid of Sickly Purple(tm), looks fine on Classic, and has exactly the same problems as using browsertabbar-toolbox for the tabs.

Comment 65

[Dão Gottwald [:dao]]

There are some interesting proposals floating around. Assigning to beltzner for UI decisions; I'll keep watching this bug and help out if needed.

FWIW, attachment 308121 [details] [diff] [review] put us in a pretty decent state (better than I had expected). We could do other things, but don't have to.

Comment 66

[Ryan A. C.]

> but I see one problem with attachment 307778 [details]. It would require grouping all
> toolbars excluding the menu bar. Currently, all toolbars /including/ the menu
> bar are grouped in the navigator-toolbox.

Couldn't we <box> them? I tried this quickly and I see it breaks the boxed toolbars, probably due to hierarchy change?, but this would make a minimal impact to 3rd party theme development, since this theoretical <box> would be completely transparent to them unless they chose to make use of it, and would maintain consistency to previous behaviors. 

Comment 67

[Mike Connor [:mconnor]]

Beltzner, what's needed to resolve this?

Comment 68

[Recall]

Attachment: Less sickly purple, removed menu bar, cleanui mockup

I have been reading this bug, and come up with some code based on others posted here.

/* An adjustment made solely to allow border changes; without this, borders
don't change in Aero. */
#navigator-toolbox toolbar {
-moz-appearance: none !important;
}

/* Navigation Bar (Back, Forward, Address Bar, etc.) */
#nav-bar {
border-top-color: threedhighlight !important;
border-bottom: 0 !important;
}

/* Personal/Bookmarks Toolbar */
#PersonalToolbar {
border: 0 !important;
}

toolbar {
-moz-appearance: none !important;
}

/* Menu Bar */
#toolbar-menubar {
-moz-appearance: toolbox !important
}

#navigator-toolbox {
-moz-appearance: browsertabbar-toolbox !important
}

Comment 69

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

Attachment: browsertabbar-toolbox across all of navigator-toolbox, no borders

We can't get what I want, which is browsertabbox-toolbar across all toolbars *except* the menubar, as the XUL doesn't let us play that way. This is, IMO, the next best thing.

Uses:

#navigator-toolbox {
        -moz-appearance: browsertabbar-toolbox !important;
}

#navigator-toolbox > toolbar {
        -moz-appearance: none !important;
		border-top: 0 !important;
		border-bottom: 0 !important;
}

For super bonus points, if you want to disable your menu to make your app really vista-ish, just go and add this to your userChrome.css:

/* Menu Bar */
#toolbar-menubar {
        display: none !important;
}

Comment 70

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

Attachment: browsertabbar-toolbox across all of navigator-toolbox, no borders

This makes it look like attachment 315280 [details] on Vista

Comment 71

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

Attachment: browsertabbar-toolbox across all of navigator-toolbox, no borders (v2)

Comment 72

[Dão Gottwald [:dao]]

Comment on attachment 315339 [details] [diff] [review]
 browsertabbar-toolbox across all of navigator-toolbox, no borders (v2)

>+#navigator-toolbox > toolbar {
>+   -moz-appearance: none;

Nit: indention should be 2 spaces.

>+   border-top: 0;
>+   border-bottom: 0;

Just "border-style: none;" should work as well.

>-}
>+}
>\ No newline at end of file

add that line back? :)

Comment 73

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

Attachment: browsertabbar-toolbox across all of navigator-toolbox, no borders (v3)

Nits addressed, carrying over review. Alex, just want to make sure you're OK with this before we pull the trigger.

Comment 74

[Jes Carlskov]

If I put this in my userchrome.css, my Firefox looks like it lacks the black border when tab-bar is not displayed (i.e. no more than one tab).

Comment 75

[Alex Faaborg [:faaborg] (Firefox UX)]

Comment on attachment 315280 [details]
browsertabbar-toolbox across all of navigator-toolbox, no borders

I personally think giving the menu bar a centered reflection line is really important.  The lighter gradient at the bottom of the bookmarks toolbar is nice, but I don't think it is worth the cost of losing the center reflection line on the menu bar.

Setting border-style: none improves the appearance.

Comment 76

[Alex Faaborg [:faaborg] (Firefox UX)]

Attachment: Reflection lines on menus in Vista

Here is a set of screen shots of menus in Vista.  Across all of the examples the reflection line on the menu is roughly centered on the text, although Windows Mail, Windows Explorer and IE all are still using the previous style of menu, which makes the menu bar taller.

The single outlier is windows movie maker, which has a non-centered reflection line probably because they are using the media rebar that was designed for a 37 pixel tall toolbar (used in Windows media player and Photo Gallery).  I don't know if the menu appearance of Windows movie maker is intentional or not, but I personally think it looks like a mistake, or potentially an artifact of them rushing to ship.

So, from looking at all of these examples of menu bars in Vista, I think we should use a centered reflection line on our menu bar.  Specifically, I think this css does more harm than good:

#navigator-toolbox {
  -moz-appearance: browsertabbar-toolbox;
}

Comment 77

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

Attachment: browsertabbar-toolbox across all of navigator-toolbox, no borders (v4)

Addresses Alex's comments, carries over Dao's review, requesting approval.

Comment 78

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

I agree that we *should* use a centered reflection line in our menu bar, it was unclear to me where that priority lay in the battle against sickly purple, or even the battle for getting the gradient closer to the navigation control bar. 

This new patch doesn't do much, super-safe, requesting approval.

Comment 79

[ronin.achilles]

Attachment: Vista Styling for Firefox 3

Is something like this possible?... just like in OSX Proto theme we have the uniquely styled bookmarks toolbar integrating with the tabs, maybe we can have a special styling for bookmarks toolbar in Vista too.

Comment 80

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

Ronin: it's possible, sure. Set your personal toolbar to use -moz-appearance: communications-toolbar. It doesn't play nice when you add other toolbars, though, and after running with similar things for a while, ends up not really looking that native on Vista (which is, admittedly, a hard concept, as there's not a lot of "native" Vista yet these days)

The userChome if you want to play is:

#PersonalToolbar {
 -moz-appearance: communications-toolbox ! important;
}

Comment 81

[ronin.achilles]

(In reply to comment #80)
> Ronin: it's possible, sure. Set your personal toolbar to use -moz-appearance:
> communications-toolbar. It doesn't play nice when you add other toolbars,
> though, and after running with similar things for a while, ends up not really
> looking that native on Vista (which is, admittedly, a hard concept, as there's
> not a lot of "native" Vista yet these days)
> 
> The userChome if you want to play is:
> 
> #PersonalToolbar {
>  -moz-appearance: communications-toolbox ! important;
> }
> 

Mike,
Thats the CSS which I have used to get that look ..its not Photoshopped :-); the reason I thought of this was that if we make these changes, it will atleast look like something on Vista rather than nothing on Vista. Infact most apps on Vista (except the totally non-native IE7) have this 'bar' concept.. whether its Calendar, Contacts, Explorer, Windows Live Gallery etc... and I guess they look good.

Regarding toolbars, I agree that with 3rd party toolbars, it could be a problem (if they place their toolbar below the bookmarks toolbar), but with native toolbars created via 'View -> Toolbars -> Customize' it shouldn't be an issue (since they are created above the bookmarks toolbar). But then the issue of third party toolbars could very well exist with Proto theme too. So its basically upto the extension/theme developers to ensure that the look is maintained, or at the minimum, not spoiled.

Anyways, this was just an idea... have been using this setup for a few weeks now and I thought it fit quite well ...

Comment 82

[Johnathan Nightingale [:johnath]]

Checking in browser/themes/winstripe/browser/browser-aero.css;
/cvsroot/mozilla/browser/themes/winstripe/browser/browser-aero.css,v  <--  browser-aero.css
new revision: 1.3; previous revision: 1.2
done

Comment 83

[Victor Bielawski]

But what's wrong with attachment 306472 [details] ?
The current "solution" is not native (ALL of the bundled apps in Vista that have more than one toolbar have separators between toolbars) and adds even more of the sickly purple than before.
If attachment 306472 [details] is not being used because using browsertabbar-toolbox in some unofficial themes makes the toolbar text unreadable, just use that newfangled "am I using the default theme?" thing to hide it from non-Aero themes and that problem does not exist anymore.

Comment 84

[Victor Bielawski]

(In reply to comment #83)
> But what's wrong with attachment 306472 [details] ?
> The current "solution" is not native (ALL of the bundled apps in Vista that
> have more than one toolbar have separators between toolbars) and adds even more
> of the sickly purple than before.
> If attachment 306472 [details] is not being used because using browsertabbar-toolbox in
> some unofficial themes makes the toolbar text unreadable, just use that
> newfangled "am I using the default theme?" thing to hide it from non-Aero
> themes and that problem does not exist anymore.

(I forgot to mention that the tabbrowser-tabs background would not be changed from the current one)

Comment 85

[Johnathan Nightingale [:johnath]]

(In reply to comment #83)
> But what's wrong with attachment 306472 [details] ?
> The current "solution" is not native (ALL of the bundled apps in Vista that
> have more than one toolbar have separators between toolbars) and adds even more
> of the sickly purple than before.
> If attachment 306472 [details] is not being used because using browsertabbar-toolbox in
> some unofficial themes makes the toolbar text unreadable, just use that
> newfangled "am I using the default theme?" thing to hide it from non-Aero
> themes and that problem does not exist anymore.

Just so you know, I'm not ignoring you - I was just helping out beltzner by landing this checkin-needed bug.  If there is cause to re-open, or file new bugs, I'm sure he will reply.

Comment 86

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

Ronin: yeah, I knew those weren't 'shopped, but I actually don't think the merge works well. Can you file a spinoff ("Use communications-toolbox for personal bookmark toolbar on Vista" or something similar) and cc me? Let's see if we can figure out how to make that work in a future version.

(In reply to comment #83)
> But what's wrong with attachment 306472 [details] ?
> The current "solution" is not native (ALL of the bundled apps in Vista that
> have more than one toolbar have separators between toolbars) and adds even more
> of the sickly purple than before.

Nothing's wrong, other than it requiring us to create our own gradients and backgrounds. See comment 69 for details, but the XUL doesn't actually let us paint the background of the toolbars beneath the navbar the way we want to be able to using native theming classes. Not using those means we make our own gradient, and then that breaks third party OS themes and classic themes. We could employ -moz-system-metric(default-windows-theme) but as mentioned elsewhere, that's a last resort sort of thing.

The right fix is to make the XUL work for us. We'll do that in the next release.

Comment 87

[Kai Liu]

Attachment: You forgot something...

Uhh, you really should've exempted Classic from this change. :) See attached screenshot.

Comment 88

[Victor Bielawski]

(In reply to comment #86)
> Nothing's wrong, other than it requiring us to create our own gradients and
> backgrounds. See comment 69 for details, but the XUL doesn't actually let us
> paint the background of the toolbars beneath the navbar the way we want to be
> able to using native theming classes. Not using those means we make our own
> gradient, and then that breaks third party OS themes and classic themes. We
> could employ -moz-system-metric(default-windows-theme) but as mentioned
> elsewhere, that's a last resort sort of thing.
> 
> The right fix is to make the XUL work for us. We'll do that in the next
> release.

Attachment 311109 [details] and attachment 307778 [details] require XUL changes or custom images. Attachment 306472 [details] only requires -moz-system-metric and uses the native theme.

Comment 89

[Kai Liu]

Comment on attachment 316510 [details]
You forgot something...

Filed bug 430371 for the Vista Classic issue