New Default Theme for Firefox 2
Mike Beltzner
to Fx2 Chrome" which is about proposed changes to the main browser
window structure (buttons, layout, functions) that is exposed to users
by default in Firefox 2.
In addition to this discussion, I would like to start some discussion
and work on examining changes to the default theme (icons, CSS, visual
presentation) that will be presented in Firefox 2.
There's a detailed description of the requirements on the wiki at:
http://wiki.mozilla.org/FX2_Visual_Update
In a nutshell, though:
Must-haves:
* update global icons to fit with modern iconography styles
* update Windows theme to fit with XP/Vista look & feel
* update OS X theme to fit with OS X 10.4 (Tiger) look & feel
* update Linux theme to fit with Gnome look & feel
Functional requirements:
* no visual elements that are purely decorative
* refreshed icons that are contemporary with today's applications
* icons which carry meanining across all locales
* native look and feel on Windows, OS X and Linux
For the purposes of getting things started, I would suggest that we use
the existing default chrome structure for mockups, and as decisions are
made in the thread about changes to the chrome, we can roll those into
our discussions here.
Some examples exist to get the discussion started.
- Steven Garrity put together a mockup of how an OS X theme should take
on a "unified" look in order to fit better with their native applications:
http://people.mozilla.com/~beltzner/osx-unified-firefox.png
- Jeff Yaksick took a pass at simplifying the iconography and colours used:
http://people.mozilla.com/~beltzner/firefox2-tabs.jpg
I'll reply to my own post (in dev.themes only, this initial cross-post
is just to bring the dev.apps.firefox people into the loop!) with my own
opinions, but let's get the ball rolling!
cheers,
mike
ps: one note -- this mailing list doesn't support binaries, so you'll
have to host mockups and images online somewhere. I'd suspect that these
images will get a lot of hits, so you'll want to make sure it's
someplace that can handle the bandwidth.
--
mike beltzner, user experience lead, mozilla corporation
Mike Beltzner
> - Steven Garrity put together a mockup of how an OS X theme should take
> on a "unified" look in order to fit better with their native applications:
> http://people.mozilla.com/~beltzner/osx-unified-firefox.png
I like this direction for OS X. It felt very natural and IMO was a great
example of matching platform look and feel while still preserving our
icons (which I would expect to be refreshed in a second pass).
> - Jeff Yaksick took a pass at simplifying the iconography and colours used:
>
> http://people.mozilla.com/~beltzner/firefox2-tabs.jpg
Jeff's ideas are very appealing, usability wise, in that they make it
clear what parts of the UI are chrome vs. content. I'm a little less
fond of the absolute lack of colour in the icons, though, as I think the
colours help make the UI appear friendlier and, well, more fun.
My own personal wishlist for a theme would be ..:
- vector-graphic-y icons like those used by 37 Signals products
- use of friendly colours that compliment each other, but with a
palette that's limited and cohesive
- thinner margins, borders & separators
- slightly larger throbber (the current one is a little invisible)
Sadly, I've proven over and over again that I'm not a very good visual
designer, despite being a vociferous critic! :)
cheers,
mike
Neil
> * update OS X theme to fit with OS X 10.4 (Tiger) look & feel
Is this going to purely depend on the appearance code? OS X's support of
CSS look and feel is somewhat patchy, whereas (say) the Windows 2000
theme appearance is very close just using the look and feel. You can try
this out by putting @namespace xul
url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
xul|* { -moz-appearance: none !important; } in your userChrome.css, but
note that menus don't like this on trunk (this is something else I would
like to see fixed).
--
Warning: May contain traces of nuts.
Daniel Schierbeck
could be made "sharper", like in Thunderstripe[1]. Maybe a simplified
Web Feed icon?
Cheers,
Daniel Schierbeck
1.
<https://addons.mozilla.org/themes/moreinfo.php?application=thunderbird&id=633>
Samuel Sidler
> Functional requirements:
> * no visual elements that are purely decorative
Are there icons that are currently like that?
> * icons which carry meanining across all locales
Which icons in Fx 1.5 have that problem? I suppose you could argue against
"stop"... I don't really know what a stop sign looks like in Japan, India,
South Africa, etc.
> - Steven Garrity put together a mockup of how an OS X theme should take
> on a "unified" look in order to fit better with their native applications:
>
> http://people.mozilla.com/~beltzner/osx-unified-firefox.png
This seems "fine" overall, but definitely not desirable. With the way OS X
seems to be going, this could become outdated with Mac OS X 10.5 (targeted at
late 2006, early 2007). Are there plans to keep this up to date with the
developer's preview of 10.5 (probably being shown at WWDC this August)?
Depending on when Fx3 will be released, Fx2 could be out for a while after
10.5 is released.
In addition, this screenshot neglects to show the tab bar, which is, in my
opinion, the worst part of the theme. The tabs *need* to be updated to look a
bit more how Safari and Camino do them, especially since Safari is the most
popular browser on the platform. (But please, no metal.) ;)
I'd also mentioned that with the toolbar unified, the bookmark bar looks out
of place and should be updated somehow as well (something we did with Camino).
> - Jeff Yaksick took a pass at simplifying the iconography and colours used:
>
> http://people.mozilla.com/~beltzner/firefox2-tabs.jpg
>
This feels very Mail.app 2.0 like. In a word... "horrible". Not allowing the
back and forward button to be separate is one issue I see (Safari has this
issue as well). But overall, the lack of color and strong shapes is a big
minus in my book. I also don't like the tabs (see above).
From http://wiki.mozilla.org/FX2_Visual_Update/User_Interface_Design:
> The Go button becomes a stateful button that is either "Go" or "Stop"; if a
> page is not loading, or if a user is typing in a URL, the button is "Go". If
> a page is loading and a user is not typing in a URL, the button is "Stop".
I'm not sure I'm for this idea. This is similar to the "refresh" button
turning into the "stop" button depending on page status.
The issue I have with "go" turning into "stop" is when Fx (or the system)
become unrepsonsive, many users will repeatedly bang on "stop" to,
theoretically, stop whatever causing the issue. When the system come back,
many times clicks are recognized late, causing the page to "go" again. I have
the same issue with "refresh" turning into "stop" (I have other issues with
that as well).
Also, with the design from the wiki, what does that mean as far as
customization? Can the "Go/Stop" icon be removed? I, personally, don't like
seeing icons I don't use (read: "go"). If I customize, do I have to get rid of
both? Or will the customize sheet include three icons ("go", "stop",
"go/stop")? You run into the same thing combining back and forward (something
which the wiki doesn't do, but the above mockup does).
Finally, the movement of the search icon from the left to the right shouldn't
apply to the Mac platform as it's completely backwards from how the rest of
the system is. :)
Samuel Sidler
Jerry Baker
> * update Windows theme to fit with XP/Vista look & feel
Hopefully FF2 will not make the assumption that everyone on XP/Vista are
using Luna or whatever Vista has as their theme. It would be nice if the
chrome devs didn't stick Luna-looking menus and buttons all over FF2
unless Luna is actually being used.
Mike Beltzner
> Hopefully FF2 will not make the assumption that everyone on XP/Vista are
> using Luna or whatever Vista has as their theme. It would be nice if the
> chrome devs didn't stick Luna-looking menus and buttons all over FF2
> unless Luna is actually being used.
Please re-read the requirements document that I linked to in the initial
message at http://wiki.mozilla.org/FX2_Visual_Update
It clearly states that while it would be very nice to have a way of
adjusting all of the CSS of a theme to match the menu appearance of a
Windows theme, that piece of work is not trivial and would require
someone to figure out how to poke and prod at nsITheme and such in order
to get things working.
We'd be happy to take that code, if someone steps up to deliver it, but
so far nobody is assigned to it.
(also: fwiw, this isn't going to get any better as Windows moves to Aero
with Windows Vista)
cheers,
mike
Alexander Brausewetter
> * update Linux theme to fit with Gnome look & feel
Gnome/GTK allows users to choose and change their set of icons across all
GTK based applications. This is managed by GtkIconTheme[1].
The icon provided by Gnome's default theme, the upcoming Tango icon set
and most other (complete) icon sets would cover FF's interface pretty
well[2].
Is it considered to make Firefox using GtkIconTheme?
Regards,
Alexander
[1] http://developer.gnome.org/doc/API/2.0/gtk/GtkIconTheme.html
[2] http://tango-project.org/Tango_Icon_Gallery
Aronnax
I have a few questions for the OS X Theme.
The unified-look is a feature of Cocoa applications. FF is now only
Carbon and as far as i know some Cocoa rewrites would only happens in FF
3.0
Any discussion about a unified-look in FF 2.0 sounds like a waste of
time - or?
Should have the mac theme and the other OS themes got comparable icons
(like now)?
If the button should have a comparable style, then any discussion about
buttons like the Finder, Mail.app or something like Safari is likewise a
waste of time - ditto buttons without color and so on
apart from that
i have created some Mac FF Themes - I think about to contribute
something to this part - if it is desired
http://www.takebacktheweb.org/
but it is not ease to make a suggestion without a known framework,
restrictions or capabilities.
Regards
James Ross
> Jerry Baker wrote:
>> Hopefully FF2 will not make the assumption that everyone on XP/Vista
>> are using Luna or whatever Vista has as their theme. It would be nice
>> if the chrome devs didn't stick Luna-looking menus and buttons all
>> over FF2 unless Luna is actually being used.
>
> Please re-read the requirements document that I linked to in the initial
> message at http://wiki.mozilla.org/FX2_Visual_Update
>
> It clearly states that while it would be very nice to have a way of
> adjusting all of the CSS of a theme to match the menu appearance of a
> Windows theme, that piece of work is not trivial and would require
> someone to figure out how to poke and prod at nsITheme and such in order
> to get things working.
>
> We'd be happy to take that code, if someone steps up to deliver it, but
> so far nobody is assigned to it.
It's a wonder I do any work when that's the result. See
https://bugzilla.mozilla.org/show_bug.cgi?id=243078 and
https://bugzilla.mozilla.org/show_bug.cgi?id=313388
The problem is currently yours, anyway, as I can't finish stage 1
without consent on bug https://bugzilla.mozilla.org/show_bug.cgi?id=313674
--
James Ross <sil...@warwickcompsoc.co.uk>
ChatZilla Developer
Mike Beltzner
>> We'd be happy to take that code, if someone steps up to deliver it,
>> but so far nobody is assigned to it.
>
> It's a wonder I do any work when that's the result. See
> https://bugzilla.mozilla.org/show_bug.cgi?id=243078 and
> https://bugzilla.mozilla.org/show_bug.cgi?id=313388
Well, I for one am glad that you do the work :) Turns out that there's a
limited number of bodies, so sometimes we put our faith in the community
to help us out. Glad that you're aboard.
> The problem is currently yours, anyway, as I can't finish stage 1
> without consent on bug https://bugzilla.mozilla.org/show_bug.cgi?id=313674
I'm having trouble reading the context there; are you saying that in
order to get your OS-theme-sensitive stuff working, you need approval to
get the toolbar buttons extending to the left-most edge of the screen?
Or that you want that bug WONTFIX'd? Not sure how that's blocking your
work, but I'd love to help.
James Ross
> James Ross wrote:
>> The problem is currently yours, anyway, as I can't finish stage 1
>> without consent on bug
>> https://bugzilla.mozilla.org/show_bug.cgi?id=313674
>
> I'm having trouble reading the context there; are you saying that in
> order to get your OS-theme-sensitive stuff working, you need approval to
> get the toolbar buttons extending to the left-most edge of the screen?
> Or that you want that bug WONTFIX'd? Not sure how that's blocking your
> work, but I'd love to help.
The problem is that there are two conflicting desires; the original bug
wanted direct visual compatibility with Windows, and since IE and its
Rebars are by far the best match component-wise, the correct look to
match the Windows OS is borders on all sides.
There is now also a bug on file that the buttons are not against the
edge (which was filed after some of my original work was landed on trunk).
Per my plan on my weblog (http://twpol.dyndns.org/weblog/2005/11/01/01)
I need to finalise the CSS-only style before I move on to the native
code - this is critically important for platforms that use the 'win'
theme but are not Windows, e.g. OS/2.
Thus, before I can move on, I need an absolute and final decision over
the issue [1] - do I go for full visual compatibility at the loss of a
bit of user performance, or do a sacrifice a chunk of the visual
compatibility for the sake of a little user performance gain?
(As you might have noticed, I'm for the visual look, which is probably
at least partly due to never having my browser window maximised and thus
not caring about the buttons being against any edge.)
That about sums it up.
--
James Ross <sil...@warwickcompsoc.co.uk>
ChatZilla Developer
[1] For now; the decision can be changed later, and inevitably will do,
but I can not make the current decision myself.
Brett Wilson
I don't understand, the whole point of this is that you want the left
and right borders of the toolbar to match IE's rebar? I don't see why it
matters. If you wait for any decision like this from above, it's going
to take forever and people will forget (like what has happened). I'd
personally suggest you just start working on it and forget about getting
the side borders to match.
Brett
Daniel Cater
> [1] For now; the decision can be changed later, and inevitably will do, but I
can not make the current decision myself.
If the decision can be changed later, why can't you choose one of the options
now, work on it, then change later if necessary?
I personally would like to see Firefox look as native as possible on each
platform, and as such I think you should go with I.E. (and other Microsoft
Windows applications) parity, sacrificing a small amount of usability.
Dan.
James Ross
I have it working here, with side borders. The point is that if the edge
requirement is made, it does affect the way the style is done more than
it might appear, especially when it comes to all the native code.
I *am* tempted to just carry on anyway, but if I do I will continue
*with* the complete border effect, and will not be happy about changing
it later, which is why I don't want to carry on without some backing
over the direction taken.
The main reason for waiting is that I have had WAY more yanking about
than I am happy with over this work (just read the comments from shortly
before the 1.5 release), and if I get yanked around again I will just
bugger off and do something *rewarding*. I know lots of people who don't
want that, myself included, but I only have a limited patience.
James Ross
Because it is not a fun thing to change once all the many layers of work
have been completed, and I simply will not do it if it comes to that
(see other post).
Steffen Wilberg
> I have it working here, with side borders.
Personally I'd prefer the borders so the leftmost button isn't squeezed
to the left window edge. Aside from that, I never use that button anyway
since I've got a mouse with thumb buttons for back/forward.
Steffen
Aronnax
Hi,
thanks for the answer ;-)
another question:
Places should be open in a new popup window - (this is horrible)
http://wiki.mozilla.org/Places:User_Interface#Places_Popup
is there any change, that the mac version can have a different solution
(like Camino or Safari in the same window)
or is this only a misunderstand or a bug in the current nightlies
Regards
Mike Connor
don't think taking a usability loss from current behaviour is acceptable
for a trivial visual tweak. If we weren't dealing with an established
behaviour that a significant number of users are relying on, the
equation might be different, but that isn't the case.
-- Mike
Ben Goodger
> Functional requirements:
> * no visual elements that are purely decorative
> * refreshed icons that are contemporary with today's applications
> * icons which carry meanining across all locales
> * native look and feel on Windows, OS X and Linux
More specifics:
- the silhouette of the icon should show a distinguishable shape. Note
the difference in shape between the back and forward buttons in Firefox
vs. IE.
WRT system integration:
- use color palettes and detail levels that make the icons fit at home
on each platform.
- ensure as much as possible that new visual features are built from
components that can be represented by system theme rendering, to ensure
usability when the user has changed their system settings (colors,
fonts, etc)
-Ben
James Ross
> Given that the majority of users seem to run with maximized windows, I
> don't think taking a usability loss from current behaviour is acceptable
> for a trivial visual tweak. If we weren't dealing with an established
> behaviour that a significant number of users are relying on, the
> equation might be different, but that isn't the case.
>
> -- Mike
Ok, no borders it is.
Steffen - I'll post some more stuff once I've finished the base CSS
work, probably in a couple of days if all goes well with removing the
borders.
Aronnax
Ok - i have nothing else expected, but is difficult to reach the other
"Must-haves" for Mac OS X with this decision
* update global icons to fit with modern iconography styles and native
look and feel on OS X (almost every commensurably Apple program use
buttons without distinguishable shape
and the unified toolbar is out of reach - or?
--------------
a proposal to start a more realistic discussion about the Mac theme :
i have created a theme for the Bon Echo builds - GrApple (Proposal) -
it includes the unmodified FF Mac default icons but a different all over
theme style
looks like this:
http://www.takebacktheweb.org/themes/stuff/proposal.png
if someone wants to try:
GrApple (Proposal) 0.0.1
http://www.takebacktheweb.org/themes/stuff/GrApplePr_0.1.jar
should fix in particular these problems with the up to date Mac default
theme:
- the Aqua style is to light and does not differs enough from web site
content. It is in particular the strongest advantage of Safari and
Camino (with the unified toolbar). They look even "stronger", more
substantial and so on.
- the bookmark Toolbar with the gradient does not work well with
additional extension-toolbars (chopped up the look) and the gradient
looks not "native"
--------------
without the distinguishable shape restriction - i would naturally
suggest my Grapple (Eos) theme or something with a comparably button
look - http://www.takebacktheweb.org/
Regards
Ben Goodger
> The problem is that there are two conflicting desires; the original bug
> wanted direct visual compatibility with Windows, and since IE and its
> Rebars are by far the best match component-wise, the correct look to
> match the Windows OS is borders on all sides.
Some notes:
XP/Luna doesn't have rebar borders so it's a non-issue
XP/Classic does, but here's my editorial.
Back when I built the classic theme for Seamonkey/Netscape 6/7, I was in
a frame of mind that the groove around the edge of the rebar box was
aesthetically pleasing. Over time, I've grown to dislike the visual
clutter this adds and prefer the cleaner look of having only grooves
between the toolbars (and certainly not between the top of the menu bar
and the bottom of the title bar!)
i.e.
+----------------------------------------------------+
|@ Mozilla Firefox _#X|
|----------------------------------------------------|
| File Edit View History Bookmarks Tools Help |
|----------------------------------------------------|
| < > @ X [ ][ ]|
|----------------------------------------------------|
| |
(nice, streamlined... see Netscape 4)
vs.
+----------------------------------------------------+
|@ Mozilla Firefox _#X|
|+==================================================+|
||File Edit View History Bookmarks Tools Help ||
||--------------------------------------------------||
||< > @ X [ ][ ]||
|+==================================================+|
| |
(now seems to me to be more visually cluttered).
In my opinion (and this is how I've always developed themes in Firefox)
is that the system-looking default should feel at home on the system but
needn't be a carbon copy of IE or any other existing piece of windows UI
exactly, as long as it doesn't look out of place.
-Ben