chore: rename watchmode to uimode tsx (#22511)

packages/playwright-test/src/runner/uiMode.ts

@@ -80,7 +80,7 @@ class UIMode {
   }
 
   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) {
       process.stdout.write = (chunk: string | Buffer) => {
         this._dispatchEvent({ method: 'stdio', params: chunkToPayload('stdout', chunk) });

packages/trace-viewer/public/uiMode.webmanifest

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

packages/trace-viewer/src/ui/uiModeView.css

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

packages/trace-viewer/src/ui/uiModeView.tsx

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

packages/trace-viewer/src/uiMode.tsx

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

packages/trace-viewer/uiMode.html

@@ -20,11 +20,11 @@
     <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="16x16" href="/icon-16x16.png">
-    <link rel="manifest" href="/watch.webmanifest">
+    <link rel="manifest" href="/uiMode.webmanifest">
     <title>Playwright Test</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/watch.tsx"></script>
+    <script type="module" src="/src/uiMode.tsx"></script>
   </body>
 </html>

packages/trace-viewer/vite.config.ts

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

tests/playwright-test/ui-mode-fixtures.ts

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