chore: consistent xterm naming (#21446)

packages/playwright-test/src/reporters/html.ts

@@ -289,7 +289,7 @@ class HtmlBuilder {
         await copyFileAndMakeWritable(path.join(traceViewerFolder, file), path.join(traceViewerTargetFolder, file));
       }
       for (const file of fs.readdirSync(path.join(traceViewerFolder, 'assets'))) {
-        if (file.endsWith('.map') || file.includes('xTermModule'))
+        if (file.endsWith('.map') || file.includes('xtermModule'))
           continue;
         await copyFileAndMakeWritable(path.join(traceViewerFolder, 'assets', file), path.join(traceViewerAssetsTargetFolder, file));
       }

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

@@ -66,3 +66,7 @@
   line-height: 22px;
   padding: 0 10px;
 }
+
+.list-view-entry:not(.selected):not(.highlighted) .toolbar-button {
+  display: none;
+}

packages/web/src/components/DEPS.list

@@ -0,0 +1,12 @@
+[*]
+../theme.ts
+../third_party/vscode/codicon.css
+
+[expandable.spec.tsx]
+***
+
+[source.spec.tsx]
+***
+
+[splitView.spec.tsx]
+***

packages/web/src/components/xtermModule.tsx

@@ -19,7 +19,7 @@ import 'xterm/css/xterm.css';
 import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 
-export type XTermModule = {
+export type XtermModule = {
   Terminal: typeof Terminal;
   FitAddon: typeof FitAddon;
 };

packages/web/src/components/xtermWrapper.tsx

@@ -17,7 +17,8 @@
 import * as React from 'react';
 import './xtermWrapper.css';
 import type { Terminal } from 'xterm';
-import type { XTermModule } from './xtermModule';
+import type { XtermModule } from './xtermModule';
+import { isDarkTheme } from '@web/theme';
 
 export type XTermDataSource = {
   pending: (string | Uint8Array)[];
@@ -29,7 +30,7 @@ export const XTermWrapper: React.FC<{ source: XTermDataSource }> = ({
   source
 }) => {
   const xtermElement = React.createRef<HTMLDivElement>();
-  const [modulePromise] = React.useState<Promise<XTermModule>>(import('./xTermModule').then(m => m.default));
+  const [modulePromise] = React.useState<Promise<XtermModule>>(import('./xtermModule').then(m => m.default));
   const [terminal, setTerminal] = React.useState<Terminal>();
   React.useEffect(() => {
     (async () => {
@@ -42,7 +43,13 @@ export const XTermWrapper: React.FC<{ source: XTermDataSource }> = ({
       if (terminal)
         return;
 
-      const newTerminal = new Terminal({ convertEol: true });
+      const newTerminal = new Terminal({
+        convertEol: true,
+        fontSize: 13,
+        fontFamily: 'var(--vscode-editor-font-family)',
+        theme: isDarkTheme() ? darkTheme : lightTheme
+      });
+
       const fitAddon = new FitAddon();
       newTerminal.loadAddon(fitAddon);
       for (const p of source.pending)
@@ -63,3 +70,47 @@ export const XTermWrapper: React.FC<{ source: XTermDataSource }> = ({
   return <div className='xterm-wrapper' style={{ flex: 'auto' }} ref={xtermElement}>
   </div>;
 };
+
+const lightTheme = {
+  foreground: '#383a42',
+  background: '#fafafa',
+  cursor: '#383a42',
+  black: '#000000',
+  red: '#e45649',
+  green: '#50a14f',
+  yellow: '#c18401',
+  blue: '#4078f2',
+  magenta: '#a626a4',
+  cyan: '#0184bc',
+  white: '#a0a0a0',
+  brightBlack: '#000000',
+  brightRed: '#e06c75',
+  brightGreen: '#98c379',
+  brightYellow: '#d19a66',
+  brightBlue: '#4078f2',
+  brightMagenta: '#a626a4',
+  brightCyan: '#0184bc',
+  brightWhite: '#383a42'
+};
+
+const darkTheme = {
+  foreground: '#f8f8f2',
+  background: '#1e1e1e',
+  cursor: '#f8f8f0',
+  black: '#000000',
+  red: '#ff5555',
+  green: '#50fa7b',
+  yellow: '#f1fa8c',
+  blue: '#bd93f9',
+  magenta: '#ff79c6',
+  cyan: '#8be9fd',
+  white: '#bfbfbf',
+  brightBlack: '#4d4d4d',
+  brightRed: '#ff6e6e',
+  brightGreen: '#69ff94',
+  brightYellow: '#ffffa5',
+  brightBlue: '#d6acff',
+  brightMagenta: '#ff92df',
+  brightCyan: '#a4ffff',
+  brightWhite: '#e6e6e6',
+};

utils/check_deps.js

@@ -167,7 +167,7 @@ async function innerCheckDeps(root) {
     if (!deps) {
       const depsListFile = path.join(depsDirectory, 'DEPS.list');
       deps = {};
-      let group;
+      let group = [];
       for (const line of fs.readFileSync(depsListFile, 'utf-8').split('\n').filter(Boolean).filter(l => !l.startsWith('#'))) {
         const groupMatch = line.match(/\[(.*)\]/);
         if (groupMatch) {
@@ -175,7 +175,9 @@ async function innerCheckDeps(root) {
           deps[groupMatch[1]] = group;
           continue;
         }
-        if (line.startsWith('@'))
+        if (line === '***')
+          group.push('***');
+        else if (line.startsWith('@'))
           group.push(line.replace(/@([\w-]+)\/(.*)/, (_, arg1, arg2) => packages.get(arg1) + arg2));
         else
           group.push(path.resolve(depsDirectory, line));
@@ -185,6 +187,8 @@ async function innerCheckDeps(root) {
 
     const mergedDeps = [...(deps['*'] || []), ...(deps[path.relative(depsDirectory, from)] || [])]
     for (const dep of mergedDeps) {
+      if (dep === '***')
+        return true;
       if (to === dep || toDirectory === dep)
         return true;
       if (dep.endsWith('**')) {