Bug 1458769 - Cache the SplitBox and TabBar components used in the Inspector. r=pbro
authorGabriel Luong <gabriel.luong@gmail.com>
Thu, 03 May 2018 09:39:38 -0400
changeset 472954 ad6447a9e9cec3caffc8addabca3898ee34ae947
parent 472953 6654bf83bacc22d748dd36839fac488f75c3b77e
child 472955 f127f18d19a92a96a4d24eca336b1ef6839983e2
push id1728
push userjlund@mozilla.com
push dateMon, 18 Jun 2018 21:12:27 +0000
treeherdermozilla-release@c296fde26f5f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1458769
milestone61.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 1458769 - Cache the SplitBox and TabBar components used in the Inspector. r=pbro
devtools/client/inspector/inspector.js
devtools/client/inspector/toolsidebar.js
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -455,16 +455,32 @@ Inspector.prototype = {
     if (!this._InspectorTabPanel) {
       this._InspectorTabPanel =
         this.React.createFactory(this.browserRequire(
         "devtools/client/inspector/components/InspectorTabPanel"));
     }
     return this._InspectorTabPanel;
   },
 
+  get InspectorSplitBox() {
+    if (!this._InspectorSplitBox) {
+      this._InspectorSplitBox = this.React.createFactory(this.browserRequire(
+        "devtools/client/shared/components/splitter/SplitBox"));
+    }
+    return this._InspectorSplitBox;
+  },
+
+  get TabBar() {
+    if (!this._TabBar) {
+      this._TabBar = this.React.createFactory(this.browserRequire(
+        "devtools/client/shared/components/tabs/TabBar"));
+    }
+    return this._TabBar;
+  },
+
   /**
    * Check if the inspector should use the landscape mode.
    *
    * @return {Boolean} true if the inspector should be in landscape mode.
    */
   useLandscapeMode: function() {
     let { clientWidth } = this.panelDoc.getElementById("inspector-splitter-box");
     return this.is3PaneModeEnabled && this.toolbox.hostType == Toolbox.HostType.SIDE ?
@@ -472,32 +488,30 @@ Inspector.prototype = {
       clientWidth > PORTRAIT_MODE_WIDTH_THRESHOLD;
   },
 
   /**
    * Build Splitter located between the main and side area of
    * the Inspector panel.
    */
   setupSplitter: function() {
-    let SplitBox = this.React.createFactory(this.browserRequire(
-      "devtools/client/shared/components/splitter/SplitBox"));
     let { width, height, splitSidebarWidth } = this.getSidebarSize();
 
-    let splitter = SplitBox({
+    let splitter = this.InspectorSplitBox({
       className: "inspector-sidebar-splitter",
       initialWidth: width,
       initialHeight: height,
       minSize: "10%",
       maxSize: "80%",
       splitterSize: 1,
       endPanelControl: true,
       startPanel: this.InspectorTabPanel({
         id: "inspector-main-content"
       }),
-      endPanel: SplitBox({
+      endPanel: this.InspectorSplitBox({
         initialWidth: splitSidebarWidth,
         minSize: 10,
         maxSize: "80%",
         splitterSize: this.is3PaneModeEnabled ? 1 : 0,
         endPanelControl: this.is3PaneModeEnabled,
         startPanel: this.InspectorTabPanel({
           id: "inspector-rules-container"
         }),
--- a/devtools/client/inspector/toolsidebar.js
+++ b/devtools/client/inspector/toolsidebar.js
@@ -63,23 +63,24 @@ ToolSidebar.prototype = {
   get browserRequire() {
     return this._toolPanel.browserRequire;
   },
 
   get InspectorTabPanel() {
     return this._toolPanel.InspectorTabPanel;
   },
 
+  get TabBar() {
+    return this._toolPanel.TabBar;
+  },
+
   // Rendering
 
   render: function() {
-    let Tabbar = this.React.createFactory(this.browserRequire(
-      "devtools/client/shared/components/tabs/TabBar"));
-
-    let sidebar = Tabbar({
+    let sidebar = this.TabBar({
       menuDocument: this._toolPanel._toolbox.doc,
       showAllTabsMenu: true,
       sidebarToggleButton: this._options.sidebarToggleButton,
       onSelect: this.handleSelectionChange.bind(this),
     });
 
     this._tabbar = this.ReactDOM.render(sidebar, this._tabbox);
   },