Bug 1333004 - Selecting the details panel request is slow r=Honza

MozReview-Commit-ID: 43EoGR6IZGo

--HG--
extra : rebase_source : c2bfc1f7dcf66744bfa6105dc8497f2557a8b559

devtools/client/netmonitor/shared/components/details-panel.js

@@ -52,6 +52,7 @@ function DetailsPanel({
     Tabbar({
       activeTabId,
       onSelect: selectTab,
+      renderOnlySelected: true,
       showAllTabsMenu: true,
       toolbox,
     },

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);
       });

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();

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,

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