New Tree design

Summary:
1. Add indent guidess to all tree depths
2. Monospaced font
3. cleaned up alignment of icons
4. Gave everything a bit more space to breathe

Changelog: UI Debugger Tree UI refresh, added indent guides and fixed alignment

Reviewed By: mweststrate

Differential Revision: D47626869

fbshipit-source-id: e4509621cda6c254f7dd5a7ec9b99c13efb577f4

desktop/plugins/public/ui-debugger/components/tree/toTreeList.tsx

@@ -13,13 +13,14 @@ import {
   ClientNode,
 } from '../../ClientTypes';
 import {DataSource} from 'flipper-plugin';
-import {last} from 'lodash';
+import {concat, last} from 'lodash';
 import {reverse} from 'lodash/fp';
 import {TreeNode} from './Tree';
 
 type TreeListStackItem = {
   node: ClientNode;
   depth: number;
+  parentIndentGuideDepths: number[];
   isChildOfSelectedNode: boolean;
   selectedNodeDepth: number;
 };
@@ -37,7 +38,13 @@ export function toTreeList(
     return [];
   }
   const stack = [
-    {node: root, depth: 0, isChildOfSelectedNode: false, selectedNodeDepth: 0},
+    {
+      node: root,
+      depth: 0,
+      isChildOfSelectedNode: false,
+      selectedNodeDepth: 0,
+      parentIndentGuideDepths: [],
+    },
   ] as TreeListStackItem[];
 
   const treeNodes = [] as TreeNode[];
@@ -48,11 +55,12 @@ export function toTreeList(
 
     const {node, depth} = stackItem;
 
-    //if the previous item has an indent guide but we don't then it was the last segment
-    //so we trim the bottom
-    const prevItemLine = last(treeNodes)?.indentGuide;
-    if (prevItemLine != null && stackItem.isChildOfSelectedNode === false) {
-      prevItemLine.trimBottom = true;
+    const prevItemLine = last(treeNodes);
+    //trim all the guides that have now ended
+    if (prevItemLine != null) {
+      for (let i = depth; i < prevItemLine.depth; i++) {
+        prevItemLine.indentGuides[i].trimBottom = true;
+      }
     }
 
     const isExpanded = expandedNodes.has(node.id);
@@ -73,15 +81,23 @@ export function toTreeList(
       depth,
       isExpanded,
       frameworkEvents: events.length > 0 ? events.length : null,
-      indentGuide: stackItem.isChildOfSelectedNode
-        ? {
-            depth: stackItem.selectedNodeDepth,
-            style: 'ToChildren',
-            //if first child of selected node add horizontal marker
-            addHorizontalMarker: depth === stackItem.selectedNodeDepth + 1,
+      indentGuides: stackItem.parentIndentGuideDepths.map(
+        (parentGuideDepth, idx) => {
+          const isLastGuide =
+            idx === stackItem.parentIndentGuideDepths.length - 1;
+          return {
+            depth: parentGuideDepth,
+            addHorizontalMarker: isLastGuide,
             trimBottom: false,
-          }
-        : null,
+
+            color:
+              stackItem.isChildOfSelectedNode &&
+              parentGuideDepth === stackItem.selectedNodeDepth
+                ? 'primary'
+                : 'secondary',
+          };
+        },
+      ),
     });
     i++;
 
@@ -97,12 +113,11 @@ export function toTreeList(
         if (prevNode.depth < depth) {
           break;
         }
-        prevNode.indentGuide = {
-          depth: selectedNodeDepth - 1,
-          style: 'ToParent',
-          addHorizontalMarker: prevNode.depth == depth,
-          trimBottom: prevNode.id === selectedNode,
-        };
+        const selectedDepthIndentGuide =
+          prevNode.indentGuides[selectedNodeDepth - 1];
+        if (selectedDepthIndentGuide) {
+          selectedDepthIndentGuide.color = 'primary';
+        }
       }
     }
 
@@ -114,6 +129,10 @@ export function toTreeList(
           stack.push({
             node: child,
             depth: depth + 1,
+            parentIndentGuideDepths: concat(
+              stackItem.parentIndentGuideDepths,
+              depth,
+            ),
             isChildOfSelectedNode: isChildOfSelectedNode,
             selectedNodeDepth: selectedNodeDepth,
           });
@@ -122,10 +141,12 @@ export function toTreeList(
     }
   }
 
-  //always trim last indent guide
-  const prevItemLine = last(treeNodes)?.indentGuide;
+  //always trim last indent guides since they have 'ended'
+  const prevItemLine = last(treeNodes);
   if (prevItemLine != null) {
-    prevItemLine.trimBottom = true;
+    prevItemLine.indentGuides.forEach((guide) => {
+      guide.trimBottom = true;
+    });
   }
 
   return treeNodes;