feat(trace-viewer): Add setting for display canvas content in snapshots #34010
Conversation
…ettings-dialog-with-canvas-option
This comment has been minimized.
This comment has been minimized.
| 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.'; |
There was a problem hiding this comment.
Open to comments/suggestions on these strings
| value: shouldPopulateCanvasFromScreenshot, | ||
| set: setShouldPopulateCanvasFromScreenshot, | ||
| name: 'Display canvas content', | ||
| title: 'Attempt to display the captured canvas appearance in the snapshot preview. May not be accurate.' |
There was a problem hiding this comment.
Open to comments/suggestions on these strings
There was a problem hiding this comment.
"Best effort canvas element visualization." ?
There was a problem hiding this comment.
That string is very long. I'd prefer it be shorter so it fits better in the settings UI. I do like the content though.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Test results for "tests 1"4 flaky37322 passed, 650 skipped Merge workflow run. |
| } else { | ||
| canvas.title = 'Canvas content display is disabled.'; | ||
| } | ||
|
|
||
| if (isUnderTest) |
There was a problem hiding this comment.
This belongs to the conditional block above.
| * limitations under the License. | ||
| */ | ||
|
|
||
| import { useSetting } from '@web/uiUtils'; |
There was a problem hiding this comment.
That's a little too fine-grained to me, inline?
| value: shouldPopulateCanvasFromScreenshot, | ||
| set: setShouldPopulateCanvasFromScreenshot, | ||
| name: 'Display canvas content', | ||
| title: 'Attempt to display the captured canvas appearance in the snapshot preview. May not be accurate.' |
There was a problem hiding this comment.
"Best effort canvas element visualization." ?
| @@ -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 | |||
There was a problem hiding this comment.
Does this mean the patch is not complete?
There was a problem hiding this comment.
It seemed to me that this Recorder trace view was not complete. It needs its own settings UI to integrate the canvas setting, and the menu doesn't trivially integrate with Recorder trace view because of annoying CSS issues.
| limitations under the License. | ||
| */ | ||
|
|
||
| .settings-toolbar-dialog { |
| import { useDarkModeSetting } from '@web/theme'; | ||
| import { useShouldPopulateCanvasFromScreenshot } from './settings/useShouldPopulateCanvasFromScreenshot'; | ||
|
|
||
| export const DefaultSettingsView: React.FC<{}> = () => { |
There was a problem hiding this comment.
What is default settings view and how is it different from generic settings view? Put them into one file and clarify the difference?
| @@ -0,0 +1,159 @@ | |||
| /* | |||
There was a problem hiding this comment.
This looks like something that could be introduced in a separate PR (pre-work).
| value: T, | ||
| set: (value: T) => void, | ||
| title: string | ||
| value: T; |
There was a problem hiding this comment.
Land this little refactoring separately, pre-work
As discussed in #33940, this PR adds a new setting to the Trace Viewer that allows users to toggle the error-prone psuedo-display of canvas content in snapshots. By default, canvas display is reverted to the previous functionality of displaying a checkered background. If enabled, the canvas content will be extracted from the browser screenshot and displayed.
Additionally adds a Settings dialog dropdown for Trace Viewer, as to group all settings.
Trace Viewer
UI Mode