[DevTools] Add native events to the scheduling profiler (#21947)

Author: Brian Vaughn

packages/react-devtools-scheduling-profiler/src/CanvasPage.js

@@ -44,6 +44,7 @@ import {
 } from './view-base';
 import {
   FlamechartView,
+  NativeEventsView,
   ReactEventsView,
   ReactMeasuresView,
   TimeAxisMarkersView,
@@ -126,6 +127,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
 
   const surfaceRef = useRef(new Surface());
   const userTimingMarksViewRef = useRef(null);
+  const nativeEventsViewRef = useRef(null);
   const reactEventsViewRef = useRef(null);
   const reactMeasuresViewRef = useRef(null);
   const flamechartViewRef = useRef(null);
@@ -176,6 +178,10 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       topContentStack.addSubview(userTimingMarksView);
     }
 
+    const nativeEventsView = new NativeEventsView(surface, defaultFrame, data);
+    nativeEventsViewRef.current = nativeEventsView;
+    topContentStack.addSubview(nativeEventsView);
+
     const reactEventsView = new ReactEventsView(surface, defaultFrame, data);
     reactEventsViewRef.current = reactEventsView;
     topContentStack.addSubview(reactEventsView);
@@ -299,7 +305,24 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
         if (!hoveredEvent || hoveredEvent.userTimingMark !== userTimingMark) {
           setHoveredEvent({
             userTimingMark,
-            event: null,
+            nativeEvent: null,
+            reactEvent: null,
+            flamechartStackFrame: null,
+            measure: null,
+            data,
+          });
+        }
+      };
+    }
+
+    const {current: nativeEventsView} = nativeEventsViewRef;
+    if (nativeEventsView) {
+      nativeEventsView.onHover = nativeEvent => {
+        if (!hoveredEvent || hoveredEvent.nativeEvent !== nativeEvent) {
+          setHoveredEvent({
+            userTimingMark: null,
+            nativeEvent,
+            reactEvent: null,
             flamechartStackFrame: null,
             measure: null,
             data,
@@ -310,11 +333,12 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
 
     const {current: reactEventsView} = reactEventsViewRef;
     if (reactEventsView) {
-      reactEventsView.onHover = event => {
-        if (!hoveredEvent || hoveredEvent.event !== event) {
+      reactEventsView.onHover = reactEvent => {
+        if (!hoveredEvent || hoveredEvent.reactEvent !== reactEvent) {
           setHoveredEvent({
             userTimingMark: null,
-            event,
+            nativeEvent: null,
+            reactEvent,
             flamechartStackFrame: null,
             measure: null,
             data,
@@ -329,7 +353,8 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
         if (!hoveredEvent || hoveredEvent.measure !== measure) {
           setHoveredEvent({
             userTimingMark: null,
-            event: null,
+            nativeEvent: null,
+            reactEvent: null,
             flamechartStackFrame: null,
             measure,
             data,
@@ -347,7 +372,8 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
         ) {
           setHoveredEvent({
             userTimingMark: null,
-            event: null,
+            nativeEvent: null,
+            reactEvent: null,
             flamechartStackFrame,
             measure: null,
             data,
@@ -368,9 +394,18 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       );
     }
 
+    const {current: nativeEventsView} = nativeEventsViewRef;
+    if (nativeEventsView) {
+      nativeEventsView.setHoveredEvent(
+        hoveredEvent ? hoveredEvent.nativeEvent : null,
+      );
+    }
+
     const {current: reactEventsView} = reactEventsViewRef;
     if (reactEventsView) {
-      reactEventsView.setHoveredEvent(hoveredEvent ? hoveredEvent.event : null);
+      reactEventsView.setHoveredEvent(
+        hoveredEvent ? hoveredEvent.reactEvent : null,
+      );
     }
 
     const {current: reactMeasuresView} = reactMeasuresViewRef;
@@ -402,22 +437,22 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
             return null;
           }
           const {
-            event,
+            reactEvent,
             flamechartStackFrame,
             measure,
           } = contextData.hoveredEvent;
           return (
             <Fragment>
-              {event !== null && (
+              {reactEvent !== null && (
                 <ContextMenuItem
-                  onClick={() => copy(event.componentName)}
+                  onClick={() => copy(reactEvent.componentName)}
                   title="Copy component name">
                   Copy component name
                 </ContextMenuItem>
               )}
-              {event !== null && event.componentStack && (
+              {reactEvent !== null && reactEvent.componentStack && (
                 <ContextMenuItem
-                  onClick={() => copy(event.componentStack)}
+                  onClick={() => copy(reactEvent.componentStack)}
                   title="Copy component stack">
                   Copy component stack
                 </ContextMenuItem>

packages/react-devtools-scheduling-profiler/src/EventTooltip.css

@@ -29,6 +29,7 @@
 .DetailsGridLabel {
   color: var(--color-dim);
   text-align: right;
+  white-space: nowrap;
 }
 
 .DetailsGridURL {
@@ -45,7 +46,7 @@
 .ComponentName {
   font-weight: bold;
   word-break: break-word;
-  margin-right: 0.4rem;
+  margin-right: 0.25rem;
 }
 
 .ComponentStack {

packages/react-devtools-scheduling-profiler/src/EventTooltip.js

@@ -10,6 +10,7 @@
 import type {Point} from './view-base';
 import type {
   FlamechartStackFrame,
+  NativeEvent,
   ReactEvent,
   ReactHoverContextInfo,
   ReactMeasure,
@@ -47,8 +48,8 @@ function trimmedString(string: string, length: number): string {
   return string;
 }
 
-function getReactEventLabel(type): string | null {
-  switch (type) {
+function getReactEventLabel(event: ReactEvent): string | null {
+  switch (event.type) {
     case 'schedule-render':
       return 'render scheduled';
     case 'schedule-state-update':
@@ -111,10 +112,22 @@ export default function EventTooltip({data, hoveredEvent, origin}: Props) {
     return null;
   }
 
-  const {event, measure, flamechartStackFrame, userTimingMark} = hoveredEvent;
+  const {
+    nativeEvent,
+    reactEvent,
+    measure,
+    flamechartStackFrame,
+    userTimingMark,
+  } = hoveredEvent;
 
-  if (event !== null) {
-    return <TooltipReactEvent event={event} tooltipRef={tooltipRef} />;
+  if (nativeEvent !== null) {
+    return (
+      <TooltipNativeEvent nativeEvent={nativeEvent} tooltipRef={tooltipRef} />
+    );
+  } else if (reactEvent !== null) {
+    return (
+      <TooltipReactEvent reactEvent={reactEvent} tooltipRef={tooltipRef} />
+    );
   } else if (measure !== null) {
     return (
       <TooltipReactMeasure
@@ -189,23 +202,47 @@ const TooltipFlamechartNode = ({
   );
 };
 
+const TooltipNativeEvent = ({
+  nativeEvent,
+  tooltipRef,
+}: {
+  nativeEvent: NativeEvent,
+  tooltipRef: Return<typeof useRef>,
+}) => {
+  const {duration, timestamp, type} = nativeEvent;
+
+  return (
+    <div className={styles.Tooltip} ref={tooltipRef}>
+      <span className={styles.ComponentName}>{trimmedString(type, 768)}</span>
+      event
+      <div className={styles.Divider} />
+      <div className={styles.DetailsGrid}>
+        <div className={styles.DetailsGridLabel}>Timestamp:</div>
+        <div>{formatTimestamp(timestamp)}</div>
+        <div className={styles.DetailsGridLabel}>Duration:</div>
+        <div>{formatDuration(duration)}</div>
+      </div>
+    </div>
+  );
+};
+
 const TooltipReactEvent = ({
-  event,
+  reactEvent,
   tooltipRef,
 }: {
-  event: ReactEvent,
+  reactEvent: ReactEvent,
   tooltipRef: Return<typeof useRef>,
 }) => {
-  const label = getReactEventLabel(event.type);
-  const color = getReactEventColor(event);
+  const label = getReactEventLabel(reactEvent);
+  const color = getReactEventColor(reactEvent);
   if (!label || !color) {
     if (__DEV__) {
-      console.warn('Unexpected event type "%s"', event.type);
+      console.warn('Unexpected reactEvent type "%s"', reactEvent.type);
     }
     return null;
   }
 
-  const {componentName, componentStack, timestamp} = event;
+  const {componentName, componentStack, timestamp} = reactEvent;
 
   return (
     <div className={styles.Tooltip} ref={tooltipRef}>