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:

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.

Dao and Markus have already started to land bugs pertaining to the new theme/ui:

Windows:

• #544999 – New toolbarbutton style for the main window – You may have noticed this on trunk
• #547752 – Adjust toolbarbutton paddings and margins for small and big icon modes

Mac:

• #546874 – New style for the bookmarks bar

Some new theme bugs have been filed

Windows:

• #548027 – Tweak New Toolbar Button Style to Match Designs
• #546259 – enable aero glass for the main window
• #549061 – [Windows] New Style for Tabs

Mac:

• #547787 – New style for the tab bar

Mockup Iterations now on SVN

I posted the mockup Photoshop files to an SVN repository: http://svn.mozilla.org/design/projects/newtheme/

This can be accessed through the web or with an SVN client.