chore: reuse image diff component in trace/html

packages/html-reporter/playwright.config.ts

@@ -15,6 +15,7 @@
  */
 
 import { devices, defineConfig } from '@playwright/experimental-ct-react';
+import path from 'path';
 
 export default defineConfig({
   testDir: 'src',
@@ -24,6 +25,13 @@ export default defineConfig({
   reporter: process.env.CI ? 'blob' : 'html',
   use: {
     ctPort: 3101,
+    ctViteConfig: {
+      resolve: {
+        alias: {
+          '@web': path.resolve(__dirname, '../web/src'),
+        },
+      }
+    },
     trace: 'on-first-retry',
   },
   projects: [{

packages/html-reporter/src/testResultView.css

@@ -26,7 +26,7 @@
 }
 
 .test-result video,
-.test-result img {
+.test-result img.screenshot {
   flex: none;
   box-shadow: var(--box-shadow-thick);
   margin: 24px auto;

packages/html-reporter/src/testResultView.tsx

@@ -22,8 +22,8 @@ import { AutoChip } from './chip';
 import { traceImage } from './images';
 import { AttachmentLink, generateTraceUrl } from './links';
 import { statusIcon } from './statusIcon';
-import type { ImageDiff } from './imageDiffView';
-import { ImageDiffView } from './imageDiffView';
+import type { ImageDiff } from '@web/shared/imageDiffView';
+import { ImageDiffView } from '@web/shared/imageDiffView';
 import { TestErrorView } from './testErrorView';
 import './testResultView.css';
 
@@ -102,15 +102,15 @@ export const TestResultView: React.FC<{
 
     {diffs.map((diff, index) =>
       <AutoChip key={`diff-${index}`} header={`Image mismatch: ${diff.name}`} targetRef={imageDiffRef}>
-        <ImageDiffView key='image-diff' imageDiff={diff}></ImageDiffView>
+        <ImageDiffView key='image-diff' diff={diff}></ImageDiffView>
       </AutoChip>
     )}
 
     {!!screenshots.length && <AutoChip header='Screenshots'>
       {screenshots.map((a, i) => {
         return <div key={`screenshot-${i}`}>
           <a href={a.path}>
-            <img src={a.path} />
+            <img className='screenshot' src={a.path} />
           </a>
           <AttachmentLink attachment={a}></AttachmentLink>
         </div>;
@@ -120,7 +120,7 @@ export const TestResultView: React.FC<{
     {!!traces.length && <AutoChip header='Traces'>
       {<div>
         <a href={generateTraceUrl(traces)}>
-          <img src={traceImage} style={{ width: 192, height: 117, marginLeft: 20 }} />
+          <img className='screenshot' src={traceImage} style={{ width: 192, height: 117, marginLeft: 20 }} />
         </a>
         {traces.map((a, i) => <AttachmentLink key={`trace-${i}`} attachment={a} linkName={traces.length === 1 ? 'trace' : `trace-${i + 1}`}></AttachmentLink>)}
       </div>}

packages/trace-viewer/src/ui/attachmentsTab.tsx

@@ -16,7 +16,7 @@
 
 import * as React from 'react';
 import './attachmentsTab.css';
-import { ImageDiffView } from '@web/components/imageDiffView';
+import { ImageDiffView } from '@web/shared/imageDiffView';
 import type { MultiTraceModel } from './modelUtil';
 import { PlaceholderPanel } from './placeholderPanel';
 import type { AfterActionTraceEventAttachment } from '@trace/trace';
@@ -63,7 +63,7 @@ export const AttachmentsTab: React.FunctionComponent<{
     {[...diffMap.values()].map(({ expected, actual, diff }) => {
       return <>
         {expected && actual && <div className='attachments-section'>Image diff</div>}
-        {expected && actual && <ImageDiffView imageDiff={{
+        {expected && actual && <ImageDiffView diff={{
           name: 'Image diff',
           expected: { attachment: { ...expected, path: attachmentURL(expected) }, title: 'Expected' },
           actual: { attachment: { ...actual, path: attachmentURL(actual) } },

packages/trace-viewer/src/ui/timeline.tsx

@@ -15,7 +15,7 @@
  */
 
 import { msToString, useMeasure } from '@web/uiUtils';
-import { GlassPane } from '@web/components/glassPane';
+import { GlassPane } from '@web/shared/glassPane';
 import * as React from 'react';
 import type { Boundaries } from '../geometry';
 import { FilmStrip } from './filmStrip';