Support highlights for React Native apps in dev tools

Author: ryancat

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');

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

@@ -11,6 +11,8 @@ import type {Data} from './index';
 import type {Rect} from '../utils';
 import type {NativeType} from '../../types';
 
+import Agent from 'react-devtools-shared/src/backend/agent';
+
 const OUTLINE_COLOR = '#f0f0f0';
 
 // Note these colors are in sync with DevTools Profiler chart colors.
@@ -29,7 +31,17 @@ const COLORS = [
 
 let canvas: HTMLCanvasElement | null = null;
 
-export function draw(nodeToData: Map<NativeType, Data>): void {
+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;
+  }
+
   if (canvas === null) {
     initialize();
   }
@@ -40,17 +52,21 @@ export function draw(nodeToData: Map<NativeType, Data>): 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);
+      drawBorder(context, rect, color)
     }
   });
 }
 
+function iterateNodes(nodeToData: Map<NativeType, Data>, execute: (rect: Rect, color: String) => void, node: NativeType) {
+  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 +95,11 @@ function drawBorder(
   context.setLineDash([0]);
 }
 
-export function destroy(): void {
+export function destroy(agent: Agent): void {
+  if (window.document == null) {
+    return;
+  }
+
   if (canvas !== null) {
     if (canvas.parentNode != null) {
       canvas.parentNode.removeChild(canvas);

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);