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 ``, 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, Jul 03 '14 at 04:30
Can you take a screenshot and share of your situation so we can see. I'm sure CSS can always remove it. — Noitidart, Jul 03 '14 at 11:03

Noitidart · Answer 1 · 2014-07-03T05:12:56.103

1

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.

So your XUL above will look like this:

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

edited Jul 03 '14 at 05:12

answered Jul 03 '14 at 04:47

Noitidart

35,443
37
154
323

Thanks Noitidart. I will try that. Doesn't `` interfere with ``? I have a recollection that it did...but I will test it out now. Regarding the AMO rejection, `innerHTML` is the problem. AMO rejects the use of it. – erosman Jul 03 '14 at 04:59
It doesn't work..it hides them... I think `menupopup` is used for contextmenu sub-menus – erosman Jul 03 '14 at 05:08
Oh I didn't know it was just `innerHTML` thanks for that :P I still really like this templating method it's so fun :p Oh no menupopup is definitely used for main popup as well. What I forgot to tell you ,*I think*, is you have to do `` around the ``. Hopefully this fixes it. I'll edit solution now. Here is where it tells us to do this: [MDN :: Adding menus and submenus](https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions/XUL_School/Adding_menus_and_submenus?redirectlocale=en-US&redirectslug=XUL%2FSchool_tutorial%2FAdding_menus_and_submenus) – Noitidart Jul 03 '14 at 05:12
Ah I see why I didn't wrap it in a `` in my Gist. Reading my `README` below I note that: `For some reason you are not supposed to wrap the whole thing in a menu tag if you are inserting into mainPopupSet which is a element`. So apparently when I had the `` wrap around it was get all jacked up. – Noitidart Jul 03 '14 at 05:14
You can also try wrapping it all in a `` like is done here: [MDN :: ContextMenus](https://developer.mozilla.org/en-US/docs/XUL/PopupGuide/ContextMenus) – Noitidart Jul 03 '14 at 05:32
It didnt work ..it pushes them into a popup sub-menu :( – erosman Jul 03 '14 at 06:06
Try wrapping with just ``. If not then shout out to @nmaier – Noitidart Jul 03 '14 at 06:07
I did it with just `menu` at first (I mentioned it in my original post), it indented it so the icon and text started from where the text normally starts. – erosman Jul 03 '14 at 06:09
Try unindenting by adding CSS if you cant get things to work out. – Noitidart Jul 03 '14 at 06:28

score 1 · Accepted Answer · answered Jul 03 '14 at 08:36

1

A <menupopup> like contentAreaContextMenu expects to contain separate items (elements), so even if there was a hack that worked reliably across platforms, it would be just a hack and could break at any moment. So no, you cannot reliably logically group menu items together that would still show up in the UI as separate items.

Also, you shouldn't add other unrelated stuff like <keyset> into a <menupopup>. Same reason: may break at any point. (While <keyset> is a way to at least logically group your <key> elements...)

answered Jul 03 '14 at 08:36

nmaier

32,336
5
63
78

Thanks Nils. You're right...I shouldn't have put it there. Flashgot overlay has a grouping...I will add it to my post – erosman Jul 03 '14 at 10:05
No, it doesn't. It has sub-menus, like @Noitidart suggested. – nmaier Jul 03 '14 at 10:12
The first 5 are not sub-menus. They appear at the same level as the contextmenu. The 6th `manuitem` is a heading for a sub-menu with a `menu` and 6 `manuitem` sub-menus. – erosman Jul 03 '14 at 10:48
Yeah, at runtime, but not in the `XUL` you posted. So that either means FlashGot rearranges things at runtime (or there is some XUL you missed) – nmaier Jul 03 '14 at 11:03
Probably first `removeChild` and then reinsert into the top-level popup. Doesn't help you though, because you'd still need to remove elements one by one. – nmaier Jul 03 '14 at 11:08
It looks the same in Browser Toolbox (although it hides some on 'popupshowing'!!? – erosman Jul 03 '14 at 11:30

Grouping Context Menu items together

2 Answers2