Use All Five, Inc.

We’ve been working rigorously on a startup that needed a Firefox plugin to accomplish all of the goals for the site. After learning that Firefox extensions are built primarily of Javascript, CSS and a markup language similar to that of Flex, called XUL, we decided we had the skill-set to build it in-house.

There were a lot of new things we had to learn, and after many hours of production we realized we had a lot of tricks that extension developers might not be aware of. We make sure the functionality is perfect, but always focus a lot of time on UI design.

I’ve come up with a list of a few UI things we discovered with firefox that really give a lot of control to the designer, so the plugin doesn’t have to look stale and generic.

Better looking preferences, using a list instead of tabs to navigate.

Initially we build our preferences using the tabbox. This worked, but seemed cumbersome for the user. Then we looked at some of our favorite plugins — we found that the web developer toolbar does a great job with their preferences.

The web developer toolbar uses a listbox rather than tabs for their preference navigation.

They use a listbox that updates an iFrame to hold the preference pane with a little bit of javascript. To make this happen, you’ll need to get your XML to look something like this (you’ll have to do your positioning and wrap it in boxes on your own):

1
2
3
4
5
6

 <listbox id="options-preference-list" onselect="changePreference(this)">
     <listitem class="listitem-iconic" selected="true" image="chrome://yourplugin/skin/options/your-icon.png" label="Account" value="chrome://yourplugin/content/options/account.xul" />
     <listitem class="listitem-iconic" selected="true" image="chrome://yourplugin/skin/options/your-icon.png" label="Application" value="chrome://yourplugin/content/options/application.xul" />
     <listitem class="listitem-iconic" selected="true" image="chrome://yourplugin/skin/options/your-icon.png" label="Settings" value="chrome://yourplugin/content/options/settings.xul" />
 </listbox>
 <iframe flex="1" id="options-iframe" src="chrome://yourplugin/content/options/account.xul" />

Then the Javascript is simply updates the frame with the selected listitem’s src attribute:

1
2
3
4

function changePreference(prefencePage)
{
    document.getElementById("options-iframe").setAttribute("src", prefencePage.selectedItem.value);
}

Styling the selected listitem background color

After we created our list, we needed to make it look better. We had no use for the default blue. There’s a simple css trick to adjust this:

1
2
3

listitem[selected="true"][current="true"] {
	background-color: #057ca0;
}

This makes the selected and the current states have a blue background. You can add other properties, such as color and what not, but the [selected="true"][current="true"] is what’s important.

Communication between windows

We created a simple Enable/Disable button to allow the user to start and stop the plugin. This would turn a preference to either true/false. The problem was that if there was another Firefox window running, it wouldn’t be smart enough to know if the plugin changed. A simple fix was to make a timer check to see if the preference has changed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

checkPrefs: function()
{
    //run the button check function
    this.fixEnableButtons();
    //update the scope (since this is in a bigger object)
    var that = this;
    //start the timer, and run this function on time up
    var prefTimer = setTimeout(function(){that.checkPrefs();},500);	
},
 
fixEnableButtons: function()
{
    //grab the icon xul dom elements
    var enablePlugin = document.getElementById('sbEnable'); 
    var disablePlugin = document.getElementById('sbDisable'); 
 
    //check the preference and update accordingly
    if(yourplugin.prefs.getBoolPref("isEnabled"))
    {
    	enablePlugin.style.display = "none";
    	disablePlugin.style.display = "block";
    }
    else
    {
    	enablePlugin.style.display = "block";
    	disablePlugin.style.display = "none";
    }
}

Detect tab change

There’s a quick and easy way to check to see which tab your window is on. All you need to do is a listener on the gBrowser in your js:

1

gBrowser.tabContainer.addEventListener("TabSelect", function(e) { onTabChange();}, false);

Anything can be styled

Firefox gives you 100% control to customize how all of the XUL items look, therefore there aren’t any excuses why your extensions don’t have to look dull!

For further reference, here are bookmarks of Firefox links:

XUL Reference – this will be your best friend.
How to build a Firefox extension
Getting started with extension development
Firefox/Thunderbird Extension Wizard – this will generate a base template to work off of, as well as a unix file to compile it. It’s pretty awesome.
Let’s build an extension — Mozilla’s guide to building firefox extensions.
Dialogs and Prompts – excellent overview on how dialogs and prompts work. Most plugins consist of dialogs, so it’s essential to read over this.