diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx index 038c728bb..a3892f0b9 100644 --- a/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx +++ b/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx @@ -10,7 +10,16 @@ import React from 'react'; // eslint-disable-next-line rulesdir/no-restricted-imports-clone import {Glyph} from 'flipper'; -import {Layout, Tab, Tabs, theme, usePlugin, useValue} from 'flipper-plugin'; +import { + Layout, + Tab, + Tabs, + theme, + usePlugin, + useValue, + TimelineDataDescription, +} from 'flipper-plugin'; + import {Id, Metadata, MetadataId, UINode} from '../../types'; import {IdentityInspector} from './inspector/IdentityInspector'; @@ -27,11 +36,17 @@ type Props = { export const Inspector: React.FC = ({nodes, metadata}) => { const instance = usePlugin(plugin); const selectedNodeId = useValue(instance.uiState.selectedNode); + const frameworkEvents = useValue(instance.frameworkEvents); - const selectedNode = nodes.get(selectedNodeId!!); + const selectedNode = selectedNodeId ? nodes.get(selectedNodeId) : undefined; if (!selectedNode) { return ; } + + const events = selectedNodeId + ? frameworkEvents?.get(selectedNodeId) + : undefined; + return ( @@ -78,6 +93,34 @@ export const Inspector: React.FC = ({nodes, metadata}) => { metadata={metadata} /> + {events && ( + + + + + + }> + { + return { + moment: e.timestamp, + display: e.type, + color: theme.primaryColor, + key: e.timestamp.toString(), + }; + }), + current: '', + }} + /> + + )} );