Bug 1420289 - Lazy load optional React components from netmonitor. r=Honza
authorAlexandre Poirot <poirot.alex@gmail.com>
Wed, 13 Dec 2017 10:21:08 -0800
changeset 397136 3dd0966303ca
parent 397135 df5f2fa581c5
child 397137 8c912df2f3a5
push id33127
push useraiakab@mozilla.com
push dateThu, 21 Dec 2017 22:17:05 +0000
treeherdermozilla-central@d20967c26da5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1420289
milestone59.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1420289 - Lazy load optional React components from netmonitor. r=Honza MozReview-Commit-ID: 9kzmYrzafjj
devtools/client/netmonitor/src/components/App.js
devtools/client/netmonitor/src/components/HeadersPanel.js
devtools/client/netmonitor/src/components/MonitorPanel.js
devtools/client/netmonitor/src/components/NetworkDetailsPanel.js
devtools/client/netmonitor/src/components/PropertiesView.js
devtools/client/netmonitor/src/components/RequestList.js
devtools/client/netmonitor/src/components/RequestListColumnRemoteIP.js
devtools/client/netmonitor/src/components/RequestListColumnRemoteIp.js
devtools/client/netmonitor/src/components/RequestListContent.js
devtools/client/netmonitor/src/components/RequestListItem.js
devtools/client/netmonitor/src/components/moz.build
devtools/client/netmonitor/src/widgets/RequestListContextMenu.js
--- a/devtools/client/netmonitor/src/components/App.js
+++ b/devtools/client/netmonitor/src/components/App.js
@@ -5,18 +5,22 @@
 "use strict";
 
 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"));
