[pull] main from microsoft:main

packages/html-reporter/src/chip.css

@@ -27,6 +27,11 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  user-select: none;
+}
+
+.chip-header-allow-selection {
+  user-select: text;
 }
 
 .chip-header.expanded-false {

packages/html-reporter/src/common.css

@@ -203,7 +203,7 @@ article, aside, details, figcaption, figure, footer, header, main, menu, nav, se
   flex: none;
   position: relative;
   float: left;
-  padding: 5px 10px;
+  padding: 5px 8px;
   font-weight: 500;
   line-height: 20px;
   color: var(--color-fg-default);
@@ -228,6 +228,14 @@ article, aside, details, figcaption, figure, footer, header, main, menu, nav, se
   margin-left: -1px;
 }
 
+.subnav-item .octicon {
+  margin-right: 8px;
+}
+
+.subnav-item-label {
+  margin-right: 8px;
+}
+
 .counter {
   display: inline-block;
   min-width: 20px;
@@ -293,7 +301,6 @@ article, aside, details, figcaption, figure, footer, header, main, menu, nav, se
   }
 
   .subnav-item {
-    padding: 5px 3px;
     border: none;
   }
 

packages/html-reporter/src/headerView.css

@@ -24,6 +24,7 @@
 
 .header-view div {
   flex-shrink: 0;
+  flex-wrap: wrap;
 }
 
 .header-superheader {

packages/html-reporter/src/headerView.spec.tsx

@@ -38,8 +38,8 @@ test('should render counters', async ({ mount }) => {
   await expect(component.locator('a', { hasText: 'Skipped' }).locator('.counter')).toHaveText('10');
   await expect(component).toMatchAriaSnapshot(`
     - navigation:
-      - link "All 90"
-      - text: Passed 42 Failed 31 Flaky 17 Skipped 10
+      - link "All90"
+      - text: Passed42 Failed31 Flaky17 Skipped10
   `);
 });
 

packages/html-reporter/src/headerView.tsx

@@ -85,19 +85,27 @@ const StatsNavView: React.FC<{
   const q = searchParams.get('q')?.toString() || '';
   return <nav>
     <Link className='subnav-item' href='#?'>
-      All <span className='d-inline counter'>{stats.total - stats.skipped}</span>
+      <span className='subnav-item-label'>All</span>
+      <span className='d-inline counter'>{stats.total - stats.skipped}</span>
     </Link>
     <Link className='subnav-item' click={filterWithQuery(q, 's:passed', false)} ctrlClick={filterWithQuery(q, 's:passed', true)}>
-      Passed <span className='d-inline counter'>{stats.expected}</span>
+      <span className='subnav-item-label'>Passed</span>
+      <span className='d-inline counter'>{stats.expected}</span>
     </Link>
     <Link className='subnav-item' click={filterWithQuery(q, 's:failed', false)} ctrlClick={filterWithQuery(q, 's:failed', true)}>
-      {!!stats.unexpected && statusIcon('unexpected')} Failed <span className='d-inline counter'>{stats.unexpected}</span>
+      {!!stats.unexpected && statusIcon('unexpected')}
+      <span className='subnav-item-label'>Failed</span>
+      <span className='d-inline counter'>{stats.unexpected}</span>
     </Link>
     <Link className='subnav-item' click={filterWithQuery(q, 's:flaky', false)} ctrlClick={filterWithQuery(q, 's:flaky', true)}>
-      {!!stats.flaky && statusIcon('flaky')} Flaky <span className='d-inline counter'>{stats.flaky}</span>
+      {!!stats.flaky && statusIcon('flaky')}
+      <span className='subnav-item-label'>Flaky</span>
+      <span className='d-inline counter'>{stats.flaky}</span>
     </Link>
     <Link className='subnav-item' click={filterWithQuery(q, 's:skipped', false)} ctrlClick={filterWithQuery(q, 's:skipped', true)}>
-      Skipped <span className='d-inline counter'>{stats.skipped}</span>
+      {!!stats.skipped && statusIcon('skipped')}
+      <span className='subnav-item-label'>Skipped</span>
+      <span className='d-inline counter'>{stats.skipped}</span>
     </Link>
   </nav>;
 };

packages/html-reporter/src/icons.tsx

@@ -65,6 +65,12 @@ export const clock = () => {
   </svg>;
 };
 
+export const skip = () => {
+  return <svg aria-hidden='true' viewBox='0 0 16 16' width='16' height='16' data-view-component='true' className='octicon color-fg-muted'>
+    <path d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm9.78-2.22-5.5 5.5a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l5.5-5.5a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z'></path>
+  </svg>;
+};
+
 export const blank = () => {
   return <svg className='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'></svg>;
 };

packages/html-reporter/src/metadataView.css

@@ -17,14 +17,18 @@
 .metadata-toggle {
   cursor: pointer;
   user-select: none;
-  margin-left: 8px;
   color: var(--color-fg-default);
 }
 
+.metadata-toggle-second-line {
+  margin-top: 8px;
+  margin-left: 8px;
+}
+
 .metadata-view {
   border: 1px solid var(--color-border-default);
   border-radius: 6px;
-  margin-top: 8px;
+  margin-top: 12px;
 }
 
 .metadata-view .metadata-section {

packages/html-reporter/src/statusIcon.tsx

@@ -32,6 +32,6 @@ export function statusIcon(status: 'failed' | 'timedOut' | 'skipped' | 'passed'
       return icons.warning();
     case 'skipped':
     case 'interrupted':
-      return icons.blank();
+      return icons.skip();
   }
 }

packages/html-reporter/src/testFileView.css

@@ -41,6 +41,21 @@
   align-items: center;
 }
 
