yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: render sidebar tab selector as drop down (#27844)

Browse Source
This commit is contained in:
Pavel Feldman 2023-10-27 15:31:31 -07:00 committed by GitHub
parent 4d82d6801f
commit 462e70ab82
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/trace-viewer/src/ui/networkTab.tsx
View File

@ -129,8 +129,13 @@ const NetworkResource: React.FunctionComponent<{
}> = ({ resource, boundaries }) => {
const { routeStatus, resourceName, contentType } = React.useMemo(() => {
const routeStatus = formatRouteStatus(resource);
const url = new URL(resource.request.url);
const resourceName = url.pathname;
let resourceName: string;
try {
const url = new URL(resource.request.url);
resourceName = url.pathname;
} catch {
resourceName = resource.request.url;
}
let contentType = resource.response.content.mimeType;
const charset = contentType.match(/^(.*);\s*charset=.*$/);
if (charset)

1
packages/trace-viewer/src/ui/workbench.tsx
View File

@ -278,6 +278,7 @@ export const Workbench: React.FunctionComponent<{
setSidebarLocation('bottom');
}} />
]}
mode={sidebarLocation === 'bottom' ? 'default' : 'select'}
/>
</SplitView>
</div>;

27
packages/web/src/components/tabbedPane.tsx
View File

@ -34,14 +34,17 @@ export const TabbedPane: React.FunctionComponent<{
selectedTab: string,
setSelectedTab: (tab: string) => void,
dataTestId?: string,
}> = ({ tabs, selectedTab, setSelectedTab, leftToolbar, rightToolbar, dataTestId }) => {
mode?: 'default' | 'select',
}> = ({ tabs, selectedTab, setSelectedTab, leftToolbar, rightToolbar, dataTestId, mode }) => {
if (!mode)
mode = 'default';
return <div className='tabbed-pane' data-testid={dataTestId}>
<div className='vbox'>
<Toolbar>
{ leftToolbar && <div style={{ flex: 'none', display: 'flex', margin: '0 4px', alignItems: 'center' }}>
{...leftToolbar}
</div>}
<div style={{ flex: 'auto', display: 'flex', height: '100%', overflow: 'hidden' }}>
{mode === 'default' && <div style={{ flex: 'auto', display: 'flex', height: '100%', overflow: 'hidden' }}>
{[...tabs.map(tab => (
<TabbedPaneTab
id={tab.id}
@ -52,7 +55,25 @@ export const TabbedPane: React.FunctionComponent<{
onSelect={setSelectedTab}
></TabbedPaneTab>)),
]}
</div>
</div>}
{mode === 'select' && <div style={{ flex: 'auto', display: 'flex', height: '100%', overflow: 'hidden' }}>
<select style={{width: '100%', background: 'none', cursor: 'pointer'}} onChange={e => {
setSelectedTab(tabs[e.currentTarget.selectedIndex].id);
}}>
{tabs.map(tab => {
let suffix = '';
if (tab.count === 1)
suffix = ' 🔵';
else if (tab.count)
suffix = ` 🔵✖️${tab.count}`;
if (tab.errorCount === 1)
suffix = ` 🔴`;
else if (tab.errorCount)
suffix = ` 🔴✖️${tab.errorCount}`;
return <option value={tab.id} selected={tab.id === selectedTab}>{tab.title}{suffix}</option>;
})}
</select>
</div>}
{rightToolbar && <div style={{ flex: 'none', display: 'flex', alignItems: 'center' }}>
{...rightToolbar}
</div>}