javascript - 将上下文菜单项分组在一起

Question

在 Firefox Bootstrapped Addons 中，上下文菜单项必须手动插入/删除、启用/禁用和隐藏/取消隐藏。

我想知道是否可以将它们组合成一个元素（作为该元素的子元素），以便可以将组作为一个元素处理，即可以删除父节点，从而删除其所有子节点。

例如：

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

我试着把它们放进<menu> ... </menu>去，但那缩进了menuitem

更新：
我注意到 Flashgot 覆盖有一个混合的menuitem分组menupopup

<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> 

第一个是正常的。第二个是在插入menuitem之后<menu class="menu-iconic>

Answer 1

我接到你了。将其包围在 的标签中<menu><menupopup>。

在此处查看此要点，它将菜单作为一项创建：Noitidart / _ff-addon-snippet-CreateMenuWithSubmenuAndAttachToWidget.js

• 这个例子有一个子菜单
• 此示例还遵循 AMO 推荐的 DOM 构建和 HTML 插入方式。MDN :: DOM 构建和 HTML 插入
  • 当我没有遵循这种方法时，我的插件被拒绝了。以下是他们对我的拒绝：

    您的插件通过分配给 innerHTML 或通过类似方式从包含可能未经处理的数据的 HTML 字符串创建 DOM 节点。除了效率低下，这是一个主要的安全风险。有关详细信息，请参阅https://developer.mozilla.org/en/XUL_School/DOM_Building_and_HTML_Insertion。

所以你上面的 XUL 看起来像这样：

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

Answer 2

一个<menupopup>likecontentAreaContextMenu期望包含单独的项目（元素），因此即使存在跨平台可靠运行的hack，它也只是一个hack，并且随时可能中断。所以不，您不能可靠地将菜单项按逻辑分组在一起，这些菜单项仍会在 UI 中显示为单独的项目。

此外，您不应将其他不相关的内容添加<keyset>到<menupopup>. 相同的原因：可能随时中断。（虽然<keyset>是一种至少在逻辑上对<key>元素进行分组的方法......）