Closed Bug 544820 Opened 14 years ago Closed 10 years ago

[Windows] UI Refresh

Categories

(Firefox :: General, enhancement)

Product:
Firefox
Component:
General
Platform:
x86
Windows 7
Type:
enhancement
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED WORKSFORME

People

(Reporter: shorlander, Unassigned)

References

(
URL
)

Details

(Keywords: meta)

Attachments

(3 files)

[Mockup] New Windows Theme (Windows 7)
435.41 KB, image/png
Details
CSS mod for Light/Dark backgrounds with Tabs on Top
977.58 KB, image/png
Details
CSS mod for Light/Dark backgrounds with Tabs at Bottom
711.93 KB, image/png
Details 
For the Windows theme revamp many elements will need to move, merge and/or hide in the default configuration:

* The Menu Bar will be hidden by default
* Tabs above the navigation bar will be default (Bug #544815)
* The Home button will not be needed on the toolbar because of the addition of the Home Tab (Bug #544819)
* The Bookmarks Bar will be hidden by default for new profiles and profiles that have never modified the default contents (Bug #544817)
* A Bookmarks Widget that replicates the Bookmarks Menu will be placed to the right of the Search Bar (Bug #544817)
* The Refresh and Stop buttons will merge with the Go button attached to the Location Bar (Bug #544816)
* The Bookmarks Star will move to the left of the Location Bar
* Site Identity will move to an element inside the Location Bar (Details are still in progress)
* Introduce an App Button in the titlebar and an App Menu containing the streamlined contents of the Menu Bar (Still in progress)

In addition there will be all new visuals. Many mockups covering various system themes and configurations can be found on the Wiki: https://wiki.mozilla.org/Firefox/4.0_Windows_Theme_Mockups
				
Notable design considerations:
				
-- Windows Themes --
I have tried to design around the variable nature of the environment by making the items fit into many different styles. Even so there will likely be theme and version specific graphics required for optimal appearance. Not sure how this will work out exactly since a lot of the details will be in the implementation.

On Windows Vista/7 this will likely be less of a problem since it should accommodate glass variables and when Aero Glass isn't enabled. This is much more of a problem on XP.

-- Specific Design Concerns --
* On Windows Vista/7 the UI elements and the viewport are overlaying the glass visually with a drop shadow vs. the default etched look

* With tabs underneath the Navigation Bar and the Bookmarks Bar enabled there is a backdrop so that the bookmarks text is readable (This doesn't apply to non-Glass variations)

See attachment for mockup.
Blocks: 544823
Component: Theme → General
QA Contact: theme → general
Summary: [Windows] Theme Visual Refresh → [Windows] UI Refresh
Target Milestone: Future → ---
Depends on: 544999
Depends on: 458407
Depends on: 450767
Yes, we've spoken extensively with the author of Strata40, who based his designs on Stephen's mockups.
And that's the theme I'll be using until this work gets landed :)
It's beautiful, but two things bother me a bit. One is the help icon which you can see on some of the mock-ups (https://wiki.mozilla.org/images/9/90/Firefox-4-Mockup-i05-%28Win7%29-%28Aero%29-%28TabsTop%29-%28BookmarksBar%29.png). I assume it would open the help the Firefox help, filling a function the Help menu had before. While that is OK, I don't actually think people use the help that much, that it would require a forever available help-button. Perhaps we could make it not appear by default (we could put in a bookmark leading to help instead) and put it as an option in the new "toolbar-button selection". Also, I am trying to come to a conclusion, if I like the look of the icon itself, or not. It's the classic Vista+ help icon, I know that, which the user is likely familiar with, but I am not sure if it fits completely with the theme. Can't we design something native instead?

The other one is the "see all open tabs in a list" button. Has that been dropped by default or is it just missing in the mock-ups? I can actually agree on that it should be dropped by default, I don't think it's used by the average person much, but it should still be available in the toolbar-button selection view, right?
(In reply to comment #4)
>It's the classic Vista+ help icon, I know that, which the user is likely
> familiar with, but I am not sure if it fits completely with the theme. Can't we
> design something native instead?
You want something native or not ?
(In reply to comment #5)
> (In reply to comment #4)
> >It's the classic Vista+ help icon, I know that, which the user is likely
> > familiar with, but I am not sure if it fits completely with the theme. Can't we
> > design something native instead?
> You want something native or not ?

Sorry, I got myself lost in the words there. Something designed by Mozilla/us, I mean. Also, remember that the Windows help-icon might not fit in with other themes, so replacing it should be possible.
The bookmarks toolbar is likely going to move towards just being a place for the user's bookmarks (as opposed to help, getting started, BBC news, etc).  I need to file bugs on this for the places team, and speak with the marketing team on Friday, but at least the initial thoughts are:

-[for new profiles only] Remove the latest headlines live bookmark.  This Impacts start up time, isn't broadly used enough for inclusion in the main window, and is oddly mainstream/broadcast centric for a long tail device like a Web browser

-[for all profiles] Remove getting started from the bookmarks toolbar.  This is very rarely used, and also very rarely deleted.  It clutters the user's main window during the full course of the browser's life time even though it was placed there for first run, and is in many ways hiding in plain sight, just adding to visual complexity.

-Add entries in the Firefox application menu (or help menu in the traditional layout) to address two cases:
   * I have a problem with Firefox
   * No problem, just new to Firefox and want to know how to use it, or new to this version (this is the same page as the start pages we show the user after a fresh install or major update, currently people close this tab and then try to figure out how to get back, so we don't effectively support undo).
Depends on: 546098
Depends on: 546259
No longer depends on: 450767, 458407
No longer depends on: 547371
What a bland and boring concept.

I didn't realise we were returning to monochrome browsing.
(In reply to comment #8)
> What a bland and boring concept.
> 
> I didn't realise we were returning to monochrome browsing.

Personally I think it looks more colorful (and much more beautiful) than the current theme. I think that the design itself is done now, most people like this. If you still have an objection, or a suggestion to improve, you could post in the newsgroup.
colourful!?, I'm sorry did you not notice the black icons, devoid of any colour?
Not to mention they look like complete eyesores when you use Icons and Text, completely out of place compared to the rest of the browser.

Buttons added by add-ons atleast have their own colours added.

You've actually got long time users threatening to drop firefox because of these UI changes, and the problem with that is they have no browser to return to because all the rest of them are taking on similarly AS UGLY designs.
(In reply to comment #10)
> colourful!?, I'm sorry did you not notice the black icons, devoid of any
> colour?

I think he noticed. New icons are much better in situtation when you use Personas. Please use newsgroups or forum for such discussion.

> Not to mention they look like complete eyesores when you use Icons and Text,
> completely out of place compared to the rest of the browser.

I agree. In this mode buttons don't look good. I filled bug 547440 about it.
>What a bland and boring concept.

Danial: For context, which version of windows do you feel this is too bland on?
I'm on Win7 and the new icons look good to me. I like them and they match my Aero Glass colors and my active Persona. :)
Windows 7.

Persona's don't interest me one bit so the buttons look very out of place by default.
Windows 7 doesn't really encourage the use of toolbar icons, let alone colorful ones.  I think we are on target here with meshing with the surrounding visual design of the OS.  Obviously this won't make every user happy, but that's why we give user's total control with themes and personas.
(In reply to comment #15)
> Windows 7 doesn't really encourage the use of toolbar icons

What? So what! Toolbar icons make applications MUCH easier to use.

> let alone colorful ones.  

Again: What? So what! Colors are even more important than shape to quickly identify an icon.

> Obviously this won't make every user happy,

Please stop using the straw-man argument "every". NOBODY expects "every" user to agree / be happy. I am so tired of hearing that idiotic argument (Obama uses it in almost every speech - 'nuff said). 

> but that's why we give user's total control with themes and personas.

The important issue is making the best DEFAULT selection (so you can drop the "Personas" cop-out).

I use Windows 7 and am baffled by your claim of "discouraged toolbar icons, let alone colorful ones" and "we are on target here with meshing with the surrounding visual design of the OS". Windows 7 is colorful and "happy" (e.g., the Windows Explorer toolbar buttons for Forward/Back are BLUE!!!), while Firefox 3.7a2pre is monochrome and bland.

I suspect that, once again, there are Mac developer-fanboys trying to force through their sense of aesthetics on the Windows users.
(In reply to comment #16)
Please follow the Bugzilla etiquette guidelines before posting further comments: https://bugzilla.mozilla.org/page.cgi?id=etiquette.html
(In reply to comment #15)
> Windows 7 doesn't really encourage the use of toolbar icons, let alone colorful
> ones.  I think we are on target here with meshing with the surrounding visual
> design of the OS.  Obviously this won't make every user happy, but that's why
> we give user's total control with themes and personas.

I don't understand this comment.  Clearly the IE8 back and forward buttons exhibit far more color than the new Firefox ones.
I think he's talking about the Windows Explorer style. It uses more text buttons on the toolbar than colorful icons.

But then, there is the ribbon which is replacing every Microsoft UI, and those have plenty of color icons.
Depends on: 549061
Depends on: 549589
Apologies if this should be posted on bug 549589 but my experience of adding follow up to RESOLVED - FIXED bugs is not positive.

The recent updates seem to add a 'default' grey background to the location bar favicon (where it and the url or owner are blue/green with ssl/ev) which looks IMO odd, doesn't match the search bar and I can't see on the mockups (which are all showing AMO - an ev page)

Can anyone shed any light on this - is it intentional (eurggh) / an unintended consequence of something else.

(I've seen discussion, which I don't support, elsewhere that the favicon may disappear from the location bar which would make this moot but until then...)
>(I've seen discussion, which I don't support, elsewhere that the favicon may
>disappear from the location bar which would make this moot but until then...)

we are trying to reduce the amount of redundancy in the application so we will likely remove the favicon from the location bar.  The star will be left aligned, and will continue to support legacy drag operations (perhaps picking up the favicon on the cursor as soon as it is pulled out).
I think the favicon should stay at the location bar. Personally I prefer it that way and why will moving it somewhere reduce redundancy in Firefox?
Firefox currently provides two page titles, two favicons, (and two domains for SSL).
(In reply to comment #22)
> I think the favicon should stay at the location bar. Personally I prefer it
> that way and why will moving it somewhere reduce redundancy in Firefox?

I think that is because it's already present in the tab bar. Same with the window/page title. But personally, I would really like them to stay. Removing them isn't going to do much difference, and for the title especially, there is left-over room in the top-bar.
(In reply to comment #23)
> Firefox currently provides two page titles, two favicons, (and two domains for
> SSL).

Will we at least have the option to drag them there, from the new customization panel, even if they are removed by default?
(In reply to comment #22)
> I think the favicon should stay at the location bar. Personally I prefer it
> that way and why will moving it somewhere reduce redundancy in Firefox?
>
> Firefox currently provides two page titles, two favicons, (and two domains for
> SSL).

I prefer it also NOW - BUT when the new UI is there , and the tabs above the locationbar, it think I can love it better if it is going away.

Tabs are always visible (surely then?)
Tabs are now already drag-able? (then also?)
Then there is ONE place to look at if you want the title/ icon
So there is ALWAYS a way to drag and drop/ so no reason to panic now


If that star is moving to the right side of the security button, I think nobody will complain about something that is difficult to find.
Perhaps we shouldn't show the favicon on the active tab, and keep it in the location bar? This would also reduce redundancy, and keep a dragable favicon. However, since you can drag the tabs instead, this might also be redundant, but we could keep this as an option.
Depends on: 554662
The favicon plays a very important roll in tab selection because colors and images can be processed in a single broad glance, while text requires a linear search as you move your gaze around.
(In reply to comment #28)
> The favicon plays a very important roll in tab selection because colors and
> images can be processed in a single broad glance, while text requires a linear
> search as you move your gaze around.

Sure, but is that applicable for the already selected tab? It should already be focused in such a way that it's easily found with a broad glance, and obviously if already selected shouldn't interfere with tab selection anyway.
In the firefox menu, it shows us the mostly used features of Firefox. Why don't we use the Firefox Logo instead of writing out Firefox for that menu?
The text 'Firefox' looks neat and clean IMO (personally I also feel it makes a statement :). Opera has kind of picked off on Firefox mockups and have placed their logo there... and I really think it looks ugly.
The Firefox logo is really complex and hard to render at 16x16, especially when placed on a saturated and easy to find button.  Here are some of stephen's explorations:

http://www.stephenhorlander.com/images/blog-posts/windows-theme-i03-app-button/Fx-4.0-Mockup-Win7-i03-AppButton-Variations.png

we thought about maybe trying a silhouette icon for awhile, but my personal opinion is that the word Firefox ends up being more descriptive, easier to hit (wider), cleaner, and more elegant.

Also one of the things we are striving for in this redesign is zero redundancy, and you could make an argument that the left most window icon is redundant with the large icon in the taskbar.  (which is perhaps also why Windows explore has dropped its title bar icon as well).
Please don't kill the system menu. On every windows app you can click the icon on the top left to change for example the window state, or doubleclick it to close the window. Even in explorer where it is invisible though.

Putting the Firefox button on this location is IMHO a bad idea.
Jonathan, that's actually a good suggestion, we should add that functionality to the App Button. It's funny when you think about it however, as Office 2007 doesn't work that way.
(In reply to comment #34)
> It's funny when you think about it however, as Office 2007
> doesn't work that way.
Yes, but Office 2010 does.
(In reply to comment #34)
> we should add that functionality to the App Button.

Are you sure you want to "add" that to the App Button? Wouldn't it be better to move the app button slightly to the right and leave a blank-yet-clickable area in the left corner of the title bar (which in current nightlies unfortunately doesn't contain the full-length title).
(In reply to comment #36)
> Are you sure you want to "add" that to the App Button? Wouldn't it be better to
> move the app button slightly to the right and leave a blank-yet-clickable area
> in the left corner of the title bar

Paint, Wordpad etc. use a similar approach (putting additional buttons right of the system menu) so I think this is a good idea.
We're hoping that a right click menu on the Firefox button will be enough external consistency with Windows 3.1 as to not annoy users, but either way if one turns off the Firefox button and switches to a traditional menu bar the System Menu from the application icon returns to the classic behavior.
(In reply to comment #38)
> external consistency with Windows 3.1 

That is a bit dishonest and distorting. The vastly popular and much more current Windows XP also has the System Menu (with icon) in the title bar (BTW: *title* bar).

Keeping the Firefox icon there would also help maintain brand-recognition (although it could be considered redundant with the "Firefox" text button).

My suggested/requested/preferred *default* layout:

+--------------------------------------------------------------+
| (@) [ Firefox ] Full Length Page Title Here       [_][D][ X ]|
| (<)(>) [B] [ * www.TabsOnTopBleh.com        ] [ Search Bing ]|
| [Bookmark-1] [Bookmark-2] [Bookmark-3]                       |
| / H \/ Tab-1 \/ Tab-2 \/+\___________________________________|
|                                                              |
| Content here                                                 |
~                                                              ~
|                                                              |
+--------------------------------------------------------------+

(@) = Firefox logo System Menu "button"
[B] = Bookmarks button (opens BM sidebar)
/H\ = Home Tab

Yes, that layout "only" saves the space from the Menu Bar, but it creates a more, instead of less, usable UI (as the current unfortunate direction with tabs-on-top and no title in the title bar is).
Firefox should have a option that allow us to set tabs on top or tabs at the bottom.
(In reply to comment #40)
> Firefox should have a option that allow us to set tabs on top or tabs at the
> bottom.

Of course, that has been the plan all the time. Check the mockups at https://wiki.mozilla.org/Firefox/4.0_Windows_Theme_Mockups :-)
Just because *mock-ups* exist, doesn't mean it's planned (let alone be in the final product). And you don't have an @mozilla.com in your e-mail address, so your assertion is not very assuring.

And even if the *option* is there, the question of which will be the *default* is of great importance. I dread the thought of having to reconfigure all my PCs and all my users to the more sensible tabs-below-UI.
See bug 544815 for that particular feature. It's even a dependency, so I'm not sure how you could miss it.
(In reply to comment #42)
> And even if the *option* is there, the question of which will be the *default*
> is of great importance. I dread the thought of having to reconfigure all my PCs
> and all my users to the more sensible tabs-below-UI.

You don't have '@god.com' in your email address, so your assertion of calling the tabs-below option the more sensible is not so assuring either. I'm all for tabs-on-top being the default as it makes a more logical toolbar hierarchy, and it took no time for me to get used to it.
(In reply to comment #44)
> tabs-on-top  [...] makes a more logical toolbar hierarchy

Not always: See bug 544815 comment #31 (there are more inconsistencies with tabs-on-top, but I can't find that comment ATM) 

("reason" doesn't need @god.com ;-) )
Depends on: 555461
(In reply to comment #46)
> *** Bug 555461 has been marked as a duplicate of this bug. ***

I filed that bug coz I thought that this one was a meta-bug for the theme change since I saw a similar bug for 'New Style of Tabs' (Bug 549061). Isn't that the case?
Some minor CSS mods on the current nightly builds. This one:
- Places the tabs on top
- Modifies the theme so it works on light and dark backgrounds equally well

You can try out the mod at http://userstyles.org/styles/26738
Similar mod as the previous comment - this time for Tabs at Bottom.

Code/UserStyle here: http://userstyles.org/styles/26853
Which bug is responsible for the system menu?
None at the moment I guess. Maybe there will be one once we will enter Phase 2 :
https://wiki.mozilla.org/Firefox/Projects/New_Theme
I see... would you*(referring to all Firefox developer working on the new theme) use Opera 10.5 system menu as a example for our system menu? 
Their System menu look fine, I suggest that we use that as an example. 

I just found out that Alex Faaborg posted something about the system menu on his blog http://blog.mozilla.com/faaborg/2010/03/23/visualizing-usage-of-the-firefox-menu-bar/  Interesting stuff.

I am a bit confused however. I understand that this theme is intended for the next version of Firefox. Will you* create a another new theme after this theme is done for the next next version of Firefox?
(In reply to comment #52)
> I am a bit confused however. I understand that this theme is intended for the
> next version of Firefox. Will you* create a another new theme after this theme
> is done for the next next version of Firefox?

Your question could be interpreted in two ways:

1. The Firefox theme is always evolving, the theme will continue to change as long as Firefox is under active development.

2. If your question is about if all the changes suggested for this theme will make it in for the next major Firefox release, the answer is probably no. There's plenty of fantastic ideas, but not enough time to turn them into "reality". But, yes, some/most of them might not make it into this revision of the new theme, but appear in the next one.
Depends on: 556276
No longer depends on: 556276
>Which bug is responsible for the system menu?

The meta bug for that project is bug 556174

>would you*(referring to all Firefox developer working on the new
>theme) use Opera 10.5 system menu as a example for our system menu?

We are basing our work on a quantitative analysis of usage, planning for touch interfaces (use of split menus), and promoting new features that we feel are important (like increasing the options that users have to share links).

>If your question is about if all the changes suggested for this theme will
>make it in for the next major Firefox release, the answer is probably no.

We don't have any official plans for what will be blocking the next release, but my general sense is that everyone agrees that getting this Windows theme work done is critically important.
Forgot to include my standard reminder that higher level discussions of the changes should occur (or in this case continue to occur) in dev.apps.firefox or dev.usability, so that everyone can participate and since bugzilla is primarily a tool for coordinating development work.
Depends on: 560516
Depends on: 560519
Depends on: 568037
Depends on: 569830
Depends on: 569850
Depends on: 570165
Depends on: 569255
Depends on: 569329
Depends on: 571660
Depends on: 571970
No longer depends on: 569850
Depends on: 571992
Depends on: 575580
Depends on: 575942
No longer depends on: 575942
Blocks: 577160
Depends on: 571787
Depends on: 577465
Depends on: 580194
Depends on: 581759
No longer depends on: 581759
Depends on: 582020
Depends on: 571662
Depends on: 576439
No longer depends on: 582020
Depends on: 571454
Depends on: 588764
Depends on: 588974
No longer depends on: 569329
Depends on: 589259
Depends on: 576371
Depends on: 591004
Depends on: 593950
Depends on: 594503
Depends on: 595421
No longer depends on: 595421
Depends on: 595908
Depends on: 592669
Depends on: 592677
Depends on: 596963
No longer depends on: 596963
Depends on: 589266
Depends on: 597353
No longer blocks: 597414
Depends on: 590945
Depends on: 575516
Depends on: 606735
No longer depends on: 600099
Depends on: 603790
Depends on: 603798
Depends on: 604941
Keywords: icon → meta
Depends on: 612854
Depends on: 612812
No longer depends on: 603798
No longer depends on: 614817
Depends on: 621408
Depends on: 624113
Depends on: 626235
Depends on: 629629
Depends on: 638526
No longer depends on: 638526
Depends on: 638526
Depends on: 673694
Depends on: 632207
Depends on: 689051
No longer depends on: 689051
No longer depends on: 544819
No longer depends on: 673694
Subsumed by bug 870032 and co.
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: