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, :only-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.
Thanks for the blog update. Some useful tips on theme development capabilities to be aware of.
Theme authors – Please make sure you themes are RTL compatible. It is not that hard, and will enable more users to use your themes.
Pingback: Firefox 3 新功能指南 | 善用佳软
I just stumbled on your article wile searching for some UserChrome to fix the incorrect look of groupboxes and tabs on Firefox 3/Windows XP.
I realize that Windows XP is no longer the most current windows release it’s but the felling I got was that the work done was “hackish” instead of a “proper” solution to getting color and styles from the current theme wasn’t implemented and instead some hacks were used. At least some kind of classic/themed separation.
After hearing so much about “visual integration” it’s ironic that certaind widgets still don’t look right, the flaws of open source I spose, nobody want’s to do those anoying bits that give that extra polish.
Pingback: Firefox 3新功能指南 » 昨日東風
Pingback: Comunidad argentina de Mozilla » Guía de campo para Firefox 3
One real challenge I found in developing my theme Classic Compact (https://addons.mozilla.org/en-US/firefox/addon/3699) for Firefox 3.0 was making it cross OS compatible from a single JAR file. In particular the change in the way scrollbar stylesheets is handled exposed different and irreconcilable bugs in Mac Firefox and Windows Firefox. The two CSS files used for scrollbars under Firefox 2.0 (xulscrollbars.css and nativescrollbars.css) were replaced with a single scrollbars.css. In theory this would simplify things. Unfortunatly Windows Firefox 3.0 used the old xulscrollbars.css for its new scrollbars.css file while Mac Firefox 3.0 uses the old nativescrollbars.css file for the new scrolbars.css file.
The problem is that if Windows XP is given the old nativescrollbars.css instructions for scrollbars, a black border appears around all of the scrollbars if it is using the “new” cartoonish Windows XP desktop (as opposed to the old Windows 2000 style desktop). On the other hand, if Mac is given the old xulscrollbars.css scrollbar instruction the scrollbars are totally missing.
The only solution I could come up with that still allowed me to deliver a single theme file to all OSes was to develop custom scrollbars. I did file a bug report on this back in March on Bugzilla (see https://bugzilla.mozilla.org/show_bug.cgi?id=423780). Maybe if enough theme developers vote for this bug on Bugzilla this scrollbar issue will get resolved in Firefox 3.1, which would make cross OS theme development much easier.
Well, I’m a 42-yr old internet amateur (but not at the ‘granny’ level). I’ve been meaning to try Firefox (cuz I’ve grown frustrated with IE). So, I downloaded Firefox 3 last night (after it got the Colbert bump)….And I can tell you I am a really, really happy user. (I already ‘get’ why my younger friends have been hounding me to do this.) Looking forward to learning more about the program’s capabilities.
I am considering diving into theme design for Mozilla Firefox 3. Thanks for the post. – Joshua
Pingback: Guía de Campo para Firefox 3 « Peluchito Jr.
Is it possible to convert firefox 2 themes to firefox 3?
Hands on Firefox: not in any automated way, that I know of. The MDC article I linked to has some tips for doing it manually.