The final icons turned out like this:

Left to Right: Windows, Mac, Linux

This is based on an idea from Alex Faaborg. Instead of just using a plain globe there are red orbital rings(LASERS!) locking onto your position. The red is in contrast to the blue of the globe. Relaying some level of warning that a website is requesting your location.

I also sketched and rendered a few other ideas that didn’t make the cut:

The final result looks like this on geolocation pages:

Once the panel styling is updated it should look more like this:

More notification icons to come in the future!

The New Theme project page has been updated with an extended(and idealized) timeline. I plan on spending much of my time this week getting everything lined up and editing the timeline as necessary and monitoring it going forward.

Mac Theme Patches

Markus has posted some patches for the Mac theme including toolbar buttons, location bar and tabs.

It also works nicely with Personas.

Windows Theme Progress

Dao has landed a patch for new tab styling.

Panel Styles

Last week I did some work on styling panels(specifically notifications) on various platforms. Something I have been meaning to do but was prompted by Gavin’s work on notifications and the need for split button visual styling.

Windows

Everyone on the UX team liked the Glass Border approach. It is consistent with Windows 7 taskbar panels(with the addition of the half-diamond) and feels lighter.

I also did some work on how this could look for panels outside of notifications like the talked about Downloads panel.

Mac

An updated Mac notification panel with split button.

Linux

Ideas for a styling the panels in Linux.

Other Theme Stuff

Designed an edit “tray” that would appear when editing text.

Had some thoughts around indicating a button that would invoke a panel.

Sketched out some of the UX Team’s fullscreen brainstorms.

There are many flavors of Linux with various themes. As well as two major desktop environments along with several other minor ones. All with their own unique style. Even though it’s challenging one really great thing about working on a Linux theme is how amazing these environments are looking now.

As I stated in my post about the Mac theme refresh one of the goals has been a greater cross platform visual consistency. This shouldn’t necessarily come at the expensive of a native look however. For 3.0 a lot of fantastic work was done on making Firefox on Linux use native controls and icons. It would be really nice to balance that with picking up some of the same ideas from the Windows and Mac theme.

Refresh for Firefox 3.7

In addition to theme and UI changes already discussed for Firefox 3.7 and 4.0, there are some proposed Linux specific visual changes:

• Consistent Back/Forward Buttons: Use the same back/forward shape as on the other platforms. The back button would use the same texture as the other buttons however it would be round and larger.
• Buttons vs Icons: Switching to a button+glyph style for the toolbar items. This would be instead of the more representational style that is widely used. It also is a deviation from the common system standard of having icons and then a button shape on hover.
• Curvier Tab Shape: Match the tabs to the proposed tabs on Windows and Mac while keeping the native texture and color.
• Removing Toolbar Separators: Goes a ways towards reducing visual complexity as well as external consistency.

Alternative Icon Treatment

Another idea would be to include the back/forward shape but use traditional icons instead of glyphs everywhere else. However this looks a little strange and doesn’t meet the goal of cross platform consistency.

How Would This Look with Various System Themes

As I talked about above there are a wide variety of distinct themes available for Linux. The most ideal approach to this would be to use the native button style, theme specific icons and replace the glyphs based on color scheme.

Some examples of how this could work out:

Refresh for Firefox 4.0

As discussed perviously a goal for 4.0 is to reduce the UI footprint of Firefox. Adding tabs to the top of the UI accomplishes this (along with other things).

Please keep in mind this is all customizable.

For this configuration the menubar would be hidden and Page and Tools menu buttons would be aded to the toolbar. The titlebar would extend down behind the tabs.

Ongoing Discussion and Feedback

If you would like to leave feedback on these designs or just follow along there are few places to do that. You can comment on this blog or visit the Linux Theme Refresh wiki page.