Layout plugin: Add option to Expand/collapse recursively

Summary:
Uses a slightly modified version of the deep expansion. In testing, there were a few issues due to the function in Inspector::onElementExpanded is essentially a toggle. I added an optional parameter to override this toggle behavior for child elements, and also flipped the order of root and child actions during collapsing, as the child state otherwise didn't persist properly (due to the component being unmounted, would be my guess?) This change should be non-breaking to other uses of the method that don't use the `deep: true` parameter
close https://github.com/facebook/flipper/issues/223

Reviewed By: passy

Differential Revision: D18225057

fbshipit-source-id: 53e840f07bf648249b5a4b36d115918dba215ff8

src/plugins/layout/Inspector.tsx

@@ -303,15 +303,24 @@ export default class Inspector extends Component<Props> {
     }),
   );
 
-  onElementExpanded = (id: ElementID, deep: boolean) => {
+  onElementExpanded = (
-    const expanded = !this.elements()[id].expanded;
+    id: ElementID,
-    this.updateElement(id, {expanded});
+    deep: boolean,
-    if (expanded) {
+    forceExpand: boolean = false,
-      this.getChildren(id, {}).then(children => {
+  ) => {
-        if (deep) {
+    const shouldExpand = forceExpand || !this.elements()[id].expanded;
-          children.forEach(child => this.onElementExpanded(child.id, deep));
+    if (shouldExpand) {
-        }
+      this.updateElement(id, {expanded: shouldExpand});
-      });
+    }
+    this.getChildren(id, {}).then(children => {
+      if (deep) {
+        children.forEach(child =>
+          this.onElementExpanded(child.id, deep, shouldExpand),
+        );
+      }
+    });
+    if (!shouldExpand) {
+      this.updateElement(id, {expanded: shouldExpand});
     }
   };
 

src/ui/components/elements-inspector/elements.tsx

@@ -253,6 +253,14 @@ class ElementsRow extends PureComponent<ElementsRowProps, ElementsRowState> {
           this.props.onElementExpanded(this.props.id, false);
         },
       },
+      {
+        label: props.element.expanded
+          ? 'Collapse all child elements'
+          : 'Expand all child elements',
+        click: () => {
+          this.props.onElementExpanded(this.props.id, true);
+        },
+      },
     ];
 
     for (const extension of props.contextMenuExtensions) {