Bug 1527317 - lazy load TabboxPanel in NetworkEventMessage.js; r=Honza.
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Tue, 12 Feb 2019 16:01:39 +0000
changeset 458758 3405ab9c5c7b
parent 458757 de0efca1118e
child 458759 f107a86c128d
push id35548
push useropoprus@mozilla.com
push dateWed, 13 Feb 2019 09:48:26 +0000
treeherdermozilla-central@93e37c529818 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1527317
milestone67.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 1527317 - lazy load TabboxPanel in NetworkEventMessage.js; r=Honza. The TabboxPanel component is the one we use to show the detail of a given network request. In the console, it's not used until the user expand a network request, but we do load it at the same time as the NetworkEventMessage. We can save some extra work by loading it lazily. Differential Revision: https://phabricator.services.mozilla.com/D19497
devtools/client/webconsole/components/message-types/NetworkEventMessage.js
--- a/devtools/client/webconsole/components/message-types/NetworkEventMessage.js
+++ b/devtools/client/webconsole/components/message-types/NetworkEventMessage.js
@@ -2,23 +2,24 @@
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* 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";
 
 // React & Redux
-const { createFactory } = require("devtools/client/shared/vendor/react");
+const { createFactory, createElement } = 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/components/Message"));
 const actions = require("devtools/client/webconsole/actions/index");
 const { l10n } = require("devtools/client/webconsole/utils/messages");
-const TabboxPanel = createFactory(require("devtools/client/netmonitor/src/components/TabboxPanel"));
+
+loader.lazyRequireGetter(this, "TabboxPanel", "devtools/client/netmonitor/src/components/TabboxPanel");
 const { getHTTPStatusCodeURL } = require("devtools/client/netmonitor/src/utils/mdn-utils");
 const LEARN_MORE = l10n.getStr("webConsoleMoreInfoLabel");
 
 NetworkEventMessage.displayName = "NetworkEventMessage";
 
 NetworkEventMessage.propTypes = {
   message: PropTypes.object.isRequired,
   serviceContainer: PropTypes.shape({
@@ -134,17 +135,17 @@ function NetworkEventMessage({
       return serviceContainer.requestData(requestId, dataType);
     },
   };
 
   // Only render the attachment if the network-event is
   // actually opened (performance optimization).
   const attachment = open && dom.div({
     className: "network-info network-monitor devtools-monospace"},
-    TabboxPanel({
+    createElement(TabboxPanel, {
       connector,
       activeTabId: networkMessageActiveTabId,
       request: networkMessageUpdate,
       sourceMapService: serviceContainer.sourceMapService,
       openLink: serviceContainer.openLink,
       selectTab: (tabId) => {
         dispatch(actions.selectNetworkMessageTab(tabId));
       },