XUL Tools and What They Mean
Pages: 1, 2, 3

Package

A package is in some ways like a chrome, but it is specific to the Mozilla architecture. A package is a chunk of interface code that sits in a particular place within Mozilla's package hierarchy. Like a chrome, that chunk usually contains XUL content, CSS and graphic skin information, localization strings, and maybe some platform-specific code. The navigator is a package defined in mozilla/bin/chrome/navigator, the mail/news component is a package in mozilla/bin/chrome/mailnews/, and so on. Each package directory typically has three subdirectories, content, skin, and locale, in which the XUL, CSS, and localization information are defined, respectively:

navigator/
   content/
      default/
          navigator.xul
          ...
   skin/
        default/
          navigator.css
          nav-icon.gif
          ...
   locale/
        US-en/
          navigator.dtd

The default directory underneath each of these main package subdirectories is assumed in the chrome URL (for example, chrome://help/content/help.xul does not include a default directory as part of the URL, though that directory exists in the actual structure). When you create different chrome for a package, you can create a subdirectory underneath content whose contents are loaded instead of default. For example, if you want to create a different skin for the navigator package, you can create a subdirectory underneath navigator/skin/ whose contents will be loaded instead of default's. So the following structure obtains:

navigator/
   content/
      default/
          navigator.xul
          ...
   skin/
        default/
          navigator.css
          nav-icon.gif
          ...
        myNewSkin/
          newskin.css
          newgifs.gif
          ...
   locale/
        US-en/
          navigator.dtd

To load chrome information stored in a new package directory like this, you can use the following chrome URL:

which loads the graphics in that subdirectory as needed.

Skin

The skin is the CSS and graphics that make up the look or presentation of XUL. XUL itself contains very little provision for how widgets are to be presented in the interface. Even prior to the skinning that takes place with the global skin, which is loaded in almost every XUL file you see in Mozilla (and whose absence from your own XUL files can make your work look strange, senseless, or invisible altogether), a xul.css file is loaded that provides some very basic presentational information for the widgets in the toolkit. So CSS is a lot of what makes XUL XUL, especially with the advent of CSS2 and its new positioning capabilities.

Skinning is most often brought up in the context of dynamic changes to the overall look of an application. Though this is not yet in the browser, very soon it will be possible to change the look of a whole application dynamically, but only to the extent that the skin is actually defined in the main global.css, or global skin. When you create styles in <style> tags, as style attributes for individual elements, or in custom CSS files, you break the ability of Gecko to skin the application to which your XUL belongs.