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;
+};