Bug 1241070 - refresh dominatortreeitem if expand state changed;r=fitzgen

In DominatorTreeItem check props.expanded in shouldComponentUpdate.
Added integration/sanity test to check that a node can be collapsed
and expanded using mouse events.
Added a DominatorTree component unit test to check the expanded nodes
are correctly updated.

--HG--
extra : rebase_source : 35eeca14296f81b6c8deec1d375b2a98467a460f

devtools/client/memory/components/dominator-tree-item.js

@@ -31,6 +31,7 @@ const DominatorTreeItem = module.exports = createClass({
   shouldComponentUpdate(nextProps, nextState) {
     return this.props.item != nextProps.item
       || this.props.depth != nextProps.depth
+      || this.props.expanded != nextProps.expanded
       || this.props.focused != nextProps.focused;
   },
 

devtools/client/memory/components/dominator-tree.js

@@ -201,6 +201,7 @@ const DominatorTree = module.exports = createClass({
           depth,
           focused,
           arrow,
+          expanded,
           getPercentSize: size => (size / dominatorTree.root.retainedSize) * 100,
           onViewSourceInDebugger,
         })

devtools/client/memory/test/browser/browser.ini

@@ -12,6 +12,7 @@ support-files =
 [browser_memory_diff_01.js]
     skip-if = debug # bug 1219554
 [browser_memory_dominator_trees_01.js]
+[browser_memory_dominator_trees_02.js]
 [browser_memory_filter_01.js]
     skip-if = debug # bug 1219554
 [browser_memory_no_allocation_stacks.js]

devtools/client/memory/test/browser/browser_memory_dominator_trees_02.js

@@ -0,0 +1,64 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Integration test for mouse interaction in the dominator tree
+
+"use strict";
+
+const {
+  dominatorTreeState,
+  viewState,
+} = require("devtools/client/memory/constants");
+const { changeView } = require("devtools/client/memory/actions/view");
+
+const TEST_URL = "http://example.com/browser/devtools/client/memory/test/browser/doc_steady_allocation.html";
+
+function clickOnNodeArrow(node, panel) {
+  EventUtils.synthesizeMouseAtCenter(node.querySelector(".arrow"),
+                                     {}, panel.panelWin);
+}
+
+this.test = makeMemoryTest(TEST_URL, function* ({ panel }) {
+  // Taking snapshots and computing dominator trees is slow :-/
+  requestLongerTimeout(4);
+
+  const store = panel.panelWin.gStore;
+  const { getState, dispatch } = store;
+  const doc = panel.panelWin.document;
+
+  dispatch(changeView(viewState.DOMINATOR_TREE));
+
+  // Take a snapshot.
+  const takeSnapshotButton = doc.getElementById("take-snapshot");
+  EventUtils.synthesizeMouseAtCenter(takeSnapshotButton, {}, panel.panelWin);
+
+  // Wait for the dominator tree to be computed and fetched.
+  yield waitUntilState(store, state =>
+    state.snapshots[0] &&
+    state.snapshots[0].dominatorTree &&
+    state.snapshots[0].dominatorTree.state === dominatorTreeState.LOADED);
+  ok(true, "Computed and fetched the dominator tree.");
+
+  const root = getState().snapshots[0].dominatorTree.root;
+  ok(getState().snapshots[0].dominatorTree.expanded.has(root.nodeId),
+     "Root node is expanded by default");
+
+  // Click on root arrow to collapse the root element
+  const rootNode = doc.querySelector(`.node-${root.nodeId}`);
+  clickOnNodeArrow(rootNode, panel);
+
+  yield waitUntilState(store, state =>
+    state.snapshots[0] &&
+    state.snapshots[0].dominatorTree &&
+    !state.snapshots[0].dominatorTree.expanded.has(root.nodeId));
+  ok(true, "Root node collapsed");
+
+  // Click on root arrow to expand it again
+  clickOnNodeArrow(rootNode, panel);
+
+  yield waitUntilState(store, state =>
+    state.snapshots[0] &&
+    state.snapshots[0].dominatorTree &&
+    state.snapshots[0].dominatorTree.expanded.has(root.nodeId));
+  ok(true, "Root node is expanded again");
+});

devtools/client/memory/test/chrome/chrome.ini

@@ -4,6 +4,7 @@ support-files =
 
 [test_DominatorTree_01.html]
 [test_DominatorTree_02.html]
+[test_DominatorTree_03.html]
 [test_DominatorTreeItem_01.html]
 [test_Heap_01.html]
 [test_Heap_02.html]

devtools/client/memory/test/chrome/head.js

@@ -174,11 +174,17 @@ function onNextAnimationFrame(fn) {
       requestAnimationFrame(fn));
 }
 
-function renderComponent(component, container) {
+/**
+ * Render the provided ReactElement in the provided HTML container.
+ * Returns a Promise that will resolve the rendered element as a React
+ * component.
+ */
+function renderComponent(element, container) {
   return new Promise(resolve => {
-    ReactDOM.render(component, container, onNextAnimationFrame(() => {
+    let component = ReactDOM.render(element, container,
+      onNextAnimationFrame(() => {
         dumpn("Rendered = " + container.innerHTML);
-      resolve();
+        resolve(component);
       }));
   });
 }

devtools/client/memory/test/chrome/test_DominatorTree_03.html

@@ -0,0 +1,75 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+Test that expanded DominatorTreeItems are correctly rendered and updated
+-->
+<head>
+    <meta charset="utf-8">
+    <title>Tree component test</title>
+    <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+    <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+</head>
+<body>
+    <!-- Give the container height so that the whole tree is rendered. -->
+    <div id="container" style="height: 900px;"></div>
+
+    <pre id="test">
+        <script src="head.js" type="application/javascript;version=1.8"></script>
+        <script type="application/javascript;version=1.8">
+        window.onload = Task.async(function* () {
+          try {
+            const container = document.getElementById("container");
+
+            // simple tree with one root and one child
+            const root = makeTestDominatorTreeNode(
+              { moreChildrenAvailable: false },
+              [
+                makeTestDominatorTreeNode({ moreChildrenAvailable: false }),
+              ]);
+            ok(root.children);
+
+            // root node is expanded
+            const expanded = new Set();
+            expanded.add(root.nodeId);
+
+            let component = yield renderComponent(
+              DominatorTreeComponent(immutableUpdate(
+                TEST_DOMINATOR_TREE_PROPS,
+                {
+                  dominatorTree: immutableUpdate(
+                    TEST_DOMINATOR_TREE_PROPS.dominatorTree,
+                    { expanded, root }
+                  ),
+                })), container);
+            ok(true, "Dominator tree rendered");
+
+            is(container.querySelectorAll(".tree-node").length, 2,
+                "Should display two rows");
+            is(container.querySelectorAll(".arrow.open").length, 1,
+                "Should display one expanded arrow");
+
+            yield setProps(component, immutableUpdate(
+              TEST_DOMINATOR_TREE_PROPS,
+              {
+                dominatorTree: immutableUpdate(
+                  TEST_DOMINATOR_TREE_PROPS.dominatorTree,
+                  { expanded: new Set(), root }
+                )
+              }));
+            ok(true, "Dominator tree props updated to collapse all nodes");
+
+            is(container.querySelectorAll(".tree-node").length, 1,
+                "Should display only one row");
+            is(container.querySelectorAll(".arrow.open").length, 0,
+                "Should display no expanded arrow");
+
+          } catch(e) {
+            ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
+          } finally {
+            SimpleTest.finish();
+          }
+        });
+        </script>
+    </pre>
+</body>
+</html>