Bug 1420289 - Lazy load optional React components from netmonitor. r=Honza
MozReview-Commit-ID: 9kzmYrzafjj
--- 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,