From 148bb27f6964ee50c3575feba2e377a7fc28b185 Mon Sep 17 00:00:00 2001 From: Simon Knott Date: Tue, 10 Feb 2026 10:33:49 +0100 Subject: [PATCH] fix(trace): respect dark mode in blank snapshot --- .../src/utils/isomorphic/trace/snapshotRenderer.ts | 4 +++- packages/trace-viewer/src/ui/snapshotTab.css | 2 +- packages/trace-viewer/src/ui/snapshotTab.tsx | 4 ++-- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/playwright-core/src/utils/isomorphic/trace/snapshotRenderer.ts b/packages/playwright-core/src/utils/isomorphic/trace/snapshotRenderer.ts index b55e75bb9f34a..6dbf28e9fcd19 100644 --- a/packages/playwright-core/src/utils/isomorphic/trace/snapshotRenderer.ts +++ b/packages/playwright-core/src/utils/isomorphic/trace/snapshotRenderer.ts @@ -345,7 +345,7 @@ function snapshotScript(viewport: ViewportSize, ...targetIds: (string | undefine frameBoundingRectsInfo.frames.set(iframe, { boundingRect, scrollLeft: 0, scrollTop: 0 }); const src = iframe.getAttribute('__playwright_src__'); if (!src) { - iframe.setAttribute('src', 'data:text/html,'); + iframe.setAttribute('src', blankSnapshotUrl); } else { // Retain query parameters to inherit name=, time=, pointX=, pointY= and other values from parent. const url = new URL(win.location.href); @@ -639,3 +639,5 @@ function escapeURLsInStyleSheet(text: string): string { }; return text.replace(urlToEscapeRegex1, replacer).replace(urlToEscapeRegex2, replacer); } + +export const blankSnapshotUrl = 'data:text/html;base64,' + btoa(``); diff --git a/packages/trace-viewer/src/ui/snapshotTab.css b/packages/trace-viewer/src/ui/snapshotTab.css index b96263a82e879..5265f4f5f152e 100644 --- a/packages/trace-viewer/src/ui/snapshotTab.css +++ b/packages/trace-viewer/src/ui/snapshotTab.css @@ -97,7 +97,7 @@ iframe[name=snapshot] { width: 100%; height: 100%; border: none; - background: white; + background: light-dark(white, #333); visibility: hidden; } diff --git a/packages/trace-viewer/src/ui/snapshotTab.tsx b/packages/trace-viewer/src/ui/snapshotTab.tsx index 9064ee396d153..fd8277e757787 100644 --- a/packages/trace-viewer/src/ui/snapshotTab.tsx +++ b/packages/trace-viewer/src/ui/snapshotTab.tsx @@ -25,6 +25,7 @@ import { clsx, useMeasure, useSetting } from '@web/uiUtils'; import { InjectedScript } from '@injected/injectedScript'; import { Recorder } from '@injected/recorder/recorder'; import { asLocator } from '@isomorphic/locatorGenerators'; +import { blankSnapshotUrl } from '@isomorphic/trace/snapshotRenderer'; import type { Language } from '@isomorphic/locatorGenerators'; import { locatorOrSelectorAsSelector } from '@isomorphic/locatorParser'; import { TabbedPaneTab } from '@web/components/tabbedPane'; @@ -133,7 +134,7 @@ export const SnapshotView: React.FunctionComponent<{ iframe.addEventListener('error', loadedCallback); // Try preventing history entry from being created. - const snapshotUrl = snapshotUrls?.snapshotUrl || kBlankSnapshotUrl; + const snapshotUrl = snapshotUrls?.snapshotUrl || blankSnapshotUrl; if (iframe.contentWindow) iframe.contentWindow.location.replace(snapshotUrl); else @@ -457,4 +458,3 @@ export async function fetchSnapshotInfo(snapshotInfoUrl: string | undefined) { } export const kDefaultViewport = { width: 1280, height: 720 }; -const kBlankSnapshotUrl = 'data:text/html,';