[DevTools] find best renderer when inspecting

Author: mondaychen

packages/react-devtools-shared/src/backend/agent.js

@@ -39,7 +39,10 @@ import type {
   RendererInterface,
 } from './types';
 import type {ComponentFilter} from '../types';
-import {isSynchronousXHRSupported} from './utils';
+import {
+  isSynchronousXHRSupported,
+  getBestMatchingRendererInterface,
+} from './utils';
 import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
 
 const debug = (methodName, ...args) => {
@@ -310,20 +313,16 @@ export default class Agent extends EventEmitter<{|
   }
 
   getIDForNode(node: Object): number | null {
+    const renderers = [];
     for (const rendererID in this._rendererInterfaces) {
       const renderer = ((this._rendererInterfaces[
         (rendererID: any)
       ]: any): RendererInterface);
-
-      try {
-        const id = renderer.getFiberIDForNative(node, true);
-        if (id !== null) {
-          return id;
-        }
-      } catch (error) {
-        // Some old React versions might throw if they can't find a match.
-        // If so we should ignore it...
-      }
+      renderers.push(renderer);
+    }
+    const rendererInterface = getBestMatchingRendererInterface(renderers, node);
+    if (rendererInterface != null) {
+      return rendererInterface.getFiberIDForNative(node, true);
     }
     return null;
   }

packages/react-devtools-shared/src/backend/legacy/renderer.js

@@ -1084,6 +1084,11 @@ export function attach(
 
   function unpatchConsoleForStrictMode() {}
 
+  function getFiberForNative() {
+    // Not implemented
+    return null;
+  }
+
   return {
     clearErrorsAndWarnings,
     clearErrorsForFiberID,
@@ -1094,6 +1099,7 @@ export function attach(
     flushInitialOperations,
     getBestMatchForTrackedPath,
     getDisplayNameForFiberID,
+    getFiberForNative,
     getFiberIDForNative: getInternalIDForNative,
     getInstanceAndStyle,
     findNativeNodesForFiberID: (id: number) => {

packages/react-devtools-shared/src/backend/renderer.js

@@ -2818,6 +2818,10 @@ export function attach(
     return fiber != null ? getDisplayNameForFiber(((fiber: any): Fiber)) : null;
   }
 
+  function getFiberForNative(hostInstance) {
+    return renderer.findFiberByHostInstance(hostInstance);
+  }
+
   function getFiberIDForNative(
     hostInstance,
     findNearestUnfilteredAncestor = false,
@@ -4490,6 +4494,7 @@ export function attach(
     flushInitialOperations,
     getBestMatchForTrackedPath,
     getDisplayNameForFiberID,
+    getFiberForNative,
     getFiberIDForNative,
     getInstanceAndStyle,
     getOwnersList,

packages/react-devtools-shared/src/backend/types.js

@@ -350,6 +350,7 @@ export type RendererInterface = {
   findNativeNodesForFiberID: FindNativeNodesForFiberID,
   flushInitialOperations: () => void,
   getBestMatchForTrackedPath: () => PathMatch | null,
+  getFiberForNative: (hostInstance: NativeType) => ?Fiber,
   getFiberIDForNative: GetFiberIDForNative,
   getDisplayNameForFiberID: GetDisplayNameForFiberID,
   getInstanceAndStyle(id: number): InstanceAndStyle,

packages/react-devtools-shared/src/backend/utils.js

@@ -11,6 +11,7 @@
 import {copy} from 'clipboard-js';
 import {dehydrate} from '../hydration';
 import isArray from 'shared/isArray';
+import type {RendererInterface} from './types';
 
 import type {DehydratedData} from 'react-devtools-shared/src/devtools/views/Components/types';
 
@@ -273,3 +274,23 @@ export function isSynchronousXHRSupported(): boolean {
     window.document.featurePolicy.allowsFeature('sync-xhr')
   );
 }
+
+export function getBestMatchingRendererInterface(
+  rendererInterfaces: Iterable<RendererInterface>,
+  node: Object,
+): RendererInterface | null {
+  let bestMatch = null;
+  for (const renderer of rendererInterfaces) {
+    const fiber = renderer.getFiberForNative(node);
+    if (fiber != null) {
+      // check if fiber.stateNode is matching the original hostInstance
+      if (fiber.stateNode === node) {
+        return renderer;
+      } else {
+        bestMatch = renderer;
+      }
+    }
+  }
+  // if an exact match is not found, return the best match as fallback
+  return bestMatch;
+}

packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js

@@ -8,6 +8,7 @@
  */
 
 import {getElementDimensions, getNestedBoundingClientRect} from '../utils';
+import {getBestMatchingRendererInterface} from '../../utils';
 
 const assign = Object.assign;
 
@@ -233,13 +234,15 @@ export default class Overlay {
       const hook: DevToolsHook =
         node.ownerDocument.defaultView.__REACT_DEVTOOLS_GLOBAL_HOOK__;
       if (hook != null && hook.rendererInterfaces != null) {
+        const rendererInterface = getBestMatchingRendererInterface(
+          hook.rendererInterfaces.values(),
+          node,
+        );
         let ownerName = null;
-        // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-        for (const rendererInterface of hook.rendererInterfaces.values()) {
+        if (rendererInterface !== null) {
           const id = rendererInterface.getFiberIDForNative(node, true);
           if (id !== null) {
             ownerName = rendererInterface.getDisplayNameForFiberID(id, true);
-            break;
           }
         }