Increase indent and automatically scroll horiztonally on selection

Summary:
Indent is made bigger so the horizontal lines have more space and the whole thing can breath more. To componesate the view scroll horiztontally so that the tree node is always visible. Was also able to clean up the hierachy a bit

changelog: increase tree indent and automatically scroll both horizontally and vertically when selecting an element

Reviewed By: lblasa

Differential Revision: D43311566

fbshipit-source-id: 53bc7bd55027e87fdecadac9aa8bc41612bb684a

desktop/plugins/public/ui-debugger/components/Tree.tsx

@@ -26,6 +26,7 @@ import {
   useHighlighter,
   usePlugin,
   useValue,
+  Layout,
 } from 'flipper-plugin';
 import {plugin} from '../index';
 import {Glyph} from 'flipper';
@@ -93,10 +94,15 @@ export function Tree2({nodes, rootId}: {nodes: Map<Id, UINode>; rootId: Id}) {
     isUsingKBToScroll,
   );
 
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     if (selectedNode) {
       const idx = treeNodes.findIndex((node) => node.id === selectedNode);
       if (idx !== -1) {
+        scrollContainerRef.current!!.scrollLeft =
+          Math.max(0, treeNodes[idx].depth - 10) * renderDepthOffset;
+
         refs[idx].current?.scrollIntoView({
           block: 'nearest',
         });
@@ -104,42 +110,44 @@ export function Tree2({nodes, rootId}: {nodes: Map<Id, UINode>; rootId: Id}) {
     }
   }, [refs, selectedNode, treeNodes]);
   return (
-    <HighlightProvider
-      text={searchTerm}
-      highlightColor={theme.searchHighlightBackground.yellow}>
-      <ContextMenu
-        focusedNodeId={focusedNode}
-        hoveredNodeId={hoveredNode}
-        nodes={nodes}
-        onContextMenuOpen={instance.uiActions.onContextMenuOpen}
-        onFocusNode={instance.uiActions.onFocusNode}>
-        <div
-          onMouseLeave={() => {
-            if (isContextMenuOpen === false) {
-              instance.uiState.hoveredNodes.set([]);
-            }
-          }}>
-          {treeNodes.map((treeNode, index) => (
-            <MemoTreeItemContainer
-              innerRef={refs[index]}
-              key={treeNode.id}
-              treeNode={treeNode}
-              frameworkEvents={frameworkEvents}
-              frameworkEventsMonitoring={frameworkEventsMonitoring}
-              highlightedNodes={highlightedNodes}
-              selectedNode={selectedNode}
-              hoveredNode={hoveredNode}
-              isUsingKBToScroll={isUsingKBToScroll}
-              isContextMenuOpen={isContextMenuOpen}
-              onSelectNode={instance.uiActions.onSelectNode}
-              onExpandNode={instance.uiActions.onExpandNode}
-              onCollapseNode={instance.uiActions.onCollapseNode}
-              onHoverNode={instance.uiActions.onHoverNode}
-            />
-          ))}
-        </div>
-      </ContextMenu>
-    </HighlightProvider>
+    <Layout.ScrollContainer ref={scrollContainerRef}>
+      <HighlightProvider
+        text={searchTerm}
+        highlightColor={theme.searchHighlightBackground.yellow}>
+        <ContextMenu
+          focusedNodeId={focusedNode}
+          hoveredNodeId={hoveredNode}
+          nodes={nodes}
+          onContextMenuOpen={instance.uiActions.onContextMenuOpen}
+          onFocusNode={instance.uiActions.onFocusNode}>
+          <div
+            onMouseLeave={() => {
+              if (isContextMenuOpen === false) {
+                instance.uiState.hoveredNodes.set([]);
+              }
+            }}>
+            {treeNodes.map((treeNode, index) => (
+              <MemoTreeItemContainer
+                innerRef={refs[index]}
+                key={treeNode.id}
+                treeNode={treeNode}
+                frameworkEvents={frameworkEvents}
+                frameworkEventsMonitoring={frameworkEventsMonitoring}
+                highlightedNodes={highlightedNodes}
+                selectedNode={selectedNode}
+                hoveredNode={hoveredNode}
+                isUsingKBToScroll={isUsingKBToScroll}
+                isContextMenuOpen={isContextMenuOpen}
+                onSelectNode={instance.uiActions.onSelectNode}
+                onExpandNode={instance.uiActions.onExpandNode}
+                onCollapseNode={instance.uiActions.onCollapseNode}
+                onHoverNode={instance.uiActions.onHoverNode}
+              />
+            ))}
+          </div>
+        </ContextMenu>
+      </HighlightProvider>
+    </Layout.ScrollContainer>
   );
 }
 
@@ -403,7 +411,7 @@ const DecorationImage = styled.img({
   width: 12,
 });
 
-const renderDepthOffset = 8;
+const renderDepthOffset = 12;
 
 const ContextMenu: React.FC<{
   nodes: Map<Id, UINode>;

desktop/plugins/public/ui-debugger/components/main.tsx

@@ -51,11 +51,7 @@ export function Component() {
           {instance.device === 'iOS' ? <FeedbackRequest /> : null}
           <Controls />
           <Layout.Horizontal grow pad="small">
-            <Layout.Container grow>
-              <Layout.ScrollContainer>
-                <Tree2 nodes={nodes} rootId={rootId} />
-              </Layout.ScrollContainer>
-            </Layout.Container>
+            <Tree2 nodes={nodes} rootId={rootId} />
 
             <ResizablePanel
               position="right"