Firebug icons

June 24th, 2008 § 6 comments

Since I recently upgraded Firefox to version 3, I updated my Firebug install to version 1.2 Beta. One of the first things I noticed was that the little icon in the status bar had changed from a checkmark (or a grey slash when disabled) to the little insect icon (it’s grey when disabled, and colour when enabled).
new firebug statusbar icon, disabled

I don’t mind seeing the Firebug icon occasionally (like when the Firebug panel is open), but I find it a bit distracting and, yes, disturbing to have that little bug always onscreen. Oddly, I never found Safari’s “report bug” button distracting in the same wayโ€”perhaps it’s because the Safari bug icon is more abstract than the more finely detailed Firebug icon. (Although I admit that looking at these two screenshots side by side, there doesn’t seem to be much of an obvious difference!)
safari\'s report bug button

In any case, I decided to create my own status bar icon for the new Firebug. As you can see, my icons are very abstract, to get away from the creepy-crawliness of it all. The six legs are represented by six stubby horizontal lines, and the body has become a sphere.

my firebug icon (disabled) and my firebug icon (enabled)

If you want to install these alternate icons yourself, here is what you’ll need to do:

  1. Download the Firebug 1.2 Beta XPI file from https://addons.mozilla.org/en-US/firefox/addon/1843 (right-click [or CTRL-click on a Mac] on the “Install Now” button and choose “Save Link As…”)
  2. Change the file’s .XPI extension to .ZIP
  3. Extract the contents of the ZIP file into a new folder
  4. Download the two icon files: firebug16.png and firebug-gray-16.png
  5. Copy the two PNG files into the folder skin/classic. When prompted if you want to replace the existing files, say “Yes”
  6. Zip the folder into a new archive (for example, you might call it firebug-1.2.0b3-myicons-fx.zip). Make sure that the directory hierarchy of the archive is the same as the original (i.e. the top level includes the files chrome.manifest, intall.rdf, etc)
  7. Change the ZIP file’s extension to .XPI
  8. In Firefox, open the Add-Ons window
  9. Drag your customized XPI file from your Explorer/Finder window into the Add-Ons window
  10. Click “Install” in the dialog box
  11. Restart Firefox!

If all goes well, you will no longer have a creepy-crawly bug in your status bar :)

Tagged ,

§ 6 Responses to Firebug icons"

  • Brian says:

    Dude, I really like those alternative icons. I probably wouldn’t have thought too much of the new icon if you hadn’t pointed it out, but I definitely agree now that you have.

  • uberfuzzy says:

    wanna save some work? unless you need that xpi for reinstall later (which will be a pain if/when they update firebug, you’ll have to re-icon it again), you can just drop your nice little icons inside the same skin/classic folder inside the extensions install folder under your firefox profile (google how to find yours)

  • bunnyhero says:

    Oh, cool! Thanks for the tip, uberfuzzy! I didn’t know you could do that :D

  • […] – bookmarked by 2 members originally found by RFSharpe on 2008-08-06 Firebug icons http://www.bunnyhero.org/2008/06/24/firebug-icons/ – bookmarked by 3 members originally found by […]

  • It’s actually kinda cool, although I hate cockroaches :D

    Thank goodness that icon doesn’t crawl on your screen lol

  • Chun says:

    Thank you very much for this fixer. I am extremely snippy about my desktop being clean, and having an insect like it’s been dead in the corner during all browsing was uncomfortable.

What's this?

You are currently reading Firebug icons at bunnyhero dev.

meta