Visual Polish in the Firefox 3.5 Themes

We are now in the process of landing a few refreshed icons for the Firefox 3.5 themes. Across all 4 platforms roughly 25 of the icons are either being tweaked or are entirely new (there were some last minute feature additions, like geolocation). Here are a few highlights of things that either just landed, or are coming soon to your very own nightly build:

Windows: All Secondary Glyphs in the Main Window

Vistaglyphs

Xpglyphs

On Windows (both Vista and XP) we are replacing all of the secondary glyphs in the main window (various small arrows, new tab +, etc) with a consistent etched-in appearance. These etched in glyphs also feature a glowing hit state, which varies color by platform. These glyphs, as well as all of our Windows icons, were created by the Iconfactory.

OS X: Removing Background Etch From the Keyhole

Osxkeyhole

We are also considering doing this on Windows, since it lightens and simplifies the appearance of our UI. Either way, we wanted to get the change landed on OS X, since a lot of people were eager to see the etch go (including myself, as it was my misguided idea in the first place). Visual design of the OS X theme is contributed by Stephen Horlander. Our file system icons on OS X were made by Sofa.

Linux: Last Minute Plugin Icons (used in the event of plugin block-listing)

Linuxplugins

These particular icons were designed by Jakub Steiner (as a very last minute refresh, sorry about that Jakub!). The visual design of the Linux theme is contributed by the Tango team (always friendly, and occasionally featuring overnight delivery :)

As a side note for Linux, can anyone point me in the right direction for contacting the team that works on the default Gnome OS themes? Basically all of our remaining polish points on Linux (related to icons) are things that we would need to improve at the level of the OS themes, like icons not being provided at the right size, and a lack of uniformity with the visual size of some glyph icons. These are things we are eager to get figured out, but right now our teams (and our instances of bugzilla) aren’t really in contact.

