chore: move some trace utilities from sw to isomorphic

dgozman · dgozman · commit 4fa85082c1f6 · 2025-12-01T09:48:19.000Z
diff --git a/packages/playwright-core/src/server/trace/test/inMemorySnapshotter.ts b/packages/playwright-core/src/server/trace/test/inMemorySnapshotter.ts
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import { SnapshotStorage } from '../../../../../trace-viewer/src/sw/snapshotStorage';
+import { SnapshotStorage } from '../../../utils/isomorphic/trace/snapshotStorage';
 import { ManualPromise } from '../../../utils';
 import { HarTracer } from '../../har/harTracer';
 import { Snapshotter } from '../recorder/snapshotter';
 
-import type { SnapshotRenderer } from '../../../../../trace-viewer/src/sw/snapshotRenderer';
+import type { SnapshotRenderer } from '../../../utils/isomorphic/trace/snapshotRenderer';
 import type { BrowserContext } from '../../browserContext';
 import type { HarTracerDelegate } from '../../har/harTracer';
 import type { Page } from '../../page';
diff --git a/packages/playwright-core/src/utils/isomorphic/lruCache.ts b/packages/playwright-core/src/utils/isomorphic/lruCache.ts
diff --git a/packages/playwright-core/src/utils/isomorphic/trace/DEPS.list b/packages/playwright-core/src/utils/isomorphic/trace/DEPS.list
@@ -0,0 +1,3 @@
+[*]
+./**
+../**
diff --git a/packages/playwright-core/src/utils/isomorphic/trace/entries.ts b/packages/playwright-core/src/utils/isomorphic/trace/entries.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { Language } from '../../../playwright-core/src/utils/isomorphic/locatorGenerators';
+import type { Language } from '../locatorGenerators';
 import type { ResourceSnapshot } from '@trace/snapshot';
 import type * as trace from '@trace/trace';
 
diff --git a/packages/playwright-core/src/utils/isomorphic/trace/snapshotRenderer.ts b/packages/playwright-core/src/utils/isomorphic/trace/snapshotRenderer.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { escapeHTMLAttribute, escapeHTML } from '@isomorphic/stringUtils';
+import { escapeHTMLAttribute, escapeHTML } from '../stringUtils';
 
 import type { FrameSnapshot, NodeNameAttributesChildNodesSnapshot, NodeSnapshot, RenderedFrameSnapshot, ResourceSnapshot, SubtreeReferenceSnapshot } from '@trace/snapshot';
-import type { PageEntry } from '../types/entries';
-import type { LRUCache } from './lruCache';
+import type { PageEntry } from './entries';
+import type { LRUCache } from '../lruCache';
 
 function findClosest<T>(items: T[], metric: (v: T) => number, target: number) {
   return items.find((item, index) => {
@@ -256,7 +256,9 @@ declare global {
 
 function snapshotScript(viewport: ViewportSize, ...targetIds: (string | undefined)[]) {
   function applyPlaywrightAttributes(viewport: ViewportSize, ...targetIds: (string | undefined)[]) {
-    const searchParams = new URLSearchParams(location.search);
+    // eslint-disable-next-line no-restricted-globals
+    const win = window;
+    const searchParams = new URLSearchParams(win.location.search);
     const shouldPopulateCanvasFromScreenshot = searchParams.has('shouldPopulateCanvasFromScreenshot');
     const isUnderTest = searchParams.has('isUnderTest');
 
@@ -270,7 +272,7 @@ function snapshotScript(viewport: ViewportSize, ...targetIds: (string | undefine
       viewport,
       frames: new WeakMap(),
     };
-    window['__playwright_frame_bounding_rects__'] = frameBoundingRectsInfo;
+    win['__playwright_frame_bounding_rects__'] = frameBoundingRectsInfo;
 
     const kPointerWarningTitle = 'Recorded click position in absolute coordinates did not' +
         ' match the center of the clicked element. This is likely due to a difference between' +
@@ -281,7 +283,7 @@ function snapshotScript(viewport: ViewportSize, ...targetIds: (string | undefine
     const targetElements: Element[] = [];
     const canvasElements: HTMLCanvasElement[] = [];
 
-    let topSnapshotWindow: Window = window;
+    let topSnapshotWindow: Window = win;
     while (topSnapshotWindow !== topSnapshotWindow.parent && !topSnapshotWindow.location.pathname.match(/\/page@[a-z0-9]+$/))
       topSnapshotWindow = topSnapshotWindow.parent;
 
@@ -344,7 +346,7 @@ function snapshotScript(viewport: ViewportSize, ...targetIds: (string | undefine
           iframe.setAttribute('src', 'data:text/html,<body style="background: #ddd"></body>');
         } else {
           // Retain query parameters to inherit name=, time=, pointX=, pointY= and other values from parent.
-          const url = new URL(window.location.href);
+          const url = new URL(win.location.href);
           // We can be loading iframe from within iframe, reset base to be absolute.
           const index = url.pathname.lastIndexOf('/snapshot/');
           if (index !== -1)
@@ -356,10 +358,10 @@ function snapshotScript(viewport: ViewportSize, ...targetIds: (string | undefine
 
       {
         const body = root.querySelector(`body[__playwright_custom_elements__]`);
-        if (body && window.customElements) {
+        if (body && win.customElements) {
           const customElements = (body.getAttribute('__playwright_custom_elements__') || '').split(',');
           for (const elementName of customElements)
-            window.customElements.define(elementName, class extends HTMLElement {});
+            win.customElements.define(elementName, class extends HTMLElement {});
         }
       }
 
@@ -391,7 +393,7 @@ function snapshotScript(viewport: ViewportSize, ...targetIds: (string | undefine
     };
 
     const onLoad = () => {
-      window.removeEventListener('load', onLoad);
+      win.removeEventListener('load', onLoad);
       for (const element of scrollTops) {
         element.scrollTop = +element.getAttribute('__playwright_scroll_top_')!;
         element.removeAttribute('__playwright_scroll_top_');
@@ -405,19 +407,19 @@ function snapshotScript(viewport: ViewportSize, ...targetIds: (string | undefine
           frameBoundingRectsInfo.frames.get(element)!.scrollLeft = element.scrollTop;
       }
 
-      document.styleSheets[0].disabled = true;
+      win.document.styleSheets[0].disabled = true;
 
-      const search = new URL(window.location.href).searchParams;
-      const isTopFrame = window === topSnapshotWindow;
+      const search = new URL(win.location.href).searchParams;
+      const isTopFrame = win === topSnapshotWindow;
 
       if (search.get('pointX') && search.get('pointY')) {
         const pointX = +search.get('pointX')!;
         const pointY = +search.get('pointY')!;
         const hasInputTarget = search.has('hasInputTarget');
         const hasTargetElements = targetElements.length > 0;
-        const roots = document.documentElement ? [document.documentElement] : [];
+        const roots = win.document.documentElement ? [win.document.documentElement] : [];
         for (const target of (hasTargetElements ? targetElements : roots)) {
-          const pointElement = document.createElement('x-pw-pointer');
+          const pointElement = win.document.createElement('x-pw-pointer');
           pointElement.style.position = 'fixed';
           pointElement.style.backgroundColor = '#f44336';
           pointElement.style.width = '20px';
@@ -440,7 +442,7 @@ function snapshotScript(viewport: ViewportSize, ...targetIds: (string | undefine
             // "Warning symbol" indicates that action point is not 100% correct.
             // Note that action point is relative to the top frame, so we can only compare in the top frame.
             if (isTopFrame && (Math.abs(centerX - pointX) >= 10 || Math.abs(centerY - pointY) >= 10)) {
-              const warningElement = document.createElement('x-pw-pointer-warning');
+              const warningElement = win.document.createElement('x-pw-pointer-warning');
               warningElement.textContent = '⚠';
               warningElement.style.fontSize = '19px';
               warningElement.style.color = 'white';
@@ -449,21 +451,21 @@ function snapshotScript(viewport: ViewportSize, ...targetIds: (string | undefine
               pointElement.appendChild(warningElement);
               pointElement.setAttribute('title', kPointerWarningTitle);
             }
-            document.documentElement.appendChild(pointElement);
+            win.document.documentElement.appendChild(pointElement);
           } else if (isTopFrame && !hasInputTarget) {
             // For actions without a target element, e.g. page.mouse.move(),
             // show the point at the recorded location, which is relative to the top frame.
             pointElement.style.left = pointX + 'px';
             pointElement.style.top = pointY + 'px';
-            document.documentElement.appendChild(pointElement);
+            win.document.documentElement.appendChild(pointElement);
           }
         }
       }
 
       if (canvasElements.length > 0) {
         function drawCheckerboard(context: CanvasRenderingContext2D, canvas: HTMLCanvasElement) {
           function createCheckerboardPattern() {
-            const pattern = document.createElement('canvas');
+            const pattern = win.document.createElement('canvas');
             pattern.width = pattern.width / Math.floor(pattern.width / 24);
             pattern.height = pattern.height / Math.floor(pattern.height / 24);
             const context = pattern.getContext('2d')!;
@@ -496,7 +498,7 @@ function snapshotScript(viewport: ViewportSize, ...targetIds: (string | undefine
               continue;
             }
 
-            let currWindow: Window = window;
+            let currWindow: Window = win;
             while (currWindow !== topSnapshotWindow) {
               const iframe = currWindow.frameElement!;
               currWindow = currWindow.parent;
@@ -557,10 +559,10 @@ function snapshotScript(viewport: ViewportSize, ...targetIds: (string | undefine
       }
     };
 
-    const onDOMContentLoaded = () => visit(document);
+    const onDOMContentLoaded = () => visit(win.document);
 
-    window.addEventListener('load', onLoad);
-    window.addEventListener('DOMContentLoaded', onDOMContentLoaded);
+    win.addEventListener('load', onLoad);
+    win.addEventListener('DOMContentLoaded', onDOMContentLoaded);
   }
 
   return `\n(${applyPlaywrightAttributes.toString()})(${JSON.stringify(viewport)}${targetIds.map(id => `, "${id}"`).join('')})`;
diff --git a/packages/playwright-core/src/utils/isomorphic/trace/snapshotServer.ts b/packages/playwright-core/src/utils/isomorphic/trace/snapshotServer.ts
diff --git a/packages/playwright-core/src/utils/isomorphic/trace/snapshotStorage.ts b/packages/playwright-core/src/utils/isomorphic/trace/snapshotStorage.ts
@@ -15,10 +15,10 @@
  */
 
 import { rewriteURLForCustomProtocol, SnapshotRenderer } from './snapshotRenderer';
