Why does xul overlay create 2 ids, instead of combining?

Question

I'm seeing this in the browser toolbox:

I would think it would combine my overlay with the same id - why does it create two with the same ID?

<?xml version="1.0" encoding="utf-8"?>
<overlay id="dtInspectorOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<popupset id="inspectorPopupSet">
    <menupopup id="inspector-node-popup">
    <!--    <menuitem id="node-menu-edititem"
            label="Edit HTML"
            accesskey="E"
            oncommand="dt.editHtml()"
            position="1"/>-->
        <menuseparator position="2"/>
        <menuitem id="node-menu-setA"
            label="Set Node A"
            accesskey="A"
            oncommand="dt.setA()"
            position="3"/>
        <menuitem id="node-menu-setB"
            label="Set Node B and Compare"
            accesskey="B"
            oncommand="dt.setB()"
            position="4"/>
        <menuseparator position="5"/>

    </menupopup>
    <menupopup id="rule-view-context-menu">
      <!--<menuitem label="Copy Selection" accesskey="C" oncommand="dt.copySelection()"/>-->
      <menuitem position="4" id="dtCSSCOPYURL" label="Copy URL" accesskey="U" oncommand="dt.urlCopy()" />
      <menuitem position="5" id="dtCSSOPENURL" label="Open URL in New Tab" accesskey="O" oncommand="dt.urlOpen()"/>
      <!--<menuitem label="New Rule..." accesskey="N" oncommand="dt.newRule()"/>-->
    </menupopup>
</popupset>

<script src="chrome://devtooltweaks/content/lib/FlexiColorPicker.js"></script>
<script src="chrome://devtooltweaks/content/inspectorTweaks.js"></script>
</overlay>

Source code here.

Are you overlaying `chrome://browser/content/devtools/inspector/inspector.xul`? — paa, Oct 09 '14 at 10:10
Yes. source code [here](https://github.com/programmin1/DevTools-Tweaks) — NoBugs, Oct 10 '14 at 00:38

score 0 · Answer 1 · answered Oct 27 '14 at 10:50

I believe you have worked this out but inspector.xul is dynamically generated. This means that, after your overlay has been applied, the devtools code appends a new menupopup (the second one that you can see).

Instead you need to do something like this:

cssInspectorOverlay.xul

<?xml version="1.0" encoding="utf-8"?>
<overlay id="cssInspectorOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="text/javascript" src="chrome://devtooltweaks/content/cssInspectorOverlay.js"></script>
</overlay>

cssInspectorOverlay.js

window.addEventListener('load',function(evt) {
  const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";

  function createMenuItem(aMenu, aAttributes) {
    let item = aMenu.ownerDocument.createElementNS(XUL_NS, "menuitem");

    item.setAttribute("label", aAttributes.label);
    item.setAttribute("accesskey", aAttributes.accesskey);
    item.addEventListener("command", aAttributes.command);
    aMenu.appendChild(item);

    return item;
  }

  ...

  // Add menu items and custom using JavaScript here.
}

Thanks! So the xul we always use to extend code, doesn't work to added elements like CSS does? That's interesting, I hope there's some documentation for this in devtools on how to extend these :) — NoBugs, Oct 28 '14 at 01:58

Why does xul overlay create 2 ids, instead of combining?

1 Answers1