Add screenshots to Scheduling Profiler

Author: Brian Vaughn

packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js

@@ -16,6 +16,7 @@ import {__DEBUG__} from 'react-devtools-shared/src/constants';
 import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
 import {decodeHookMap} from '../generateHookMap';
 import {getHookNameForLocation} from '../getHookNameForLocation';
+import {decodeBase64String} from 'react-devtools-shared/src/encoding';
 
 import type {MixedSourceMap} from '../SourceMapTypes';
 import type {HookMap} from '../generateHookMap';
@@ -177,20 +178,6 @@ export async function parseHookNames(
     .then(() => findHookNames(hooksList, locationKeyToHookSourceData));
 }
 
-function decodeBase64String(encoded: string): Object {
-  if (typeof atob === 'function') {
-    return atob(encoded);
-  } else if (
-    typeof Buffer !== 'undefined' &&
-    Buffer !== null &&
-    typeof Buffer.from === 'function'
-  ) {
-    return Buffer.from(encoded, 'base64');
-  } else {
-    throw Error('Cannot decode base64 string');
-  }
-}
-
 function extractAndLoadSourceMaps(
   locationKeyToHookSourceData: Map<string, HookSourceData>,
   wasmMappingsURL: string,

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

@@ -46,6 +46,7 @@ import {
   NativeEventsView,
   ReactMeasuresView,
   SchedulingEventsView,
+  SnapshotsView,
   SuspenseEventsView,
   TimeAxisMarkersView,
   UserTimingMarksView,
@@ -157,6 +158,7 @@ function AutoSizedCanvas({
   const componentMeasuresViewRef = useRef(null);
   const reactMeasuresViewRef = useRef(null);
   const flamechartViewRef = useRef(null);
+  const snapshotsViewRef = useRef(null);
 
   const {hideMenu: hideContextMenu} = useContext(RegistryContext);
 
@@ -304,6 +306,18 @@ function AutoSizedCanvas({
       );
     }
 
+    let snapshotsViewWrapper = null;
+    if (data.snapshots.length > 0) {
+      const snapshotsView = new SnapshotsView(surface, defaultFrame, data);
+      snapshotsViewRef.current = snapshotsView;
+      snapshotsViewWrapper = createViewHelper(
+        snapshotsView,
+        'snapshots',
+        true,
+        true,
+      );
+    }
+
     const flamechartView = new FlamechartView(
       surface,
       defaultFrame,
@@ -340,6 +354,9 @@ function AutoSizedCanvas({
     if (componentMeasuresViewWrapper !== null) {
       rootView.addSubview(componentMeasuresViewWrapper);
     }
+    if (snapshotsViewWrapper !== null) {
+      rootView.addSubview(snapshotsViewWrapper);
+    }
     rootView.addSubview(flamechartViewWrapper);
 
     const verticalScrollOverflowView = new VerticalScrollOverflowView(
@@ -389,6 +406,7 @@ function AutoSizedCanvas({
               measure: null,
               nativeEvent: null,
               schedulingEvent: null,
+              snapshot: null,
               suspenseEvent: null,
               userTimingMark: null,
             };
@@ -447,6 +465,7 @@ function AutoSizedCanvas({
             measure: null,
             nativeEvent: null,
             schedulingEvent: null,
+            snapshot: null,
             suspenseEvent: null,
             userTimingMark,
           });
@@ -465,6 +484,7 @@ function AutoSizedCanvas({
             measure: null,
             nativeEvent,
             schedulingEvent: null,
+            snapshot: null,
             suspenseEvent: null,
             userTimingMark: null,
           });
@@ -483,6 +503,7 @@ function AutoSizedCanvas({
             measure: null,
             nativeEvent: null,
             schedulingEvent,
+            snapshot: null,
             suspenseEvent: null,
             userTimingMark: null,
           });
@@ -501,6 +522,7 @@ function AutoSizedCanvas({
             measure: null,
             nativeEvent: null,
             schedulingEvent: null,
+            snapshot: null,
             suspenseEvent,
             userTimingMark: null,
           });
@@ -519,6 +541,7 @@ function AutoSizedCanvas({
             measure,
             nativeEvent: null,
             schedulingEvent: null,
+            snapshot: null,
             suspenseEvent: null,
             userTimingMark: null,
           });
@@ -540,6 +563,26 @@ function AutoSizedCanvas({
             measure: null,
             nativeEvent: null,
             schedulingEvent: null,
+            snapshot: null,
+            suspenseEvent: null,
+            userTimingMark: null,
+          });
+        }
+      };
+    }
+
+    const {current: snapshotsView} = snapshotsViewRef;
+    if (snapshotsView) {
+      snapshotsView.onHover = snapshot => {
+        if (!hoveredEvent || hoveredEvent.snapshot !== snapshot) {
+          setHoveredEvent({
+            componentMeasure: null,
+            data,
+            flamechartStackFrame: null,
+            measure: null,
+            nativeEvent: null,
+            schedulingEvent: null,
+            snapshot,
             suspenseEvent: null,
             userTimingMark: null,
           });
@@ -561,6 +604,7 @@ function AutoSizedCanvas({
             measure: null,
             nativeEvent: null,
             schedulingEvent: null,
+            snapshot: null,
             suspenseEvent: null,
             userTimingMark: null,
           });

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

@@ -17,6 +17,7 @@ import type {
   ReactProfilerData,
   Return,
   SchedulingEvent,
+  Snapshot,
   SuspenseEvent,
   UserTimingMark,
 } from './types';
@@ -87,6 +88,7 @@ export default function EventTooltip({
     measure,
     nativeEvent,
     schedulingEvent,
+    snapshot,
     suspenseEvent,
     userTimingMark,
   } = hoveredEvent;
@@ -110,6 +112,8 @@ export default function EventTooltip({
         tooltipRef={tooltipRef}
       />
     );
+  } else if (snapshot !== null) {
+    return <TooltipSnapshot snapshot={snapshot} tooltipRef={tooltipRef} />;
   } else if (suspenseEvent !== null) {
     return (
       <TooltipSuspenseEvent
@@ -301,6 +305,23 @@ const TooltipSchedulingEvent = ({
   );
 };
 
+const TooltipSnapshot = ({
+  snapshot,
+  tooltipRef,
+}: {
+  snapshot: Snapshot,
+  tooltipRef: Return<typeof useRef>,
+}) => {
+  return (
+    <div className={styles.Tooltip} ref={tooltipRef}>
+      <img
+        src={snapshot.imageSource}
+        style={{width: snapshot.width / 2, height: snapshot.height / 2}}
+      />
+    </div>
+  );
+};
+
 const TooltipSuspenseEvent = ({
   suspenseEvent,
   tooltipRef,