Theme changes in Firefox 4

This article covers changes in Firefox 4 that affect theme developers.

omni.jar

Firefox 4 achieves performance improvements by moving many of its internal parts from being standalone files or sets of JAR files into just one JAR file; this reduces the amount of I/O needed to load Firefox. However, this does impact theme developers, since many of the files that they need to pull out and work with are now in a new place.

In particular, the new file omni.jar contains most of the resources, including the skin. It's also important to note that skin files are now split into two subfolders within the omni.jar file, and you'll need to look in both places to find all the skin resources you need.

/chrome/browser/skin

Contains application-specific skin resource files.

/chrome/toolkit/skin

Contains toolkit skin files.

Controlling the actual icon size used by add-on toolbar buttons

The iconsize attribute of the browser's toolbar elements now has a different default value on each toolbar independently. The value does not necessarily reflect the user preference in the toolbar customization palette anymore. The theme can now override the value by setting a special CSS property on the toolbar.

The iconsize attribute of the toolbox element in the main browser window (#navigator-toolbox) still reflects the user preference in the toolbar customization palette.

Use of the iconsize attribute on toolbar elements

Add-ons use the iconsize attribute to determine which icon they should display when a button is placed in a specific toolbar.

Default values of the iconsize attribute on browser toolbars

If the theme doesn't override the value of the iconsize attribute, the following defaults are used:

Overriding the default values

Themes can override the value of the iconsize attribute on each toolbar by specifying a special value for the counter-reset CSS property on the toolbar itself.

For toolbars in the upper part of the window, the counter-reset property can be set using a CSS rule that is applied depending on the user preference in the toolbar customization palette. To do this, use a CSS rule that depends on the iconsize attribute on the #navigator-toolbox element.

Examples

The default Windows theme wants to force small icons on the navigation bar regardless of the user preference. Thus, it includes this rule in browser.css:

#nav-bar {
  counter-reset: smallicons;
}

To use large icons for add-on buttons in the Bookmarks toolbar when the related user preference is set:

#navigator-toolbox[iconsize="large"] > #PersonalToolbar {
  counter-reset: largeicons;
}

To use large icons everywhere, including the menu bar, regardless of the user preference:

#navigator-toolbox > toolbar, #addon-bar {
  counter-reset: largeicons;
}

Creating a theme that works for Firefox 4 on Mac OS X

Create a new directory (for example, My_Theme). Inside that, create another new directory chrome. Now copy all of the directories from omni.jar mentioned above into it. Then copy all of icon.png, install.rdf and preview.png from <firefox-app-bundle>/Contents/MacOS/extensions/{...} into My_Theme. Finally, you need to create a chrome.manifest file with the contents : 

skin    browser       classic/1.0 chrome/browser/
skin    communicator  classic/1.0 chrome/communicator/
skin    global        classic/1.0 chrome/global/
skin    mozapps       classic/1.0 chrome/mozapps/

This results in the following structure :

/My_Theme/chrome/browser/*
/My_Theme/chrome/communicator/*
/My_Theme/chrome/global/*
/My_Theme/chrome/mozapps/*
/My_Theme/chrome.manifest
/My_Theme/icon.png
/My_Theme/install.rdf
/My_Theme/preview.png

Improving your appearance on Windows

The new -moz-windows-theme media query lets you determine which Windows theme is currently in use; this lets you make your theme adapt to work well with the Windows environment as it's configured.

See also

• Creating a Skin for Firefox
• About omni.jar
• Firefox 4 for developers