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)}