Bug 1157789 - Add a test for the Inspector's collapse/expandAll context menu items. r=janx

devtools/client/inspector/test/browser.ini

@@ -39,6 +39,7 @@ support-files =
 [browser_inspector_delete-selected-node-03.js]
 [browser_inspector_destroy-after-navigation.js]
 [browser_inspector_destroy-before-ready.js]
+[browser_inspector_expand-collapse.js]
 [browser_inspector_gcli-inspect-command.js]
 skip-if = e10s # GCLI isn't e10s compatible. See bug 1128988.
 [browser_inspector_highlighter-01.js]

devtools/client/inspector/test/browser_inspector_expand-collapse.js

@@ -0,0 +1,54 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that context menu items exapnd all and collapse are shown properly.
+
+const TEST_URL = "data:text/html;charset=utf-8,<div id='parent-node'><div id='child-node'></div></div>";
+
+add_task(function* () {
+
+    // Test is often exceeding time-out threshold, similar to Bug 1137765
+    requestLongerTimeout(2);
+
+    let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
+
+    let nodeMenuCollapseElement = inspector.panelDoc.getElementById("node-menu-collapse");
+    let nodeMenuExpandElement = inspector.panelDoc.getElementById("node-menu-expand");
+
+    info("Selecting the parent node");
+
+    let front = yield getNodeFrontForSelector("#parent-node", inspector);
+
+    yield selectNode(front, inspector);
+
+    info("Simulating context menu click on the selected node container.");
+    contextMenuClick(getContainerForNodeFront(front, inspector).tagLine);
+
+    ok(nodeMenuCollapseElement.hasAttribute("disabled"), "Collapse option is disabled");
+
+    ok(!nodeMenuExpandElement.hasAttribute("disabled"), "ExpandAll option is enabled");
+
+    info("Testing whether expansion works properly");
+    dispatchCommandEvent(nodeMenuExpandElement);
+    info("Waiting for expansion to occur");
+    yield waitForMultipleChildrenUpdates(inspector);
+    let markUpContainer = getContainerForNodeFront(front, inspector);
+    ok(markUpContainer.expanded, "node has been successfully expanded");
+
+    //reslecting node after expansion
+    yield selectNode(front, inspector);
+
+    info("Testing whether collapse works properly");
+    info("Simulating context menu click on the selected node container.");
+    contextMenuClick(getContainerForNodeFront(front, inspector).tagLine);
+
+    ok(!nodeMenuCollapseElement.hasAttribute("disabled"), "Collapse option is enabled");
+
+    dispatchCommandEvent(nodeMenuCollapseElement);
+    info("Waiting for collapse to occur");
+    yield waitForMultipleChildrenUpdates(inspector);
+    ok(!markUpContainer.expanded, "node has been successfully collapsed");
+});

devtools/client/inspector/test/head.js

@@ -481,6 +481,35 @@ function dispatchCommandEvent(node) {
   node.dispatchEvent(commandEvent);
 }
 
+/**
+ * A helper that simulates a contextmenu event on the given chrome DOM element.
+ */
+function contextMenuClick(element) {
+  let evt = element.ownerDocument.createEvent('MouseEvents');
+  let button = 2;  // right click
+
+  evt.initMouseEvent('contextmenu', true, true,
+       element.ownerDocument.defaultView, 1, 0, 0, 0, 0, false,
+       false, false, false, button, null);
+
+  element.dispatchEvent(evt);
+}
+
+/**
+ * A helper that fetches a front for a node that matches the given selector or
+ * doctype node if the selector is falsy.
+ */
+function* getNodeFrontForSelector(selector, inspector) {
+  if (selector) {
+    info("Retrieving front for selector " + selector);
+    return getNodeFront(selector, inspector);
+  } else {
+    info("Retrieving front for doctype node");
+    let {nodes} = yield inspector.walker.children(inspector.walker.rootNode);
+    return nodes[0];
+  }
+}
+
 /**
  * Encapsulate some common operations for highlighter's tests, to have
  * the tests cleaner, without exposing directly `inspector`, `highlighter`, and
@@ -534,3 +563,33 @@ const getHighlighterHelperFor = (type) => Task.async(
     };
   }
 );
+
+// The expand all operation of the markup-view calls itself recursively and
+// there's not one event we can wait for to know when it's done
+// so use this helper function to wait until all recursive children updates are done.
+function* waitForMultipleChildrenUpdates(inspector) {
+// As long as child updates are queued up while we wait for an update already
+// wait again
+    if (inspector.markup._queuedChildUpdates &&
+        inspector.markup._queuedChildUpdates.size) {
+        yield waitForChildrenUpdated(inspector);
+        return yield waitForMultipleChildrenUpdates(inspector);
+    }
+}
+
+/**
+ * Using the markupview's _waitForChildren function, wait for all queued
+ * children updates to be handled.
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * loaded in the toolbox
+ * @return a promise that resolves when all queued children updates have been
+ * handled
+ */
+function waitForChildrenUpdated({markup}) {
+    info("Waiting for queued children updates to be handled");
+    let def = promise.defer();
+    markup._waitForChildren().then(() => {
+        executeSoon(def.resolve);
+    });
+    return def.promise;
+}