Print

The Future of Mozilla Application Development
Pages: 1, 2

Registering with Mozilla Firebird

The first thing you will probably want is to add your application to the list of extensions in the Firebird Options (Tools->Options menu) window. All that is required for this is one line. In the extension manifest, the main contents.rdf file, add the following to the package description: 

chrome:extension="true"

This tells Firebird to list the program in the list of extensions once it is registered. Here is the full description, which includes some other useful information such as the author, name, project URL, and a description of the extension that appears in the listing: 

  <!-- package information -->
  <RDF:Description about="urn:mozilla:package:xfly"
        chrome:displayName="xFly"
        chrome:author="Frillies"
        chrome:authorURL="http://xfly.mozdev.org/"
        chrome:name="xfly"
        chrome:description="[2003-05-04] Adds xFly application 
           for viewing examples contained in 'Creating 
           Applications with Mozilla' [http://books.mozdev.org]"
        chrome:extension="true"
        chrome:settingsURL="chrome://xfly/content/xflysettings.xul">
  </RDF:Description>

xFly listed as a Firebird Extension
xFly listed as an extension in the Options window

Another new description property is chrome:settingsURL. This enables the 'Settings' button which opens a window, the definition is which is contained in the file pointed to by the property. For most applications, the contents.rdf file resides in the contents/ folder, or wherever you main XUL files are.

Launching Your Extension

There are many different ways that you can launch your application from within Mozilla Firebird. These include via a menu item, or a toolbar button. It is the latter of these two that is discussed here. The toolbars of Mozilla Firebird are highly customizable, much more so than in the Mozilla suite. You can add and remove buttons which represent application functionality via Drag&Drop, switch between text only/text and images/images only, and add new toolbars.

xFly D&D button
xFly D&D button on palette

There are several steps you have to take to get this working. The first thing to do is to create your buttons. Note that to be effective you need to create 2 different size buttons, 20x20px and 32x32px. Firebird is capable of having small and large button icons. Next up is to write the XUL for the button: 

  <toolbarpalette id="BrowserToolbarPalette">
    <toolbarbutton class="toolbarbutton-1" 
                   id="xfly-button" 
                   label="&xflyButton.label;" 
                   oncommand="toxFly();" 
                   tooltiptext="&xflyButton.tooltip;" />
  </toolbarpalette>

The <toolbarbutton> is contained in a <toolbarpalette>, the ID of which (BrowserToolbarPalette) corresponds to the palette that contains the Drag&Drop buttons for the toolbar. The original XUL for this palette lives in the file browser.xul, which is the main window for the Mozilla Firebird application

More modifications are needed to the main contents.rdf file, which as well as having the extension information, it contains the overlay information. More specifically, it contains information on chunks of XUL in files in your JAR file that you want to be added into some of the main Mozilla Firebird application files. So the following is added to the list of files to overlay: 

<RDF:li resource="chrome://browser/content/browser.xul"/>

Then the list of files (in this case the toolbarbutton definition is contained in the file xflyextensionsoverlay.xul) is added to the sequence for this file. What is essentially being instructed is that this is the file that you will be overlaying (the file where the button will be going). 

  <!-- Firebird -->
  <RDF:Seq about="chrome://browser/content/browser.xul">
    <RDF:li>chrome://xfly/content/xflyextensionsoverlay.xul</RDF:li>
  </RDF:Seq>

If you explore fully the manifest file, you will notice a description is still left in to overlay the Mozilla suite. A menuitem definition is contained in xflymenuoverlay_moz.xul, which overlays tasksOverlay.xul -- the file that contains the original 'Tools' menu definition for Mozilla. Once again this illustrates that your extension can be backwards compatible with the Mozilla suite.

Finally, you need to get the styles right for your button, related to the appearance of the image you created. Here is some of the code for the large and small buttons contained in the overlay CSS file, xflyextensionsoverlay.css. 

#xfly-button {
  list-style-image: url("chrome://xfly/skin/images/xflyButton32.png");
}
...
toolbar[iconsize="small"] #xfly-button {
  list-style-image: url("chrome://xfly/skin/images/xflyButton20.png");
}

You will fall at the last hurdle unless you register your stylesheet, which is similar to how you register your overlay XUL file outlined previously, but this time in the skin contents.rdf file. 

  <RDF:Seq about="urn:mozilla:stylesheets">
    <RDF:li resource="chrome://browser/content/browser.xul"/>
    <RDF:li resource="chrome://global/content/customizeToolbar.xul"/>
  </RDF:Seq>

  <RDF:Seq about="chrome://global/content/customizeToolbar.xul">
    <RDF:li>chrome://xfly/skin/xflyextensionsoverlay.css</RDF:li>
  </RDF:Seq>

  <RDF:Seq about="chrome://browser/content/browser.xul">
    <RDF:li>chrome://xfly/skin/xflyextensionsoverlay.css</RDF:li>
  </RDF:Seq>

This convinces the two Firebird application XUL files to recognize the stylesheet that contains the image properties and values for your images. Something we experienced during our testing was that the icon did not appear correctly on the palette, instead it appeared as a group of unrelated icons. It was resolved by deleting your Mozilla Firebird user profile, something that is recommended in the 0.6 release notes. Now everything should be in place, and you can grab your button and move onto one of your Firebird toolbars in the position that you wish.

xFly button on toolbar
xFly button on toolbar

We hope this article has clarified some of the issues raised in the new roadmap, and has given you the information you'll need to create a new Mozilla Firebird extension, or to convert your Mozilla package into one. While the new toolkit is by no means mature, its installation and registration offers a standard mechanism for developers to distribute their Mozilla applications and add-ons. If you are interested in learning more, the following links provide good places to start.

Resources

David Boswell has been involved in the Mozilla community for more than six years. He is also a coauthor of Creating Applications with Mozilla and helped launch mozdev.org.

Brian King is an independent consultant who works with web and open source technologies.

O'Reilly & Associates recently released (September 2002) Creating Applications with Mozilla.

Return to the Mozilla DevCenter.