Customising the Firefox 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!