Dont auto expand nodes

Summary:
Rather than automatically collapsing siblings when using the visualiser instead we take a different approach:
1. The tree starts out fully collapsed
2. Every time you click on the visualiser we expand it and its ancestory chain to expanded nodes.

This is exactly how the Dom inspector works. The previous approach of constantly collapsing all siblings when uinsg the visualiser felt too intrusive and taking control from the user. The option is still there but only in the context menu

Some ultilities around autocollapsing nodes were removed as they dont make sense anymore that we now send complete frames

Changelog: UIDebugger Tree starts collapsed and expands as you click from the visualiser

Reviewed By: aigoncharov

Differential Revision: D47949843

fbshipit-source-id: 4381d22b12874dde5a89267572bee95f084380e3

desktop/plugins/public/ui-debugger/plugin/ClientDataUtils.tsx

@@ -7,24 +7,9 @@
  * @format
  */
 
-import {Draft} from 'flipper-plugin';
 import {ClientNode, Id} from '../ClientTypes';
 import {UIState} from '../DesktopTypes';
 
-export function collapseinActiveChildren(
-  node: ClientNode,
-  expandedNodes: Draft<Set<Id>>,
-) {
-  if (node.activeChild) {
-    expandedNodes.add(node.activeChild);
-    for (const child of node.children) {
-      if (child !== node.activeChild) {
-        expandedNodes.delete(child);
-      }
-    }
-  }
-}
-
 export function checkFocusedNodeStillActive(
   uiState: UIState,
   nodes: Map<Id, ClientNode>,

desktop/plugins/public/ui-debugger/plugin/uiActions.tsx

@@ -19,10 +19,7 @@ import {
   WireFrameMode,
 } from '../DesktopTypes';
 import {tracker} from '../utils/tracker';
-import {
-  checkFocusedNodeStillActive,
-  collapseinActiveChildren,
-} from './ClientDataUtils';
+import {checkFocusedNodeStillActive} from './ClientDataUtils';
 
 export function uiActions(
   uiState: UIState,
@@ -87,19 +84,19 @@ export function uiActions(
   };
 
   const onCollapseAllNonAncestors = (nodeId: Id) => {
-    //this is not the simplest way to achieve this but on android there is a parent pointer missing for the decor view
-    //due to the nested obversers.
+    uiState.expandedNodes.update((draft) => {
+      draft.clear();
+    });
+    ensureAncestorsExpanded(nodeId);
+  };
+
+  const ensureAncestorsExpanded = (nodeId: Id) => {
     uiState.expandedNodes.update((draft) => {
       const nodesMap = nodes.get();
-      let prevNode: Id | null = null;
+
       let curNode = nodesMap.get(nodeId);
       while (curNode != null) {
-        for (const child of curNode.children) {
-          if (child !== prevNode) {
-            draft.delete(child);
-          }
-        }
-        prevNode = curNode.id;
+        draft.add(curNode.id);
         curNode = nodesMap.get(curNode?.parent ?? 'Nonode');
       }
     });
@@ -177,13 +174,6 @@ export function uiActions(
     tracker.track('play-pause-toggled', {paused: isPaused});
     uiState.isPaused.set(isPaused);
     if (!isPaused) {
-      //When going back to play mode then set the atoms to the live state to rerender the latest
-      //Also need to fixed expanded state for any change in active child state
-      uiState.expandedNodes.update((draft) => {
-        liveClientData.nodes.forEach((node) => {
-          collapseinActiveChildren(node, draft);
-        });
-      });
       nodes.set(liveClientData.nodes);
       snapshot.set(liveClientData.snapshotInfo);
       checkFocusedNodeStillActive(uiState, nodes.get());
@@ -216,5 +206,6 @@ export function uiActions(
     onCollapseAllNonAncestors,
     onExpandAllRecursively,
     onCollapseAllRecursively,
+    ensureAncestorsExpanded,
   };
 }