Address review

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

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

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]);

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