Bug 1458769 - Cache the SplitBox and TabBar components used in the Inspector. r=ochameau
MozReview-Commit-ID: 3smGkXqokfo
--- 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);
},