Bug 1219385 - Small fixes for heap view's tree items; r=jsantell

* Display function display name when breaking down by allocation stack.
* Properly check or uncheck the "Invert tree" checkbox depending on if we are
  inverting the heap view's tree or not.

devtools/client/memory/app.js

@@ -22,10 +22,7 @@ const App = createClass({
   propTypes: appModel,
 
   getDefaultProps() {
-    return {
-      breakdown: breakdowns.coarseType.breakdown,
-      inverted: false,
-    };
+    return {};
   },
 
   childContextTypes: {
@@ -95,10 +92,7 @@ const App = createClass({
  * and passed to components.
  */
 function mapStateToProps (state) {
-  return {
-    allocations: state.allocations,
-    snapshots: state.snapshots
-  };
+  return state;
 }
 
 module.exports = connect(mapStateToProps)(App);

devtools/client/memory/components/frame.js

@@ -18,7 +18,7 @@ const Frame = module.exports = createClass({
 
     let url = new URL(frame.source);
     let spec = url.toString();
-    let func = frame.functionDisplayFrame || "";
+    let func = frame.functionDisplayName || "";
     let tooltip = `${func} (${spec}:${frame.line}:${frame.column})`;
     let onClick = () => toolbox.viewSourceInDebugger(spec, frame.line);
 

devtools/client/memory/components/toolbar.js

@@ -39,6 +39,7 @@ const Toolbar = module.exports = createClass({
         dom.label({},
           "Breakdown by ",
           dom.select({
+            id: "select-breakdown",
             className: `select-breakdown`,
             onChange: e => onBreakdownChange(e.target.value),
           }, ...breakdowns.map(({ name, displayName }) => dom.option({ key: name, value: name }, displayName)))
@@ -46,6 +47,7 @@ const Toolbar = module.exports = createClass({
 
         dom.label({},
           dom.input({
+            id: "invert-tree-checkbox",
             type: "checkbox",
             checked: inverted,
             onChange: onToggleInverted,

devtools/client/memory/reducers/inverted.js

@@ -6,5 +6,9 @@
 const { actions } = require("../constants");
 
 module.exports = function (inverted = false, action) {
-  return action.type === actions.TOGGLE_INVERTED ? !inverted : inverted;
+  if (action.type === actions.TOGGLE_INVERTED) {
+    return !inverted;
+  } else {
+    return inverted;
+  }
 };

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

@@ -10,7 +10,7 @@ const { breakdowns } = require("devtools/client/memory/constants");
 const { toggleRecordingAllocationStacks } = require("devtools/client/memory/actions/allocations");
 const { takeSnapshotAndCensus } = require("devtools/client/memory/actions/snapshot");
 const breakdownActions = require("devtools/client/memory/actions/breakdown");
-const { toggleInverted } = require("devtools/client/memory/actions/inverted");
+const { toggleInvertedAndRefresh } = require("devtools/client/memory/actions/inverted");
 
 const TEST_URL = "http://example.com/browser/devtools/client/memory/test/browser/doc_steady_allocation.html";
 
@@ -18,9 +18,12 @@ 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;
 
-  dispatch(toggleInverted());
+  yield dispatch(toggleInvertedAndRefresh(heapWorker));
   ok(getState().inverted, true);
+  ok(doc.getElementById("invert-tree-checkbox").checked,
+     "invert-tree-checkbox should be checked");
 
   dispatch(breakdownActions.setBreakdown(breakdowns.allocationStack.breakdown));
   is(getState().breakdown.by, "allocationStack");
@@ -33,7 +36,8 @@ this.test = makeMemoryTest(TEST_URL, function* ({ tab, panel }) {
 
   yield dispatch(takeSnapshotAndCensus(front, heapWorker));
 
-  const doc = panel.panelWin.document;
-  ok(doc.querySelector(".frame-link-function-display-name"),
-     "Should have rendered some allocation stack tree items");
+  const names = [...doc.querySelectorAll(".frame-link-function-display-name")];
+  ok(names.length, "Should have rendered some allocation stack tree items");
+  ok(names.some(e => !!e.textContent.trim()),
+     "And at least some of them should have functionDisplayNames");
 });