Grouping Context Menu items together

Question

In Firefox Bootstrapped Addons, Context Menu items have to be manually inserted/removed, enabled/disabled and hide/unhide.

I was wondering if it was possible to group them together into one element (as children of that element) so that the group could be handled as one ie the parent node could be removed thus removing all its children.

For example:

<some parent element for grouping>
    <menuseparator/>
    <menuitem .... />
    <menuitem .... />
    <menuseparator/>
    <menuitem .... />
    <menuseparator/>
</some parent element for grouping>

I tried putting them inside <menu> ... </menu> but that indented the menuitem

Update:
I noticed Flashgot overlay has a grouping which is mixed menuitem and menupopup enter image description here

<popup id="contentAreaContextMenu">  
  <menu id="flashgot-submenu" hidden="true" persist="hidden" label="FlashGot" class="menu-iconic flashgot-icon-lnk" accesskey="&flashgotLink.accesskey;" insertbefore="context-sep-selectall,context-sep-stop,context-sep-copylink" >
      <menupopup>
          <menuseparator id="flashgot-submenu-anchor" hidden="true" />
          <menuitem id="flashgot-menuitem-it" label="&flashgotLink;" accesskey="&flashgotLink.accesskey;" oncommand="gFlashGot.downloadPopupLink()" key="flashgot-link-key" class="menuitem-iconic flashgot-icon-lnk" />
          <menuitem id="flashgot-menuitem-sel" label="&flashgotSel;" accesskey="&flashgotSel.accesskey;" oncommand="gFlashGot.delayCmd('Sel')" key="flashgot-sel-key" class="menuitem-iconic flashgot-icon-sel" />
          <menuitem id="flashgot-menuitem-all" label="&flashgotAll;" accesskey="&flashgotAll.accesskey;" oncommand="gFlashGot.delayCmd('All')" key="flashgot-all-key" class="menuitem-iconic flashgot-icon-all" />
          <menuitem id="flashgot-menuitem-tabs" label="&flashgotTabs;" accesskey="&flashgotTabs.accesskey;" oncommand="gFlashGot.delayCmd('Tabs')" key="flashgot-tabs-key" class="menuitem-iconic flashgot-icon-tabs" />
          <menuitem id="flashgot-menuitem-media" label="&flashgotMedia;" oncommand="gFlashGot.downloadMedia()" key="flashgot-media-key" class="menuitem-iconic flashgot-icon-media" />

          <menuitem id="flashgot-menuitem-buildGallery" label="&flashgotBuildGallery;" class="menuitem-iconic flashgot-icon-buildGallery" oncommand="gFlashGot.buildGallery()" />
              <menu id="flashgot-menu-options" class="menu-iconic flashgot-icon-opts" label="&flashgotOptions;" >
                  <menupopup id="flashgot-menupopup-options" onpopupshowing="gFlashGot.prepareOptsMenu(event.target)">
                  <menuitem id="flashgot-ctx-menuitem-nodms" hidden="true" label="&flashgotNoDMS;" oncommand="gFlashGotService.showDMSReference()" />
                  <menuseparator id="flashgot-ctx-sep-nodms" />
                  <menuitem id="flashgot-ctx-menuitem-opt-autoStart" label="&flashgotAutostart;" type="checkbox" oncommand="gFlashGot.switchOption('autoStart')" />
                  <menuitem id="flashgot-ctx-menuitem-opt-includeImages" label="&includeImages.label;" type="checkbox" oncommand="gFlashGot.switchOption('includeImages')" />
                  <menuitem id="flashgot-ctx-menuitem-opts" label="&flashgotMoreOpts;" oncommand="gFlashGot.openOptionsDialog()" />
                  <menuseparator id="flashgot-ctx-sep-about" />
                  <menuitem id="flashgot-ctx-menuitem-about" label="&flashgotAbout;" oncommand="gFlashGot.openAboutDialog()" />
                  <menuitem id="flashgot-ctx-homepage" label="&flashgotVisitHomepage;" oncommand="gFlashGot.browseHomePage()" />
                  </menupopup>
              </menu>
      </menupopup>
  </menu>  

  <menuseparator id="flashgot-context-separator" hidden="true" insertbefore="context-sep-selectall,context-sep-stop,context-sep-copylink" /> 
  <menuseparator id="flashgot-context-separator2" hidden="true" insertbefore="context-sep-selectall,context-sep-stop,context-sep-copylink" />   
</popup>

First one is normal. Second one is after inserting the menuitem in a <menu class="menu-iconic>

Normal After inserting in a <code><menu class="menu-iconic></code>

If I remove the <keyset>, it will also remove its children, so they dont have to be removed one by one. I want to have 1 node and put all above in it, so that it can be inserted with 1 action and remvoed with 1. :) — erosman
Can you take a screenshot and share of your situation so we can see. I'm sure CSS can always remove it. — Noitidart

Noitidart Noitidart · Accepted Answer · 2014-07-03T04:47:15

I got you. Surround it in the tag of <menu><menupopup>.

See this Gist here it creates a menu as one item: Noitidart / _ff-addon-snippet-CreateMenuWithSubmenuAndAttachToWidget.js

This example has a submenu
This example also follows the AMO recommended way for DOM Building and HTML Insertion. MDN :: DOM Building and HTML Insertion
- I had my addon rejected before when I didn't follow this method. Here's what they old me on rejection:
  
  Your add-on creates DOM nodes from HTML strings containing potentially unsanitized data, by assigning to innerHTML or through similar means. Aside from being inefficient, this is a major security risk. For more information, see https://developer.mozilla.org/en/XUL_School/DOM_Building_and_HTML_Insertion.

<menu>
    <menupopup>
        <menuseparator/>
        <menuitem .... />
        <menuitem .... />
        <menuseparator/>
        <menuitem .... />
        <menuseparator/>
        <keyset>
            <key id="sample-key1" .... />
            <key id="sample-key2" .... />
            <key id="sample-key3" .... />
        </keyset>
    </menupopup>
</menu>

Grouping Context Menu items together

2 Answers