• DevTools (more DevTools info because this stuff is all kinds of awesome!)
• Helping Paul with the images and CSS for the Highlighter toolbar
• Specs for Highlighter toolbar and elements: Mac and Windows
• HTML/CSS mockups for toolbars, buttons and breadcrumbs
• Close icon graphics for the Highlighter Bar
• Refined colors for InfoBar and breadcrumbs as well as some Highlighter overlay exploration:
  
  
  
   
• Finished UI-Review and mockups for the Style Inspector
   
• In-Content UI
• Breadcrumbs graphics and HTML/CSS mockup for Blair (bug 664068)
• Updated designs for in-content error and phising pages (bug 676795):
  
  

   

• Conditional Forward Button Styling Mockups for Jared
• Styling in various configurations
• LocationBar results origin
   
• General Theme Refinement
• Pushed a patch to explore updated Places and Bookmarks Toolbar icons (bug 683801)
• Updated icons for switch-to-tab (bug 683390)
   
• More Lion Theme Improvements (Only a few more Lion specific tweaks to go!)
• Patch for prettier Sidebars including Lion specific styles (bug 680256)
• Pushed patch for Lion Specific text-fields to mozilla-inbound: c8cd6f227ead
• Landed new Lion toolbar icons: 2392fc3ad758
• Landed fuzzy Lion back button fix: 1aff514348de
   
• Australis (Theme Refresh)
• Clarified project scope
• Windows XP window frame designs:
  
  
   
• Updated Linux designs to reflect other platforms:
  
  
   
• Laid groundwork for design specs
   
• Other
• Filed bug 683707 and wrote a test-case for -moz-transform: scale*(-1) graphic distortion problems
   

• Updated Windows 7 version of LocationBar results designs
   
• Exploration of named Search Engine button treatment (mostly interactive):
• Animated Button 01
• Animated Button 02
   
• Download Panel Design Specs in HTML/CSS for the great work Paolo is doing on Bug 564934
   
• Download Added Animation ideas (now with CSS Animations!)
• Animate Enlarging Arrow
• Animate Dropping Arrow
   
• Add-ons Dictionary Icons
   
• Lion Theme Improvements
• Markus landed mac-lion-theme metric: Bug 679717
• Patch for improving Lion icons: Bug 679708
• Patch to fix fuzzy large buck button: Bug 679771
• Filed bug for adding texture to additional toolbars: Bug 680247
• Filed bug for updating Lion sidebars: Bug 680256
• Should look closer to this soon:
  
   
• DevTools
• UI-Review and specs for Highlighter InfoBar
• Working on overall design specs for Developer toolbar: bug 676255 and bug 676253
   
• Australis (Theme Refresh)
• Lagging behind on this a bit due to some more immediate stuff. Going to finish up initial designs and populate the Feature page next week.
   

Dark Blue

1024×768,
1152×864,
1280×960,
1280×1024,
1600×900,
1600×1200,

1680×1050,
1920×1080,
1920×1200,
2560×1440
2560×1600

Lighter Blue

1024×768,
1152×864,
1280×960,
1280×1024,
1600×900,
1600×1200,

1680×1050,
1920×1080,
1920×1200,
2560×1440
2560×1600

Embossed Firefox

1024×768,
1152×864,
1280×960,
1280×1024,
1600×900,
1600×1200,

1680×1050,
1920×1080,
1920×1200,
2560×1440
2560×1600

Instead I decided to go through all of the design mockup iterations and make a slideshow.^*

Warning: Lot’s of images! Might take a bit if you have a slow connection

It’s been a long trip from where we started to now. The first mockup I have for what would eventually become Firefox 4 was done in June of 2009 for the then planned Firefox 3.7. The design changed quite a bit from inception to completion. Of course not all aspects of the “final” design made it into Firefox 4.

Where does Firefox visual design go from here? “The Future” is a topic that has been consuming most of my thoughts these days and I plan to write up my thoughts on it soon.

Thanks to everyone who made the visual update for Firefox 4 possible!

^* Slideshow built with http://www.ravelrumba.com/blog/html5-slideshow/ by Rob Flaherty

I considered trying to list all the awesomeness that has happened in the theme space over the last few months. However that would be a very long list indeed!

Instead I am posting some screenshots below of the theme progress to date.
 

Theme Status

In its current state the theme has most of the major bits in place and they now just await tweaks and polish.

In an effort to advance the polish stage I have updated the Timeline/Milestone page of the theme project wikipage. This page now contains a list of bugs that still need to be fixed before Firefox 4. The list is sorted in order of priority and anything that is listed above “Lower priority bugs” is considered required. Anything below that is high priority polish. I am attempting to keep it current with regards to ownership and status to the best of my knowledge.

The list is not comprehensive and there are other outstanding theme bugs that are not listed there. I am trying to keep the scope to required bugs and the most glaring issues that need polish. It is also not a static list. I add new bugs as I find them. If anyone see anything that’s missing please feel free to let me know.

