chore: reuse image diff component in trace/html

pavelfeldman · Dec 20, 2023 · 147c528 · 147c528
1 parent b33a04b
commit 147c528
Show file tree

Hide file tree

Showing 12 changed files with 212 additions and 511 deletions.
diff --git a/packages/html-reporter/src/imageDiffView.css b/packages/html-reporter/src/imageDiffView.css
diff --git a/packages/html-reporter/src/imageDiffView.tsx b/packages/html-reporter/src/imageDiffView.tsx
diff --git a/packages/html-reporter/src/testResultView.css b/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;

diff --git a/packages/html-reporter/src/testResultView.tsx b/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>}

diff --git a/packages/trace-viewer/src/ui/attachmentsTab.tsx b/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) } },

diff --git a/packages/trace-viewer/src/ui/timeline.tsx b/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';

diff --git a/packages/web/src/components/imageDiffView.css b/packages/web/src/components/imageDiffView.css