diff --git a/src/backend/agent.js b/src/backend/agent.js index 5e2f332b85..c96b05b0aa 100644 --- a/src/backend/agent.js +++ b/src/backend/agent.js @@ -226,14 +226,14 @@ export default class Agent extends EventEmitter { highlightElementInDOM = ({ displayName, + hideAfterTimeout, id, - isSticky, rendererID, scrollIntoView, }: { displayName: string, + hideAfterTimeout: boolean, id: number, - isSticky: boolean, rendererID: number, scrollIntoView: boolean, }) => { @@ -253,7 +253,7 @@ export default class Agent extends EventEmitter { // We may want to reconsider this; it might be a little disruptive. node.scrollIntoView({ block: 'nearest', inline: 'nearest' }); } - showOverlay(((node: any): HTMLElement), displayName, isSticky); + showOverlay(((node: any): HTMLElement), displayName, hideAfterTimeout); } else { hideOverlay(); } @@ -477,6 +477,6 @@ export default class Agent extends EventEmitter { // Don't pass the name explicitly. // It will be inferred from DOM tag and Fiber owner. - showOverlay(target, null, true); + showOverlay(target, null, false); }; } diff --git a/src/backend/views/Highlighter.js b/src/backend/views/Highlighter.js index 8b1c17676a..c5339f6763 100644 --- a/src/backend/views/Highlighter.js +++ b/src/backend/views/Highlighter.js @@ -19,7 +19,7 @@ export function hideOverlay() { export function showOverlay( element: HTMLElement | null, componentName: string | null, - isSticky: boolean + hideAfterTimeout: boolean ) { if (timeoutID !== null) { clearTimeout(timeoutID); @@ -35,7 +35,7 @@ export function showOverlay( overlay.inspect(element, componentName); - if (!isSticky) { + if (hideAfterTimeout) { timeoutID = setTimeout(hideOverlay, SHOW_DURATION); } } diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js index f188770ce9..4ac576c95b 100644 --- a/src/devtools/views/Components/Element.js +++ b/src/devtools/views/Components/Element.js @@ -86,17 +86,17 @@ export default function ElementView({ index, style, data }: Props) { [id, selectElementByID] ); - const rendererID = store.getRendererIDForElement(element.id) || null; + const rendererID = store.getRendererIDForElement(element.id); // Individual elements don't have a corresponding leave handler. // Instead, it's implemented on the tree level. const handleMouseEnter = useCallback(() => { if (rendererID !== null) { bridge.send('highlightElementInDOM', { displayName: element.displayName, + hideAfterTimeout: false, id: element.id, rendererID, scrollIntoView: false, - isSticky: true, }); } }, [bridge, element, rendererID]); diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js index df07d46dbf..bba8d803da 100644 --- a/src/devtools/views/Components/SelectedElement.js +++ b/src/devtools/views/Components/SelectedElement.js @@ -45,10 +45,10 @@ export default function SelectedElement(_: Props) { if (rendererID !== null) { bridge.send('highlightElementInDOM', { displayName: element.displayName, + hideAfterTimeout: true, id: selectedElementID, rendererID, scrollIntoView: true, - isSticky: false, }); } } @@ -271,7 +271,7 @@ function useInspectedElement(id: number | null): InspectedElement | null { return () => {}; } - const rendererID = store.getRendererIDForElement(id) || null; + const rendererID = store.getRendererIDForElement(id); // Update the $r variable. bridge.send('selectElement', { id, rendererID });