How to replace the Firefox "throbber" with a VL one.

[exeterdad]

First of all the subject is a bit misleading as we won't be actually replacing anything.  Just adding a override in our home dir that uses a VL animation rather than the one included with Firefox.  One could actually replace the throbber in the system files by exploding a .jar file, swapping the images, then repacking the jar file again.  But if you screw up...  well then Firefox will be screwed up.

A large part of Firefox (and many Mozilla apps) are merely javascript and .css files.  Most of the browser GUI is programmed like a web page.

Here's the trobber before

And after

Right click this image and save it to /home/you/.mozilla/firefox/xxxxx.default/chrome This static image will be visible above the search bar

 

Right click and save this image to the same location. This will be the animation that plays while a page is loading.

Now, in the same folder create new text file called userChrome.css.  Add this to the file and save it:

Code:

/*Throbber Control*/

toolbar #navigator-throbber { list-style-image: url("VL-static-30x30.gif") !important; }
toolbar #navigator-throbber[busy="true"] { list-style-image: url("VL-animate-30x30.gif") !important; opacity: 1 !important }

That's it!  Just reload Firefox and your done.  Deleting the 3 new files from the chrome dir will restore Firefox back to original if you wish.
The second entry in userChrome.css can be edited to your liking.  If the

opacity: 1 !important

is removed...  the animation will become semi-transparent during load time.  It actually looks bleached out.  This is Firefoxs default.  If you would like that effect to a lesser degree, just increase the number in

opacity: 1

to your liking.

Of course you may use any images you wish ( I should of put more love into the VL one I made). They just have to be in .gif format.  The animated one is a animated .gif of course.  The number of frames doesn't matter.  The size doesn't seem to matter either.  But a larger image swells up the height of the bar that it rests in.

[easuter]

Awesome!

Another addition for the next firefox release (if thats ok with you)

BTW, just remembered, incognu also has something like this for the seamonkey package (a V + globe throbber)

[exeterdad]

Of course it's okay!  But give me some heads up.  I'll work on a segment to add to the packagers build script so the changes are in firefox's system files rather than in the users home directory.

And I would like to work on the globe more.  Since its a round gif, the edges are too jagged (at least on my LCD monitor).  I'm wondering if I should place it on a square black background.  Or would that look a little too Internet Explorer?

Input and ideas would be good here. 

[M0E-lnx]

That's crazy! 

[incognu]

Of course it's okay!  But give me some heads up.  I'll work on a segment to add to the packagers build script so the changes are in firefox's system files rather than in the users home directory.

And I would like to work on the globe more.  Since its a round gif, the edges are too jagged (at least on my LCD monitor).  I'm wondering if I should place it on a square black background.  Or would that look a little too Internet Explorer?

Input and ideas would be good here. 

Hi exeterdad,

Nice work!

Round gifs are a pain because they can't handle partial transparency, thus have jagged edges.

The trick is to use a cheat of a neutral grey colour, just a little larger than the image, so the grey blends with the toolbar background and looks smooth.  The drawback is, that if someone's got a very dark or colourful toolbar, the cheat shows up.  But, imo it's worth it to get a smooth look 90% of the time.

That's what I did with the animated VL SeaMonkey throbbers.  I use png for the single ones, so they have a nice smooth edge without using a cheat background.



the vl throbbers I use in my Nuvola theme: vlthrobbers.tar.bz2

source for a of vl anim throbber (so you can see what I mean): xcf src

[exeterdad]

incognu

[incognu]

Aw, you're making me blush! 

[incognu]

Thought I'd add another little tip about the "cheat"

Ideally, you want it as small  as possible, so it won't show much of a "halo", but just enough larger than the throbber icon to blend the jagged edges away.  For circles, I've had better luck achieving this by starting out with a large circle, and resizing down, then using that behind the throbber frames.  This lets you get a cheat thats only fractionally (a fraction of a pixel) larger than the throbber image itself.  I usually have the throbber image smaller than the canvas, also, to allow room for the cheat.

For example, I might start out with a cheat that's a 114px grey circle in a 128px image, and scale down.

Sometimes too, you can get good results by making a copy of the real throbber layer, then Layer > Colours > Brightness-Contrast, reduce contrast completely to give a grey image without detail; then boost brightness.  Make a few copies of that layer and test by making a gif copy of the image.  This is good to try for non-circle shapes.

Testing is easier if you have a test html page, with background set to something like #c7c7c7