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

ui(trace): make drawer appear under action list (#27260)

Browse source
This commit is contained in:
Pavel Feldman 2023-09-22 10:43:44 -07:00 committed by GitHub
parent 175ae09fef
commit c7d9ae1c8b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 45 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/trace-viewer/src/ui/actionList.tsx
View file

@ -94,7 +94,7 @@ export const renderAction = (
else if (!isLive) else if (!isLive)
time = '-'; time = '-';
return <> return <>
<div className='action-title'> <div className='action-title' title={action.apiName}>
<span>{action.apiName}</span> <span>{action.apiName}</span>
{locator && <div className='action-selector' title={locator}>{locator}</div>} {locator && <div className='action-selector' title={locator}>{locator}</div>}
{action.method === 'goto' && action.params.url && <div className='action-url' title={action.params.url}>{action.params.url}</div>} {action.method === 'goto' && action.params.url && <div className='action-url' title={action.params.url}>{action.params.url}</div>}

2
packages/trace-viewer/src/ui/uiModeView.tsx
View file

@ -498,7 +498,7 @@ const TestList: React.FC<{
dataTestId='test-tree' dataTestId='test-tree'
render={treeItem => { render={treeItem => {
return <div className='hbox ui-mode-list-item'> return <div className='hbox ui-mode-list-item'>
<div className='ui-mode-list-item-title'>{treeItem.title}</div> <div className='ui-mode-list-item-title' title={treeItem.title}>{treeItem.title}</div>
{!!treeItem.duration && treeItem.status !== 'skipped' && <div className='ui-mode-list-item-time'>{msToString(treeItem.duration)}</div>} {!!treeItem.duration && treeItem.status !== 'skipped' && <div className='ui-mode-list-item-time'>{msToString(treeItem.duration)}</div>}
<Toolbar noMinHeight={true} noShadow={true}> <Toolbar noMinHeight={true} noShadow={true}>
<ToolbarButton icon='play' title='Run' onClick={() => runTreeItem(treeItem)} disabled={!!runningState}></ToolbarButton> <ToolbarButton icon='play' title='Run' onClick={() => runTreeItem(treeItem)} disabled={!!runningState}></ToolbarButton>

86
packages/trace-viewer/src/ui/workbench.tsx
View file

@ -193,8 +193,8 @@ export const Workbench: React.FunctionComponent<{
selectedTime={selectedTime} selectedTime={selectedTime}
setSelectedTime={setSelectedTime} setSelectedTime={setSelectedTime}
/> />
<SplitView sidebarSize={250} orientation='horizontal' sidebarIsFirst={true} settingName='actionListSidebar'> <SplitView sidebarSize={250} orientation={sidebarLocation === 'bottom' ? 'vertical' : 'horizontal'} settingName='propertiesSidebar'>
<SplitView sidebarSize={250} orientation={sidebarLocation === 'bottom' ? 'vertical' : 'horizontal'} settingName='propertiesSidebar'> <SplitView sidebarSize={250} orientation='horizontal' sidebarIsFirst={true} settingName='actionListSidebar'>
<SnapshotTab <SnapshotTab
action={activeAction} action={activeAction}
sdkLanguage={sdkLanguage} sdkLanguage={sdkLanguage}
@ -204,51 +204,51 @@ export const Workbench: React.FunctionComponent<{
highlightedLocator={highlightedLocator} highlightedLocator={highlightedLocator}
setHighlightedLocator={locatorPicked} /> setHighlightedLocator={locatorPicked} />
<TabbedPane <TabbedPane
tabs={tabs} tabs={[
selectedTab={selectedPropertiesTab} {
setSelectedTab={selectPropertiesTab} id: 'actions',
leftToolbar={[ title: 'Actions',
<ToolbarButton title='Pick locator' icon='target' toggled={isInspecting} onClick={() => { component: <ActionList
if (!isInspecting) sdkLanguage={sdkLanguage}
selectPropertiesTab('inspector'); actions={model?.actions || []}
setIsInspecting(!isInspecting); selectedAction={model ? selectedAction : undefined}
}} /> selectedTime={selectedTime}
setSelectedTime={setSelectedTime}
onSelected={onActionSelected}
onHighlighted={setHighlightedAction}
revealConsole={() => selectPropertiesTab('console')}
isLive={isLive}
/>
},
{
id: 'metadata',
title: 'Metadata',
component: <MetadataView model={model}/>
},
]} ]}
rightToolbar={[ selectedTab={selectedNavigatorTab} setSelectedTab={setSelectedNavigatorTab}/>
sidebarLocation === 'bottom' ?
<ToolbarButton title='Dock to right' icon='layout-sidebar-right-off' onClick={() => {
setSidebarLocation('right');
}} /> :
<ToolbarButton title='Dock to bottom' icon='layout-panel-off' onClick={() => {
setSidebarLocation('bottom');
}} />
]}
/>
</SplitView> </SplitView>
<TabbedPane <TabbedPane
tabs={[ tabs={tabs}
{ selectedTab={selectedPropertiesTab}
id: 'actions', setSelectedTab={selectPropertiesTab}
title: 'Actions', leftToolbar={[
component: <ActionList <ToolbarButton title='Pick locator' icon='target' toggled={isInspecting} onClick={() => {
sdkLanguage={sdkLanguage} if (!isInspecting)
actions={model?.actions || []} selectPropertiesTab('inspector');
selectedAction={model ? selectedAction : undefined} setIsInspecting(!isInspecting);
selectedTime={selectedTime} }} />
setSelectedTime={setSelectedTime}
onSelected={onActionSelected}
onHighlighted={setHighlightedAction}
revealConsole={() => selectPropertiesTab('console')}
isLive={isLive}
/>
},
{
id: 'metadata',
title: 'Metadata',
component: <MetadataView model={model}/>
},
]} ]}
selectedTab={selectedNavigatorTab} setSelectedTab={setSelectedNavigatorTab}/> rightToolbar={[
sidebarLocation === 'bottom' ?
<ToolbarButton title='Dock to right' icon='layout-sidebar-right-off' onClick={() => {
setSidebarLocation('right');
}} /> :
<ToolbarButton title='Dock to bottom' icon='layout-panel-off' onClick={() => {
setSidebarLocation('bottom');
}} />
]}
/>
</SplitView> </SplitView>
</div>; </div>;
}; };