Bug 1333377 - cap the number of expanded nodes in netmonitor prop view;r=honza
MozReview-Commit-ID: CEh8R0bFF10
--- 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.");
}
});