Bug 1247064 - JSON Viewer: auto-expand tree view; r=jryans

devtools/client/jsonview/components/json-panel.js

@@ -15,6 +15,8 @@ define(function(require, exports, module) {
   const { Toolbar, ToolbarButton } = createFactories(require("./reps/toolbar"));
 
   const { div } = dom;
+  const AUTO_EXPAND_MAX_SIZE = 100 * 1024;
+  const AUTO_EXPAND_MAX_LEVEL = 7;
 
   /**
    * This template represents the 'JSON' panel. The panel is
@@ -28,6 +30,7 @@ define(function(require, exports, module) {
         PropTypes.array,
         PropTypes.object
       ]),
+      jsonTextLength: PropTypes.number,
       searchFilter: PropTypes.string,
       actions: PropTypes.object,
     },
@@ -59,6 +62,28 @@ define(function(require, exports, module) {
       return json.indexOf(this.props.searchFilter) >= 0;
     },
 
+    getExpandedNodes: function(object, path = "", level = 0) {
+      if (typeof object != "object") {
+        return null;
+      }
+
+      if (level > AUTO_EXPAND_MAX_LEVEL) {
+        return null;
+      }
+
+      let expandedNodes = new Set();
+      for (let prop in object) {
+        let nodePath = path + "/" + prop;
+        expandedNodes.add(nodePath);
+
+        let nodes = this.getExpandedNodes(object[prop], nodePath, level + 1);
+        if (nodes) {
+          expandedNodes = new Set([...expandedNodes, ...nodes]);
+        }
+      }
+      return expandedNodes;
+    },
+
     renderValue: props => {
       let member = props.member;
 
@@ -79,13 +104,20 @@ define(function(require, exports, module) {
         width: "100%"
       }];
 
+      // Expand the document by default if its size isn't bigger than 100KB.
+      let expandedNodes = new Set();
+      if (this.props.jsonTextLength <= AUTO_EXPAND_MAX_SIZE) {
+        expandedNodes = this.getExpandedNodes(this.props.data);
+      }
+
       // Render tree component.
       return TreeView({
         object: this.props.data,
         mode: "tiny",
         onFilter: this.onFilter.bind(this),
         columns: columns,
-        renderValue: this.renderValue
+        renderValue: this.renderValue,
+        expandedNodes: expandedNodes,
       });
     },
 

devtools/client/jsonview/components/main-tabbed-area.js

@@ -57,6 +57,7 @@ define(function(require, exports, module) {
             title: Locale.$STR("jsonViewer.tab.JSON")},
             JsonPanel({
               data: this.props.json,
+              jsonTextLength: this.props.jsonText.length,
               actions: this.props.actions,
               searchFilter: this.state.searchFilter
             })

devtools/client/jsonview/test/browser_jsonview_valid_json.js

@@ -13,12 +13,7 @@ add_task(function* () {
   yield addJsonViewTab(TEST_JSON_URL);
 
   let countBefore = yield getElementCount(".jsonPanelBox .treeTable .treeRow");
-  ok(countBefore == 1, "There must be one row");
+  ok(countBefore == 3, "There must be three rows");
-
-  yield expandJsonNode(".jsonPanelBox .treeTable .treeLabel");
-
-  let countAfter = yield getElementCount(".jsonPanelBox .treeTable .treeRow");
-  ok(countAfter == 3, "There must be three rows");
 
   let objectCellCount = yield getElementCount(
     ".jsonPanelBox .treeTable .objectCell");
@@ -27,4 +22,10 @@ add_task(function* () {
   let objectCellText = yield getElementText(
     ".jsonPanelBox .treeTable .objectCell");
   ok(objectCellText == "", "The summary is hidden when object is expanded");
+
+  // Collapsed auto-expanded node.
+  yield clickJsonNode(".jsonPanelBox .treeTable .treeLabel");
+
+  let countAfter = yield getElementCount(".jsonPanelBox .treeTable .treeRow");
+  ok(countAfter == 1, "There must be one row");
 });

devtools/client/jsonview/test/head.js

@@ -59,7 +59,7 @@ function addJsonViewTab(url) {
 /**
  * Expanding a node in the JSON tree
  */
-function expandJsonNode(selector) {
+function clickJsonNode(selector) {
   info("Expanding node: '" + selector + "'");
 
   let browser = gBrowser.selectedBrowser;

devtools/client/locales/en-US/jsonview.properties

@@ -29,6 +29,9 @@ jsonViewer.Save=Save
 # LOCALIZATION NOTE (jsonViewer.Copy): Label for clipboard copy command
 jsonViewer.Copy=Copy
 
+# LOCALIZATION NOTE (jsonViewer.ExpandAll): Label for expanding all nodes
+jsonViewer.ExpandAll=Expand All
+
 # LOCALIZATION NOTE (jsonViewer.PrettyPrint): Label for JSON
 # pretty print action button.
 jsonViewer.PrettyPrint=Pretty Print