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)
time = '-';
return <>
<div className='action-title'>
<div className='action-title' title={action.apiName}>
<span>{action.apiName}</span>
{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>}

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

@ -498,7 +498,7 @@ const TestList: React.FC<{
dataTestId='test-tree'
render={treeItem => {
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>}
<Toolbar noMinHeight={true} noShadow={true}>
<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}
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
action={activeAction}
sdkLanguage={sdkLanguage}
@ -204,51 +204,51 @@ export const Workbench: React.FunctionComponent<{
highlightedLocator={highlightedLocator}
setHighlightedLocator={locatorPicked} />
<TabbedPane
tabs={tabs}
selectedTab={selectedPropertiesTab}
setSelectedTab={selectPropertiesTab}
leftToolbar={[
<ToolbarButton title='Pick locator' icon='target' toggled={isInspecting} onClick={() => {
if (!isInspecting)
selectPropertiesTab('inspector');
setIsInspecting(!isInspecting);
}} />
tabs={[
{
id: 'actions',
title: 'Actions',
component: <ActionList
sdkLanguage={sdkLanguage}
actions={model?.actions || []}
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={[
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');
}} />
]}
/>
selectedTab={selectedNavigatorTab} setSelectedTab={setSelectedNavigatorTab}/>
</SplitView>
<TabbedPane
tabs={[
{
id: 'actions',
title: 'Actions',
component: <ActionList
sdkLanguage={sdkLanguage}
actions={model?.actions || []}
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}/>
},
tabs={tabs}
selectedTab={selectedPropertiesTab}
setSelectedTab={selectPropertiesTab}
leftToolbar={[
<ToolbarButton title='Pick locator' icon='target' toggled={isInspecting} onClick={() => {
if (!isInspecting)
selectPropertiesTab('inspector');
setIsInspecting(!isInspecting);
}} />
]}
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>
</div>;
};