Firefox 3 Themes

If you are reading this post odds are you are one of the 1.2 million people currently enjoying a beta or nightly build of Firefox 3. However are you a big enough Firefox fan that you like to run it simultaneously on 4 different platforms? If not, here are some screen shots of the new themes for Firefox 3 for Vista, Linux, OS X and XP.

(Note to press and bloggers: even our screenshots are open source, source files for all of the images used in this post are available here).

Main Window

Mainwindowcomposite

The overall goal of the Firefox 3 visual refresh was visually integrating with the platform, while still maintaining a unique identity and presence by using the keyhole form for the navigation controls.

Keyholes

The one exception to this cross platform visual identity was Linux, where we decided against using the keyhole form in favor of uplifting the native OS theme’s navigation controls. On many Linux distributions we are often already the default browser, so there is less of a need for us to establish a visual presence, and it makes more sense to seamlessly integrate with the rest of the desktop environment.

Library

Librarycomposite

On OS X the Library window is reminiscent of the Finder, and on Vista the window has a similar visual style as other media collection applications, like Windows Media Player and Windows Photo Gallery.

Site Identity Contextual Dialog

Siteidentitycomposite

The customs official icon in the identity dialog demonstrates how each platform uses different types of textures ranging from glassy to smooth to soft.

Options / Preferences

Optionscomposite

Page Info

Pageinfocomposite

Add-ons Manager

Addonsmanagercomposite

The set of icons in the Options, Page Info and Add-ons Manager windows show how we use consistent physical metaphors across the four platforms so that it is easier for users to transition between operating systems without having to adapt to a new interface. However, there are a few exceptions where we favor consistency with the OS, like the icon for Applications and the Themes icon on Linux. Even though the physical metaphors are largely identical, each platform is given a specific color palette, level of detail, and overall design aesthetic for object icons.

Gears

Even the last icon the user views before closing Firefox has been carefully crafted to fit in with the rest of the operating system.

Savetabs

Why do We Believe Visual Integration is Important?

We decided to focus heavily on visual integration with the platform for the following reasons:

-Cross platform applications that use a consistent appearance across different operating systems (like RealPlayer, or applications developed using Java Swing) feel foreign and strange
-The Web browser is a central part of the user’s 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 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, or when you are reading an interesting book and you turn pages without conscious thought).
-We want Firefox to feel like the browser your computer should have shipped with

Did We Achieve Our Goal for this Visual Refresh?

Back in October I wrote:

Mozilla’s user experience team literally wants to do a better job of visually integrating with Windows than IE, and a better job of visually integrating with OS X than Safari. I don’t know if we will be able to pull that off, but that’s the goal.

Let’s start with Linux. Linux wasn’t mentioned in the original goal since on many distributions we don’t have a pre-installed native browser to compete against, but how did we do in terms of competing with ourselves? I think it is pretty clear that we decimated ourselves: Firefox 3 is way ahead of Firefox 2 when it comes to visual integration with the desktop environment on Linux. From using native gtk widgets in the content area to uplifting the OS theme icons, we have made an incredible amount of progress with this release. Hopefully KDE users will be able to have Oxygen style icons in Firefox using the same method for extracting gtk icons, although I am not sure if they have this working yet (if anyone has more information on this please comment below, I was able to find a bug filed against gtk-qt-engine-kde4). The new icons for Firefox were designed by the same team that creates the icons for GNOME, which certainly helps when you are going for a perfect level of visual integration with the GNOME desktop environment.

Similarly, on Windows our icons were created by the Iconfactory, the same design firm that designed the icons for Windows XP and Vista. In terms of overall visual integration, I believe on XP we clearly met this goal. Firefox 3 visually integrates with XP by using the platform’s color palette while tweaking the style enough to still appear modern on an aging OS. In stark contrast IE7 doesn’t even have an XP theme. On Vista we do a great job visually integrating with icons and with our set of secondary windows, although the main window is notably missing support for Aero glass. Users will hopefully be able to get this functionality using an extension during the life cycle of Firefox 3, and we will have glass support added to XUL for the next release of Firefox.

On OS X I believe we have made the most progress relative to Firefox 2. However, do we visually integrate with the platform better than Safari? Overall I think it is pretty close. While Firefox is not technically a native application, Safari 3.1 does a number of things wrong that we get right has a number of curious inconsistencies, from not muting the glyphs on their icons when the window is inactive, to using Aqua style controls in the window frame.

Safaricomparison

We should be really proud that this is the level of detail that we are now competing at on OS X, even if users aren’t necessarily going to consciously notice these minor details. And overall that’s the whole point of our efforts for visual integration. We don’t want the user to think about the theme too much, we want the browser to perceptually fade away so that the user can focus on what it is they are actually doing. In a sense it is a little ironic, the harder we work to make Firefox fade away the less likely it is that the user will notice the amount of effort that has gone into crafting the interface. However, the very best user interfaces go completely unnoticed, that is what makes them good.

Credits

Initial wireframes and design direction throughout the project were handled by myself and Mike Beltzner. Icons for Strata, the theme for XP and Vista were created by the Iconfactory. Firelight, the OS X theme, was created by Stephen Horlander and Kevin Gerich. Tango, the theme for Linux, was created by Lapo Calamandrei, Michael Monreal, Andreas Nilsson, Kalle Persson, Jakub Steiner, and Michael Ventnor.

