Improve paint/repaint behavior

packages/e2e-tests/helpers/screenshot.ts

@@ -84,6 +84,11 @@ export async function getGraphicsExecutionPoint(page: Page): Promise<string | nu
   return await element.getAttribute("data-execution-point");
 }
 
+export async function getGraphicsScreenshotType(page: Page): Promise<string | null> {
+  const element = getVideoElement(page);
+  return await element.getAttribute("data-screenshot-type");
+}
+
 export async function getGraphicsStatus(page: Page): Promise<string | null> {
   const element = getVideoElement(page);
   return await element.getAttribute("data-status");
@@ -135,3 +140,11 @@ export async function waitForGraphicsToLoad(page: Page) {
     await expect(await getGraphicsStatus(page)).toBe("loaded");
   });
 }
+
+export async function waitForRepaintGraphicsToLoad(page: Page) {
+  await debugPrint(page, `Waiting for repaint graphics to load...`, "waitForRepaintGraphicsToLoad");
+
+  await waitFor(async () => {
+    await expect(await getGraphicsScreenshotType(page)).toBe("repaint");
+  });
+}

packages/e2e-tests/tests/repaint-06.test.ts

@@ -0,0 +1,126 @@
+import { openDevToolsTab, startTest } from "../helpers";
+import { findConsoleMessage, seekToConsoleMessage } from "../helpers/console-panel";
+import { stepOver } from "../helpers/pause-information-panel";
+import { getGraphicsDataUrl, waitForRepaintGraphicsToLoad } from "../helpers/screenshot";
+import { debugPrint } from "../helpers/utils";
+import { expect, test } from "../testFixture";
+
+test.use({ exampleKey: "doc_control_flow.html" });
+
+test.skip("repaint-06: repaints the screen screen when stepping over code that modifies the DOM", async ({
+  pageWithMeta: { page, recordingId },
+  exampleKey,
+}) => {
+  await startTest(page, recordingId);
+  await openDevToolsTab(page);
+
+  const printedStrings = [
+    "catch",
+    "afterCatch",
+    "finally",
+    "yield 1",
+    "generated 1",
+    "yield 2",
+    "generated 2",
+    "after timer 1",
+    "after timer 2",
+    "after throw timer 1",
+    "after throw timer 2",
+    "within iterator",
+  ];
+
+  const paints: {
+    [key: string]: {
+      before: string | null;
+      after: string | null;
+    };
+  } = {};
+
+  {
+    await debugPrint(page, "Testing repaint graphics");
+
+    let graphicsDataUrl: string | null = null;
+    let previousGraphicsDataUrl: string | null = null;
+
+    for (let index = 0; index < printedStrings.length; index++) {
+      const string = printedStrings[index];
+      const text = `updateText("${string}")`;
+
+      const locator = await findConsoleMessage(page, text, "console-log");
+      await seekToConsoleMessage(page, locator);
+
+      // Step to "Element text before..."
+      await stepOver(page);
+      await stepOver(page);
+
+      await waitForRepaintGraphicsToLoad(page);
+
+      graphicsDataUrl = await getGraphicsDataUrl(page);
+      expect(
+        graphicsDataUrl,
+        `Expected graphics before "${string}" not to match previous after graphics`
+      ).not.toEqual(previousGraphicsDataUrl);
+      previousGraphicsDataUrl = graphicsDataUrl;
+
+      const cachedPaints = {
+        before: graphicsDataUrl,
+        after: "" as string | null,
+      };
+
+      // Step to "Element text after..."
+      await stepOver(page);
+      await stepOver(page);
+
+      await waitForRepaintGraphicsToLoad(page);
+
+      graphicsDataUrl = await getGraphicsDataUrl(page);
+      expect(
+        graphicsDataUrl,
+        `Expected graphics after "${string}" not to match the graphics before`
+      ).not.toEqual(previousGraphicsDataUrl);
+      previousGraphicsDataUrl = graphicsDataUrl;
+
+      cachedPaints.after = graphicsDataUrl;
+
+      paints[string] = cachedPaints;
+    }
+  }
+
+  {
+    await debugPrint(page, "Testing screenshot caching");
+
+    let graphicsDataUrl: string | null = null;
+
+    for (let index = 0; index < printedStrings.length; index++) {
+      const string = printedStrings[index];
+      const text = `updateText("${string}")`;
+
+      const locator = await findConsoleMessage(page, text, "console-log");
+      await seekToConsoleMessage(page, locator);
+
+      // Step to "Element text before..."
+      await stepOver(page);
+      await stepOver(page);
+
+      await waitForRepaintGraphicsToLoad(page);
+
+      graphicsDataUrl = await getGraphicsDataUrl(page);
+      expect(
+        graphicsDataUrl,
+        `Expected graphics before "${string}" to match previous cached graphics`
+      ).toEqual(paints[string]?.before);
+
+      // Step to "Element text after..."
+      await stepOver(page);
+      await stepOver(page);
+
+      await waitForRepaintGraphicsToLoad(page);
+
+      graphicsDataUrl = await getGraphicsDataUrl(page);
+      expect(
+        graphicsDataUrl,
+        `Expected graphics after "${string}" to match previous cached graphics`
+      ).toEqual(paints[string]?.after);
+    }
+  }
+});

packages/protocol/RepaintGraphicsCache.ts

@@ -1,6 +1,7 @@
 import { PauseId, repaintGraphicsResult } from "@replayio/protocol";
 import { Cache, createCache } from "suspense";
 
