VectorLinux

Please login or register.

Login with username, password and session length
Advanced search  

News:

Visit our home page for VL info. For support and documentation, visit the Vector Linux Knowledge Center or search the Knowledge Center and this Forum using the search box above.

Author Topic: How to replace the Firefox "throbber" with a VL one.  (Read 5361 times)

exeterdad

  • Packager
  • Vectorian
  • ****
  • Posts: 2046
How to replace the Firefox "throbber" with a VL one.
« on: August 27, 2007, 12:19:28 pm »

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
Quote
/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: [Select]
/*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
Quote
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
Quote
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.
Logged

easuter

  • Global Moderator
  • Vectorian
  • *****
  • Posts: 2160
Re: How to replace the Firefox "throbber" with a VL one.
« Reply #1 on: August 28, 2007, 11:57:36 am »

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)
Logged

exeterdad

  • Packager
  • Vectorian
  • ****
  • Posts: 2046
Re: How to replace the Firefox "throbber" with a VL one.
« Reply #2 on: August 28, 2007, 12:19:18 pm »

Of course it's okay!  ;D 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. 
« Last Edit: August 28, 2007, 12:21:35 pm by exeterdad »
Logged

M0E-lnx

  • Administrator
  • Vectorian
  • *****
  • Posts: 3234
Re: How to replace the Firefox "throbber" with a VL one.
« Reply #3 on: August 28, 2007, 01:04:44 pm »

That's crazy!  ;D

incognu

  • Packager
  • Vectorite
  • ****
  • Posts: 256
    • incognu.com
Re: How to replace the Firefox "throbber" with a VL one.
« Reply #4 on: August 29, 2007, 04:47:21 pm »

Of course it's okay!  ;D 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
Logged
Vector Linux 6.0 Light

exeterdad

  • Packager
  • Vectorian
  • ****
  • Posts: 2046
Re: How to replace the Firefox "throbber" with a VL one.
« Reply #5 on: August 29, 2007, 06:12:50 pm »

incognu
Logged

incognu

  • Packager
  • Vectorite
  • ****
  • Posts: 256
    • incognu.com
Re: How to replace the Firefox "throbber" with a VL one.
« Reply #6 on: August 29, 2007, 09:24:49 pm »

Aw, you're making me blush!  ;D
Logged
Vector Linux 6.0 Light

incognu

  • Packager
  • Vectorite
  • ****
  • Posts: 256
    • incognu.com
Re: How to replace the Firefox "throbber" with a VL one.
« Reply #7 on: September 03, 2007, 10:07:54 pm »

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
Logged
Vector Linux 6.0 Light