Bug 1415554 - Inspector to use prop-types and react-dom-factories r=gl

MozReview-Commit-ID: 7NxFwgFLDAL

devtools/client/inspector/animation/components/AnimationItem.js

@@ -4,8 +4,9 @@
 
 "use strict";
 
-const { DOM: dom, PropTypes, PureComponent } =
-  require("devtools/client/shared/vendor/react");
+const { PureComponent } = 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");
 
 class AnimationItem extends PureComponent {
   static get propTypes() {

devtools/client/inspector/animation/components/AnimationList.js

@@ -4,8 +4,9 @@
 
 "use strict";
 
-const { createFactory, DOM: dom, PropTypes, PureComponent } =
-  require("devtools/client/shared/vendor/react");
+const { createFactory, PureComponent } = 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 AnimationItem = createFactory(require("./AnimationItem"));
 

devtools/client/inspector/animation/components/App.js

@@ -4,8 +4,9 @@
 
 "use strict";
 
-const { createFactory, DOM: dom, PropTypes, PureComponent } =
-  require("devtools/client/shared/vendor/react");
+const { createFactory, PureComponent } = 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 AnimationList = createFactory(require("./AnimationList"));

devtools/client/inspector/animation/components/NoAnimationPanel.js

@@ -4,8 +4,9 @@
 
 "use strict";
 
-const { DOM: dom, PropTypes, PureComponent } =
-  require("devtools/client/shared/vendor/react");
+const { PureComponent } = 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 { LocalizationHelper } = require("devtools/shared/l10n");
 

devtools/client/inspector/boxmodel/components/BoxModel.js

@@ -4,12 +4,9 @@
 
 "use strict";
 
-const {
-  createFactory,
-  DOM: dom,
-  PropTypes,
-  PureComponent,
-} = require("devtools/client/shared/vendor/react");
+const { createFactory, PureComponent } = 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 BoxModelInfo = createFactory(require("./BoxModelInfo"));
 const BoxModelMain = createFactory(require("./BoxModelMain"));

devtools/client/inspector/boxmodel/components/BoxModelApp.js

@@ -5,11 +5,8 @@
 "use strict";
 
 const Services = require("Services");
-const {
-  createFactory,
-  PropTypes,
-  PureComponent,
-} = require("devtools/client/shared/vendor/react");
+const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { LocalizationHelper } = require("devtools/shared/l10n");
 

devtools/client/inspector/boxmodel/components/BoxModelEditable.js

@@ -4,11 +4,9 @@
 
 "use strict";
 
-const {
-  DOM: dom,
-  PropTypes,
-  PureComponent,
-} = require("devtools/client/shared/vendor/react");
+const { PureComponent } = 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 { editableItem } = require("devtools/client/shared/inplace-editor");
 
 const LONG_TEXT_ROTATE_LIMIT = 3;

devtools/client/inspector/boxmodel/components/BoxModelInfo.js

@@ -4,11 +4,9 @@
 
 "use strict";
 
-const {
-  DOM: dom,
-  PropTypes,
-  PureComponent,
-} = require("devtools/client/shared/vendor/react");
+const { PureComponent } = 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 { LocalizationHelper } = require("devtools/shared/l10n");
 
 const Types = require("../types");

devtools/client/inspector/boxmodel/components/BoxModelMain.js

@@ -4,12 +4,9 @@
 
 "use strict";
 
-const {
-  createFactory,
-  DOM: dom,
-  PropTypes,
-  PureComponent,
-} = require("devtools/client/shared/vendor/react");
+const { createFactory, PureComponent } = 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 { findDOMNode } = require("devtools/client/shared/vendor/react-dom");
 const { KeyCodes } = require("devtools/client/shared/keycodes");
 const { LocalizationHelper } = require("devtools/shared/l10n");

devtools/client/inspector/boxmodel/components/BoxModelProperties.js

@@ -4,12 +4,9 @@
 
 "use strict";
 
-const {
-  createFactory,
-  DOM: dom,
-  PropTypes,
-  PureComponent,
-} = require("devtools/client/shared/vendor/react");
+const { createFactory, PureComponent } = 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 { LocalizationHelper } = require("devtools/shared/l10n");
 
 const ComputedProperty = createFactory(require("./ComputedProperty"));

devtools/client/inspector/boxmodel/components/ComputedProperty.js

@@ -4,11 +4,9 @@
 
 "use strict";
 
-const {
-  DOM: dom,
-  PropTypes,
-  PureComponent,
-} = require("devtools/client/shared/vendor/react");
+const { PureComponent } = 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 { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
 const { Rep } = REPS;

devtools/client/inspector/boxmodel/types.js

@@ -4,13 +4,12 @@
 
 "use strict";
 
-const { PropTypes } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 /**
  * The box model data for the current selected node.
  */
 exports.boxModel = {
-
   // Whether or not the geometry editor is enabled
   geometryEditorEnabled: PropTypes.boolean,
 
@@ -19,5 +18,4 @@ exports.boxModel = {
 
   // The offset parent for the selected node
   offsetParent: PropTypes.object,
-
 };

devtools/client/inspector/components/InspectorTabPanel.js

@@ -6,10 +6,12 @@
 
 "use strict";
 
-const { DOM, Component, PropTypes } = 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 PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 // Shortcuts
-const { div } = DOM;
+const { div } = dom;
 
 /**
  * Helper panel component that is using an existing DOM node

devtools/client/inspector/extensions/components/ExtensionSidebar.js

@@ -4,12 +4,9 @@
 
 "use strict";
 
-const {
-  createFactory,
-  DOM: dom,
-  PropTypes,
-  PureComponent,
-} = require("devtools/client/shared/vendor/react");
+const { createFactory, PureComponent } = 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 ObjectTreeView = createFactory(require("./ObjectTreeView"));

devtools/client/inspector/extensions/components/ObjectTreeView.js

@@ -4,11 +4,8 @@
 
 "use strict";
 
-const {
-  createFactory,
-  PropTypes,
-  PureComponent,
-} = require("devtools/client/shared/vendor/react");
+const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
 const { Rep } = REPS;

devtools/client/inspector/flexbox/types.js

@@ -4,14 +4,12 @@
 
 "use strict";
 
-const { PropTypes } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 exports.flexbox = {
-
   // The id of the flexbox container.
   id: PropTypes.number,
 
   // The node front of the flexbox container.
   nodeFront: PropTypes.object,
-
 };

devtools/client/inspector/fonts/components/Font.js

@@ -4,11 +4,9 @@
 
 "use strict";
 
-const {
-  DOM: dom,
-  PropTypes,
-  PureComponent,
-} = require("devtools/client/shared/vendor/react");
+const { PureComponent } = 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 { getStr } = require("../utils/l10n");
 const Types = require("../types");

devtools/client/inspector/fonts/components/FontList.js

@@ -4,12 +4,9 @@
 
 "use strict";
 
-const {
-  createFactory,
-  DOM: dom,
-  PropTypes,
-  PureComponent,
-} = require("devtools/client/shared/vendor/react");
+const { createFactory, PureComponent } = 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 Font = createFactory(require("./Font"));
 

devtools/client/inspector/fonts/components/FontsApp.js

@@ -4,12 +4,9 @@
 
 "use strict";
 
-const {
-  createFactory,
-  DOM: dom,
-  PropTypes,
-  PureComponent,
-} = require("devtools/client/shared/vendor/react");
+const { createFactory, PureComponent } = 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 SearchBox = createFactory(require("devtools/client/shared/components/SearchBox"));

devtools/client/inspector/fonts/types.js

@@ -4,13 +4,12 @@
 
 "use strict";
 
-const { PropTypes } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 /**
  * A single font.
  */
 exports.font = {
-
   // The name of the font family
   CSSFamilyName: PropTypes.string,
 
@@ -31,6 +30,4 @@ exports.font = {
 
   // The URI of the font file
   URI: PropTypes.string,
-
 };
-

devtools/client/inspector/grids/components/Grid.js

@@ -4,12 +4,9 @@
 
 "use strict";
 
-const {
-  createFactory,
-  DOM: dom,
-  PropTypes,
-  PureComponent,
-} = require("devtools/client/shared/vendor/react");
+const { createFactory, PureComponent } = 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 GridDisplaySettings = createFactory(require("./GridDisplaySettings"));
 const GridList = createFactory(require("./GridList"));

devtools/client/inspector/grids/components/GridDisplaySettings.js

@@ -4,11 +4,9 @@
 
 "use strict";
 
-const {
-  DOM: dom,
-  PropTypes,
-  PureComponent,
-} = require("devtools/client/shared/vendor/react");
+const { PureComponent } = 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 Types = require("../types");
 const { getStr } = require("../utils/l10n");

devtools/client/inspector/grids/components/GridItem.js

@@ -4,11 +4,9 @@
 
 "use strict";
 
-const {
-  DOM: dom,
-  PropTypes,
-  PureComponent,
-} = require("devtools/client/shared/vendor/react");
+const { PureComponent } = 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 { findDOMNode } = require("devtools/client/shared/vendor/react-dom");
 
 // Reps

devtools/client/inspector/grids/components/GridList.js

@@ -4,12 +4,9 @@
 
 "use strict";
 
-const {
-  createFactory,
-  DOM: dom,
-  PropTypes,
-  PureComponent,
-} = require("devtools/client/shared/vendor/react");
+const { createFactory, PureComponent } = 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 GridItem = createFactory(require("./GridItem"));
 

devtools/client/inspector/grids/components/GridOutline.js

@@ -5,11 +5,9 @@
 "use strict";
 
 const Services = require("Services");
-const {
-  DOM: dom,
-  PropTypes,
-  PureComponent,
-} = require("devtools/client/shared/vendor/react");
+const { PureComponent } = 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 Types = require("../types");
 const { getStr } = require("../utils/l10n");

devtools/client/inspector/grids/types.js

@@ -4,13 +4,12 @@
 
 "use strict";
 
-const { PropTypes } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 /**
  * A single grid container in the document.
  */
 exports.grid = {
-
   // The id of the grid
   id: PropTypes.number,
 
@@ -25,18 +24,15 @@ exports.grid = {
 
   // The node front of the grid container
   nodeFront: PropTypes.object,
-
 };
 
 /**
  * The grid highlighter settings on what to display in its grid overlay in the document.
  */
 exports.highlighterSettings = {
-
   // Whether or not the grid highlighter should show the grid line numbers
   showGridLineNumbers: PropTypes.bool,
 
   // Whether or not the grid highlighter extends the grid lines infinitely
   showInfiniteLines: PropTypes.bool,
-
 };

devtools/client/inspector/layout/components/Accordion.js

@@ -9,8 +9,9 @@
 
 "use strict";
 
-const React = require("devtools/client/shared/vendor/react");
-const { PureComponent, DOM: dom, PropTypes } = React;
+const { createElement, PureComponent } = 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 { div, span } = dom;
 
@@ -76,7 +77,7 @@ class Accordion extends PureComponent {
           { className: "_content",
             style: { display: opened[i] ? "block" : "none" }
           },
-          React.createElement(item.component, item.componentProps || {})
+          createElement(item.component, item.componentProps || {})
         ) :
         null
     );

devtools/client/inspector/layout/components/LayoutApp.js

@@ -5,12 +5,9 @@
 "use strict";
 
 const Services = require("Services");
-const {
-  createFactory,
-  DOM: dom,
-  PropTypes,
-  PureComponent,
-} = require("devtools/client/shared/vendor/react");
+const { createFactory, PureComponent } = 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 { LocalizationHelper } = require("devtools/shared/l10n");
 

devtools/client/inspector/test/browser_inspector_addSidebarTab.js

@@ -16,7 +16,8 @@ add_task(function* () {
   let { inspector } = yield openInspectorForURL(TEST_URI);
 
   const React = inspector.React;
-  const { div } = React.DOM;
+  const dom = require("devtools/client/shared/vendor/react-dom-factories");
+  const { div } = dom;
 
   info("Adding custom panel.");