element expanding

Summary:
Previously nodes were always marked as expanded, when they were loaded. In some cases this caused a node to be marked as expanded, but its children not being loaded.

This changes the behaviour to only mark a node as expanded, once its children are loaded.

Reviewed By: jknoxville

Differential Revision: D14209814

fbshipit-source-id: f825d6a066373be932e42b9612a1bf78877b12aa

src/plugins/layout/layout2/Inspector.js

@@ -137,32 +137,29 @@ export default class Inspector extends Component<Props> {
       // element has no children so we're as deep as we can be
       return;
     }
-    return this.getChildren(element.id, {}, true).then(
-      (elements: Array<Element>) => {
-        if (element.children.length >= 2) {
-          // element has two or more children so we can stop expanding
-          return;
-        }
-        return this.performInitialExpand(this.elements()[element.children[0]]);
-      },
-    );
+    return this.getChildren(element.id, {}).then((elements: Array<Element>) => {
+      if (element.children.length >= 2) {
+        // element has two or more children so we can stop expanding
+        return;
+      }
+      return this.performInitialExpand(this.elements()[element.children[0]]);
+    });
   }
 
   async getChildren(
     id: ElementID,
     options: GetNodesOptions,
-    expanded?: boolean,
   ): Promise<Array<Element>> {
     if (!this.elements()[id]) {
-      await this.getNodes([id], options, expanded);
+      await this.getNodes([id], options);
     }
-    return this.getNodes(this.elements()[id].children, options, expanded);
+    this.updateElement(id, {expanded: true});
+    return this.getNodes(this.elements()[id].children, options);
   }
 
   getNodes(
     ids: Array<ElementID> = [],
     options: GetNodesOptions,
-    expanded?: boolean,
   ): Promise<Array<Element>> {
     const {forAccessibilityEvent} = options;
 
@@ -174,12 +171,7 @@ export default class Inspector extends Component<Props> {
           selected: false,
         })
         .then(({elements}) => {
-          elements.forEach(e => {
-            if (typeof expanded === 'boolean') {
-              e.expanded = expanded;
-            }
-            this.updateElement(e.id, e);
-          });
+          elements.forEach(e => this.updateElement(e.id, e));
           return elements;
         });
     } else {
@@ -188,11 +180,9 @@ export default class Inspector extends Component<Props> {
   }
 
   getAndExpandPath(path: Array<ElementID>) {
-    return Promise.all(path.map(id => this.getChildren(id, {}, true))).then(
-      () => {
-        this.onElementSelected(path[path.length - 1]);
-      },
-    );
+    return Promise.all(path.map(id => this.getChildren(id, {}))).then(() => {
+      this.onElementSelected(path[path.length - 1]);
+    });
   }
 
   onElementSelected = debounce((selectedKey: ElementID) => {

src/plugins/layout/layout2/index.js

@@ -33,11 +33,13 @@ type State = {|
   searchResults: ?ElementSearchResultSet,
 |};
 
+export type ElementMap = {[key: ElementID]: Element};
+
 export type PersistedState = {|
   rootElement: ?ElementID,
   rootAXElement: ?ElementID,
-  elements: {[key: ElementID]: Element},
-  AXelements: {[key: ElementID]: Element},
+  elements: ElementMap,
+  AXelements: ElementMap,
 |};
 
 export default class Layout extends FlipperPlugin<State, void, PersistedState> {
@@ -59,6 +61,7 @@ export default class Layout extends FlipperPlugin<State, void, PersistedState> {
   };
 
   componentDidMount() {
+    // reset the data, as it might be outdated
     this.props.setPersistedState(Layout.defaultPersistedState);
   }