It also contains screenshots/mockups to help reduce ambiguity. They are slightly out of date due to some recent landings and decisions but will be updated shortly.
 

Linux Status

The Linux theme got off to a slow start primarily due to constrained resources but is now picking up steam. We have also had to dial back our plans in certain areas like titlebar drawing because of technical constraints.

Recently the new tab styling landed and new toolbar buttons are in progress. There is also an implementation of the Firefox Button for Linux underway.

This is still an area that could still use some additional help with the current set of bugs as well as future bugs that are likely to crop up.
 

Theme Screenshots Then (early-May) and Now (4b7pre)

What’s Next?

Continue tracking theme progress and working on all polish all the time. Well maybe not all the time. There are still several new features that need design work like the upcoming tab-modal prompts.

Thanks to everyone who has contributed to the new theme work! It has come a long way and what has been accomplished so far is truly amazing.

Update: Jason Fragoso was kind enough to translate this post into Belorussian

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!

Examples of in-content UI already present include session restore, about:config, new add-ons manager, network error pages and phishing/malware warning pages. Future possibilities for integration are things like preferences, the library, home tab, tabcandy and about:firefox.

This creates a lot of various interfaces going into the same conceptual space. I have been exploring ways to visually unify them and establish an “in-content UI” style. There is a lot of flexibility for different things within the style. It could do a variety of nice things and still be easily identifiable as “hey that’s Firefox incontent-ui!” (exclamation point because it’s exciting stuff!).

The goal is to create something that looks appealing, connects the variety of different types of UI, is recognizably in-content UI and can be styled per platform.

Some design notes:

• “Soft” textured background
• Tab and page are all one unified texture
• Drilldown breadcrumb navigation
• Inset style for UI content and outset/floating style for notifications
• Colored location bar based on type of notification

Note: This is not intended to be comprehensive or final.

Additional Note: I turned off the lightbox so these thumbnails link directly to fullsize images.

Preferences

Windows

Mac

Add-ons Manager

Windows

Mac

Network Error/Phishing

Windows

Mac

about:config

Windows

Mac

Session Restore

Windows

Mac

TabCandy

Windows

Mac

Update:

I meant to mention that the Windows versions of the Photoshop files can be found on the SVN server:

http://svn.mozilla.org/design/projects/newtheme/strata/i06/
 
…(Win7)-(Aero)-(InContentUI)-(AboutConfig).psd
…(Win7)-(Aero)-(InContentUI)-(AddonsManagerExtensionSelected).psd
…(Win7)-(Aero)-(InContentUI)-(AddonsManagerExtensionsGrid.psd
…(Win7)-(Aero)-(InContentUI)-(AddonsManagerExtensionsListLarge).psd
…(Win7)-(Aero)-(InContentUI)-(AddonsManagerExtensionsListSmall).psd
…(Win7)-(Aero)-(InContentUI)-(NetError).psd
…(Win7)-(Aero)-(InContentUI)-(PhishingMalware).psd
…(Win7)-(Aero)-(InContentUI)-(PreferencesBase).psd
…(Win7)-(Aero)-(InContentUI)-(PreferencesNetwork).psd
…(Win7)-(Aero)-(InContentUI)-(PreferencesNetworkExceptions).psd
…(Win7)-(Aero)-(InContentUI)-(SessionRestore).psd
…(Win7)-(Aero)-(InContentUI)-(TabCandy-Glass).psd
…(Win7)-(Aero)-(InContentUI)-(TabCandy-Textured).psd

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.

Things you will need: Photoshop

Now that the new ToolbarButton style has landed on Trunk I put together some templates in Photoshop and posted them on the SVN server. These templates will allow someone to make their own glyphs with only a new vector graphic.

The file itself is pretty straight forward. It has a layer named “Base” containing a Vector Mask and some Layer Effects. The “Background(s)” group is for previewing the glyph and should be turned off before saving.

The canvas size is set at 18×18 pixels with the actual glyph taking up between 14×14 and 16×16 with the outer region used for a slight glow and etch. This is an attempt to account for variable backgrounds (e.g. Personas or Glass).

Just select the Mask, grab your Pen or Shape tool and start drawing. You will have to draw in the present Vector Mask and delete its current contents. Apparently you can’t have an empty Vector Mask. You can also copy and paste from Illustrator.

If you lose your layer you can always just create a new Vector Mask on a layer, Load the Win7-Glyph-Styles.asl file in the Styles palette and apply the “Win7GlyphBase” style to your new layer.

You can make various shapes and the Layer Effects do most of the work.

Once you are finished just toggle the visibility of the “Backgrounds(s)” group and select “Save for Web(& Devices)” from the “File” menu to save a transparent PNG of your new button glyph.

You could even resize your image and it will scale nicely with a few Layer Effects tweaks.

Or change the color.

Probably need a special high contrast set.