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

chore: rename watchmode to uimode tsx (#22511)

Browse source
This commit is contained in:
Pavel Feldman 2023-04-19 16:51:42 -07:00 committed by GitHub
parent b8b929fdea
commit a45f04568b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 29 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/playwright-test/src/runner/uiMode.ts
View file

@ -80,7 +80,7 @@ class UIMode {
} }
async showUI() { async showUI() {
this._page = await showTraceViewer([], 'chromium', { app: 'watch.html', headless: isUnderTest() && process.env.PWTEST_HEADED_FOR_TEST !== '1' }); this._page = await showTraceViewer([], 'chromium', { app: 'uiMode.html', headless: isUnderTest() && process.env.PWTEST_HEADED_FOR_TEST !== '1' });
if (!process.env.PWTEST_DEBUG) { if (!process.env.PWTEST_DEBUG) {
process.stdout.write = (chunk: string | Buffer) => { process.stdout.write = (chunk: string | Buffer) => {
this._dispatchEvent({ method: 'stdio', params: chunkToPayload('stdout', chunk) }); this._dispatchEvent({ method: 'stdio', params: chunkToPayload('stdout', chunk) });

2
packages/trace-viewer/public/watch.webmanifest → packages/trace-viewer/public/uiMode.webmanifest
View file

@ -2,7 +2,7 @@
"theme_color": "#000", "theme_color": "#000",
"background_color": "#fff", "background_color": "#fff",
"display": "browser", "display": "browser",
"start_url": "watch.html", "start_url": "uiMode.html",
"name": "Playwright Test", "name": "Playwright Test",
"short_name": "Playwright Test", "short_name": "Playwright Test",
"icons": [ "icons": [

24
packages/trace-viewer/src/ui/watchMode.css → packages/trace-viewer/src/ui/uiModeView.css
View file

@ -14,45 +14,45 @@
limitations under the License. limitations under the License.
*/ */
.watch-mode-sidebar { .ui-mode-sidebar {
background-color: var(--vscode-sideBar-background); background-color: var(--vscode-sideBar-background);
} }
.watch-mode-sidebar input[type=search] { .ui-mode-sidebar input[type=search] {
flex: auto; flex: auto;
} }
.watch-mode-sidebar .toolbar-button:not([disabled]) .codicon-play { .ui-mode-sidebar .toolbar-button:not([disabled]) .codicon-play {
color: var(--vscode-debugIcon-restartForeground); color: var(--vscode-debugIcon-restartForeground);
} }
.watch-mode-sidebar .toolbar-button:not([disabled]) .codicon-debug-stop { .ui-mode-sidebar .toolbar-button:not([disabled]) .codicon-debug-stop {
color: var(--vscode-debugIcon-stopForeground); color: var(--vscode-debugIcon-stopForeground);
} }
.watch-mode-list-item { .ui-mode-list-item {
flex: auto; flex: auto;
} }
.watch-mode-list-item-title { .ui-mode-list-item-title {
flex: auto; flex: auto;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
.watch-mode-list-item-time { .ui-mode-list-item-time {
flex: none; flex: none;
color: var(--vscode-editorCodeLens-foreground); color: var(--vscode-editorCodeLens-foreground);
margin: 0 4px; margin: 0 4px;
user-select: none; user-select: none;
} }
.list-view-entry.selected .watch-mode-list-item-time, .list-view-entry.selected .ui-mode-list-item-time,
.list-view-entry.highlighted .watch-mode-list-item-time { .list-view-entry.highlighted .ui-mode-list-item-time {
display: none; display: none;
} }
.watch-mode .section-title { .ui-mode .section-title {
display: flex; display: flex;
flex: auto; flex: auto;
flex-direction: row; flex-direction: row;
@ -66,7 +66,7 @@
height: 30px; height: 30px;
} }
.watch-mode-sidebar img { .ui-mode-sidebar img {
flex: none; flex: none;
margin-left: 6px; margin-left: 6px;
width: 24px; width: 24px;
@ -93,7 +93,7 @@
display: none; display: none;
} }
.watch-mode-sidebar input[type=search] { .ui-mode-sidebar input[type=search] {
flex: auto; flex: auto;
padding: 0 5px; padding: 0 5px;
line-height: 24px; line-height: 24px;

16
packages/trace-viewer/src/ui/watchMode.tsx → packages/trace-viewer/src/ui/uiModeView.tsx
View file

@ -22,10 +22,10 @@ import { TreeView } from '@web/components/treeView';
import type { TreeState } from '@web/components/treeView'; import type { TreeState } from '@web/components/treeView';
import { baseFullConfig, TeleReporterReceiver, TeleSuite } from '@testIsomorphic/teleReceiver'; import { baseFullConfig, TeleReporterReceiver, TeleSuite } from '@testIsomorphic/teleReceiver';
import type { TeleTestCase } from '@testIsomorphic/teleReceiver'; import type { TeleTestCase } from '@testIsomorphic/teleReceiver';
import type { FullConfig, Suite, TestCase, Location, TestError } from '../../../playwright-test/types/testReporter'; import type { FullConfig, Suite, TestCase, Location, TestError } from '@playwright/test/types/testReporter';
import { SplitView } from '@web/components/splitView'; import { SplitView } from '@web/components/splitView';
import { idForAction, MultiTraceModel } from './modelUtil'; import { idForAction, MultiTraceModel } from './modelUtil';
import './watchMode.css'; import './uiModeView.css';
import { ToolbarButton } from '@web/components/toolbarButton'; import { ToolbarButton } from '@web/components/toolbarButton';
import { Toolbar } from '@web/components/toolbar'; import { Toolbar } from '@web/components/toolbar';
import type { ContextEntry } from '../entries'; import type { ContextEntry } from '../entries';
@ -56,7 +56,7 @@ type TestModel = {
rootSuite: Suite | undefined; rootSuite: Suite | undefined;
}; };
export const WatchModeView: React.FC<{}> = ({ export const UIModeView: React.FC<{}> = ({
}) => { }) => {
const [filterText, setFilterText] = React.useState<string>(''); const [filterText, setFilterText] = React.useState<string>('');
const [isShowingOutput, setIsShowingOutput] = React.useState<boolean>(false); const [isShowingOutput, setIsShowingOutput] = React.useState<boolean>(false);
@ -155,7 +155,7 @@ export const WatchModeView: React.FC<{}> = ({
const isRunningTest = !!runningState; const isRunningTest = !!runningState;
return <div className='vbox watch-mode'> return <div className='vbox ui-mode'>
<SplitView sidebarSize={250} orientation='horizontal' sidebarIsFirst={true}> <SplitView sidebarSize={250} orientation='horizontal' sidebarIsFirst={true}>
<div className='vbox'> <div className='vbox'>
<div className={'vbox' + (isShowingOutput ? '' : ' hidden')}> <div className={'vbox' + (isShowingOutput ? '' : ' hidden')}>
@ -171,7 +171,7 @@ export const WatchModeView: React.FC<{}> = ({
<TraceView item={selectedItem} rootDir={testModel.config?.rootDir} /> <TraceView item={selectedItem} rootDir={testModel.config?.rootDir} />
</div> </div>
</div> </div>
<div className='vbox watch-mode-sidebar'> <div className='vbox ui-mode-sidebar'>
<Toolbar noShadow={true} noMinHeight={true}> <Toolbar noShadow={true} noMinHeight={true}>
<img src='icon-32x32.png' /> <img src='icon-32x32.png' />
<div className='section-title'>Playwright</div> <div className='section-title'>Playwright</div>
@ -417,9 +417,9 @@ const TestList: React.FC<{
rootItem={rootItem} rootItem={rootItem}
dataTestId='test-tree' dataTestId='test-tree'
render={treeItem => { render={treeItem => {
return <div className='hbox watch-mode-list-item'> return <div className='hbox ui-mode-list-item'>
<div className='watch-mode-list-item-title'>{treeItem.title}</div> <div className='ui-mode-list-item-title'>{treeItem.title}</div>
{!!treeItem.duration && treeItem.status !== 'skipped' && <div className='watch-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>
<ToolbarButton icon='go-to-file' title='Open in VS Code' onClick={() => sendMessageNoReply('open', { location: locationToOpen(treeItem) })}></ToolbarButton> <ToolbarButton icon='go-to-file' title='Open in VS Code' onClick={() => sendMessageNoReply('open', { location: locationToOpen(treeItem) })}></ToolbarButton>

4
packages/trace-viewer/src/watch.tsx → packages/trace-viewer/src/uiMode.tsx
View file

@ -19,7 +19,7 @@ import '@web/common.css';
import { applyTheme } from '@web/theme'; import { applyTheme } from '@web/theme';
import '@web/third_party/vscode/codicon.css'; import '@web/third_party/vscode/codicon.css';
import * as ReactDOM from 'react-dom'; import * as ReactDOM from 'react-dom';
import { WatchModeView } from './ui/watchMode'; import { UIModeView } from './ui/uiModeView';
(async () => { (async () => {
applyTheme(); applyTheme();
@ -37,5 +37,5 @@ import { WatchModeView } from './ui/watchMode';
setInterval(function() { fetch('ping'); }, 10000); setInterval(function() { fetch('ping'); }, 10000);
} }
ReactDOM.render(<WatchModeView></WatchModeView>, document.querySelector('#root')); ReactDOM.render(<UIModeView></UIModeView>, document.querySelector('#root'));
})(); })();

4
packages/trace-viewer/watch.html → packages/trace-viewer/uiMode.html
View file

@ -20,11 +20,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="/icon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="/icon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="/icon-16x16.png">
<link rel="manifest" href="/watch.webmanifest"> <link rel="manifest" href="/uiMode.webmanifest">
<title>Playwright Test</title> <title>Playwright Test</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/watch.tsx"></script> <script type="module" src="/src/uiMode.tsx"></script>
</body> </body>
</html> </html>

2
packages/trace-viewer/vite.config.ts
View file

@ -44,7 +44,7 @@ export default defineConfig({
rollupOptions: { rollupOptions: {
input: { input: {
index: path.resolve(__dirname, 'index.html'), index: path.resolve(__dirname, 'index.html'),
watch: path.resolve(__dirname, 'watch.html'), watch: path.resolve(__dirname, 'uiMode.html'),
popout: path.resolve(__dirname, 'popout.html'), popout: path.resolve(__dirname, 'popout.html'),
}, },
output: { output: {

4
tests/playwright-test/ui-mode-fixtures.ts
View file

@ -70,8 +70,8 @@ export function dumpTestTree(page: Page, options: { time?: boolean } = {}): () =
const indent = listItem.querySelectorAll('.list-view-indent').length; const indent = listItem.querySelectorAll('.list-view-indent').length;
const watch = listItem.querySelector('.toolbar-button.eye.toggled') ? ' 👁' : ''; const watch = listItem.querySelector('.toolbar-button.eye.toggled') ? ' 👁' : '';
const selected = listItem.classList.contains('selected') ? ' <=' : ''; const selected = listItem.classList.contains('selected') ? ' <=' : '';
const title = listItem.querySelector('.watch-mode-list-item-title').textContent; const title = listItem.querySelector('.ui-mode-list-item-title').textContent;
const timeElement = options.time ? listItem.querySelector('.watch-mode-list-item-time') : undefined; const timeElement = options.time ? listItem.querySelector('.ui-mode-list-item-time') : undefined;
const time = timeElement ? ' ' + timeElement.textContent.replace(/\d+m?s/, 'XXms') : ''; const time = timeElement ? ' ' + timeElement.textContent.replace(/\d+m?s/, 'XXms') : '';
result.push(' ' + ' '.repeat(indent) + treeIcon + ' ' + statusIcon + ' ' + title + time + watch + selected); result.push(' ' + ' '.repeat(indent) + treeIcon + ' ' + statusIcon + ' ' + title + time + watch + selected);
} }