109 comments

  1. I agree that the OS X look of Ff3 is a great improvement over Ff2. However, why has the left edge of the location bar to be rounded? Round text fields are search fields in OS X. The location bar should look more like the Vista version.

    So Ff3 got the “look” part right. However, the “feel” is not there yet: Quite a lot of standard keyboard shortcuts do not yet work as expected.

  2. Apple’s attention to detail is huge. If you see something that seems inconsistent, there’s usually a good reason.
    Safari glyphs remain dark because when the window is deselected, they still accept click-through. Finder’s don’t.
    Aqua controls are used for webclips because webclips are done with a modal dialog. Inline find uses the appropriate textured controls.
    Don’t get me wrong, it’s great that you guys are trying to integrate more with OS X! Just tone down the ego a bit until you have some more knowledgeable Mac guys to back it up.

    Oh, and if Linux users get to have a normal Back button, can we have one too? :D

  3. Remind us again why the “Forms” and “Links” sections are missing in Page Info dialogs?

  4. Congratulations! Also on never becoming tired of blogging everything you guys were up to, even when half of the return on investment for doing that was scathing/impolite comments about how people don’t like the new look, how it’ll make them switch to Opera/IE, how terrible/non-open-source MoCo’s attitude is, etc. It can’t have been easy, so kudos to you! :-)

  5. I remember reading about the OS integration that would happen with Fx 3 last year. I never thought it would be taken to this level of detail. I’m purely astonished and joyed at how Firefox now looks on OS X.

    Thank you.

    On a converse note, there have been icons in Windows XP that always bothered me because they were carried over from Windows 95. I was shocked to have recently seen a couple of those same icons in Windows Vista. I can’t recall which two icons they are in Vista, but you’d think that Microsoft with all their resources would care a little more about using icons that aren’t 13 years old and created for a 256 color scheme. It’s appalling. Makes me appreciate Firefox 3’s new themes that much more.

  6. Carter Anderson

    I think largely the new themes look well, though the obvious disappointment is Vista (which never seemed to get hover states for lots of toolbar buttons, ah well). Congrats on the gargantuan effort put in by the team. See you in Firefox 4.

  7. address bar with rounded left corner? does that mean, it will be again in final version? (sorry for english)

  8. Just a reminder to the Linux users out there: If your FF3/Minefield looks quite different than the screenshots here then that’s not a bug as long as it looks like the rest of your Gnome/GTK applications (even the stock Gnome icons are used if available). Mine looks quite different but blends in perfectly with my whole desktop. Kudos to the developers!

  9. Markus Stange

    Alex: Superdotman is right. I think you should remove the comparisons with Safari.

    Nico: What standard keyboard shortcuts do not yet work as expected?

  10. “However, why has the left edge of the location bar to be rounded? Round text fields are search fields in OS X.”
    Well, the location bar do search through your browsing history after all.

  11. It’s funny to see that the Page Info and Add-ons Manager windows on Mac OS X don’t use the regular dialog — funny, because Firefox changed the visual presentation of its options dialog in the first place to more closely match OS X.

  12. Safari glyphs remain dark because when the window is deselected, they still accept click-through. Finder’s don’t.

    Right, we are aware of the different behaviors, and I’m not asserting that one behavior is right or wrong, just that the behaviors are inconsistent between applications, and we’ve now reached that fine grained level of minutia. Since Firefox’s behavior matches most other OS X apps in this regard, we use the same visual style for the inactive glyphs.

    As for the Aqua controls in the window frame, I think the fact that it is fully modal is also a curious decision. For instance, their (very cool) find feature also darkens the content area and highlights areas of the page while not being completely modal. They were clearly worried about users dismissing the interface by clicking outside of the selected area, but given that is how the dashboard itself works (even when editing the set of widgets), it doesn’t seem particularly unprecedented.

    Out of curiosity do you have an elaborate reason for why the private browsing dialog is an actual dialog box instead of a standard sheet? :)

    Anyway, my overall point on the section about Safari was not that we are more visually integrated, or more native than they are. My point is that the differences between each browser and other native applications in the OS are now far, far more subtle, and just because a browser is designed by Apple (or Microsoft) does not automatically mean that it does a better job of matching the OS than a competitor. To use an example safely removed from Cupertino, IE7 doesn’t even use the correct kind of menus on Vista.

  13. I regret to say that I don’t think the goal of “maintaining a unique identity and presence” has been achieved.

    Instead the firefox brand remains heavily hidden and practically anonymous. I was under the impression that there would be more done than just the ‘keyhole’ to give firefox a unique brand. Without something greater than a keyhole, I think the firefox brand remains hidden.

    First the uniqueness and brand was hidden by the overt decision to simplify the whole browser in order to avoid scaring off potential IE converts.

    Now the brand is being hidden behind the desire for cross-platform theme conformance.

    Being a long-time Firefox fan I’ve seen the branding change from Firebird onwards (Pheonix is just a blur). The branding of Firefox has absolutely nothing to do with a keyhole. The branding is absolutely 100% about the logo of the orange fox flying around the globe. This is nowhere to be seen in the new themes (though admittedly it wasn’t in previous themes either).

    The best way to take advantage of all the community marketing efforts put into the logo is surely to use it at least as a toolbar background effect? This would bring the blue and orange into subtle (faded) but constant view and therefore associate the logo with using the product, without resorting to the cliche boring ‘throbber’.

  14. Looking at the “Quit Minefield” dialogue in linux: shouldn’t the “Quit” button be aligned with the checkbox above (as in OS X) rather that all the way left?

  15. Well all I can say is good job guys. You have done an exceptional job and it shows. I love the way Firefox 3.0 integrates into Linux, makes is feel part of the system as opposed to being just another software.

  16. mmc, the Gnome HIG says to put the supplementary action all the way to the left of the dialog, so it is correct where it is.

  17. Thanks for sharing your thinking on this. I don’t mean to be a naysayer, but I have shown the mac version to a number of users, and the reactions have been almost unanimously negative. The keyhole buttons, the bookmarks bar, etc. have what one user described as a “clunky” feel. All the rounded corners, dropshadows, beveling, the search bar, etc. feel heavy and overworked.

    Have the designs been tested? Maybe you could bring in a bunch of mac users and show them a FF2 theme and a FF3 theme (and a mock of a FF3 theme sans keyhole) etc. and see what they prefer?

    I agree that “the very best user interfaces go completely unnoticed” and my concern is that the opposite is being achieved with this theme. It has the feel of a theme that is “halfway” native, and therefore sticks out even more.

  18. I love the look on everything except KDE. But on KDE, the tabs don’t even work! Can you add a port or at least a theme for us KDE users?

  19. The OS X look is very very nice now, but can you please make the whole toolbar in every window responsable for click&drag?

    Out of curiosity do you have an elaborate reason for why the private browsing dialog is an actual dialog box instead of a standard sheet? :)

    Because all dialogs in Safari (except the toolbar modification dialog) are dialog boxes because they belong to alle Safari windows. Javascript alerts for example are inline, they only belong to the current page.

  20. can you please make the close box for tabs sit in the left side instead of the right for osx? :P that is like the one thing that bothers me most. otherwise, i love the new FF, which is why i use it full time.

  21. I had my doubts, but having used Firefox 3 on three of the four target platforms, I think this came out very well — both in the sense of making Firefox identifiable, and making Firefox fit in. Bravo, Mozilla.

  22. Regarding “We don’t want the user to think about the theme too much, we want the browser to perceptually fade away so that the user can focus on what it is they are actually doing. In a sense it is a little ironic, the harder we work to make Firefox fade away the less likely it is that the user will notice the amount of effort that has gone into crafting the interface. However, the very best user interfaces go completely unnoticed, that is what makes them good.”

    There’s a great phrase from Naoto Fukasawa: “design dissolving in behaviour,” where the designed artifact simply recedes into the user’s activity and its use becomes unconscious. He’s not talking about platform consistency, per se, but insofar as a platform becomes natural for a user, the idea holds. Mostly, I just like the phrase. :)

  23. Alex, big congrats to you and the rest of the team for doing such a fantastic job on this. I love the new Mac theme…could never imagine going back to the FF2 version at this point.

    I know this was a difficult process (Gijs pretty much summed it all up in comment #4), so kudos for toughing it out and coming up with some great results.

  24. At any scale, the community effort at Mozillazine, Bugzilla, etc., was absolutely grand! The open input call made pretty much all of the themes so much more solid and ready for primetime than without. That was a fantastic move on your part, and I hope it’s a trend that continues with future Firefox versions. :)

  25. Alex, this is a great post, and it’s fantastic to get a roundup to all the effort that’s gone in here. Great work from everyone involved, the new attention to detail and focus on the little “polish” things really makes the product better.

    @Ted: yes, we tested this pretty heavily, showing a lot of OSX power users (including the likes of John Gruber, a long time commenter on Apple’s look and feel) the new design and getting their feedback. Some people, like yourself, haven’t though we went far enough, but the majority have been thrilled with the design and with how it fits the Apple design ethic without being a 100% clone of Safari.

  26. Carter Anderson: “I think largely the new themes look well, though the obvious disappointment is Vista”
    I don’t like the Vista theme either – I miss colors. At least the stop/close buttons should be red. Sigh. But the other themes are nice…
    pd: “The best way to take advantage of all the community marketing efforts put into the logo is surely to use it at least as a toolbar background effect? This would bring the blue and orange into subtle (faded) but constant view and therefore associate the logo with using the product, without resorting to the cliche boring ‘throbber’”
    I actually disagree, sorry. I think integrating the FF icon into interface would be a huge mistake. But, of course, if you really want to do that, download Personas from Mozilla Labs, and use the “Firefox Logo” persona. As for uniqueness, I don’t think any application needs to stand out brand-wise – it needs to stand out feature/ease-of-use-wise, and Firefox 3 does definitely do that…

  27. You say in your post that Safari does a number of things wrong. Yet, the things you mention are actually done correctly. Also, Firefox 3 on the Mac doesn’t feel like a native OS X application when you click to put your cursor in the location bar and the entire line is selected automatically, that’s not typical OS behavior. The sheets and context menus are not rounded which makes it stand out from the OS in an odd way. Also, the entire toolbar should be able to click and drag, yet it doesn’t. These things should be easy to fix and yet these things make Firefox feel unlike a native OS X application.

  28. Quote:
    “can you please make the close box for tabs sit in the left side instead of the right for osx?”

    Absolutely.

    No matter how many people request this however, it never gets done.

    I’ve resolved that the Mozilla engineers must have signed some sort of pact to nark off as many OS X users as possible!

    All that hard work to get the rest of the browser to match the OS, then they put the close button on the right?!!

    Imagine how many people would complain if they suddenly put the close button on the left for the XP and Vista version.

  29. Sorry about that! We Apple apologists have a tendency to take everything literally. :)

    I meant between the two behaviors I haven’t decided which one I think is better, but they should pick one and stick with it across their applications. It’s the inconsistency that is wrong.

    Praising yourselves and claiming Safari

  30. pd: Another easy way to tell if someone is using Firefox 3 is when s/he uses the location bar: double-line, bolded/underlined matches, favicons and stars.

  31. Mac users are _very_ picky about their GUI. (I’m not criticizing, I am a very picky Windows user.) It is exceedingly important with any GUI design to test with users unfamiliar with your product. That is the only way to get a honest accessment of your interface.

    When you do user testing you never explain how to do something, or why something is the way it is. You only take notes on the user’s interation and their commentary. The reason is that you will not be there with every new user to instruct them.

    They will complain that this button is too round or too dark. You have to take all the criticism in stride. It will make your product better.

    Maybe the Firefox team did this? I don’t know. But based on the comments left here I suspect I will be hearing from Mac users that Firefox is still not native enough.

    Please keep in mind we complain because we love Firefox. If we didn’t care we wouldn’t bother.

  32. James Johnson

    Linux looks great, but it always did. The arrow is in a retarded non-obvious position to access the history now which is a UI decision that I constantly get confused over, and the download manager is now a bit of a mess (I miss my “clear list” button and having it on the right click menu makes no sense). Thankfully both GTK+ and KDE are full of disastrous design decisions so a half-way competent design will make the browser look good compared to everything on the platform.

    Mac OS X looks great minified, full-size it looks alright but nothing special. Considering that it wasn’t great before, I’d say it’s been an improvement but works still needs to be done.

    As for Windows, Vista looks okay and XP looks terrible. Both icons are bland, don’t suit the operating system and compared to the “Qute” theme just don’t fit in at all. The keyhole makes no sense on these platforms, they look generally a bit “off”, and they make any sense from a UI standpoint and stinks of mindless design over functionality. So I’d say it has been a net loss since the early versions of FireFox.

    So I’d give it a 50% success rate in my eyes.

  33. Regarding the focused/unfocused appearance on OS X: I just updated from Fx3.0b5 to Fx3.0rc1, and now when I hit Cmd-` to switch windows, all of the chrome flashes, which is rather irritating.

    Steps to reproduce:
    1. Open two Firefox windows, maximized to take up the whole screen.
    2. Mind your business, reading content in one window.
    3. Hit Cmd-` to see what you had open in the other window.
    4. Get startled by the jarring flash of dark->light->dark in <500msec.

    I suppose one can hack the userchrome to use the same effect, but I have to call this one out as bothersome.

    Otherwise, it looks quite nice, and Google Reader’s key-focus-after-clicking works correctly again!

  34. Vyacheslav Maliuhin

    I am reading this blog since its beginning, but I never wrote before, just because I believed that most ugly things in Fx3 themes will be corrected by user feedback. Some of them were corrected (like Policeman icons in “Site Identity Contextual Dialog”), but some were not… OS X and Linux themes looks (almost) great, so it is all about WINDOWS themes:

    WE DON’T NEED XP THEME

    First of all, thank you for making XP theme more similar to Vista theme. I’m using Fx3 on both XP and Vista systems, and it was very uncomfortable to switch between them, because earlier Fx3 alphas/betas had too different look in XP and Vista.

    Believe me, it is not a crime for application to have even 100%-Vista-style icons on XP. Most XP users do like Vista icons very much, because it looks FRESH on aging (boring) XP systems. For example, “TuneUp Utilities 2008″ and “Kaspersky Anti-Virus 8.0 beta” are Vista-style apps, and looks great on XP. Many XP users do not even use Luna theme, because it exists since 2001, and we are simply bored by it. (Personally I hate Luna theme.) Although Windows Vista is very buggy and slow, many XP users switched to Vista just because it looks fresh.

    And now, when your XP and Vista themes are so similar (thank you again), do you realize, that there was no need to make XP theme?

    KEYHOLE SOCKET IS TOO FLAT

    I like combined Back-Forward buttons, but its socket looks ugly. Hey, look at Vista Explorer keyhole socket, it is soft and spherical (in Z-axis) hollow. And yours is too sharp, with too right-angled edges and too flat bottom. It reminds me Windows 3.1/95 ugly GUI.

    You pay so much attention to this “keyhole” idea. Ok, if it is supposed to be “unique identity” for Fx3, then why don’t you just paint it BLUE in both XP and Vista themes? Why is is green in XP theme? There are many official themes (Luna, Olive Green, Silver, Royale, Zune), and countless “unofficial” themes available for XP. Which “Start” button color do you target? Here is a hint: IE7 is distributed via Windows Update, and many XP users already have IE7 installed. And its buttons are blue. BLUE in both XP and Vista themes. That would be good “unique identity” for Fx3.

    TOOLBAR BUTTONS LOOKS INCONSISTENT

    Now, when everything else in Fx3 toolbar UI is customized (Back-Forward buttons, Location bar, Search bar, Tabs bar), other toolbar buttons (“Reload”, “Stop”, “Home”) looks inconsistent. Please, add a glassy shape for those buttons to Fx3 theme. And make this shape somehow consistent with keyhole socket.

    “SEARCH” BUTTON IS UNNOTICEABLE

    For example, buttons on the left sides of both Location bar and Search bar (those are “site identity” and “search engine”) are wide enough. This is good. Also, buttons on the right side of Location bar (“Go”, “Star”, “RSS”) stands out too, because there is a lot of space to the right of it (Location bar’s tiny dropdown button also adds space – looks great). The only exception is “magnifying glass” on the right side of Search bar. This button is too short itself, and it gets even shorter visually, because the magnifying glass icon turned to the corner, and sticks to the right edge (especially in XP theme!)

    I understand why you can’t flip it horizontally (like in OS X and Linux themes – looks much better), that’s because Microsoft did it this way in Windows Vista. But in Windows Vista Explorer’s search bar, the magnifying glass is SMALLER, and there is more SPACE to the right of it. More space than in your Vista theme, and much much more than in your XP theme. Please, add some space to both Windows themes. Also, make “magnifier” in XP theme smaller, so it will stand out more.

  35. Markus: Several (I’ve all reported them via “Send Feedback”), I don’t remember them all.

    One example is that you can hit Ctrl-n/p in Safari’s address bar pop-up to go through the list (Ctrl-n is the same as arrow down on OS X. It does work in Firefox’ text boxes).

    Another is ⌘⌥-clicking the toolbar pill button. That’s supposed to bring up the “configure toolbar” dialog but only toggles the toolbar in Ff.

  36. It’s taken time to get firefox to this point for OS X, but I don’t think it’s quite there visually. The controls in the toolbar seem far too rounded, the small icon set is better purely because the new back and button is replaced with inline ones.

    Also, would it be possible to remove the status bar’s progress bar in favour of one in the address bar? Keeping the status bar around purely for plugins and a progress bar.

    The preferences panel needs to be thought about a bit more, the tabs on the “Advanced” pane could be styled to OS X a bit more using a tab strip.

  37. Firefox 3 is a very good improvement compared with Firefox 2.

    The integration in the different plateforme is a stractegic point and you have a good implementation of this.

    But, the bad new is the Aero is not implemented in this version of Firefox. The Vista integration is not completely fully. The Download manager is a good exemple. The toolbar is not integrated style of the system…

    :)

    Also, I have found a very good extension and procedure for add the Aero support in Firefox 3 :

    http://forums.mozillazine.org/viewtopic.php?t=649449&postdays=0&postorder=asc&postsperpage=15&start=0

    ;)

  38. Vyacheslav Maliuhin

    “[…] although the main window is notably missing support for Aero glass. Users will hopefully be able to get this functionality using an extension during the life cycle of Firefox 3, and we will have glass support added to XUL for the next release of Firefox.”

    Alex, if it is possible to have Vista Aero glass in Fx3 with “Glasser” extension, then why don’t you just integrate this extension into Fx3 ?

    Then, later, in Fx4 you could replace it with native XUL supported Aero glass.

  39. Good idea Vyacheslav Maliuhin! :)

  40. I’ll have to say that the themes for OS’s other than Linux look good and you’re to be congratulated.

    I’ll echo the other post that says that FF3 fails too often in both KDE3 and KDE 4 to be of much use right now. I have yet to download a usable edition.

    Equally, your choice of GTK widgets, the design of which looks rather Win 3.1 or Win95 rather than 2008 is a distraction and unwelcome in KDE. All that said the Mozilla Foundation has made it’s choice to align with GNOME rather than being desktop agnostic. Sad, really.

    I’ll try again later today and see if I can at least get it to work and go from there.

    In spite of my continued disappointment with the look of FF under KDE I am very much looking forward to this release. But please do not say you’re getting a Linux look and feel as long as you remain anything but desktop agnostic. You have a GNOME look and feel, not Linux.

    Good luck and looking forward to it!

    ttfn

    John

  41. ‘Out of curiosity do you have an elaborate reason for why the private browsing dialog is an actual dialog box instead of a standard sheet?’

    Yes. It affects the whole application, all windows. Not just the one you look at.

  42. Actually, mmc and Michael, the “Quit” button from the “Save Tabs” dialog in Linux should be to the left of the “Cancel” button, just like the “Save before Closing” dialog in Gedit[1]. More than that, the text of this button would look better as “Quit without Saving”.

    Oh, and the dialog title should be empty.

    [1] http://library.gnome.org/devel/hig-book/stable/images/windows-alert-save.png.en

    :)

  43. Lovely article. I just hate one of the fact that the app icon is not really match with the platform running. Linux is now starting to adopting the freedesktop.org’s icon naming spec. Thus, creating various size of the app icon would definitely please Linux users.

  44. Dominic Spitaler

    I tried to write a comment now 3 times and It didn’t work so I hope you can forgive me that I make it short now.

    I love the work you’ve done so far but I think it’s not quite finished at least on Mac OS X.
    And one Question:

    Will there be a (re)new(ed) Firefox Application Icon like you’ve written in December?

    Hope someone can answer that because I couldn’t find any information about it since your initial blog entry.

  45. Jean Azzopardi

    I use Gnome myself, and I must say Firefox 3 is a pleasure to use. It feels very much like a standard Gnome application, kudos on that.

    However, I think it would be a good idea if the keyhole was optional. If I was using Windows, or a Mac, I’m not sure that I’d like the keyhole design.

    And regarding KDE, yes, it does feel out of place, perhaps something can be done about that soon?
    Otherwise, kudos for an excellent release!

  46. I hope the developers will at least allow the Strata theme (or someone makes a theme) for FF3 for Linux. I loved the old Mozilla theme for years, even using graymodern and graymodern2 for as long as I could, but I like the Strata theme better that I could get away from using those themes with shaky updates. The linux theme is old and ugly and should be updated as well, or at least give us the choice to use it.

  47. The new themes for Firefox 3 are finally good enough that I can abandon the tons of tweaks I had to apply to achieve a native, integrated feel on Linux, OS X and Windows.

    Did you achieve your goals on platform integration?

    Speaking as someone who uses Firefox extensively on all 3 major platforms, and is such an interface nazi that I spent hours testing and modifying themes and applying res hacks to get native looking widgets, I can answer with an emphatic yes.

    The new themes fit beautifully on all platforms as far as I’m concerned. I no longer feel that Firefox is screaming “LOOK I’M FIREFOX!” at me when I install it. :)

    Thank you, and everyone else involved in the FF3 platform integration effort.

  48. Marcus Registradus

    My address bar corners (XP) are not rounded like the ones in your screenshots: why would this be?

  49. Here’s another that agrees with Vyacheslav Maliuhin – we need glass on Vista! Macs are getting more attention, but there are more Vista users out here than all Macs together (check web hit stats). Maybe you (the FF3 team) could give Matthew Holder (http://forums.mozillazine.org/viewtopic.php?t=649449) some “official” help and get Glasser integrated into FF3 for Vista. Or at least get it to be a mainstream extension :).

    My only other comment is that I really don’t like the icons on the “options” dialog. Also, can we please get a red stop button on Vista? ;D

  50. You should add a disclaimer that the official Firefox icons are not open source.

  51. Hey Alex! Thanks for the insisting on use native gtk widgets instead of custom icons. I appreciate it so much. But I have some questions: does your mention about XUL supporting vista glass mean a using of a full rgba colormap? If so, can we have it on linux? At the moment gtk supports rgba colormaps, thanks to Andrea Cimitan and his murrine engine, but FF looks ugly with rgba enabled support. Can we hope for that? Thanks in advance.

  52. I have a hard time believing people spend days making skins-that-look-native.
    At least it’s better than nothing, but…
    Hmm, that *looks* nice, but how does it feel ? How do controls handle DnD, clipboard interaction, native scripting…
    And how does that look on platforms that don’t use the default colors or theme ? I for one despise Luna, and even though I don’t use XP much I had a hard time finding non-skinned version of apps that would behave sanely… I’m stuck with an antique adslTV, and removed the french-translated Miranda-IM I installed to use the non-skinned US version.
    I don’t see the point in trying to make things look native if they get out of sync when native controls change.
    Besides, I’ve been waiting for years for native controls on BeOS, I suppose I’ll have to do it myself :D

  53. I dont like that firefox last and next button color is too close to IE7. Please change the color to Orange which is native firefox color. Or atleast give us a orange vista button theme to get “firefox original” color.

  54. -Cross platform applications that use a consistent appearance across different operating systems (like RealPlayer, or applications developed using Java Swing) feel foreign and strange
    -The Web browser is a central part of the user’s 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 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, or when you are reading an interesting book and you turn pages without conscious thought).
    -We want Firefox to feel like the browser your computer should have shipped with

    *** PS, the bookmarks organizer back/forward buttons are ugly.

  55. I was wondering if there is anyways we can use the “default firefox theme of mozilla firefox beta 5″ on the current version of the regular firefox non beta.? and where can I download it?

  56. I really don’t like the theme on windows xp of fx3. I can’t believe those was designed by iconfactory which designs beautiful icons that commonly known.
    I think the icons should at least unified by a certain character or similar hues(you can see the theme on OSX of unified oval and gray icons). And I don’t think the icons of xp’s fx3 met that least needs(you can see even the bookmark icon uses a different angle of view to the others). Additionally I think the message box icon looks clumsy than the other 3.
    Do you agree my thought or tell us how do you feel about them.

  57. I’m using Vista. I like the new look for the most part, although I kinda like the glass effect added by Glasser more. The icons seem a bit inconsistent as some of them look quite simple while others are detailed and elegant, which I prefer. Also, while I like the new keyhole, it seems pointless since the area of selection appears to be the same.

  58. By the way, I didn’t mean the area is the same as each other or the same as FF2. I meant it’s a rectangular area like the other buttons.

  59. I like the new design (though it seems I’m the only one who thinks the Linux theme has a rather boring look).

    The Linux bookmark bar is getting too broad, though. I think this is because folders have both an icon and an arrow on the Linux theme. Is it possible to remove the arrow?

  60. I’m reading this interesting Article in Firefox 3 RC2; I started using Fx3 with beta3 and never went back to version 2.

    I’m really happy with these efforts for platform integration – Fx3 is the first version of Firefox where I didn’t immediately start looking for a “theme” to make it more unobtrusive: I have a browser to use, not to look at!

    Just one little niggle: the Back/Forward widget in RC2 (and before) is leaner than the screenshots I see here – I like it that way, with back and forward the same size; and it makes the toolbar narrower: the narrower the better!

    Is there any way I can “save” that widget so it can be used with the release version? I really don’t like that big round back button: it’s the one thing that does shout for attention – by its size alone – while the browser really should be blending into the “background”. I want to look at pages, not at a browser. ;)

  61. I use Firefox 3 on all three platforms and wanted to personally send my kudos to the developers. However, I have to tell you that the default OS X theme is my favorite, wow is it sexy!

  62. Kudos on all the great work, Alex. I’ve been running nightlies since December or so, and watching the UI develop over a six month span has been a fascinating, satisfying experience. I adore the OS X theme, and have been using FF3 as the default browser on my MacBook for some time now.

    I would like to echo the question asked by others, though–are we going to see the tweaked application icon (hopefully in the huge dimensions supported by Vista and OS X) next Tuesday?

  63. Good work guys, maybe the L&F does not have the importance of the Performance but it still great job.

    Anyways, i know each L&F depends on the OS its working on, but, is it possible in one way or another to run one L&F on another OS, like running OS X L&F on XP, or vice versa?

  64. Just want to say thanks for the excellent gtk+ job. There is an oft-expressed feeling in linux circles that Mozilla doesn’t really care about linux users (since as you yourself put it, there isn’t an internet explorer to oust on that platform, and most distros come preloaded with firefox anyway). I think this goes a long way to debunk that.

  65. I am very disappointed by the new look of Firefox 3. I think Firefox just lost its identity. I don’t know anyone who ever complained about the interface of Firefox or who felt uncomfortable but what I do know is that if I wanted OS integration for my XP, I would use IE7. I wouldn’t use Firefox. I never cared for Firefox to fit in with the OS. I think the icons are ugly….specially the “new window” and “new tab” buttons for XP.

    I don’t know how you guys were able to go from the Firefox 2 icons to the new ones. I would have at least love to see a theme similar to FF2 for FF3.

    I am not happy with FF3. I liked the old look a lot better.

    June 17th, 2008 is when Firefox lost its identity.

    You guys changed the interface for the wrong reasons.

  66. My last comment may have been harsh…..but I really like Firefox and will continue to use it but I am just a little disappointed. I do appreciate the work you guys have put into getting FF3 released…..but it would have been nice to have a “Classic” theme for the people who have been using Firefox since Firefox version 1.

  67. It’s really ridiculous that you guys just left the visual theme out of Linux. Despite all the new functionality, I personally still feel a little left behind as I open up Firefox and it’s the same humdrum looking browser. A nice visual refresh for Linux users would have been a nice treat, but I sincerely think you were idiots for not doing it.

  68. Is it possible to get the theme for Windows on Linux? I’m using ubuntu and I prefer how it looks on the other OSes. :(

  69. I don’t dig the new look on OS X at all. I’m on 10.4.11 and it just looks so out of the place. Is there any intention of releasing a ‘classic’ version theme?

    PS: The rounded keyhole on the google and search bar is pretty weird.

  70. The OS X visuals are hideous. This should not have been released without the option to switch to normal OS X look and feel or at least the widget set from Firefox 2.

    If you really want to retain Macintosh look and feel, the way to do it would be to *use OS X widgets*– similar to what you apparently do on Linux. For example, Firefox on OS X still does not use normal text entry boxes or the built in OS X spellchecker. If you’re not going to achieve look and feel through the obvious means of using native widgets, you shouldn’t even try: trying to build an entire parallel approximation of Apple’s look and feel is not ever going to work, and is only going to create an uncanny valley effect where those places where you do diverge from Apple standards (i.e. essentially everywhere) just stand out even more. Despite the desperate attempts to approximate the textures of Apple programs, Firefox 3 looks much less like an OS X program than Firefox 2 did!

    Other than the bizarre skinning and the unintuitive address bar autocomplete, Firefox 3 is much improved. When can we expect the ability to use Firefox 3 with a normal interface, instead of this weird pseudo iTunes nonsense? Is there somewhere I can download a theme/skin to (at least) revert to the Firefox 2 interface, and when will you begin shipping such a theme with the browser?

  71. “Remind us again why the “Forms” and “Links” sections are missing in Page Info dialogs?”

    Yes, please remind us of this. It might be enough to get me to go back to FF2

  72. Is it possible to install in firefox 3.0 Linux version OS X theme ?

  73. I really like the new look of Firefox, but I prefer the Vista look over the XP look, even on my XP box. It would be nice if we could choose our flavor, no matter what box we are on. Although I understand that some of the glyphs for the *nix version are pulled from the OS itself, are the other OS glyphs the same way? If they aren’t, then selecting the theme, and then having a color selection of ‘Vista’, ‘XP’, or ‘Mac’ would be nice. The people who like to make their Windows box look like a Mac would appreciate it as well.

    But I love the look either way.

  74. I personally prefer XP version, I’m running XP n my desktop and Vista on my laptop.

    I really wish they would make it as a choice for user, rather than customizing according to OS

  75. I found it interesting the way you put Firefox’s integration on Mac OS X is better than Safari’s.

    However, I felt like I had to correct you a little bit.
    Safari’s glyphs in the toolbar remain dark when the window goes inactive because the buttons are “click-through” buttons, which means you can click them even if the window is not on the foreground. A lightened control always means it is disabled, but it basically should have nothing to do with the window being on the foreground or not. It’s just Safari not disabling its buttons when going to the background.
    As of the Cocoa controls in the frame, that’s right. It shouldn’t be like that.

    However, I disagree when you say you are “pretty close” of being better than Safari for the OS integration. While most of your form controls render in a decent way, some of them range from a tiny bit not like it should be to plain wrong. I mean, just look at what you’ve done to the drop down lists. It’s like making orange juice pose as milk. Besides, the selected element’s color insists on being blue, even when using Graphite. I’d personnally prefer it to be just Windows-like rather than give the impression of being Mac-like. Anyways most drop down lists in Firefox take a Windows look as soon as you apply certain styles to them.
    Globally I’d say you are “close” to Safari, but not “pretty close” to being “better” than Safari.

  76. I am “a big enough Firefox fan that [I] like to run it simultaneously on 4 different platforms.” Unfortunately Firefox 3 won’t work for me anymore because you have gone to having separate user interfaces. I used Firefox precisely because it was consistent across platforms. Now that it is inconsistent (“native”), I might as well use IE, Safari and Konqueror depending on what platform I am using.

  77. “Just tone down the ego a bit until you have some more knowledgeable Mac guys to back it up.”

    Wow, Macheads preaching humility. Now that’s a development.

  78. While I understand your thinking to a point, you guys kind of ignored the needs of those of us who use older operating systems. I don’t know how many themes I tried out after upgrading to FF3, but I quickly learned to avoid any theme marked “os integration.”
    I’m not saying we should have been catered to (we have business reasons for staying with things like Win2K) but “os integrations” don’t degrade gracefully at all. Yuck.

  79. So, Im using Linux and I like strata theme for XP much better. Where do I download the Strata Theme? Or am I forced to use the Tango one?

  80. Hi!

    I saw theses screenshots, I like any theme based on Ubuntu distro. I want to cangratulate to theme creators.

    So long!

  81. I also really like the way Firefox looks on XP. It’s a great theme. But on Linux (opensuse 11.0 kde 4) the fox is now the by far ugliest program I regularly use. You should really give us the option to easily load any default theme we like from addons.mozilla.org

  82. i feel like it’s not giving me what i want

  83. Paolo Montrasio

    I’m using the Qute Classic theme on FF2. I really prefer it over the XP theme of FF3, so how do I tell FF3 to use QC or any other theme? It seems that FF3 cannot find no themes to download and that’s strange. Is it possible that nobody ported a theme from FF2 to FF3 after so many beta and RCs?

  84. I’m not enjoying a beta of Firefox 3, no – the final version, and it’s amazing how ugly it looks after becoming so familiar with Noia2. Judging by comments from around the web, I’m not the only person who is looking daily for an update for this great theme.

  85. The round back button is pretty new. It sure will take some time to get used to it, instead of making it fade into the browser itself, Firefox made it stand out pretty much in the XP version. Something uncalled for.

    The green colour isn’t really ecstatically pleasing i must say. Why green? Instead of making it royal blue instead.

    Green is a terrible colour for a browser icon.

    I guess it would all be changed when new themes start appearing, the current theme is pretty ugly.

    Another thing i would like to feedback towards would be the popout when you type in a password for a website, there is no longer a checker to remember the password.

    The option of making the “allow firefox to remember your password” popout into something similar to what you get when a pop out is blocked is uncalled for and pretty annoying when you have to move your mouse a greater distance to choose an option.

    It is also distracting when the screen moves every time you do that.

    The URL address bar and its contents are too very messy.

    The text sizes, colours and fonts are ALL OVER THE PLACE.

    It is very messy and irritating to have to look at something like that every time you key in an address.

    You should make it an option to change it to normal simple text.

    Why incorporate visuals in a URL address bar in the first place?

    The spell checker for Firefox 3 is faulty too and there are bugs to it. Sometimes i checks when you have an error in your spelling and others it does not.

    I think you guys did a great job jumping from firefox 1.5 to 2.

    Firefox 3 however was a letdown. I firefox could come up with a better concept in the future and for now,

    fix up those bugs.

  86. You guys have done a great job with the visual style on this build of firefox. It’s not the first time I have used firefox, but it is the first time that it has replaced IE.

    This is mostly down to the way that it doesnt look different to everything else. I like my UI to flow. It helps me to focus more one what I am doing. Its a fine piece of software.

  87. There seems to be a bug in the default theme of Firefox 3, at least under Vista. After some time the blue keyhole controls switch to green color (XP style?). It needs a browser restart to change back to blue. Any ideas?

  88. @Nico #1
    It’s rounded, then. because the awesome bar is searchable.

  89. I’m a little disappointed I have to say. I like the idea that features and methods are the same over various platforms but I really dislike your choice of style… it looks out of place wherever I use it.

    I feel very strongly that applications should by default fit into the default look and feel of the operating system you’re using. At the very least, this should have been a choice available during the install.

  90. Hi all,

    What theme is the third one from above ?

    Is it available for windows xp (FF3)

    thnx,
    fiko

  91. Nice work you got there Alex, but do you have any downloads yet? Because I’ve been staring at these nice themes for weeks and I can’t download them!

  92. On OS X, the close buttons in the tabs need to be on the correct side, i.e., the left side. ‘Til then, FF3 still feels like a port from a different platform. Oh, and please square the corners on the address bar, thanks (I keep thinking it’s a search field). Aside from those issues, FF3 is a *HUGE* improvement in Mac native UI integration, thanks guys!

  93. It’s great to see all this detailed explanation and discussion of design decisions. Very cool.

    Firefox 3 does indeed seem much more integrated, but can I heave one complaint? THE TABS! The tabs are upside down. Yes they were like that in Safari. I couldn’t believe it was changed. The window loses its visual connection to its name, and now it’s more connected to my bookmark bar than anything else. >:P In trying to integrate I think you may have picked up a bad habit or two….

    Not to downplay the niceness. :) It’s quite awesomely nice. Just some (hopefully helpful) feedback. Thanks for sharing your work with us on the interwebs!

  94. I think overall, the layout is cleaner. However, the rounded ‘safari’ buttons and feel is dead and gone. If I wanted to use Safari, I would open Safari. I am now left with 2 Safari-like platforms and nothing that I like. Kinda makes me wish I had a PC so I could use IE7…OK, no just kidding, but seriously…lose the Safari look–it’s pitiful.

  95. Obviously there will always be minor arguments over small details. However, over all, FF has proven that open source is the optimal way to produce a quality software product that blows away the closest competition and user stats prove that month over month.

    Good job guys!

  96. UUuuumm… why do all these sites say ,”Awesome Fire Fox 3 Themes” “Cool Looking FF3 Themes” “Best Firefox Them Download”?

    These themes AREN’T COOL, they are NOT AWESOME, AND THEY DON’T COME ANYWHERE NEAR THE COOL FACTOR ONE BIT! BUT I’LL TELL YOU WHAT THEY ARE….

    What they are is BORING , PLAIN, AND UGLY, NO BETTER THAN WHAT CAME AS THE DEFAULT! All the best themes are ALL FOR FIREFOX 2, but unfortunately for me , I dont know if this is the case for everyone else, but FF2 slows my computer to sh*t, as if i was running on a Pentium 1. LOL!

  97. Agree with #66 Hussain, Don’t like firelight at all, any one knows where can download FF2 theme for FF3? thanks!

  98. I just auto upgraded today. Checking out the latest themes compatible with the newer version. I was wondering if there is some theme gallery or something for this?

  99. its cooooooooooolll…***

  100. I would appreciate getting all
    in French. Why is it not possible?

  101. Fuck you.

    It would have worked out a lot better if you would have given the option to the user what ‘graphics pack’ they wanted to display. Or at least a easy way of changing it.

  102. I agree with Hussain: I would have liked (the option of keeping) the Firefox 2 interface and color scheme. Now it looks gray/flat/metallic like Safari.

  103. Subject: combination button for stop/reload

    Without suggesting a change to Firefox, it’s interesting that I never find a problem with the combination button in Safari.

    Maybe the good response from the application is a Mac OS X thing. Certainly, I find myself extraordinarily frustrated with stop button behaviour in IE on Windows.

  104. Subject: praise and critique

    At http://n2.nabble.com/FLUX—Horizontal-Menu-tp2017268p2102347.html and thereabouts:

    * my agreement that Firefox 3 does look better than Firefox 2

    * some critique, comparing a September 2007 vision (pleasing) with the June 2008 product (IMHO inferior).

    Rewinding many years, what I most disliked about Netscape was its force-feeding of the word ‘Netscape’ in the title bar of every window.

    Now, In this age of advertising, marketing and spamming frenzies, my dislike of branding and unnecessary differentiation is even greater.

    I value Firefox: not for its whispering or shouting to me “I Am Firefox”. Rather, I value Firefox for: its utility.

    (Still, there’s so much missing from Firefox, with some ancient but very significant bugs, that I prefer Safari.)

    IMHO the variation from operating system guidelines, the sometimes Mozilla island-like approaches, is a mistake.

  105. I don’t really like the way you “integrated” Firefox 3 with Linux; I would have preferred if you had made it a bit more “Windows” like instead.
    So here I am stuck with a Windows themed desktop, yet I still have tiny, bland icons for my back, forward, cancel/stop, reload, etc.
    Is there a “Windows” theme I can check out for Linux?

  106. “From using native gtk widgets in the content area to uplifting the OS theme icons, we have made an incredible amount of progress with this release.”

    FAIL. now dark/black GTK themes are completely unusable thanks to this. There is no way for me to change the colors/buttons away from a dark GTK theme which does not work inside Firefox.

    setting GTK2_RC_FILES to another theme doesn’t work. So you are stuck with buttons and colors that ARENT DESIGNED for a white background.

    FIREFOX = theme jailed.