devtools-ds icon indicating copy to clipboard operation
devtools-ds copied to clipboard

Feature request: Ability to control the hovered node in the DOM Inspector

Open jordan-burnett opened this issue 10 months ago • 0 comments

Is your feature request related to a problem? Please describe.

I'm looking for a way to emulate the browser's "highlight" behaviour when using the DOM inspector, where when a node is hovered in the DOM tree the corresponding DOM node in the visible document is highlighted.

Image

Describe the solution you'd like

It would be great if there were a way to hook into the the hover state of the DOMInspector component. I'd see this working as a controlled version of the component where the Node to display as highlighted could be configured by props. Similar to:

interface DOMInspectorProps {
    hoveredNode: Node;
    onNodeHover: (node: Node) => void
}

I could then store the hovered node in state further up the tree and use some custom code to control the visible highlight in the document.

Describe alternatives you've considered

Additional context

jordan-burnett avatar Mar 08 '25 19:03 jordan-burnett