[DevTools] Track all public HostInstances in a Map (#30831)

This lets us get from a HostInstance to the nearest DevToolsInstance
without relying on `findFiberByHostInstance` and
`fiberToDevToolsInstanceMap`. We already did the equivalent of this for
Resources in HostHoistables.

One issue before was that we'd ideally get away from the
`fiberToDevToolsInstanceMap` map in general since we should ideally not
treat Fibers as stateful but they could be replaced by something else
stateful in principle.

This PR also addresses Virtual Instances. Now you can select a DOM node
and have it select a Virtual Instance if that's the nearest parent since
the parent doesn't have to be a Fiber anymore.

However, the other reason for this change is that I'd like to get rid of
the need for the `findFiberByHostInstance` from being injected. A
renderer should not need to store a reference back from its instance to
a Fiber. Without the Synthetic Event system this wouldn't be needed by
the renderer so we should be able to remove it. We also don't really
need it since we have all the information by just walking the commit to
collect the nodes if we just maintain our own Map.

There's one subtle nuance that the different renderers do. Typically a
HostInstance is the same thing as a PublicInstance in React but
technically in Fabric they're not the same. So we need to translate
between PublicInstance and HostInstance. I just hardcoded the Fabric
implementation of this since it's the only known one that does this but
could feature detect other ones too if necessary. On one hand it's more
resilient to refactors to not rely on injected helpers and on hand it
doesn't follow changes to things like this.

For the conflict resolution I added in #30494 I had to make that
specific to DOM so we can move the DOM traversal to the backend instead
of the injected helper.

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

@@ -342,84 +342,123 @@ export default class Agent extends EventEmitter<{
   }
 
   getIDForHostInstance(target: HostInstance): number | null {
-    let bestMatch: null | HostInstance = 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 nearestNode: null = renderer.getNearestMountedHostInstance(target);
-      if (nearestNode !== null) {
-        if (nearestNode === target) {
-          // Exact match we can exit early.
-          bestMatch = nearestNode;
-          bestRenderer = renderer;
-          break;
+    if (isReactNativeEnvironment() || typeof target.nodeType !== 'number') {
+      // In React Native or non-DOM we simply pick any renderer that has a match.
+      for (const rendererID in this._rendererInterfaces) {
+        const renderer = ((this._rendererInterfaces[
+          (rendererID: any)
+        ]: any): RendererInterface);
+        try {
+          const match = renderer.getElementIDForHostInstance(target);
+          if (match != null) {
+            return match;
+          }
+        } catch (error) {
+          // Some old React versions might throw if they can't find a match.
+          // If so we should ignore it...
         }
-        if (
-          bestMatch === null ||
-          (!isReactNativeEnvironment() && 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;
+      }
+      return null;
+    } else {
+      // In the DOM we use a smarter mechanism to find the deepest a DOM node
+      // that is registered if there isn't an exact match.
+      let bestMatch: null | Element = 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 nearestNode: null | Element = renderer.getNearestMountedDOMNode(
+          (target: any),
+        );
+        if (nearestNode !== null) {
+          if (nearestNode === target) {
+            // 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 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...
+      if (bestRenderer != null && bestMatch != null) {
+        try {
+          return bestRenderer.getElementIDForHostInstance(bestMatch);
+        } catch (error) {
+          // Some old React versions might throw if they can't find a match.
+          // If so we should ignore it...
+        }
       }
+      return null;
     }
-    return null;
   }
 
   getComponentNameForHostInstance(target: HostInstance): string | null {
     // We duplicate this code from getIDForHostInstance to avoid an object allocation.
-    let bestMatch: null | HostInstance = 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 nearestNode = renderer.getNearestMountedHostInstance(target);
-      if (nearestNode !== null) {
-        if (nearestNode === target) {
-          // Exact match we can exit early.
-          bestMatch = nearestNode;
-          bestRenderer = renderer;
-          break;
+    if (isReactNativeEnvironment() || typeof target.nodeType !== 'number') {
+      // In React Native or non-DOM we simply pick any renderer that has a match.
+      for (const rendererID in this._rendererInterfaces) {
+        const renderer = ((this._rendererInterfaces[
+          (rendererID: any)
+        ]: any): RendererInterface);
+        try {
+          const id = renderer.getElementIDForHostInstance(target);
+          if (id) {
+            return renderer.getDisplayNameForElementID(id);
+          }
+        } catch (error) {
+          // Some old React versions might throw if they can't find a match.
+          // If so we should ignore it...
         }
-        if (
-          bestMatch === null ||
-          (!isReactNativeEnvironment() && 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;
+      }
+      return null;
+    } else {
+      // In the DOM we use a smarter mechanism to find the deepest a DOM node
+      // that is registered if there isn't an exact match.
+      let bestMatch: null | Element = 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 nearestNode: null | Element = renderer.getNearestMountedDOMNode(
+          (target: any),
+        );
+        if (nearestNode !== null) {
+          if (nearestNode === target) {
+            // 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 {
-        const id = bestRenderer.getElementIDForHostInstance(bestMatch, true);
-        if (id) {
-          return bestRenderer.getDisplayNameForElementID(id);
+      if (bestRenderer != null && bestMatch != null) {
+        try {
+          const id = bestRenderer.getElementIDForHostInstance(bestMatch);
+          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...
         }
-      } catch (error) {
-        // Some old React versions might throw if they can't find a match.
-        // If so we should ignore it...
       }
+      return null;
     }
-    return null;
   }
 
   getBackendVersion: () => void = () => {

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

@@ -135,17 +135,7 @@ export function registerRenderer(
   renderer: ReactRenderer,
   onErrorOrWarning?: OnErrorOrWarning,
 ): void {
-  const {
-    currentDispatcherRef,
-    getCurrentFiber,
-    findFiberByHostInstance,
-    version,
-  } = renderer;
-
-  // Ignore React v15 and older because they don't expose a component stack anyway.
-  if (typeof findFiberByHostInstance !== 'function') {
-    return;
-  }
+  const {currentDispatcherRef, getCurrentFiber, version} = renderer;
 
   // currentDispatcherRef gets injected for v16.8+ to support hooks inspection.
   // getCurrentFiber gets injected for v16.9+.