Create a menu like in Firebug

Question

I am trying to develop my Firefox addon and I would like to have a menu similar to Firebug, a menu button with an image. Here is what I mean:

I tried to set the image attribute using CSS, but the image never displays.

Anyone have an idea or an example?

Answer 1

The MDN menu-button page provides an example that should work for you in the overlay. Here is an adaptation that can be inserted into your overlay (with a style proposal from Vladimir):

<toolbarbutton type="menu-button" label="" style="list-style-image: url('http://cdn.sstatic.net/stackoverflow/img/favicon.ico')"> <menupopup> <menuitem label="Save This Document"/> <menuitem label="Save All" oncommand="alert('Save All'); event.stopPropagation();"/> </menupopup> </toolbarbutton>