Bug 1415650 - Web Console to use prop-types and react-dom-factories r=Honza

MozReview-Commit-ID: 5T3asRQBmuD

--HG--
extra : rebase_source : ca651cd9665878e9a14eb03c902aa8f1c16d31fa

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
           })

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})
         )
       )

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"));
 

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
       )
     );

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
         )
       )

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
         )
       )

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})
         )
       )

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
           })

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
           })

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])
         )
     );
   }

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"})
     );
   }
 }

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"));
 

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");

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");
 

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");

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");

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";

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";
 

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,

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"));
 

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,

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

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;
 

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");

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");

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";

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";
 

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");
 

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");

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";

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

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 }),

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();