How to show message in Firefox statusbar

Today I've spent bit more time then expected trying to show message in Firefox status bar. (I know that there is no statusbar by default in Firefox 4). The solution was simple, as usual :-):

    document.getElementById("statusbar-display").label = "Your message here";

That is all!

How to add images to menuitem in button.

Lets assume that we have button with menupopup:

<button type="menu" label="Main">
  <menupopup>
    <menuitem id="miHomeId" label="Home Page"/>
    <menuitem id="miAboutId" label="About"/>
    <menuitem id="miContactId" label="Contact"/>
  </menupopup>
</button>

It will look something like this:



And we need to add different icons to each menuitem. The first idea is to use list-style-image attribute.

#miHomeId {
  list-style-image: url("chrome://toolbar/skin/Home.PNG");
}

It is really strange, but it doesn't work. I've tried to find some examples where this problem is solved. But I have found nothing. So, I've found one interesting workaround:

<button type="menu" label="Main">
  <menupopup>
    <menuitem id="miHomeId">
      <img src="chrome://toolbar/skin/Home.PNG" id="imgHomeId"/>
      <label value="Home Page"/>
    </menuitem>
    <menuitem id="miAboutId">
      <img src="chrome://toolbar/skin/About.PNG" id="imgAboutId"/>
      <label value="About"/>
    </menuitem>
    <menuitem id="miContactId">
      <img src="chrome://toolbar/skin/Contact.PNG" id="imgContactId"/>
      <label value="Contact"/>
    </menuitem>
  </menupopup>
</button>

And you just need to specify your images in CSS:

#imgHomeId {
  list-style-image: url("chrome://toolbar/skin/Home.PNG");
}
#imgAboutId {
  list-style-image: url("chrome://toolbar/skin/About.PNG");
}  
#imgContactId {
  list-style-image: url("chrome://toolbar/skin/Contact.PNG");
}

Here is the result: