refactor[devtools]: highlight an array of elements for native

Author: hoxyq

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

@@ -283,3 +283,9 @@ export function gt(a: string = '', b: string = ''): boolean {
 export function gte(a: string = '', b: string = ''): boolean {
   return compareVersions(a, b) > -1;
 }
+
+export const isReactNativeEnvironment = (): boolean => {
+  // We've been relying on this for such a long time
+  // We should probably define the client for DevTools on the backend side and share it with the frontend
+  return window.document == null;
+};

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

@@ -9,18 +9,20 @@
 
 import type Agent from 'react-devtools-shared/src/backend/agent';
 
+import {isReactNativeEnvironment} from 'react-devtools-shared/src/backend/utils';
+
 import Overlay from './Overlay';
 
 const SHOW_DURATION = 2000;
 
 let timeoutID: TimeoutID | null = null;
 let overlay: Overlay | null = null;
 
-export function hideOverlay(agent: Agent) {
-  if (window.document == null) {
-    agent.emit('hideNativeHighlight');
-    return;
-  }
+function hideOverlayNative(agent: Agent): void {
+  agent.emit('hideNativeHighlight');
+}
+
+function hideOverlayWeb(): void {
   timeoutID = null;
 
   if (overlay !== null) {
@@ -29,27 +31,26 @@ export function hideOverlay(agent: Agent) {
   }
 }
 
-export function showOverlay(
-  elements: Array<HTMLElement> | null,
+export function hideOverlay(agent: Agent): void {
+  return isReactNativeEnvironment()
+    ? hideOverlayNative(agent)
+    : hideOverlayWeb();
+}
+
+function showOverlayNative(elements: Array<HTMLElement>, agent: Agent): void {
+  agent.emit('showNativeHighlight', elements);
+}
+
+function showOverlayWeb(
+  elements: Array<HTMLElement>,
   componentName: string | null,
   agent: Agent,
   hideAfterTimeout: boolean,
-) {
-  if (window.document == null) {
-    if (elements != null && elements[0] != null) {
-      agent.emit('showNativeHighlight', elements[0]);
-    }
-    return;
-  }
-
+): void {
   if (timeoutID !== null) {
     clearTimeout(timeoutID);
   }
 
-  if (elements == null) {
-    return;
-  }
-
   if (overlay === null) {
     overlay = new Overlay(agent);
   }
@@ -60,3 +61,14 @@ export function showOverlay(
     timeoutID = setTimeout(() => hideOverlay(agent), SHOW_DURATION);
   }
 }
+
+export function showOverlay(
+  elements: Array<HTMLElement>,
+  componentName: string | null,
+  agent: Agent,
+  hideAfterTimeout: boolean,
+): void {
+  return isReactNativeEnvironment()
+    ? showOverlayNative(elements, agent)
+    : showOverlayWeb(elements, componentName, agent, hideAfterTimeout);
+}

packages/react-devtools-shared/src/backend/views/TraceUpdates/canvas.js

@@ -12,6 +12,8 @@ import type {Rect} from '../utils';
 import type {NativeType} from '../../types';
 import type Agent from '../../agent';
 
+import {isReactNativeEnvironment} from 'react-devtools-shared/src/backend/utils';
+
 const OUTLINE_COLOR = '#f0f0f0';
 
 // Note these colors are in sync with DevTools Profiler chart colors.
@@ -30,17 +32,16 @@ const COLORS = [
 
 let canvas: HTMLCanvasElement | null = null;
 
-export function draw(nodeToData: Map<NativeType, Data>, agent: Agent): void {
-  if (window.document == null) {
-    const nodesToDraw = [];
-    iterateNodes(nodeToData, (_, color, node) => {
-      nodesToDraw.push({node, color});
-    });
-
-    agent.emit('drawTraceUpdates', nodesToDraw);
-    return;
-  }
+function drawNative(nodeToData: Map<NativeType, Data>, agent: Agent) {
+  const nodesToDraw = [];
+  iterateNodes(nodeToData, (_, color, node) => {
+    nodesToDraw.push({node, color});
+  });
 
+  agent.emit('drawTraceUpdates', nodesToDraw);
+}
+
+function drawWeb(nodeToData: Map<NativeType, Data>) {
   if (canvas === null) {
     initialize();
   }
@@ -58,6 +59,12 @@ export function draw(nodeToData: Map<NativeType, Data>, agent: Agent): void {
   });
 }
 
+export function draw(nodeToData: Map<NativeType, Data>, agent: Agent): void {
+  return isReactNativeEnvironment()
+    ? drawNative(nodeToData, agent)
+    : drawWeb(nodeToData);
+}
+
 function iterateNodes(
   nodeToData: Map<NativeType, Data>,
   execute: (rect: Rect | null, color: string, node: NativeType) => void,
@@ -97,12 +104,11 @@ function drawBorder(
   context.setLineDash([0]);
 }
 
-export function destroy(agent: Agent): void {
-  if (window.document == null) {
-    agent.emit('disableTraceUpdates');
-    return;
-  }
+function destroyNative(agent: Agent) {
+  agent.emit('disableTraceUpdates');
+}
 
+function destroyWeb() {
   if (canvas !== null) {
     if (canvas.parentNode != null) {
       canvas.parentNode.removeChild(canvas);
@@ -111,6 +117,10 @@ export function destroy(agent: Agent): void {
   }
 }
 
+export function destroy(agent: Agent): void {
+  return isReactNativeEnvironment() ? destroyNative(agent) : destroyWeb();
+}
+
 function initialize(): void {
   canvas = window.document.createElement('canvas');
   canvas.style.cssText = `