-import { LRUCache } from './lruCache';
+import { LRUCache } from '../lruCache';
 
 import type { FrameSnapshot, ResourceSnapshot } from '@trace/snapshot';
-import type { PageEntry } from '../types/entries';
+import type { PageEntry } from './entries';
 
 
 export class SnapshotStorage {
diff --git a/packages/playwright-core/src/utils/isomorphic/trace/traceModel.ts b/packages/playwright-core/src/utils/isomorphic/trace/traceModel.ts
@@ -19,7 +19,7 @@ import { parseClientSideCallMetadata } from '@isomorphic/traceUtils';
 import { SnapshotStorage } from './snapshotStorage';
 import { TraceModernizer } from './traceModernizer';
 
-import type { ContextEntry } from '../types/entries';
+import type { ContextEntry } from './entries';
 
 export interface TraceModelBackend {
   entryNames(): Promise<string[]>;
diff --git a/packages/playwright-core/src/utils/isomorphic/trace/traceModernizer.ts b/packages/playwright-core/src/utils/isomorphic/trace/traceModernizer.ts
@@ -21,7 +21,7 @@ import type * as traceV5 from './versions/traceV5';
 import type * as traceV6 from './versions/traceV6';
 import type * as traceV7 from './versions/traceV7';
 import type * as traceV8 from './versions/traceV8';
-import type { ActionEntry, ContextEntry, PageEntry } from '../types/entries';
+import type { ActionEntry, ContextEntry, PageEntry } from './entries';
 import type { SnapshotStorage } from './snapshotStorage';
 
 export class TraceVersionError extends Error {
@@ -299,6 +299,7 @@ export class TraceModernizer {
       class: metadata.type,
       method: metadata.method,
       params: metadata.params,
+      // eslint-disable-next-line no-restricted-globals
       wallTime: metadata.wallTime || Date.now(),
       log: metadata.log,
       beforeSnapshot: metadata.snapshots.find(s => s.title === 'before')?.snapshotName,
diff --git a/packages/playwright-core/src/utils/isomorphic/trace/versions/traceV3.ts b/packages/playwright-core/src/utils/isomorphic/trace/versions/traceV3.ts
diff --git a/packages/playwright-core/src/utils/isomorphic/trace/versions/traceV4.ts b/packages/playwright-core/src/utils/isomorphic/trace/versions/traceV4.ts
diff --git a/packages/playwright-core/src/utils/isomorphic/trace/versions/traceV5.ts b/packages/playwright-core/src/utils/isomorphic/trace/versions/traceV5.ts
diff --git a/packages/playwright-core/src/utils/isomorphic/trace/versions/traceV6.ts b/packages/playwright-core/src/utils/isomorphic/trace/versions/traceV6.ts
diff --git a/packages/playwright-core/src/utils/isomorphic/trace/versions/traceV7.ts b/packages/playwright-core/src/utils/isomorphic/trace/versions/traceV7.ts
diff --git a/packages/playwright-core/src/utils/isomorphic/trace/versions/traceV8.ts b/packages/playwright-core/src/utils/isomorphic/trace/versions/traceV8.ts
diff --git a/packages/trace-viewer/src/sw/main.ts b/packages/trace-viewer/src/sw/main.ts
@@ -14,11 +14,12 @@
  * limitations under the License.
  */
 
+import { SnapshotServer } from '@isomorphic/trace/snapshotServer';
+import { TraceModel } from '@isomorphic/trace/traceModel';
+import { TraceVersionError } from '@isomorphic/trace/traceModernizer';
+
 import { Progress, splitProgress } from './progress';
-import { SnapshotServer } from './snapshotServer';
-import { TraceModel } from './traceModel';
 import { FetchTraceModelBackend, traceFileURL, ZipTraceModelBackend } from './traceModelBackends';
-import { TraceVersionError } from './traceModernizer';
 
 type Client = {
   id: string;
diff --git a/packages/trace-viewer/src/sw/traceModelBackends.ts b/packages/trace-viewer/src/sw/traceModelBackends.ts
@@ -17,7 +17,7 @@
 import * as zipImport from '@zip.js/zip.js/lib/zip-no-worker-inflate.js';
 
 import type * as zip from '@zip.js/zip.js';
-import type { TraceModelBackend } from './traceModel';
+import type { TraceModelBackend } from '@isomorphic/trace/traceModel';
 
 const zipjs = zipImport as typeof zip;
 
diff --git a/packages/trace-viewer/src/ui/filmStrip.tsx b/packages/trace-viewer/src/ui/filmStrip.tsx
@@ -18,7 +18,7 @@ import './filmStrip.css';
 import type { Boundaries, Size } from './geometry';
 import * as React from 'react';
 import { useMeasure, upperBound } from '@web/uiUtils';
-import type { PageEntry } from '../types/entries';
+import type { PageEntry } from '@isomorphic/trace/entries';
 import type { ActionTraceEventInContext } from './modelUtil';
 import { renderAction } from './actionList';
 import type { Language } from '@isomorphic/locatorGenerators';
diff --git a/packages/trace-viewer/src/ui/liveWorkbenchLoader.tsx b/packages/trace-viewer/src/ui/liveWorkbenchLoader.tsx
@@ -19,7 +19,7 @@ import { MultiTraceModel } from './modelUtil';
 import './workbenchLoader.css';
 import { Workbench } from './workbench';
 
-import type { ContextEntry } from '../types/entries';
+import type { ContextEntry } from '@isomorphic/trace/entries';
 
 export const LiveWorkbenchLoader: React.FC<{ traceJson: string }> = ({ traceJson }) => {
   const [model, setModel] = React.useState<MultiTraceModel | undefined>(undefined);
diff --git a/packages/trace-viewer/src/ui/modelUtil.ts b/packages/trace-viewer/src/ui/modelUtil.ts
@@ -20,7 +20,7 @@ import type { Language } from '@isomorphic/locatorGenerators';
 import type { ResourceSnapshot } from '@trace/snapshot';
 import type * as trace from '@trace/trace';
 import type { ActionTraceEvent } from '@trace/trace';
-import type { ActionEntry, ContextEntry, PageEntry } from '../types/entries';
+import type { ActionEntry, ContextEntry, PageEntry } from '@isomorphic/trace/entries';
 import type { StackFrame } from '@protocol/channels';
 import type { ActionGroup } from '@isomorphic/protocolFormatter';
 
diff --git a/packages/trace-viewer/src/ui/networkTab.tsx b/packages/trace-viewer/src/ui/networkTab.tsx
@@ -24,7 +24,7 @@ import { PlaceholderPanel } from './placeholderPanel';
 import { context, type MultiTraceModel } from './modelUtil';
 import { GridView, type RenderedGridCell } from '@web/components/gridView';
 import { SplitView } from '@web/components/splitView';
-import type { ContextEntry } from '../types/entries';
+import type { ContextEntry } from '@isomorphic/trace/entries';
 import { NetworkFilters, defaultFilterState, type FilterState, type ResourceType } from './networkFilters';
 import type { Language } from '@isomorphic/locatorGenerators';
 
diff --git a/packages/trace-viewer/src/ui/uiModeTraceView.tsx b/packages/trace-viewer/src/ui/uiModeTraceView.tsx
@@ -20,7 +20,7 @@ import '@web/common.css';
 import '@web/third_party/vscode/codicon.css';
 import type * as reporterTypes from 'playwright/types/testReporter';
 import React from 'react';
-import type { ContextEntry } from '../types/entries';
+import type { ContextEntry } from '@isomorphic/trace/entries';
 import type { SourceLocation } from './modelUtil';
 import { MultiTraceModel } from './modelUtil';
 import { Workbench } from './workbench';
diff --git a/packages/trace/src/trace.ts b/packages/trace/src/trace.ts
@@ -15,7 +15,7 @@
  */
 
 import type { FrameSnapshot, ResourceSnapshot } from './snapshot';
-import type { Language } from '../../playwright-core/src/utils/isomorphic/locatorGenerators';
+import type { Language } from '@isomorphic/locatorGenerators';
 import type { Point, SerializedError, StackFrame } from '@protocol/channels';
 
 export type Size = { width: number, height: number };
diff --git a/tests/config/utils.ts b/tests/config/utils.ts
@@ -16,10 +16,10 @@
 
 import type { Frame, Page } from 'playwright-core';
 import { ZipFile } from '../../packages/playwright-core/lib/server/utils/zipFile';
-import type { TraceModelBackend } from '../../packages/trace-viewer/src/sw/traceModel';
+import type { TraceModelBackend } from '../../packages/playwright-core/src/utils/isomorphic/trace/traceModel';
 import type { StackFrame } from '../../packages/protocol/src/channels';
 import { parseClientSideCallMetadata } from '../../packages/playwright-core/lib/utils/isomorphic/traceUtils';
-import { TraceModel } from '../../packages/trace-viewer/src/sw/traceModel';
+import { TraceModel } from '../../packages/playwright-core/src/utils/isomorphic/trace/traceModel';
 import type { ActionTreeItem } from '../../packages/trace-viewer/src/ui/modelUtil';
 import { buildActionTree, MultiTraceModel } from '../../packages/trace-viewer/src/ui/modelUtil';
 import type { ActionTraceEvent, ConsoleMessageTraceEvent, EventTraceEvent, TraceEvent } from '@trace/trace';
