Bug 1417462 - Memory Tool to use prop-types and react-dom-factories r?gregtatum draft
authorMichael Ratcliffe <mratcliffe@mozilla.com>
Wed, 15 Nov 2017 15:30:49 +0000
changeset 698346 6bf4b94ac03c6d7cc3928bcebd59b8a66898ff26
parent 698261 45715ece25fcb064eee4f977ebd842d44a87f22b
child 740352 58527a3c443db0e13374c72f67f5bb88f0129826
push id89261
push userbmo:mratcliffe@mozilla.com
push dateWed, 15 Nov 2017 15:31:24 +0000
reviewersgregtatum
bugs1417462
milestone59.0a1
Bug 1417462 - Memory Tool to use prop-types and react-dom-factories r?gregtatum MozReview-Commit-ID: IDGNpS5fPKZ
devtools/client/memory/app.js
devtools/client/memory/components/Census.js
devtools/client/memory/components/CensusHeader.js
devtools/client/memory/components/CensusTreeItem.js
devtools/client/memory/components/DominatorTree.js
devtools/client/memory/components/DominatorTreeHeader.js
devtools/client/memory/components/DominatorTreeItem.js
devtools/client/memory/components/Heap.js
devtools/client/memory/components/Individuals.js
devtools/client/memory/components/IndividualsHeader.js
devtools/client/memory/components/List.js
devtools/client/memory/components/ShortestPaths.js
devtools/client/memory/components/SnapshotListItem.js
devtools/client/memory/components/Toolbar.js
devtools/client/memory/components/TreeMap.js
devtools/client/memory/models.js
devtools/client/memory/test/chrome/head.js
devtools/client/memory/test/chrome/test_DominatorTreeItem_01.html
--- a/devtools/client/memory/app.js
+++ b/devtools/client/memory/app.js
@@ -1,17 +1,19 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 "use strict";
 
 const { assert } = require("devtools/shared/DevToolsUtils");
 const { appinfo } = require("Services");
