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

@@ -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>;