Toolbar bug in themes in Firefox 8 for Mac OS X Lion

Theme developer (and AMO Editor) KLB reported this bug after some discussions we had at MozCamp EU. It was a regression caused by the fix for this other bug, which is just a minor toolbar update for Mac OS X Lion. The culprit bug fix includes the following override:

This breaks themes that try to reference Toolbar.png, since Firefox will look in the different location (in the lion subdirectory). Possible workarounds include using a different file name for the toolbar sprite and change all references in the theme, or adding a duplicate or similar file in the location Firefox expects to find it.

We haven’t decided on any solutions for this problem, but you can follow this bug if you’re interested in the outcome.

And since we’re talking themes, theme developers should read Wladimir’s post about making themes more like overlays and less like overrides. It’s a very interesting topic that was brought up at MozCamp and that I’d like to discuss it more in the future. Having feedback from theme developers is very important to give this idea some traction.

On the topic of alternative ways to build themes, one thing that I’ve been curious about for some time is the ability for a theme to just be a button pack. Especially since Firefox 4 reduced the toolbar buttons down to one graphic (except the urlbar-combined buttons) this made a great deal of sense. It means that changing the toolbarbuttons could be as simple as creating a Persona.

As an example I created this theme: https://addons.mozilla.org/en-US/firefox/addon/override-theme-1/ that uses the override command to replace the default buttons. The upside to this method of theming is that all it requires of the author is the ability to create one graphic in the correct layout, and the install.rdf and chrome.manifest. They don’t have to know anything about CSS or programming of any kind. With some modification to chrome.manifest and a second graphic I could support OSX as well. The downsides of this method are mostly limited to the fact that it’s loaded as a theme and themes are now blocked from using “override”, and Personas are not compatible… loading it as an extension fixes these problems but introduces the problem of accidentally loading this over top of a theme other than the default.

In addition to this method, some authors are using the “style” method to overlay specific files in the default theme (usually browser.css). This method basically acts like an installable userChrome hack and requires !important tags to write over default theme commands. Such themes can be limited to just changing the Toolbar.png graphic or can be just as elaborate as a full theme. You can read about them here: http://forums.mozillazine.org/viewtopic.php?f=18&t=1472225 One author, L.A.R. Grizzly has made several of these “simple” themes that basically just change the toolbar.png graphic. The downside to this method is that changes in the default theme can seriously adversely impact these kinds of themes… specifically the recent changes in button surrounds and the inverted icons created some issues. And again, this kind of theme is basically limited to one platform.

Ideally, Firefox would have a system basically identical to Personas that would allow users to load different toolbarbutton glyphs on-the-fly with no restarts. For this to work to the best effect, the combined urlbar buttons, go button, and the star button should probably be included in toolbar.png so that all of the primary toolbarbuttons could be swapped out with one file. Maybe these could even be bundled with a Persona so the final product would be more like a Chrome theme.

I did something similar to this for my first Brand Thunder product. We did very lightweight theming via an extension that only changed background images, background color, tab colors and toolbar buttons for the main window. Very effective.

We’ve since used to a personas based infrastructure (although allowing more customization then a standard persona)