diff --git a/desktop/plugins/public/ui-debugger/components/Tree.tsx b/desktop/plugins/public/ui-debugger/components/Tree.tsx
index 0b89fcf51..0aed68602 100644
--- a/desktop/plugins/public/ui-debugger/components/Tree.tsx
+++ b/desktop/plugins/public/ui-debugger/components/Tree.tsx
@@ -27,6 +27,7 @@ import {
HighlightProvider,
useHighlighter,
theme,
+ styled,
} from 'flipper-plugin';
import {head} from 'lodash';
@@ -61,7 +62,19 @@ export function Tree(props: {
{
instance.uiState.hoveredNodes.set([]);
- }}>
+ }}
+ style={
+ {
+ '--rct-color-tree-bg': theme.white,
+ '--rct-color-tree-focus-outline': theme.dividerColor,
+ '--rct-color-focustree-item-focused-border':
+ theme.selectionBackgroundColor,
+ '--rct-color-focustree-item-selected-bg':
+ theme.selectionBackgroundColor,
+ '--rct-color-nonfocustree-item-selected-bg':
+ theme.selectionBackgroundColor,
+ } as React.CSSProperties
+ }>
@@ -135,6 +148,17 @@ const cx = (...classNames: Array) =>
classNames.filter((cn) => !!cn).join(' ');
const renderDepthOffset = 5;
+const DecorationImage = styled.img({
+ height: 12,
+ marginRight: 5,
+ width: 12,
+});
+function defaultIcon(node: UINode) {
+ if (node.tags.includes('Litho')) {
+ return ;
+ }
+}
+
function renderItem({
item,
depth,
@@ -191,6 +215,7 @@ function renderItem({
context.isDraggingOver && 'rct-tree-item-button-dragging-over',
context.isSearchMatching && 'rct-tree-item-button-search-match',
)}>
+ {defaultIcon(item.data)}