Bug 1377677 - Remember expanded objects when switching panel in JSON Viewer r=Honza

MozReview-Commit-ID: AB9SUV2FY8s

--HG--
extra : rebase_source : 3391bc5bb59451a4a66ecad355bd6ea7ce9a045a

devtools/client/jsonview/components/JsonPanel.js

@@ -8,8 +8,7 @@
 
 define(function (require, exports, module) {
   const { DOM: dom, createFactory, createClass, PropTypes } = require("devtools/client/shared/vendor/react");
-  const TreeViewClass = require("devtools/client/shared/components/tree/TreeView");
-  const TreeView = createFactory(TreeViewClass);
+  const TreeView = createFactory(require("devtools/client/shared/components/tree/TreeView"));
 
   const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
   const { createFactories } = require("devtools/client/shared/react-utils");
@@ -19,8 +18,6 @@ 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;
 
   function isObject(value) {
     return Object(value) === value;
@@ -42,7 +39,7 @@ define(function (require, exports, module) {
         PropTypes.bool,
         PropTypes.number
       ]),
-      jsonTextLength: PropTypes.number,
+      expandedNodes: PropTypes.instanceOf(Set),
       searchFilter: PropTypes.string,
       actions: PropTypes.object,
     },
@@ -96,15 +93,6 @@ 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 = TreeViewClass.getExpandedNodes(
-          this.props.data,
-          {maxLevel: AUTO_EXPAND_MAX_LEVEL}
-        );
-      }
-
       // Render tree component.
       return TreeView({
         object: this.props.data,
@@ -112,7 +100,7 @@ define(function (require, exports, module) {
         onFilter: this.onFilter,
         columns: columns,
         renderValue: this.renderValue,
-        expandedNodes: expandedNodes,
+        expandedNodes: this.props.expandedNodes,
       });
     },
 

devtools/client/jsonview/components/MainTabbedArea.js

@@ -34,7 +34,8 @@ define(function (require, exports, module) {
         PropTypes.array,
         PropTypes.bool,
         PropTypes.number
-      ])
+      ]),
+      expandedNodes: PropTypes.instanceOf(Set),
     },
 
     getInitialState: function () {
@@ -60,7 +61,7 @@ define(function (require, exports, module) {
             title: JSONView.Locale.$STR("jsonViewer.tab.JSON")},
             JsonPanel({
               data: this.props.json,
-              jsonTextLength: this.props.jsonText.length,
+              expandedNodes: this.props.expandedNodes,
               actions: this.props.actions,
               searchFilter: this.state.searchFilter
             })

devtools/client/jsonview/json-viewer.js

@@ -10,8 +10,11 @@ define(function (require, exports, module) {
   const { render } = require("devtools/client/shared/vendor/react-dom");
   const { createFactories } = require("devtools/client/shared/react-utils");
   const { MainTabbedArea } = createFactories(require("./components/MainTabbedArea"));
+  const TreeViewClass = require("devtools/client/shared/components/tree/TreeView");
 
   const json = document.getElementById("json");
+  const AUTO_EXPAND_MAX_SIZE = 100 * 1024;
+  const AUTO_EXPAND_MAX_LEVEL = 7;
 
   let prettyURL;
 
@@ -35,6 +38,16 @@ define(function (require, exports, module) {
     input.json = err;
   }
 
+  // Expand the document by default if its size isn't bigger than 100KB.
+  if (!(input.json instanceof Error) && input.jsonText.length <= AUTO_EXPAND_MAX_SIZE) {
+    input.expandedNodes = TreeViewClass.getExpandedNodes(
+      input.json,
+      {maxLevel: AUTO_EXPAND_MAX_LEVEL}
+    );
+  } else {
+    input.expandedNodes = new Set();
+  }
+
   json.remove();
 
   /**

devtools/client/jsonview/test/browser_jsonview_valid_json.js

@@ -31,6 +31,11 @@ add_task(function* () {
   // Clicking the label collapses the auto-expanded node.
   yield clickJsonNode(".jsonPanelBox .treeTable .treeLabel");
   is(yield countRows(), 1, "There must be one row");
+
+  // Collapsed nodes are preserved when switching panels.
+  yield selectJsonViewContentTab("headers");
+  yield selectJsonViewContentTab("json");
+  is(yield countRows(), 1, "There must still be one row");
 });
 
 function countRows() {