diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js index 71e744741ec21..12b76dae9034a 100644 --- a/packages/react-devtools-core/src/standalone.js +++ b/packages/react-devtools-core/src/standalone.js @@ -262,6 +262,7 @@ function initialize(socket: WebSocket) { store = new Store(bridge, { checkBridgeProtocolCompatibility: true, supportsNativeInspection: true, + supportsTraceUpdates: true, }); log('Connected'); diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js index 8f83437634e43..0b78fce3c22ca 100644 --- a/packages/react-devtools-shared/src/backend/agent.js +++ b/packages/react-devtools-shared/src/backend/agent.js @@ -148,6 +148,8 @@ export default class Agent extends EventEmitter<{ stopInspectingNative: [], shutdown: [], traceUpdates: [Set], + drawTraceUpdates: [Array], + disableTraceUpdates: [], }> { _bridge: BackendBridge; _isProfiling: boolean = false; 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 155e0b29368d5..5d560273d61dc 100644 --- a/packages/react-devtools-shared/src/backend/views/TraceUpdates/canvas.js +++ b/packages/react-devtools-shared/src/backend/views/TraceUpdates/canvas.js @@ -10,6 +10,7 @@ import type {Data} from './index'; import type {Rect} from '../utils'; import type {NativeType} from '../../types'; +import type Agent from '../../agent'; const OUTLINE_COLOR = '#f0f0f0'; @@ -29,7 +30,17 @@ const COLORS = [ let canvas: HTMLCanvasElement | null = null; -export function draw(nodeToData: Map): void { +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; + } + if (canvas === null) { initialize(); } @@ -40,17 +51,24 @@ export function draw(nodeToData: Map): void { const context = canvasFlow.getContext('2d'); context.clearRect(0, 0, canvasFlow.width, canvasFlow.height); - - nodeToData.forEach(({count, rect}) => { + iterateNodes(nodeToData, (rect, color) => { if (rect !== null) { - const colorIndex = Math.min(COLORS.length - 1, count - 1); - const color = COLORS[colorIndex]; - drawBorder(context, rect, color); } }); } +function iterateNodes( + nodeToData: Map, + execute: (rect: Rect | null, color: string, node: NativeType) => void, +) { + nodeToData.forEach(({count, rect}, node) => { + const colorIndex = Math.min(COLORS.length - 1, count - 1); + const color = COLORS[colorIndex]; + execute(rect, color, node); + }); +} + function drawBorder( context: CanvasRenderingContext2D, rect: Rect, @@ -79,7 +97,12 @@ function drawBorder( context.setLineDash([0]); } -export function destroy(): void { +export function destroy(agent: Agent): void { + if (window.document == null) { + agent.emit('disableTraceUpdates'); + return; + } + if (canvas !== null) { if (canvas.parentNode != null) { canvas.parentNode.removeChild(canvas); diff --git a/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js b/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js index 105dfd2cca3c2..8c774e3f1b6e2 100644 --- a/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js +++ b/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js @@ -66,7 +66,7 @@ export function toggleEnabled(value: boolean): void { redrawTimeoutID = null; } - destroyCanvas(); + destroyCanvas(agent); } } @@ -126,7 +126,7 @@ function prepareToDraw(): void { } }); - draw(nodeToData); + draw(nodeToData, agent); if (earliestExpiration !== Number.MAX_VALUE) { redrawTimeoutID = setTimeout(prepareToDraw, earliestExpiration - now);