Index of /~iam/submenu_bug

 Name                    Last modified      Size  Description
 Parent Directory                             -   
 chrome.manifest         10-Apr-2008 14:20  265   
 chrome/                 21-Apr-2008 08:31    -   
 components/             10-Apr-2008 14:20    -   
 install.rdf             10-Apr-2008 14:20  927   
 makefile                21-Apr-2008 08:31  437   
 submenu_bug.xpi         19-Apr-2008 17:28  3.0K

A Warning: Submenus in Firefox extensions!

This is the solution to the conundrum described here. It turns out that doing, dynamically created, submenus in extensions is easy as one would expect, as long as one does not make a very simple mistake. The mistake is not paying close attention to who is supposed to be handling the popupshowing event.

The salient point being "When using nested submenus, make sure to check in the popupshowing event that the event corresponds to the right popup. This is because the popup events bubble so the parent menu will recieve a popupshowing event whenever it opens, or any submenus open." which I snarfed from here.

Viz a viz:

function Submenu_Bug_populate(event){
    var menu = document.getElementById('submenu_bug_btn_popup');
    //without this *simple* guard here, life can be very very frustrating...
    if(event.target == menu){
      while(menu.hasChildNodes()){ menu.removeChild(menu.firstChild);  }
      for(var j = 0; j < 5; j++){
        if(j != 3){
          menu.appendChild(createMenuItem("Choice #" + j, j)); 
        } else {
          var submenu = document.createElement("menu");
          var popup = document.createElement("menupopup");
          popup.appendChild(createMenuItem("Subitem A" + j , j));
          popup.appendChild(createMenuItem("Subitem B" + j , j));
          submenu.setAttribute("label", "Choice #" + j);
          submenu.appendChild(popup);
          menu.appendChild(submenu);
        }
      }
    } 
}


function createMenuItem(label, value){
  var item = document.createElement("menuitem"); 
  item.setAttribute("label", label);
  item.setAttribute("class", "menuitem-iconic");
  item.setAttribute("value", value);
  return item;
}

Namaste!