Bug 1217946 - Fix all validation failures and deprecated components. r=fitzgen

devtools/client/memory/app.js

@@ -4,6 +4,7 @@
 
 const { DOM: dom, createClass, createFactory, PropTypes } = require("devtools/client/shared/vendor/react");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
+const { breakdowns } = require("./constants");
 const { toggleRecordingAllocationStacks } = require("./actions/allocations");
 const { setBreakdownAndRefresh } = require("./actions/breakdown");
 const { toggleInvertedAndRefresh } = require("./actions/inverted");
@@ -20,6 +21,13 @@ const App = createClass({
 
   propTypes: appModel,
 
+  getDefaultProps() {
+    return {
+      breakdown: breakdowns.coarseType.breakdown,
+      inverted: false,
+    };
+  },
+
   childContextTypes: {
     front: PropTypes.any,
     heapWorker: PropTypes.any,
@@ -46,7 +54,7 @@ const App = createClass({
     let selectedSnapshot = snapshots.find(s => s.selected);
 
     return (
-      dom.div({ id: "memory-tool" }, [
+      dom.div({ id: "memory-tool" },
 
         Toolbar({
           breakdowns: getBreakdownDisplayData(),
@@ -61,7 +69,7 @@ const App = createClass({
             dispatch(toggleInvertedAndRefresh(heapWorker))
         }),
 
-        dom.div({ id: "memory-tool-container" }, [
+        dom.div({ id: "memory-tool-container" },
           List({
             itemComponent: SnapshotListItem,
             items: snapshots,
@@ -71,9 +79,9 @@ const App = createClass({
           HeapView({
             snapshot: selectedSnapshot,
             onSnapshotClick: () => dispatch(takeSnapshotAndCensus(front, heapWorker)),
-          }),
-        ])
-      ])
+          })
+        )
+      )
     );
   },
 });

devtools/client/memory/components/heap.js

@@ -76,14 +76,14 @@ const Heap = module.exports = createClass({
 
     switch (state) {
       case "initial":
-        content = dom.button({
+        content = [dom.button({
           className: "devtools-toolbarbutton take-snapshot",
           onClick: onSnapshotClick,
           // Want to use the [standalone] tag to leverage our styles,
           // but React hates that evidently
           "data-standalone": true,
           "data-text-only": true,
-        }, TAKE_SNAPSHOT_TEXT)
+        }, TAKE_SNAPSHOT_TEXT)];
         break;
       case states.ERROR:
         content = [
@@ -96,7 +96,7 @@ const Heap = module.exports = createClass({
       case states.READING:
       case states.READ:
       case states.SAVING_CENSUS:
-        content = dom.span({ className: "snapshot-status devtools-throbber" }, statusText)
+        content = [dom.span({ className: "snapshot-status devtools-throbber" }, statusText)];
         break;
       case states.SAVED_CENSUS:
         content = [
@@ -111,7 +111,7 @@ const Heap = module.exports = createClass({
         ];
         break;
     }
-    let pane = dom.div({ className: "heap-view-panel", "data-state": state }, content);
+    let pane = dom.div({ className: "heap-view-panel", "data-state": state }, ...content);
 
     return (
       dom.div({ id: "heap-view", "data-state": state }, pane)

devtools/client/memory/components/list.js

@@ -22,9 +22,9 @@ const List = module.exports = createClass({
     let { items, onClick, itemComponent: Item } = this.props;
 
     return (
-      dom.ul({ className: "list" }, items.map((item, index) => {
+      dom.ul({ className: "list" }, ...items.map((item, index) => {
         return Item({
-          item, index, onClick: () => onClick(item),
+          key: index, item, index, onClick: () => onClick(item),
         });
       }))
     );

devtools/client/memory/components/toolbar.js

@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-const { DOM, createClass, PropTypes } = require("devtools/client/shared/vendor/react");
+const { DOM: dom, createClass, PropTypes } = require("devtools/client/shared/vendor/react");
 
 const models = require("../models");
 
@@ -33,29 +33,29 @@ const Toolbar = module.exports = createClass({
     } = this.props;
 
     return (
-      DOM.div({ className: "devtools-toolbar" }, [
-        DOM.button({ className: `take-snapshot devtools-button`, onClick: onTakeSnapshotClick }),
+      dom.div({ className: "devtools-toolbar" },
+        dom.button({ className: `take-snapshot devtools-button`, onClick: onTakeSnapshotClick }),
 
-        DOM.label({},
+        dom.label({},
           "Breakdown by ",
-          DOM.select({
+          dom.select({
             className: `select-breakdown`,
             onChange: e => onBreakdownChange(e.target.value),
-          }, breakdowns.map(({ name, displayName }) => DOM.option({ value: name }, displayName)))
+          }, ...breakdowns.map(({ name, displayName }) => dom.option({ key: name, value: name }, displayName)))
         ),
 
-        DOM.label({}, [
-          DOM.input({
+        dom.label({},
+          dom.input({
             type: "checkbox",
             checked: inverted,
             onChange: onToggleInverted,
           }),
           // TODO bug 1214799
           "Invert tree"
-        ]),
+        ),
 
-        DOM.label({}, [
-          DOM.input({
+        dom.label({},
+          dom.input({
             type: "checkbox",
             checked: allocations.recording,
             disabled: allocations.togglingInProgress,
@@ -63,8 +63,8 @@ const Toolbar = module.exports = createClass({
           }),
           // TODO bug 1214799
           "Record allocation stacks"
-        ])
-])
+        )
+      )
     );
   }
 });

devtools/client/memory/components/tree.js

@@ -45,7 +45,7 @@ const ArrowExpander = createFactory(createClass({
 const TreeNode = createFactory(createClass({
   componentDidUpdate() {
     if (this.props.focused) {
-      this.refs.button.getDOMNode().focus();
+      this.refs.button.focus();
     }
   },
 
@@ -244,7 +244,7 @@ const Tree = module.exports = createClass({
    */
   _updateHeight() {
     this.setState({
-      height: this.refs.tree.getDOMNode().clientHeight
+      height: this.refs.tree.clientHeight
     });
   },
 
@@ -361,8 +361,8 @@ const Tree = module.exports = createClass({
    */
   _onScroll(e) {
     this.setState({
-      scroll: Math.max(this.refs.tree.getDOMNode().scrollTop, 0),
-      height: this.refs.tree.getDOMNode().clientHeight
+      scroll: Math.max(this.refs.tree.scrollTop, 0),
+      height: this.refs.tree.clientHeight
     });
   },
 

devtools/client/memory/models.js

@@ -19,6 +19,7 @@ let breakdownModel = exports.breakdown = PropTypes.shape({
 /**
  * Snapshot model.
  */
+let stateKeys = Object.keys(states).map(state => states[state]);
 let snapshotModel = exports.snapshot = PropTypes.shape({
   // Unique ID for a snapshot
   id: PropTypes.number.isRequired,
@@ -37,19 +38,18 @@ let snapshotModel = exports.snapshot = PropTypes.shape({
   error: PropTypes.object,
   // State the snapshot is in
   // @see ./constants.js
-  state: function (props, propName) {
-    let stateNames = Object.keys(states);
-    let current = props.state;
+  state: function (snapshot, propName) {
+    let current = snapshot.state;
     let shouldHavePath = [states.SAVED, states.READ, states.SAVING_CENSUS, states.SAVED_CENSUS];
     let shouldHaveCensus = [states.SAVED_CENSUS];
 
-    if (!stateNames.includes(current)) {
-      throw new Error(`Snapshot state must be one of ${stateNames}.`);
+    if (!stateKeys.includes(current)) {
+      throw new Error(`Snapshot state must be one of ${stateKeys}.`);
     }
-    if (shouldHavePath.includes(current) && !path) {
+    if (shouldHavePath.includes(current) && !snapshot.path) {
       throw new Error(`Snapshots in state ${current} must have a snapshot path.`);
     }
-    if (shouldHaveCensus.includes(current) && (!props.census || !props.breakdown)) {
+    if (shouldHaveCensus.includes(current) && (!snapshot.census || !snapshot.breakdown)) {
       throw new Error(`Snapshots in state ${current} must have a census and breakdown.`);
     }
   },

devtools/client/themes/memory.css

@@ -122,7 +122,6 @@ html, .theme-body, #app, #memory-tool, #memory-tool-container {
   border-bottom: 1px solid rgba(128,128,128,0.15);
   padding: 8px;
   cursor: pointer;
-  color: var(--theme-selection-color);
 }
 
 .list > li.selected {