mirror of
https://github.com/getpaseo/paseo.git
synced 2026-10-22 01:02:41 +00:00
Mohamed Boudra
ce07732d62
The fixed header overlay repainted after compositor-driven scroll, so ordinary headers visibly lagged behind the diff body. Paint in-flow headers with the scrolling canvas and reserve a bounded sticky canvas pool for push-off behavior.
854 lines
32 KiB
TypeScript
854 lines
32 KiB
TypeScript
import { writeFile } from "node:fs/promises";
|
|
import path from "node:path";
|
|
import type { CDPSession, Locator, Page, TestInfo } from "@playwright/test";
|
|
import { buildHostWorkspaceRoute } from "../../src/utils/host-routes";
|
|
import { test, expect } from "../support/fixtures";
|
|
import { getServerId } from "../support/helpers/server-id";
|
|
import { connectSeedClient } from "../support/helpers/seed-client";
|
|
import { createTempGitRepo } from "../support/helpers/workspace";
|
|
import { openChangesPanel, waitForWorkspaceTabsVisible } from "../support/helpers/workspace-tabs";
|
|
import { DIFF_POC_BASELINE } from "./diff-performance-baseline";
|
|
|
|
const RUN_DIFF_PERF = process.env.PASEO_DIFF_PERF_E2E === "1";
|
|
const RUN_HEADER_COMPARISON = process.env.PASEO_DIFF_HEADER_COMPARISON === "1";
|
|
const diffPerfDescribe = RUN_DIFF_PERF ? test.describe : test.describe.skip;
|
|
const LINE_COUNT_PER_FILE = 1_200;
|
|
const MANY_FILE_COUNT = Number(process.env.PASEO_DIFF_MANY_FILE_COUNT ?? 2_000);
|
|
const FILE_PATHS = ["src/large-a.ts", "src/large-b.ts"] as const;
|
|
const CPU_SLOWDOWN = Number(process.env.PASEO_DIFF_PERF_CPU_SLOWDOWN ?? 6);
|
|
const CHANGES_PREFERENCES_KEY = "@paseo:changes-preferences";
|
|
const POC_MEDIAN_FRAME_MS = Number(
|
|
process.env.PASEO_DIFF_POC_MEDIAN_FRAME_MS ?? DIFF_POC_BASELINE.medianFrameMs,
|
|
);
|
|
const POC_P95_FRAME_MS = Number(
|
|
process.env.PASEO_DIFF_POC_P95_FRAME_MS ?? DIFF_POC_BASELINE.p95FrameMs,
|
|
);
|
|
const MAX_MEDIAN_FRAME_MS = POC_MEDIAN_FRAME_MS * 2.6;
|
|
const MAX_P95_FRAME_MS = POC_P95_FRAME_MS * 2.4;
|
|
const MANY_FILE_MAX_MEDIAN_FRAME_MS = 45;
|
|
const MANY_FILE_MAX_P95_FRAME_MS = 80;
|
|
|
|
diffPerfDescribe("Diff canvas performance", () => {
|
|
test("opening a review stays responsive in a large diff", async ({ page }) => {
|
|
test.setTimeout(120_000);
|
|
const repo = await createLargeDiffRepository();
|
|
const client = await connectSeedClient();
|
|
let cdp: CDPSession | null = null;
|
|
|
|
try {
|
|
const created = await client.createWorkspace({
|
|
source: { kind: "directory", path: repo.path },
|
|
});
|
|
if (!created.workspace) {
|
|
throw new Error(created.error ?? "Failed to create diff performance workspace");
|
|
}
|
|
|
|
await configureUnwrappedUnifiedDiff(page);
|
|
await page.setViewportSize({ width: 1400, height: 900 });
|
|
await page.goto(buildHostWorkspaceRoute(getServerId(), created.workspace.id));
|
|
await waitForWorkspaceTabsVisible(page);
|
|
await openChangesPanel(page);
|
|
await expect(page.getByTestId("git-diff-canvas")).toBeVisible({ timeout: 30_000 });
|
|
|
|
cdp = await page.context().newCDPSession(page);
|
|
await cdp.send("Emulation.setCPUThrottlingRate", { rate: CPU_SLOWDOWN });
|
|
const elapsedMs = await openFirstReviewEditor(page);
|
|
expect(elapsedMs).toBeLessThanOrEqual(200 * CPU_SLOWDOWN);
|
|
} finally {
|
|
await cdp?.send("Emulation.setCPUThrottlingRate", { rate: 1 }).catch(() => undefined);
|
|
await cdp?.detach().catch(() => undefined);
|
|
await client.close().catch(() => undefined);
|
|
await repo.cleanup().catch(() => undefined);
|
|
}
|
|
});
|
|
|
|
test("many small files keep canvas headers bounded and responsive", async ({
|
|
page,
|
|
}, testInfo) => {
|
|
test.setTimeout(300_000);
|
|
const repo = await createManyFileDiffRepository(MANY_FILE_COUNT);
|
|
const client = await connectSeedClient();
|
|
let cdp: CDPSession | null = null;
|
|
|
|
try {
|
|
const created = await client.createWorkspace({
|
|
source: { kind: "directory", path: repo.path },
|
|
});
|
|
if (!created.workspace) {
|
|
throw new Error(created.error ?? "Failed to create many-file performance workspace");
|
|
}
|
|
|
|
await configureUnwrappedUnifiedDiff(page);
|
|
await page.setViewportSize({ width: 1400, height: 900 });
|
|
const openedAt = performance.now();
|
|
await page.goto(buildHostWorkspaceRoute(getServerId(), created.workspace.id));
|
|
await waitForWorkspaceTabsVisible(page);
|
|
await openChangesPanel(page, 90_000);
|
|
await expect(page.getByTestId("diff-file-0-toggle")).toBeVisible({ timeout: 30_000 });
|
|
const readyMs = performance.now() - openedAt;
|
|
const [initialShells, initialElements, paintKind] = await page
|
|
.getByTestId("git-diff-canvas-root")
|
|
.evaluate(
|
|
(root) =>
|
|
[
|
|
root.querySelectorAll('[data-diff-header="true"]').length,
|
|
root.querySelectorAll("*").length,
|
|
root.querySelector('[data-testid="git-diff-canvas"]') &&
|
|
root.querySelectorAll('[data-testid^="git-diff-sticky-header-"]').length === 2
|
|
? "canvas-pool"
|
|
: "dom",
|
|
] as const,
|
|
);
|
|
const headerDomMetrics = await page.getByTestId("diff-file-0-toggle").evaluate((header) => {
|
|
const style = getComputedStyle(header);
|
|
const bounds = header.getBoundingClientRect();
|
|
const leaves = [];
|
|
for (const element of header.querySelectorAll<HTMLElement>("*")) {
|
|
if (element.children.length !== 0 || !element.textContent?.trim()) continue;
|
|
const leafStyle = getComputedStyle(element);
|
|
const leafBounds = element.getBoundingClientRect();
|
|
leaves.push({
|
|
text: element.textContent,
|
|
x: leafBounds.x - bounds.x,
|
|
y: leafBounds.y - bounds.y,
|
|
width: leafBounds.width,
|
|
height: leafBounds.height,
|
|
font: leafStyle.font,
|
|
lineHeight: leafStyle.lineHeight,
|
|
color: leafStyle.color,
|
|
});
|
|
}
|
|
return {
|
|
width: bounds.width,
|
|
height: bounds.height,
|
|
padding: style.padding,
|
|
border: style.border,
|
|
boxShadow: style.boxShadow,
|
|
leaves,
|
|
};
|
|
});
|
|
const headerCanvasMetrics = await page
|
|
.getByTestId("git-diff-sticky-header-0")
|
|
.evaluate((canvas: HTMLCanvasElement) => {
|
|
const context = canvas.getContext("2d");
|
|
if (!context) throw new Error("Header canvas has no 2D context");
|
|
const font = context.font;
|
|
return {
|
|
font,
|
|
nameWidth: context.measureText("file-0000.ts").width,
|
|
directoryWidth: context.measureText(" src").width,
|
|
};
|
|
})
|
|
.catch(() => null);
|
|
const capturePath = process.env.PASEO_DIFF_HEADER_CAPTURE_PATH;
|
|
if (capturePath) {
|
|
await writeFile(capturePath, await page.getByTestId("git-diff-canvas-root").screenshot());
|
|
}
|
|
|
|
cdp = await page.context().newCDPSession(page);
|
|
await cdp.send("Emulation.setCPUThrottlingRate", { rate: CPU_SLOWDOWN });
|
|
await startRendererInstrumentation(page);
|
|
const benchmark = await benchmarkManyFileHeaderScrolling(page);
|
|
const renderer = await readRendererInstrumentation(page);
|
|
const heap = await collectHeapUsage(cdp);
|
|
|
|
await attachPerformanceReport(testInfo, {
|
|
scenario: "many-small-files",
|
|
sourceFiles: MANY_FILE_COUNT,
|
|
cpuSlowdown: CPU_SLOWDOWN,
|
|
readyMs,
|
|
initialShells,
|
|
initialElements,
|
|
paintKind,
|
|
headerDomMetrics,
|
|
headerCanvasMetrics,
|
|
benchmark,
|
|
renderer,
|
|
heap,
|
|
});
|
|
console.log(
|
|
`[perf] Many-file headers: ${JSON.stringify({ readyMs, initialShells, initialElements, paintKind, headerDomMetrics, headerCanvasMetrics, benchmark, renderer, heap })}`,
|
|
);
|
|
if (!RUN_HEADER_COMPARISON) {
|
|
expect(benchmark.maximumShells).toBeLessThan(120);
|
|
expect(benchmark.maximumStickyCanvases).toBe(2);
|
|
expect(benchmark.blankHeaderFrames).toBe(0);
|
|
expect(benchmark.medianFrameMs).toBeLessThanOrEqual(MANY_FILE_MAX_MEDIAN_FRAME_MS);
|
|
expect(benchmark.p95FrameMs).toBeLessThanOrEqual(MANY_FILE_MAX_P95_FRAME_MS);
|
|
expect(Math.abs(benchmark.maximumScrollTop - benchmark.endScrollTop)).toBeLessThanOrEqual(
|
|
1,
|
|
);
|
|
expect(renderer.reactCommits).toBeLessThanOrEqual(80);
|
|
}
|
|
} finally {
|
|
await cdp?.send("Emulation.setCPUThrottlingRate", { rate: 1 }).catch(() => undefined);
|
|
await cdp?.detach().catch(() => undefined);
|
|
await client.close().catch(() => undefined);
|
|
await repo.cleanup().catch(() => undefined);
|
|
}
|
|
});
|
|
|
|
test("bounded canvases stay filled through continuous fast scrolling", async ({
|
|
page,
|
|
}, testInfo) => {
|
|
test.setTimeout(180_000);
|
|
const repo = await createLargeDiffRepository();
|
|
const client = await connectSeedClient();
|
|
let cdp: CDPSession | null = null;
|
|
let traceStarted = false;
|
|
|
|
try {
|
|
const created = await client.createWorkspace({
|
|
source: { kind: "directory", path: repo.path },
|
|
});
|
|
if (!created.workspace) {
|
|
throw new Error(created.error ?? "Failed to create diff performance workspace");
|
|
}
|
|
|
|
await configureUnwrappedUnifiedDiff(page);
|
|
await page.setViewportSize({ width: 1400, height: 900 });
|
|
await page.goto(buildHostWorkspaceRoute(getServerId(), created.workspace.id));
|
|
await waitForWorkspaceTabsVisible(page);
|
|
await openChangesPanel(page);
|
|
await expect(page.getByTestId("git-diff-canvas")).toBeVisible({ timeout: 30_000 });
|
|
|
|
await expectBoundedCanvasSurfaces(page);
|
|
cdp = await page.context().newCDPSession(page);
|
|
await cdp.send("Emulation.setCPUThrottlingRate", { rate: CPU_SLOWDOWN });
|
|
await startChromiumTrace(cdp);
|
|
traceStarted = true;
|
|
await startRendererInstrumentation(page);
|
|
|
|
const scrollReports = [];
|
|
const heapUsage = [];
|
|
for (let cycle = 0; cycle < 3; cycle += 1) {
|
|
scrollReports.push(await continuouslyScrollCanvas(page));
|
|
heapUsage.push(await collectHeapUsage(cdp));
|
|
}
|
|
await expectContinuousFramesMatchStableRender(
|
|
page,
|
|
scrollReports.flatMap((report) => report.frameSignatures),
|
|
);
|
|
const frameImages = await captureCanvasAtScrollIntervals(page);
|
|
for (const [frameIndex, frame] of frameImages.entries()) {
|
|
await writeFile(testInfo.outputPath(`diff-canvas-frame-${frameIndex}.png`), frame.image);
|
|
await testInfo.attach(`diff-canvas-frame-${frameIndex}`, {
|
|
body: frame.image,
|
|
contentType: "image/png",
|
|
});
|
|
expect(frame.image.byteLength).toBeGreaterThan(4_000);
|
|
}
|
|
|
|
await expectIndependentHorizontalOffsetsSurviveVerticalScrolling(page);
|
|
const renderer = await readRendererInstrumentation(page);
|
|
const measuredCycles = scrollReports.slice(1);
|
|
console.log(
|
|
`[perf] Large-file canvas: ${JSON.stringify({ scrollReports, heapUsage, renderer })}`,
|
|
);
|
|
expect(Math.max(...measuredCycles.map((cycle) => cycle.medianFrameMs))).toBeLessThanOrEqual(
|
|
MAX_MEDIAN_FRAME_MS,
|
|
);
|
|
expect(Math.max(...measuredCycles.map((cycle) => cycle.p95FrameMs))).toBeLessThanOrEqual(
|
|
MAX_P95_FRAME_MS,
|
|
);
|
|
for (const cycle of scrollReports) {
|
|
expect(Math.abs(cycle.maximumScrollTop - cycle.endScrollTop)).toBeLessThanOrEqual(1);
|
|
}
|
|
expect(heapUsage.at(-1)!.usedSize).toBeLessThanOrEqual(
|
|
heapUsage[0]!.usedSize * 1.1 + 1_000_000,
|
|
);
|
|
expect(renderer.addedElements).toBeLessThanOrEqual(40);
|
|
expect(renderer.removedElements).toBeLessThanOrEqual(40);
|
|
expect(renderer.reactCommits).toBeLessThanOrEqual(30);
|
|
|
|
await reloadDiffPresentation(page, { layout: "unified", wrapLines: true });
|
|
const wrapped = await measureAdditionalPerformanceScenario(page, cdp, testInfo, "wrapped");
|
|
await reloadDiffPresentation(page, { layout: "split", wrapLines: false });
|
|
const split = await measureAdditionalPerformanceScenario(page, cdp, testInfo, "split");
|
|
|
|
const report = {
|
|
cpuSlowdown: CPU_SLOWDOWN,
|
|
pocBaseline: {
|
|
medianFrameMs: POC_MEDIAN_FRAME_MS,
|
|
p95FrameMs: POC_P95_FRAME_MS,
|
|
},
|
|
sourceFiles: FILE_PATHS.length,
|
|
sourceLines: FILE_PATHS.length * LINE_COUNT_PER_FILE,
|
|
scrollReports,
|
|
heapUsage,
|
|
renderer,
|
|
wrapped,
|
|
split,
|
|
canvasPngBytes: frameImages.map((frame) => frame.image.byteLength),
|
|
};
|
|
await attachPerformanceReport(testInfo, report);
|
|
await stopChromiumTrace(cdp, testInfo);
|
|
traceStarted = false;
|
|
|
|
await cdp.send("Emulation.setCPUThrottlingRate", { rate: 1 });
|
|
} finally {
|
|
if (cdp && traceStarted) {
|
|
await stopChromiumTrace(cdp, testInfo).catch(() => undefined);
|
|
}
|
|
await cdp?.send("Emulation.setCPUThrottlingRate", { rate: 1 }).catch(() => undefined);
|
|
await cdp?.detach().catch(() => undefined);
|
|
await client.close().catch(() => undefined);
|
|
await repo.cleanup().catch(() => undefined);
|
|
}
|
|
});
|
|
});
|
|
|
|
async function measureAdditionalPerformanceScenario(
|
|
page: Page,
|
|
cdp: CDPSession,
|
|
testInfo: TestInfo,
|
|
name: "wrapped" | "split",
|
|
) {
|
|
await expectBoundedCanvasSurfaces(page);
|
|
await startRendererInstrumentation(page);
|
|
const scrollReports = [];
|
|
const heapUsage = [];
|
|
for (let cycle = 0; cycle < 3; cycle += 1) {
|
|
scrollReports.push(await continuouslyScrollCanvas(page));
|
|
heapUsage.push(await collectHeapUsage(cdp));
|
|
}
|
|
await expectContinuousFramesMatchStableRender(
|
|
page,
|
|
scrollReports.flatMap((report) => report.frameSignatures),
|
|
);
|
|
const frames = await captureCanvasAtScrollIntervals(page);
|
|
for (const [index, frame] of frames.entries()) {
|
|
await writeFile(testInfo.outputPath(`diff-canvas-${name}-frame-${index}.png`), frame.image);
|
|
await testInfo.attach(`diff-canvas-${name}-frame-${index}`, {
|
|
body: frame.image,
|
|
contentType: "image/png",
|
|
});
|
|
expect(frame.image.byteLength).toBeGreaterThan(4_000);
|
|
}
|
|
const measuredCycles = scrollReports.slice(1);
|
|
expect(Math.max(...measuredCycles.map((cycle) => cycle.medianFrameMs))).toBeLessThanOrEqual(
|
|
MAX_MEDIAN_FRAME_MS,
|
|
);
|
|
expect(Math.max(...measuredCycles.map((cycle) => cycle.p95FrameMs))).toBeLessThanOrEqual(
|
|
MAX_P95_FRAME_MS,
|
|
);
|
|
for (const cycle of scrollReports) {
|
|
expect(Math.abs(cycle.maximumScrollTop - cycle.endScrollTop)).toBeLessThanOrEqual(1);
|
|
}
|
|
expect(heapUsage.at(-1)!.usedSize).toBeLessThanOrEqual(heapUsage[0]!.usedSize * 1.1 + 1_000_000);
|
|
const renderer = await readRendererInstrumentation(page);
|
|
expect(renderer.addedElements).toBeLessThanOrEqual(40);
|
|
expect(renderer.removedElements).toBeLessThanOrEqual(40);
|
|
expect(renderer.reactCommits).toBeLessThanOrEqual(30);
|
|
return {
|
|
scrollReports,
|
|
heapUsage,
|
|
renderer,
|
|
canvasPngBytes: frames.map((frame) => frame.image.byteLength),
|
|
};
|
|
}
|
|
|
|
async function reloadDiffPresentation(
|
|
page: Page,
|
|
requestedPresentation: { layout: "unified" | "split"; wrapLines: boolean },
|
|
): Promise<void> {
|
|
await page.evaluate(
|
|
({ preferencesKey, presentation }) => {
|
|
const current = JSON.parse(localStorage.getItem(preferencesKey) ?? "{}") as object;
|
|
localStorage.setItem(preferencesKey, JSON.stringify({ ...current, ...presentation }));
|
|
},
|
|
{ preferencesKey: CHANGES_PREFERENCES_KEY, presentation: requestedPresentation },
|
|
);
|
|
await page.reload();
|
|
await waitForWorkspaceTabsVisible(page);
|
|
await openChangesPanel(page);
|
|
await expect(page.getByTestId("git-diff-canvas")).toBeVisible({ timeout: 30_000 });
|
|
}
|
|
|
|
async function createLargeDiffRepository() {
|
|
const repo = await createTempGitRepo("diff-perf-", {
|
|
files: FILE_PATHS.map((filePath, fileIndex) => ({
|
|
path: filePath,
|
|
content: `export const baseline_${fileIndex} = 0;\n`,
|
|
})),
|
|
});
|
|
for (const [fileIndex, filePath] of FILE_PATHS.entries()) {
|
|
const generatedLines = Array.from(
|
|
{ length: LINE_COUNT_PER_FILE },
|
|
(_, lineIndex) =>
|
|
`export const generated_${fileIndex}_${lineIndex} = "${lineIndex}-${"wide".repeat(16)}";`,
|
|
).join("\n");
|
|
await writeFile(
|
|
path.join(repo.path, filePath),
|
|
`export const baseline_${fileIndex} = 1;\n${generatedLines}\n`,
|
|
);
|
|
}
|
|
return repo;
|
|
}
|
|
|
|
async function createManyFileDiffRepository(fileCount: number) {
|
|
const files = Array.from({ length: fileCount }, (_, index) => ({
|
|
path: `src/file-${String(index).padStart(4, "0")}.ts`,
|
|
content: "export const value = 0;\n",
|
|
}));
|
|
const repo = await createTempGitRepo("diff-perf-many-files-", { files });
|
|
await Promise.all(
|
|
files.map((file, index) =>
|
|
writeFile(path.join(repo.path, file.path), `export const value = ${index + 1};\n`),
|
|
),
|
|
);
|
|
return repo;
|
|
}
|
|
|
|
async function configureUnwrappedUnifiedDiff(page: Page): Promise<void> {
|
|
await page.addInitScript(
|
|
({ preferencesKey }) => {
|
|
const scope = globalThis as typeof globalThis & {
|
|
__PASEO_DIFF_REACT_STATS__?: { commits: number };
|
|
};
|
|
scope.__PASEO_DIFF_REACT_STATS__ = { commits: 0 };
|
|
if (!localStorage.getItem(preferencesKey)) {
|
|
localStorage.setItem(
|
|
preferencesKey,
|
|
JSON.stringify({
|
|
layout: "unified",
|
|
viewMode: "flat",
|
|
wrapLines: false,
|
|
hideWhitespace: false,
|
|
}),
|
|
);
|
|
}
|
|
},
|
|
{ preferencesKey: CHANGES_PREFERENCES_KEY },
|
|
);
|
|
}
|
|
|
|
async function openFirstReviewEditor(page: Page): Promise<number> {
|
|
const body = page.getByTestId("diff-file-0-body");
|
|
const canvas = page.getByTestId("git-diff-canvas");
|
|
const [bodyBounds, fontSize] = await Promise.all([
|
|
body.boundingBox(),
|
|
canvas.evaluate((element) => Number.parseFloat(getComputedStyle(element).fontSize)),
|
|
]);
|
|
if (!bodyBounds) throw new Error("Expanded diff body has no bounds");
|
|
const lineHeight = Math.round(fontSize * 1.5);
|
|
const startedAt = performance.now();
|
|
await page.mouse.click(bodyBounds.x + 120, bodyBounds.y + lineHeight * 1.5);
|
|
await expect(page.getByTestId("inline-review-editor")).toBeVisible();
|
|
return performance.now() - startedAt;
|
|
}
|
|
|
|
async function expectBoundedCanvasSurfaces(page: Page): Promise<void> {
|
|
await expect(page.locator("canvas")).toHaveCount(3);
|
|
await expect(page.locator('[data-testid^="git-diff-sticky-header-"]')).toHaveCount(2);
|
|
await expect(page.locator('[data-testid^="diff-code-row-"]')).toHaveCount(0);
|
|
const elementCount = await page
|
|
.getByTestId("git-diff-canvas-root")
|
|
.evaluate((root) => root.querySelectorAll("*").length);
|
|
expect(elementCount).toBeLessThan(150);
|
|
}
|
|
|
|
async function continuouslyScrollCanvas(page: Page): Promise<{
|
|
medianFrameMs: number;
|
|
p95FrameMs: number;
|
|
maximumFrameMs: number;
|
|
slowFrames: number;
|
|
endScrollTop: number;
|
|
maximumScrollTop: number;
|
|
frameSignatures: Array<{ scrollTop: number; signature: number }>;
|
|
}> {
|
|
return page.getByTestId("git-diff-scroll").evaluate(async (element) => {
|
|
const scroll = element as HTMLElement;
|
|
const maximumScrollTop = scroll.scrollHeight - scroll.clientHeight;
|
|
scroll.scrollTop = 0;
|
|
const frameDurations: number[] = [];
|
|
const frameSignatures: Array<{ scrollTop: number; signature: number }> = [];
|
|
let previousFrame = performance.now();
|
|
|
|
for (let step = 1; step <= 90; step += 1) {
|
|
await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
|
|
const now = performance.now();
|
|
frameDurations.push(now - previousFrame);
|
|
previousFrame = now;
|
|
scroll.scrollTop = (maximumScrollTop * step) / 90;
|
|
scroll.dispatchEvent(new Event("scroll", { bubbles: false }));
|
|
if (step % 10 === 0) {
|
|
await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
|
|
const canvas = document.querySelector<HTMLCanvasElement>(
|
|
'[data-testid="git-diff-canvas"]',
|
|
)!;
|
|
frameSignatures.push({
|
|
scrollTop: scroll.scrollTop,
|
|
signature: canvasSignature(canvas, scroll),
|
|
});
|
|
previousFrame = performance.now();
|
|
}
|
|
}
|
|
await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
|
|
|
|
const ordered = [...frameDurations].sort((left, right) => left - right);
|
|
const percentile = (fraction: number) =>
|
|
ordered[Math.min(ordered.length - 1, Math.floor(ordered.length * fraction))] ?? 0;
|
|
return {
|
|
medianFrameMs: percentile(0.5),
|
|
p95FrameMs: percentile(0.95),
|
|
maximumFrameMs: Math.max(...frameDurations),
|
|
slowFrames: frameDurations.filter((duration) => duration > 50).length,
|
|
endScrollTop: scroll.scrollTop,
|
|
maximumScrollTop,
|
|
frameSignatures,
|
|
};
|
|
|
|
function canvasSignature(canvasElement: HTMLCanvasElement, scrollElement: HTMLElement): number {
|
|
const sample = document.createElement("canvas");
|
|
sample.width = 64;
|
|
sample.height = 36;
|
|
const context = sample.getContext("2d")!;
|
|
const canvasCssHeight = Number.parseFloat(canvasElement.style.height);
|
|
const canvasTop = Number.parseFloat(canvasElement.style.top);
|
|
const pixelRatio = canvasElement.height / canvasCssHeight;
|
|
const sourceY = (scrollElement.scrollTop - canvasTop) * pixelRatio;
|
|
context.drawImage(
|
|
canvasElement,
|
|
0,
|
|
sourceY,
|
|
canvasElement.width,
|
|
scrollElement.clientHeight * pixelRatio,
|
|
0,
|
|
0,
|
|
sample.width,
|
|
sample.height,
|
|
);
|
|
const pixels = context.getImageData(0, 0, sample.width, sample.height).data;
|
|
let hash = 2166136261;
|
|
for (const value of pixels) hash = Math.imul(hash ^ value, 16777619);
|
|
return hash >>> 0;
|
|
}
|
|
});
|
|
}
|
|
|
|
async function benchmarkManyFileHeaderScrolling(page: Page): Promise<{
|
|
medianFrameMs: number;
|
|
p95FrameMs: number;
|
|
maximumFrameMs: number;
|
|
maximumShells: number;
|
|
maximumStickyCanvases: number;
|
|
blankHeaderFrames: number;
|
|
endScrollTop: number;
|
|
maximumScrollTop: number;
|
|
}> {
|
|
return page.getByTestId("git-diff-scroll").evaluate(async (element) => {
|
|
const scroll = element as HTMLElement;
|
|
const maximumScrollTop = scroll.scrollHeight - scroll.clientHeight;
|
|
const frameDurations: number[] = [];
|
|
let maximumShells = 0;
|
|
let maximumStickyCanvases = 0;
|
|
let blankHeaderFrames = 0;
|
|
const sampleHeader = () => {
|
|
maximumShells = Math.max(
|
|
maximumShells,
|
|
document.querySelectorAll('[data-diff-header="true"]').length,
|
|
);
|
|
const canvases = Array.from(
|
|
document.querySelectorAll<HTMLCanvasElement>('[data-testid^="git-diff-sticky-header-"]'),
|
|
);
|
|
maximumStickyCanvases = Math.max(maximumStickyCanvases, canvases.length);
|
|
const scrollBounds = scroll.getBoundingClientRect();
|
|
const sampleX = scrollBounds.left + 4;
|
|
const sampleY = scrollBounds.top + 10;
|
|
const canvas = canvases.find((candidate) => {
|
|
const bounds = candidate.getBoundingClientRect();
|
|
return (
|
|
bounds.width > 0 &&
|
|
sampleX >= bounds.left &&
|
|
sampleX < bounds.right &&
|
|
sampleY >= bounds.top &&
|
|
sampleY < bounds.bottom
|
|
);
|
|
});
|
|
if (canvas) {
|
|
const context = canvas.getContext("2d")!;
|
|
const bounds = canvas.getBoundingClientRect();
|
|
const ratio = canvas.width / bounds.width;
|
|
if (
|
|
context.getImageData(
|
|
Math.round((sampleX - bounds.left) * ratio),
|
|
Math.round((sampleY - bounds.top) * ratio),
|
|
1,
|
|
1,
|
|
).data[3] === 0
|
|
) {
|
|
blankHeaderFrames += 1;
|
|
}
|
|
return;
|
|
}
|
|
blankHeaderFrames += 1;
|
|
};
|
|
|
|
for (const progress of [0, 0.25, 0.5, 0.75, 1]) {
|
|
const sweepStart = Math.min(
|
|
maximumScrollTop,
|
|
Math.max(0, maximumScrollTop * progress - scroll.clientHeight),
|
|
);
|
|
scroll.scrollTop = sweepStart;
|
|
scroll.dispatchEvent(new Event("scroll", { bubbles: false }));
|
|
await new Promise<void>((resolve) =>
|
|
requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
|
|
);
|
|
let previousFrame = performance.now();
|
|
for (let step = 1; step <= 24; step += 1) {
|
|
scroll.scrollTop = Math.min(
|
|
maximumScrollTop,
|
|
sweepStart + (scroll.clientHeight * step) / 24,
|
|
);
|
|
scroll.dispatchEvent(new Event("scroll", { bubbles: false }));
|
|
await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
|
|
const now = performance.now();
|
|
frameDurations.push(now - previousFrame);
|
|
previousFrame = now;
|
|
sampleHeader();
|
|
}
|
|
}
|
|
|
|
scroll.scrollTop = maximumScrollTop;
|
|
scroll.dispatchEvent(new Event("scroll", { bubbles: false }));
|
|
await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
|
|
sampleHeader();
|
|
|
|
const ordered = [...frameDurations].sort((left, right) => left - right);
|
|
const percentile = (fraction: number) =>
|
|
ordered[Math.min(ordered.length - 1, Math.floor(ordered.length * fraction))] ?? 0;
|
|
return {
|
|
medianFrameMs: percentile(0.5),
|
|
p95FrameMs: percentile(0.95),
|
|
maximumFrameMs: Math.max(...frameDurations),
|
|
maximumShells,
|
|
maximumStickyCanvases,
|
|
blankHeaderFrames,
|
|
endScrollTop: scroll.scrollTop,
|
|
maximumScrollTop,
|
|
};
|
|
});
|
|
}
|
|
|
|
interface CapturedCanvasFrame {
|
|
scrollTop: number;
|
|
image: Buffer;
|
|
}
|
|
|
|
async function captureCanvasAtScrollIntervals(page: Page): Promise<CapturedCanvasFrame[]> {
|
|
const scroll = page.getByTestId("git-diff-scroll");
|
|
const frames: CapturedCanvasFrame[] = [];
|
|
for (let step = 0; step <= 8; step += 1) {
|
|
const scrollTop = await scroll.evaluate(async (element, progress) => {
|
|
const scrollElement = element as HTMLElement;
|
|
scrollElement.scrollTop =
|
|
(scrollElement.scrollHeight - scrollElement.clientHeight) * Number(progress);
|
|
scrollElement.dispatchEvent(new Event("scroll", { bubbles: false }));
|
|
await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
|
|
return scrollElement.scrollTop;
|
|
}, step / 8);
|
|
frames.push({ scrollTop, image: await scroll.screenshot() });
|
|
}
|
|
return frames;
|
|
}
|
|
|
|
async function expectContinuousFramesMatchStableRender(
|
|
page: Page,
|
|
samples: Array<{ scrollTop: number; signature: number }>,
|
|
): Promise<void> {
|
|
const stable = await page.getByTestId("git-diff-scroll").evaluate(async (element, frames) => {
|
|
const canvas = document.querySelector<HTMLCanvasElement>('[data-testid="git-diff-canvas"]')!;
|
|
const signatures: number[] = [];
|
|
for (const frame of frames) {
|
|
element.scrollTop = frame.scrollTop;
|
|
element.dispatchEvent(new Event("scroll", { bubbles: false }));
|
|
await new Promise<void>((resolve) =>
|
|
requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
|
|
);
|
|
const sample = document.createElement("canvas");
|
|
sample.width = 64;
|
|
sample.height = 36;
|
|
const context = sample.getContext("2d")!;
|
|
drawVisibleCanvas(context, canvas, element as HTMLElement, sample.width, sample.height);
|
|
const pixels = context.getImageData(0, 0, sample.width, sample.height).data;
|
|
let hash = 2166136261;
|
|
for (const value of pixels) hash = Math.imul(hash ^ value, 16777619);
|
|
signatures.push(hash >>> 0);
|
|
}
|
|
return signatures;
|
|
|
|
function drawVisibleCanvas(
|
|
context: CanvasRenderingContext2D,
|
|
canvasElement: HTMLCanvasElement,
|
|
scroll: HTMLElement,
|
|
width: number,
|
|
height: number,
|
|
): void {
|
|
const canvasCssHeight = Number.parseFloat(canvasElement.style.height);
|
|
const canvasTop = Number.parseFloat(canvasElement.style.top);
|
|
const pixelRatio = canvasElement.height / canvasCssHeight;
|
|
const sourceY = (scroll.scrollTop - canvasTop) * pixelRatio;
|
|
context.drawImage(
|
|
canvasElement,
|
|
0,
|
|
sourceY,
|
|
canvasElement.width,
|
|
scroll.clientHeight * pixelRatio,
|
|
0,
|
|
0,
|
|
width,
|
|
height,
|
|
);
|
|
}
|
|
}, samples);
|
|
expect(stable).toEqual(samples.map((sample) => sample.signature));
|
|
}
|
|
|
|
async function expectIndependentHorizontalOffsetsSurviveVerticalScrolling(
|
|
page: Page,
|
|
): Promise<void> {
|
|
const scroller = page.getByTestId("git-diff-scroll");
|
|
const first = page.getByTestId("diff-file-0-horizontal-scroll");
|
|
const second = page.getByTestId("diff-file-1-horizontal-scroll");
|
|
await setVerticalOffset(scroller, 0);
|
|
await expect(first).toBeAttached();
|
|
const firstOffset = await setHorizontalOffset(first, 40);
|
|
await setVerticalOffset(scroller, "end");
|
|
await expect(second).toBeAttached();
|
|
const secondOffset = await setHorizontalOffset(second, 20);
|
|
expect(firstOffset).not.toBe(secondOffset);
|
|
await setVerticalOffset(scroller, 0);
|
|
await expect(first).toBeAttached();
|
|
await expect.poll(() => first.evaluate((element) => element.scrollLeft)).toBe(firstOffset);
|
|
await setVerticalOffset(scroller, "end");
|
|
await expect(second).toBeAttached();
|
|
await expect.poll(() => second.evaluate((element) => element.scrollLeft)).toBe(secondOffset);
|
|
}
|
|
|
|
async function setVerticalOffset(locator: Locator, offset: number | "end") {
|
|
await locator.evaluate(async (element, nextOffset) => {
|
|
element.scrollTop =
|
|
nextOffset === "end" ? element.scrollHeight - element.clientHeight : nextOffset;
|
|
element.dispatchEvent(new Event("scroll", { bubbles: false }));
|
|
await new Promise<void>((resolve) =>
|
|
requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
|
|
);
|
|
}, offset);
|
|
}
|
|
|
|
async function setHorizontalOffset(locator: Locator, offset: number) {
|
|
return locator.evaluate(async (element, nextOffset) => {
|
|
element.scrollLeft = nextOffset;
|
|
element.dispatchEvent(new Event("scroll", { bubbles: false }));
|
|
await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
|
|
return element.scrollLeft;
|
|
}, offset);
|
|
}
|
|
|
|
async function startRendererInstrumentation(page: Page): Promise<void> {
|
|
await page.getByTestId("git-diff-canvas-root").evaluate((root) => {
|
|
const scope = globalThis as typeof globalThis & {
|
|
__PASEO_DIFF_REACT_STATS__?: { commits: number };
|
|
__PASEO_DIFF_RENDERER_STATS__?: {
|
|
initialCommits: number;
|
|
addedElements: number;
|
|
removedElements: number;
|
|
};
|
|
};
|
|
const reactStats = scope.__PASEO_DIFF_REACT_STATS__ ?? { commits: 0, unmounts: 0 };
|
|
const stats = {
|
|
initialCommits: reactStats.commits,
|
|
addedElements: 0,
|
|
removedElements: 0,
|
|
};
|
|
scope.__PASEO_DIFF_RENDERER_STATS__ = stats;
|
|
new MutationObserver((records) => {
|
|
for (const record of records) {
|
|
stats.addedElements += Array.from(record.addedNodes).filter(
|
|
(node) => node.nodeType === Node.ELEMENT_NODE,
|
|
).length;
|
|
stats.removedElements += Array.from(record.removedNodes).filter(
|
|
(node) => node.nodeType === Node.ELEMENT_NODE,
|
|
).length;
|
|
}
|
|
}).observe(root, { childList: true, subtree: true });
|
|
});
|
|
}
|
|
|
|
async function readRendererInstrumentation(page: Page): Promise<{
|
|
reactCommits: number;
|
|
addedElements: number;
|
|
removedElements: number;
|
|
}> {
|
|
return page.evaluate(() => {
|
|
const scope = globalThis as typeof globalThis & {
|
|
__PASEO_DIFF_REACT_STATS__?: { commits: number };
|
|
__PASEO_DIFF_RENDERER_STATS__?: {
|
|
initialCommits: number;
|
|
addedElements: number;
|
|
removedElements: number;
|
|
};
|
|
};
|
|
const react = scope.__PASEO_DIFF_REACT_STATS__!;
|
|
const renderer = scope.__PASEO_DIFF_RENDERER_STATS__!;
|
|
return {
|
|
reactCommits: react.commits - renderer.initialCommits,
|
|
addedElements: renderer.addedElements,
|
|
removedElements: renderer.removedElements,
|
|
};
|
|
});
|
|
}
|
|
|
|
async function collectHeapUsage(cdp: CDPSession): Promise<{ usedSize: number; totalSize: number }> {
|
|
await cdp.send("HeapProfiler.collectGarbage");
|
|
return cdp.send("Runtime.getHeapUsage");
|
|
}
|
|
|
|
async function startChromiumTrace(cdp: CDPSession): Promise<void> {
|
|
await cdp.send("Tracing.start", {
|
|
categories: [
|
|
"devtools.timeline",
|
|
"v8.execute",
|
|
"blink.user_timing",
|
|
"disabled-by-default-v8.cpu_profiler",
|
|
].join(","),
|
|
transferMode: "ReturnAsStream",
|
|
});
|
|
}
|
|
|
|
async function stopChromiumTrace(cdp: CDPSession, testInfo: TestInfo): Promise<void> {
|
|
const completed = new Promise<string>((resolve, reject) => {
|
|
cdp.once("Tracing.tracingComplete", ({ stream }) => {
|
|
if (stream) resolve(stream);
|
|
else reject(new Error("Chromium trace completed without a stream"));
|
|
});
|
|
});
|
|
await cdp.send("Tracing.end");
|
|
const stream = await completed;
|
|
const chunks: string[] = [];
|
|
let eof = false;
|
|
while (!eof) {
|
|
const chunk = await cdp.send("IO.read", { handle: stream });
|
|
chunks.push(chunk.data);
|
|
eof = chunk.eof;
|
|
}
|
|
await cdp.send("IO.close", { handle: stream });
|
|
const trace = chunks.join("");
|
|
await writeFile(testInfo.outputPath("diff-canvas-chromium-trace.json"), trace);
|
|
await testInfo.attach("diff-canvas-chromium-trace", {
|
|
body: trace,
|
|
contentType: "application/json",
|
|
});
|
|
}
|
|
|
|
async function attachPerformanceReport(
|
|
testInfo: TestInfo,
|
|
report: Record<string, unknown>,
|
|
): Promise<void> {
|
|
await testInfo.attach("diff-canvas-performance", {
|
|
body: JSON.stringify(report, null, 2),
|
|
contentType: "application/json",
|
|
});
|
|
}
|