+.test-file-details-row-items {
+  display: flex;
+  height: 16px;
+}
+
+.test-file-details-row-items > .link-badge {
+  /* Align badges */
+  margin-top: -2px;
+}
+
+.test-file-details-row-items > .trace-link {
+  /* Center in row */
+  margin-top: -4px;
+}
+
 .test-file-path {
   text-overflow: ellipsis;
   overflow: hidden;
@@ -62,6 +77,11 @@
 .test-file-header-info {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px 8px;
   color: var(--color-fg-muted);
+}
+
+.test-file-header-br {
+  flex-basis: 100%;
+  height: 0;
 }

packages/html-reporter/src/testFileView.tsx

@@ -37,7 +37,7 @@ export const TestFileView: React.FC<React.PropsWithChildren<{
     expanded={isFileExpanded(file.fileId)}
     noInsets={true}
     setExpanded={(expanded => setFileExpanded(file.fileId, expanded))}
-    header={<span>
+    header={<span className='chip-header-allow-selection'>
       {file.fileName}
     </span>}>
     {file.tests.map(test =>
@@ -59,12 +59,14 @@ export const TestFileView: React.FC<React.PropsWithChildren<{
           <span data-testid='test-duration' style={{ minWidth: '50px', textAlign: 'right' }}>{msToString(test.duration)}</span>
         </div>
         <div className='test-file-details-row'>
-          <Link href={testResultHref({ test })} title={[...test.path, test.title].join(' › ')} className='test-file-path-link'>
-            <span className='test-file-path'>{test.___location.file}:{test.___location.line}</span>
-          </Link>
-          {imageDiffBadge(test)}
-          {videoBadge(test)}
-          <TraceLink test={test} dim={true} />
+          <div className='test-file-details-row-items'>
+            <Link href={testResultHref({ test })} title={[...test.path, test.title].join(' › ')} className='test-file-path-link'>
+              <span className='test-file-path'>{test.___location.file}:{test.___location.line}</span>
+            </Link>
+            {imageDiffBadge(test)}
+            {videoBadge(test)}
+            <TraceLink test={test} dim={true} />
+          </div>
         </div>
       </div>
     )}

packages/html-reporter/src/testFilesView.tsx

@@ -24,6 +24,7 @@ import { CodeSnippet } from './testErrorView';
 import * as icons from './icons';
 import { isMetadataEmpty, MetadataView } from './metadataView';
 import { HeaderView } from './headerView';
+import { clsx } from '@web/uiUtils';
 
 export const TestFilesView: React.FC<{
   tests: TestFileSummary[],
@@ -71,9 +72,19 @@ export const TestFilesHeader: React.FC<{
   if (!report)
     return null;
 
+  const showProject = report.projectNames.length === 1 && !!report.projectNames[0];
+  const isMetadataInTopLine = !showProject && !filteredStats;
+
+  const metadataToggleButton = !isMetadataEmpty(report.metadata) && (
+    <div className={clsx('metadata-toggle', !isMetadataInTopLine && 'metadata-toggle-second-line')} role='button' onClick={toggleMetadataVisible} title={metadataVisible ? 'Hide metadata' : 'Show metadata'}>
+      {metadataVisible ? icons.downArrow() : icons.rightArrow()}Metadata
+    </div>
+  );
+
   const leftSuperHeader = <div className='test-file-header-info'>
-    {report.projectNames.length === 1 && !!report.projectNames[0] && <div data-testid='project-name'>Project: {report.projectNames[0]}</div>}
+    {showProject && <div data-testid='project-name'>Project: {report.projectNames[0]}</div>}
     {filteredStats && <div data-testid='filtered-tests-count'>Filtered: {filteredStats.total} {!!filteredStats.total && ('(' + msToString(filteredStats.duration) + ')')}</div>}
+    {isMetadataInTopLine && metadataToggleButton}
   </div>;
 
   const rightSuperHeader = <>
@@ -83,9 +94,7 @@ export const TestFilesHeader: React.FC<{
 
   return <>
     <HeaderView title={report.title} leftSuperHeader={leftSuperHeader} rightSuperHeader={rightSuperHeader} />
-    {!isMetadataEmpty(report.metadata) && <div className='metadata-toggle' role='button' onClick={toggleMetadataVisible} title={metadataVisible ? 'Hide metadata' : 'Show metadata'}>
-      {metadataVisible ? icons.downArrow() : icons.rightArrow()}Metadata
-    </div>}
+    {!isMetadataInTopLine && metadataToggleButton}
     {metadataVisible && <MetadataView metadata={report.metadata}/>}
     {!!report.errors.length && <AutoChip header='Errors' dataTestId='report-errors'>
       {report.errors.map((error, index) => <CodeSnippet key={'test-report-error-message-' + index} code={error}/>)}

packages/playwright-core/src/protocol/validator.ts

@@ -358,14 +358,6 @@ scheme.LocalUtilsTraceDiscardedParams = tObject({
   stacksId: tString,
 });
 scheme.LocalUtilsTraceDiscardedResult = tOptional(tObject({}));
-scheme.LocalUtilsGlobToRegexParams = tObject({
-  glob: tString,
-  baseURL: tOptional(tString),
-  webSocketUrl: tOptional(tBoolean),
-});
-scheme.LocalUtilsGlobToRegexResult = tObject({
-  regex: tString,
-});
 scheme.RootInitializer = tOptional(tObject({}));
 scheme.RootInitializeParams = tObject({
   sdkLanguage: tType('SDKLanguage'),
@@ -464,12 +456,6 @@ scheme.DebugControllerSetReportStateChangedParams = tObject({
   enabled: tBoolean,
 });
 scheme.DebugControllerSetReportStateChangedResult = tOptional(tObject({}));
-scheme.DebugControllerResetForReuseParams = tOptional(tObject({}));
-scheme.DebugControllerResetForReuseResult = tOptional(tObject({}));
-scheme.DebugControllerNavigateParams = tObject({
-  url: tString,
-});
-scheme.DebugControllerNavigateResult = tOptional(tObject({}));
 scheme.DebugControllerSetRecorderModeParams = tObject({
   mode: tEnum(['inspecting', 'recording', 'none']),
   testIdAttributeName: tOptional(tString),
@@ -486,8 +472,6 @@ scheme.DebugControllerResumeParams = tOptional(tObject({}));
 scheme.DebugControllerResumeResult = tOptional(tObject({}));
 scheme.DebugControllerKillParams = tOptional(tObject({}));
 scheme.DebugControllerKillResult = tOptional(tObject({}));
-scheme.DebugControllerCloseAllBrowsersParams = tOptional(tObject({}));
-scheme.DebugControllerCloseAllBrowsersResult = tOptional(tObject({}));
 scheme.SocksSupportInitializer = tOptional(tObject({}));
 scheme.SocksSupportSocksRequestedEvent = tObject({
   uid: tString,

packages/playwright-core/src/server/chromium/videoRecorder.ts

@@ -14,13 +14,10 @@
  * limitations under the License.
  */
 
-import { assert, monotonicTime } from '../../utils';
-import { serverSideCallMetadata } from '../instrumentation';
+import { assert, debugLogger, monotonicTime } from '../../utils';
 import { Page } from '../page';
 import { launchProcess } from '../utils/processLauncher';
-import { ProgressController } from '../progress';
 
-import type { Progress } from '../progress';
 import type * as types from '../types';
 import type { ChildProcess } from 'child_process';
 
@@ -33,7 +30,6 @@ export class VideoRecorder {
   private _lastFrameTimestamp: number = 0;
   private _lastFrameBuffer: Buffer | null = null;
   private _lastWriteTimestamp: number = 0;
-  private readonly _progress: Progress;
   private _frameQueue: Buffer[] = [];
   private _isStopped = false;
   private _ffmpegPath: string;
@@ -42,18 +38,12 @@ export class VideoRecorder {
     if (!options.outputFile.endsWith('.webm'))
       throw new Error('File must have .webm extension');
 
-    const controller = new ProgressController(serverSideCallMetadata(), page);
-    controller.setLogName('browser');
-    return await controller.run(async progress => {
-      const recorder = new VideoRecorder(page, ffmpegPath, progress);
-      progress.cleanupWhenAborted(() => recorder.stop());
-      await recorder._launch(options);
-      return recorder;
-    });
+    const recorder = new VideoRecorder(page, ffmpegPath);
+    await recorder._launch(options);
+    return recorder;
   }
 
-  private constructor(page: Page, ffmpegPath: string, progress: Progress) {
-    this._progress = progress;
+  private constructor(page: Page, ffmpegPath: string) {
     this._ffmpegPath = ffmpegPath;
     page.on(Page.Events.ScreencastFrame, frame => this.writeFrame(frame.buffer, frame.frameSwapWallTime / 1000));
   }
@@ -102,27 +92,26 @@ export class VideoRecorder {
     const h = options.height;
     const args = `-loglevel error -f image2pipe -avioflags direct -fpsprobesize 0 -probesize 32 -analyzeduration 0 -c:v mjpeg -i pipe:0 -y -an -r ${fps} -c:v vp8 -qmin 0 -qmax 50 -crf 8 -deadline realtime -speed 8 -b:v 1M -threads 1 -vf pad=${w}:${h}:0:0:gray,crop=${w}:${h}:0:0`.split(' ');
     args.push(options.outputFile);
-    const progress = this._progress;
 
     const { launchedProcess, gracefullyClose } = await launchProcess({
       command: this._ffmpegPath,
       args,
       stdio: 'stdin',
-      log: (message: string) => progress.log(message),
+      log: (message: string) => debugLogger.log('browser', message),
       tempDirectories: [],
       attemptToGracefullyClose: async () => {
-        progress.log('Closing stdin...');
+        debugLogger.log('browser', 'Closing stdin...');
         launchedProcess.stdin!.end();
       },
       onExit: (exitCode, signal) => {
-        progress.log(`ffmpeg onkill exitCode=${exitCode} signal=${signal}`);
+        debugLogger.log('browser', `ffmpeg onkill exitCode=${exitCode} signal=${signal}`);
       },
     });
     launchedProcess.stdin!.on('finish', () => {
-      progress.log('ffmpeg finished input.');
+      debugLogger.log('browser', 'ffmpeg finished input.');
     });
     launchedProcess.stdin!.on('error', () => {
-      progress.log('ffmpeg error.');
+      debugLogger.log('browser', 'ffmpeg error.');
     });
     this._process = launchedProcess;
     this._gracefullyClose = gracefullyClose;
@@ -154,7 +143,7 @@ export class VideoRecorder {
   private async _sendFrame(frame: Buffer) {
     return new Promise(f => this._process!.stdin!.write(frame, f)).then(error => {
       if (error)
-        this._progress.log(`ffmpeg failed to write: ${String(error)}`);
+        debugLogger.log('browser', `ffmpeg failed to write: ${String(error)}`);
     });
   }