From 5043e5292f82989d483dead70639167e110f39d8 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Mon, 12 Dec 2022 09:17:03 -0800
Subject: [PATCH] Last minute tree changes

Summary:
1. Greater spacing between levels
2. Align children when one has chevron and another doesnt
3. Allow searching of inline attribute values

Reviewed By: lblasa

Differential Revision: D41955235

fbshipit-source-id: aa6bce71810a32cd218db790287aaaf506df75b7
---
 desktop/plugins/public/ui-debugger/components/Tree.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/Tree.tsx b/desktop/plugins/public/ui-debugger/components/Tree.tsx
index 33b8d7b33..bf26e669a 100644
--- a/desktop/plugins/public/ui-debugger/components/Tree.tsx
+++ b/desktop/plugins/public/ui-debugger/components/Tree.tsx
@@ -200,13 +200,15 @@ const TreeAttributeContainer = styled(Text)({
 });
 
 function InlineAttributes({attributes}: {attributes: Record<string, string>}) {
+  const highlightManager: HighlightManager = useHighlighter();
+
   return (
     <>
       {Object.entries(attributes ?? {}).map(([key, value]) => (
         <>
           <TreeAttributeContainer key={key}>
             <span style={{color: theme.warningColor}}>{key}</span>
-            <span>={value}</span>
+            <span>={highlightManager.render(value)}</span>
           </TreeAttributeContainer>
         </>
       ))}
@@ -255,7 +257,7 @@ function ExpandedIconOrSpace(props: {
       </div>
     );
   } else {
-    return <div style={{width: '12px'}}></div>;
+    return <div style={{width: '16px'}}></div>;
   }
 }
 
@@ -276,7 +278,7 @@ const DecorationImage = styled.img({
   width: 12,
 });
 
-const renderDepthOffset = 4;
+const renderDepthOffset = 8;
 
 const ContextMenu: React.FC<{
   nodes: Map<Id, UINode>;