Menu Close

XUL Notes

Firefox 1.5 has been released. As a result XUL is cool again. Having dealt with XUL in Mozilla 1.4 through 1.7, I know it has its place on medium-sized projects. It will be interesting to see what happens with this.

A little XUL background

XUL is a javascript/DOM/CSS platform. Basically what the mozilla team did is the following:

  1. They added to the javascript interpreter the capability to talk to the C-written internal browser objects directly (XPCOM), when the javascript is not running from the web, as well as a security model through which javascript can ask for permission to use XPCOM on specific objects. Javascript in a local machine can run without permission restrictions.
  2. They then reimplemented the browser on top of this javascript interpreter and XPCOM. I’m oversimplying, but the C parts of mozilla nowadays are just a rendering engine, a javascript interpreter and a DOM object model. All of the customer-facing code (everything you see on your screen) is driven via javascript.
  3. They created DOM element wrappers for all the widgets in their application widget library, even widgets that are not part of the HTML standard (trees, dialogs, etc). Defining colors and styles is done through CSS. The resulting XML syntax is called XUL. The collection of XUL and Javascript is sometimes called a “chrome application”. When you start firefox itself, you’re basically running the engine and “navigating” to chrome://browser/content/browser.xul (clicking only works on Firefox). Type this into your browser bar and check it out. There’s a list of available “stock” chrome URLs to examine in Mozillazine.

The XUL syntax can be extended. In essence, you can create your own DOM widgets by using a part of XUL called XBL, which defines a XUL collection as a tag and provides methods and properties in embedded javascript. The end result of this is the ability to create reusable UI components. The component “registry” (knowing what components are available to which applications) is achieved through extensions to CSS.

Scripted Applications

So now that we understand how Javascript is structured, you can start to see what it may be adequate for.

Disclaimer: Just like people, languages grow to become better, and continuously reinvent themselves. This writing is what I think about this language as of 2005, having enjoyed its best features and suffered through its worst issues for a while. This may become less relevant as people address the problems.

Writing software in XUL is fun. Testing and debugging them, not so much. One of the reasons scripted applications are enjoying a bit of a revival lately is their community’s embracing of test-first approach. With a strong testing culture, something that breaks at runtime is not so bad because the automated verification test should catch it. Having said that, mozilla XUL developers as a whole definitely don’t have a test-first approach.

Don’t fall on this trap. You can and should add automated tests to your XUL. JSUnit works somewhat – it will be your friend, and it will influence your OO design if you write the tests as you write the code, making maintenance down the line a lot easier. I wonder if Selenium can be used to test XUL (they can test HTML and javascript, so I don’t see why it wouldn’t be useful for chrome URLs).

Learning Curve

Remember XUL was implemented using web standards. If you’re not a web developer already, be prepared for a steep learning curve. If you are familiar with writing complex web applications, still make sure you brush up on DOM, JavaScript, XML, CSS. CSS in particular is used to a much greater extent than I was expecting.