flag of the United Kingdom
URBAN
Mainframe

Customising the Firefox Throbber

Date:  Thu, 2nd-Dec-2004prevnext

Tags: Modding, Open Source, Software


One of the many things I like about about Firefox is the ease with which it can be customised.

Along with the standard "Options" panel and the ever-growing collection of extensions and themes, Firefox can be tweaked in a myriad ways. Users can fine-tune the browser with "about:config", the "chrome" CSS files can be edited and, if one is very ambitious, the ".jar" files can be unpacked and modified.

But how on earth does one change the browser's "throbber"?

The "throbber" is the image, generally located in the upper-right corner of the browser window, that becomes animated when data is being transferred between the browser and a web-server. It provides a visual confirmation that something is happening during the pauses between page request and delivery.

Firefox has used a couple of different throbbers as it has developed. There was a phoenix (when Firefox was known as Firebird), then a sickle (at least I think that's what it was) and also a gecko. Some themes also enjoy custom throbbers.

Inspiration

I came across a neat, animated SGI logo on the Web and my first thought was, "that'd make a great throbber!" But how?

Implementation

Firefox has a small file store (the "profile-directory") on Windows XP [1] under a rather convoluted path that looks something like this:

C:/Documents and Settings/username/Application Data/Mozilla/Firefox/Profiles/default.XXX/

Navigate to this folder and you'll find a sub-folder called chrome. This is where I saved the SGI [2] animation. I also captured the first frame of the animation, made its background transparent and saved it to the same location with a unique filename.

Within the chrome folder, there should also be a file called userChrome.css (if it's not there, just create a new file in a text-editor and save it as userCrome.css). Load userCrome.css into a text-editor and add the following code to the beginning of the file:

/*Throbber Control*/

toolbar #navigator-throbber { list-style-image: url("aSGI.gif") !important; }
toolbar #navigator-throbber[busy="true"] { list-style-image: url("aSGI_anim.gif") !important; }

This CSS tells Firefox to use aSGI.gif as the static throbber (no data being transferred) and aSGI_anim.gif as the "busy" throbber (data transfer in progress).

The code above will influence the throbber under all three of its possible states: "large icons", "small icons" and "text only". It is also possible customise your throbber on a per-state basis. For example, the following CSS will only have an effect on the throbber when "small icons" are in use:

/*Throbber Control*/

toolbar[iconsize="small"] #navigator-throbber { list-style-image: url("aSGI.gif") !important; }
toolbar[iconsize="small"] #navigator-throbber[busy="true"] { list-style-image: url("aSGI_anim.gif") !important; }

Whereas the following code takes effect only when the state is set to "text only":

/*Throbber Control*/

toolbar[mode="text"] #navigator-throbber { list-style-image: url("aSGI.gif") !important; }
toolbar[mode="text"] #navigator-throbber[busy="true"] { list-style-image: url("aSGI_anim.gif") !important; }

These CSS rules can, of course, be mixed and matched to meet your requirements.

Once you've finished with your changes, save the userChrome.css file and restart Firefox. Voilà, a gorgeous new throbber! [3]

Notes

  • Don't make your image or animation too large. 40 x 40 pixels is all that's required.
  • Both the image and the animation should have the same dimensions for best effect.

Footnotes

[1] I presume there is a similar "profile-directory" under other operating systems. However, I have no idea where it is located.
[2] Silicon Graphics, Inc., manufacturer of super-computers and ultra-desirable workstations.
[3] Mine is surely one of the most cosmopolitan desktop PCs in the world. I run Microsoft's Windows XP OS, which is all dressed up to resemble Apple's Mac OS X. I use a Unix-style shell. I run Sun Microsystem's Java and I have a SGI-branded web-browser. All I need to add now is something with a Cray logo!

You can comment on this entry, or read what others have written (4 comments).


W3C VALIDATE XHTML
W3C VALIDATE CSS