Bug 877450 - Create Developer Tool widget with subview. r=Gijs.

browser/components/customizableui/content/panelUI.inc.xul

@@ -47,6 +47,12 @@
       <label value="&helpMenu.label;"/>
       <vbox id="PanelUI-helpItems"/>
     </panelview>
+
+    <panelview id="PanelUI-developer" flex="1">
+      <label value="&webDeveloperMenu.label;"/>
+      <vbox id="PanelUI-developerItems"/>
+    </panelview>
+
   </panelmultiview>
   <popupset id="customizationContextMenus">
     <menupopup id="customizationContextMenu">

browser/components/customizableui/content/panelUI.js

@@ -190,6 +190,9 @@ const PanelUI = {
       tempPanel.addEventListener("popuphidden", function panelRemover() {
         tempPanel.removeEventListener("popuphidden", panelRemover);
         tempPanel.removeEventListener("command", PanelUI._onWidgetPanelCommand);
+        let evt = new CustomEvent("ViewHiding", {detail: viewNode});
+        viewNode.dispatchEvent(evt);
+
         this.multiView.appendChild(viewNode);
         tempPanel.parentElement.removeChild(tempPanel);
       }.bind(this));
@@ -202,6 +205,16 @@ const PanelUI = {
     }
   },
 
+  /**
+   * This function can be used as a command event listener for subviews
+   * so that the panel knows if and when to close itself.
+   */
+  onCommandHandler: function(aEvent) {
+    if (!aEvent.originalTarget.hasAttribute("noautoclose")) {
+      PanelUI.hide();
+    }
+  },
+
   /** 
    * Signal that we're about to make a lot of changes to the contents of the
    * panels all at once. For performance, we ignore the mutations.
@@ -234,12 +247,6 @@ const PanelUI = {
     }
   },
 
-  _onHelpViewCommand: function(aEvent) {
-    if (!aEvent.originalTarget.hasAttribute("noautoclose")) {
-      PanelUI.hide();
-    }
-  },
-
   _onHelpViewShow: function(aEvent) {
     // Call global menu setup function
     buildHelpMenu();
@@ -271,10 +278,10 @@ const PanelUI = {
     }
     items.appendChild(fragment);
 
-    this.addEventListener("command", PanelUI._onHelpViewCommand);
+    this.addEventListener("command", PanelUI.onCommandHandler);
   },
 
   _onHelpViewHide: function(aEvent) {
-    this.removeEventListener("command", PanelUI._onHelpViewCommand);
+    this.removeEventListener("command", PanelUI.onCommandHandler);
   }
 };

browser/components/customizableui/src/CustomizableWidgets.jsm

@@ -185,16 +185,63 @@ const CustomizableWidgets = [{
     }
   }, {
     id: "developer-button",
+    type: "view",
+    viewId: "PanelUI-developer",
     removable: true,
     defaultArea: CustomizableUI.AREA_PANEL,
     allowedAreas: [CustomizableUI.AREA_PANEL],
-    onCommand: function(aEvent) {
-      let win = aEvent.target &&
-                aEvent.target.ownerDocument &&
-                aEvent.target.ownerDocument.defaultView;
-      if (win && win.gDevToolsBrowser) {
-        win.gDevToolsBrowser.toggleToolboxCommand(win.gBrowser);
+    onViewShowing: function(aEvent) {
+      // Populate the subview with whatever menuitems are in the developer
+      // menu. We skip menu elements, because the menu panel has no way
+      // of dealing with those right now.
+      let doc = aEvent.target.ownerDocument;
+      let win = doc.defaultView;
+
+      let items = doc.getElementById("PanelUI-developerItems");
+      let menu = doc.getElementById("menuWebDeveloperPopup");
+      let attrs = ["oncommand", "onclick", "label", "key", "disabled",
+                   "command"];
+
+      let fragment = doc.createDocumentFragment();
+      for (let node of menu.children) {
+        if (node.hidden)
+          continue;
+
+        let item;
+        if (node.localName == "menuseparator") {
+          item = doc.createElementNS(kNSXUL, "menuseparator");
+        } else if (node.localName == "menuitem") {
+          item = doc.createElementNS(kNSXUL, "toolbarbutton");
+        } else {
+          continue;
+        }
+        for (let attr of attrs) {
+          let attrVal = node.getAttribute(attr);
+          if (attrVal)
+            item.setAttribute(attr, attrVal);
+        }
+        fragment.appendChild(item);
       }
+      items.appendChild(fragment);
+
+      aEvent.target.addEventListener("command", win.PanelUI.onCommandHandler);
+    },
+    onViewHiding: function(aEvent) {
+      let doc = aEvent.target.ownerDocument;
+      let win = doc.defaultView;
+      let items = doc.getElementById("PanelUI-developerItems");
+      let parent = items.parentNode;
+      // We'll take the container out of the document before cleaning it out
+      // to avoid reflowing each time we remove something.
+      parent.removeChild(items);
+
+      while (items.firstChild) {
+        items.firstChild.remove();
+      }
+
+      parent.appendChild(items);
+      aEvent.target.removeEventListener("command",
+                                        win.PanelUI.onCommandHandler);
     }
   }, {
     id: "add-ons-button",