Bug 1249453 - Add arrows from parent to children in census trees; r=jsantell

MozReview-Commit-ID: LFo4jJot2Sr

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

@@ -25,11 +25,11 @@ const CensusTreeItem = module.exports = createClass({
       depth,
       arrow,
       focused,
-      toolbox,
       getPercentBytes,
       getPercentCount,
       showSign,
       onViewSourceInDebugger,
+      inverted,
     } = this.props;
 
     const bytes = formatNumber(item.bytes, showSign);
@@ -44,7 +44,14 @@ const CensusTreeItem = module.exports = createClass({
     const totalCount = formatNumber(item.totalCount, showSign);
     const percentTotalCount = formatPercent(getPercentCount(item.totalCount), showSign);
 
-    return dom.div({ className: `heap-tree-item ${focused ? "focused" :""}` },
+    let pointer;
+    if (inverted && depth > 0) {
+      pointer = dom.span({ className: "children-pointer" }, "↖");
+    } else if (!inverted && item.children && item.children.length) {
+      pointer = dom.span({ className: "children-pointer" }, "↘");
+    }
+
+    return dom.div({ className: `heap-tree-item ${focused ? "focused" : ""}` },
       dom.span({ className: "heap-tree-item-field heap-tree-item-bytes" },
                dom.span({ className: "heap-tree-number" }, bytes),
                dom.span({ className: "heap-tree-percent" }, percentBytes)),
@@ -60,6 +67,7 @@ const CensusTreeItem = module.exports = createClass({
                dom.span({ className: "heap-tree-item-field heap-tree-item-name",
                           style: { marginLeft: depth * TREE_ROW_HEIGHT }},
         arrow,
+        pointer,
         this.toLabel(item.name, onViewSourceInDebugger)
       )
     );

devtools/client/memory/components/census.js

@@ -66,6 +66,7 @@ const Census = module.exports = createClass({
           getPercentBytes,
           getPercentCount,
           showSign: !!diffing,
+          inverted: census.inverted,
         }),
       getRoots: () => report.children || [],
       getKey: node => node.id,

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

@@ -26,10 +26,19 @@ this.test = makeMemoryTest(TEST_URL, function* ({ tab, panel }) {
 
   const nameElems = [...doc.querySelectorAll(".heap-tree-item-field.heap-tree-item-name")];
   is(nameElems.length, 4, "Should get 4 items, one for each coarse type");
-  ok(nameElems.some(e => e.textContent.trim() === "objects"), "One for coarse type 'objects'");
-  ok(nameElems.some(e => e.textContent.trim() === "scripts"), "One for coarse type 'scripts'");
-  ok(nameElems.some(e => e.textContent.trim() === "strings"), "One for coarse type 'strings'");
-  ok(nameElems.some(e => e.textContent.trim() === "other"), "One for coarse type 'other'");
+
+  for (let el of nameElems) {
+    dumpn(`Found ${el.textContent.trim()}`);
+  }
+
+  ok(nameElems.some(e => e.textContent.indexOf("objects") >= 0),
+     "One for coarse type 'objects'");
+  ok(nameElems.some(e => e.textContent.indexOf("scripts") >= 0),
+     "One for coarse type 'scripts'");
+  ok(nameElems.some(e => e.textContent.indexOf("strings") >= 0),
+     "One for coarse type 'strings'");
+  ok(nameElems.some(e => e.textContent.indexOf("other") >= 0),
+     "One for coarse type 'other'");
 
   for (let e of nameElems) {
     is(e.style.marginLeft, "0px",

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

@@ -72,6 +72,10 @@ function makeMemoryTest(url, generator) {
   });
 }
 
+function dumpn(msg) {
+  dump(`MEMORY-TEST: ${msg}\n`);
+}
+
 /**
  * Returns a promise that will resolve when the provided store matches
  * the expected array. expectedStates is an array of dominatorTree states.

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

@@ -2,6 +2,7 @@
 support-files =
   head.js
 
+[test_CensusTreeItem_01.html]
 [test_DominatorTree_01.html]
 [test_DominatorTree_02.html]
 [test_DominatorTree_03.html]

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

@@ -35,6 +35,7 @@ var models = require("devtools/client/memory/models");
 var React = require("devtools/client/shared/vendor/react");
 var ReactDOM = require("devtools/client/shared/vendor/react-dom");
 var Heap = React.createFactory(require("devtools/client/memory/components/heap"));
+var CensusTreeItem = React.createFactory(require("devtools/client/memory/components/census-tree-item"));
 var DominatorTreeComponent = React.createFactory(require("devtools/client/memory/components/dominator-tree"));
 var DominatorTreeItem = React.createFactory(require("devtools/client/memory/components/dominator-tree-item"));
 var Toolbar = React.createFactory(require("devtools/client/memory/components/toolbar"));
@@ -44,6 +45,33 @@ SimpleTest.waitForExplicitFinish();
 
 var noop = () => {};
 
+var TEST_CENSUS_TREE_ITEM_PROPS = Object.freeze({
+  item: Object.freeze({
+    bytes: 10,
+    count: 1,
+    totalBytes: 10,
+    totalCount: 1,
+    name: "foo",
+    children: [
+      Object.freeze({
+        bytes: 10,
+        count: 1,
+        totalBytes: 10,
+        totalCount: 1,
+        name: "bar",
+      })
+    ]
+  }),
+  depth: 0,
+  arrow: ">",
+  focused: true,
+  getPercentBytes: () => 50,
+  getPercentCount: () => 50,
+  showSign: false,
+  onViewSourceInDebugger: noop,
+  inverted: false,
+});
+
 // Counter for mock DominatorTreeNode ids.
 var TEST_NODE_ID_COUNTER = 0;
 

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

@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+Test that children pointers show up at the correct times.
+-->
+<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");
+
+             yield renderComponent(CensusTreeItem(immutableUpdate(TEST_CENSUS_TREE_ITEM_PROPS, {
+               inverted: true,
+               depth: 0,
+             })), container);
+
+             ok(!container.querySelector(".children-pointer"),
+                "Don't show children pointer for roots when we are inverted");
+
+             yield renderComponent(CensusTreeItem(immutableUpdate(TEST_CENSUS_TREE_ITEM_PROPS, {
+               inverted: true,
+               depth: 1,
+             })), container);
+
+             ok(container.querySelector(".children-pointer"),
+                "Do show children pointer for non-roots when we are inverted");
+
+             yield renderComponent(CensusTreeItem(immutableUpdate(TEST_CENSUS_TREE_ITEM_PROPS, {
+               inverted: false,
+               item: immutableUpdate(TEST_CENSUS_TREE_ITEM_PROPS.item, { children: undefined }),
+             })), container);
+
+             ok(!container.querySelector(".children-pointer"),
+                "Don't show children pointer when non-inverted and no children");
+
+             yield renderComponent(CensusTreeItem(immutableUpdate(TEST_CENSUS_TREE_ITEM_PROPS, {
+               inverted: false,
+               depth: 0,
+               item: immutableUpdate(TEST_CENSUS_TREE_ITEM_PROPS.item, { children: [{}] }),
+             })), container);
+
+             ok(container.querySelector(".children-pointer"),
+                "Do show children pointer when non-inverted and have children");
+
+           } catch(e) {
+             ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
+           } finally {
+             SimpleTest.finish();
+           }
+         });
+        </script>
+    </pre>
+</body>
+</html>

devtools/client/themes/memory.css

@@ -329,6 +329,10 @@ html, body, #app, #memory-tool {
   line-height: var(--heap-tree-row-height);
 }
 
+.children-pointer {
+  padding-inline-end: 5px;
+}
+
 /**
  * Heap tree view columns
  */