Bug 1333377 - cap the number of expanded nodes in netmonitor prop view;r=honza draft
authorJulian Descottes <jdescottes@mozilla.com>
Tue, 24 Jan 2017 12:42:11 +0100
changeset 466849 0d3fdd3a4c6aff0ee1baa484e9bdcef3d978036a
parent 466816 d92fd6b6d6bfc5b566222ae2957e55772d60151a
child 543537 118d1bdbfa6133e9af4596745a8c4dc75d28785f
push id43018
push userjdescottes@mozilla.com
push dateThu, 26 Jan 2017 18:29:11 +0000
reviewershonza
bugs1333377
milestone54.0a1
Bug 1333377 - cap the number of expanded nodes in netmonitor prop view;r=honza MozReview-Commit-ID: CEh8R0bFF10
devtools/client/netmonitor/shared/components/properties-view.js
devtools/client/netmonitor/test/browser_net_json-long.js
--- a/devtools/client/netmonitor/shared/components/properties-view.js
+++ b/devtools/client/netmonitor/shared/components/properties-view.js
@@ -21,16 +21,17 @@ const { FILTER_SEARCH_DELAY } = require(
 // Components
 const Editor = createFactory(require("devtools/client/netmonitor/shared/components/editor"));
 const SearchBox = createFactory(require("devtools/client/shared/components/search-box"));
 const TreeView = createFactory(require("devtools/client/shared/components/tree/tree-view"));
 const TreeRow = createFactory(require("devtools/client/shared/components/tree/tree-row"));
 
 const { div, tr, td } = DOM;
 const AUTO_EXPAND_MAX_LEVEL = 7;
+const AUTO_EXPAND_MAX_NODES = 50;
 const EDITOR_CONFIG_ID = "EDITOR_CONFIG";
 
 /*
  * Properties View component
  * A scrollable tree view component which provides some useful features for
  * representing object properties.
  *
  * Search filter - Set enableFilter to enable / disable SearchBox feature.
@@ -141,22 +142,32 @@ const PropertiesView = createClass({
     }
 
     if (level > AUTO_EXPAND_MAX_LEVEL) {
       return null;
     }
 
     let expandedNodes = new Set();
     for (let prop in object) {
+      if (expandedNodes.size > AUTO_EXPAND_MAX_NODES) {
+        // If we reached the limit of expandable nodes, bail out to avoid performance
+        // issues.
+        break;
+      }
+
       let nodePath = path + "/" + prop;
       expandedNodes.add(nodePath);
 
       let nodes = this.getExpandedNodes(object[prop], nodePath, level + 1);
       if (nodes) {
-        expandedNodes = new Set([...expandedNodes, ...nodes]);
+        let newSize = expandedNodes.size + nodes.size;
+        if (newSize < AUTO_EXPAND_MAX_NODES) {
+          // Avoid having a subtree half expanded.
+          expandedNodes = new Set([...expandedNodes, ...nodes]);
+        }
       }
     }
     return expandedNodes;
   },
 
   render() {
     const {
       decorator,
--- a/devtools/client/netmonitor/test/browser_net_json-long.js
+++ b/devtools/client/netmonitor/test/browser_net_json-long.js
@@ -59,18 +59,18 @@ add_task(function* () {
       "The response json view has the intended visibility.");
     is(tabpanel.querySelector(".editor-mount iframe") === null, true,
       "The response editor doesn't have the intended visibility.");
     is(tabpanel.querySelector(".response-image-box") === null, true,
       "The response image box doesn't have the intended visibility.");
 
     is(tabpanel.querySelectorAll(".tree-section").length, 1,
       "There should be 1 tree sections displayed in this tabpanel.");
-    is(tabpanel.querySelectorAll(".treeRow:not(.tree-section)").length, 4094,
-      "There should be 4094 json properties displayed in this tabpanel.");
+    is(tabpanel.querySelectorAll(".treeRow:not(.tree-section)").length, 2047,
+      "There should be 2047 json properties displayed in this tabpanel.");
     is(tabpanel.querySelectorAll(".empty-notice").length, 0,
       "The empty notice should not be displayed in this tabpanel.");
 
     is(tabpanel.querySelector(".tree-section .treeLabel").textContent,
       L10N.getStr("jsonScopeName"),
       "The json view section doesn't have the correct title.");
 
     let labels = tabpanel
@@ -78,14 +78,14 @@ add_task(function* () {
     let values = tabpanel
       .querySelectorAll("tr:not(.tree-section) .treeValueCell .objectBox");
 
     is(labels[0].textContent, "0",
       "The first json property name was incorrect.");
     is(values[0].textContent, "Object",
       "The first json property value was incorrect.");
 
-    is(labels[1].textContent, "greeting",
+    is(labels[1].textContent, "1",
       "The second json property name was incorrect.");
-    is(values[1].textContent, "\"Hello long string JSON!\"",
+    is(values[1].textContent, "Object",
       "The second json property value was incorrect.");
   }
 });