Firefox – Thin Light

DOMContentLoaded and Greasemonkey

A very common purpose of Greasemonkey scripts is modifying the DOM structure of the document, mostly adding something new.

I’ve written several scripts before and have been doing such modifications in the “load” event handler, as in this script. The problem is that “load” event is fired after all images on the page have been downloaded completely, so users may suffer a great delay to see the changes occur if there’re many images.

jQuery users know that jQuery has a function “ready”. It won’t wait for the images to load. We are writing Greasemonkey scripts, so we only care about Firefox. Firefox has a “DOMContentLoaded” event explained in detail here.

Fired on a Window object when a document’s DOM content is finished loaded, but unlike “load”, does not wait till all images are loaded. Used for example by GreaseMonkey to sneak in to alter pages before they are displayed.

So when writing my last script I tried to rely on this event:

window.addEventListener('DOMContentLoaded', function(e) {
	...
}, false);

But the codes in the handler were not executed.

I was confused and did some searching. Finally I got this page saying that “the code in a Greasemonkey user script gets invoked when the DOMContentLoaded event fires”. That explains all. The “DOMContentLoaded” event was already fired so the codes never had a chance to get executed.

The solution, of course, is pulling the handler codes out of the wrapper. If your script doesn’t really rely on the “load” event, don’t put them into its handler because there may be a obvious delay.

Google Reader Unread Count

Gmail is my Firefox home page and is always open as long as Firefox is there. So I wrote this Greasemonkey script to show Google Reader’s unread count in the nav-bar of Gmail. A good place, isn’t it?

The script checks for the unread count every 8 minutes. But after you click the “Reader” link, it checks the count 1 minute later and extend the interval by 1 minute after every check until the interval returns to 8 minutes again.

Install Greasemonkey，and then install this script。

Page on userscripts.org.

Fading Image With Firefox 3

As you may noticed, when you drag some selected text or an image, Firefox 3 displays the “ghost” with fading effect. This feature can be used to create a fading image.

First choose your image to fade. If it’s on your disk, just drag it into a Firefox tab. Press Ctrl+T to open a new tab as the fading image background (white).

Open the tab containing the image, and drag it onto the blank tab in tab bar. This should open the blank tab. Continue dragging the image into the blank tab, and press Print Screen before releasing the mouse button. Then you can simply use mspaint to crop the proper area.

That’s fairly easy. No “advanced” tools involved.

Sample image:

Fading produced by Firefox 3:

Note that Firefox will fade the image from the drag “handle” point. So choose the correct point to drag.

Of course the function is very limited for producing such effects. But sometimes this may be handy and useful.

Remove Dotted Link Borders in Firefox

When you use a HTML link (“<a>” tag) to implement a drop-down list or menu, you’ll notice that there are annoying dotted borders around the link after it’s clicked in Firefox. We can just ignore this for most of the times but sometimes it affects the look and feel of the site. Two screen shots from Youtube and Yahoo!:

Youtube link border example Yahoo link border

This can be even worse (Digg front page):

Digg Link Border

OK. This is fake :) . Digg did a perfect drop-down menu, though they’re ignoring something. I removed some CSS rules using Firebug and got this effect. It’s ugly, isn’t it?

The Cause

When a link is clicked, it gets the focus. Firefox adds dotted borders to links that have focus to remind the users.

The Solution

To avoid the border, add this CSS rule to your page:

a { outline: none; }

This piece of code is similar to the code I removed from Digg to get the screen shot above.

In fact this is a common problem asked by many developers. For more information, search for “firefox link border“. Many authors wrote good articles on this topic.

Update – This can be seen on every WordPress blog login page (click to enlarge):

Readonly Text Input Background Color in Firefox

The other day I was stuck when trying to make the background-color of a readonly text input white in Firefox.

Today lots of sites are using readonly text inputs to carry out some urls for propagation or some code snippets for embedding in your own pages. For example, every Youtube video has such a input field just on the right of it. When you click on it, the text gets selected and you can press Ctrl+C to copy it to the clipboard.

The code is like this:

<input type="text" readonly="readonly" value="some read only text..." onclick="this.select()" />

and the rendered output:

In all other major browsers it looks like a normal text input. But in Firefox, the background color is made gray (#D6D5D9, actually), maybe emphasizing the difference. There are always cases when we want to make it white. But when added “background-color:#FFFFFF;”, it showed no difference. At that time I thought I couldn’t change the background color.

But soon I found the “white” text input when watching this video (I love the puppy!). After inspecting the code with Firebug I found it was “border:1px solid #D2D2D0” who did the trick. Adding it to the example code above:

Then I found that the background color is ok with any color except #FFFFFF. For example, setting it to “#FEFEFE” (Almost white. And note the default border style is “outset”):

Weird, isn’t it? I don’t know if it’s a bug or “feature”.