HOWTO: replace the firefox throbber with a rotating firefox logo

[bruenig]

EDIT: January 7, 2007
It has been brought to my attention that there has now been an extension made for this. It is probably easier to use that instead of this and so here is the link.

Nevertheless, if you still wish to do it manually, I will leave up the original HOWTO.

Works on 1.5 and 2.0. Also works in swiftfox.

I stumbled upon this website where some guy created and explained how to replace the throbber icon, that little circle in the top right of the browser that becomes active when loading pages and other times, with this firefox rotating around a globe. I thought it looked pretty cool so I figured I would try to do it in Linux. It took much longer than I thought it would because of seemingly redundant directories and code that didn't work but nevertheless, I got it to work and figured I would put together this little HOWTO.

Note: I will use all exact paths in this tutorial. If you want to use relative paths, go ahead.

First thing you must do is determine your random firefox default directory name. Replace USERNAME with your own.

ls /home/USERNAME/.mozilla/firefox

That should give you an output which includes a directory named with 8 random alphanumeric characters followed by a .default (********.default). Use that in the following commands.

Now you must navigate to the directory where all the action will be taking place.

cd /home/USERNAME/.mozilla/firefox/********.default/chrome

Now download the new gifs for the throbber with wget.

wget http://burntelectrons.org/moz/spinfox/static16.gif http://burntelectrons.org/moz/spinfox/static20.gif http://burntelectrons.org/moz/spinfox/static24.gif http://burntelectrons.org/moz/spinfox/throbber16.gif http://burntelectrons.org/moz/spinfox/throbber20.gif http://burntelectrons.org/moz/spinfox/throbber24.gif

Now you must configure the userChrome.css file. If you are like me, you don't have one so will be creating a userChrome.css file. Either way the command is the same.

gedit /home/USERNAME/.mozilla/firefox/********.default/chrome/userChrome.css

If you created this file (i.e. it is blank) copy the following into the file

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */


/* This changes the throbber
 */
   #navigator-throbber { list-style-image: url("static24.gif") !important; }
   #navigator-throbber[busy="true"] { list-style-image: url("throbber24.gif") !important; opacity: 1 !important}
   #navigator-throbber { min-width: 24px !important; min-height: 24px !important; }

   #navigator-throbber { list-style-image: url("static20.gif") !important; }
   #navigator-throbber[busy="true"] { list-style-image: url("throbber20.gif") !important; opacity: 1 !important }
   #navigator-throbber { min-width: 20px !important; min-height: 20px !important; }

   #navigator-throbber { list-style-image: url("static16.gif") !important; }
   #navigator-throbber[busy="true"] { list-style-image: url("throbber16.gif") !important; opacity: 1 !important}
   #navigator-throbber { min-width: 16px !important; min-height: 16px !important; }

If you have configured it before, just copy the last part of the code.

/* This changes the throbber
 */
   #navigator-throbber { list-style-image: url("static24.gif") !important; }
   #navigator-throbber[busy="true"] { list-style-image: url("throbber24.gif") !important; opacity: 1 !important}
   #navigator-throbber { min-width: 24px !important; min-height: 24px !important; }

   #navigator-throbber { list-style-image: url("static20.gif") !important; }
   #navigator-throbber[busy="true"] { list-style-image: url("throbber20.gif") !important; opacity: 1 !important }
   #navigator-throbber { min-width: 20px !important; min-height: 20px !important; }

   #navigator-throbber { list-style-image: url("static16.gif") !important; }
   #navigator-throbber[busy="true"] { list-style-image: url("throbber16.gif") !important; opacity: 1 !important}
   #navigator-throbber { min-width: 16px !important; min-height: 16px !important; }

Save the file and restart firefox.

[FLeiXiuS]

I think this adds a bit of flare. I liked the improvements. Nice directed how-to, will publish! Thanks!

[skull_leader]

It worked here... man, that is so cool.

[reacocard]

works, and is awesome!

[xolot1]

very nice.

to make this a bit easier, i put together i quick bash script. its attached.

directions:
1. Download tarball To Desktop
2. Extract tarball

tar xf /home/$USER/Desktop/throbber.tar.gz

3. Change the file permissions to allow execution

sudo chmod +x /home/$USER/Desktop/replacefirefoxlogo

4. Run script

/home/$USER/Desktop/./replacefirefoxlogo

5. Restart Firefox




*note*
it changes the default profile only.


its a very simple script, so if you want to inspect it, you should have no problem.

edit:
updated script to correct download directory

edit 2:
script now includes the ubuntu throbber. run the script and it will give you a choice.

[dspivey]

that is very cool. thanks!

[Janux]

Really nice, thanks!
It would be really great if someone made a Ubuntu icon with the logo rotating, thought.

[xolot1]

its still summer vacation for me, maybe ill edit the icons tomorrow... great thinking.

[Nathan Otis]

Xolot,

I copied and pasted code just as you said, but my throbber was replaced with ...

nothing.


What'd I do wrong?
n.

[xolot1]

so i did some quick GIMPing, and came up with these "throbbing" ubuntu logos.
theyre not such high quality right now - but its a draft.
theyre attached below.

if youve already replaced the throbber to the firefox one, you merely have to replace static16.gif, static20.gif, static24.gif, throbber16.gif, throbber20.gif, throbber24.gif in your /home/$USER/.mozilla/firefox/xxxxxxxx.default/chrome directory with the attached images (of the same name).


should you want to switch them back, just redownload the images from the first post, and again replace the images.