I’ve been working on a custom Firefox toolbar for a really cool project that I can’t talk about yet.

What I’ve been finding is that the quality of documentation for developers isn’t good, and is both inconsistent and frequently missing important details (or hasn’t been updated to reflect changes).

I’m going to post a few things I’ve learned over the past few days that took far more time to figure out than it should have. Hopefully somebody else will benefit from my wasted time.

1. Closing a toolbar.

The toolbar that I’m working on is quite thick, and takes up a lot of real estate. In order to make it more user friendly, my customer wanted a close button to be incorporated. The custom toolbars that I’ve used in the past didn’t have such a feature, and I couldn’t just look and see what they do.

The key was that the close functionality needed to perform the same command that clicking on the toolbar’s menu item under View -> Toolbars would do – otherwise if it just hides the bar, it would be hard for a user to reopen it later on.

The code that I eventually found is as follows:

var toolbar = document.getElementById(“YOURNAME-Toolbar”);
var visibility = toolbar.collapsed;
setToolbarVisibility(toolbar, visibility);

Note that “YOURNAME-Toolbar” is the unique id of the <toolbar> element in your XUL overlay (that’s not actually obvious, because that element “lives” inside of a <toolbox> element and an <overlay> element. Closing, collapsing or hiding either of those really messes up the toolbar.

I’ve been unable to find documentation on developer.mozilla.org for the setToolbarVisibility function; finding this was painful.

2. Changing the arrow images in an <arrowscrollbox> element

The <arrowscrollbox> element is very useful in a number of circumstances. Unfortunately the arrow icons are sufficiently small that users may not notice them. They’re also too close to the contents of the box by default.

I couldn’t find a single source of documentation for the css styles that target this element. The following took hours of hunting around – and experimentation:

#YOURARROWBOX .autorepeatbutton-up[orient=”horizontal”],
#YOURARROWBOX .autorepeatbutton-down[orient=”horizontal”][chromedir=”rtl”],
#YOURARROWBOX .scrollbutton-up[orient=”horizontal”],
#YOURARROWBOX .scrollbutton-down[orient=”horizontal”][chromedir=”rtl”] {
list-style-image: url(“chrome://ud/skin/scroll_left.png”);
}

#YOURARROWBOX .autorepeatbutton-down[orient=”horizontal”],
#YOURARROWBOX .autorepeatbutton-up[orient=”horizontal”][chromedir=”rtl”],
#YOURARROWBOX .scrollbutton-down[orient=”horizontal”],
#YOURARROWBOX .scrollbutton-up[orient=”horizontal”][chromedir=”rtl”] {
list-style-image: url(“chrome://ud/skin/scroll_right.png”);
}

Note that #YOURARROWBOX is the unique id of the container – if you don’t put an id on it, you could do odd things to the rest of your Firefox theme. It looks like the arrow buttons are implemented something like a bulleted list, in the sense that they use list-style-image to set the image that displays. The urls in this case are internal to your plugin.

Also note that “up” and “down” in this case (horizontal scrollbar) mean left and right. It looks like the same css selectors are used.

3. When in doubt, look at other people’s code

Toolbars are kept in your Firefox profile folder, which is usually (on Windows anyhow) somewhere under [your home]/AppData/Roaming/Mozilla/Firefox/Profiles/[some folder]/extensions/.

The extensions themselves are .XPI files, which are just a renamed ZIP file. You can unzip them pretty easily. There’s a number of text files inside, plus a .JAR file under /chrome. This file is also just a ZIP file, and you can unzip it to grab the plugin code.

The quality of code obviously varies a lot, since these tend to be built by third-party developers. I’ve learned a lot of things by poking around inside other people’s extensions though. If you’re just starting out building extensions (as I am), its a great place to learn.

I’ll keep posting these as I find them. My next step once I’m done with Firefox is to build the same functionality for Internet Explorer. More learning expected there too.