move logic to agent

Author: mondaychen

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

@@ -39,10 +39,7 @@ import type {
   RendererInterface,
 } from './types';
 import type {ComponentFilter} from '../types';
-import {
-  isSynchronousXHRSupported,
-  getBestMatchingRendererInterface,
-} from './utils';
+import {isSynchronousXHRSupported} from './utils';
 import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
 
 const debug = (methodName, ...args) => {
@@ -312,21 +309,42 @@ export default class Agent extends EventEmitter<{|
     return renderer.getInstanceAndStyle(id);
   }
 
-  getIDForNode(node: Object): number | null {
-    const renderers = [];
+  getBestMatchingRendererInterface(node: Object): RendererInterface | null {
+    let bestMatch = null;
     for (const rendererID in this._rendererInterfaces) {
       const renderer = ((this._rendererInterfaces[
         (rendererID: any)
       ]: any): RendererInterface);
-      renderers.push(renderer);
+      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;
+        }
+      }
     }
-    const rendererInterface = getBestMatchingRendererInterface(renderers, node);
+    // if an exact match is not found, return the best match as fallback
+    return bestMatch;
+  }
+
+  getIDForNode(node: Object): number | null {
+    const rendererInterface = this.getBestMatchingRendererInterface(node);
     if (rendererInterface != null) {
       return rendererInterface.getFiberIDForNative(node, true);
     }
     return null;
   }
 
+  getDisplayNameForNode(node: Object): string | null {
+    const rendererInterface = this.getBestMatchingRendererInterface(node);
+    if (rendererInterface != null) {
+      return rendererInterface.getDisplayNameForFiberID(node, true);
+    }
+    return null;
+  }
+
   getBackendVersion = () => {
     const version = process.env.DEVTOOLS_VERSION;
     if (version) {

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

@@ -274,24 +274,3 @@ export function isSynchronousXHRSupported(): boolean {
     window.document.featurePolicy.allowsFeature('sync-xhr')
   );
 }
-
-export function getBestMatchingRendererInterface(
-  rendererInterfaces: Iterable<RendererInterface>,
-  node: Object,
-): RendererInterface | null {
-  let bestMatch = null;
-  // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-  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/Highlighter.js

@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type Agent from 'react-devtools-shared/src/backend/agent';
+
 import Overlay from './Overlay';
 
 const SHOW_DURATION = 2000;
@@ -26,6 +28,7 @@ export function hideOverlay() {
 export function showOverlay(
   elements: Array<HTMLElement> | null,
   componentName: string | null,
+  agent: Agent,
   hideAfterTimeout: boolean,
 ) {
   // TODO (npm-packages) Detect RN and support it somehow
@@ -42,7 +45,7 @@ export function showOverlay(
   }
 
   if (overlay === null) {
-    overlay = new Overlay();
+    overlay = new Overlay(agent);
   }
 
   overlay.inspect(elements, componentName);

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

@@ -8,15 +8,14 @@
  */
 
 import {getElementDimensions, getNestedBoundingClientRect} from '../utils';
-import {getBestMatchingRendererInterface} from '../../utils';
 
-const assign = Object.assign;
-
-import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
 import type {Rect} from '../utils';
+import type Agent from 'react-devtools-shared/src/backend/agent';
 
 type Box = {|top: number, left: number, width: number, height: number|};
 
+const assign = Object.assign;
+
 // Note that the Overlay components are not affected by the active Theme,
 // because they highlight elements in the main Chrome window (outside of devtools).
 // The colors below were chosen to roughly match those used by Chrome devtools.
@@ -154,8 +153,9 @@ export default class Overlay {
   container: HTMLElement;
   tip: OverlayTip;
   rects: Array<OverlayRect>;
+  agent: Agent;
 
-  constructor() {
+  constructor(agent: Agent) {
     // Find the root window, because overlays are positioned relative to it.
     const currentWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
     this.window = currentWindow;
@@ -171,6 +171,8 @@ export default class Overlay {
     this.tip = new OverlayTip(doc, this.container);
     this.rects = [];
 
+    this.agent = agent;
+
     doc.body.appendChild(this.container);
   }
 
@@ -231,24 +233,10 @@ export default class Overlay {
       name = elements[0].nodeName.toLowerCase();
 
       const node = elements[0];
-      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;
-        if (rendererInterface !== null) {
-          const id = rendererInterface.getFiberIDForNative(node, true);
-          if (id !== null) {
-            ownerName = rendererInterface.getDisplayNameForFiberID(id, true);
-          }
-        }
-
-        if (ownerName) {
-          name += ' (in ' + ownerName + ')';
-        }
+      const ownerName = this.agent.getDisplayNameForNode(node);
+
+      if (ownerName) {
+        name += ' (in ' + ownerName + ')';
       }
     }
 

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

@@ -118,7 +118,7 @@ export default function setupHighlighter(
         node.scrollIntoView({block: 'nearest', inline: 'nearest'});
       }
 
-      showOverlay(nodes, displayName, hideAfterTimeout);
+      showOverlay(nodes, displayName, agent, hideAfterTimeout);
 
       if (openNativeElementsPanel) {
         window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;
@@ -171,7 +171,7 @@ export default function setupHighlighter(
 
     // Don't pass the name explicitly.
     // It will be inferred from DOM tag and Fiber owner.
-    showOverlay([target], null, false);
+    showOverlay([target], null, agent, false);
 
     selectFiberForNode(target);
   }