Bug 1157789 - Add context menu items Expand All / Collapse to markup view. r=janx
authorAvik Pal <avikpal.me@gmail.com>
Mon, 29 Jun 2015 00:16:47 -0700
changeset 281180 c20a42932a752eee6ea21b9e0ecb10b9d9fb6586
parent 281179 54e05c26ea80884b9c55e5e7bffc7ff629cf4e40
child 281181 5eb1de369f21a81a49f5555034f2065f10955474
push id4932
push userjlund@mozilla.com
push dateMon, 10 Aug 2015 18:23:06 +0000
treeherdermozilla-beta@6dd5a4f5f745 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjanx
bugs1157789
milestone41.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1157789 - Add context menu items Expand All / Collapse to markup view. r=janx
browser/devtools/inspector/inspector-panel.js
browser/devtools/inspector/inspector.xul
browser/locales/en-US/chrome/browser/devtools/inspector.dtd
--- a/browser/devtools/inspector/inspector-panel.js
+++ b/browser/devtools/inspector/inspector-panel.js
@@ -681,16 +681,29 @@ InspectorPanel.prototype = {
 
     // Disable / enable "Copy Unique Selector", "Copy inner HTML",
     // "Copy outer HTML", "Scroll Into View" & "Screenshot Node" as appropriate
     let unique = this.panelDoc.getElementById("node-menu-copyuniqueselector");
     let screenshot = this.panelDoc.getElementById("node-menu-screenshotnode");
     let copyInnerHTML = this.panelDoc.getElementById("node-menu-copyinner");
     let copyOuterHTML = this.panelDoc.getElementById("node-menu-copyouter");
     let scrollIntoView = this.panelDoc.getElementById("node-menu-scrollnodeintoview");
+    let expandAll = this.panelDoc.getElementById("node-menu-expand");
+    let collapse = this.panelDoc.getElementById("node-menu-collapse");
+
+    expandAll.setAttribute("disabled", "true");
+    collapse.setAttribute("disabled", "true");
+
+    let markUpContainer = this.markup.importNode(this.selection.nodeFront, false);
+    if (this.selection.isNode() && markUpContainer.hasChildren) {
+      if (markUpContainer.expanded) {
+        collapse.removeAttribute("disabled");
+      }
+      expandAll.removeAttribute("disabled");
+    }
 
     this._target.actorHasMethod("domnode", "scrollIntoView").then(value => {
       scrollIntoView.hidden = !value;
     });
 
     if (isSelectionElement) {
       unique.removeAttribute("disabled");
       copyInnerHTML.removeAttribute("disabled");
@@ -1116,16 +1129,24 @@ InspectorPanel.prototype = {
     if (this.markup) {
       this.markup.deleteNode(this.selection.nodeFront);
     } else {
       // remove the node from content
       this.walker.removeNode(this.selection.nodeFront);
     }
   },
 
+  expandNode: function() {
+    this.markup.expandAll(this.selection.nodeFront);
+  },
+
+  collapseNode: function() {
+    this.markup.collapseNode(this.selection.nodeFront);
+  },
+
   /**
    * This method is here for the benefit of the node-menu-link-follow menu item
    * in the inspector contextual-menu. It's behavior depends on which node was
    * right-clicked when the menu was opened.
    */
   followAttributeLink: function(e) {
     let type = this.panelDoc.popupNode.dataset.type;
     let link = this.panelDoc.popupNode.dataset.link;
--- a/browser/devtools/inspector/inspector.xul
+++ b/browser/devtools/inspector/inspector.xul
@@ -50,16 +50,22 @@
         accesskey="&inspectorCopyUniqueSelector.accesskey;"
         oncommand="inspector.copyUniqueSelector()"/>
       <menuitem id="node-menu-copyimagedatauri"
         label="&inspectorCopyImageDataUri.label;"
         oncommand="inspector.copyImageDataUri()"/>
       <menuitem id="node-menu-showdomproperties"
         label="&inspectorShowDOMProperties.label;"
         oncommand="inspector.showDOMProperties()"/>
+      <menuitem id="node-menu-expand"
+        label="&inspectorExpandNode.label;"
+        oncommand="inspector.expandNode()"/>
+      <menuitem id="node-menu-collapse"
+        label="&inspectorCollapseNode.label;"
+        oncommand="inspector.collapseNode()"/>
       <menuseparator/>
       <menuitem id="node-menu-pasteinnerhtml"
         label="&inspectorHTMLPasteInner.label;"
         accesskey="&inspectorHTMLPasteInner.accesskey;"
         oncommand="inspector.pasteInnerHTML()"/>
       <menuitem id="node-menu-pasteouterhtml"
         label="&inspectorHTMLPasteOuter.label;"
         accesskey="&inspectorHTMLPasteOuter.accesskey;"
--- a/browser/locales/en-US/chrome/browser/devtools/inspector.dtd
+++ b/browser/locales/en-US/chrome/browser/devtools/inspector.dtd
@@ -100,12 +100,22 @@
 <!ENTITY inspectorCopyImageDataUri.label       "Copy Image Data-URL">
 
 <!-- LOCALIZATION NOTE (inspectorShowDOMProperties.label): This is the label
      shown in the inspector contextual-menu for the item that lets users see
      the DOM properties of the current node. When triggered, this item
      opens the split Console and displays the properties in its side panel. -->
 <!ENTITY inspectorShowDOMProperties.label       "Show DOM Properties">
 
+<!-- LOCALIZATION NOTE (inspectorExpandNode.label): This is the label
+     shown in the inspector contextual-menu for recursively expanding
+     mark-up elements -->
+<!ENTITY inspectorExpandNode.label       "Expand All">
+
+<!-- LOCALIZATION NOTE (inspectorCollapseNode.label): This is the label
+     shown in the inspector contextual-menu for recursively collapsing
+     mark-up elements -->
+<!ENTITY inspectorCollapseNode.label       "Collapse">
+
 <!-- LOCALIZATION NOTE (inspectorScreenshotNode.label): This is the label
      shown in the inspector contextual-menu for the item that lets users take
      a screenshot of the currently selected node. -->
 <!ENTITY inspectorScreenshotNode.label       "Screenshot Node">