Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Add setting support to recorderView

Browse source
This commit is contained in:
Adam Gastineau 2025-01-06 06:48:34 -08:00
parent 1a76cea687
commit 9f05f03fc9
2 changed files with 9 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
packages/trace-viewer/src/ui/recorder/recorderView.tsx
View file

@ -21,7 +21,6 @@ import type { TabbedPaneTabModel } from '@web/components/tabbedPane';
import { TabbedPane } from '@web/components/tabbedPane'; import { TabbedPane } from '@web/components/tabbedPane';
import { Toolbar } from '@web/components/toolbar'; import { Toolbar } from '@web/components/toolbar';
import { ToolbarButton, ToolbarSeparator } from '@web/components/toolbarButton'; import { ToolbarButton, ToolbarSeparator } from '@web/components/toolbarButton';
import { toggleTheme } from '@web/theme';
import { copy, useSetting } from '@web/uiUtils'; import { copy, useSetting } from '@web/uiUtils';
import * as React from 'react'; import * as React from 'react';
import { ConsoleTab, useConsoleTabModel } from '../consoleTab'; import { ConsoleTab, useConsoleTabModel } from '../consoleTab';
@ -37,6 +36,7 @@ import './recorderView.css';
import { ActionListView } from './actionListView'; import { ActionListView } from './actionListView';
import { BackendContext, BackendProvider } from './backendContext'; import { BackendContext, BackendProvider } from './backendContext';
import type { Language } from '@isomorphic/locatorGenerators'; import type { Language } from '@isomorphic/locatorGenerators';
import { SettingsToolbarButton } from '../settingsToolbarButton';
export const RecorderView: React.FunctionComponent = () => { export const RecorderView: React.FunctionComponent = () => {
const searchParams = new URLSearchParams(window.location.search); const searchParams = new URLSearchParams(window.location.search);
@ -148,7 +148,7 @@ export const Workbench: React.FunctionComponent = () => {
<SourceChooser fileId={fileId} sources={backend?.sources || []} setFileId={fileId => { <SourceChooser fileId={fileId} sources={backend?.sources || []} setFileId={fileId => {
setFileId(fileId); setFileId(fileId);
}} /> }} />
<ToolbarButton icon='color-mode' title='Toggle color mode' toggled={false} onClick={() => toggleTheme()}></ToolbarButton> <SettingsToolbarButton />
</Toolbar>; </Toolbar>;
const sidebarTabbedPane = <TabbedPane tabs={[actionsTab]} />; const sidebarTabbedPane = <TabbedPane tabs={[actionsTab]} />;
@ -271,6 +271,10 @@ const TraceView: React.FunctionComponent<{
setHighlightedLocator, setHighlightedLocator,
}) => { }) => {
const model = React.useContext(ModelContext); const model = React.useContext(ModelContext);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [shouldPopulateCanvasFromScreenshot, _] = useSetting('shouldPopulateCanvasFromScreenshot', false);
const action = React.useMemo(() => { const action = React.useMemo(() => {
return model?.actions.find(a => a.callId === callId); return model?.actions.find(a => a.callId === callId);
}, [model, callId]); }, [model, callId]);
@ -280,9 +284,8 @@ const TraceView: React.FunctionComponent<{
return snapshot.action || snapshot.after || snapshot.before; return snapshot.action || snapshot.after || snapshot.before;
}, [action]); }, [action]);
const snapshotUrls = React.useMemo(() => { const snapshotUrls = React.useMemo(() => {
// TODO: Use actual setting. Requires settings UI to be wired up return snapshot ? extendSnapshot(snapshot, shouldPopulateCanvasFromScreenshot) : undefined;
return snapshot ? extendSnapshot(snapshot, false) : undefined; }, [snapshot, shouldPopulateCanvasFromScreenshot]);
}, [snapshot]);
return <SnapshotView return <SnapshotView
sdkLanguage={sdkLanguage} sdkLanguage={sdkLanguage}

1
packages/trace-viewer/src/ui/shared/dialog.tsx
View file

@ -47,6 +47,7 @@ export const Dialog: React.FC<React.PropsWithChildren<DialogProps>> = ({
const bounds = anchor.current.getBoundingClientRect(); const bounds = anchor.current.getBoundingClientRect();
style = { style = {
position: 'fixed',
margin: 0, margin: 0,
top: bounds.bottom + (verticalOffset ?? 0), top: bounds.bottom + (verticalOffset ?? 0),
left: buildTopLeftCoord(bounds, width), left: buildTopLeftCoord(bounds, width),