+loader.lazyGetter(this, "MonitorPanel", function () {
+  return createFactory(require("./MonitorPanel"));
+});
+loader.lazyGetter(this, "StatisticsPanel", function () {
+  return createFactory(require("./StatisticsPanel"));
+});
 
 const { div } = dom;
 
 /**
  * App component
  * The top level component for representing main panel
  */
 function App({
--- a/devtools/client/netmonitor/src/components/HeadersPanel.js
+++ b/devtools/client/netmonitor/src/components/HeadersPanel.js
@@ -18,21 +18,29 @@ const {
 } = require("../utils/mdn-utils");
 const {
   fetchNetworkUpdatePacket,
   writeHeaderText,
 } = require("../utils/request-utils");
 const { sortObjectKeys } = require("../utils/sort-utils");
 
 // Components
-const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
-const MDNLink = createFactory(require("./MdnLink"));
 const PropertiesView = createFactory(require("./PropertiesView"));
 
-const { Rep } = REPS;
+loader.lazyGetter(this, "MDNLink", function () {
+  return createFactory(require("./MdnLink"));
+});
+
+loader.lazyGetter(this, "Rep", function () {
+  return require("devtools/client/shared/components/reps/reps").REPS.Rep;
+});
+loader.lazyGetter(this, "MODE", function () {
+  return require("devtools/client/shared/components/reps/reps").MODE;
+});
+
 const { button, div, input, textarea, span } = dom;
 
 const EDIT_AND_RESEND = L10N.getStr("netmonitor.summary.editAndResend");
 const RAW_HEADERS = L10N.getStr("netmonitor.summary.rawHeaders");
 const RAW_HEADERS_REQUEST = L10N.getStr("netmonitor.summary.rawHeaders.requestHeaders");
 const RAW_HEADERS_RESPONSE = L10N.getStr("netmonitor.summary.rawHeaders.responseHeaders");
 const HEADERS_EMPTY_TEXT = L10N.getStr("headersEmptyText");
 const HEADERS_FILTER_TEXT = L10N.getStr("headersFilterText");
--- a/devtools/client/netmonitor/src/components/MonitorPanel.js
+++ b/devtools/client/netmonitor/src/components/MonitorPanel.js
@@ -2,29 +2,33 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const Services = require("Services");
 const { Component, createFactory } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const { div } = dom;
 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");
 const { updateFormDataSections } = require("../utils/request-utils");
 const { getSelectedRequest } = require("../selectors/index");
 
 // Components
 const SplitBox = createFactory(require("devtools/client/shared/components/splitter/SplitBox"));
-const NetworkDetailsPanel = createFactory(require("./NetworkDetailsPanel"));
 const RequestList = createFactory(require("./RequestList"));
 const Toolbar = createFactory(require("./Toolbar"));
-const { div } = dom;
+
+loader.lazyGetter(this, "NetworkDetailsPanel", function () {
+  return createFactory(require("./NetworkDetailsPanel"));
+});
+
 const MediaQueryList = window.matchMedia("(min-width: 700px)");
 
 /**
  * Monitor panel component
  * The main panel for displaying various network request information
  */
 class MonitorPanel extends Component {
   static get propTypes() {
--- a/devtools/client/netmonitor/src/components/NetworkDetailsPanel.js
+++ b/devtools/client/netmonitor/src/components/NetworkDetailsPanel.js
@@ -7,18 +7,22 @@
 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");
 
 // Components
-const CustomRequestPanel = createFactory(require("./CustomRequestPanel"));
-const TabboxPanel = createFactory(require("./TabboxPanel"));
+loader.lazyGetter(this, "CustomRequestPanel", function () {
+  return createFactory(require("./CustomRequestPanel"));
+});
+loader.lazyGetter(this, "TabboxPanel", function () {
+  return createFactory(require("./TabboxPanel"));
+});
 
 const { div } = dom;
 
 /**
  * Network details panel component
  */
 function NetworkDetailsPanel({
   connector,
--- a/devtools/client/netmonitor/src/components/PropertiesView.js
+++ b/devtools/client/netmonitor/src/components/PropertiesView.js
@@ -5,28 +5,42 @@
 /* eslint-disable react/prop-types */
 
 "use strict";
 
 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;
-
 const { FILTER_SEARCH_DELAY } = require("../constants");
 
 // Components
-const SearchBox = createFactory(require("devtools/client/shared/components/SearchBox"));
 const TreeViewClass = require("devtools/client/shared/components/tree/TreeView");
 const TreeView = createFactory(TreeViewClass);
-const TreeRow = createFactory(require("devtools/client/shared/components/tree/TreeRow"));
-const SourceEditor = createFactory(require("./SourceEditor"));
-const HTMLPreview = createFactory(require("./HtmlPreview"));
+const SearchBox = createFactory(require("devtools/client/shared/components/SearchBox"));
+
+loader.lazyGetter(this, "SearchBox", function () {
+  return createFactory(require("devtools/client/shared/components/SearchBox"));
+});
+loader.lazyGetter(this, "TreeRow", function () {
+  return createFactory(require("devtools/client/shared/components/tree/TreeRow"));
+});
+loader.lazyGetter(this, "SourceEditor", function () {
+  return createFactory(require("./SourceEditor"));
+});
+loader.lazyGetter(this, "HTMLPreview", function () {
+  return createFactory(require("./HtmlPreview"));
+});
+
+loader.lazyGetter(this, "Rep", function () {
+  return require("devtools/client/shared/components/reps/reps").REPS.Rep;
+});
+loader.lazyGetter(this, "MODE", function () {
+  return require("devtools/client/shared/components/reps/reps").MODE;
+});
 
 const { div, tr, td } = dom;
 const AUTO_EXPAND_MAX_LEVEL = 7;
 const AUTO_EXPAND_MAX_NODES = 50;
 const EDITOR_CONFIG_ID = "EDITOR_CONFIG";
 const HTML_PREVIEW_ID = "HTML_PREVIEW";
 
 /*
--- a/devtools/client/netmonitor/src/components/RequestList.js
+++ b/devtools/client/netmonitor/src/components/RequestList.js
@@ -1,24 +1,28 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { createFactory } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const { div } = dom;
 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;
+loader.lazyGetter(this, "RequestListContent", function () {
+  return createFactory(require("./RequestListContent"));
+});
+loader.lazyGetter(this, "RequestListEmptyNotice", function () {
+  return createFactory(require("./RequestListEmptyNotice"));
+});
 
 /**
  * Request panel component
  */
 function RequestList({
   connector,
   isEmpty,
 }) {
rename from devtools/client/netmonitor/src/components/RequestListColumnRemoteIp.js
rename to devtools/client/netmonitor/src/components/RequestListColumnRemoteIP.js
--- a/devtools/client/netmonitor/src/components/RequestListContent.js
+++ b/devtools/client/netmonitor/src/components/RequestListContent.js
@@ -4,29 +4,35 @@
 
 "use strict";
 
 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 {
-  setImageTooltip,
-  getImageDimensions,
-} = require("devtools/client/shared/widgets/tooltip/ImageTooltipHelper");
+
 const Actions = require("../actions/index");
 const { formDataURI } = require("../utils/request-utils");
 const {
   getDisplayedRequests,
   getSelectedRequest,
   getSortedRequests,
   getWaterfallScale,
 } = require("../selectors/index");
 
+loader.lazyGetter(this, "setImageTooltip", function () {
+  return require("devtools/client/shared/widgets/tooltip/ImageTooltipHelper")
+    .setImageTooltip;
+});
+loader.lazyGetter(this, "getImageDimensions", function () {
+  return require("devtools/client/shared/widgets/tooltip/ImageTooltipHelper")
+    .getImageDimensions;
+});
+
 // Components
 const RequestListHeader = createFactory(require("./RequestListHeader"));
 const RequestListItem = createFactory(require("./RequestListItem"));
 const RequestListContextMenu = require("../widgets/RequestListContextMenu");
 
 const { div } = dom;
 
 // Tooltip show / hide delay in ms
--- a/devtools/client/netmonitor/src/components/RequestListItem.js
+++ b/devtools/client/netmonitor/src/components/RequestListItem.js
@@ -1,46 +1,75 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { Component, createFactory } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const { div } = dom;
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const {
   fetchNetworkUpdatePacket,
   propertiesEqual,
 } = require("../utils/request-utils");
 const { RESPONSE_HEADERS } = require("../constants");
 
 // Components
-const RequestListColumnCause = createFactory(require("./RequestListColumnCause"));
-const RequestListColumnContentSize = createFactory(require("./RequestListColumnContentSize"));
-const RequestListColumnCookies = createFactory(require("./RequestListColumnCookies"));
-const RequestListColumnDomain = createFactory(require("./RequestListColumnDomain"));
-const RequestListColumnDuration = createFactory(require("./RequestListColumnDuration"));
-const RequestListColumnEndTime = createFactory(require("./RequestListColumnEndTime"));
-const RequestListColumnFile = createFactory(require("./RequestListColumnFile"));
-const RequestListColumnLatency = createFactory(require("./RequestListColumnLatency"));
-const RequestListColumnMethod = createFactory(require("./RequestListColumnMethod"));
-const RequestListColumnProtocol = createFactory(require("./RequestListColumnProtocol"));
-const RequestListColumnRemoteIP = createFactory(require("./RequestListColumnRemoteIp"));
-const RequestListColumnResponseHeader = createFactory(require("./RequestListColumnResponseHeader"));
-const RequestListColumnResponseTime = createFactory(require("./RequestListColumnResponseTime"));
-const RequestListColumnScheme = createFactory(require("./RequestListColumnScheme"));
-const RequestListColumnSetCookies = createFactory(require("./RequestListColumnSetCookies"));
-const RequestListColumnStartTime = createFactory(require("./RequestListColumnStartTime"));
-const RequestListColumnStatus = createFactory(require("./RequestListColumnStatus"));
-const RequestListColumnTransferredSize = createFactory(require("./RequestListColumnTransferredSize"));
-const RequestListColumnType = createFactory(require("./RequestListColumnType"));
-const RequestListColumnWaterfall = createFactory(require("./RequestListColumnWaterfall"));
+/* global
+  RequestListColumnCause,
+  RequestListColumnContentSize,
+  RequestListColumnCookies,
+  RequestListColumnDomain,
+  RequestListColumnDuration,
+  RequestListColumnEndTime,
+  RequestListColumnFile,
+  RequestListColumnLatency,
+  RequestListColumnMethod,
+  RequestListColumnProtocol,
+  RequestListColumnRemoteIP,
+  RequestListColumnResponseHeader,
+  RequestListColumnResponseTime,
+  RequestListColumnScheme,
+  RequestListColumnSetCookies,
+  RequestListColumnStartTime,
+  RequestListColumnStatus,
+  RequestListColumnTransferredSize,
+  RequestListColumnType,
+  RequestListColumnWaterfall
+*/
 
-const { div } = dom;
+const COLUMNS = [
+  "Cause",
+  "ContentSize",
+  "Cookies",
+  "Domain",
+  "Duration",
+  "EndTime",
+  "File",
+  "Latency",
+  "Method",
+  "Protocol",
+  "RemoteIP",
+  "ResponseHeader",
+  "ResponseTime",
+  "Scheme",
+  "SetCookies",
+  "StartTime",
+  "Status",
+  "TransferredSize",
+  "Type",
+  "Waterfall"
+];
+for (let name of COLUMNS) {
+  loader.lazyGetter(this, "RequestListColumn" + name, function () {
+    return createFactory(require("./RequestListColumn" + name));
+  });
+}
 
 /**
  * Used by shouldComponentUpdate: compare two items, and compare only properties
  * relevant for rendering the RequestListItem. Other properties (like request and
  * response headers, cookies, bodies) are ignored. These are very useful for the
  * network details, but not here.
  */
 const UPDATED_REQ_ITEM_PROPS = [
--- a/devtools/client/netmonitor/src/components/moz.build
+++ b/devtools/client/netmonitor/src/components/moz.build
@@ -19,17 +19,17 @@ DevToolsModules(
     'RequestListColumnCookies.js',
     'RequestListColumnDomain.js',
     'RequestListColumnDuration.js',
     'RequestListColumnEndTime.js',
     'RequestListColumnFile.js',
     'RequestListColumnLatency.js',
     'RequestListColumnMethod.js',
     'RequestListColumnProtocol.js',
-    'RequestListColumnRemoteIp.js',
+    'RequestListColumnRemoteIP.js',
     'RequestListColumnResponseHeader.js',
     'RequestListColumnResponseTime.js',
     'RequestListColumnScheme.js',
     'RequestListColumnSetCookies.js',
     'RequestListColumnStartTime.js',
     'RequestListColumnStatus.js',
     'RequestListColumnTransferredSize.js',
     'RequestListColumnType.js',
--- a/devtools/client/netmonitor/src/widgets/RequestListContextMenu.js
+++ b/devtools/client/netmonitor/src/widgets/RequestListContextMenu.js
@@ -1,30 +1,31 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const Services = require("Services");
-const { Curl } = require("devtools/client/shared/curl");
 const { gDevTools } = require("devtools/client/framework/devtools");
-const { saveAs } = require("devtools/client/shared/file-saver");
-const { copyString } = require("devtools/shared/platform/clipboard");
-const { showMenu } = require("devtools/client/netmonitor/src/utils/menu");
-const { openRequestInTab } = require("devtools/client/netmonitor/src/utils/firefox/open-request-in-tab");
-const { HarExporter } = require("../har/har-exporter");
 const { L10N } = require("../utils/l10n");
 const {
   formDataURI,
   getUrlQuery,
   getUrlBaseName,
   parseQueryString,
 } = require("../utils/request-utils");
 
+loader.lazyRequireGetter(this, "Curl", "devtools/client/shared/curl", true);
+loader.lazyRequireGetter(this, "saveAs", "devtools/client/shared/file-saver", true);
+loader.lazyRequireGetter(this, "copyString", "devtools/shared/platform/clipboard", true);
+loader.lazyRequireGetter(this, "showMenu", "devtools/client/netmonitor/src/utils/menu", true);
+loader.lazyRequireGetter(this, "openRequestInTab", "devtools/client/netmonitor/src/utils/firefox/open-request-in-tab", true);
+loader.lazyRequireGetter(this, "HarExporter", "devtools/client/netmonitor/src/har/har-exporter", true);
+
 class RequestListContextMenu {
   constructor(props) {
     this.props = props;
   }
 
   open(event, selectedRequest, sortedRequests) {
     let {
       id,