Bug 1219421 - Guide users to recording allocations when no allocation stacks are present; r=jsantell

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

@@ -95,6 +95,11 @@ snapshot.state.saving-census=Saving census…
 # state ERROR, used in the snapshot list view.
 snapshot.state.error=Error
 
+# LOCALIZATION NOTE (heapview.noAllocationStacks): The message displayed to
+# users when selecting a breakdown by "allocation stack" but no allocation
+# stacks were recorded in the heap snapshot.
+heapview.noAllocationStacks=No allocation stacks found. Record allocation stacks before taking a heap snapshot.
+
 # LOCALIZATION NOTE (heapview.field.bytes): The name of the column in the heap view for bytes.
 heapview.field.bytes=Bytes
 

devtools/client/memory/components/heap.js

@@ -98,7 +98,16 @@ const Heap = module.exports = createClass({
         content = [dom.span({ className: "snapshot-status devtools-throbber" }, statusText)];
         break;
       case states.SAVED_CENSUS:
-        content = [
+        content = [];
+
+        if (snapshot.breakdown.by === "allocationStack"
+            && census.children.length === 1
+            && census.children[0].name === "noStack") {
+          content.push(dom.div({ className: "error no-allocation-stacks" },
+                               L10N.getStr("heapview.noAllocationStacks")));
+        }
+
+        content.push(
           dom.div({ className: "header" },
             dom.span({ className: "heap-tree-item-bytes" }, L10N.getStr("heapview.field.bytes")),
             dom.span({ className: "heap-tree-item-count" }, L10N.getStr("heapview.field.count")),
@@ -107,7 +116,7 @@ const Heap = module.exports = createClass({
             dom.span({ className: "heap-tree-item-name" }, L10N.getStr("heapview.field.name"))
           ),
           Tree(createTreeProperties(snapshot.census, toolbox))
-        ];
+        );
         break;
     }
     let pane = dom.div({ className: "heap-view-panel", "data-state": state }, ...content);

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

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

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

@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Sanity test that we can show allocation stack breakdowns 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";
+
+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;
+
+  ok(!getState().allocations.recording,
+     "Should not be recording allocagtions");
+
+  yield dispatch(takeSnapshotAndCensus(front, heapWorker));
+  yield dispatch(breakdownActions.setBreakdownAndRefresh(heapWorker,
+                                                         breakdowns.allocationStack.breakdown));
+
+  is(getState().breakdown.by, "allocationStack",
+     "Should be using allocation stack breakdown");
+
+  ok(!getState().allocations.recording,
+     "Should still not be recording allocagtions");
+
+  ok(doc.querySelector(".no-allocation-stacks"),
+     "Because we did not record allocations, the no-allocation-stack warning should be visible");
+});

devtools/client/themes/memory.css

@@ -332,3 +332,11 @@ html, .theme-body, #app, #memory-tool, #memory-tool-container {
 .frame-link-function-display-name {
   margin-right: 5px;
 }
+
+.no-allocation-stacks {
+    border-color: var(--theme-splitter-color);
+    border-style: solid;
+    border-width: 0px 0px 1px 0px;
+    text-align: center;
+    padding: 5px;
+}