Bug 1218670 - Add % to heap view tree items; r=jsantell

browser/locales/en-US/chrome/browser/devtools/memory.properties

@@ -61,6 +61,9 @@ tree-item.nostack=(no stack available)
 # that represents the root of the tree when inverted.
 tree-item.root=(root)
 
+# LOCALIZATION NOTE (tree-item.percent): A percent of bytes or count displayed in the tree view.
+tree-item.percent=%S%
+
 # LOCALIZATION NOTE (snapshot.state.saving.full): The label describing the snapshot
 # state SAVING, used in the main heap view.
 snapshot.state.saving.full=Saving snapshot…

devtools/client/memory/components/heap.js

@@ -6,7 +6,7 @@ const { DOM: dom, createClass, PropTypes, createFactory } = require("devtools/cl
 const { safeErrorString } = require("devtools/shared/DevToolsUtils");
 const Tree = createFactory(require("./tree"));
 const TreeItem = createFactory(require("./tree-item"));
-const { getSnapshotStatusTextFull, L10N } = require("../utils");
+const { getSnapshotStatusTextFull, getSnapshotTotals, L10N } = require("../utils");
 const { snapshotState: states } = require("../constants");
 const { snapshot: snapshotModel } = require("../models");
 // If HEAP_TREE_ROW_HEIGHT changes, be sure to change `var(--heap-tree-row-height)`
@@ -36,13 +36,24 @@ function createParentMap (node, aggregator=Object.create(null)) {
  * @param {CensusTreeNode} census
  * @return {Object}
  */
-function createTreeProperties (census, toolbox) {
+function createTreeProperties (snapshot, toolbox) {
+  const census = snapshot.census;
   let map = createParentMap(census);
+  const totals = getSnapshotTotals(snapshot);
 
   return {
     getParent: node => map[node.id],
     getChildren: node => node.children || [],
-    renderItem: (item, depth, focused, arrow) => new TreeItem({ toolbox, item, depth, focused, arrow }),
+    renderItem: (item, depth, focused, arrow) =>
+      new TreeItem({
+        toolbox,
+        item,
+        depth,
+        focused,
+        arrow,
+        getPercentBytes: bytes => bytes / totals.bytes * 100,
+        getPercentCount: count => count / totals.count * 100,
+      }),
     getRoots: () => census.children,
     getKey: node => node.id,
     itemHeight: HEAP_TREE_ROW_HEIGHT,
@@ -115,7 +126,7 @@ const Heap = module.exports = createClass({
             dom.span({ className: "heap-tree-item-total-count" }, L10N.getStr("heapview.field.totalcount")),
             dom.span({ className: "heap-tree-item-name" }, L10N.getStr("heapview.field.name"))
           ),
-          Tree(createTreeProperties(snapshot.census, toolbox))
+          Tree(createTreeProperties(snapshot, toolbox))
         );
         break;
     }

devtools/client/memory/components/snapshot-list-item.js

@@ -44,4 +44,3 @@ const SnapshotListItem = module.exports = createClass({
     );
   }
 });
-

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

@@ -18,14 +18,39 @@ const MAX_SOURCE_LENGTH = 200;
 const TreeItem = module.exports = createClass({
   displayName: "tree-item",
 
+  formatPercent(percent) {
+    return L10N.getFormatStr("tree-item.percent", Math.round(percent));
+  },
+
   render() {
-    let { item, depth, arrow, focused, toolbox } = this.props;
+    let {
+      item,
+      depth,
+      arrow,
+      focused,
+      toolbox,
+      getPercentBytes,
+      getPercentCount,
+    } = this.props;
+
+    const percentBytes = this.formatPercent(getPercentBytes(item.bytes));
+    const percentCount = this.formatPercent(getPercentCount(item.count));
+    const percentTotalBytes = this.formatPercent(getPercentBytes(item.totalBytes));
+    const percentTotalCount = this.formatPercent(getPercentBytes(item.totalCount));
 
     return dom.div({ className: `heap-tree-item ${focused ? "focused" :""}` },
-      dom.span({ className: "heap-tree-item-field heap-tree-item-bytes" }, item.bytes),
-      dom.span({ className: "heap-tree-item-field heap-tree-item-count" }, item.count),
-      dom.span({ className: "heap-tree-item-field heap-tree-item-total-bytes" }, item.totalBytes),
-      dom.span({ className: "heap-tree-item-field heap-tree-item-total-count" }, item.totalCount),
+      dom.span({ className: "heap-tree-item-field heap-tree-item-bytes" },
+               dom.span({ className: "heap-tree-number" }, item.bytes),
+               dom.span({ className: "heap-tree-percent" }, percentBytes)),
+      dom.span({ className: "heap-tree-item-field heap-tree-item-count" },
+               dom.span({ className: "heap-tree-number" }, item.count),
+               dom.span({ className: "heap-tree-percent" }, percentCount)),
+      dom.span({ className: "heap-tree-item-field heap-tree-item-total-bytes" },
+               dom.span({ className: "heap-tree-number" }, item.totalBytes),
+               dom.span({ className: "heap-tree-percent" }, percentTotalBytes)),
+      dom.span({ className: "heap-tree-item-field heap-tree-item-total-count" },
+               dom.span({ className: "heap-tree-number" }, item.totalCount),
+               dom.span({ className: "heap-tree-percent" }, percentTotalCount)),
       dom.span({ className: "heap-tree-item-field heap-tree-item-name", style: { marginLeft: depth * INDENT }},
         arrow,
         this.toLabel(item.name, toolbox)

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

@@ -9,6 +9,7 @@ support-files =
 [browser_memory-breakdowns-01.js]
     skip-if = debug # bug 1219554
 [browser_memory_no_allocation_stacks.js]
+[browser_memory_percents_01.js]
 [browser_memory-simple-01.js]
     skip-if = debug # bug 1219554
 [browser_memory_transferHeapSnapshot_e10s_01.js]

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

@@ -0,0 +1,48 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Sanity test that we calculate percentages in the tree.
+
+"use strict";
+
+const { breakdowns } = require("devtools/client/memory/constants");
+const { takeSnapshotAndCensus } = require("devtools/client/memory/actions/snapshot");
+const breakdownActions = require("devtools/client/memory/actions/breakdown");
+
+const TEST_URL = "http://example.com/browser/devtools/client/memory/test/browser/doc_steady_allocation.html";
+
+function checkCells(cells) {
+  ok(cells.length > 1, "Should have found some");
+  // Ignore the first header cell.
+  for (let cell of cells.slice(1)) {
+    const percent = cell.querySelector(".heap-tree-percent");
+    ok(percent, "should have a percent cell");
+    ok(percent.textContent.match(/^\d?\d%$/), "should be of the form nn% or n%");
+  }
+}
+
+this.test = makeMemoryTest(TEST_URL, function* ({ tab, panel }) {
+  const heapWorker = panel.panelWin.gHeapAnalysesClient;
+  const front = panel.panelWin.gFront;
+  const { getState, dispatch } = panel.panelWin.gStore;
+  const doc = panel.panelWin.document;
+
+  yield dispatch(takeSnapshotAndCensus(front, heapWorker));
+  yield dispatch(breakdownActions.setBreakdownAndRefresh(heapWorker,
+                                                         breakdowns.objectClass.breakdown));
+
+  is(getState().breakdown.by, "objectClass",
+     "Should be using object class breakdown");
+
+  const bytesCells = [...doc.querySelectorAll(".heap-tree-item-bytes")];
+  checkCells(bytesCells);
+
+  const totalBytesCells = [...doc.querySelectorAll(".heap-tree-item-total-bytes")];
+  checkCells(totalBytesCells);
+
+  const countCells = [...doc.querySelectorAll(".heap-tree-item-count")];
+  checkCells(countCells);
+
+  const totalCountCells = [...doc.querySelectorAll(".heap-tree-item-total-count")];
+  checkCells(totalCountCells);
+});

devtools/client/memory/utils.js

@@ -257,8 +257,10 @@ exports.getSnapshotTotals = function (snapshot) {
       census = census.children && census.children[0];
     }
   } else {
-    bytes = census.totalBytes;
-    count = census.totalCount;
+    if (census) {
+      bytes = census.totalBytes;
+      count = census.totalCount;
+    }
   }
 
   return {
@@ -266,4 +268,3 @@ exports.getSnapshotTotals = function (snapshot) {
     count: count || 0,
   };
 };
-

devtools/client/themes/memory.css

@@ -207,6 +207,24 @@ html, body, #app, #memory-tool {
   height: inherit;
 }
 
+.heap-tree-percent {
+  width: 30%;
+}
+
+.heap-tree-number {
+  width: 70%;
+  color: var(--theme-content-color3);
+}
+
+.focused .heap-tree-number {
+  color: var(--theme-selection-color);
+}
+
+.heap-tree-item, .header {
+  list-style-type: none;
+  height: var(--heap-tree-row-height);
+}
+
 .heap-tree-item-field {
   float: left;
 }
@@ -224,6 +242,21 @@ html, body, #app, #memory-tool {
   color: var(--theme-selection-color);
 }
 
+.header {
+  background-color: var(--theme-tab-toolbar-background);
+  border-color: var(--cell-border-color);
+  border-style: solid;
+  border-width: 0px 0px 1px 0px;
+}
+
+.header span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+  font-size: 90%;
+}
+
 .heap-tree-item-bytes,
 .heap-tree-item-count,
 .heap-tree-item-total-bytes,
@@ -231,16 +264,19 @@ html, body, #app, #memory-tool {
   text-align: end;
   border-inline-end: var(--cell-border-color) 1px solid;
   padding-inline-end: 5px;
+  display: flex;
+  flex-direction: row;
+  min-width: 10em;
 }
 
 .heap-tree-item-count,
 .heap-tree-item-total-count {
-  width: 5vw;
+  width: 8vw;
 }
 
 .heap-tree-item-bytes,
 .heap-tree-item-total-bytes {
-  width: 7vw;
+  width: 8vw;
 }
 
 .heap-tree-item-name {
@@ -308,3 +344,7 @@ html, body, #app, #memory-tool {
     text-align: center;
     padding: 5px;
 }
+
+label select {
+  margin: 5px;
+}