Implement "best renderer" by taking the inner most matched node

Don't leak the "Fiber" type outside the renderer interface.

Author: sebmarkbage

packages/react-devtools-shared/src/__tests__/legacy/storeLegacy-v15-test.js

@@ -905,7 +905,7 @@ describe('Store (legacy)', () => {
         [root]
           ▸ <Wrapper>
       `);
-        const deepestedNodeID = global.agent.getIDForNode(ref);
+        const deepestedNodeID = global.agent.getIDForDOMNode(ref);
         act(() => store.toggleIsCollapsed(deepestedNodeID, false));
         expect(store).toMatchInlineSnapshot(`
         [root]

packages/react-devtools-shared/src/__tests__/store-test.js

@@ -1217,7 +1217,7 @@ describe('Store', () => {
           ▸ <Wrapper>
       `);
 
-      const deepestedNodeID = agent.getIDForNode(ref.current);
+      const deepestedNodeID = agent.getIDForDOMNode(ref.current);
 
       act(() => store.toggleIsCollapsed(deepestedNodeID, false));
       expect(store).toMatchInlineSnapshot(`

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

@@ -343,31 +343,72 @@ export default class Agent extends EventEmitter<{
     return renderer.getInstanceAndStyle(id);
   }
 
-  getBestMatchingRendererInterface(node: Object): RendererInterface | null {
-    let bestMatch = null;
+  getIDForDOMNode(node: HTMLElement): number | null {
+    let bestMatch: null | HTMLElement = null;
+    let bestRenderer: null | RendererInterface = null;
+    // Find the nearest ancestor which is mounted by a React.
     for (const rendererID in this._rendererInterfaces) {
       const renderer = ((this._rendererInterfaces[
         (rendererID: any)
       ]: any): RendererInterface);
-      const fiber = renderer.getFiberForNative(node);
-      if (fiber !== null) {
-        // check if fiber.stateNode is matching the original hostInstance
-        if (fiber.stateNode === node) {
-          return renderer;
-        } else if (bestMatch === null) {
-          bestMatch = renderer;
+      const nearestNode = renderer.getNearestMountedHostInstance(node);
+      if (nearestNode !== null) {
+        if (nearestNode === node) {
+          // Exact match we can exit early.
+          bestMatch = nearestNode;
+          bestRenderer = renderer;
+          break;
+        }
+        if (bestMatch === null || bestMatch.contains(nearestNode)) {
+          // If this is the first match or the previous match contains the new match,
+          // so the new match is a deeper and therefore better match.
+          bestMatch = nearestNode;
+          bestRenderer = renderer;
         }
       }
     }
-    // if an exact match is not found, return the first valid renderer as fallback
-    return bestMatch;
+    if (bestRenderer != null && bestMatch != null) {
+      try {
+        return bestRenderer.getElementIDForHostInstance(bestMatch, true);
+      } catch (error) {
+        // Some old React versions might throw if they can't find a match.
+        // If so we should ignore it...
+      }
+    }
+    return null;
   }
 
-  getIDForNode(node: Object): number | null {
-    const rendererInterface = this.getBestMatchingRendererInterface(node);
-    if (rendererInterface != null) {
+  getComponentNameForDOMNode(node: HTMLElement): string | null {
+    let bestMatch: null | HTMLElement = null;
+    let bestRenderer: null | RendererInterface = null;
+    // Find the nearest ancestor which is mounted by a React.
+    // We duplicate this code from getIDForDOMNode to avoid an object allocation.
+    for (const rendererID in this._rendererInterfaces) {
+      const renderer = ((this._rendererInterfaces[
+        (rendererID: any)
+      ]: any): RendererInterface);
+      const nearestNode = renderer.getNearestMountedHostInstance(node);
+      if (nearestNode !== null) {
+        if (nearestNode === node) {
+          // Exact match we can exit early.
+          bestMatch = nearestNode;
+          bestRenderer = renderer;
+          break;
+        }
+        if (bestMatch === null || bestMatch.contains(nearestNode)) {
+          // If this is the first match or the previous match contains the new match,
+          // so the new match is a deeper and therefore better match.
+          bestMatch = nearestNode;
+          bestRenderer = renderer;
+        }
+      }
+    }
+    if (bestRenderer != null && bestMatch != null) {
       try {
-        return rendererInterface.getElementIDForHostInstance(node, true);
+        const id = bestRenderer.getElementIDForHostInstance(node, true);
+        if (id) {
+          return bestRenderer.getDisplayNameForElementID(id);
+        }
       } catch (error) {
         // Some old React versions might throw if they can't find a match.
         // If so we should ignore it...
@@ -616,8 +657,8 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  selectNode(target: Object): void {
-    const id = this.getIDForNode(target);
+  selectNode(target: HTMLElement): void {
+    const id = this.getIDForDOMNode(target);
     if (id !== null) {
       this._bridge.send('selectElement', id);
     }

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

@@ -2882,8 +2882,14 @@ export function attach(
     return fiber != null ? getDisplayNameForFiber(fiber) : null;
   }
 
-  function getFiberForNative(hostInstance: HostInstance) {
-    return renderer.findFiberByHostInstance(hostInstance);
+  function getNearestMountedHostInstance(
+    hostInstance: HostInstance,
+  ): null | HostInstance {
+    const mountedHostInstance = renderer.findFiberByHostInstance(hostInstance);
+    if (mountedHostInstance != null) {
+      return mountedHostInstance.stateNode;
+    }
+    return null;
   }
 
   function getElementIDForHostInstance(
@@ -4661,7 +4667,7 @@ export function attach(
     getComponentStackForFiber,
     getSourceForFiber,
     getDisplayNameForElementID,
-    getFiberForNative,
+    getNearestMountedHostInstance,
     getElementIDForHostInstance,
     getInstanceAndStyle,
     getOwnersList,

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

@@ -145,7 +145,9 @@ export function attach(
   let getElementIDForHostInstance: GetElementIDForHostInstance =
     ((null: any): GetElementIDForHostInstance);
   let findHostInstanceForInternalID: (id: number) => ?HostInstance;
-  let getFiberForNative = (node: HostInstance) => {
+  let getNearestMountedHostInstance = (
+    node: HostInstance,
+  ): null | HostInstance => {
     // Not implemented.
     return null;
   };
@@ -160,8 +162,15 @@ export function attach(
       const internalInstance = idToInternalInstanceMap.get(id);
       return renderer.ComponentTree.getNodeFromInstance(internalInstance);
     };
-    getFiberForNative = (node: HostInstance) => {
-      return renderer.ComponentTree.getClosestInstanceFromNode(node);
+    getNearestMountedHostInstance = (
+      node: HostInstance,
+    ): null | HostInstance => {
+      const internalInstance =
+        renderer.ComponentTree.getClosestInstanceFromNode(node);
+      if (internalInstance != null) {
+        return renderer.ComponentTree.getNodeFromInstance(internalInstance);
+      }
+      return null;
     };
   } else if (renderer.Mount.getID && renderer.Mount.getNode) {
     getElementIDForHostInstance = (node, findNearestUnfilteredAncestor) => {
@@ -1111,7 +1120,7 @@ export function attach(
     flushInitialOperations,
     getBestMatchForTrackedPath,
     getDisplayNameForElementID,
-    getFiberForNative,
+    getNearestMountedHostInstance,
     getElementIDForHostInstance,
     getInstanceAndStyle,
     findHostInstancesForElementID: (id: number) => {

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

@@ -86,10 +86,7 @@ type SharedInternalsSubset = {
 };
 export type CurrentDispatcherRef = SharedInternalsSubset;
 
-export type GetDisplayNameForElementID = (
-  id: number,
-  findNearestUnfilteredAncestor?: boolean,
-) => string | null;
+export type GetDisplayNameForElementID = (id: number) => string | null;
 
 export type GetElementIDForHostInstance = (
   component: HostInstance,
@@ -363,7 +360,9 @@ export type RendererInterface = {
   findHostInstancesForElementID: FindHostInstancesForElementID,
   flushInitialOperations: () => void,
   getBestMatchForTrackedPath: () => PathMatch | null,
-  getFiberForNative: (component: HostInstance) => Fiber | null,
+  getNearestMountedHostInstance: (
+    component: HostInstance,
+  ) => HostInstance | null,
   getElementIDForHostInstance: GetElementIDForHostInstance,
   getDisplayNameForElementID: GetDisplayNameForElementID,
   getInstanceAndStyle(id: number): InstanceAndStyle,

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

@@ -233,19 +233,9 @@ export default class Overlay {
       name = elements[0].nodeName.toLowerCase();
 
       const node = elements[0];
-      const rendererInterface =
-        this.agent.getBestMatchingRendererInterface(node);
-      if (rendererInterface) {
-        const id = rendererInterface.getElementIDForHostInstance(node, true);
-        if (id) {
-          const ownerName = rendererInterface.getDisplayNameForElementID(
-            id,
-            true,
-          );
-          if (ownerName) {
-            name += ' (in ' + ownerName + ')';
-          }
-        }
+      const ownerName = this.agent.getComponentNameForDOMNode(node);
+      if (ownerName) {
+        name += ' (in ' + ownerName + ')';
       }
     }
 

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

@@ -193,7 +193,7 @@ export default function setupHighlighter(
 
   const selectElementForNode = throttle(
     memoize((node: HTMLElement) => {
-      const id = agent.getIDForNode(node);
+      const id = agent.getIDForDOMNode(node);
       if (id !== null) {
         bridge.send('selectElement', id);
       }