30 comments

  1. PLEASE consider adding the Glasser extension as a default on Vista/7! Consider also making the tab bar background transparent. It looks so much better that way. Please do seriously consider this. The Firefox team goes so far to blend the browser with OSX, I’d like to see a little more effort go into the Vista/7 version. Thank you, and keep up the great work!

  2. Lorenzo Orlandi

    hey Alex, while I appreciate the effort for the FF3 OSX theme, I never liked the mac keyhole… time ago I did this based on a Rick Patrick (http://www.vanillasoap.com) mockup: feel free to try it and in case, contact Rick too… I must admit that I’d love to see this as the default theme :)

    preview
    http://bit.ly/5jSqj

    theme jar
    http://bit.ly/betterlight

  3. Alex, do you have any bug numbers where we can follow these developments?

    I already know about the fixed Bug 462644 – Remove etch from the Keyhole for Firelight, but am more interested in following the windows refreshes.

    Thanks!

  4. I like that you are removing the etch on OSX. Next, I’d like to see the home button disappear and a combined stop/refresh button.

    Fx3.0 looks too “heavy” for me.
    Perhaps you could also make the site button lighter?

  5. Lorenzo Orlandi

    while I appreciate the effort put into the OSX theme, I never liked the keyhole design, so time ago I did a modification based on a Rick Patrick‘s mockup…
    I admit that I’d love to see this used as the default theme :)

    here a preview
    http://bit.ly/5jSqj

    and the theme jar
    http://bit.ly/betterlight

  6. I’d also like to know what the status of aero glass is? Support was added to Gecko 6 months ago in Bug 418454 but then progress seemed to die.

  7. Aaron Strontsman

    The Linux-close icon shown in the screenshot attached to the bug is from Ubuntu’s Human theme, which was specially made for Ubuntu by a certain design company you might already know: http://iconfactory.com/design/detail/ubuntu . Since Canonical doesn’t seem to invest in the theme any more, it seems essentially a dead theme. Anyway, in the standard Gnome theme (the blue-dominated Tango theme), the button looks both different and clean.

    I like the refreshed Windows glyphs, however don’t they have huge usability problems? Gray etched-in glyphs I’d generally think to be disabled and also the colour choice might not be best for people with sub-standard vision.

  8. +1 for removing the keyhole etch on Windows.

  9. “Alex, do you have any bug numbers where we can follow these developments?”

    Theme changes for FF3.5
    http://forums.mozillazine.org/viewtopic.php?f=18&t=665138&start=180

    Mozilla 1.9.2 / Firefox 3.6 theme changes
    http://forums.mozillazine.org/viewtopic.php?f=18&t=975065&start=105

  10. Since you’re refreshing the themes, why not have the “All Tabs” button only appear on a tab overflow, like in your screenshots?

    I thought the purpose of the “All Tabs” button was to provide a list for when some tabs aren’t visible. When there is no overflow, it becomes unnecessary clutter, and duplicates the functionality of the tab bar itself.

  11. About “Removing Background Etch From the Keyhole” of Mac OS X.

    I like design of original Firelight.

    I think that it becomes difficult to understand the existence of the Recent pages button.

    ——————–
    MacBook_Pro 15″ 2.4GHz(Mid 2007) ; Mac OS X 10.5.7

  12. I strongly agree with post #1, the current vista theme looks a little ugly, looks way better with glasser.

  13. I wonder whether a new set of buttons for the navigation toolbar is in the cards for Firelight on OS X. I liked the Firefox 2.0 look a lot more somehow.

  14. That’s a great idea Gyrobo! The “All Tabs” button is not needed when there are just a few tabs.

  15. Nice to see the etch removed from keyhole, as it gave the impression the button was a slider.

    Regarding the site info (or ‘ID’) button – would it be a better idea to display an info logo (like an ‘i’) instead of the favicon?

    The favicon is already displayed on the tab, so it ends up getting displayed twice.

    And it’s not clear that the info button is even a button at all. As it just shows the favicon, it’s not clear that it can be clicked.

    And please, please, please… tab close buttons on the left for OS X. This bug is so old it’s ridiculous.

    :-)

  16. @dao

    > +1 for removing the keyhole etch on Windows.

    Try the “NoUn Buttons” extension, works in 3.0 and 3.5

  17. Patrick Dempsey

    The new etched icons look great… but I hope they don’t ONLY appear on the tabbrowser, but in the findbar, sidebars and various Tools popup menus. They do have a nice “cross-platform” appearance that should work for both Win and Mac, and not look dated on Vista. Most importantly… thank you for ditching the faux Vista blue for those icons… transparent grey is much much more professional looking.

    And yes, ditch the soapdish etch for all OS’s! I’ve read all about the design history, but since the “default” set will hopefully never be locked together, it’s a vestigial design element.

  18. Please, don’t give the etch look to Firefox on Windows. I love the current green “add new tab” button on the tab bar. However, I do think the tab scroll arrows are pretty ugly, but I don’t like the etch look any better.

  19. +1 to remove the etch in windows

    And please, improve the Windows Vista/7 theme. It looks ugly without any glass…
    Vista is really old now, we have an awesome extension (Glasser) and i think developers could use that to improve Firefox theme.

  20. Aero glass isbeing considered for implementation in Firefox.next (right now, firefox 3.6). A brand new vista interface (and probably win 7) will roll out with that release.

    @Cata, you can remove any of the buttons on the navigation bar 9such as home, refresh, stop, etc) by right clicking on it, clicking customize, then dragging and dropping the elements to renmove or add them.

  21. Whoopie doo! Three small etched icons are the start of a much needed UI overhaul.

    Here’s some ideas for you:

    – Get rid of bulbous, 80’s style Linux control buttons.
    – Clean up the mismatched colour scheme.
    – Remove the ugly File bar.
    – Add animations for dragging/reordering tabs.
    – Don’t ask interns to design the icon set.
    – Remove the UI colour gradients on the Vista default theme.
    – Move the tab bar to the TOP of the page, to minimise visual clutter.

    This isn’t 1997. Windows doesn’t use the GTK toolkit. Icons that look like they’re from Amiga Workbench 1.3 are NOT sexy. Please, I understand you have to appeal to the ‘its the functionality that counts’ geek crowd, but please introduce a bit of sexiness!

  22. I’m with #7 on this – the new buttons look disabled on XP. In particular, I vastly prefer the old green New Tab button…

  23. For example, compare the disabled stop button that I rotated and resized at http://img21.imageshack.us/img21/6066/sshot1vbb.png – not much different than the new New Tab button.

  24. Please do not use the etched style on buttons that can be pressed. The Windows standard is for grey etched icons to represent disabled buttons. You need to be consistent with the OS and I don’t see how these icons are an improvement over the subtly-coloured existing ones.

  25. it’s GNU/Linux and n-o-t Linux !!!

    “…Basically all of our remaining polish points on Linux (related to icons) are things that we would need to improve at the level of the OS themes…”

    “…Basically all of our remaining polish points on GNU/Linux (related to icons) are things that we would need to improve at the level of the OS themes…”

    I HATE YOUR SHITTY FIREFOX WEB BROWSER. MAKE THIS SHIT FOR WINDOWS SHIT AND MACOSX SHIT ONLY IF YOU CAN’T GIVE TO THE GNU/LINUX USERS A DECENT WEB BROWSER

    THIS FUCKING BROWSER WORKS BETTER ON WINDOWS THEN ON OSX

    THE XUL GUI ON LINUX IS LACK!!! AND SLOOOOOOOOOOOOW

    ARE WE STILL AT “P2″???
    https://wiki.mozilla.org/Firefox3/Firefox_Requirements#Platform_Support

    FUCK YOU ASSHOOLES

    EPIPHANY IS WAY MUCH BETTER
    AND ALSO WEBKIT :DDDDD

    FUCK MOZILLA

    BTW, 3 YEARS AGO, WHEN I WAS A WINDOWS USER… I DONATES MORE THAN 200$ WITH ANOTHER BUDDY

    G-O
    F-U-C-K
    Y-O-U-R-S-E-L-F
    T-O-D-A-Y

    ONLY TAKING CARE TO YOUR REPUTATION AND A LOOOOOOOTS OF “nepotistic approach”

    http://www.chipmark.com:8082/forum/comments.php?DiscussionID=143

    FUCK YOU ASSHOLES
    AND YOUR FAKE FREE SOFTWARE

    WHEN I’LL GO BACK TO DEBIAN (NOW UBUNTU) BE SURE THAT I’LL DELETE YOUR SHITTY “ENEMY” ICECAT.

    FUCK NEPOTIST MOZILLA!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  26. I MEANT TO GNU/Linux

    “THIS FUCKING BROWSER WORKS BETTER ON WINDOWS THEN ON GNU/Linux”

    STUPIDS!!!!!!

  27. As Anders :

    PLEASE consider adding the Glasser extension as a default on Vista/7! Consider also making the tab bar background transparent. It looks so much better that way.

    Please do seriously consider this.

    The Firefox team goes so far to blend the browser with OSX, I’d like to see a little more effort go into the Vista/7 version. Thank you, and keep up the great work!

  28. I’m sorry but adding glass to 3.6 is just not acceptable. Vista/Aero has been out for 3 years now. It should of been done a long time ago. I already know of people leaving FF because of this (to IE8 and Chrome). Unless FF can show that it’s up to date, and user friendly, this is just going to continue. 3.5 must contain Glass, there is no excuses for it.

    Even I’m starting to lean away, and I’ve used Mozilla browsers way into the past when it split from Netscape. FF was the minimalist, fast, standards complain and up to date browser. While great work has been done on speed, it’s forgetting up to date and user interface.

  29. well, even though you’re right about what XUL and all, this is no reason to express the way you did (too colorful… saying at least)

    anyhow, I must agree with you with all what you wrote. I’m still using FF and that would keep on going untill I’ll finish to write my script to convert all my FF tags (JSON & HTML) to .rdf which Epiphany supports.

    I’m using Epiphany and Midori (very recommended!)

    you can try Midori here [ http://twotoasts.de/index.php?/pages/midori_summary.html ] and take a look at the following discussion [ http://bbs.archlinux.org/viewtopic.php?id=61027 ] I think that you might find it interesting!

    and I want to emphasize that the FACT that mozilla is NOT letting the users a decent way to import/export the users bookmarks is awaking big quandaries (these just the 2 cents from my side, at least)

    the only things that I need in order to feel a real FREEDOM is a flexible way to control my bookmarks (not Html & Json which are very hard to BackUp, relatively) and a control on JavaScript similarly like NoScript (only a Blacklist instead of white!).

    * in short:
    [1] (a decent) Bookmarking management
    [2] Userscrips Manager (GreaseMonkey like) – & Midori indeed has it ;)
    [3] JavaScrip control (NoScript like)
    [4] AdBlocker (Element control & managing)

    that’s all!

    and if XUL won’t be better OR on “P2″ (as said by June) – there is no reason for me to get together with Mozilla.

    Mozilla’s policies are indeed eccentrics.

    Peace. (and be polite)
    ^_^