-const { DOM: dom, Component, createFactory, PropTypes } = require("devtools/client/shared/vendor/react");
+const { Component, createFactory } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { censusDisplays, labelDisplays, treeMapDisplays, diffingState, viewState } = require("./constants");
 const { toggleRecordingAllocationStacks } = require("./actions/allocations");
 const { setCensusDisplayAndRefresh } = require("./actions/census-display");
 const { setLabelDisplayAndRefresh } = require("./actions/label-display");
 const { setTreeMapDisplayAndRefresh } = require("./actions/tree-map-display");
 
 const {
--- a/devtools/client/memory/components/Census.js
+++ b/devtools/client/memory/components/Census.js
@@ -1,15 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 "use strict";
 
-const { Component, PropTypes, createFactory } = require("devtools/client/shared/vendor/react");
+const { Component, createFactory } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const Tree = createFactory(require("devtools/client/shared/components/Tree"));
 const CensusTreeItem = createFactory(require("./CensusTreeItem"));
 const { TREE_ROW_HEIGHT } = require("../constants");
 const { censusModel, diffingModel } = require("../models");
 
 class Census extends Component {
   static get propTypes() {
     return {
--- a/devtools/client/memory/components/CensusHeader.js
+++ b/devtools/client/memory/components/CensusHeader.js
@@ -1,15 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 "use strict";
 
-const { DOM: dom, Component } = require("devtools/client/shared/vendor/react");
+const { Component } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const { L10N } = require("../utils");
 const models = require("../models");
 
 class CensusHeader extends Component {
   static get propTypes() {
     return {
       diffing: models.diffingModel,
     };
--- a/devtools/client/memory/components/CensusTreeItem.js
+++ b/devtools/client/memory/components/CensusTreeItem.js
@@ -1,20 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 "use strict";
 
 const { isSavedFrame } = require("devtools/shared/DevToolsUtils");
-const {
-  DOM: dom,
-  Component,
-  createFactory,
-  PropTypes
-} = require("devtools/client/shared/vendor/react");
+const { Component, createFactory } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { L10N, formatNumber, formatPercent } = require("../utils");
 const Frame = createFactory(require("devtools/client/shared/components/Frame"));
 const { TREE_ROW_HEIGHT } = require("../constants");
 const models = require("../models");
 
 class CensusTreeItem extends Component {
   static get propTypes() {
     return {
--- a/devtools/client/memory/components/DominatorTree.js
+++ b/devtools/client/memory/components/DominatorTree.js
@@ -1,15 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 "use strict";
 
-const { DOM: dom, Component, PropTypes, createFactory } = require("devtools/client/shared/vendor/react");
+const { Component, createFactory } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { assert } = require("devtools/shared/DevToolsUtils");
 const { createParentMap } = require("devtools/shared/heapsnapshot/CensusUtils");
 const Tree = createFactory(require("devtools/client/shared/components/Tree"));
 const DominatorTreeItem = createFactory(require("./DominatorTreeItem"));
 const { L10N } = require("../utils");
 const { TREE_ROW_HEIGHT, dominatorTreeState } = require("../constants");
 const { dominatorTreeModel } = require("../models");
 const DominatorTreeLazyChildren = require("../dominator-tree-lazy-children");
--- a/devtools/client/memory/components/DominatorTreeHeader.js
+++ b/devtools/client/memory/components/DominatorTreeHeader.js
@@ -1,15 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 "use strict";
 
-const { DOM: dom, Component } = require("devtools/client/shared/vendor/react");
+const { Component } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const { L10N } = require("../utils");
 
 class DominatorTreeHeader extends Component {
   static get propTypes() {
     return { };
   }
 
   render() {
--- a/devtools/client/memory/components/DominatorTreeItem.js
+++ b/devtools/client/memory/components/DominatorTreeItem.js
@@ -1,16 +1,18 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 "use strict";
 
 const { assert, isSavedFrame } = require("devtools/shared/DevToolsUtils");
-const { DOM: dom, Component, createFactory, PropTypes } = require("devtools/client/shared/vendor/react");
+const { Component, createFactory } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { L10N, formatNumber, formatPercent } = require("../utils");
 const Frame = createFactory(require("devtools/client/shared/components/Frame"));
 const { TREE_ROW_HEIGHT } = require("../constants");
 
 class SeparatorClass extends Component {
   render() {
     return dom.span({ className: "separator" }, "›");
   }
--- a/devtools/client/memory/components/Heap.js
+++ b/devtools/client/memory/components/Heap.js
@@ -1,15 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 "use strict";
 
-const { DOM: dom, Component, PropTypes, createFactory } = require("devtools/client/shared/vendor/react");
+const { Component, createFactory } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { assert, safeErrorString } = require("devtools/shared/DevToolsUtils");
 const Census = createFactory(require("./Census"));
 const CensusHeader = createFactory(require("./CensusHeader"));
 const DominatorTree = createFactory(require("./DominatorTree"));
 const DominatorTreeHeader = createFactory(require("./DominatorTreeHeader"));
 const TreeMap = createFactory(require("./TreeMap"));
 const HSplitBox = createFactory(require("devtools/client/shared/components/HSplitBox"));
 const Individuals = createFactory(require("./Individuals"));
--- a/devtools/client/memory/components/Individuals.js
+++ b/devtools/client/memory/components/Individuals.js
@@ -1,15 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 "use strict";
 
-const { Component, PropTypes, createFactory } = require("devtools/client/shared/vendor/react");
+const { Component, createFactory } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const Tree = createFactory(require("devtools/client/shared/components/Tree"));
 const DominatorTreeItem = createFactory(require("./DominatorTreeItem"));
 const { TREE_ROW_HEIGHT } = require("../constants");
 const models = require("../models");
 
 /**
  * The list of individuals in a census group.
  */
--- a/devtools/client/memory/components/IndividualsHeader.js
+++ b/devtools/client/memory/components/IndividualsHeader.js
@@ -1,15 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 "use strict";
 
-const { DOM: dom, Component } = require("devtools/client/shared/vendor/react");
+const { Component } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const { L10N } = require("../utils");
 
 class IndividualsHeader extends Component {
   static get propTypes() {
     return { };
   }
 
   render() {
--- a/devtools/client/memory/components/List.js
+++ b/devtools/client/memory/components/List.js
@@ -1,15 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 "use strict";
 
-const { DOM: dom, Component, PropTypes } = require("devtools/client/shared/vendor/react");
+const { Component } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
 
 /**
  * Generic list component that takes another react component to represent
  * the children nodes as `itemComponent`, and a list of items to render
  * as that component with a click handler.
  */
 class List extends Component {
   static get propTypes() {
--- a/devtools/client/memory/components/ShortestPaths.js
+++ b/devtools/client/memory/components/ShortestPaths.js
@@ -1,19 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 "use strict";
 
-const {
-  DOM: dom,
-  Component,
-  PropTypes,
-} = require("devtools/client/shared/vendor/react");
+const { Component } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const { isSavedFrame } = require("devtools/shared/DevToolsUtils");
 const { getSourceNames } = require("devtools/client/shared/source-utils");
 const { L10N } = require("../utils");
 
 const GRAPH_DEFAULTS = {
   translate: [20, 20],
   scale: 1
 };
--- a/devtools/client/memory/components/SnapshotListItem.js
+++ b/devtools/client/memory/components/SnapshotListItem.js
@@ -1,15 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 "use strict";
 
-const { DOM: dom, Component, PropTypes } = require("devtools/client/shared/vendor/react");
+const { Component } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const {
   L10N,
   getSnapshotTitle,
   getSnapshotTotals,
   getStatusText,
   snapshotIsDiffable,
   getSavedCensus
 } = require("../utils");
--- a/devtools/client/memory/components/Toolbar.js
+++ b/devtools/client/memory/components/Toolbar.js
@@ -1,15 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 "use strict";
 
 const { assert } = require("devtools/shared/DevToolsUtils");
-const { DOM: dom, Component, PropTypes } = require("devtools/client/shared/vendor/react");
+const { Component } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const { L10N } = require("../utils");
 const models = require("../models");
 const { viewState } = require("../constants");
 
 class Toolbar extends Component {
   static get propTypes() {
     return {
       censusDisplays: PropTypes.arrayOf(PropTypes.shape({
--- a/devtools/client/memory/components/TreeMap.js
+++ b/devtools/client/memory/components/TreeMap.js
@@ -1,15 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 "use strict";
 
-const { DOM: dom, Component } = require("devtools/client/shared/vendor/react");
+const { Component } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const { treeMapModel } = require("../models");
 const startVisualization = require("./tree-map/start");
 
 class TreeMap extends Component {
   static get propTypes() {
     return {
       treeMap: treeMapModel
     };
--- a/devtools/client/memory/models.js
+++ b/devtools/client/memory/models.js
@@ -5,17 +5,17 @@
 /* global treeMapState, censusState */
 /* eslint no-shadow: ["error", { "allow": ["app"] }] */
 
 "use strict";
 
 const { assert } = require("devtools/shared/DevToolsUtils");
 const { MemoryFront } = require("devtools/shared/fronts/memory");
 const HeapAnalysesClient = require("devtools/shared/heapsnapshot/HeapAnalysesClient");
-const { PropTypes } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const {
   snapshotState: states,
   diffingState,
   dominatorTreeState,
   viewState,
   individualsState,
 } = require("./constants");
 
--- a/devtools/client/memory/test/chrome/head.js
+++ b/devtools/client/memory/test/chrome/head.js
@@ -43,26 +43,28 @@ var {
 const {
   L10N,
 } = require("devtools/client/memory/utils");
 
 var models = require("devtools/client/memory/models");
 
 var Immutable = require("devtools/client/shared/vendor/immutable");
 var React = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
 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/CensusTreeItem"));
-var DominatorTreeComponent = React.createFactory(require("devtools/client/memory/components/DominatorTree"));
-var DominatorTreeItem = React.createFactory(require("devtools/client/memory/components/DominatorTreeItem"));
-var ShortestPaths = React.createFactory(require("devtools/client/memory/components/ShortestPaths"));
-var TreeMap = React.createFactory(require("devtools/client/memory/components/TreeMap"));
-var SnapshotListItem = React.createFactory(require("devtools/client/memory/components/SnapshotListItem"));
-var List = React.createFactory(require("devtools/client/memory/components/List"));
-var Toolbar = React.createFactory(require("devtools/client/memory/components/Toolbar"));
+var { createFactory } = React;
+var Heap = createFactory(require("devtools/client/memory/components/Heap"));
+var CensusTreeItem = createFactory(require("devtools/client/memory/components/CensusTreeItem"));
+var DominatorTreeComponent = createFactory(require("devtools/client/memory/components/DominatorTree"));
+var DominatorTreeItem = createFactory(require("devtools/client/memory/components/DominatorTreeItem"));
+var ShortestPaths = createFactory(require("devtools/client/memory/components/ShortestPaths"));
+var TreeMap = createFactory(require("devtools/client/memory/components/TreeMap"));
+var SnapshotListItem = createFactory(require("devtools/client/memory/components/SnapshotListItem"));
+var List = createFactory(require("devtools/client/memory/components/List"));
+var Toolbar = createFactory(require("devtools/client/memory/components/Toolbar"));
 
 // All tests are asynchronous.
 SimpleTest.waitForExplicitFinish();
 
 var noop = () => {};
 
 var TEST_CENSUS_TREE_ITEM_PROPS = Object.freeze({
   item: Object.freeze({
--- a/devtools/client/memory/test/chrome/test_DominatorTreeItem_01.html
+++ b/devtools/client/memory/test/chrome/test_DominatorTreeItem_01.html
@@ -18,17 +18,17 @@ Test that we don't display `JS::ubi::Roo
         <script type="application/javascript">
          window.onload = Task.async(function* () {
            try {
              const container = document.getElementById("container");
 
              yield renderComponent(DominatorTreeItem({
                item: makeTestDominatorTreeNode({ label: ["other", "JS::ubi::RootList"] }),
                depth: 0,
-               arrow: React.DOM.div(),
+               arrow: dom.div(),
                focused: true,
                getPercentSize: _ => 50,
                onViewSourceInDebugger: _ => { },
              }), container);
 
              ok(container.textContent.indexOf("JS::ubi::RootList") == -1,
                 "Should not display `JS::ubi::RootList`");
              ok(container.textContent.indexOf("GC Roots") >= 0,