The UI for our extension is an icon in the status bar. To implement this UI, we'll add a statusbarpanel element to the statusbar element in the navigator.xul file.
<statusbar id="status-bar" class="chromeclass-status"
ondragdrop="nsDragAndDrop.drop(event, contentAreaDNDObserver);">
<statusbarpanel id="component-bar"/>
<statusbarpanel id="statusbar-display"
label="&statusText.label;" flex="1"/>
<statusbarpanel class="statusbarpanel-progress">
<progressmeter class="progressmeter-statusbar"
id="statusbar-icon" mode="normal" value="0"/>
</statusbarpanel>
<statusbarpanel class="statusbarpanel-iconic"
id="tinderbox-status" status="none"/>
<statusbarpanel class="statusbarpanel-iconic" id="offline-status"/>
<statusbarpanel class="statusbarpanel-iconic" id="security-button"
onclick="BrowserPageInfo(null, 'securityTab')"/>
</statusbar>
The statusbar XUL element defines a horizontal status bar where informative messages about an application's state can be displayed. It can contain both text messages (i.e. "Done" in Mozilla when a document finishes loading) and graphical messages (f.e. the lock icon in Mozilla that shows whether or not a loaded document was encrypted with SSL).
Status bars comprise a series of panels, each one defined by a statusbarpanel XUL element. Each status bar panel displays a different kind of status information. Graphical panels (like the one we are creating here that displays an icon) are given the statusbarpanel-iconic class so they can be styled accordingly by the CSS stylesheet that defines these elements' appearance.
The status attribute is not part of the XUL definition for the statusbarpanel element, but is used by our extension to store the current tinderbox state. We'll update the value of that attribute each time we retrieve tinderbox's status from the server, and we'll define CSS rules that change the appearance of the icon depending on the value of that attribute. All XUL elements can be given custom attributes in addition to the ones the XUL rendering engine recognizes which get ignored by the engine, so adding this custom attribute does not create any problems or modify the way the widget is displayed (except for the ways we explicitly specify with CSS).