Removed 'reactInternal' reference in DevTools overlay highlighter (#17841)

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

@@ -159,6 +159,11 @@ export function attach(
     };
   }
 
+  function getDisplayNameForFiberID(id: number): string | null {
+    const internalInstance = idToInternalInstanceMap.get(id);
+    return internalInstance ? getData(internalInstance).displayName : null;
+  }
+
   function getID(internalInstance: InternalInstance): number {
     if (typeof internalInstance !== 'object') {
       throw new Error('Invalid internal instance: ' + internalInstance);
@@ -964,6 +969,7 @@ export function attach(
     copyElementPath,
     flushInitialOperations,
     getBestMatchForTrackedPath,
+    getDisplayNameForFiberID,
     getFiberIDForNative: getInternalIDForNative,
     getInstanceAndStyle,
     findNativeNodesForFiberID: (id: number) => {

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

@@ -1907,6 +1907,11 @@ export function attach(
     }
   }
 
+  function getDisplayNameForFiberID(id) {
+    const fiber = idToFiberMap.get(id);
+    return fiber != null ? getDisplayNameForFiber(((fiber: any): Fiber)) : null;
+  }
+
   function getFiberIDForNative(
     hostInstance,
     findNearestUnfilteredAncestor = false,
@@ -3179,6 +3184,7 @@ export function attach(
     findNativeNodesForFiberID,
     flushInitialOperations,
     getBestMatchForTrackedPath,
+    getDisplayNameForFiberID,
     getFiberIDForNative,
     getInstanceAndStyle,
     getOwnersList,

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

@@ -39,6 +39,11 @@ export type RendererID = number;
 
 type Dispatcher = any;
 
+export type GetDisplayNameForFiberID = (
+  id: number,
+  findNearestUnfilteredAncestor?: boolean,
+) => string | null;
+
 export type GetFiberIDForNative = (
   component: NativeType,
   findNearestUnfilteredAncestor?: boolean,
@@ -225,6 +230,7 @@ export type RendererInterface = {
   flushInitialOperations: () => void,
   getBestMatchForTrackedPath: () => PathMatch | null,
   getFiberIDForNative: GetFiberIDForNative,
+  getDisplayNameForFiberID: GetDisplayNameForFiberID,
   getInstanceAndStyle(id: number): InstanceAndStyle,
   getProfilingData(): ProfilingDataBackend,
   getOwnersList: (id: number) => Array<Owner> | null,

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

@@ -10,6 +10,7 @@
 import assign from 'object-assign';
 import {getElementDimensions, getNestedBoundingClientRect} from '../utils';
 
+import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
 import type {Rect} from '../utils';
 
 type Box = {|top: number, left: number, width: number, height: number|};
@@ -226,9 +227,24 @@ export default class Overlay {
 
     if (!name) {
       name = elements[0].nodeName.toLowerCase();
-      const ownerName = getOwnerDisplayName(elements[0]);
-      if (ownerName) {
-        name += ' (in ' + ownerName + ')';
+
+      const node = elements[0];
+      const hook: DevToolsHook =
+        node.ownerDocument.defaultView.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+      if (hook != null && hook.rendererInterfaces != null) {
+        let ownerName = null;
+        // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+        for (const rendererInterface of hook.rendererInterfaces.values()) {
+          const id = rendererInterface.getFiberIDForNative(node, true);
+          if (id !== null) {
+            ownerName = rendererInterface.getDisplayNameForFiberID(id, true);
+            break;
+          }
+        }
+
+        if (ownerName) {
+          name += ' (in ' + ownerName + ')';
+        }
       }
     }
 
@@ -259,37 +275,6 @@ export default class Overlay {
   }
 }
 
-function getOwnerDisplayName(node) {
-  const fiber = getFiber(node);
-  if (fiber === null) {
-    return null;
-  }
-  const owner = fiber._debugOwner;
-  if (owner && owner.type) {
-    const ownerName = owner.type.displayName || owner.type.name;
-    return ownerName || null;
-  }
-  return null;
-}
-
-let lastFoundInternalKey = null;
-function getFiber(node) {
-  if (
-    lastFoundInternalKey !== null &&
-    node.hasOwnProperty(lastFoundInternalKey)
-  ) {
-    return (node: any)[lastFoundInternalKey];
-  }
-  let internalKey = Object.keys(node).find(
-    key => key.indexOf('__reactInternalInstance') === 0,
-  );
-  if (internalKey) {
-    lastFoundInternalKey = internalKey;
-    return (node: any)[lastFoundInternalKey];
-  }
-  return null;
-}
-
 function findTipPos(dims, bounds, tipSize) {
   const tipHeight = Math.max(tipSize.height, 20);
   const tipWidth = Math.max(tipSize.width, 60);