+import { paintHashCache } from "replay-next/src/suspense/ScreenshotCache";
 import { ReplayClientInterface } from "shared/client/types";
 
 export const RepaintGraphicsCache: Cache<
@@ -11,6 +12,20 @@ export const RepaintGraphicsCache: Cache<
   debugLabel: "RepaintGraphicsCache",
   getKey: ([replayClient, pauseId]) => pauseId,
   load: async ([replayClient, pauseId]) => {
-    return replayClient.repaintGraphics(pauseId);
+    const result = await replayClient.repaintGraphics(pauseId);
+
+    let { description, screenShot } = result;
+
+    // The backend won't return a screenshot for a given hash more than once; see FE-2357
+    if (screenShot) {
+      paintHashCache.cacheValue(screenShot, description.hash);
+    } else {
+      screenShot = paintHashCache.getValueIfCached(description.hash);
+    }
+
+    return {
+      description,
+      screenShot,
+    };
   },
 });

packages/replay-next/src/suspense/ScreenshotCache.ts

@@ -1,5 +1,5 @@
 import { ExecutionPoint, ScreenShot } from "@replayio/protocol";
-import { createCache } from "suspense";
+import { createCache, createExternallyManagedCache } from "suspense";
 
 import { ReplayClientInterface } from "shared/client/types";
 
@@ -10,5 +10,18 @@ export const screenshotCache = createCache<
   config: { immutable: true },
   debugLabel: "ScreenshotCache",
   getKey: ([client, point, paintHash]) => paintHash,
-  load: ([client, point]) => client.getScreenshot(point),
+  load: async ([client, point]) => {
+    const screenShot = await client.getScreenshot(point);
+
+    paintHashCache.cacheValue(screenShot, screenShot.hash);
+
+    return screenShot;
+  },
+});
+
+// The backend won't return a screenshot for a given hash more than once; see FE-2357
+export const paintHashCache = createExternallyManagedCache<[paintHash: string], ScreenShot>({
+  config: { immutable: true },
+  debugLabel: "paintHashCache",
+  getKey: ([paintHash]) => paintHash,
 });

src/ui/components/Video/Video.tsx

@@ -71,6 +71,7 @@ export default function Video() {
 
       // The data attributes are sed for e2e tests
       containerElement.setAttribute("data-execution-point", nextState.currentExecutionPoint ?? "");
+      containerElement.setAttribute("data-screenshot-type", "" + nextState.screenShotType);
       containerElement.setAttribute("data-status", "" + nextState.status);
       containerElement.setAttribute("data-time", "" + nextState.currentTime);
       graphicsElement.setAttribute("data-scale", nextState.localScale.toString());

src/ui/components/Video/imperative/MutableGraphicsState.tsx

@@ -25,6 +25,7 @@ interface Rect {
 }
 
 export type Status = "failed" | "loaded" | "loading";
+export type ScreenShotType = "cached-paint" | "repaint";
 
 export interface State {
   currentExecutionPoint: ExecutionPoint | null;
@@ -33,6 +34,7 @@ export interface State {
   localScale: number;
   recordingScale: number;
   screenShot: ScreenShot | undefined;
+  screenShotType: ScreenShotType | undefined;
   status: Status;
 }
 
@@ -48,25 +50,33 @@ export const state = createState<State>({
   localScale: 1,
   recordingScale: 1,
   screenShot: undefined,
+  screenShotType: undefined,
   status: "loading",
 });
 
+let lock = new Object();
+
 export async function updateState(
   containerElement: HTMLElement,
   options: Partial<{
     didResize?: boolean;
     executionPoint: ExecutionPoint | null;
     screenShot: ScreenShot | null;
+    screenShotType: ScreenShotType | null;
     status: Status;
     time: number;
   }> = {}
 ) {
+  const localLock = new Object();
+  lock = localLock;
+
   const prevState = state.read();
 
   let {
     didResize,
     executionPoint = prevState.currentExecutionPoint,
     screenShot = prevState.screenShot,
+    screenShotType = prevState.screenShotType,
     status = prevState.status,
     time = prevState.currentTime,
   } = options;
@@ -76,6 +86,10 @@ export async function updateState(
   let recordingScale = prevState.recordingScale;
   if (screenShot && (screenShot != prevState.screenShot || didResize)) {
     const naturalDimensions = await getDimensions(screenShot.data, screenShot.mimeType);
+    if (lock !== localLock) {
+      return;
+    }
+
     const naturalHeight = naturalDimensions.height;
     const naturalWidth = naturalDimensions.width;
 
@@ -86,6 +100,10 @@ export async function updateState(
       imageHeight: naturalHeight,
       imageWidth: naturalWidth,
     });
+    if (lock !== localLock) {
+      return;
+    }
+
     const clientHeight = scaledDimensions.height;
     const clientWidth = scaledDimensions.width;
 
@@ -107,6 +125,7 @@ export async function updateState(
     localScale,
     recordingScale,
     screenShot: screenShot || undefined,
+    screenShotType: screenShotType || undefined,
     status,
   };
 

src/ui/components/Video/imperative/subscribeToMutableSources.ts

@@ -86,11 +86,9 @@ export function subscribeToMutableSources({
         });
       }
     } else {
-      if (didStopPlaying) {
-        if (abortController != null) {
-          abortController.abort();
-          abortController = null;
-        }
+      if (abortController != null) {
+        abortController.abort();
+        abortController = null;
       }
 
       abortController = new AbortController();