Now that we have defined a panel in which to display an icon, we use CSS to specify which icon to display. For this we have to first create four icons, one for each tinderbox state (none, success, test failed, and busted), then create a set of CSS rules that displays the icon corresponding to the current tinderbox state:

statusbarpanel#tinderbox-status {
  list-style-image: url("chrome://navigator/content/tb-nostatus.png");
}

statusbarpanel#tinderbox-status[status="success"] {
  list-style-image: url("chrome://navigator/content/tb-success.png");
}

statusbarpanel#tinderbox-status[status="testfailed"] {
  list-style-image: url("chrome://navigator/content/tb-testfailed.png");
}

statusbarpanel#tinderbox-status[status="busted"] {
  list-style-image: url("chrome://navigator/content/tb-busted.png");
}

Mozilla can have multiple sets of stylesheets that govern its appearance, and we don't want to have to add these rules to each set (and have our extension break when a new set gets installed), so we'll put this stylesheet in a file called tinderstatus.css in the same directory as navigator.xul and reference it at the top of that file right under the global stylesheet reference:

<?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?>
<?xml-stylesheet
      href="chrome://navigator/content/tinderstatus.css"
      type="text/css"?>

Our CSS rules use the list-style-image property to define an image to appear when our status bar panel, identified by its id attribute, has a given value for its status attribute. There is one rule for each possible tinderbox state.

Make your own icons for the four states or use the following icons: no status , success , test failed and busted .

If you restart Mozilla now you should see the "no status" icon appear in the browser's status bar.