Software is hard

• Published:April 10th, 2008
• Comments:8 Comments
• Category:Extending Firebug Tutorial

I have finally got some time to write another piece of the tutorial. This time I’ll explain how to use an Options menu that is available in every Firebug’s panel. This menu is located at the right side of a tab-bar.

See an example of Console Options menu from Firebug 1.1

The main purpose of the menu (as the name clearly indicates) is to expose panel-specific options (preferences), so the user can access them and change theirs value if necessary.

Simple example

The menu is already built within Firbug’s UI. So, all we have to do is to provide a content. This is done by getOptionsMenuItems method that must be implemented in the specific panel object (i.e. HelloWorldPanel in our case).

This method is called by the framework when the user clicks on the Options menu - just before it’s displayed. Each object returned in the array represents a menu-item. Following properties are supported.

*) This is only for strings coming from firebug.properties file. Should be always set to true for third party strings.

Real options

Let’s develop more useful example that uses the menu for real options (preferences). First of all, we’ll define default preferences ...

... and put them into a prefs.js file, which is located at proper location within extension's directory structure.

helloworld@janodvarko.cz/
    chrome/
        content/
            helloworld/
                helloWorld.xul
                helloWorld.js
    defaults/
        preferences/
            prefs.js
    chrome.manifest
    install.rdf

Now, see new implementation of the getOptionsMenuItems method, which displays both new preferences and makes possible to change theirs values.

As you can see, there is a new helper method optionMenu that creates a menu-item object. The method takes two parameters: a label and a preference name.

Notice that menu-item-separator is created just with simple "-" string.

The most interesting thing is probably the implementation of optionMenu method. First of all, we are utilizing get & setPref methods from Firebug namespace:

This example considers Firebug 1.2 (these methods are different in 1.1).

The usage is quite obvious. The first parameter is used to specify preference domain, the second specifies preference name and the third - new preference value. The domain should be "extensions.firebug" (there is a constant Firebug.prefDomain for that).

Further, there is a new bindFixed method. Could sound familiar to you as this pattern is often used in JS libraries (e.g. Prototype). In this example, bindFixed is used to bind a method (Firebug.setPref) to a handler (command), with three parameters (Firebug.prefDomain, option, !value).

The source code is worth a thousands words, so here is how the method looks like:

Finally, if you want to test it, don't forget to open the about:config page in order to see how the preference is changing.

The extension can be downloaded here (you need Firebug 1.2 ).