Scheduling profiler: Improve native events UI (#21966)

Also highlight events that have synchronous updates inside of them. (We may want to relax this highlighting later to not warn about event handlers that are still fast enough.)

Author: Brian Vaughn

packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js

@@ -32,9 +32,9 @@ import {
 } from './utils/positioning';
 import {
   COLORS,
-  FLAMECHART_FONT_SIZE,
+  FONT_SIZE,
   FLAMECHART_FRAME_HEIGHT,
-  FLAMECHART_TEXT_PADDING,
+  TEXT_PADDING,
   COLOR_HOVER_DIM_DELTA,
   BORDER_SIZE,
 } from './constants';
@@ -157,7 +157,7 @@ class FlamechartStackLayerView extends View {
 
     context.textAlign = 'left';
     context.textBaseline = 'middle';
-    context.font = `${FLAMECHART_FONT_SIZE}px sans-serif`;
+    context.font = `${FONT_SIZE}px sans-serif`;
 
     const scaleFactor = positioningScaleFactor(_intrinsicSize.width, frame);
 
@@ -195,15 +195,15 @@ class FlamechartStackLayerView extends View {
         drawableRect.size.height,
       );
 
-      if (width > FLAMECHART_TEXT_PADDING * 2) {
+      if (width > TEXT_PADDING * 2) {
         const trimmedName = trimFlamechartText(
           context,
           name,
-          width - FLAMECHART_TEXT_PADDING * 2 + (x < 0 ? x : 0),
+          width - TEXT_PADDING * 2 + (x < 0 ? x : 0),
         );
 
         if (trimmedName !== null) {
-          context.fillStyle = COLORS.FLAME_GRAPH_LABEL;
+          context.fillStyle = COLORS.TEXT_COLOR;
 
           // Prevent text from being drawn outside `viewableArea`
           const textOverflowsViewableArea = !rectEqualToRect(
@@ -225,7 +225,7 @@ class FlamechartStackLayerView extends View {
 
           context.fillText(
             trimmedName,
-            nodeRect.origin.x + FLAMECHART_TEXT_PADDING - (x < 0 ? x : 0),
+            nodeRect.origin.x + TEXT_PADDING - (x < 0 ? x : 0),
             nodeRect.origin.y + FLAMECHART_FRAME_HEIGHT / 2,
           );
 

packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js

@@ -11,9 +11,10 @@ import type {NativeEvent, ReactProfilerData} from '../types';
 import type {Interaction, MouseMoveInteraction, Rect, Size} from '../view-base';
 
 import {
+  durationToWidth,
   positioningScaleFactor,
-  timestampToPosition,
   positionToTimestamp,
+  timestampToPosition,
 } from './utils/positioning';
 import {
   View,
@@ -24,28 +25,77 @@ import {
 } from '../view-base';
 import {
   COLORS,
-  EVENT_ROW_PADDING,
-  EVENT_DIAMETER,
+  TEXT_PADDING,
+  NATIVE_EVENT_HEIGHT,
+  FONT_SIZE,
   BORDER_SIZE,
 } from './constants';
 
-const EVENT_ROW_HEIGHT_FIXED =
-  EVENT_ROW_PADDING + EVENT_DIAMETER + EVENT_ROW_PADDING;
+const ROW_WITH_BORDER_HEIGHT = NATIVE_EVENT_HEIGHT + BORDER_SIZE;
+
+// TODO (scheduling profiler) Make this a reusable util
+const cachedFlamechartTextWidths = new Map();
+const trimFlamechartText = (
+  context: CanvasRenderingContext2D,
+  text: string,
+  width: number,
+) => {
+  for (let i = text.length - 1; i >= 0; i--) {
+    const trimmedText = i === text.length - 1 ? text : text.substr(0, i) + '…';
+
+    let measuredWidth = cachedFlamechartTextWidths.get(trimmedText);
+    if (measuredWidth == null) {
+      measuredWidth = context.measureText(trimmedText).width;
+      cachedFlamechartTextWidths.set(trimmedText, measuredWidth);
+    }
+
+    if (measuredWidth <= width) {
+      return trimmedText;
+    }
+  }
+
+  return null;
+};
 
 export class NativeEventsView extends View {
-  _profilerData: ReactProfilerData;
+  _depthToNativeEvent: Map<number, NativeEvent[]>;
+  _hoveredEvent: NativeEvent | null = null;
   _intrinsicSize: Size;
+  _maxDepth: number = 0;
+  _profilerData: ReactProfilerData;
 
-  _hoveredEvent: NativeEvent | null = null;
   onHover: ((event: NativeEvent | null) => void) | null = null;
 
   constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {
     super(surface, frame);
+
     this._profilerData = profilerData;
 
+    this._performPreflightComputations();
+    console.log(this._depthToNativeEvent);
+  }
+
+  _performPreflightComputations() {
+    this._depthToNativeEvent = new Map();
+
+    const {duration, nativeEvents} = this._profilerData;
+
+    nativeEvents.forEach(event => {
+      const depth = event.depth;
+
+      this._maxDepth = Math.max(this._maxDepth, depth);
+
+      if (!this._depthToNativeEvent.has(depth)) {
+        this._depthToNativeEvent.set(depth, [event]);
+      } else {
+        // $FlowFixMe This is unnecessary.
+        this._depthToNativeEvent.get(depth).push(event);
+      }
+    });
+
     this._intrinsicSize = {
-      width: this._profilerData.duration,
-      height: EVENT_ROW_HEIGHT_FIXED,
+      width: duration,
+      height: (this._maxDepth + 1) * ROW_WITH_BORDER_HEIGHT,
     };
   }
 
@@ -73,7 +123,9 @@ export class NativeEventsView extends View {
     showHoverHighlight: boolean,
   ) {
     const {frame} = this;
-    const {duration, timestamp} = event;
+    const {depth, duration, highlight, timestamp, type} = event;
+
+    baseY += depth * ROW_WITH_BORDER_HEIGHT;
 
     const xStart = timestampToPosition(timestamp, scaleFactor, frame);
     const xStop = timestampToPosition(timestamp + duration, scaleFactor, frame);
@@ -82,25 +134,60 @@ export class NativeEventsView extends View {
         x: xStart,
         y: baseY,
       },
-      size: {width: xStop - xStart, height: EVENT_DIAMETER},
+      size: {width: xStop - xStart, height: NATIVE_EVENT_HEIGHT},
     };
     if (!rectIntersectsRect(eventRect, rect)) {
       return; // Not in view
     }
 
-    const fillStyle = showHoverHighlight
-      ? COLORS.NATIVE_EVENT_HOVER
-      : COLORS.NATIVE_EVENT;
+    const width = durationToWidth(duration, scaleFactor);
+    if (width < 1) {
+      return; // Too small to render at this zoom level
+    }
 
     const drawableRect = intersectionOfRects(eventRect, rect);
     context.beginPath();
-    context.fillStyle = fillStyle;
+    if (highlight) {
+      context.fillStyle = showHoverHighlight
+        ? COLORS.NATIVE_EVENT_WARNING_HOVER
+        : COLORS.NATIVE_EVENT_WARNING;
+    } else {
+      context.fillStyle = showHoverHighlight
+        ? COLORS.NATIVE_EVENT_HOVER
+        : COLORS.NATIVE_EVENT;
+    }
     context.fillRect(
       drawableRect.origin.x,
       drawableRect.origin.y,
       drawableRect.size.width,
       drawableRect.size.height,
     );
+
+    // Render event type label
+    context.textAlign = 'left';
+    context.textBaseline = 'middle';
+    context.font = `${FONT_SIZE}px sans-serif`;
+
+    if (width > TEXT_PADDING * 2) {
+      const x = Math.floor(timestampToPosition(timestamp, scaleFactor, frame));
+      const trimmedName = trimFlamechartText(
+        context,
+        type,
+        width - TEXT_PADDING * 2 + (x < 0 ? x : 0),
+      );
+
+      if (trimmedName !== null) {
+        context.fillStyle = highlight
+          ? COLORS.NATIVE_EVENT_WARNING_TEXT
+          : COLORS.TEXT_COLOR;
+
+        context.fillText(
+          trimmedName,
+          eventRect.origin.x + TEXT_PADDING - (x < 0 ? x : 0),
+          eventRect.origin.y + NATIVE_EVENT_HEIGHT / 2,
+        );
+      }
+    }
   }
 
   draw(context: CanvasRenderingContext2D) {
@@ -111,7 +198,7 @@ export class NativeEventsView extends View {
       visibleArea,
     } = this;
 
-    context.fillStyle = COLORS.BACKGROUND;
+    context.fillStyle = COLORS.PRIORITY_BACKGROUND;
     context.fillRect(
       visibleArea.origin.x,
       visibleArea.origin.y,
@@ -120,57 +207,43 @@ export class NativeEventsView extends View {
     );
 
     // Draw events
-    const baseY = frame.origin.y + EVENT_ROW_PADDING;
     const scaleFactor = positioningScaleFactor(
       this._intrinsicSize.width,
       frame,
     );
 
     nativeEvents.forEach(event => {
-      if (event === _hoveredEvent) {
-        // Draw the highlighted items on top so they stand out.
-        // This is helpful if there are multiple (overlapping) items close to each other.
-        this._drawSingleNativeEvent(
-          context,
-          visibleArea,
-          event,
-          baseY,
-          scaleFactor,
-          true,
-        );
-      } else {
-        this._drawSingleNativeEvent(
-          context,
-          visibleArea,
-          event,
-          baseY,
-          scaleFactor,
-          false,
-        );
-      }
+      this._drawSingleNativeEvent(
+        context,
+        visibleArea,
+        event,
+        frame.origin.y,
+        scaleFactor,
+        event === _hoveredEvent,
+      );
     });
 
-    // Render bottom border.
-    // Propose border rect, check if intersects with `rect`, draw intersection.
-    const borderFrame: Rect = {
-      origin: {
-        x: frame.origin.x,
-        y: frame.origin.y + EVENT_ROW_HEIGHT_FIXED - BORDER_SIZE,
-      },
-      size: {
-        width: frame.size.width,
-        height: BORDER_SIZE,
-      },
-    };
-    if (rectIntersectsRect(borderFrame, visibleArea)) {
-      const borderDrawableRect = intersectionOfRects(borderFrame, visibleArea);
-      context.fillStyle = COLORS.PRIORITY_BORDER;
-      context.fillRect(
-        borderDrawableRect.origin.x,
-        borderDrawableRect.origin.y,
-        borderDrawableRect.size.width,
-        borderDrawableRect.size.height,
-      );
+    // Render bottom borders.
+    for (let i = 0; i <= this._maxDepth; i++) {
+      const borderFrame: Rect = {
+        origin: {
+          x: frame.origin.x,
+          y: frame.origin.y + NATIVE_EVENT_HEIGHT,
+        },
+        size: {
+          width: frame.size.width,
+          height: BORDER_SIZE,
+        },
+      };
+      if (rectIntersectsRect(borderFrame, visibleArea)) {
+        context.fillStyle = COLORS.PRIORITY_BORDER;
+        context.fillRect(
+          visibleArea.origin.x,
+          frame.origin.y + (i + 1) * ROW_WITH_BORDER_HEIGHT - BORDER_SIZE,
+          visibleArea.size.width,
+          BORDER_SIZE,
+        );
+      }
     }
   }
 
@@ -189,25 +262,26 @@ export class NativeEventsView extends View {
       return;
     }
 
-    const {nativeEvents} = this._profilerData;
-
     const scaleFactor = positioningScaleFactor(_intrinsicSize.width, frame);
     const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);
 
-    // Find the event being hovered over.
-    //
-    // Because data ranges may overlap, we want to find the last intersecting item.
-    // This will always be the one on "top" (the one the user is hovering over).
-    for (let index = nativeEvents.length - 1; index >= 0; index--) {
-      const nativeEvent = nativeEvents[index];
-      const {duration, timestamp} = nativeEvent;
-
-      if (
-        hoverTimestamp >= timestamp &&
-        hoverTimestamp <= timestamp + duration
-      ) {
-        onHover(nativeEvent);
-        return;
+    const adjustedCanvasMouseY = location.y - frame.origin.y;
+    const depth = Math.floor(adjustedCanvasMouseY / ROW_WITH_BORDER_HEIGHT);
+    const nativeEventsAtDepth = this._depthToNativeEvent.get(depth);
+
+    if (nativeEventsAtDepth) {
+      // Find the event being hovered over.
+      for (let index = nativeEventsAtDepth.length - 1; index >= 0; index--) {
+        const nativeEvent = nativeEventsAtDepth[index];
+        const {duration, timestamp} = nativeEvent;
+
+        if (
+          hoverTimestamp >= timestamp &&
+          hoverTimestamp <= timestamp + duration
+        ) {
+          onHover(nativeEvent);
+          return;
+        }
       }
     }