From a581a6b13312c4f7ab70700e5f552fc657a7e232 Mon Sep 17 00:00:00 2001
From: Adam Gastineau <adam@agg.im>
Date: Fri, 13 Dec 2024 08:12:58 -0800
Subject: [PATCH] Update recorderView to disable canvas screenshots

---
 packages/trace-viewer/src/sw/snapshotRenderer.ts            | 2 +-
 packages/trace-viewer/src/ui/recorder/recorderView.tsx      | 3 ++-
 .../ui/{settingsToolbar.tsx => settingsToolbarButton.tsx}   | 4 ++--
 packages/trace-viewer/src/ui/workbenchLoader.tsx            | 6 ++----
 4 files changed, 7 insertions(+), 8 deletions(-)
 rename packages/trace-viewer/src/ui/{settingsToolbar.tsx => settingsToolbarButton.tsx} (94%)

diff --git a/packages/trace-viewer/src/sw/snapshotRenderer.ts b/packages/trace-viewer/src/sw/snapshotRenderer.ts
index df340af2e4..08e994ea6d 100644
--- a/packages/trace-viewer/src/sw/snapshotRenderer.ts
+++ b/packages/trace-viewer/src/sw/snapshotRenderer.ts
@@ -463,7 +463,7 @@ function snapshotScript(...targetIds: (string | undefined)[]) {
               if (partiallyUncaptured)
                 canvas.title = `Playwright couldn't capture full canvas contents because it's located partially outside the viewport.`;
               else
-                canvas.title = `Canvas contents are displayed on a best-effort basis based on viewport screenshots taken during test execution.`;  
+                canvas.title = `Canvas contents are displayed on a best-effort basis based on viewport screenshots taken during test execution.`;
             } else {
               canvas.title = 'Canvas content display is disabled.';
             }
diff --git a/packages/trace-viewer/src/ui/recorder/recorderView.tsx b/packages/trace-viewer/src/ui/recorder/recorderView.tsx
index e9014a6cea..4feb934d2d 100644
--- a/packages/trace-viewer/src/ui/recorder/recorderView.tsx
+++ b/packages/trace-viewer/src/ui/recorder/recorderView.tsx
@@ -280,7 +280,8 @@ const TraceView: React.FunctionComponent<{
     return snapshot.action || snapshot.after || snapshot.before;
   }, [action]);
   const snapshotUrls = React.useMemo(() => {
-    return snapshot ? extendSnapshot(snapshot) : undefined;
+    // TODO: Use actual setting. Requires settings UI to be wired up
+    return snapshot ? extendSnapshot(snapshot, false) : undefined;
   }, [snapshot]);
 
   return <SnapshotView
diff --git a/packages/trace-viewer/src/ui/settingsToolbar.tsx b/packages/trace-viewer/src/ui/settingsToolbarButton.tsx
similarity index 94%
rename from packages/trace-viewer/src/ui/settingsToolbar.tsx
rename to packages/trace-viewer/src/ui/settingsToolbarButton.tsx
index c83dde7d66..db75628f4d 100644
--- a/packages/trace-viewer/src/ui/settingsToolbar.tsx
+++ b/packages/trace-viewer/src/ui/settingsToolbarButton.tsx
@@ -20,7 +20,7 @@ import { ToolbarButton } from '@web/components/toolbarButton';
 import { DefaultSettingsView } from './defaultSettingsView';
 import './settingsToolbar.css';
 
-export const SettingsToolbar: React.FC<{}> = () => {
+export const SettingsToolbarButton: React.FC<{}> = () => {
   const hostingRef = React.useRef<HTMLButtonElement>(null);
 
   const [open, setOpen] = React.useState(false);
@@ -36,7 +36,7 @@ export const SettingsToolbar: React.FC<{}> = () => {
       <Dialog
         className='settings-toolbar-dialog'
         open={open}
-        width={150}
+        width={200}
         requestClose={() => setOpen(false)}
         hostingElement={hostingRef}
       >
diff --git a/packages/trace-viewer/src/ui/workbenchLoader.tsx b/packages/trace-viewer/src/ui/workbenchLoader.tsx
index 91df653686..9f71eb1142 100644
--- a/packages/trace-viewer/src/ui/workbenchLoader.tsx
+++ b/packages/trace-viewer/src/ui/workbenchLoader.tsx
@@ -14,15 +14,13 @@
   limitations under the License.
 */
 
-import { ToolbarButton } from '@web/components/toolbarButton';
 import * as React from 'react';
 import type { ContextEntry } from '../types/entries';
 import { MultiTraceModel } from './modelUtil';
 import './workbenchLoader.css';
-import { toggleTheme } from '@web/theme';
 import { Workbench } from './workbench';
 import { TestServerConnection, WebSocketTestServerTransport } from '@testIsomorphic/testServerConnection';
-import { SettingsToolbar } from './settingsToolbar';
+import { SettingsToolbarButton } from './settingsToolbarButton';
 
 export const WorkbenchLoader: React.FunctionComponent<{
 }> = () => {
@@ -162,7 +160,7 @@ export const WorkbenchLoader: React.FunctionComponent<{
       <div className='product'>Playwright</div>
       {model.title && <div className='title'>{model.title}</div>}
       <div className='spacer'></div>
-      <SettingsToolbar />
+      <SettingsToolbarButton />
     </div>
     <div className='progress'>
       <div className='inner-progress' style={{ width: progress.total ? (100 * progress.done / progress.total) + '%' : 0 }}></div>