diff --git a/src/devtools/store.js b/src/devtools/store.js index b4c2403fe0..61a141797e 100644 --- a/src/devtools/store.js +++ b/src/devtools/store.js @@ -377,6 +377,10 @@ export default class Store extends EventEmitter { this.emit('isProfiling'); } + containsElement(id: number): boolean { + return this._idToElement.get(id) != null; + } + getElementAtIndex(index: number): Element | null { if (index < 0 || index >= this.numElements) { console.warn( diff --git a/src/devtools/views/Components/SelectedElement.css b/src/devtools/views/Components/SelectedElement.css index 97c909d280..9ad029099d 100644 --- a/src/devtools/views/Components/SelectedElement.css +++ b/src/devtools/views/Components/SelectedElement.css @@ -87,3 +87,8 @@ .CannotSuspendWarningMessage { font-size: var(--font-size-sans-large); } + +.NotInStore { + color: var(--color-dim); + cursor: default; +} diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js index f3902ac067..90da16ee48 100644 --- a/src/devtools/views/Components/SelectedElement.js +++ b/src/devtools/views/Components/SelectedElement.js @@ -306,6 +306,7 @@ function InspectedElementView({ key={owner.id} displayName={owner.displayName} id={owner.id} + isInStore={store.containsElement(owner.id)} /> ))} @@ -314,7 +315,9 @@ function InspectedElementView({ ); } -function OwnerView({ displayName, id }: { displayName: string, id: number }) { +type OwnerViewProps = {| displayName: string, id: number, isInStore: boolean |}; + +function OwnerView({ displayName, id, isInStore }: OwnerViewProps) { const dispatch = useContext(TreeDispatcherContext); const handleClick = useCallback( @@ -329,7 +332,8 @@ function OwnerView({ displayName, id }: { displayName: string, id: number }) { return (