Persist scopes (firefox-devtools#2064)

* Persist variable expand state
* add expanded cache
* add basic caching for the scopes across loads

Author: bomsy

src/components/SecondaryPanes/Scopes.js

@@ -136,6 +136,9 @@ function getScopes(pauseInfo, selectedFrame) {
   return scopes;
 }
 
+let expandedCache = new Set();
+let actorsCache = [];
+
 const Scopes = createClass({
   propTypes: {
     pauseInfo: ImPropTypes.map,
@@ -180,6 +183,14 @@ const Scopes = createClass({
         roots: scopes,
         getObjectProperties: id => loadedObjects.get(id),
         loadObjectProperties: loadObjectProperties,
+        setExpanded: expanded => {
+          expandedCache = expanded;
+        },
+        getExpanded: () => expandedCache,
+        setActors: actors => {
+          actorsCache = actors;
+        },
+        getActors: () => actorsCache,
         onLabelClick: (item, { expanded, setExpanded }) => {
           setExpanded(item, !expanded);
         }

src/components/shared/ManagedTree.js

@@ -1,6 +1,6 @@
 // @flow
-const React = require("react");
-const Tree = React.createFactory(require("devtools-sham-modules").Tree);
+import { createClass, PropTypes, createFactory } from "react";
+const Tree = createFactory(require("devtools-sham-modules").Tree);
 require("./ManagedTree.css");
 
 type ManagedTreeItem = {
@@ -13,8 +13,8 @@ type NextProps = {
   autoExpandAll: boolean,
   autoExpandDepth: number,
   getChildren: () => any,
-  getKey: (ManagedTreeItem, number) => string,
-  getParent: (ManagedTreeItem) => any,
+  getKey: () => string,
+  getParent: () => any,
   getRoots: () => any,
   highlightItems: Array<ManagedTreeItem>,
   itemHeight: number,
@@ -28,8 +28,14 @@ type InitialState = {
   focusedItem: ?ManagedTreeItem
 };
 
-let ManagedTree = React.createClass({
-  propTypes: Tree.propTypes,
+let ManagedTree = createClass({
+  propTypes: Object.assign({},
+    Tree.propTypes,
+    {
+      getExpanded: PropTypes.func,
+      setExpanded: PropTypes.func
+    }
+  ),
 
   displayName: "ManagedTree",
 
@@ -53,6 +59,19 @@ let ManagedTree = React.createClass({
     }
   },
 
+  componentWillMount() {
+    if (this.props.getExpanded) {
+      const expanded = this.props.getExpanded();
+      this.setState({ expanded });
+    }
+  },
+
+  componentWillUnmount() {
+    if (this.props.setExpanded) {
+      this.props.setExpanded(this.state.expanded);
+    }
+  },
+
   setExpanded(item: ManagedTreeItem, isExpanded: boolean) {
     const expanded = this.state.expanded;
     const key = this.props.getKey(item);

src/components/shared/ObjectInspector.js

@@ -54,7 +54,11 @@ const ObjectInspector = React.createClass({
     getObjectProperties: PropTypes.func.isRequired,
     loadObjectProperties: PropTypes.func.isRequired,
     onLabelClick: PropTypes.func,
-    onDoubleClick: PropTypes.func
+    onDoubleClick: PropTypes.func,
+    getExpanded: PropTypes.func,
+    setExpanded: PropTypes.func,
+    getActors: PropTypes.func,
+    setActors: PropTypes.func
   },
 
   displayName: "ObjectInspector",
@@ -63,7 +67,6 @@ const ObjectInspector = React.createClass({
     // Cache of dynamically built nodes. We shouldn't need to clear
     // this out ever, since we don't ever "switch out" the object
     // being inspected.
-    this.actorCache = {};
     return {};
   },
 
@@ -75,6 +78,18 @@ const ObjectInspector = React.createClass({
     };
   },
 
+  componentWillMount() {
+    if (this.props.getActors) {
+      this.actors = this.props.getActors();
+    }
+  },
+
+  componentWillUnmount() {
+    if (this.props.setActors) {
+      this.props.setActors(this.actors);
+    }
+  },
+
   getChildren(item) {
     const { getObjectProperties } = this.props;
     const obj = item.contents;
@@ -95,8 +110,8 @@ const ObjectInspector = React.createClass({
       // being the same across renders. If we didn't do this, each
       // node would be a new instance every render.
       const key = item.path;
-      if (this.actorCache[key]) {
-        return this.actorCache[key];
+      if (this.actors[key]) {
+        return this.actors[key];
       }
 
       const loadedProps = getObjectProperties(actor);
@@ -106,7 +121,7 @@ const ObjectInspector = React.createClass({
       }
 
       const children = makeNodesForProperties(loadedProps, item.path);
-      this.actorCache[actor] = children;
+      this.actors[key] = children;
       return children;
     }
 
@@ -167,8 +182,10 @@ const ObjectInspector = React.createClass({
   },
 
   render() {
-    const { name, desc, loadObjectProperties,
-            autoExpandDepth } = this.props;
+    const {
+      name, desc, loadObjectProperties,
+      autoExpandDepth, getExpanded, setExpanded
+    } = this.props;
 
     let roots = this.props.roots;
     if (!roots) {
@@ -190,7 +207,8 @@ const ObjectInspector = React.createClass({
           loadObjectProperties(item.contents.value);
         }
       },
-
+      getExpanded,
+      setExpanded,
       renderItem: this.renderItem
     });
   }