XUL Tools and What They Mean

by Ian Oeschger

It doesn't make any difference how cool your toolbox is if you don't know the names and functions of its contents. XUL (pronounced "zule") is a rich environment for cross-platform development within the Mozilla project. In this article we're going to learn a little bit about the various XUL tools and discuss their use in the simplist terms possible.

I selected items for this group because they seemed to be either shrouded in mystery, misused as concepts or terms, or underestimated according to their role in XUL development. In contrast to the Mozilla Jargon File, this article describes items of specific interest to the web or content developer looking to establish a context for understanding Mozilla's new technologies -- and in particular Mozilla's XML-based User Interface Language, XUL.


Some of the most powerful and frequently misunderstood features of XUL and the Mozilla browser have to do with chrome. The term chrome is used in different contexts to mean different things. In general, chrome refers to a XUL interface and all of its supporting files; chrome means the XUL content and structure, plus the CSS skin, plus whatever localization and platform-specific files are part of that XUL interface. By contrast, the skin is just the CSS and referenced graphics for a XUL file, the localization strings are just a Document Type Definition (DTD), and the content is just the XUL.

Related Articles:

Mozilla as an Application Virtual Machine

How to Change Your Look With Mozilla Skins

The Chrome URL

This concept of a chrome as an integrated, dynamic thing in some way divorced from the "appcore" is realized in the use of the chrome URL to point to chunks of XUL and their related files. The chrome URL, which appears in place of the HTTP URL in pointers like the following global skin-processing instruction:

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

specifies a chrome to be loaded by the Gecko rendering engine. In the example above, the chrome is simply a skin file to be loaded into the XUL file, but the chrome can also be used to load whole chromes, as when a menu item in one window brings up a new chrome:

  value="Mozilla Help" 
            '_blank', 'chrome,all,dialog=no')" />

In this example, the chrome URL is being used to point to a chrome within the package hierarchy of the Mozilla application. A Help chrome defined in mozilla/bin/chrome/help/ is being invoked from the Help menu. Note that when no file name is specified after the chrome directory path, a file name with the same name as the package is assumed. In other words, a chrome URL like the global pointer above picks up a file called global.css, and the help pointer above could also be written as 'chrome://help/content', because the name of the package itself is "help."

Viewing Chromes Other Than Mozilla's

There is a special flag you can use to start Mozilla with some chrome other than the default. When you invoke Mozilla from the command line with the -chrome flag, you can specify a chrome just as you would in the previous example:

mozilla -chrome chrome://help/content/help.xul

brings up the help package mentioned in the previous example as a standalone chrome. This special option allows you to create and access chromes independent of the Mozilla browser and begins to suggest some possibilities for XUL-as-platform beyond the simple restyling of the browser.

Pages: 1, 2, 3

Next Pagearrow