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

facebook · Nov 16, 2023 · c5753ca · c5753ca
1 parent 2c338b1
commit c5753ca
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 33 deletions.
diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js b/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/frontend/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) {
+  agent.emit('hideNativeHighlight');
+}
+
+function hideOverlayWeb() {
   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) {
+  return isReactNativeEnvironment()
+    ? hideOverlayNative(agent)
+    : hideOverlayWeb();
+}
+
+function showOverlayNative(elements: Array<HTMLElement>, agent: Agent) {
+  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;
-  }
-
   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,
+) {
+  return isReactNativeEnvironment()
+    ? showOverlayNative(elements, agent)
+    : showOverlayWeb(elements, componentName, agent, hideAfterTimeout);
+}
diff --git a/packages/react-devtools-shared/src/backend/views/TraceUpdates/canvas.js b/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/frontend/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 = `

diff --git a/packages/react-devtools-shared/src/frontend/utils.js b/packages/react-devtools-shared/src/frontend/utils.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+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;
+};