Question

I’m working on a Firefox extension that creates a menu of bookmarks from data fetched from a server. I’d like to add icons to each menuitem, but I can’t seem to get them to display. I’m creating each menuitem using:

Bookmarks.createMenuItem = function(item) {
    var menuItem = document.createElementNS(Bookmarks.XUL_NS, "menuitem");
    menuItem.setAttribute("label", item.url_title);
    menuItem.setAttribute("oncommand", "Bookmarks.openUrl('" + item.url + "');");
    menuItem.setAttribute("class", "bookmark-menu-item");
    if ( item.favicon ) {
            menuItem.setAttribute("class", menuItem.getAttribute("class") +
                                   " menuitem-iconic");
            menuItem.setAttribute("image", item.favicon);
    }

    return menuItem;
};

The menuitem works just fine except that it doesn’t display the image. I’ve verified the URLs that I’m getting for each image (from item.favicon in the code below) are accessible.

Any idea what’s wrong here? I’m using Firefox 6.0.2.

Answer 1

I’ve picked random extension that has icons in menu items – HttpFox – and there you have something like this:

in XUL file:

<menupopup id="toolsPopup">
    <menu id="hf_menu_HttpFox" 
        class="menu-iconic" 
        label="&browseroverlay.menutools.httpfox.label;" />
</menupopup>

in CSS file:

#hf_appmenu_HttpFox, #hf_menu_HttpFox, #hf_menu_webDeveloper_HttpFox {
    list-style-image: url(chrome://httpfox/skin/globe16.png);
} 

In FoxSplitter it’s the same way.

So basically, if style attribute is allowed for menus, you may change

menuItem.setAttribute("image", item.favicon);

to

menuItem.setAttribute("style", "list-style-image: url(" + item.favicon + ")");

(if item.favicon is the URL), or if style doesn’t work, then create classes for each item.
Hope this helps.