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.
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 |
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.
#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
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.