diff --git a/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx b/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx
index 52d9b42b9..7d9160c92 100644
--- a/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx
+++ b/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx
@@ -30,7 +30,7 @@ import {
} from 'flipper-plugin';
import {plugin} from '../../index';
import {head, last} from 'lodash';
-import {Badge, Typography} from 'antd';
+import {Badge, Tooltip, Typography} from 'antd';
import {useVirtualizer} from '@tanstack/react-virtual';
import {ContextMenu} from './ContextMenu';
@@ -577,33 +577,52 @@ function HighlightedText(props: {text: string}) {
}
function nodeIcon(node: TreeNode) {
+ const [icon, tooltip] = nodeData(node);
+
+ const iconComp =
+ typeof icon === 'string' ? : icon;
+
+ if (tooltip == null) {
+ return iconComp;
+ } else {
+ return {iconComp};
+ }
+}
+
+function nodeData(node: TreeNode) {
if (node.tags.includes('LithoMountable')) {
- return ;
+ return ['icons/litho-logo-blue.png', 'Litho Mountable (Primitive)'];
} else if (node.tags.includes('Litho')) {
- return ;
+ return ['icons/litho-logo.png', 'Litho Component'];
} else if (node.tags.includes('CK')) {
if (node.tags.includes('iOS')) {
- return ;
+ return ['icons/ck-mounted-logo.png', 'CK Mounted Component'];
}
- return ;
+ return ['icons/ck-logo.png', 'CK Component'];
} else if (node.tags.includes('BloksBoundTree')) {
- return ;
+ return ['facebook/bloks-logo-orange.png', 'Bloks Bridged component'];
} else if (node.tags.includes('BloksDerived')) {
- return ;
+ return ['facebook/bloks-logo-blue.png', 'Bloks Derived (Server) component'];
} else if (node.tags.includes('Warning')) {
- return (
-
- );
+ return [
+ ,
+ null,
+ ];
} else {
- return (
+ return [
- );
+ />,
+ null,
+ ];
}
}