This is an archived page. It's not actively maintained.

Finding the file to modify

Now that we have a hackable Mozilla, it's time to find the file we want to hack. Mozilla's UI is divided into three layers: the structure, the style, and the behavior. The structure layer identifies the widgets (menus, buttons, etc.) and their position in the UI relative to each other, the style layer defines how the widgets look (size, color, style, etc.) and their overall position (alignment), and the behavior layer specifies how the widgets behave and how users can use them to accomplish their goals. mention the localization layer

(Note: These layers are not completely mutually exclusive. In particular, positioning information can be specified in both the structure layer and the style layer, and some behavior can be partly defined in the style layer.)

We're going to add code to all three UI layers, starting with the structure layer. The structure layer consists of XUL files. XUL, which is short for XML-based User Interface Language (and is pronounced like "Zool"), is an XML-based language specifically designed for describing application interfaces. It contains elements for all common UI widgets (menus, buttons, toolbars, etc.) and many sophisticated ones (trees, browsers, color pickers).

Each window and dialog box in Mozilla is defined by a single XUL file (in some cases other XUL files called overlays contribute portions of another window's structure). To add a tinderbox status icon to Mozilla, we need to find the XUL file that defines the structure of the browser window.

The best way to find a XUL file for a window is to use the DOM Inspector. The DOM Inspector is a tool bundled with Mozilla that allows you to examine the DOM of web pages and XUL windows. To access it, go to the "Tools" menu, select the "Web Development" submenu, then select the "DOM Inspector" item. The DOM Inspector will load in a new window.

In the DOM Inspector window, go to the File menu, select the Inspect a Window submenu, then select the Mozilla browser window item (named after the page currently loaded in the browser). The DOM Inspector will display the URL of the XUL file that defines the Mozilla browser window, which is chrome://navigator/content/navigator.xul.

A chrome URL is a URL used internally by Mozilla to refer to files in the chrome subdirectory of the Mozilla installation directory. Chrome URLs have paths that do not necessarily refer to a precise directory hierarchy. In this case the chrome URL refers to the file located at mozilla-installation-directory/chrome/content/navigator/navigator.xul. [explain further,]