From b009e02f5b8db0bdb26544bba184d08ddcb13f17 Mon Sep 17 00:00:00 2001
From: Michael Ratcliffe <mratcliffe@mozilla.com>
Date: Fri, 10 Nov 2017 22:16:39 +0000
Subject: [PATCH] Bug 1415650 - Web Console to use prop-types and
 react-dom-factories r=Honza

MozReview-Commit-ID: 5T3asRQBmuD

--HG--
extra : rebase_source : ca651cd9665878e9a14eb03c902aa8f1c16d31fa
---
 .../webconsole/net/components/cookies-tab.js  | 12 +++---
 .../webconsole/net/components/headers-tab.js  |  9 ++--
 .../net/components/net-info-body.js           |  4 +-
 .../net/components/net-info-group-list.js     |  7 ++--
 .../net/components/net-info-group.js          | 13 +++---
 .../net/components/net-info-params.js         | 20 ++++-----
 .../webconsole/net/components/params-tab.js   |  9 ++--
 .../webconsole/net/components/post-tab.js     | 37 ++++++++---------
 .../webconsole/net/components/response-tab.js | 41 ++++++++++---------
 .../webconsole/net/components/size-limit.js   | 13 +++---
 .../webconsole/net/components/spinner.js      |  5 ++-
 .../net/components/stacktrace-tab.js          |  4 +-
 .../components/CollapseButton.js              |  5 +--
 .../components/ConsoleOutput.js               |  9 ++--
 .../components/ConsoleTable.js                |  9 ++--
 .../components/FilterBar.js                   |  8 ++--
 .../components/FilterButton.js                |  6 +--
 .../components/FilterCheckbox.js              |  6 +--
 .../components/GripMessageBody.js             |  6 +--
 .../new-console-output/components/Message.js  | 30 ++++++++------
 .../components/MessageContainer.js            |  6 +--
 .../components/MessageIcon.js                 |  7 +---
 .../components/MessageIndent.js               |  5 +--
 .../components/MessageRepeat.js               |  7 +---
 .../message-types/ConsoleApiCall.js           |  8 ++--
 .../message-types/ConsoleCommand.js           |  6 +--
 .../message-types/DefaultRenderer.js          |  5 +--
 .../message-types/EvaluationResult.js         |  6 +--
 .../message-types/NetworkEventMessage.js      |  8 ++--
 .../components/message-types/PageError.js     |  6 +--
 .../new-console-output-wrapper.js             | 12 +++---
 .../test/components/filter-bar.test.js        |  5 ++-
 .../new-console-output/test/helpers.js        |  8 ++--
 33 files changed, 158 insertions(+), 184 deletions(-)

