Firefox context menu item icon - firefox-addon

Question

I am trying to add an icon in context menu but don't know why it is not showing.
Here is the complete code:
chrome.menifest
content xulschoolhello jar:chrome/xulschoolhello.jar!/content/
skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/
locale xulschoolhello en-US jar:chrome/xulschoolhello.jar!/locale/en-US/
overlay chrome://browser/content/browser.xul chrome://xulschoolhello/content/browserOverlay.xul
style chrome://browser/content/browser.xul chrome://xulschoolhello/skin/browserOverlay.css
browserOverlay.xul
<?xml version="1.0"?>
<!DOCTYPE overlay SYSTEM
"chrome://xulschoolhello/locale/browserOverlay.dtd">
<overlay id="xulschoolhello-browser-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
.
.
.
<!-- Context menu additions -->
<popup id="contentAreaContextMenu">
<menuseparator id="ss-context-menu-separator"/>
<menuitem id="ss-context-menu-item" class="menuitem-iconic"
label="click me"
oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);"/>
</popup>
</overlay>
browserOverlay.css
#ss-context-menu-item {
list-style-image: url("ss_16.png");
}
Any idea about problem?

Answer 1

From my tests with my own extension, I think that maybe you have to add a reference to the stylesheet in the overlay, in addition to the one in chrome.manifest. To do this you have to add the following line before the doctype declaration:
<?xml-stylesheet href="chrome://xulschoolhello/skin/browserOverlay.css" type="text/css"?>
If you don't put the file name, leaving only chrome://xulschoolhello/skin/, it should also work, according to the tutorial.