From 1cd916e414c55ae0363dcf4560f2f13dbf463ccd Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Fri, 17 Feb 2023 02:45:05 -0800
Subject: [PATCH] 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
---
 .../public/ui-debugger/components/Tree.tsx    | 82 ++++++++++---------
 .../public/ui-debugger/components/main.tsx    |  6 +-
 2 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/Tree.tsx b/desktop/plugins/public/ui-debugger/components/Tree.tsx
index afec87fc7..9db93e2e8 100644
--- a/desktop/plugins/public/ui-debugger/components/Tree.tsx
+++ b/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>;
diff --git a/desktop/plugins/public/ui-debugger/components/main.tsx b/desktop/plugins/public/ui-debugger/components/main.tsx
index d1a64c441..8c790510b 100644
--- a/desktop/plugins/public/ui-debugger/components/main.tsx
+++ b/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"