Theme changes in Firefox 4

Draft
This page is not complete.

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.

Note: When extracting omni.jar, you may incorrectly get false warnings from some virus protection software. In addition, due to the way the archive is optiimized, some zip utilities don't work with it.

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.

`iconsize` value	Actual add-on toolbar button icon dimensions (assuming correct stylesheet and images)
`small`	`16x16 pixels`
`large`	`24x24 pixels`

Note: For stock buttons, the theme is free to use icons of any size. However, the theme should be designed in such a way that the above add-on button icon sizes fit correctly.

Note: Add-ons always use a 24x24 pixels icon when the button is displayed in the toolbar customization palette.

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:

Toolbar element	ID	Default `iconsize` value
Menu bar	`#toolbar-menubar`	`small`
Navigation bar	`#nav-bar`	`small` or `large` depending on user preference.
Bookmarks toolbar	`#PersonalToolbar`	`small`
Tab bar	`#TabsToolbar`	`small`
Add-on bar	`#addon-bar`	`small`
Custom toolbars	Some other value	`small` or `large` depending on user preference.

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.

CSS property on the `toolbar` element	Value forced on the `iconsize` attribute
`counter-reset:` `largeicons;`	`large`
`counter-reset:` `smallicons;`	`small`

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.

Note: A rule that depends on the user preference cannot be applied to the Add-on Bar because it is not a child of the #navigator-toolbox element. However, the theme can force large icons in the Add-on Bar regardless of the user preference.

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

Note: For more information (and how to package into a jar) consult Creating a Skin for Firefox which still mostly applies. Most likely you must replace all occurences of classic/1.0 in chrome.manifest and install.rdf with some other name.

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.