Gavin’s blog

Firefox 3 is quickly nearing release, and shaver has prompted me to exercise my blog-posting muscles and post about changes relevant to Firefox theme developers. Alex Faaborg has already done a great job explaining the goals of the new default Firefox 3 themes (with screenshots!). I wanted to dive in a bit further into the details of the platform changes relevant to theme developers looking to update or create new themes for Firefox 3.

A large part of Firefox 3 theme work on Windows was making it possible to give Firefox a platform native look on both Vista and XP. In order to allow a given Firefox build to change it’s appearance based on the version of Windows it was running on, changes were made to our chrome registration code to allow selecting different theme packages at run-time based on operating system version. This functionality is also available to theme developers, and isn’t specific to Windows – more details can be found on MDC’s chrome registration page.

Windows theme developers might also want to make use of the new ::-moz-system-metric(windows-default-theme) pseudo-class, which allows different styling based on whether the user is currently using one of the default Windows themes (Luna/Royale/Zune/Aero, not including Classic). This feature was added to allow the Firefox 3 themes to use hard-coded colors not available in the system color set, without negatively affecting third party system themes that might specify different clashing colors. This pseudo-class therefore allows a fallback to potentially less-appealing, but more compatible, system colors for non-default themes.

Firefox 3′s layout engine, Gecko 1.9, has also received many fixes that are likely to be useful for theme developers:

• David Baron‘s patch in bug 401291 made several improvements to dynamic selector matching, which means that matching of selectors that include pseudo-classes like :first-child, nly-child, and :last-child will now be updated correctly when the DOM changes. Similar fixes were made to the :empty pseudo-class and the “+” combinator, and support was added for the “~” combinator (see CSS3 for more details).
• Support was added for Animated PNG, which allows animation with 8-bit transparency. The Firefox throbber is an APNG image, for example.
• Thanks to Cairo, Gecko 1.9 supports rgba and hsla colors in CSS, which allows specifying an alpha channel in CSS colors, to allow translucency. The Firefox themes use this in several different places for better integration with platform native colors.
• Another win from Cairo is that border radii drawn using -moz-border-radius are now anti-aliased, which improves their appearance (bug 16380).
• On Mac, Gecko now supports transparent windows, thanks to work from Colin Barrett and Håkan Waara (bug 307204). This brings Mac up to par with Windows (Linux still doesn’t support partial transparency).
• On Windows, new -moz-appearance values have been introduced that map to Vista toolbar appearances (-moz-win-browsertabbar-toolbox, -moz-win-communications-toolbox, -moz-win-media-toolbox). Also new is support for system color values for “communications text” and “media text” (-moz-win-communicationstext, -moz-win-mediatext).

Lastly, and perhaps most importantly, I wanted to encourage theme developers to check out Themes changes in Firefox 3 on MDC. It’s not a complete guide quite yet, but it already contains some great tips to help you update your theme for Firefox 3, and it’s a great place for theme developers to share information about common pitfalls.