diff --git a/devtools/client/webconsole/net/components/cookies-tab.js b/devtools/client/webconsole/net/components/cookies-tab.js
index 8063d59f48dc..645aa2984b96 100644
--- a/devtools/client/webconsole/net/components/cookies-tab.js
+++ b/devtools/client/webconsole/net/components/cookies-tab.js
@@ -3,10 +3,10 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const { Component, createFactory, DOM, 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 NetInfoGroupList = createFactory(require("./net-info-group-list"));
-const Spinner = createFactory(require("./spinner"));
 
 /**
  * This template represents 'Cookies' tab displayed when the user
@@ -39,7 +39,7 @@ class CookiesTab extends Component {
   }
 
   render() {
-    let { actions, data: file } = this.props;
+    let { data: file } = this.props;
     let requestCookies = file.request.cookies;
     let responseCookies = file.response.cookies;
 
@@ -57,8 +57,8 @@ class CookiesTab extends Component {
     }];
 
     return (
-      DOM.div({className: "cookiesTabBox"},
-        DOM.div({className: "panelContent"},
+      dom.div({className: "cookiesTabBox"},
+        dom.div({className: "panelContent"},
           NetInfoGroupList({
             groups: groups
           })
diff --git a/devtools/client/webconsole/net/components/headers-tab.js b/devtools/client/webconsole/net/components/headers-tab.js
index 1bf4639d413f..46f598d624ea 100644
--- a/devtools/client/webconsole/net/components/headers-tab.js
+++ b/devtools/client/webconsole/net/components/headers-tab.js
@@ -3,8 +3,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const { Component, createFactory, DOM, 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 NetInfoGroupList = createFactory(require("./net-info-group-list"));
 const Spinner = createFactory(require("./spinner"));
 
@@ -63,8 +64,8 @@ class HeadersTab extends Component {
     }
 
     return (
-      DOM.div({className: "headersTabBox"},
-        DOM.div({className: "panelContent"},
+      dom.div({className: "headersTabBox"},
+        dom.div({className: "panelContent"},
           NetInfoGroupList({groups: groups})
         )
       )
diff --git a/devtools/client/webconsole/net/components/net-info-body.js b/devtools/client/webconsole/net/components/net-info-body.js
index 929ce072a1c9..a335b340abf7 100644
--- a/devtools/client/webconsole/net/components/net-info-body.js
+++ b/devtools/client/webconsole/net/components/net-info-body.js
@@ -3,8 +3,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const { Component, createFactory, PropTypes } =
-  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 { createFactories } = require("devtools/client/shared/react-utils");
 const { Tabs, TabPanel } = createFactories(require("devtools/client/shared/components/tabs/Tabs"));
 
diff --git a/devtools/client/webconsole/net/components/net-info-group-list.js b/devtools/client/webconsole/net/components/net-info-group-list.js
index 39aa67d11273..7227ed3ff7c3 100644
--- a/devtools/client/webconsole/net/components/net-info-group-list.js
+++ b/devtools/client/webconsole/net/components/net-info-group-list.js
@@ -3,8 +3,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const { Component, createFactory, DOM, 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 NetInfoGroup = createFactory(require("./net-info-group"));
 
 /**
@@ -33,7 +34,7 @@ class NetInfoGroupList extends Component {
     });
 
     return (
-      DOM.div({className: "netInfoGroupList"},
+      dom.div({className: "netInfoGroupList"},
         groups
       )
     );
diff --git a/devtools/client/webconsole/net/components/net-info-group.js b/devtools/client/webconsole/net/components/net-info-group.js
index b72e847df6cc..3452ffe3772c 100644
--- a/devtools/client/webconsole/net/components/net-info-group.js
+++ b/devtools/client/webconsole/net/components/net-info-group.js
@@ -3,8 +3,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const { Component, createFactory, DOM, 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 NetInfoParams = createFactory(require("./net-info-params"));
 
 /**
@@ -58,18 +59,18 @@ class NetInfoGroup extends Component {
     let className = open ? "opened" : "";
 
     return (
-      DOM.div({className: "netInfoGroup" + " " + className + " " +
+      dom.div({className: "netInfoGroup" + " " + className + " " +
         this.props.type},
-        DOM.span({
+        dom.span({
           className: "netInfoGroupTwisty",
           onClick: this.onToggle
         }),
-        DOM.span({
+        dom.span({
           className: "netInfoGroupTitle",
           onClick: this.onToggle},
           this.props.name
         ),
-        DOM.div({className: "netInfoGroupContent"},
+        dom.div({className: "netInfoGroupContent"},
           content
         )
       )
diff --git a/devtools/client/webconsole/net/components/net-info-params.js b/devtools/client/webconsole/net/components/net-info-params.js
index 1678dc999247..f62c0bf40b0e 100644
--- a/devtools/client/webconsole/net/components/net-info-params.js
+++ b/devtools/client/webconsole/net/components/net-info-params.js
@@ -3,9 +3,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const { Component, DOM, 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");
 /**
  * This template renders list of parameters within a group.
  * It's essentially a list of name + value pairs.
@@ -30,20 +30,20 @@ class NetInfoParams extends Component {
     let rows = [];
     params.forEach((param, index) => {
       rows.push(
-        DOM.tr({key: index},
-          DOM.td({className: "netInfoParamName"},
-            DOM.span({title: param.name}, param.name)
+        dom.tr({key: index},
+          dom.td({className: "netInfoParamName"},
+            dom.span({title: param.name}, param.name)
           ),
-          DOM.td({className: "netInfoParamValue"},
-            DOM.code({}, param.value)
+          dom.td({className: "netInfoParamValue"},
+            dom.code({}, param.value)
           )
         )
       );
     });
 
     return (
-      DOM.table({cellPadding: 0, cellSpacing: 0},
-        DOM.tbody({},
+      dom.table({cellPadding: 0, cellSpacing: 0},
+        dom.tbody({},
           rows
         )
       )
diff --git a/devtools/client/webconsole/net/components/params-tab.js b/devtools/client/webconsole/net/components/params-tab.js
index f102a207d190..eb743830415e 100644
--- a/devtools/client/webconsole/net/components/params-tab.js
+++ b/devtools/client/webconsole/net/components/params-tab.js
@@ -3,8 +3,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const { Component, createFactory, DOM, 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 NetInfoParams = createFactory(require("./net-info-params"));
 
 /**
@@ -25,8 +26,8 @@ class ParamsTab extends Component {
     let data = this.props.data;
 
     return (
-      DOM.div({className: "paramsTabBox"},
-        DOM.div({className: "panelContent"},
+      dom.div({className: "paramsTabBox"},
+        dom.div({className: "panelContent"},
           NetInfoParams({params: data.request.queryString})
         )
       )
diff --git a/devtools/client/webconsole/net/components/post-tab.js b/devtools/client/webconsole/net/components/post-tab.js
index f74167274cad..2b6bc27ccd05 100644
--- a/devtools/client/webconsole/net/components/post-tab.js
+++ b/devtools/client/webconsole/net/components/post-tab.js
@@ -3,8 +3,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const { Component, createFactory, DOM, 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 TreeView =
   createFactory(require("devtools/client/shared/components/tree/TreeView"));
@@ -49,6 +50,15 @@ class PostTab extends Component {
     this.renderRawData = this.renderRawData.bind(this);
   }
 
+  componentDidMount() {
+    let { actions, data: file } = this.props;
+
+    if (!file.request.postData) {
+      // TODO: use async action objects as soon as Redux is in place
+      actions.requestData("requestPostData");
+    }
+  }
+
   isJson(file) {
     let text = file.request.postData.text;
     let value = NetUtils.getHeaderValue(file.request.headers, "content-type");
@@ -154,8 +164,6 @@ class PostTab extends Component {
     if (NetUtils.isMultiPartRequest(file)) {
       // TODO: render multi part request (bug: 1247423)
     }
-
-    return;
   }
 
   /**
@@ -193,7 +201,7 @@ class PostTab extends Component {
       group = {
         key: "raw-longstring",
         name: Locale.$STR("netRequest.rawData"),
-        content: DOM.div({className: "netInfoResponseContent"},
+        content: dom.div({className: "netInfoResponseContent"},
           sanitize(text.initial),
           SizeLimit({
             actions: this.props.actions,
@@ -207,7 +215,7 @@ class PostTab extends Component {
       group = {
         key: "raw",
         name: Locale.$STR("netRequest.rawData"),
-        content: DOM.div({className: "netInfoResponseContent"},
+        content: dom.div({className: "netInfoResponseContent"},
           sanitize(text)
         )
       };
@@ -216,20 +224,11 @@ class PostTab extends Component {
     return group;
   }
 
-  componentDidMount() {
-    let { actions, data: file } = this.props;
-
-    if (!file.request.postData) {
-      // TODO: use async action objects as soon as Redux is in place
-      actions.requestData("requestPostData");
-    }
-  }
-
   render() {
-    let { actions, data: file } = this.props;
+    let { data: file } = this.props;
 
     if (file.discardRequestBody) {
-      return DOM.span({className: "netInfoBodiesDiscarded"},
+      return dom.span({className: "netInfoBodiesDiscarded"},
         Locale.$STR("netRequest.requestBodyDiscarded")
       );
     }
@@ -260,8 +259,8 @@ class PostTab extends Component {
     }
 
     return (
-      DOM.div({className: "postTabBox"},
-        DOM.div({className: "panelContent"},
+      dom.div({className: "postTabBox"},
+        dom.div({className: "panelContent"},
           NetInfoGroupList({
             groups: groups
           })
diff --git a/devtools/client/webconsole/net/components/response-tab.js b/devtools/client/webconsole/net/components/response-tab.js
index 1ada161ce49b..094bfc20224b 100644
--- a/devtools/client/webconsole/net/components/response-tab.js
+++ b/devtools/client/webconsole/net/components/response-tab.js
@@ -3,8 +3,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const { Component, createFactory, DOM, 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");
 
 // Reps
 const TreeView = createFactory(require("devtools/client/shared/components/tree/TreeView"));
@@ -52,6 +53,16 @@ class ResponseTab extends Component {
     this.renderRawResponse = this.renderRawResponse.bind(this);
   }
 
+  componentDidMount() {
+    let { actions, data: file } = this.props;
+    let content = file.response.content;
+
+    if (!content || typeof (content.text) == "undefined") {
+      // TODO: use async action objects as soon as Redux is in place
+      actions.requestData("responseContent");
+    }
+  }
+
   // Response Types
 
   isJson(content) {
@@ -133,7 +144,7 @@ class ResponseTab extends Component {
     let dataUri = "data:" + content.mimeType + ";base64," + content.text;
     return {
       key: "image",
-      content: DOM.img({src: dataUri}),
+      content: dom.img({src: dataUri}),
       name: Locale.$STR("netRequest.image")
     };
   }
@@ -177,6 +188,8 @@ class ResponseTab extends Component {
     if (group) {
       return group;
     }
+
+    return null;
   }
 
   renderRawResponse(file) {
@@ -189,7 +202,7 @@ class ResponseTab extends Component {
       group = {
         key: "raw-longstring",
         name: Locale.$STR("netRequest.rawData"),
-        content: DOM.div({className: "netInfoResponseContent"},
+        content: dom.div({className: "netInfoResponseContent"},
           content.text.initial,
           SizeLimit({
             actions: this.props.actions,
@@ -203,7 +216,7 @@ class ResponseTab extends Component {
       group = {
         key: "raw",
         name: Locale.$STR("netRequest.rawData"),
-        content: DOM.div({className: "netInfoResponseContent"},
+        content: dom.div({className: "netInfoResponseContent"},
           content.text
         )
       };
@@ -212,16 +225,6 @@ class ResponseTab extends Component {
     return group;
   }
 
-  componentDidMount() {
-    let { actions, data: file } = this.props;
-    let content = file.response.content;
-
-    if (!content || typeof (content.text) == "undefined") {
-      // TODO: use async action objects as soon as Redux is in place
-      actions.requestData("responseContent");
-    }
-  }
-
   /**
    * The response panel displays two groups:
    *
@@ -229,13 +232,13 @@ class ResponseTab extends Component {
    * 2) Raw response data (always displayed if not discarded)
    */
   render() {
-    let { actions, data: file } = this.props;
+    let { data: file } = this.props;
 
     // If response bodies are discarded (not collected) let's just
     // display a info message indicating what to do to collect even
     // response bodies.
     if (file.discardResponseBody) {
-      return DOM.span({className: "netInfoBodiesDiscarded"},
+      return dom.span({className: "netInfoBodiesDiscarded"},
         Locale.$STR("netRequest.responseBodyDiscarded")
       );
     }
@@ -267,8 +270,8 @@ class ResponseTab extends Component {
     }
 
     return (
-      DOM.div({className: "responseTabBox"},
-        DOM.div({className: "panelContent"},
+      dom.div({className: "responseTabBox"},
+        dom.div({className: "panelContent"},
           NetInfoGroupList({
             groups: groups
           })
diff --git a/devtools/client/webconsole/net/components/size-limit.js b/devtools/client/webconsole/net/components/size-limit.js
index e408a611f9ba..dc15704c7f09 100644
--- a/devtools/client/webconsole/net/components/size-limit.js
+++ b/devtools/client/webconsole/net/components/size-limit.js
@@ -3,8 +3,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const { Component, DOM, 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");
 
 /**
  * This template represents a size limit notification message
@@ -47,14 +48,14 @@ class SizeLimit extends Component {
     let m = message.match(reLink);
 
     return (
-        DOM.div({className: "netInfoSizeLimit"},
-          DOM.span({}, m[1]),
-          DOM.a({
+        dom.div({className: "netInfoSizeLimit"},
+          dom.span({}, m[1]),
+          dom.a({
             className: "objectLink",
             onClick: this.onClickLimit},
               link
           ),
-          DOM.span({}, m[2])
+          dom.span({}, m[2])
         )
     );
   }
diff --git a/devtools/client/webconsole/net/components/spinner.js b/devtools/client/webconsole/net/components/spinner.js
index e69fc5f7a873..900e575f6ce7 100644
--- a/devtools/client/webconsole/net/components/spinner.js
+++ b/devtools/client/webconsole/net/components/spinner.js
@@ -3,7 +3,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const { Component, DOM } = require("devtools/client/shared/vendor/react");
+const { Component } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
 
 /**
  * This template represents a throbber displayed when the UI
@@ -12,7 +13,7 @@ const { Component, DOM } = require("devtools/client/shared/vendor/react");
 class Spinner extends Component {
   render() {
     return (
-      DOM.div({className: "devtools-throbber"})
+      dom.div({className: "devtools-throbber"})
     );
   }
 }
diff --git a/devtools/client/webconsole/net/components/stacktrace-tab.js b/devtools/client/webconsole/net/components/stacktrace-tab.js
index 2658578d0182..b5ac2fb0a88c 100644
--- a/devtools/client/webconsole/net/components/stacktrace-tab.js
+++ b/devtools/client/webconsole/net/components/stacktrace-tab.js
@@ -3,8 +3,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const { PropTypes, Component, 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 StackTrace =
   createFactory(require("devtools/client/shared/components/StackTrace"));
 
diff --git a/devtools/client/webconsole/new-console-output/components/CollapseButton.js b/devtools/client/webconsole/new-console-output/components/CollapseButton.js
index 7c553ee6e1d8..391c918da05a 100644
--- a/devtools/client/webconsole/new-console-output/components/CollapseButton.js
+++ b/devtools/client/webconsole/new-console-output/components/CollapseButton.js
@@ -6,10 +6,7 @@
 
 "use strict";
 
-// React & Redux
-const {
-  DOM: dom,
-} = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
 
 const { l10n } = require("devtools/client/webconsole/new-console-output/utils/messages");
 const messageToggleDetails = l10n.getStr("messageToggleDetails");
diff --git a/devtools/client/webconsole/new-console-output/components/ConsoleOutput.js b/devtools/client/webconsole/new-console-output/components/ConsoleOutput.js
index ce3b7ce2e6b1..8e0cb6be0eb5 100644
--- a/devtools/client/webconsole/new-console-output/components/ConsoleOutput.js
+++ b/devtools/client/webconsole/new-console-output/components/ConsoleOutput.js
@@ -3,12 +3,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const {
-  Component,
-  createFactory,
-  DOM: dom,
-  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 {initialize} = require("devtools/client/webconsole/new-console-output/actions/ui");
 
diff --git a/devtools/client/webconsole/new-console-output/components/ConsoleTable.js b/devtools/client/webconsole/new-console-output/components/ConsoleTable.js
index 986d18bda95a..14d73cea5021 100644
--- a/devtools/client/webconsole/new-console-output/components/ConsoleTable.js
+++ b/devtools/client/webconsole/new-console-output/components/ConsoleTable.js
@@ -3,12 +3,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const {
-  Component,
-  createFactory,
-  DOM: dom,
-  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 ObjectClient = require("devtools/shared/client/object-client");
 const actions = require("devtools/client/webconsole/new-console-output/actions/messages");
 const { l10n } = require("devtools/client/webconsole/new-console-output/utils/messages");
diff --git a/devtools/client/webconsole/new-console-output/components/FilterBar.js b/devtools/client/webconsole/new-console-output/components/FilterBar.js
index 40be67dbd62b..67924cf4f60b 100644
--- a/devtools/client/webconsole/new-console-output/components/FilterBar.js
+++ b/devtools/client/webconsole/new-console-output/components/FilterBar.js
@@ -3,11 +3,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const {
-  Component,
-  DOM: dom,
-  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 { connect } = require("devtools/client/shared/vendor/react-redux");
 const { getAllFilters } = require("devtools/client/webconsole/new-console-output/selectors/filters");
 const { getFilteredMessagesCount } = require("devtools/client/webconsole/new-console-output/selectors/messages");
diff --git a/devtools/client/webconsole/new-console-output/components/FilterButton.js b/devtools/client/webconsole/new-console-output/components/FilterButton.js
index b7bbe31a21d5..60d9cc982be6 100644
--- a/devtools/client/webconsole/new-console-output/components/FilterButton.js
+++ b/devtools/client/webconsole/new-console-output/components/FilterButton.js
@@ -3,10 +3,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const {
-  DOM: dom,
-  PropTypes
-} = 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 actions = require("devtools/client/webconsole/new-console-output/actions/index");
 
 FilterButton.displayName = "FilterButton";
diff --git a/devtools/client/webconsole/new-console-output/components/FilterCheckbox.js b/devtools/client/webconsole/new-console-output/components/FilterCheckbox.js
index c6b42d5d1bbb..08e15ee70abf 100644
--- a/devtools/client/webconsole/new-console-output/components/FilterCheckbox.js
+++ b/devtools/client/webconsole/new-console-output/components/FilterCheckbox.js
@@ -3,10 +3,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const {
-  DOM: dom,
-  PropTypes
-} = 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");
 
 FilterCheckbox.displayName = "FilterCheckbox";
 
diff --git a/devtools/client/webconsole/new-console-output/components/GripMessageBody.js b/devtools/client/webconsole/new-console-output/components/GripMessageBody.js
index 093c704fba67..f7e6fb4257c3 100644
--- a/devtools/client/webconsole/new-console-output/components/GripMessageBody.js
+++ b/devtools/client/webconsole/new-console-output/components/GripMessageBody.js
@@ -13,10 +13,8 @@ if (typeof define === "undefined") {
 }
 
 // React
-const {
-  createFactory,
-  PropTypes,
-} = require("devtools/client/shared/vendor/react");
+const { createFactory } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const ObjectClient = require("devtools/shared/client/object-client");
 const {
   MESSAGE_TYPE,
diff --git a/devtools/client/webconsole/new-console-output/components/Message.js b/devtools/client/webconsole/new-console-output/components/Message.js
index a917a92a6040..90476c03c355 100644
--- a/devtools/client/webconsole/new-console-output/components/Message.js
+++ b/devtools/client/webconsole/new-console-output/components/Message.js
@@ -7,19 +7,23 @@
 "use strict";
 
 // React & Redux
-const {
-  Component,
-  createFactory,
-  DOM: dom,
-  PropTypes
-} = require("devtools/client/shared/vendor/react");
-const { l10n } = require("devtools/client/webconsole/new-console-output/utils/messages");
-const actions = require("devtools/client/webconsole/new-console-output/actions/index");
-const {MESSAGE_SOURCE} = require("devtools/client/webconsole/new-console-output/constants");
-const CollapseButton = require("devtools/client/webconsole/new-console-output/components/CollapseButton");
-const MessageIndent = require("devtools/client/webconsole/new-console-output/components/MessageIndent").MessageIndent;
-const MessageIcon = require("devtools/client/webconsole/new-console-output/components/MessageIcon");
-const MessageRepeat = require("devtools/client/webconsole/new-console-output/components/MessageRepeat");
+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 } =
+  require("devtools/client/webconsole/new-console-output/utils/messages");
+const actions =
+  require("devtools/client/webconsole/new-console-output/actions/index");
+const { MESSAGE_SOURCE } =
+  require("devtools/client/webconsole/new-console-output/constants");
+const CollapseButton =
+  require("devtools/client/webconsole/new-console-output/components/CollapseButton");
+const { MessageIndent } =
+  require("devtools/client/webconsole/new-console-output/components/MessageIndent");
+const MessageIcon =
+  require("devtools/client/webconsole/new-console-output/components/MessageIcon");
+const MessageRepeat =
+  require("devtools/client/webconsole/new-console-output/components/MessageRepeat");
 const FrameView = createFactory(require("devtools/client/shared/components/Frame"));
 const StackTrace = createFactory(require("devtools/client/shared/components/StackTrace"));
 
diff --git a/devtools/client/webconsole/new-console-output/components/MessageContainer.js b/devtools/client/webconsole/new-console-output/components/MessageContainer.js
index a80472403333..36cd34196840 100644
--- a/devtools/client/webconsole/new-console-output/components/MessageContainer.js
+++ b/devtools/client/webconsole/new-console-output/components/MessageContainer.js
@@ -7,10 +7,8 @@
 "use strict";
 
 // React & Redux
-const {
-  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 {
   MESSAGE_SOURCE,
diff --git a/devtools/client/webconsole/new-console-output/components/MessageIcon.js b/devtools/client/webconsole/new-console-output/components/MessageIcon.js
index 1c43563c4406..33d31b2a6ca6 100644
--- a/devtools/client/webconsole/new-console-output/components/MessageIcon.js
+++ b/devtools/client/webconsole/new-console-output/components/MessageIcon.js
@@ -6,11 +6,8 @@
 
 "use strict";
 
-// React & Redux
-const {
-  DOM: dom,
-  PropTypes
-} = 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("devtools/client/webconsole/new-console-output/utils/messages");
 
 // Store common icons so they can be used without recreating the element
diff --git a/devtools/client/webconsole/new-console-output/components/MessageIndent.js b/devtools/client/webconsole/new-console-output/components/MessageIndent.js
index 48bab39d7972..0a88dff322ef 100644
--- a/devtools/client/webconsole/new-console-output/components/MessageIndent.js
+++ b/devtools/client/webconsole/new-console-output/components/MessageIndent.js
@@ -6,10 +6,7 @@
 
 "use strict";
 
-// React & Redux
-const {
-  DOM: dom,
-} = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
 
 const INDENT_WIDTH = 12;
 
diff --git a/devtools/client/webconsole/new-console-output/components/MessageRepeat.js b/devtools/client/webconsole/new-console-output/components/MessageRepeat.js
index 2b49331f2c07..9fb941546997 100644
--- a/devtools/client/webconsole/new-console-output/components/MessageRepeat.js
+++ b/devtools/client/webconsole/new-console-output/components/MessageRepeat.js
@@ -7,11 +7,8 @@
 
 "use strict";
 
-// React & Redux
-const {
-  DOM: dom,
-  PropTypes
-} = 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 { PluralForm } = require("devtools/shared/plural-form");
 const { l10n } = require("devtools/client/webconsole/new-console-output/utils/messages");
 const messageRepeatsTooltip = l10n.getStr("messageRepeats.tooltip2");
diff --git a/devtools/client/webconsole/new-console-output/components/message-types/ConsoleApiCall.js b/devtools/client/webconsole/new-console-output/components/message-types/ConsoleApiCall.js
index 57ba2b35219b..6ff4492ec186 100644
--- a/devtools/client/webconsole/new-console-output/components/message-types/ConsoleApiCall.js
+++ b/devtools/client/webconsole/new-console-output/components/message-types/ConsoleApiCall.js
@@ -7,11 +7,9 @@
 "use strict";
 
 // React & Redux
-const {
-  createFactory,
-  DOM: dom,
-  PropTypes
-} = require("devtools/client/shared/vendor/react");
+const { createFactory } = 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 GripMessageBody = require("devtools/client/webconsole/new-console-output/components/GripMessageBody");
 const ConsoleTable = createFactory(require("devtools/client/webconsole/new-console-output/components/ConsoleTable"));
 const {isGroupType, l10n} = require("devtools/client/webconsole/new-console-output/utils/messages");
diff --git a/devtools/client/webconsole/new-console-output/components/message-types/ConsoleCommand.js b/devtools/client/webconsole/new-console-output/components/message-types/ConsoleCommand.js
index 2dbd5ac48683..d7bb0283b5da 100644
--- a/devtools/client/webconsole/new-console-output/components/message-types/ConsoleCommand.js
+++ b/devtools/client/webconsole/new-console-output/components/message-types/ConsoleCommand.js
@@ -7,10 +7,8 @@
 "use strict";
 
 // React & Redux
-const {
-  createFactory,
-  PropTypes
-} = require("devtools/client/shared/vendor/react");
+const { createFactory } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const Message = createFactory(require("devtools/client/webconsole/new-console-output/components/Message"));
 
 ConsoleCommand.displayName = "ConsoleCommand";
diff --git a/devtools/client/webconsole/new-console-output/components/message-types/DefaultRenderer.js b/devtools/client/webconsole/new-console-output/components/message-types/DefaultRenderer.js
index d07089531e63..8441c812a337 100644
--- a/devtools/client/webconsole/new-console-output/components/message-types/DefaultRenderer.js
+++ b/devtools/client/webconsole/new-console-output/components/message-types/DefaultRenderer.js
@@ -6,10 +6,7 @@
 
 "use strict";
 
-// React & Redux
-const {
-  DOM: dom,
-} = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
 
 DefaultRenderer.displayName = "DefaultRenderer";
 
diff --git a/devtools/client/webconsole/new-console-output/components/message-types/EvaluationResult.js b/devtools/client/webconsole/new-console-output/components/message-types/EvaluationResult.js
index f7785149411a..be4ec41a68c2 100644
--- a/devtools/client/webconsole/new-console-output/components/message-types/EvaluationResult.js
+++ b/devtools/client/webconsole/new-console-output/components/message-types/EvaluationResult.js
@@ -7,10 +7,8 @@
 "use strict";
 
 // React & Redux
-const {
-  createFactory,
-  PropTypes
-} = require("devtools/client/shared/vendor/react");
+const { createFactory } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const Message = createFactory(require("devtools/client/webconsole/new-console-output/components/Message"));
 const GripMessageBody = require("devtools/client/webconsole/new-console-output/components/GripMessageBody");
 
diff --git a/devtools/client/webconsole/new-console-output/components/message-types/NetworkEventMessage.js b/devtools/client/webconsole/new-console-output/components/message-types/NetworkEventMessage.js
index 7a04d0f6a063..7dbe66f0ff84 100644
--- a/devtools/client/webconsole/new-console-output/components/message-types/NetworkEventMessage.js
+++ b/devtools/client/webconsole/new-console-output/components/message-types/NetworkEventMessage.js
@@ -7,11 +7,9 @@
 "use strict";
 
 // React & Redux
-const {
-  createFactory,
-  DOM: dom,
-  PropTypes
-} = require("devtools/client/shared/vendor/react");
+const { createFactory } = 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 Message = createFactory(require("devtools/client/webconsole/new-console-output/components/Message"));
 const actions = require("devtools/client/webconsole/new-console-output/actions/index");
 const { l10n } = require("devtools/client/webconsole/new-console-output/utils/messages");
diff --git a/devtools/client/webconsole/new-console-output/components/message-types/PageError.js b/devtools/client/webconsole/new-console-output/components/message-types/PageError.js
index 5432f025b78d..3475418d4461 100644
--- a/devtools/client/webconsole/new-console-output/components/message-types/PageError.js
+++ b/devtools/client/webconsole/new-console-output/components/message-types/PageError.js
@@ -7,10 +7,8 @@
 "use strict";
 
 // React & Redux
-const {
-  createFactory,
-  PropTypes
-} = require("devtools/client/shared/vendor/react");
+const { createFactory } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const Message = createFactory(require("devtools/client/webconsole/new-console-output/components/Message"));
 
 PageError.displayName = "PageError";
diff --git a/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js b/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
index 55c37c5523fd..a6018885b879 100644
--- a/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
+++ b/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
@@ -3,8 +3,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-// React & Redux
-const React = require("devtools/client/shared/vendor/react");
+const { createElement, createFactory } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const ReactDOM = require("devtools/client/shared/vendor/react-dom");
 const { Provider } = require("devtools/client/shared/vendor/react-redux");
 
@@ -13,8 +13,8 @@ const { createContextMenu } = require("devtools/client/webconsole/new-console-ou
 const { configureStore } = require("devtools/client/webconsole/new-console-output/store");
 
 const EventEmitter = require("devtools/shared/old-event-emitter");
-const ConsoleOutput = React.createFactory(require("devtools/client/webconsole/new-console-output/components/ConsoleOutput"));
-const FilterBar = React.createFactory(require("devtools/client/webconsole/new-console-output/components/FilterBar"));
+const ConsoleOutput = createFactory(require("devtools/client/webconsole/new-console-output/components/ConsoleOutput"));
+const FilterBar = createFactory(require("devtools/client/webconsole/new-console-output/components/FilterBar"));
 
 let store = null;
 
@@ -189,10 +189,10 @@ NewConsoleOutputWrapper.prototype = {
         }
       });
 
-      let provider = React.createElement(
+      let provider = createElement(
         Provider,
         { store },
-        React.DOM.div(
+        dom.div(
           {className: "webconsole-output-wrapper"},
           filterBar,
           childComponent
diff --git a/devtools/client/webconsole/new-console-output/test/components/filter-bar.test.js b/devtools/client/webconsole/new-console-output/test/components/filter-bar.test.js
index 2fa84fe9bbce..c7cdea240aaa 100644
--- a/devtools/client/webconsole/new-console-output/test/components/filter-bar.test.js
+++ b/devtools/client/webconsole/new-console-output/test/components/filter-bar.test.js
@@ -6,7 +6,8 @@ const expect = require("expect");
 const sinon = require("sinon");
 const { render, mount, shallow } = require("enzyme");
 
-const { createFactory, DOM } = require("devtools/client/shared/vendor/react");
+const { createFactory } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const Provider = createFactory(require("react-redux").Provider);
 
 const actions = require("devtools/client/webconsole/new-console-output/actions/index");
@@ -221,7 +222,7 @@ describe("FilterBar component:", () => {
       filterBtn({ label: "Logs", filterKey: FILTERS.LOG }),
       filterBtn({ label: "Info", filterKey: FILTERS.INFO }),
       filterBtn({ label: "Debug", filterKey: FILTERS.DEBUG }),
-      DOM.div({
+      dom.div({
         className: "devtools-separator",
       }),
       filterBtn({ label: "CSS", filterKey: "css", active: false }),
diff --git a/devtools/client/webconsole/new-console-output/test/helpers.js b/devtools/client/webconsole/new-console-output/test/helpers.js
index 637242e65e0d..02fd70a91f3d 100644
--- a/devtools/client/webconsole/new-console-output/test/helpers.js
+++ b/devtools/client/webconsole/new-console-output/test/helpers.js
@@ -5,6 +5,8 @@
 
 let ReactDOM = require("devtools/client/shared/vendor/react-dom");
 let React = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const { createElement } = React;
 var TestUtils = React.addons.TestUtils;
 
 const actions = require("devtools/client/webconsole/new-console-output/actions/index");
@@ -46,17 +48,17 @@ function setupStore(input = [], hud, options) {
 }
 
 function renderComponent(component, props) {
-  const el = React.createElement(component, props, {});
+  const el = createElement(component, props, {});
   // By default, renderIntoDocument() won't work for stateless components, but
   // it will work if the stateless component is wrapped in a stateful one.
   // See https://github.com/facebook/react/issues/4839
-  const wrappedEl = React.DOM.span({}, [el]);
+  const wrappedEl = dom.span({}, [el]);
   const renderedComponent = TestUtils.renderIntoDocument(wrappedEl);
   return ReactDOM.findDOMNode(renderedComponent).children[0];
 }
 
 function shallowRenderComponent(component, props) {
-  const el = React.createElement(component, props);
+  const el = createElement(component, props);
   const renderer = TestUtils.createRenderer();
   renderer.render(el, {});
   return renderer.getRenderOutput();