fix(trace viewer): Screenshot click target placement

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

@@ -23,7 +23,8 @@ export function ClickPointer({ point }: { point: { x: number; y: number } }) {
         width: '20px',
         height: '20px',
         borderRadius: '10px',
-        margin: '-10px 0 0 -10px',
+        marginTop: 'var(--browser-frame-header-height)',
+        transform: 'translate(-50%, -50%)',
         zIndex: 2147483646,
         display: 'flex',
         alignItems: 'center',

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

@@ -20,7 +20,7 @@ import type { ActionTraceEvent } from '@trace/trace';
 import { context, type MultiTraceModel, pageForAction, prevInList } from './modelUtil';
 import { Toolbar } from '@web/components/toolbar';
 import { ToolbarButton } from '@web/components/toolbarButton';
-import { clsx, useMeasure } from '@web/uiUtils';
+import { clsx, useMeasure, useSetting } from '@web/uiUtils';
 import { InjectedScript } from '@injected/injectedScript';
 import { Recorder } from '@injected/recorder/recorder';
 import ConsoleAPI from '@injected/consoleApi';
@@ -52,7 +52,7 @@ export const SnapshotTabsView: React.FunctionComponent<{
   openPage?: (url: string, target?: string) => Window | any,
 }> = ({ action, sdkLanguage, testIdAttributeName, isInspecting, setIsInspecting, highlightedLocator, setHighlightedLocator, openPage }) => {
   const [snapshotTab, setSnapshotTab] = React.useState<'action'|'before'|'after'>('action');
-  const showScreenshotInsteadOfSnapshot = false;
+  const [showScreenshotInsteadOfSnapshot] = useSetting('screenshot-instead-of-snapshot', false);
 
   const snapshots = React.useMemo(() => {
     return collectSnapshots(action);

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

@@ -105,6 +105,8 @@ export const UIModeView: React.FC<{}> = ({
   const [showBrowser, setShowBrowser] = React.useState(false);
   const [updateSnapshots, setUpdateSnapshots] = React.useState(false);
   const [darkMode, setDarkMode] = useDarkModeSetting();
+  const [showScreenshot, setShowScreenshot] = useSetting('screenshot-instead-of-snapshot', false);
+
 
   const inputRef = React.useRef<HTMLInputElement>(null);
 
@@ -520,6 +522,7 @@ export const UIModeView: React.FC<{}> = ({
         </Toolbar>
         {settingsVisible && <SettingsView settings={[
           { value: darkMode, set: setDarkMode, title: 'Dark mode' },
+          { value: showScreenshot, set: setShowScreenshot, title: 'Show screenshot instead of snapshot' },
         ]} />}
       </div>
       }

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

@@ -41,6 +41,7 @@ import type { Entry } from '@trace/har';
 import './workbench.css';
 import { testStatusIcon, testStatusText } from './testUtils';
 import type { UITestStatus } from './testUtils';
+import { SettingsView } from './settingsView';
 
 export const Workbench: React.FunctionComponent<{
   model?: modelUtil.MultiTraceModel,
@@ -68,7 +69,7 @@ export const Workbench: React.FunctionComponent<{
   const [highlightedLocator, setHighlightedLocator] = React.useState<string>('');
   const [selectedTime, setSelectedTime] = React.useState<Boundaries | undefined>();
   const [sidebarLocation, setSidebarLocation] = useSetting<'bottom' | 'right'>('propertiesSidebarLocation', 'bottom');
-  const showScreenshot = false;
+  const [showScreenshot, setShowScreenshot] = useSetting('screenshot-instead-of-snapshot', false);
 
   const setSelectedAction = React.useCallback((action: modelUtil.ActionTraceEventInContext | undefined) => {
     setSelectedCallId(action?.callId);
@@ -309,6 +310,13 @@ export const Workbench: React.FunctionComponent<{
     title: 'Metadata',
     component: <MetadataView model={model}/>
   };
+  const settingsTab: TabbedPaneTabModel = {
+    id: 'settings',
+    title: 'Settings',
+    component: <SettingsView settings={[
+      { value: showScreenshot, set: setShowScreenshot, title: 'Show screenshot instead of snapshot' }
+    ]}/>,
+  };
 
   return <div className='vbox workbench' {...(inert ? { inert: 'true' } : {})}>
     {!hideTimeline && <Timeline
@@ -343,7 +351,7 @@ export const Workbench: React.FunctionComponent<{
           openPage={openPage} />}
         sidebar={
           <TabbedPane
-            tabs={[actionsTab, metadataTab]}
+            tabs={showSettings ? [actionsTab, metadataTab, settingsTab] : [actionsTab, metadataTab]}
             selectedTab={selectedNavigatorTab}
             setSelectedTab={setSelectedNavigatorTab}
           />

tests/library/trace-viewer.spec.ts

@@ -1421,7 +1421,7 @@ test('should serve css without content-type', async ({ page, runAndTrace, server
   await expect(snapshotFrame.locator('body')).toHaveCSS('background-color', 'rgb(255, 0, 0)', { timeout: 0 });
 });
 
-test.skip('should allow showing screenshots instead of snapshots', async ({ runAndTrace, page, server }) => {
+test('should allow showing screenshots instead of snapshots', async ({ runAndTrace, page, server }) => {
   const traceViewer = await runAndTrace(async () => {
     await page.goto(server.PREFIX + '/one-style.html');
     await page.waitForTimeout(1000); // ensure we could take a screenshot
@@ -1439,7 +1439,7 @@ test.skip('should allow showing screenshots instead of snapshots', async ({ runA
   await expect(screenshot).toBeVisible();
 });
 
-test.skip('should handle case where neither snapshots nor screenshots exist', async ({ runAndTrace, page, server }) => {
+test('should handle case where neither snapshots nor screenshots exist', async ({ runAndTrace, page, server }) => {
   const traceViewer = await runAndTrace(async () => {
     await page.goto(server.PREFIX + '/one-style.html');
   }, { snapshots: false, screenshots: false });