From 2f76dc4d66f06f771c43e3d8abf4602537b29103 Mon Sep 17 00:00:00 2001 From: Ricky Chien Date: Wed, 25 Jan 2017 15:40:30 +0800 Subject: [PATCH] Bug 1333004 - Selecting the details panel request is slow r=Honza MozReview-Commit-ID: 43EoGR6IZGo --HG-- extra : rebase_source : c2bfc1f7dcf66744bfa6105dc8497f2557a8b559 --- .../shared/components/details-panel.js | 1 + .../netmonitor/shared/components/editor.js | 5 +++-- .../browser_net_security-tab-visibility.js | 9 --------- .../client/shared/components/tabs/tabbar.js | 2 ++ .../client/shared/components/tabs/tabs.js | 20 +++++++++++++++---- 5 files changed, 22 insertions(+), 15 deletions(-) diff --git a/devtools/client/netmonitor/shared/components/details-panel.js b/devtools/client/netmonitor/shared/components/details-panel.js index 1c5231d74118..1c8c64869d31 100644 --- a/devtools/client/netmonitor/shared/components/details-panel.js +++ b/devtools/client/netmonitor/shared/components/details-panel.js @@ -52,6 +52,7 @@ function DetailsPanel({ Tabbar({ activeTabId, onSelect: selectTab, + renderOnlySelected: true, showAllTabsMenu: true, toolbox, }, diff --git a/devtools/client/netmonitor/shared/components/editor.js b/devtools/client/netmonitor/shared/components/editor.js index dea1c0d42509..4a0cf329374a 100644 --- a/devtools/client/netmonitor/shared/components/editor.js +++ b/devtools/client/netmonitor/shared/components/editor.js @@ -10,6 +10,7 @@ const { createClass, DOM, PropTypes } = require("devtools/client/shared/vendor/r const SourceEditor = require("devtools/client/sourceeditor/editor"); const { div } = DOM; +const SYNTAX_HIGHLIGHT_MAX_SIZE = 102400; /** * CodeMirror editor as a React component @@ -39,7 +40,7 @@ const Editor = createClass({ this.editor = new SourceEditor({ lineNumbers: true, - mode, + mode: text.length < SYNTAX_HIGHLIGHT_MAX_SIZE ? mode : null, readOnly: true, value: text, }); @@ -54,7 +55,7 @@ const Editor = createClass({ return; } - if (prevProps.mode !== mode) { + if (prevProps.mode !== mode && text.length < SYNTAX_HIGHLIGHT_MAX_SIZE) { this.deferEditor.then(() => { this.editor.setMode(mode); }); diff --git a/devtools/client/netmonitor/test/browser_net_security-tab-visibility.js b/devtools/client/netmonitor/test/browser_net_security-tab-visibility.js index e8dae73e8db1..6ae18ae725df 100644 --- a/devtools/client/netmonitor/test/browser_net_security-tab-visibility.js +++ b/devtools/client/netmonitor/test/browser_net_security-tab-visibility.js @@ -61,9 +61,6 @@ add_task(function* () { is(!!document.querySelector("#security-tab"), testcase.visibleOnNewEvent, "Security tab is " + (testcase.visibleOnNewEvent ? "visible" : "hidden") + " after new request was added to the menu."); - is(!!document.querySelector("#security-panel"), testcase.visibleOnNewEvent, - "Security panel is " + (testcase.visibleOnNewEvent ? "visible" : "hidden") + - " after new request was added to the menu."); info("Waiting for security information to arrive."); yield onSecurityInfo; @@ -73,9 +70,6 @@ add_task(function* () { is(!!document.querySelector("#security-tab"), testcase.visibleOnSecurityInfo, "Security tab is " + (testcase.visibleOnSecurityInfo ? "visible" : "hidden") + " after security information arrived."); - is(!!document.querySelector("#security-panel"), testcase.visibleOnSecurityInfo, - "Security panel is " + (testcase.visibleOnSecurityInfo? "visible" : "hidden") + - " after security information arrived."); info("Waiting for request to complete."); yield onComplete; @@ -83,9 +77,6 @@ add_task(function* () { is(!!document.querySelector("#security-tab"), testcase.visibleOnceComplete, "Security tab is " + (testcase.visibleOnceComplete ? "visible" : "hidden") + " after request has been completed."); - is(!!document.querySelector("#security-panel"), testcase.visibleOnceComplete, - "Security panel is " + (testcase.visibleOnceComplete? "visible" : "hidden") + - " after request has been completed."); info("Clearing requests."); RequestsMenu.clear(); diff --git a/devtools/client/shared/components/tabs/tabbar.js b/devtools/client/shared/components/tabs/tabbar.js index 3d0d117b3bda..8995ef6d9b79 100644 --- a/devtools/client/shared/components/tabs/tabbar.js +++ b/devtools/client/shared/components/tabs/tabbar.js @@ -27,6 +27,7 @@ let Tabbar = createClass({ showAllTabsMenu: PropTypes.bool, activeTabId: PropTypes.string, toolbox: PropTypes.object, + renderOnlySelected: PropTypes.bool, }, getDefaultProps: function () { @@ -221,6 +222,7 @@ let Tabbar = createClass({ div({className: "devtools-sidebar-tabs"}, Tabs({ onAllTabsMenuClick: this.onAllTabsMenuClick, + renderOnlySelected: this.props.renderOnlySelected, showAllTabsMenu: this.props.showAllTabsMenu, tabActive: this.state.activeTab, onAfterChange: this.onTabChanged, diff --git a/devtools/client/shared/components/tabs/tabs.js b/devtools/client/shared/components/tabs/tabs.js index 69e700820b2a..f48ffc1aa457 100644 --- a/devtools/client/shared/components/tabs/tabs.js +++ b/devtools/client/shared/components/tabs/tabs.js @@ -50,12 +50,18 @@ define(function (require, exports, module) { ]).isRequired, showAllTabsMenu: React.PropTypes.bool, onAllTabsMenuClick: React.PropTypes.func, + + // Set true will only render selected panel on DOM. It's complete + // opposite of the created array, and it's useful if panels content + // is unpredictable and update frequently. + renderOnlySelected: React.PropTypes.bool, }, getDefaultProps: function () { return { tabActive: 0, showAllTabsMenu: false, + renderOnlySelected: false, }; }, @@ -286,21 +292,27 @@ define(function (require, exports, module) { }, renderPanels: function () { - if (!this.props.children) { + let { children, renderOnlySelected } = this.props; + + if (!children) { throw new Error("There must be at least one Tab"); } - if (!Array.isArray(this.props.children)) { - this.props.children = [this.props.children]; + if (!Array.isArray(children)) { + children = [children]; } let selectedIndex = this.state.tabActive; - let panels = this.props.children + let panels = children .map((tab) => typeof tab === "function" ? tab() : tab) .filter((tab) => tab) .map((tab, index) => { let selected = selectedIndex === index; + if (renderOnlySelected && !selected) { + return null; + } + let id = tab.props.id; // Use 'visibility:hidden' + 'width/height:0' for hiding