Bug 1415167 - Network Monitor to use prop-types and react-dom-factories r=Honza

@Honza: Please wait for a green try before reviewing this.

MozReview-Commit-ID: 5KlOkYLnorj

--HG--
extra : rebase_source : 339c2dda1eb2afaf490e6bacb613addeece42d04

devtools/client/netmonitor/src/components/App.js

@@ -4,18 +4,16 @@
 
 "use strict";
 
-const {
-  createFactory,
-  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 { connect } = require("devtools/client/shared/vendor/react-redux");
 
 // Components
 const MonitorPanel = createFactory(require("./MonitorPanel"));
 const StatisticsPanel = createFactory(require("./StatisticsPanel"));
 
-const { div } = DOM;
+const { div } = dom;
 
 /**
  * App component

devtools/client/netmonitor/src/components/CookiesPanel.js

@@ -4,18 +4,16 @@
 
 "use strict";
 
-const {
-  createFactory,
-  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 { L10N } = require("../utils/l10n");
 const { sortObjectKeys } = require("../utils/sort-utils");
 
 // Component
 const PropertiesView = createFactory(require("./PropertiesView"));
 
-const { div } = DOM;
+const { div } = dom;
 
 const COOKIES_EMPTY_TEXT = L10N.getStr("cookiesEmptyText");
 const COOKIES_FILTER_TEXT = L10N.getStr("cookiesFilterText");

devtools/client/netmonitor/src/components/CustomRequestPanel.js

@@ -4,10 +4,8 @@
 
 "use strict";
 
-const {
-  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 { connect } = require("devtools/client/shared/vendor/react-redux");
 const { L10N } = require("../utils/l10n");
 const Actions = require("../actions/index");
@@ -23,7 +21,7 @@ const {
   div,
   input,
   textarea,
-} = DOM;
+} = dom;
 
 const CUSTOM_CANCEL = L10N.getStr("netmonitor.custom.cancel");
 const CUSTOM_HEADERS = L10N.getStr("netmonitor.custom.headers");

devtools/client/netmonitor/src/components/HeadersPanel.js

@@ -4,12 +4,9 @@
 
 "use strict";
 
-const {
-  Component,
-  createFactory,
-  DOM,
-  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 dom = require("devtools/client/shared/vendor/react-dom-factories");
 const {
   getFormattedIPAndPort,
   getFormattedSize,
@@ -28,7 +25,7 @@ const MDNLink = createFactory(require("./MdnLink"));
 const PropertiesView = createFactory(require("./PropertiesView"));
 
 const { Rep } = REPS;
-const { button, div, input, textarea, span } = DOM;
+const { button, div, input, textarea, span } = dom;
 
 const EDIT_AND_RESEND = L10N.getStr("netmonitor.summary.editAndResend");
 const RAW_HEADERS = L10N.getStr("netmonitor.summary.rawHeaders");

devtools/client/netmonitor/src/components/HtmlPreview.js

@@ -4,8 +4,9 @@
 
 "use strict";
 
-const { DOM, PropTypes } = require("devtools/client/shared/vendor/react");
-const { div, iframe } = DOM;
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const { div, iframe } = dom;
 
 /*
  * Response preview component

devtools/client/netmonitor/src/components/MdnLink.js

@@ -5,14 +5,12 @@
 "use strict";
 
 const Services = require("Services");
-const {
-  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 { gDevTools } = require("devtools/client/framework/devtools");
 const { L10N } = require("../utils/l10n");
 
-const { a } = DOM;
+const { a } = dom;
 
 const LEARN_MORE = L10N.getStr("netmonitor.headers.learnMore");
 

devtools/client/netmonitor/src/components/MonitorPanel.js

@@ -5,12 +5,9 @@
 "use strict";
 
 const Services = require("Services");
-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 { connect } = require("devtools/client/shared/vendor/react-redux");
 const { findDOMNode } = require("devtools/client/shared/vendor/react-dom");
 const Actions = require("../actions/index");
@@ -22,7 +19,7 @@ const SplitBox = createFactory(require("devtools/client/shared/components/splitt
 const NetworkDetailsPanel = createFactory(require("./NetworkDetailsPanel"));
 const RequestList = createFactory(require("./RequestList"));
 const Toolbar = createFactory(require("./Toolbar"));
-const { div } = DOM;
+const { div } = dom;
 const MediaQueryList = window.matchMedia("(min-width: 700px)");
 
 /**

devtools/client/netmonitor/src/components/NetworkDetailsPanel.js

@@ -4,11 +4,9 @@
 
 "use strict";
 
-const {
-  createFactory,
-  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 { connect } = require("devtools/client/shared/vendor/react-redux");
 const Actions = require("../actions/index");
 const { getSelectedRequest } = require("../selectors/index");
@@ -17,7 +15,7 @@ const { getSelectedRequest } = require("../selectors/index");
 const CustomRequestPanel = createFactory(require("./CustomRequestPanel"));
 const TabboxPanel = createFactory(require("./TabboxPanel"));
 
-const { div } = DOM;
+const { div } = dom;
 
 /**
  * Network details panel component

devtools/client/netmonitor/src/components/ParamsPanel.js

@@ -4,12 +4,9 @@
 
 "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 { connect } = require("devtools/client/shared/vendor/react-redux");
 const { L10N } = require("../utils/l10n");
 const { getUrlQuery, parseQueryString, parseFormData } = require("../utils/request-utils");
@@ -20,7 +17,7 @@ const Actions = require("../actions/index");
 // Components
 const PropertiesView = createFactory(require("./PropertiesView"));
 
-const { div } = DOM;
+const { div } = dom;
 
 const JSON_SCOPE_NAME = L10N.getStr("jsonScopeName");
 const PARAMS_EMPTY_TEXT = L10N.getStr("paramsEmptyText");

devtools/client/netmonitor/src/components/PropertiesView.js

@@ -6,12 +6,9 @@
 
 "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 { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
 const { Rep } = REPS;
@@ -26,7 +23,7 @@ const TreeRow = createFactory(require("devtools/client/shared/components/tree/Tr
 const SourceEditor = createFactory(require("./SourceEditor"));
 const HTMLPreview = createFactory(require("./HtmlPreview"));
 
-const { div, tr, td } = DOM;
+const { div, tr, td } = dom;
 const AUTO_EXPAND_MAX_LEVEL = 7;
 const AUTO_EXPAND_MAX_NODES = 50;
 const EDITOR_CONFIG_ID = "EDITOR_CONFIG";

devtools/client/netmonitor/src/components/RequestList.js

@@ -4,18 +4,16 @@
 
 "use strict";
 
-const {
-  createFactory,
-  DOM,
-  PropTypes,
-} = 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 PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 // Components
 const RequestListContent = createFactory(require("./RequestListContent"));
 const RequestListEmptyNotice = createFactory(require("./RequestListEmptyNotice"));
 const StatusBar = createFactory(require("./StatusBar"));
 
-const { div } = DOM;
+const { div } = dom;
 
 /**
  * Request panel component

devtools/client/netmonitor/src/components/RequestListColumnCause.js

@@ -4,13 +4,11 @@
 
 "use strict";
 
-const {
-  Component,
-  DOM,
-  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");
 
-const { div } = DOM;
+const { div } = dom;
 
 class RequestListColumnCause extends Component {
   static get propTypes() {

devtools/client/netmonitor/src/components/RequestListColumnContentSize.js

@@ -4,14 +4,12 @@
 
 "use strict";
 
-const {
-  Component,
-  DOM,
-  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");
 const { getFormattedSize } = require("../utils/format-utils");
 
-const { div } = DOM;
+const { div } = dom;
 
 class RequestListColumnContentSize extends Component {
   static get propTypes() {

devtools/client/netmonitor/src/components/RequestListColumnCookies.js

@@ -4,13 +4,11 @@
 
 "use strict";
 
-const {
-  Component,
-  DOM,
-  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");
 
-const { div } = DOM;
+const { div } = dom;
 
 class RequestListColumnCookies extends Component {
   static get propTypes() {

devtools/client/netmonitor/src/components/RequestListColumnDomain.js

@@ -4,16 +4,14 @@
 
 "use strict";
 
-const {
-  Component,
-  DOM,
-  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");
 const { getFormattedIPAndPort } = require("../utils/format-utils");
 const { L10N } = require("../utils/l10n");
 const { propertiesEqual } = require("../utils/request-utils");
 
-const { div } = DOM;
+const { div } = dom;
 
 const UPDATED_DOMAIN_PROPS = [
   "remoteAddress",

devtools/client/netmonitor/src/components/RequestListColumnDuration.js

@@ -4,14 +4,12 @@
 
 "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");
 const { getFormattedTime } = require("../utils/format-utils");
 
-const { div } = DOM;
+const { div } = dom;
 
 class RequestListColumnDuration extends Component {
   static get propTypes() {

devtools/client/netmonitor/src/components/RequestListColumnEndTime.js

@@ -4,15 +4,13 @@
 
 "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");
 const { getFormattedTime } = require("../utils/format-utils");
 const { getEndTime } = require("../utils/request-utils");
 
-const { div } = DOM;
+const { div } = dom;
 
 class RequestListColumnEndTime extends Component {
   static get propTypes() {

devtools/client/netmonitor/src/components/RequestListColumnFile.js

@@ -4,14 +4,12 @@
 
 "use strict";
 
-const {
-  Component,
-  DOM,
-  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");
 const { propertiesEqual } = require("../utils/request-utils");
 
-const { div } = DOM;
+const { div } = dom;
 
 const UPDATED_FILE_PROPS = [
   "urlDetails",

devtools/client/netmonitor/src/components/RequestListColumnLatency.js

@@ -4,14 +4,12 @@
 
 "use strict";
 
-const {
-  Component,
-  DOM,
-  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");
 const { getFormattedTime } = require("../utils/format-utils");
 
-const { div } = DOM;
+const { div } = dom;
 
 class RequestListColumnLatency extends Component {
   static get propTypes() {

devtools/client/netmonitor/src/components/RequestListColumnMethod.js

@@ -4,13 +4,11 @@
 
 "use strict";
 
-const {
-  Component,
-  DOM,
-  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");
 
-const { div } = DOM;
+const { div } = dom;
 
 class RequestListColumnMethod extends Component {
   static get propTypes() {

devtools/client/netmonitor/src/components/RequestListColumnProtocol.js

@@ -4,14 +4,12 @@
 
 "use strict";
 
-const {
-  Component,
-  DOM,
-  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");
 const { getFormattedProtocol } = require("../utils/request-utils");
 
-const { div } = DOM;
+const { div } = dom;
 
 class RequestListColumnProtocol extends Component {
   static get propTypes() {

devtools/client/netmonitor/src/components/RequestListColumnRemoteIp.js

@@ -4,14 +4,12 @@
 
 "use strict";
 
-const {
-  Component,
-  DOM,
-  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");
 const { getFormattedIPAndPort } = require("../utils/format-utils");
 
-const { div } = DOM;
+const { div } = dom;
 
 class RequestListColumnRemoteIP extends Component {
   static get propTypes() {

devtools/client/netmonitor/src/components/RequestListColumnResponseHeader.js

@@ -4,14 +4,12 @@
 
 "use strict";
 
-const {
-  Component,
-  DOM,
-  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");
 const { getResponseHeader } = require("../utils/request-utils");
 
-const { div } = DOM;
+const { div } = dom;
 
 /**
  * Renders a response header column in the requests list.  The actual

devtools/client/netmonitor/src/components/RequestListColumnResponseTime.js

@@ -4,15 +4,13 @@
 
 "use strict";
 
-const {
-  Component,
-  DOM,
-  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");
 const { getFormattedTime } = require("../utils/format-utils");
 const { getResponseTime } = require("../utils/request-utils");
 
-const { div } = DOM;
+const { div } = dom;
 
 class RequestListColumnResponseTime extends Component {
   static get propTypes() {

devtools/client/netmonitor/src/components/RequestListColumnScheme.js

@@ -4,13 +4,11 @@
 
 "use strict";
 
-const {
-  Component,
-  DOM,
-  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");
 
-const { div } = DOM;
+const { div } = dom;
 
 class RequestListColumnScheme extends Component {
   static get propTypes() {

devtools/client/netmonitor/src/components/RequestListColumnSetCookies.js

@@ -4,13 +4,11 @@
 
 "use strict";
 
-const {
-  Component,
-  DOM,
-  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");
 
-const { div } = DOM;
+const { div } = dom;
 
 class RequestListColumnSetCookies extends Component {
   static get propTypes() {

devtools/client/netmonitor/src/components/RequestListColumnStartTime.js

@@ -4,15 +4,13 @@
 
 "use strict";
 
-const {
-  Component,
-  DOM,
-  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");
 const { getFormattedTime } = require("../utils/format-utils");
 const { getStartTime } = require("../utils/request-utils");
 
-const { div } = DOM;
+const { div } = dom;
 
 class RequestListColumnStartTime extends Component {
   static get propTypes() {

devtools/client/netmonitor/src/components/RequestListColumnStatus.js

@@ -4,15 +4,13 @@
 
 "use strict";
 
-const {
-  Component,
-  DOM,
-  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");
 const { L10N } = require("../utils/l10n");
 const { propertiesEqual } = require("../utils/request-utils");
 
-const { div } = DOM;
+const { div } = dom;
 
 const UPDATED_STATUS_PROPS = [
   "fromCache",

devtools/client/netmonitor/src/components/RequestListColumnTransferredSize.js

@@ -4,16 +4,14 @@
 
 "use strict";
 
-const {
-  Component,
-  DOM,
-  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");
 const { getFormattedSize } = require("../utils/format-utils");
 const { L10N } = require("../utils/l10n");
 const { propertiesEqual } = require("../utils/request-utils");
 
-const { div } = DOM;
+const { div } = dom;
 
 const UPDATED_TRANSFERRED_PROPS = [
   "transferredSize",

devtools/client/netmonitor/src/components/RequestListColumnType.js

@@ -4,14 +4,12 @@
 
 "use strict";
 
-const {
-  Component,
-  DOM,
-  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");
 const { getAbbreviatedMimeType } = require("../utils/request-utils");
 
-const { div } = DOM;
+const { div } = dom;
 
 class RequestListColumnType extends Component {
   static get propTypes() {

devtools/client/netmonitor/src/components/RequestListColumnWaterfall.js

@@ -4,15 +4,13 @@
 
 "use strict";
 
-const {
-  Component,
-  DOM,
-  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");
 const { L10N } = require("../utils/l10n");
 const { propertiesEqual } = require("../utils/request-utils");
 
-const { div } = DOM;
+const { div } = dom;
 
 const UPDATED_WATERFALL_PROPS = [
   "eventTimings",

devtools/client/netmonitor/src/components/RequestListContent.js

@@ -4,12 +4,9 @@
 
 "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 { connect } = require("devtools/client/shared/vendor/react-redux");
 const { HTMLTooltip } = require("devtools/client/shared/widgets/tooltip/HTMLTooltip");
 const Actions = require("../actions/index");
@@ -24,7 +21,7 @@ const RequestListHeader = createFactory(require("./RequestListHeader"));
 const RequestListItem = createFactory(require("./RequestListItem"));
 const RequestListContextMenu = require("../request-list-context-menu");
 
-const { div } = DOM;
+const { div } = dom;
 
 // Tooltip show / hide delay in ms
 const REQUESTS_TOOLTIP_TOGGLE_DELAY = 500;

devtools/client/netmonitor/src/components/RequestListEmptyNotice.js

@@ -4,12 +4,9 @@
 
 "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 { connect } = require("devtools/client/shared/vendor/react-redux");
 const Actions = require("../actions/index");
 const { ACTIVITY_TYPE } = require("../constants");
@@ -20,7 +17,7 @@ const { getPerformanceAnalysisURL } = require("../utils/mdn-utils");
 const MDNLink = createFactory(require("./MdnLink"));
 const RequestListHeader = createFactory(require("./RequestListHeader"));
 
-const { button, div, span } = DOM;
+const { button, div, span } = dom;
 
 const RELOAD_NOTICE_1 = L10N.getStr("netmonitor.reloadNotice1");
 const RELOAD_NOTICE_2 = L10N.getStr("netmonitor.reloadNotice2");

devtools/client/netmonitor/src/components/RequestListHeader.js

@@ -4,11 +4,9 @@
 
 "use strict";
 
-const {
-  Component,
-  PropTypes,
-  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");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { getTheme, addThemeObserver, removeThemeObserver } =
   require("devtools/client/shared/theme");
@@ -20,7 +18,7 @@ const { L10N } = require("../utils/l10n");
 const WaterfallBackground = require("../waterfall-background");
 const RequestListHeaderContextMenu = require("../request-list-header-context-menu");
 
-const { div, button } = DOM;
+const { div, button } = dom;
 
 /**
  * Render the request list header with sorting arrows for columns.

devtools/client/netmonitor/src/components/RequestListItem.js

@@ -4,12 +4,9 @@
 
 "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 I = require("devtools/client/shared/vendor/immutable");
 const { propertiesEqual } = require("../utils/request-utils");
 const { RESPONSE_HEADERS } = require("../constants");
@@ -36,7 +33,7 @@ const RequestListColumnTransferredSize = createFactory(require("./RequestListCol
 const RequestListColumnType = createFactory(require("./RequestListColumnType"));
 const RequestListColumnWaterfall = createFactory(require("./RequestListColumnWaterfall"));
 
-const { div } = DOM;
+const { div } = dom;
 
 /**
  * Used by shouldComponentUpdate: compare two items, and compare only properties

devtools/client/netmonitor/src/components/ResponsePanel.js

@@ -4,12 +4,9 @@
 
 "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 { L10N } = require("../utils/l10n");
 const {
   decodeUnicodeBase64,
@@ -21,7 +18,7 @@ const { Filters } = require("../utils/filter-predicates");
 // Components
 const PropertiesView = createFactory(require("./PropertiesView"));
 
-const { div, img } = DOM;
+const { div, img } = dom;
 const JSON_SCOPE_NAME = L10N.getStr("jsonScopeName");
 const JSON_FILTER_TEXT = L10N.getStr("jsonFilterText");
 const RESPONSE_IMG_NAME = L10N.getStr("netmonitor.response.name");

devtools/client/netmonitor/src/components/SecurityPanel.js

@@ -4,11 +4,9 @@
 
 "use strict";
 
-const {
-  createFactory,
-  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 { L10N } = require("../utils/l10n");
 const { getUrlHost } = require("../utils/request-utils");
 
@@ -16,7 +14,7 @@ const { getUrlHost } = require("../utils/request-utils");
 const TreeViewClass = require("devtools/client/shared/components/tree/TreeView");
 const PropertiesView = createFactory(require("./PropertiesView"));
 
-const { div, input, span } = DOM;
+const { div, input, span } = dom;
 const NOT_AVAILABLE = L10N.getStr("netmonitor.security.notAvailable");
 const ERROR_LABEL = L10N.getStr("netmonitor.security.error");
 const CIPHER_SUITE_LABEL = L10N.getStr("netmonitor.security.cipherSuite");

devtools/client/netmonitor/src/components/SourceEditor.js

@@ -4,15 +4,13 @@
 
 "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");
 const Editor = require("devtools/client/sourceeditor/editor");
 const { SOURCE_EDITOR_SYNTAX_HIGHLIGHT_MAX_SIZE } = require("../constants");
 
-const { div } = DOM;
+const { div } = dom;
 
 /**
  * CodeMirror editor as a React component

devtools/client/netmonitor/src/components/StackTracePanel.js

@@ -4,13 +4,11 @@
 
 "use strict";
 
-const {
-  createFactory,
-  DOM,
-  PropTypes,
-} = 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 PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
-const { div } = DOM;
+const { div } = dom;
 
 // Components
 const StackTrace = createFactory(require("devtools/client/shared/components/StackTrace"));

devtools/client/netmonitor/src/components/StatisticsPanel.js

@@ -6,28 +6,22 @@
 
 const ReactDOM = require("devtools/client/shared/vendor/react-dom");
 const { FILTER_TAGS } = require("../constants");
-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 { connect } = require("devtools/client/shared/vendor/react-redux");
 const { Chart } = require("devtools/client/shared/widgets/Chart");
 const { PluralForm } = require("devtools/shared/plural-form");
 const Actions = require("../actions/index");
 const { Filters } = require("../utils/filter-predicates");
-const {
-  getSizeWithDecimals,
-  getTimeWithDecimals
-} = require("../utils/format-utils");
+const { getSizeWithDecimals, getTimeWithDecimals } = require("../utils/format-utils");
 const { L10N } = require("../utils/l10n");
 const { getPerformanceAnalysisURL } = require("../utils/mdn-utils");
 
 // Components
 const MDNLink = createFactory(require("./MdnLink"));
 
-const { button, div } = DOM;
+const { button, div } = dom;
 const MediaQueryList = window.matchMedia("(min-width: 700px)");
 
 const NETWORK_ANALYSIS_PIE_CHART_DIAMETER = 200;

devtools/client/netmonitor/src/components/StatusBar.js

@@ -4,10 +4,8 @@
 
 "use strict";
 
-const {
-  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 { connect } = require("devtools/client/shared/vendor/react-redux");
 const { PluralForm } = require("devtools/shared/plural-form");
 const Actions = require("../actions/index");
@@ -21,7 +19,7 @@ const {
 } = require("../utils/format-utils");
 const { L10N } = require("../utils/l10n");
 
-const { button, div } = DOM;
+const { button, div } = dom;
 
 const REQUESTS_COUNT_EMPTY = L10N.getStr("networkMenu.summary.requestsCountEmpty");
 const TOOLTIP_PERF = L10N.getStr("networkMenu.summary.tooltip.perf");

devtools/client/netmonitor/src/components/TabboxPanel.js

@@ -4,10 +4,8 @@
 
 "use strict";
 
-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 { connect } = require("devtools/client/shared/vendor/react-redux");
 const { L10N } = require("../utils/l10n");
 const { PANELS } = require("../constants");

devtools/client/netmonitor/src/components/TimingsPanel.js

@@ -4,14 +4,15 @@
 
 "use strict";
 
-const { 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("../utils/l10n");
 const { getNetMonitorTimingsURL } = require("../utils/mdn-utils");
 
 // Components
 const MDNLink = require("./MdnLink");
 
-const { div, span } = DOM;
+const { div, span } = dom;
 const types = ["blocked", "dns", "connect", "ssl", "send", "wait", "receive"];
 const TIMINGS_END_PADDING = "80px";
 

devtools/client/netmonitor/src/components/Toolbar.js

@@ -5,12 +5,9 @@
 "use strict";
 
 const Services = require("Services");
-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 { connect } = require("devtools/client/shared/vendor/react-redux");
 const I = require("devtools/client/shared/vendor/immutable");
 
@@ -28,7 +25,7 @@ const { L10N } = require("../utils/l10n");
 // Components
 const SearchBox = createFactory(require("devtools/client/shared/components/SearchBox"));
 
-const { button, div, input, label, span } = DOM;
+const { button, div, input, label, span } = dom;
 
 // Localization
 const COLLAPSE_DETAILS_PANE = L10N.getStr("collapseDetailsPane");