From 5f5a38f1fe8fad9d3c665de2984864fdb42e926d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20B=C3=BCchele?= <danielbuechele@fb.com>
Date: Tue, 26 Feb 2019 02:33:40 -0800
Subject: [PATCH] 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 | 38 +++++++++----------------
 src/plugins/layout/layout2/index.js     |  7 +++--
 2 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/src/plugins/layout/layout2/Inspector.js b/src/plugins/layout/layout2/Inspector.js
index b08a9bfaa..6a916e6a4 100644
--- a/src/plugins/layout/layout2/Inspector.js
+++ b/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) => {
diff --git a/src/plugins/layout/layout2/index.js b/src/plugins/layout/layout2/index.js
index 05d3f8379..0131142e2 100644
--- a/src/plugins/layout/layout2/index.js
+++ b/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);
   }