One feature that I haven’t mentioned yet is the tool tip feature; tooltips are the ‘helpful’ popups that give you additional information when you hover the mouse pointer over an element on the screen.  For text-only tooltips, you can just add a tooltiptext=" texthere" attribute to almost any element.  For tooltips containing other types of content, you have to use the tooltip element and associate it with the relevant element in the much the same way that labels are associated with controls.  In your working file, add the tooltip element set to one of the buttons and make sure you add the tooltip attribute to the button element that the tooltip is to be associated with:

<button label="I am a button!" tooltip="tooltip1"/>
  <popupset>
    <tooltip id="tooltip1">
      <description value="A tooltip!"/>
    </tooltip>
  </popupset>

Another cool interface element you can create easily is the progress bar; with just a few lines of code, you can have a window that pops up displaying a visual indication of how long a task has left to complete, or evidence that there is activity going on within the application.  The following code will display a window with a progress meter in it:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="progress" title="Progress Meter" width="150" height="150" screenX="50" screenY="100" xmlns="http://
www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <label value="Loading…" />
  <progressmeter mode="undetermined" />
</window>

The mode attribute of the progress meter can be either undetermined, as above, or determined.  With a determined mode, you also need to specify a value in percent of what percentage of the bar is filled.  If you change the above code to read:

<progressmeter mode="determined" value="50%" />

then executed the file, you would see that the progress bar is half filled.  In fact, the value of mode can be anything other than "undetermined" to get this effect.  The next article in this series looks at how to specify the position of elements in a little more detail.