From c5753ca3c54fd2eab51bb643450c8974d367e9ca Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin Date: Thu, 16 Nov 2023 18:19:45 +0000 Subject: [PATCH] refactor[devtools]: highlight an array of elements for native --- .../backend/views/Highlighter/Highlighter.js | 48 ++++++++++++------- .../src/backend/views/TraceUpdates/canvas.js | 40 ++++++++++------ .../src/frontend/utils.js | 14 ++++++ 3 files changed, 69 insertions(+), 33 deletions(-) create mode 100644 packages/react-devtools-shared/src/frontend/utils.js diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js b/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js index 6c25aa39056ba..491f9db78a0b7 100644 --- a/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js +++ b/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js @@ -9,6 +9,8 @@ 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; @@ -16,11 +18,11 @@ 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 | null, +export function hideOverlay(agent: Agent) { + return isReactNativeEnvironment() + ? hideOverlayNative(agent) + : hideOverlayWeb(); +} + +function showOverlayNative(elements: Array, agent: Agent) { + agent.emit('showNativeHighlight', elements); +} + +function showOverlayWeb( + elements: Array, 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, + 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 index 5d560273d61dc..0c0eb6fa516ce 100644 --- 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, 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, agent: Agent) { + const nodesToDraw = []; + iterateNodes(nodeToData, (_, color, node) => { + nodesToDraw.push({node, color}); + }); + agent.emit('drawTraceUpdates', nodesToDraw); +} + +function drawWeb(nodeToData: Map) { if (canvas === null) { initialize(); } @@ -58,6 +59,12 @@ export function draw(nodeToData: Map, agent: Agent): void { }); } +export function draw(nodeToData: Map, agent: Agent): void { + return isReactNativeEnvironment() + ? drawNative(nodeToData, agent) + : drawWeb(nodeToData); +} + function iterateNodes( nodeToData: Map, 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 new file mode 100644 index 0000000000000..1fbbebdfa5f80 --- /dev/null +++ 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; +};