Firefox Context Menu Item Overlay: Why is every Menu Item Showing?

Question

I created an context menu item overlay with

<menupopup id="contentAreaContextMenu" onpopupshowing="XULSchoolChrome.BrowserOverlay.test(event)">
      <menuitem id="thumbnail-show-etes" 
        label="My Label"
        class="menuitem-iconic"
        image="chrome://xulschoolhello/skin/favicon.png"
        oncommand="XULSchoolChrome.BrowserOverlay.injectScript('tap_browser.js');"/>
    </menupopup>

And the function test(event) is

test: function(aEvent) {
        var localName = aEvent.target.triggerNode.localName;
        this.clickOnImage = (localName == "img") ? true : false;
        console.log(localName, ' click on image ', this.clickOnImage);
    }

I don't understand why calling this function will show every menu item?

Solution

I figure out the solution was to change from "onpopupshowing" to "onpopupshown"

 <menupopup id="contentAreaContextMenu" onpopupshown="XULSchoolChrome.BrowserOverlay.test(event)">
          <menuitem id="thumbnail-show-etes" 
            label="My Label"
            class="menuitem-iconic"
            image="chrome://xulschoolhello/skin/favicon.png"
            oncommand="XULSchoolChrome.BrowserOverlay.injectScript('tap_browser.js');"/>
        </menupopup>

Answer 1

I found the solution. It's to change from "onpopupshowing" to "onpopupshown"

 <menupopup id="contentAreaContextMenu" onpopupshown="XULSchoolChrome.BrowserOverlay.test(event)">
          <menuitem id="thumbnail-show-etes" 
            label="My Label"
            class="menuitem-iconic"
            image="chrome://xulschoolhello/skin/favicon.png"
            oncommand="XULSchoolChrome.BrowserOverlay.injectScript('tap_browser.js');"/>
        </menupopup>

Answer 2

change your function to this:

test: function(aEvent) {
var img;
        if(gContextMenu.onImage) {
            img = aEvent.originalTarget
        }
        else if(gContextMenu.hasBGImage && !gContextMenu.isTextSelected) {
            var imgURL = gContextMenu.bgImageURL;
        }

        console.log(img,' click on image ', img);
    }

I am just experimenting