feat(trace-viewer): Add setting for display canvas content in snapshots

packages/trace-viewer/src/sw/snapshotRenderer.ts

@@ -255,7 +255,9 @@ declare global {
 
 function snapshotScript(viewport: ViewportSize, ...targetIds: (string | undefined)[]) {
   function applyPlaywrightAttributes(unwrapPopoutUrl: (url: string) => string, viewport: ViewportSize, ...targetIds: (string | undefined)[]) {
-    const isUnderTest = new URLSearchParams(location.search).has('isUnderTest');
+    const searchParams = new URLSearchParams(location.search);
+    const shouldPopulateCanvasFromScreenshot = searchParams.has('shouldPopulateCanvasFromScreenshot');
+    const isUnderTest = searchParams.has('isUnderTest');
 
     // info to recursively compute canvas position relative to the top snapshot frame.
     // Before rendering each iframe, its parent extracts the '__playwright_canvas_render_info__' attribute
@@ -512,15 +514,20 @@ function snapshotScript(viewport: ViewportSize, ...targetIds: (string | undefine
 
             drawCheckerboard(context, canvas);
 
-            context.drawImage(img, boundingRect.left * img.width, boundingRect.top * img.height, (boundingRect.right - boundingRect.left) * img.width, (boundingRect.bottom - boundingRect.top) * img.height, 0, 0, canvas.width, canvas.height);
+            if (shouldPopulateCanvasFromScreenshot) {
+              context.drawImage(img, boundingRect.left * img.width, boundingRect.top * img.height, (boundingRect.right - boundingRect.left) * img.width, (boundingRect.bottom - boundingRect.top) * img.height, 0, 0, canvas.width, canvas.height);
+
+              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.`;
+            } else {
+              canvas.title = 'Canvas content display is disabled.';
+            }
+
             if (isUnderTest)
               // eslint-disable-next-line no-console
               console.log(`canvas drawn:`, JSON.stringify([boundingRect.left, boundingRect.top, (boundingRect.right - boundingRect.left), (boundingRect.bottom - boundingRect.top)].map(v => Math.floor(v * 100))));
-
-            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.`;
           }
         };
         img.onerror = () => {

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

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react';
+import { SettingsView } from './settingsView';
+import { useDarkModeSetting } from '@web/theme';
+import { useShouldPopulateCanvasFromScreenshot } from './settings/useShouldPopulateCanvasFromScreenshot';
+
+export const DefaultSettingsView: React.FC<{}> = () => {
+  const [
+    shouldPopulateCanvasFromScreenshot,
+    setShouldPopulateCanvasFromScreenshot,
+  ] = useShouldPopulateCanvasFromScreenshot();
+  const [darkMode, setDarkMode] = useDarkModeSetting();
+
+  return (
+    <SettingsView
+      settings={[
+        { value: darkMode, set: setDarkMode, name: 'Dark mode' },
+        {
+          value: shouldPopulateCanvasFromScreenshot,
+          set: setShouldPopulateCanvasFromScreenshot,
+          name: 'Display canvas content',
+          title: 'Attempt to display the captured canvas appearance in the snapshot preview. May not be accurate.'
+        },
+      ]}
+    />
+  );
+};

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

packages/trace-viewer/src/ui/settings/useShouldPopulateCanvasFromScreenshot.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useSetting } from '@web/uiUtils';
+
+export const useShouldPopulateCanvasFromScreenshot = (): [
+  boolean,
+  (value: boolean) => void
+] => useSetting('shouldPopulateCanvasFromScreenshot', false);

packages/trace-viewer/src/ui/settingsToolbar.css

@@ -0,0 +1,21 @@
+/*
+  Copyright (c) Microsoft Corporation.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+.settings-toolbar-dialog {
+  background-color: var(--vscode-sideBar-background);
+
+  padding: 4px 8px;
+}

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

@@ -0,0 +1,49 @@
+/*
+  Copyright (c) Microsoft Corporation.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import * as React from 'react';
+import { Dialog } from './shared/dialog';
+import { ToolbarButton } from '@web/components/toolbarButton';
+import { DefaultSettingsView } from './defaultSettingsView';
+import './settingsToolbar.css';
+
+export const SettingsToolbarButton: React.FC<{}> = () => {
+  const hostingRef = React.useRef<HTMLButtonElement>(null);
+
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <ToolbarButton
+        ref={hostingRef}
+        icon='settings-gear'
+        title='Settings'
+        onClick={() => setOpen(current => !current)}
+      />
+      <Dialog
+        className='settings-toolbar-dialog'
+        open={open}
+        width={200}
+        // TODO: Temporary spacing until design of toolbar buttons is revisited
+        verticalOffset={8}
+        requestClose={() => setOpen(false)}
+        hostingElement={hostingRef}
+      >
+        <DefaultSettingsView />
+      </Dialog>
+    </>
+  );
+};

packages/trace-viewer/src/ui/settingsView.css

@@ -15,25 +15,27 @@
 */
 
 .settings-view {
+  display: flex;
   flex: none;
-  margin-top: 4px;
+  padding: 4px 0px;
+  row-gap: 8px;
+  user-select: none;
 }
 
-.settings-view .setting label {
+.settings-view .setting {
   display: flex;
-  flex-direction: row;
   align-items: center;
-  margin: 4px 2px;
 }
 
-.settings-view .setting:first-of-type label {
-  margin-top: 2px;
-}
+.settings-view .setting label {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 
-.settings-view .setting:last-of-type label {
-  margin-bottom: 2px;
+  cursor: pointer;
 }
 
 .settings-view .setting input {
   margin-right: 5px;
+  flex-shrink: 0;
 }

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

@@ -18,22 +18,32 @@ import * as React from 'react';
 import './settingsView.css';
 
 export type Setting<T> = {
-  value: T,
-  set: (value: T) => void,
-  title: string
+  value: T;
+  set: (value: T) => void;
+  name: string;
+  title?: string;
 };
 
 export const SettingsView: React.FunctionComponent<{
-  settings: Setting<boolean>[],
+  settings: Setting<boolean>[];
 }> = ({ settings }) => {
-  return <div className='vbox settings-view'>
-    {settings.map(({ value, set, title }) => {
-      return <div key={title} className='setting'>
-        <label>
-          <input type='checkbox' checked={value} onChange={() => set(!value)}/>
-          {title}
-        </label>
-      </div>;
-    })}
-  </div>;
+  return (
+    <div className='vbox settings-view'>
+      {settings.map(({ value, set, name, title }) => {
+        const labelId = `setting-${name}`;
+
+        return (
+          <div key={name} className='setting' title={title}>
+            <input
+              type='checkbox'
+              id={labelId}
+              checked={value}
+              onChange={() => set(!value)}
+            />
+            <label htmlFor={labelId}>{name}</label>
+          </div>
+        );
+      })}
+    </div>
+  );
 };