From 12ecd476dd485cdb662f51990c9494dcde30ae51 Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Mon, 23 Sep 2024 14:43:28 +0200
Subject: [PATCH 01/29] fix(watch): cancel waitForCommand when files change
 (#32761)

Fixes https://github.com/microsoft/playwright/issues/32758
---
 packages/playwright/src/runner/watchMode.ts | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/playwright/src/runner/watchMode.ts b/packages/playwright/src/runner/watchMode.ts
index a47ca0fe32..2a2c9802f1 100644
--- a/packages/playwright/src/runner/watchMode.ts
+++ b/packages/playwright/src/runner/watchMode.ts
@@ -144,11 +144,13 @@ export async function runWatchModeLoop(configLocation: ConfigLocation, initialOp
     else
       printPrompt();
 
+    const waitForCommand = readCommand();
     const command = await Promise.race([
       onDirtyTests,
-      readCommand(),
+      waitForCommand.result,
     ]);
-
+    if (command === 'changed')
+      waitForCommand.cancel();
     if (bufferMode && command === 'changed')
       continue;
 
@@ -282,7 +284,7 @@ async function runTests(watchOptions: WatchModeOptions, testServerConnection: Te
   });
 }
 
-function readCommand(): ManualPromise<Command> {
+function readCommand(): { result: Promise<Command>, cancel: () => void } {
   const result = new ManualPromise<Command>();
   const rl = readline.createInterface({ input: process.stdin, escapeCodeTimeout: 50 });
   readline.emitKeypressEvents(process.stdin, rl);
@@ -334,13 +336,14 @@ Change settings
   };
 
   process.stdin.on('keypress', handler);
-  void result.finally(() => {
+  const cancel = () => {
     process.stdin.off('keypress', handler);
     rl.close();
     if (process.stdin.isTTY)
       process.stdin.setRawMode(false);
-  });
-  return result;
+  };
+  void result.finally(cancel);
+  return { result, cancel };
 }
 
 let showBrowserServer: PlaywrightServer | undefined;

From 99895005e2a701eba922c4642ea6ac036245ef4b Mon Sep 17 00:00:00 2001
From: Playwright Service <89237858+playwrightmachine@users.noreply.github.com>
Date: Mon, 23 Sep 2024 05:47:44 -0700
Subject: [PATCH 02/29] feat(chromium-tip-of-tree): roll to r1262 (#32760)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
---
 packages/playwright-core/browsers.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/playwright-core/browsers.json b/packages/playwright-core/browsers.json
index 5fd2927700..2012fc1c9e 100644
--- a/packages/playwright-core/browsers.json
+++ b/packages/playwright-core/browsers.json
@@ -9,9 +9,9 @@
     },
     {
       "name": "chromium-tip-of-tree",
-      "revision": "1261",
+      "revision": "1262",
       "installByDefault": false,
-      "browserVersion": "131.0.6726.0"
+      "browserVersion": "131.0.6734.0"
     },
     {
       "name": "firefox",

From 0cdc7ee1a3b392d9ab37618e2ee32bc1b929caa3 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Mon, 23 Sep 2024 08:42:18 -0700
Subject: [PATCH 03/29] chore: extract polling recorder (#32749)

We are reusing recorder in a snapshot tab, no need for the polling
harness to be there.
---
 .../injected/recorder/pollingRecorder.ts      | 91 +++++++++++++++++++
 .../src/server/injected/recorder/recorder.ts  | 73 +--------------
 .../src/server/recorder/DEPS.list             |  2 +-
 .../src/server/recorder/contextRecorder.ts    |  2 +-
 utils/generate_injected.js                    |  2 +-
 5 files changed, 95 insertions(+), 75 deletions(-)
 create mode 100644 packages/playwright-core/src/server/injected/recorder/pollingRecorder.ts

diff --git a/packages/playwright-core/src/server/injected/recorder/pollingRecorder.ts b/packages/playwright-core/src/server/injected/recorder/pollingRecorder.ts
new file mode 100644
index 0000000000..57627f3723
--- /dev/null
+++ b/packages/playwright-core/src/server/injected/recorder/pollingRecorder.ts
@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Mode, OverlayState, UIState } from '@recorder/recorderTypes';
+import type * as actions from '../../recorder/recorderActions';
+import type { InjectedScript } from '../injectedScript';
+import { Recorder } from './recorder';
+import type { RecorderDelegate } from './recorder';
+
+interface Embedder {
+  __pw_recorderPerformAction(action: actions.PerformOnRecordAction): Promise<void>;
+  __pw_recorderRecordAction(action: actions.Action): Promise<void>;
+  __pw_recorderState(): Promise<UIState>;
+  __pw_recorderSetSelector(selector: string): Promise<void>;
+  __pw_recorderSetMode(mode: Mode): Promise<void>;
+  __pw_recorderSetOverlayState(state: OverlayState): Promise<void>;
+  __pw_refreshOverlay(): void;
+}
+
+export class PollingRecorder implements RecorderDelegate {
+  private _recorder: Recorder;
+  private _embedder: Embedder;
+  private _pollRecorderModeTimer: number | undefined;
+
+  constructor(injectedScript: InjectedScript) {
+    this._recorder = new Recorder(injectedScript);
+    this._embedder = injectedScript.window as any;
+
+    injectedScript.onGlobalListenersRemoved.add(() => this._recorder.installListeners());
+
+    const refreshOverlay = () => {
+      this._pollRecorderMode().catch(e => console.log(e)); // eslint-disable-line no-console
+    };
+    this._embedder.__pw_refreshOverlay = refreshOverlay;
+    refreshOverlay();
+  }
+
+  private async _pollRecorderMode() {
+    const pollPeriod = 1000;
+    if (this._pollRecorderModeTimer)
+      clearTimeout(this._pollRecorderModeTimer);
+    const state = await this._embedder.__pw_recorderState().catch(() => {});
+    if (!state) {
+      this._pollRecorderModeTimer = this._recorder.injectedScript.builtinSetTimeout(() => this._pollRecorderMode(), pollPeriod);
+      return;
+    }
+    const win = this._recorder.document.defaultView!;
+    if (win.top !== win) {
+      // Only show action point in the main frame, since it is relative to the page's viewport.
+      // Otherwise we'll see multiple action points at different locations.
+      state.actionPoint = undefined;
+    }
+    this._recorder.setUIState(state, this);
+    this._pollRecorderModeTimer = this._recorder.injectedScript.builtinSetTimeout(() => this._pollRecorderMode(), pollPeriod);
+  }
+
+  async performAction(action: actions.PerformOnRecordAction) {
+    await this._embedder.__pw_recorderPerformAction(action);
+  }
+
+  async recordAction(action: actions.Action): Promise<void> {
+    await this._embedder.__pw_recorderRecordAction(action);
+  }
+
+  async setSelector(selector: string): Promise<void> {
+    await this._embedder.__pw_recorderSetSelector(selector);
+  }
+
+  async setMode(mode: Mode): Promise<void> {
+    await this._embedder.__pw_recorderSetMode(mode);
+  }
+
+  async setOverlayState(state: OverlayState): Promise<void> {
+    await this._embedder.__pw_recorderSetOverlayState(state);
+  }
+}
+
+export default PollingRecorder;
diff --git a/packages/playwright-core/src/server/injected/recorder/recorder.ts b/packages/playwright-core/src/server/injected/recorder/recorder.ts
index 76d5791b64..c255a14b08 100644
--- a/packages/playwright-core/src/server/injected/recorder/recorder.ts
+++ b/packages/playwright-core/src/server/injected/recorder/recorder.ts
@@ -21,9 +21,8 @@ import type { Mode, OverlayState, UIState } from '@recorder/recorderTypes';
 import type { ElementText } from '../selectorUtils';
 import type { Highlight, HighlightOptions } from '../highlight';
 import clipPaths from './clipPaths';
-import type { SimpleDomNode } from '../simpleDom';
 
-interface RecorderDelegate {
+export interface RecorderDelegate {
   performAction?(action: actions.PerformOnRecordAction): Promise<void>;
   recordAction?(action: actions.Action): Promise<void>;
   setSelector?(selector: string): Promise<void>;
@@ -1457,73 +1456,3 @@ function createSvgElement(doc: Document, { tagName, attrs, children }: SvgJson):
 
   return elem;
 }
-
-interface Embedder {
-  __pw_recorderPerformAction(action: actions.PerformOnRecordAction, simpleDomNode?: SimpleDomNode): Promise<void>;
-  __pw_recorderRecordAction(action: actions.Action, simpleDomNode?: SimpleDomNode): Promise<void>;
-  __pw_recorderState(): Promise<UIState>;
-  __pw_recorderSetSelector(selector: string): Promise<void>;
-  __pw_recorderSetMode(mode: Mode): Promise<void>;
-  __pw_recorderSetOverlayState(state: OverlayState): Promise<void>;
-  __pw_refreshOverlay(): void;
-}
-
-export class PollingRecorder implements RecorderDelegate {
-  private _recorder: Recorder;
-  private _embedder: Embedder;
-  private _pollRecorderModeTimer: number | undefined;
-
-  constructor(injectedScript: InjectedScript) {
-    this._recorder = new Recorder(injectedScript);
-    this._embedder = injectedScript.window as any;
-
-    injectedScript.onGlobalListenersRemoved.add(() => this._recorder.installListeners());
-
-    const refreshOverlay = () => {
-      this._pollRecorderMode().catch(e => console.log(e)); // eslint-disable-line no-console
-    };
-    this._embedder.__pw_refreshOverlay = refreshOverlay;
-    refreshOverlay();
-  }
-
-  private async _pollRecorderMode() {
-    const pollPeriod = 1000;
-    if (this._pollRecorderModeTimer)
-      clearTimeout(this._pollRecorderModeTimer);
-    const state = await this._embedder.__pw_recorderState().catch(() => {});
-    if (!state) {
-      this._pollRecorderModeTimer = this._recorder.injectedScript.builtinSetTimeout(() => this._pollRecorderMode(), pollPeriod);
-      return;
-    }
-    const win = this._recorder.document.defaultView!;
-    if (win.top !== win) {
-      // Only show action point in the main frame, since it is relative to the page's viewport.
-      // Otherwise we'll see multiple action points at different locations.
-      state.actionPoint = undefined;
-    }
-    this._recorder.setUIState(state, this);
-    this._pollRecorderModeTimer = this._recorder.injectedScript.builtinSetTimeout(() => this._pollRecorderMode(), pollPeriod);
-  }
-
-  async performAction(action: actions.PerformOnRecordAction, simpleDomNode?: SimpleDomNode) {
-    await this._embedder.__pw_recorderPerformAction(action, simpleDomNode);
-  }
-
-  async recordAction(action: actions.Action, simpleDomNode?: SimpleDomNode): Promise<void> {
-    await this._embedder.__pw_recorderRecordAction(action, simpleDomNode);
-  }
-
-  async setSelector(selector: string): Promise<void> {
-    await this._embedder.__pw_recorderSetSelector(selector);
-  }
-
-  async setMode(mode: Mode): Promise<void> {
-    await this._embedder.__pw_recorderSetMode(mode);
-  }
-
-  async setOverlayState(state: OverlayState): Promise<void> {
-    await this._embedder.__pw_recorderSetOverlayState(state);
-  }
-}
-
-export default PollingRecorder;
diff --git a/packages/playwright-core/src/server/recorder/DEPS.list b/packages/playwright-core/src/server/recorder/DEPS.list
index f3bbfc23bf..85ae7c9152 100644
--- a/packages/playwright-core/src/server/recorder/DEPS.list
+++ b/packages/playwright-core/src/server/recorder/DEPS.list
@@ -5,7 +5,7 @@
 ../isomorphic/**
 ../registry/**
 ../../common/
-../../generated/recorderSource.ts
+../../generated/pollingRecorderSource.ts
 ../../protocol/
 ../../utils/**
 ../../utilsBundle.ts
diff --git a/packages/playwright-core/src/server/recorder/contextRecorder.ts b/packages/playwright-core/src/server/recorder/contextRecorder.ts
index dc38866167..694393b860 100644
--- a/packages/playwright-core/src/server/recorder/contextRecorder.ts
+++ b/packages/playwright-core/src/server/recorder/contextRecorder.ts
@@ -17,7 +17,7 @@
 import type * as channels from '@protocol/channels';
 import type { Source } from '@recorder/recorderTypes';
 import { EventEmitter } from 'events';
-import * as recorderSource from '../../generated/recorderSource';
+import * as recorderSource from '../../generated/pollingRecorderSource';
 import { eventsHelper, monotonicTime, quoteCSSAttributeValue, type RegisteredListener } from '../../utils';
 import { raceAgainstDeadline } from '../../utils/timeoutRunner';
 import { BrowserContext } from '../browserContext';
diff --git a/utils/generate_injected.js b/utils/generate_injected.js
index cb56ce2db5..bffef1cfaa 100644
--- a/utils/generate_injected.js
+++ b/utils/generate_injected.js
@@ -45,7 +45,7 @@ const injectedScripts = [
     true,
   ],
   [
-    path.join(ROOT, 'packages', 'playwright-core', 'src', 'server', 'injected', 'recorder', 'recorder.ts'),
+    path.join(ROOT, 'packages', 'playwright-core', 'src', 'server', 'injected', 'recorder', 'pollingRecorder.ts'),
     path.join(ROOT, 'packages', 'playwright-core', 'lib', 'server', 'injected', 'packed'),
     path.join(ROOT, 'packages', 'playwright-core', 'src', 'generated'),
     true,

From 281eff120926203229468309452a0df2e3a7e245 Mon Sep 17 00:00:00 2001
From: Mathias Leppich <mleppich@muhqu.de>
Date: Mon, 23 Sep 2024 22:17:47 +0200
Subject: [PATCH 04/29] docs(trial): note that modifier keys are pressed
 regardless of trial option (#32734)

---
 docs/src/api/class-frame.md               |  8 ++--
 docs/src/api/class-locator.md             |  8 ++--
 docs/src/api/class-page.md                |  8 ++--
 docs/src/api/params.md                    |  5 +++
 packages/playwright-core/types/types.d.ts | 48 +++++++++++++++++------
 5 files changed, 53 insertions(+), 24 deletions(-)

diff --git a/docs/src/api/class-frame.md b/docs/src/api/class-frame.md
index f3f308622f..bf3666b9be 100644
--- a/docs/src/api/class-frame.md
+++ b/docs/src/api/class-frame.md
@@ -280,7 +280,7 @@ When all steps combined have not finished during the specified [`option: timeout
 ### option: Frame.click.timeout = %%-input-timeout-js-%%
 * since: v1.8
 
-### option: Frame.click.trial = %%-input-trial-%%
+### option: Frame.click.trial = %%-input-trial-with-modifiers-%%
 * since: v1.11
 
 ## async method: Frame.content
@@ -341,7 +341,7 @@ When all steps combined have not finished during the specified [`option: timeout
 ### option: Frame.dblclick.timeout = %%-input-timeout-js-%%
 * since: v1.8
 
-### option: Frame.dblclick.trial = %%-input-trial-%%
+### option: Frame.dblclick.trial = %%-input-trial-with-modifiers-%%
 * since: v1.11
 
 ## async method: Frame.dispatchEvent
@@ -1153,7 +1153,7 @@ When all steps combined have not finished during the specified [`option: timeout
 ### option: Frame.hover.timeout = %%-input-timeout-js-%%
 * since: v1.8
 
-### option: Frame.hover.trial = %%-input-trial-%%
+### option: Frame.hover.trial = %%-input-trial-with-modifiers-%%
 * since: v1.11
 
 ### option: Frame.hover.noWaitAfter = %%-input-no-wait-after-removed-%%
@@ -1703,7 +1703,7 @@ When all steps combined have not finished during the specified [`option: timeout
 ### option: Frame.tap.timeout = %%-input-timeout-js-%%
 * since: v1.8
 
-### option: Frame.tap.trial = %%-input-trial-%%
+### option: Frame.tap.trial = %%-input-trial-with-modifiers-%%
 * since: v1.11
 
 ## async method: Frame.textContent
diff --git a/docs/src/api/class-locator.md b/docs/src/api/class-locator.md
index 88658b5494..86de53841c 100644
--- a/docs/src/api/class-locator.md
+++ b/docs/src/api/class-locator.md
@@ -433,7 +433,7 @@ await page.Locator("canvas").ClickAsync(new() {
 ### option: Locator.click.timeout = %%-input-timeout-js-%%
 * since: v1.14
 
-### option: Locator.click.trial = %%-input-trial-%%
+### option: Locator.click.trial = %%-input-trial-with-modifiers-%%
 * since: v1.14
 
 ## async method: Locator.count
@@ -516,7 +516,7 @@ When all steps combined have not finished during the specified [`option: timeout
 ### option: Locator.dblclick.timeout = %%-input-timeout-js-%%
 * since: v1.14
 
-### option: Locator.dblclick.trial = %%-input-trial-%%
+### option: Locator.dblclick.trial = %%-input-trial-with-modifiers-%%
 * since: v1.14
 
 ## async method: Locator.dispatchEvent
@@ -1266,7 +1266,7 @@ When all steps combined have not finished during the specified [`option: timeout
 ### option: Locator.hover.timeout = %%-input-timeout-js-%%
 * since: v1.14
 
-### option: Locator.hover.trial = %%-input-trial-%%
+### option: Locator.hover.trial = %%-input-trial-with-modifiers-%%
 * since: v1.14
 
 ### option: Locator.hover.noWaitAfter = %%-input-no-wait-after-removed-%%
@@ -2331,7 +2331,7 @@ When all steps combined have not finished during the specified [`option: timeout
 ### option: Locator.tap.timeout = %%-input-timeout-js-%%
 * since: v1.14
 
-### option: Locator.tap.trial = %%-input-trial-%%
+### option: Locator.tap.trial = %%-input-trial-with-modifiers-%%
 * since: v1.14
 
 ## async method: Locator.textContent
diff --git a/docs/src/api/class-page.md b/docs/src/api/class-page.md
index c0890d04ff..b437b9313e 100644
--- a/docs/src/api/class-page.md
+++ b/docs/src/api/class-page.md
@@ -812,7 +812,7 @@ When all steps combined have not finished during the specified [`option: timeout
 ### option: Page.click.timeout = %%-input-timeout-js-%%
 * since: v1.8
 
-### option: Page.click.trial = %%-input-trial-%%
+### option: Page.click.trial = %%-input-trial-with-modifiers-%%
 * since: v1.11
 
 ## async method: Page.close
@@ -915,7 +915,7 @@ When all steps combined have not finished during the specified [`option: timeout
 ### option: Page.dblclick.timeout = %%-input-timeout-js-%%
 * since: v1.8
 
-### option: Page.dblclick.trial = %%-input-trial-%%
+### option: Page.dblclick.trial = %%-input-trial-with-modifiers-%%
 * since: v1.11
 
 ## async method: Page.dispatchEvent
@@ -2437,7 +2437,7 @@ When all steps combined have not finished during the specified [`option: timeout
 ### option: Page.hover.timeout = %%-input-timeout-js-%%
 * since: v1.8
 
-### option: Page.hover.trial = %%-input-trial-%%
+### option: Page.hover.trial = %%-input-trial-with-modifiers-%%
 * since: v1.11
 
 ### option: Page.hover.noWaitAfter = %%-input-no-wait-after-removed-%%
@@ -4099,7 +4099,7 @@ When all steps combined have not finished during the specified [`option: timeout
 ### option: Page.tap.timeout = %%-input-timeout-js-%%
 * since: v1.8
 
-### option: Page.tap.trial = %%-input-trial-%%
+### option: Page.tap.trial = %%-input-trial-with-modifiers-%%
 * since: v1.11
 
 ## async method: Page.textContent
diff --git a/docs/src/api/params.md b/docs/src/api/params.md
index de930ee97e..4a0e3af657 100644
--- a/docs/src/api/params.md
+++ b/docs/src/api/params.md
@@ -136,6 +136,11 @@ defaults to 1. See [UIEvent.detail].
 
 When set, this method only performs the [actionability](../actionability.md) checks and skips the action. Defaults to `false`. Useful to wait until the element is ready for the action without performing it.
 
+## input-trial-with-modifiers
+- `trial` <[boolean]>
+
+When set, this method only performs the [actionability](../actionability.md) checks and skips the action. Defaults to `false`. Useful to wait until the element is ready for the action without performing it. Note that keyboard `modifiers` will be pressed regardless of `trial` to allow testing elements which are only visible when those keys are pressed.
+
 ## input-source-position
 - `sourcePosition` <[Object]>
   - `x` <[float]>
diff --git a/packages/playwright-core/types/types.d.ts b/packages/playwright-core/types/types.d.ts
index d6d4e7f39b..e0c640db6f 100644
--- a/packages/playwright-core/types/types.d.ts
+++ b/packages/playwright-core/types/types.d.ts
@@ -2120,7 +2120,9 @@ export interface Page {
 
     /**
      * When set, this method only performs the [actionability](https://playwright.dev/docs/actionability) checks and skips the action. Defaults
-     * to `false`. Useful to wait until the element is ready for the action without performing it.
+     * to `false`. Useful to wait until the element is ready for the action without performing it. Note that keyboard
+     * `modifiers` will be pressed regardless of `trial` to allow testing elements which are only visible when those keys
+     * are pressed.
      */
     trial?: boolean;
   }): Promise<void>;
@@ -2233,7 +2235,9 @@ export interface Page {
 
     /**
      * When set, this method only performs the [actionability](https://playwright.dev/docs/actionability) checks and skips the action. Defaults
-     * to `false`. Useful to wait until the element is ready for the action without performing it.
+     * to `false`. Useful to wait until the element is ready for the action without performing it. Note that keyboard
+     * `modifiers` will be pressed regardless of `trial` to allow testing elements which are only visible when those keys
+     * are pressed.
      */
     trial?: boolean;
   }): Promise<void>;
@@ -3125,7 +3129,9 @@ export interface Page {
 
     /**
      * When set, this method only performs the [actionability](https://playwright.dev/docs/actionability) checks and skips the action. Defaults
-     * to `false`. Useful to wait until the element is ready for the action without performing it.
+     * to `false`. Useful to wait until the element is ready for the action without performing it. Note that keyboard
+     * `modifiers` will be pressed regardless of `trial` to allow testing elements which are only visible when those keys
+     * are pressed.
      */
     trial?: boolean;
   }): Promise<void>;
@@ -4266,7 +4272,9 @@ export interface Page {
 
     /**
      * When set, this method only performs the [actionability](https://playwright.dev/docs/actionability) checks and skips the action. Defaults
-     * to `false`. Useful to wait until the element is ready for the action without performing it.
+     * to `false`. Useful to wait until the element is ready for the action without performing it. Note that keyboard
+     * `modifiers` will be pressed regardless of `trial` to allow testing elements which are only visible when those keys
+     * are pressed.
      */
     trial?: boolean;
   }): Promise<void>;
@@ -5845,7 +5853,9 @@ export interface Frame {
 
     /**
      * When set, this method only performs the [actionability](https://playwright.dev/docs/actionability) checks and skips the action. Defaults
-     * to `false`. Useful to wait until the element is ready for the action without performing it.
+     * to `false`. Useful to wait until the element is ready for the action without performing it. Note that keyboard
+     * `modifiers` will be pressed regardless of `trial` to allow testing elements which are only visible when those keys
+     * are pressed.
      */
     trial?: boolean;
   }): Promise<void>;
@@ -5931,7 +5941,9 @@ export interface Frame {
 
     /**
      * When set, this method only performs the [actionability](https://playwright.dev/docs/actionability) checks and skips the action. Defaults
-     * to `false`. Useful to wait until the element is ready for the action without performing it.
+     * to `false`. Useful to wait until the element is ready for the action without performing it. Note that keyboard
+     * `modifiers` will be pressed regardless of `trial` to allow testing elements which are only visible when those keys
+     * are pressed.
      */
     trial?: boolean;
   }): Promise<void>;
@@ -6621,7 +6633,9 @@ export interface Frame {
 
     /**
      * When set, this method only performs the [actionability](https://playwright.dev/docs/actionability) checks and skips the action. Defaults
-     * to `false`. Useful to wait until the element is ready for the action without performing it.
+     * to `false`. Useful to wait until the element is ready for the action without performing it. Note that keyboard
+     * `modifiers` will be pressed regardless of `trial` to allow testing elements which are only visible when those keys
+     * are pressed.
      */
     trial?: boolean;
   }): Promise<void>;
@@ -7308,7 +7322,9 @@ export interface Frame {
 
     /**
      * When set, this method only performs the [actionability](https://playwright.dev/docs/actionability) checks and skips the action. Defaults
-     * to `false`. Useful to wait until the element is ready for the action without performing it.
+     * to `false`. Useful to wait until the element is ready for the action without performing it. Note that keyboard
+     * `modifiers` will be pressed regardless of `trial` to allow testing elements which are only visible when those keys
+     * are pressed.
      */
     trial?: boolean;
   }): Promise<void>;
@@ -12045,7 +12061,9 @@ export interface Locator {
 
     /**
      * When set, this method only performs the [actionability](https://playwright.dev/docs/actionability) checks and skips the action. Defaults
-     * to `false`. Useful to wait until the element is ready for the action without performing it.
+     * to `false`. Useful to wait until the element is ready for the action without performing it. Note that keyboard
+     * `modifiers` will be pressed regardless of `trial` to allow testing elements which are only visible when those keys
+     * are pressed.
      */
     trial?: boolean;
   }): Promise<void>;
@@ -12155,7 +12173,9 @@ export interface Locator {
 
     /**
      * When set, this method only performs the [actionability](https://playwright.dev/docs/actionability) checks and skips the action. Defaults
-     * to `false`. Useful to wait until the element is ready for the action without performing it.
+     * to `false`. Useful to wait until the element is ready for the action without performing it. Note that keyboard
+     * `modifiers` will be pressed regardless of `trial` to allow testing elements which are only visible when those keys
+     * are pressed.
      */
     trial?: boolean;
   }): Promise<void>;
@@ -12825,7 +12845,9 @@ export interface Locator {
 
     /**
      * When set, this method only performs the [actionability](https://playwright.dev/docs/actionability) checks and skips the action. Defaults
-     * to `false`. Useful to wait until the element is ready for the action without performing it.
+     * to `false`. Useful to wait until the element is ready for the action without performing it. Note that keyboard
+     * `modifiers` will be pressed regardless of `trial` to allow testing elements which are only visible when those keys
+     * are pressed.
      */
     trial?: boolean;
   }): Promise<void>;
@@ -13626,7 +13648,9 @@ export interface Locator {
 
     /**
      * When set, this method only performs the [actionability](https://playwright.dev/docs/actionability) checks and skips the action. Defaults
-     * to `false`. Useful to wait until the element is ready for the action without performing it.
+     * to `false`. Useful to wait until the element is ready for the action without performing it. Note that keyboard
+     * `modifiers` will be pressed regardless of `trial` to allow testing elements which are only visible when those keys
+     * are pressed.
      */
     trial?: boolean;
   }): Promise<void>;

From 26dc8955d3259a598038d5da2e8b5647ee4cde32 Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Mon, 23 Sep 2024 22:22:57 +0200
Subject: [PATCH 05/29] docs: explain glob patterns (#32728)

---
 docs/src/network.md | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/docs/src/network.md b/docs/src/network.md
index 152231556e..4d6f229678 100644
--- a/docs/src/network.md
+++ b/docs/src/network.md
@@ -700,6 +700,27 @@ await Page.RouteAsync("**/title.html", async route =>
 });
 ```
 
+## Glob URL patterns
+
+Playwright uses simplified glob patterns for URL matching in network interception methods like [`method: Page.route`] or [`method: Page.waitForResponse`]. These patterns support basic wildcards:
+
+1. Asterisks:
+  - A single `*` matches any characters except `/`
+  - A double `**` matches any characters including `/`
+1. Question mark `?` matches any single character except `/`
+1. Curly braces `{}` can be used to match a list of options separated by commas `,`
+
+Examples:
+- `https://example.com/*.js` matches `https://example.com/file.js` but not `https://example.com/path/file.js`
+- `**/*.js` matches both `https://example.com/file.js` and `https://example.com/path/file.js`
+- `**/*.{png,jpg,jpeg}` matches all image requests
+
+Important notes:
+
+- The glob pattern must match the entire URL, not just a part of it.
+- When using globs for URL matching, consider the full URL structure, including the protocol and path separators.
+- For more complex matching requirements, consider using [RegExp] instead of glob patterns.
+
 ## WebSockets
 
 Playwright supports [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) inspection out of the box. Every time a WebSocket is created, the [`event: Page.webSocket`] event is fired. This event contains the [WebSocket] instance for further web socket frames inspection:

From c9a26e60f507c593a4c22d87021889323b078e66 Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Mon, 23 Sep 2024 14:30:40 -0700
Subject: [PATCH 06/29] fix(webkit): 204 response is not a failure (#32768)

The login being changed was added in
https://github.com/microsoft/playwright/pull/1260 and is supposed to
only work for navigation requests.

Reference: https://github.com/microsoft/playwright/issues/32752
---
 .../playwright-core/src/server/webkit/wkPage.ts |  2 +-
 tests/page/page-event-request.spec.ts           | 17 +++++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/playwright-core/src/server/webkit/wkPage.ts b/packages/playwright-core/src/server/webkit/wkPage.ts
index 2f579b619b..f432f85459 100644
--- a/packages/playwright-core/src/server/webkit/wkPage.ts
+++ b/packages/playwright-core/src/server/webkit/wkPage.ts
@@ -1116,7 +1116,7 @@ export class WKPage implements PageDelegate {
     const response = request.createResponse(event.response);
     this._page._frameManager.requestReceivedResponse(response);
 
-    if (response.status() === 204) {
+    if (response.status() === 204 && request.request.isNavigationRequest()) {
       this._onLoadingFailed(session, {
         requestId: event.requestId,
         errorText: 'Aborted: 204 No Content',
diff --git a/tests/page/page-event-request.spec.ts b/tests/page/page-event-request.spec.ts
index cfc2f7a1e2..f32f224374 100644
--- a/tests/page/page-event-request.spec.ts
+++ b/tests/page/page-event-request.spec.ts
@@ -241,3 +241,20 @@ it('main resource xhr should have type xhr', async ({ page, server }) => {
   expect(request.isNavigationRequest()).toBe(false);
   expect(request.resourceType()).toBe('xhr');
 });
+
+it('should finish 204 request', {
+  annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/32752' }
+}, async ({ page, server, browserName }) => {
+  it.fixme(browserName === 'chromium');
+  server.setRoute('/204', (req, res) => {
+    res.writeHead(204, { 'Content-type': 'text/plain' });
+    res.end();
+  });
+  await page.goto(server.EMPTY_PAGE);
+  const reqPromise = Promise.race([
+    page.waitForEvent('requestfailed', r => r.url().endsWith('/204')).then(() => 'requestfailed'),
+    page.waitForEvent('requestfinished', r => r.url().endsWith('/204')).then(() => 'requestfinished'),
+  ]);
+  page.evaluate(async url => { await fetch(url); }, server.PREFIX + '/204').catch(() => {});
+  expect(await reqPromise).toBe('requestfinished');
+});

From 0ee9a8292647947912594705c5c6198b12f54064 Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Mon, 23 Sep 2024 23:31:04 +0200
Subject: [PATCH 07/29] test: skip 'should work with error after successful
 open' on WebKit Windows (#32769)

---
 tests/library/route-web-socket.spec.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tests/library/route-web-socket.spec.ts b/tests/library/route-web-socket.spec.ts
index 207d581919..db509a69f2 100644
--- a/tests/library/route-web-socket.spec.ts
+++ b/tests/library/route-web-socket.spec.ts
@@ -144,9 +144,10 @@ for (const mock of ['no-mock', 'no-match', 'pass-through']) {
       ]);
     });
 
-    test('should work with error after successful open', async ({ page, server, browserName, isLinux }) => {
+    test('should work with error after successful open', async ({ page, server, browserName, isLinux, isWindows }) => {
       test.skip(browserName === 'firefox', 'Firefox does not close the websocket upon a bad frame');
       test.skip(browserName === 'webkit' && isLinux, 'WebKit linux does not close the websocket upon a bad frame');
+      test.skip(browserName === 'webkit' && isWindows, 'WebKit Windows does not close the websocket upon a bad frame');
 
       const upgradePromise = server.waitForUpgrade();
       await setupWS(page, server.PORT, 'blob');

From 11320d34c64706e42ab4ca41aef3cc84d05dc970 Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Mon, 23 Sep 2024 15:48:11 -0700
Subject: [PATCH 08/29] Revert chore: ignore third-party execution contexts
 (#32437) (#32771)

Partially revert #32437 and add a test that console.log() messages from
content scripts are properly reported

Fixes https://github.com/microsoft/playwright/issues/32762
---
 .../src/server/chromium/crPage.ts             |  7 +++----
 packages/playwright-core/src/server/dom.ts    |  4 ++--
 .../src/server/firefox/ffPage.ts              |  7 +++----
 .../src/server/webkit/wkPage.ts               |  7 +++----
 .../extension-with-logging/background.js      |  5 +++++
 .../assets/extension-with-logging/content.js  |  1 +
 .../extension-with-logging/manifest.json      | 17 +++++++++++++++
 tests/library/chromium/launcher.spec.ts       | 21 +++++++++++++++++++
 8 files changed, 55 insertions(+), 14 deletions(-)
 create mode 100644 tests/assets/extension-with-logging/background.js
 create mode 100644 tests/assets/extension-with-logging/content.js
 create mode 100644 tests/assets/extension-with-logging/manifest.json

diff --git a/packages/playwright-core/src/server/chromium/crPage.ts b/packages/playwright-core/src/server/chromium/crPage.ts
index fbdc9db91a..bba14ff00e 100644
--- a/packages/playwright-core/src/server/chromium/crPage.ts
+++ b/packages/playwright-core/src/server/chromium/crPage.ts
@@ -694,16 +694,15 @@ class FrameSession {
     if (!frame || this._eventBelongsToStaleFrame(frame._id))
       return;
     const delegate = new CRExecutionContext(this._client, contextPayload);
-    let worldName: types.World;
+    let worldName: types.World|null = null;
     if (contextPayload.auxData && !!contextPayload.auxData.isDefault)
       worldName = 'main';
     else if (contextPayload.name === UTILITY_WORLD_NAME)
       worldName = 'utility';
-    else
-      return;
     const context = new dom.FrameExecutionContext(delegate, frame, worldName);
     (context as any)[contextDelegateSymbol] = delegate;
-    frame._contextCreated(worldName, context);
+    if (worldName)
+      frame._contextCreated(worldName, context);
     this._contextIdToContext.set(contextPayload.id, context);
   }
 
diff --git a/packages/playwright-core/src/server/dom.ts b/packages/playwright-core/src/server/dom.ts
index 55105bd50c..05a8b4fda2 100644
--- a/packages/playwright-core/src/server/dom.ts
+++ b/packages/playwright-core/src/server/dom.ts
@@ -50,9 +50,9 @@ export function isNonRecoverableDOMError(error: Error) {
 export class FrameExecutionContext extends js.ExecutionContext {
   readonly frame: frames.Frame;
   private _injectedScriptPromise?: Promise<js.JSHandle>;
-  readonly world: types.World;
+  readonly world: types.World | null;
 
-  constructor(delegate: js.ExecutionContextDelegate, frame: frames.Frame, world: types.World) {
+  constructor(delegate: js.ExecutionContextDelegate, frame: frames.Frame, world: types.World|null) {
     super(frame, delegate, world || 'content-script');
     this.frame = frame;
     this.world = world;
diff --git a/packages/playwright-core/src/server/firefox/ffPage.ts b/packages/playwright-core/src/server/firefox/ffPage.ts
index 03a27954dd..9dfffc1eb3 100644
--- a/packages/playwright-core/src/server/firefox/ffPage.ts
+++ b/packages/playwright-core/src/server/firefox/ffPage.ts
@@ -163,16 +163,15 @@ export class FFPage implements PageDelegate {
     if (!frame)
       return;
     const delegate = new FFExecutionContext(this._session, executionContextId);
-    let worldName: types.World;
+    let worldName: types.World|null = null;
     if (auxData.name === UTILITY_WORLD_NAME)
       worldName = 'utility';
     else if (!auxData.name)
       worldName = 'main';
-    else
-      return;
     const context = new dom.FrameExecutionContext(delegate, frame, worldName);
     (context as any)[contextDelegateSymbol] = delegate;
-    frame._contextCreated(worldName, context);
+    if (worldName)
+      frame._contextCreated(worldName, context);
     this._contextIdToContext.set(executionContextId, context);
   }
 
diff --git a/packages/playwright-core/src/server/webkit/wkPage.ts b/packages/playwright-core/src/server/webkit/wkPage.ts
index f432f85459..320df04ce2 100644
--- a/packages/playwright-core/src/server/webkit/wkPage.ts
+++ b/packages/playwright-core/src/server/webkit/wkPage.ts
@@ -502,16 +502,15 @@ export class WKPage implements PageDelegate {
     if (!frame)
       return;
     const delegate = new WKExecutionContext(this._session, contextPayload.id);
-    let worldName: types.World;
+    let worldName: types.World|null = null;
     if (contextPayload.type === 'normal')
       worldName = 'main';
     else if (contextPayload.type === 'user' && contextPayload.name === UTILITY_WORLD_NAME)
       worldName = 'utility';
-    else
-      return;
     const context = new dom.FrameExecutionContext(delegate, frame, worldName);
     (context as any)[contextDelegateSymbol] = delegate;
-    frame._contextCreated(worldName, context);
+    if (worldName)
+      frame._contextCreated(worldName, context);
     this._contextIdToContext.set(contextPayload.id, context);
   }
 
diff --git a/tests/assets/extension-with-logging/background.js b/tests/assets/extension-with-logging/background.js
new file mode 100644
index 0000000000..3780fa3f21
--- /dev/null
+++ b/tests/assets/extension-with-logging/background.js
@@ -0,0 +1,5 @@
+console.log("Service worker script loaded");
+
+chrome.runtime.onInstalled.addListener(() => {
+  console.log("Extension installed");
+});
\ No newline at end of file
diff --git a/tests/assets/extension-with-logging/content.js b/tests/assets/extension-with-logging/content.js
new file mode 100644
index 0000000000..e718206c2a
--- /dev/null
+++ b/tests/assets/extension-with-logging/content.js
@@ -0,0 +1 @@
+console.log("Test console log from a third-party execution context");
diff --git a/tests/assets/extension-with-logging/manifest.json b/tests/assets/extension-with-logging/manifest.json
new file mode 100644
index 0000000000..429dc77980
--- /dev/null
+++ b/tests/assets/extension-with-logging/manifest.json
@@ -0,0 +1,17 @@
+{
+    "manifest_version": 3,
+    "name": "Console Log Extension",
+    "version": "1.0",
+    "background": {
+      "service_worker": "background.js"
+    },
+    "permissions": [
+      "tabs"
+    ],
+    "content_scripts": [
+      {
+        "matches": ["<all_urls>"],
+        "js": ["content.js"]
+      }
+    ]
+  }
\ No newline at end of file
diff --git a/tests/library/chromium/launcher.spec.ts b/tests/library/chromium/launcher.spec.ts
index eb0fc997ad..f36a089fa7 100644
--- a/tests/library/chromium/launcher.spec.ts
+++ b/tests/library/chromium/launcher.spec.ts
@@ -146,6 +146,27 @@ it('should support request/response events when using backgroundPage()', async (
   await context.close();
 });
 
+it('should report console messages from content script', {
+  annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/32762' }
+}, async ({ browserType, createUserDataDir, asset, server }) => {
+  const userDataDir = await createUserDataDir();
+  const extensionPath = asset('extension-with-logging');
+  const extensionOptions = {
+    headless: false,
+    args: [
+      `--disable-extensions-except=${extensionPath}`,
+      `--load-extension=${extensionPath}`,
+    ],
+  };
+  const context = await browserType.launchPersistentContext(userDataDir, extensionOptions);
+  const page = await context.newPage();
+  const consolePromise = page.waitForEvent('console', e => e.text().includes('Test console log from a third-party execution context'));
+  await page.goto(server.EMPTY_PAGE);
+  const message = await consolePromise;
+  expect(message.text()).toContain('Test console log from a third-party execution context');
+  await context.close();
+});
+
 it('should not create pages automatically', async ({ browserType }) => {
   const browser = await browserType.launch();
   const browserSession = await browser.newBrowserCDPSession();

From 0c8b2a7c32cf48e146e3294180d3afc006ed4d89 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Mon, 23 Sep 2024 15:51:15 -0700
Subject: [PATCH 09/29] chore: take snapshot tab apart (#32756)

---
 packages/trace-viewer/src/ui/snapshotTab.css |   5 +-
 packages/trace-viewer/src/ui/snapshotTab.tsx | 335 ++++++++++++-------
 packages/trace-viewer/src/ui/workbench.tsx   |   4 +-
 tests/library/trace-viewer.spec.ts           |   2 +-
 4 files changed, 214 insertions(+), 132 deletions(-)

diff --git a/packages/trace-viewer/src/ui/snapshotTab.css b/packages/trace-viewer/src/ui/snapshotTab.css
index 2677cfe53a..926685dc81 100644
--- a/packages/trace-viewer/src/ui/snapshotTab.css
+++ b/packages/trace-viewer/src/ui/snapshotTab.css
@@ -15,12 +15,8 @@
 */
 
 .snapshot-tab {
-  display: flex;
-  flex: auto;
-  flex-direction: column;
   align-items: stretch;
   outline: none;
-  --browser-frame-header-height: 40px;
   overflow: hidden;
 }
 
@@ -73,6 +69,7 @@
   margin: 1px;
   padding: 10px;
   position: relative;
+  --browser-frame-header-height: 40px;
 }
 
 .snapshot-container {
diff --git a/packages/trace-viewer/src/ui/snapshotTab.tsx b/packages/trace-viewer/src/ui/snapshotTab.tsx
index 9dafa10b96..b845c60cd5 100644
--- a/packages/trace-viewer/src/ui/snapshotTab.tsx
+++ b/packages/trace-viewer/src/ui/snapshotTab.tsx
@@ -40,7 +40,7 @@ function findClosest<T>(items: T[], metric: (v: T) => number, target: number) {
   });
 }
 
-export const SnapshotTab: React.FunctionComponent<{
+export const SnapshotTabsView: React.FunctionComponent<{
   action: ActionTraceEvent | undefined,
   model?: MultiTraceModel,
   sdkLanguage: Language,
@@ -50,63 +50,69 @@ export const SnapshotTab: React.FunctionComponent<{
   highlightedLocator: string,
   setHighlightedLocator: (locator: string) => void,
   openPage?: (url: string, target?: string) => Window | any,
-}> = ({ action, model, sdkLanguage, testIdAttributeName, isInspecting, setIsInspecting, highlightedLocator, setHighlightedLocator, openPage }) => {
-  const [measure, ref] = useMeasure<HTMLDivElement>();
+}> = ({ action, sdkLanguage, testIdAttributeName, isInspecting, setIsInspecting, highlightedLocator, setHighlightedLocator, openPage }) => {
   const [snapshotTab, setSnapshotTab] = React.useState<'action'|'before'|'after'>('action');
   const [showScreenshotInsteadOfSnapshot] = useSetting('screenshot-instead-of-snapshot', false);
 
-  type Snapshot = { action: ActionTraceEvent, snapshotName: string, point?: { x: number, y: number }, hasInputTarget?: boolean };
-  const { snapshots } = React.useMemo(() => {
-    if (!action)
-      return { snapshots: {} };
-
-    // if the action has no beforeSnapshot, use the last available afterSnapshot.
-    let beforeSnapshot: Snapshot | undefined = action.beforeSnapshot ? { action, snapshotName: action.beforeSnapshot } : undefined;
-    let a = action;
-    while (!beforeSnapshot && a) {
-      a = prevInList(a);
-      beforeSnapshot = a?.afterSnapshot ? { action: a, snapshotName: a?.afterSnapshot } : undefined;
-    }
-    const afterSnapshot: Snapshot | undefined = action.afterSnapshot ? { action, snapshotName: action.afterSnapshot } : beforeSnapshot;
-    const actionSnapshot: Snapshot | undefined = action.inputSnapshot ? { action, snapshotName: action.inputSnapshot, hasInputTarget: true } : afterSnapshot;
-    if (actionSnapshot)
-      actionSnapshot.point = action.point;
-    return { snapshots: { action: actionSnapshot, before: beforeSnapshot, after: afterSnapshot } };
+  const snapshots = React.useMemo(() => {
+    return collectSnapshots(action);
   }, [action]);
-
-  const { snapshotInfoUrl, snapshotUrl, popoutUrl, point } = React.useMemo(() => {
+  const snapshotUrls = React.useMemo(() => {
     const snapshot = snapshots[snapshotTab];
-    if (!snapshot)
-      return { snapshotUrl: kBlankSnapshotUrl };
-
-    const params = new URLSearchParams();
-    params.set('trace', context(snapshot.action).traceUrl);
-    params.set('name', snapshot.snapshotName);
-    if (snapshot.point) {
-      params.set('pointX', String(snapshot.point.x));
-      params.set('pointY', String(snapshot.point.y));
-      if (snapshot.hasInputTarget)
-        params.set('hasInputTarget', '1');
-    }
-    const snapshotUrl = new URL(`snapshot/${snapshot.action.pageId}?${params.toString()}`, window.location.href).toString();
-    const snapshotInfoUrl = new URL(`snapshotInfo/${snapshot.action.pageId}?${params.toString()}`, window.location.href).toString();
-
-    const popoutParams = new URLSearchParams();
-    popoutParams.set('r', snapshotUrl);
-    popoutParams.set('trace', context(snapshot.action).traceUrl);
-    if (snapshot.point) {
-      popoutParams.set('pointX', String(snapshot.point.x));
-      popoutParams.set('pointY', String(snapshot.point.y));
-      if (snapshot.hasInputTarget)
-        params.set('hasInputTarget', '1');
-    }
-    const popoutUrl = new URL(`snapshot.html?${popoutParams.toString()}`, window.location.href).toString();
-    return { snapshots, snapshotInfoUrl, snapshotUrl, popoutUrl, point: snapshot.point };
+    return snapshot ? extendSnapshot(snapshot) : undefined;
   }, [snapshots, snapshotTab]);
 
+  return <div className='snapshot-tab vbox'>
+    <Toolbar>
+      <ToolbarButton className='pick-locator' title={showScreenshotInsteadOfSnapshot ? 'Disable "screenshots instead of snapshots" to pick a locator' : 'Pick locator'} icon='target' toggled={isInspecting} onClick={() => setIsInspecting(!isInspecting)} disabled={showScreenshotInsteadOfSnapshot} />
+      {['action', 'before', 'after'].map(tab => {
+        return <TabbedPaneTab
+          key={tab}
+          id={tab}
+          title={renderTitle(tab)}
+          selected={snapshotTab === tab}
+          onSelect={() => setSnapshotTab(tab as 'action' | 'before' | 'after')}
+        ></TabbedPaneTab>;
+      })}
+      <div style={{ flex: 'auto' }}></div>
+      <ToolbarButton icon='link-external' title={showScreenshotInsteadOfSnapshot ? 'Not available when showing screenshot' : 'Open snapshot in a new tab'} disabled={!snapshotUrls?.popoutUrl || showScreenshotInsteadOfSnapshot} onClick={() => {
+        if (!openPage)
+          openPage = window.open;
+        const win = openPage(snapshotUrls?.popoutUrl || '', '_blank');
+        win?.addEventListener('DOMContentLoaded', () => {
+          const injectedScript = new InjectedScript(win as any, false, sdkLanguage, testIdAttributeName, 1, 'chromium', []);
+          new ConsoleAPI(injectedScript);
+        });
+      }} />
+    </Toolbar>
+    {!showScreenshotInsteadOfSnapshot && <SnapshotView
+      snapshotUrls={snapshotUrls}
+      sdkLanguage={sdkLanguage}
+      testIdAttributeName={testIdAttributeName}
+      isInspecting={isInspecting}
+      setIsInspecting={setIsInspecting}
+      highlightedLocator={highlightedLocator}
+      setHighlightedLocator={setHighlightedLocator}
+    />}
+    {showScreenshotInsteadOfSnapshot && <ScreenshotView
+      action={action}
+      snapshotUrls={snapshotUrls}
+      snapshot={snapshots[snapshotTab]} />}
+  </div>;
+};
+
+export const SnapshotView: React.FunctionComponent<{
+  snapshotUrls: SnapshotUrls | undefined,
+  sdkLanguage: Language,
+  testIdAttributeName: string,
+  isInspecting: boolean,
+  setIsInspecting: (isInspecting: boolean) => void,
+  highlightedLocator: string,
+  setHighlightedLocator: (locator: string) => void,
+}> = ({ snapshotUrls, sdkLanguage, testIdAttributeName, isInspecting, setIsInspecting, highlightedLocator, setHighlightedLocator }) => {
   const iframeRef0 = React.useRef<HTMLIFrameElement>(null);
   const iframeRef1 = React.useRef<HTMLIFrameElement>(null);
-  const [snapshotInfo, setSnapshotInfo] = React.useState<{ viewport: typeof kDefaultViewport, url: string, timestamp?: number, wallTime?: undefined }>({ viewport: kDefaultViewport, url: '' });
+  const [snapshotInfo, setSnapshotInfo] = React.useState<SnapshotInfo>({ viewport: kDefaultViewport, url: '' });
   const loadingRef = React.useRef({ iteration: 0, visibleIframe: 0 });
 
   React.useEffect(() => {
@@ -115,17 +121,7 @@ export const SnapshotTab: React.FunctionComponent<{
       const newVisibleIframe = 1 - loadingRef.current.visibleIframe;
       loadingRef.current.iteration = thisIteration;
 
-      const newSnapshotInfo = { url: '', viewport: kDefaultViewport, timestamp: undefined, wallTime: undefined };
-      if (snapshotInfoUrl) {
-        const response = await fetch(snapshotInfoUrl);
-        const info = await response.json();
-        if (!info.error) {
-          newSnapshotInfo.url = info.url;
-          newSnapshotInfo.viewport = info.viewport;
-          newSnapshotInfo.timestamp = info.timestamp;
-          newSnapshotInfo.wallTime = info.wallTime;
-        }
-      }
+      const newSnapshotInfo = await fetchSnapshotInfo(snapshotUrls?.snapshotInfoUrl);
 
       // Interrupted by another load - bail out.
       if (loadingRef.current.iteration !== thisIteration)
@@ -140,6 +136,7 @@ export const SnapshotTab: React.FunctionComponent<{
           iframe.addEventListener('error', loadedCallback);
 
           // Try preventing history entry from being created.
+          const snapshotUrl = snapshotUrls?.snapshotUrl || kBlankSnapshotUrl;
           if (iframe.contentWindow)
             iframe.contentWindow.location.replace(snapshotUrl);
           else
@@ -159,33 +156,10 @@ export const SnapshotTab: React.FunctionComponent<{
       loadingRef.current.visibleIframe = newVisibleIframe;
       setSnapshotInfo(newSnapshotInfo);
     })();
-  }, [snapshotUrl, snapshotInfoUrl]);
-
-  const windowHeaderHeight = 40;
-  const snapshotContainerSize = {
-    width: snapshotInfo.viewport.width,
-    height: snapshotInfo.viewport.height + windowHeaderHeight,
-  };
-  const scale = Math.min(measure.width / snapshotContainerSize.width, measure.height / snapshotContainerSize.height, 1);
-  const translate = {
-    x: (measure.width - snapshotContainerSize.width) / 2,
-    y: (measure.height - snapshotContainerSize.height) / 2,
-  };
-
-  const page = action ? pageForAction(action) : undefined;
-  const screencastFrame = React.useMemo(
-      () => {
-        if (snapshotInfo.wallTime && page?.screencastFrames[0]?.frameSwapWallTime)
-          return findClosest(page.screencastFrames, frame => frame.frameSwapWallTime!, snapshotInfo.wallTime);
-
-        if (snapshotInfo.timestamp && page?.screencastFrames)
-          return findClosest(page.screencastFrames, frame => frame.timestamp, snapshotInfo.timestamp);
-      },
-      [page?.screencastFrames, snapshotInfo.timestamp, snapshotInfo.wallTime]
-  );
+  }, [snapshotUrls]);
 
   return <div
-    className='snapshot-tab'
+    className='vbox'
     tabIndex={0}
     onKeyDown={event => {
       if (event.key === 'Escape') {
@@ -210,46 +184,72 @@ export const SnapshotTab: React.FunctionComponent<{
       setHighlightedLocator={setHighlightedLocator}
       iframe={iframeRef1.current}
       iteration={loadingRef.current.iteration} />
-    <Toolbar>
-      <ToolbarButton className='pick-locator' title={showScreenshotInsteadOfSnapshot ? 'Disable "screenshots instead of snapshots" to pick a locator' : 'Pick locator'} icon='target' toggled={isInspecting} onClick={() => setIsInspecting(!isInspecting)} disabled={showScreenshotInsteadOfSnapshot} />
-      {['action', 'before', 'after'].map(tab => {
-        return <TabbedPaneTab
-          key={tab}
-          id={tab}
-          title={renderTitle(tab)}
-          selected={snapshotTab === tab}
-          onSelect={() => setSnapshotTab(tab as 'action' | 'before' | 'after')}
-        ></TabbedPaneTab>;
-      })}
-      <div style={{ flex: 'auto' }}></div>
-      <ToolbarButton icon='link-external' title={showScreenshotInsteadOfSnapshot ? 'Not available when showing screenshot' : 'Open snapshot in a new tab'} disabled={!popoutUrl || showScreenshotInsteadOfSnapshot} onClick={() => {
-        if (!openPage)
-          openPage = window.open;
-        const win = openPage(popoutUrl || '', '_blank');
-        win?.addEventListener('DOMContentLoaded', () => {
-          const injectedScript = new InjectedScript(win as any, false, sdkLanguage, testIdAttributeName, 1, 'chromium', []);
-          new ConsoleAPI(injectedScript);
-        });
-      }}></ToolbarButton>
-    </Toolbar>
-    <div ref={ref} className='snapshot-wrapper'>
-      <div className='snapshot-container' style={{
-        width: snapshotContainerSize.width + 'px',
-        height: snapshotContainerSize.height + 'px',
-        transform: `translate(${translate.x}px, ${translate.y}px) scale(${scale})`,
-      }}>
-        <BrowserFrame url={snapshotInfo.url} />
-        {(showScreenshotInsteadOfSnapshot && screencastFrame) && (
-          <>
-            {point && <ClickPointer point={point} />}
-            <img alt={`Screenshot of ${action?.apiName} > ${renderTitle(snapshotTab)}`} src={`sha1/${screencastFrame.sha1}`} width={screencastFrame.width} height={screencastFrame.height} />
-          </>
-        )}
-        <div className='snapshot-switcher' style={showScreenshotInsteadOfSnapshot ? { display: 'none' } : undefined}>
-          <iframe ref={iframeRef0} name='snapshot' title='DOM Snapshot' className={clsx(loadingRef.current.visibleIframe === 0 && 'snapshot-visible')}></iframe>
-          <iframe ref={iframeRef1} name='snapshot' title='DOM Snapshot' className={clsx(loadingRef.current.visibleIframe === 1 && 'snapshot-visible')}></iframe>
-        </div>
+    <SnapshotWrapper snapshotInfo={snapshotInfo}>
+      <div className='snapshot-switcher'>
+        <iframe ref={iframeRef0} name='snapshot' title='DOM Snapshot' className={clsx(loadingRef.current.visibleIframe === 0 && 'snapshot-visible')}></iframe>
+        <iframe ref={iframeRef1} name='snapshot' title='DOM Snapshot' className={clsx(loadingRef.current.visibleIframe === 1 && 'snapshot-visible')}></iframe>
       </div>
+    </SnapshotWrapper>
+  </div>;
+};
+
+export const ScreenshotView: React.FunctionComponent<{
+  action: ActionTraceEvent | undefined,
+  snapshotUrls: SnapshotUrls | undefined,
+  snapshot: Snapshot | undefined,
+}> = ({ action, snapshotUrls, snapshot }) => {
+  const [snapshotInfo, setSnapshotInfo] = React.useState<SnapshotInfo>({ viewport: kDefaultViewport, url: '' });
+  React.useEffect(() => {
+    fetchSnapshotInfo(snapshotUrls?.snapshotInfoUrl).then(setSnapshotInfo);
+  }, [snapshotUrls?.snapshotInfoUrl]);
+
+  const page = action ? pageForAction(action) : undefined;
+  const screencastFrame = React.useMemo(() => {
+    if (snapshotInfo.wallTime && page?.screencastFrames[0]?.frameSwapWallTime)
+      return findClosest(page.screencastFrames, frame => frame.frameSwapWallTime!, snapshotInfo.wallTime);
+
+    if (snapshotInfo.timestamp && page?.screencastFrames)
+      return findClosest(page.screencastFrames, frame => frame.timestamp, snapshotInfo.timestamp);
+  },
+  [page?.screencastFrames, snapshotInfo.timestamp, snapshotInfo.wallTime]);
+
+  const point = snapshot?.point;
+
+  return <SnapshotWrapper snapshotInfo={snapshotInfo}>
+    {screencastFrame && (
+      <>
+        {point && <ClickPointer point={point} />}
+        <img alt={`Screenshot of ${action?.apiName}`} src={`sha1/${screencastFrame.sha1}`} width={screencastFrame.width} height={screencastFrame.height} />
+      </>
+    )}
+  </SnapshotWrapper>;
+};
+
+const SnapshotWrapper: React.FunctionComponent<React.PropsWithChildren<{
+  snapshotInfo: SnapshotInfo,
+}>> = ({ snapshotInfo, children }) => {
+  const [measure, ref] = useMeasure<HTMLDivElement>();
+
+  const windowHeaderHeight = 40;
+  const snapshotContainerSize = {
+    width: snapshotInfo.viewport.width,
+    height: snapshotInfo.viewport.height + windowHeaderHeight,
+  };
+
+  const scale = Math.min(measure.width / snapshotContainerSize.width, measure.height / snapshotContainerSize.height, 1);
+  const translate = {
+    x: (measure.width - snapshotContainerSize.width) / 2,
+    y: (measure.height - snapshotContainerSize.height) / 2,
+  };
+
+  return <div ref={ref} className='snapshot-wrapper'>
+    <div className='snapshot-container' style={{
+      width: snapshotContainerSize.width + 'px',
+      height: snapshotContainerSize.height + 'px',
+      transform: `translate(${translate.x}px, ${translate.y}px) scale(${scale})`,
+    }}>
+      <BrowserFrame url={snapshotInfo.url} />
+      {children}
     </div>
   </div>;
 };
@@ -325,5 +325,90 @@ function createRecorders(recorders: { recorder: Recorder, frameSelector: string
   }
 }
 
-const kDefaultViewport = { width: 1280, height: 720 };
+export type Snapshot = {
+  action: ActionTraceEvent;
+  snapshotName: string;
+  point?: { x: number, y: number };
+  hasInputTarget?: boolean;
+};
+
+export type SnapshotInfo = {
+  url: string;
+  viewport: { width: number, height: number };
+  timestamp?: number;
+  wallTime?: undefined;
+};
+
+export type Snapshots = {
+  action?: Snapshot;
+  before?: Snapshot;
+  after?: Snapshot;
+};
+
+export type SnapshotUrls = {
+  snapshotInfoUrl: string;
+  snapshotUrl: string;
+  popoutUrl: string;
+};
+
+export function collectSnapshots(action: ActionTraceEvent | undefined): Snapshots {
+  if (!action)
+    return {};
+
+  // if the action has no beforeSnapshot, use the last available afterSnapshot.
+  let beforeSnapshot: Snapshot | undefined = action.beforeSnapshot ? { action, snapshotName: action.beforeSnapshot } : undefined;
+  let a = action;
+  while (!beforeSnapshot && a) {
+    a = prevInList(a);
+    beforeSnapshot = a?.afterSnapshot ? { action: a, snapshotName: a?.afterSnapshot } : undefined;
+  }
+  const afterSnapshot: Snapshot | undefined = action.afterSnapshot ? { action, snapshotName: action.afterSnapshot } : beforeSnapshot;
+  const actionSnapshot: Snapshot | undefined = action.inputSnapshot ? { action, snapshotName: action.inputSnapshot, hasInputTarget: true } : afterSnapshot;
+  if (actionSnapshot)
+    actionSnapshot.point = action.point;
+  return { action: actionSnapshot, before: beforeSnapshot, after: afterSnapshot };
+}
+
+export function extendSnapshot(snapshot: Snapshot): SnapshotUrls {
+  const params = new URLSearchParams();
+  params.set('trace', context(snapshot.action).traceUrl);
+  params.set('name', snapshot.snapshotName);
+  if (snapshot.point) {
+    params.set('pointX', String(snapshot.point.x));
+    params.set('pointY', String(snapshot.point.y));
+    if (snapshot.hasInputTarget)
+      params.set('hasInputTarget', '1');
+  }
+  const snapshotUrl = new URL(`snapshot/${snapshot.action.pageId}?${params.toString()}`, window.location.href).toString();
+  const snapshotInfoUrl = new URL(`snapshotInfo/${snapshot.action.pageId}?${params.toString()}`, window.location.href).toString();
+
+  const popoutParams = new URLSearchParams();
+  popoutParams.set('r', snapshotUrl);
+  popoutParams.set('trace', context(snapshot.action).traceUrl);
+  if (snapshot.point) {
+    popoutParams.set('pointX', String(snapshot.point.x));
+    popoutParams.set('pointY', String(snapshot.point.y));
+    if (snapshot.hasInputTarget)
+      params.set('hasInputTarget', '1');
+  }
+  const popoutUrl = new URL(`snapshot.html?${popoutParams.toString()}`, window.location.href).toString();
+  return { snapshotInfoUrl, snapshotUrl, popoutUrl };
+}
+
+export async function fetchSnapshotInfo(snapshotInfoUrl: string | undefined) {
+  const result = { url: '', viewport: kDefaultViewport, timestamp: undefined, wallTime: undefined };
+  if (snapshotInfoUrl) {
+    const response = await fetch(snapshotInfoUrl);
+    const info = await response.json();
+    if (!info.error) {
+      result.url = info.url;
+      result.viewport = info.viewport;
+      result.timestamp = info.timestamp;
+      result.wallTime = info.wallTime;
+    }
+  }
+  return result;
+}
+
+export const kDefaultViewport = { width: 1280, height: 720 };
 const kBlankSnapshotUrl = 'data:text/html,<body style="background: #ddd"></body>';
diff --git a/packages/trace-viewer/src/ui/workbench.tsx b/packages/trace-viewer/src/ui/workbench.tsx
index 95c18d8d0a..13c5f5fd0e 100644
--- a/packages/trace-viewer/src/ui/workbench.tsx
+++ b/packages/trace-viewer/src/ui/workbench.tsx
@@ -25,7 +25,7 @@ import type { ConsoleEntry } from './consoleTab';
 import { ConsoleTab, useConsoleTabModel } from './consoleTab';
 import type * as modelUtil from './modelUtil';
 import { NetworkTab, useNetworkTabModel } from './networkTab';
-import { SnapshotTab } from './snapshotTab';
+import { SnapshotTabsView } from './snapshotTab';
 import { SourceTab } from './sourceTab';
 import { TabbedPane } from '@web/components/tabbedPane';
 import type { TabbedPaneTabModel } from '@web/components/tabbedPane';
@@ -331,7 +331,7 @@ export const Workbench: React.FunctionComponent<{
         orientation='horizontal'
         sidebarIsFirst
         settingName='actionListSidebar'
-        main={<SnapshotTab
+        main={<SnapshotTabsView
           action={activeAction}
           model={model}
           sdkLanguage={sdkLanguage}
diff --git a/tests/library/trace-viewer.spec.ts b/tests/library/trace-viewer.spec.ts
index 49e159d6da..052d116280 100644
--- a/tests/library/trace-viewer.spec.ts
+++ b/tests/library/trace-viewer.spec.ts
@@ -1408,7 +1408,7 @@ test('should allow showing screenshots instead of snapshots', async ({ runAndTra
     await page.waitForTimeout(1000); // ensure we could take a screenshot
   });
 
-  const screenshot = traceViewer.page.getByAltText(`Screenshot of page.goto > Action`);
+  const screenshot = traceViewer.page.getByAltText(`Screenshot of page.goto`);
   const snapshot = (await traceViewer.snapshotFrame('page.goto')).owner();
   await expect(snapshot).toBeVisible();
   await expect(screenshot).not.toBeVisible();

From c7a5278fb3198e78d3bf0ca8e49c829bc0a65d9b Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Mon, 23 Sep 2024 15:51:27 -0700
Subject: [PATCH 10/29] fix: do not start tracing in default recorder (#32770)

---
 .../src/server/recorder/contextRecorder.ts           | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/playwright-core/src/server/recorder/contextRecorder.ts b/packages/playwright-core/src/server/recorder/contextRecorder.ts
index 694393b860..a02ea9f5b4 100644
--- a/packages/playwright-core/src/server/recorder/contextRecorder.ts
+++ b/packages/playwright-core/src/server/recorder/contextRecorder.ts
@@ -54,9 +54,11 @@ export class ContextRecorder extends EventEmitter {
   private _throttledOutputFile: ThrottledFile | null = null;
   private _orderedLanguages: LanguageGenerator[] = [];
   private _listeners: RegisteredListener[] = [];
+  private _codegenMode: 'actions' | 'trace-events';
 
   constructor(codegenMode: 'actions' | 'trace-events', context: BrowserContext, params: channels.BrowserContextEnableRecorderParams, delegate: ContextRecorderDelegate) {
     super();
+    this._codegenMode = codegenMode;
     this._context = context;
     this._params = params;
     this._delegate = delegate;
@@ -145,10 +147,12 @@ export class ContextRecorder extends EventEmitter {
 
   setEnabled(enabled: boolean) {
     this._collection.setEnabled(enabled);
-    if (enabled)
-      this._context.tracing.startChunk({ name: 'trace', title: 'trace' }).catch(() => {});
-    else
-      this._context.tracing.stopChunk({ mode: 'discard' }).catch(() => {});
+    if (this._codegenMode === 'trace-events') {
+      if (enabled)
+        this._context.tracing.startChunk({ name: 'trace', title: 'trace' }).catch(() => {});
+      else
+        this._context.tracing.stopChunk({ mode: 'discard' }).catch(() => {});
+    }
   }
 
   dispose() {

From 8557b98aeec1683143556e481aeed61567f4f530 Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Tue, 24 Sep 2024 01:32:36 +0200
Subject: [PATCH 11/29] test: fix CR/LF warning on only-changed tests (#32772)

---
 tests/playwright-test/only-changed.spec.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/playwright-test/only-changed.spec.ts b/tests/playwright-test/only-changed.spec.ts
index 674234a240..b632ba262a 100644
--- a/tests/playwright-test/only-changed.spec.ts
+++ b/tests/playwright-test/only-changed.spec.ts
@@ -26,6 +26,7 @@ const test = baseTest.extend<{ git(command: string): void }>({
     git(`init --initial-branch=main`);
     git(`config --local user.name "Robert Botman"`);
     git(`config --local user.email "botty@mcbotface.com"`);
+    git(`config --local core.autocrlf false`);
 
     await use((command: string) => git(command));
   },

From fbeba6619a6ada0b255eb73b7fc0e76c614148ba Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Mon, 23 Sep 2024 17:55:30 -0700
Subject: [PATCH 12/29] devops(bidi): increase global timeout to 60m (#32775)

Firefox tests are running out of time on CI.
---
 tests/bidi/playwright.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/bidi/playwright.config.ts b/tests/bidi/playwright.config.ts
index 798f59fb7d..c333ff9d12 100644
--- a/tests/bidi/playwright.config.ts
+++ b/tests/bidi/playwright.config.ts
@@ -50,7 +50,7 @@ const config: Config<PlaywrightWorkerOptions & PlaywrightTestOptions & TestModeW
   },
   maxFailures: 0,
   timeout: 15 * 1000,
-  globalTimeout: 30 * 60 * 1000,
+  globalTimeout: 60 * 60 * 1000,
   workers: process.env.CI ? 2 : undefined,
   fullyParallel: !process.env.CI,
   forbidOnly: !!process.env.CI,

From eda0e01167ba590330432e247e5d65f5c5dc56d5 Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Mon, 23 Sep 2024 19:05:55 -0700
Subject: [PATCH 13/29] chore(bidi): bring to front, pdf (#32698)

---
 .../src/server/bidi/bidiPage.ts               |  11 ++
 .../src/server/bidi/bidiPdf.ts                | 109 ++++++++++++++++++
 2 files changed, 120 insertions(+)
 create mode 100644 packages/playwright-core/src/server/bidi/bidiPdf.ts

diff --git a/packages/playwright-core/src/server/bidi/bidiPage.ts b/packages/playwright-core/src/server/bidi/bidiPage.ts
index 180e8a651e..a50217975a 100644
--- a/packages/playwright-core/src/server/bidi/bidiPage.ts
+++ b/packages/playwright-core/src/server/bidi/bidiPage.ts
@@ -22,6 +22,7 @@ import * as dom from '../dom';
 import * as dialog from '../dialog';
 import type * as frames from '../frames';
 import { Page } from '../page';
+import type * as channels from '@protocol/channels';
 import type { InitScript, PageDelegate } from '../page';
 import type { Progress } from '../progress';
 import type * as types from '../types';
@@ -32,6 +33,7 @@ import * as bidi from './third_party/bidiProtocol';
 import { BidiExecutionContext } from './bidiExecutionContext';
 import { BidiNetworkManager } from './bidiNetworkManager';
 import { BrowserContext } from '../browserContext';
+import { BidiPDF } from './bidiPdf';
 
 const UTILITY_WORLD_NAME = '__playwright_utility_world__';
 const kPlaywrightBindingChannel = 'playwrightChannel';
@@ -48,6 +50,7 @@ export class BidiPage implements PageDelegate {
   private _sessionListeners: RegisteredListener[] = [];
   readonly _browserContext: BidiBrowserContext;
   readonly _networkManager: BidiNetworkManager;
+  private readonly _pdf: BidiPDF;
   _initializedPage: Page | null = null;
   private _initScriptIds: string[] = [];
 
@@ -61,6 +64,7 @@ export class BidiPage implements PageDelegate {
     this._page = new Page(this, browserContext);
     this._browserContext = browserContext;
     this._networkManager = new BidiNetworkManager(this._session, this._page, this._onNavigationResponseStarted.bind(this));
+    this._pdf = new BidiPDF(this._session);
     this._page.on(Page.Events.FrameDetached, (frame: frames.Frame) => this._removeContextsForFrame(frame, false));
     this._sessionListeners = [
       eventsHelper.addEventListener(bidiSession, 'script.realmCreated', this._onRealmCreated.bind(this)),
@@ -279,6 +283,9 @@ export class BidiPage implements PageDelegate {
   }
 
   async bringToFront(): Promise<void> {
+    await this._session.send('browsingContext.activate', {
+      context: this._session.sessionId,
+    });
   }
 
   private async _updateViewport(): Promise<void> {
@@ -555,6 +562,10 @@ export class BidiPage implements PageDelegate {
   async resetForReuse(): Promise<void> {
   }
 
+  async pdf(options: channels.PagePdfParams): Promise<Buffer> {
+    return this._pdf.generate(options);
+  }
+
   async getFrameElement(frame: frames.Frame): Promise<dom.ElementHandle> {
     const parent = frame.parentFrame();
     if (!parent)
diff --git a/packages/playwright-core/src/server/bidi/bidiPdf.ts b/packages/playwright-core/src/server/bidi/bidiPdf.ts
new file mode 100644
index 0000000000..89fefb5260
--- /dev/null
+++ b/packages/playwright-core/src/server/bidi/bidiPdf.ts
@@ -0,0 +1,109 @@
+/**
+ * Copyright 2017 Google Inc. All rights reserved.
+ * Modifications copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { assert } from '../../utils';
+import type * as channels from '@protocol/channels';
+import type { BidiSession } from './bidiConnection';
+
+const PagePaperFormats: { [key: string]: { width: number, height: number }} = {
+  letter: { width: 8.5, height: 11 },
+  legal: { width: 8.5, height: 14 },
+  tabloid: { width: 11, height: 17 },
+  ledger: { width: 17, height: 11 },
+  a0: { width: 33.1, height: 46.8 },
+  a1: { width: 23.4, height: 33.1 },
+  a2: { width: 16.54, height: 23.4 },
+  a3: { width: 11.7, height: 16.54 },
+  a4: { width: 8.27, height: 11.7 },
+  a5: { width: 5.83, height: 8.27 },
+  a6: { width: 4.13, height: 5.83 },
+};
+
+const unitToPixels: { [key: string]: number } = {
+  'px': 1,
+  'in': 96,
+  'cm': 37.8,
+  'mm': 3.78
+};
+
+function convertPrintParameterToInches(text: string | undefined): number | undefined {
+  if (text === undefined)
+    return undefined;
+  let unit = text.substring(text.length - 2).toLowerCase();
+  let valueText = '';
+  if (unitToPixels.hasOwnProperty(unit)) {
+    valueText = text.substring(0, text.length - 2);
+  } else {
+    // In case of unknown unit try to parse the whole parameter as number of pixels.
+    // This is consistent with phantom's paperSize behavior.
+    unit = 'px';
+    valueText = text;
+  }
+  const value = Number(valueText);
+  assert(!isNaN(value), 'Failed to parse parameter value: ' + text);
+  const pixels = value * unitToPixels[unit];
+  return pixels / 96;
+}
+
+export class BidiPDF {
+  private _session: BidiSession;
+
+  constructor(session: BidiSession) {
+    this._session = session;
+  }
+
+  async generate(options: channels.PagePdfParams): Promise<Buffer> {
+    const {
+      scale = 1,
+      printBackground = false,
+      landscape = false,
+      pageRanges = '',
+      margin = {},
+    } = options;
+
+    let paperWidth = 8.5;
+    let paperHeight = 11;
+    if (options.format) {
+      const format = PagePaperFormats[options.format.toLowerCase()];
+      assert(format, 'Unknown paper format: ' + options.format);
+      paperWidth = format.width;
+      paperHeight = format.height;
+    } else {
+      paperWidth = convertPrintParameterToInches(options.width) || paperWidth;
+      paperHeight = convertPrintParameterToInches(options.height) || paperHeight;
+    }
+
+    const { data } = await this._session.send('browsingContext.print', {
+      context: this._session.sessionId,
+      background: printBackground,
+      margin: {
+        bottom: convertPrintParameterToInches(margin.bottom) || 0,
+        left: convertPrintParameterToInches(margin.left) || 0,
+        right: convertPrintParameterToInches(margin.right) || 0,
+        top: convertPrintParameterToInches(margin.top) || 0
+      },
+      orientation: landscape ? 'landscape' : 'portrait',
+      page: {
+        width: paperWidth,
+        height: paperHeight
+      },
+      pageRanges: pageRanges ? pageRanges.split(',').map(r => r.trim()) : undefined,
+      scale,
+    });
+    return Buffer.from(data, 'base64');
+  }
+}

From 7c3dd70bf6d79d37ad6d4b651be43131fa48c902 Mon Sep 17 00:00:00 2001
From: Playwright Service <89237858+playwrightmachine@users.noreply.github.com>
Date: Mon, 23 Sep 2024 19:08:01 -0700
Subject: [PATCH 14/29] feat(webkit): roll to r2081 (#32738)

---
 packages/playwright-core/browsers.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playwright-core/browsers.json b/packages/playwright-core/browsers.json
index 2012fc1c9e..cba2baf730 100644
--- a/packages/playwright-core/browsers.json
+++ b/packages/playwright-core/browsers.json
@@ -27,7 +27,7 @@
     },
     {
       "name": "webkit",
-      "revision": "2080",
+      "revision": "2081",
       "installByDefault": true,
       "revisionOverrides": {
         "mac10.14": "1446",

From 8649b13f2527e5b130478baddacf023185833ed6 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Mon, 23 Sep 2024 19:13:45 -0700
Subject: [PATCH 15/29] chore: start putting tv-recorder ui together (#32776)

---
 .../server/recorder/recorderInTraceViewer.ts  |   4 +
 packages/recorder/src/recorder.tsx            |  38 +-
 packages/trace-viewer/src/ui/actionList.tsx   |  10 +-
 packages/trace-viewer/src/ui/consoleTab.tsx   |   2 +-
 packages/trace-viewer/src/ui/networkTab.tsx   |   4 +-
 packages/trace-viewer/src/ui/recorderView.tsx | 328 +++++++++++++++---
 packages/trace-viewer/src/ui/sourceTab.tsx    |   2 +-
 packages/trace-viewer/src/ui/workbench.tsx    |  11 +-
 packages/web/src/components/sourceChooser.css |  20 ++
 packages/web/src/components/sourceChooser.tsx |  58 ++++
 packages/web/src/components/tabbedPane.tsx    |  12 +-
 packages/web/src/components/toolbar.css       |   4 +
 packages/web/src/components/toolbar.tsx       |   4 +-
 packages/web/src/uiUtils.ts                   |   5 +
 14 files changed, 404 insertions(+), 98 deletions(-)
 create mode 100644 packages/web/src/components/sourceChooser.css
 create mode 100644 packages/web/src/components/sourceChooser.tsx

diff --git a/packages/playwright-core/src/server/recorder/recorderInTraceViewer.ts b/packages/playwright-core/src/server/recorder/recorderInTraceViewer.ts
index 8da0896497..4c84547ade 100644
--- a/packages/playwright-core/src/server/recorder/recorderInTraceViewer.ts
+++ b/packages/playwright-core/src/server/recorder/recorderInTraceViewer.ts
@@ -43,6 +43,7 @@ export class RecorderInTraceViewer extends EventEmitter implements IRecorderApp
   constructor(transport: RecorderTransport, tracePage: Page, traceServer: HttpServer, wsEndpointForTest: string | undefined) {
     super();
     this._transport = transport;
+    this._transport.eventSink.resolve(this);
     this._tracePage = tracePage;
     this._traceServer = traceServer;
     this.wsEndpointForTest = wsEndpointForTest;
@@ -94,6 +95,7 @@ async function openApp(trace: string, options?: TraceViewerServerOptions & { hea
 
 class RecorderTransport implements Transport {
   private _connected = new ManualPromise<void>();
+  readonly eventSink = new ManualPromise<EventEmitter>();
 
   constructor() {
   }
@@ -103,6 +105,8 @@ class RecorderTransport implements Transport {
   }
 
   async dispatch(method: string, params: any): Promise<any> {
+    const eventSink = await this.eventSink;
+    eventSink.emit('event', { event: method, params });
   }
 
   onclose() {
diff --git a/packages/recorder/src/recorder.tsx b/packages/recorder/src/recorder.tsx
index 31bad2b70b..9d5c0feeba 100644
--- a/packages/recorder/src/recorder.tsx
+++ b/packages/recorder/src/recorder.tsx
@@ -19,6 +19,7 @@ import { CodeMirrorWrapper } from '@web/components/codeMirrorWrapper';
 import { SplitView } from '@web/components/splitView';
 import { TabbedPane } from '@web/components/tabbedPane';
 import { Toolbar } from '@web/components/toolbar';
+import { emptySource, SourceChooser } from '@web/components/sourceChooser';
 import { ToolbarButton, ToolbarSeparator } from '@web/components/toolbarButton';
 import * as React from 'react';
 import { CallLogView } from './callLog';
@@ -54,15 +55,7 @@ export const Recorder: React.FC<RecorderProps> = ({
       if (source)
         return source;
     }
-    const source: Source = {
-      id: 'default',
-      isRecorded: false,
-      text: '',
-      language: 'javascript',
-      label: '',
-      highlight: []
-    };
-    return source;
+    return emptySource();
   }, [sources, fileId]);
 
   const [locator, setLocator] = React.useState('');
@@ -152,10 +145,10 @@ export const Recorder: React.FC<RecorderProps> = ({
       }}></ToolbarButton>
       <div style={{ flex: 'auto' }}></div>
       <div>Target:</div>
-      <select className='recorder-chooser' hidden={!sources.length} value={fileId} onChange={event => {
-        setFileId(event.target.selectedOptions[0].value);
-        window.dispatch({ event: 'fileChanged', params: { file: event.target.selectedOptions[0].value } });
-      }}>{renderSourceOptions(sources)}</select>
+      <SourceChooser fileId={fileId} sources={sources} setFileId={fileId => {
+        setFileId(fileId);
+        window.dispatch({ event: 'fileChanged', params: { file: fileId } });
+      }} />
       <ToolbarButton icon='clear-all' title='Clear' disabled={!source || !source.text} onClick={() => {
         window.dispatch({ event: 'clear' });
       }}></ToolbarButton>
@@ -184,22 +177,3 @@ export const Recorder: React.FC<RecorderProps> = ({
     />
   </div>;
 };
-
-function renderSourceOptions(sources: Source[]): React.ReactNode {
-  const transformTitle = (title: string): string => title.replace(/.*[/\\]([^/\\]+)/, '$1');
-  const renderOption = (source: Source): React.ReactNode => (
-    <option key={source.id} value={source.id}>{transformTitle(source.label)}</option>
-  );
-
-  const hasGroup = sources.some(s => s.group);
-  if (hasGroup) {
-    const groups = new Set(sources.map(s => s.group));
-    return [...groups].filter(Boolean).map(group => (
-      <optgroup label={group} key={group}>
-        {sources.filter(s => s.group === group).map(source => renderOption(source))}
-      </optgroup>
-    ));
-  }
-
-  return sources.map(source => renderOption(source));
-}
diff --git a/packages/trace-viewer/src/ui/actionList.tsx b/packages/trace-viewer/src/ui/actionList.tsx
index 3935447e7d..55f4f4028a 100644
--- a/packages/trace-viewer/src/ui/actionList.tsx
+++ b/packages/trace-viewer/src/ui/actionList.tsx
@@ -32,9 +32,9 @@ export interface ActionListProps {
   selectedTime: Boundaries | undefined,
   setSelectedTime: (time: Boundaries | undefined) => void,
   sdkLanguage: Language | undefined;
-  onSelected: (action: ActionTraceEventInContext) => void,
-  onHighlighted: (action: ActionTraceEventInContext | undefined) => void,
-  revealConsole: () => void,
+  onSelected?: (action: ActionTraceEventInContext) => void,
+  onHighlighted?: (action: ActionTraceEventInContext | undefined) => void,
+  revealConsole?: () => void,
   isLive?: boolean,
 }
 
@@ -67,8 +67,8 @@ export const ActionList: React.FC<ActionListProps> = ({
       treeState={treeState}
       setTreeState={setTreeState}
       selectedItem={selectedItem}
-      onSelected={item => onSelected(item.action!)}
-      onHighlighted={item => onHighlighted(item?.action)}
+      onSelected={item => onSelected?.(item.action!)}
+      onHighlighted={item => onHighlighted?.(item?.action)}
       onAccepted={item => setSelectedTime({ minimum: item.action!.startTime, maximum: item.action!.endTime })}
       isError={item => !!item.action?.error?.message}
       isVisible={item => !selectedTime || (item.action!.startTime <= selectedTime.maximum && item.action!.endTime >= selectedTime.minimum)}
diff --git a/packages/trace-viewer/src/ui/consoleTab.tsx b/packages/trace-viewer/src/ui/consoleTab.tsx
index b2947f5011..3ae847ef50 100644
--- a/packages/trace-viewer/src/ui/consoleTab.tsx
+++ b/packages/trace-viewer/src/ui/consoleTab.tsx
@@ -107,7 +107,7 @@ export const ConsoleTab: React.FunctionComponent<{
   boundaries: Boundaries,
   consoleModel: ConsoleTabModel,
   selectedTime: Boundaries | undefined,
-  onEntryHovered: (entry: ConsoleEntry | undefined) => void,
+  onEntryHovered?: (entry: ConsoleEntry | undefined) => void,
   onAccepted: (entry: ConsoleEntry) => void,
 }> = ({ consoleModel, boundaries, onEntryHovered, onAccepted }) => {
   if (!consoleModel.entries.length)
diff --git a/packages/trace-viewer/src/ui/networkTab.tsx b/packages/trace-viewer/src/ui/networkTab.tsx
index 207dd33547..62b139be0d 100644
--- a/packages/trace-viewer/src/ui/networkTab.tsx
+++ b/packages/trace-viewer/src/ui/networkTab.tsx
@@ -65,7 +65,7 @@ export function useNetworkTabModel(model: MultiTraceModel | undefined, selectedT
 export const NetworkTab: React.FunctionComponent<{
   boundaries: Boundaries,
   networkModel: NetworkTabModel,
-  onEntryHovered: (entry: Entry | undefined) => void,
+  onEntryHovered?: (entry: Entry | undefined) => void,
 }> = ({ boundaries, networkModel, onEntryHovered }) => {
   const [sorting, setSorting] = React.useState<Sorting | undefined>(undefined);
   const [selectedEntry, setSelectedEntry] = React.useState<RenderedEntry | undefined>(undefined);
@@ -95,7 +95,7 @@ export const NetworkTab: React.FunctionComponent<{
     items={renderedEntries}
     selectedItem={selectedEntry}
     onSelected={item => setSelectedEntry(item)}
-    onHighlighted={item => onEntryHovered(item?.resource)}
+    onHighlighted={item => onEntryHovered?.(item?.resource)}
     columns={visibleColumns(!!selectedEntry, renderedEntries)}
     columnTitle={columnTitle}
     columnWidths={columnWidths}
diff --git a/packages/trace-viewer/src/ui/recorderView.tsx b/packages/trace-viewer/src/ui/recorderView.tsx
index 945ac86fc0..159536d925 100644
--- a/packages/trace-viewer/src/ui/recorderView.tsx
+++ b/packages/trace-viewer/src/ui/recorderView.tsx
@@ -14,52 +14,52 @@
   limitations under the License.
 */
 
-import * as React from 'react';
-import './recorderView.css';
-import { MultiTraceModel } from './modelUtil';
-import type { SourceLocation } from './modelUtil';
-import { Workbench } from './workbench';
+import type { Language } from '@isomorphic/locatorGenerators';
 import type { Mode, Source } from '@recorder/recorderTypes';
+import { SplitView } from '@web/components/splitView';
+import type { TabbedPaneTabModel } from '@web/components/tabbedPane';
+import { TabbedPane } from '@web/components/tabbedPane';
+import { sha1, useSetting } from '@web/uiUtils';
+import * as React from 'react';
 import type { ContextEntry } from '../entries';
+import type { Boundaries } from '../geometry';
+import { ActionList } from './actionList';
+import { ConsoleTab, useConsoleTabModel } from './consoleTab';
+import { InspectorTab } from './inspectorTab';
+import type * as modelUtil from './modelUtil';
+import type { SourceLocation } from './modelUtil';
+import { MultiTraceModel } from './modelUtil';
+import { NetworkTab, useNetworkTabModel } from './networkTab';
+import './recorderView.css';
+import { collectSnapshots, extendSnapshot, SnapshotView } from './snapshotTab';
+import { SourceTab } from './sourceTab';
+import { Toolbar } from '@web/components/toolbar';
+import { ToolbarButton, ToolbarSeparator } from '@web/components/toolbarButton';
+import { toggleTheme } from '@web/theme';
+import { SourceChooser } from '@web/components/sourceChooser';
 
 const searchParams = new URLSearchParams(window.location.search);
 const guid = searchParams.get('ws');
-const trace = searchParams.get('trace') + '.json';
+const traceLocation = searchParams.get('trace') + '.json';
 
 export const RecorderView: React.FunctionComponent = () => {
   const [connection, setConnection] = React.useState<Connection | null>(null);
   const [sources, setSources] = React.useState<Source[]>([]);
+  const [model, setModel] = React.useState<{ model: MultiTraceModel, isLive: boolean, sha1: string } | undefined>();
+  const [mode, setMode] = React.useState<Mode>('none');
+  const [counter, setCounter] = React.useState(0);
+  const pollTimer = React.useRef<NodeJS.Timeout | null>(null);
+
   React.useEffect(() => {
     const wsURL = new URL(`../${guid}`, window.location.toString());
     wsURL.protocol = (window.location.protocol === 'https:' ? 'wss:' : 'ws:');
     const webSocket = new WebSocket(wsURL.toString());
-    setConnection(new Connection(webSocket, { setSources }));
+    setConnection(new Connection(webSocket, { setMode, setSources }));
     return () => {
       webSocket.close();
     };
   }, []);
 
-  React.useEffect(() => {
-    if (!connection)
-      return;
-    connection.setMode('recording');
-  }, [connection]);
-
-  return <div className='vbox workbench-loader'>
-    <TraceView
-      traceLocation={trace}
-      sources={sources} />
-  </div>;
-};
-
-export const TraceView: React.FC<{
-  traceLocation: string,
-  sources: Source[],
-}> = ({ traceLocation, sources }) => {
-  const [model, setModel] = React.useState<{ model: MultiTraceModel, isLive: boolean } | undefined>();
-  const [counter, setCounter] = React.useState(0);
-  const pollTimer = React.useRef<NodeJS.Timeout | null>(null);
-
   React.useEffect(() => {
     if (pollTimer.current)
       clearTimeout(pollTimer.current);
@@ -67,8 +67,9 @@ export const TraceView: React.FC<{
     // Start polling running test.
     pollTimer.current = setTimeout(async () => {
       try {
-        const model = await loadSingleTraceFile(traceLocation);
-        setModel({ model, isLive: true });
+        const result = await loadSingleTraceFile(traceLocation);
+        if (result.sha1 !== model?.sha1)
+          setModel({ ...result, isLive: true });
       } catch {
         setModel(undefined);
       } finally {
@@ -79,10 +80,94 @@ export const TraceView: React.FC<{
       if (pollTimer.current)
         clearTimeout(pollTimer.current);
     };
-  }, [counter, traceLocation]);
+  }, [counter, model]);
+
+  return <div className='vbox workbench-loader'>
+    <Workbench
+      key='workbench'
+      mode={mode}
+      setMode={mode => connection?.setMode(mode)}
+      model={model?.model}
+      sources={sources}
+    />
+  </div>;
+};
+
+async function loadSingleTraceFile(url: string): Promise<{ model: MultiTraceModel, sha1: string }> {
+  const params = new URLSearchParams();
+  params.set('trace', url);
+  const response = await fetch(`contexts?${params.toString()}`);
+  const contextEntries = await response.json() as ContextEntry[];
+
+  const tokens: string[] = [];
+  for (const entry of contextEntries) {
+    entry.actions.forEach(a => tokens.push(a.type + '@' + a.startTime + '-' + a.endTime));
+    entry.events.forEach(e => tokens.push(e.type + '@' + e.time));
+  }
+  return { model: new MultiTraceModel(contextEntries), sha1: await sha1(tokens.join('|')) };
+}
+
+export const Workbench: React.FunctionComponent<{
+  mode: Mode,
+  setMode: (mode: Mode) => void,
+  model?: modelUtil.MultiTraceModel,
+  sources: Source[],
+}> = ({ mode, setMode, model, sources }) => {
+  const [fileId, setFileId] = React.useState<string | undefined>();
+  const [selectedCallId, setSelectedCallId] = React.useState<string | undefined>(undefined);
+  const [selectedPropertiesTab, setSelectedPropertiesTab] = useSetting<string>('recorderPropertiesTab', 'source');
+  const [isInspecting, setIsInspectingState] = React.useState(false);
+  const [highlightedLocator, setHighlightedLocator] = React.useState<string>('');
+  const [selectedTime, setSelectedTime] = React.useState<Boundaries | undefined>();
+  const sourceModel = React.useRef(new Map<string, modelUtil.SourceModel>());
+
+  const setSelectedAction = React.useCallback((action: modelUtil.ActionTraceEventInContext | undefined) => {
+    setSelectedCallId(action?.callId);
+  }, []);
+
+  const selectedAction = React.useMemo(() => {
+    return model?.actions.find(a => a.callId === selectedCallId);
+  }, [model, selectedCallId]);
+
+  const onActionSelected = React.useCallback((action: modelUtil.ActionTraceEventInContext) => {
+    setSelectedAction(action);
+  }, [setSelectedAction]);
+
+  const selectPropertiesTab = React.useCallback((tab: string) => {
+    setSelectedPropertiesTab(tab);
+    if (tab !== 'inspector')
+      setIsInspectingState(false);
+  }, [setSelectedPropertiesTab]);
+
+  const setIsInspecting = React.useCallback((value: boolean) => {
+    if (!isInspecting && value)
+      selectPropertiesTab('inspector');
+    setIsInspectingState(value);
+  }, [setIsInspectingState, selectPropertiesTab, isInspecting]);
+
+  const locatorPicked = React.useCallback((locator: string) => {
+    setHighlightedLocator(locator);
+    selectPropertiesTab('inspector');
+  }, [selectPropertiesTab]);
+
+  const consoleModel = useConsoleTabModel(model, selectedTime);
+  const networkModel = useNetworkTabModel(model, selectedTime);
+  const sdkLanguage = model?.sdkLanguage || 'javascript';
+
+  const inspectorTab: TabbedPaneTabModel = {
+    id: 'inspector',
+    title: 'Locator',
+    render: () => <InspectorTab
+      sdkLanguage={sdkLanguage}
+      setIsInspecting={setIsInspecting}
+      highlightedLocator={highlightedLocator}
+      setHighlightedLocator={setHighlightedLocator} />,
+  };
+
+  const source = React.useMemo(() => sources.find(s => s.id === fileId) || sources[0], [sources, fileId]);
 
   const fallbackLocation = React.useMemo(() => {
-    if (!sources.length)
+    if (!source)
       return undefined;
     const fallbackLocation: SourceLocation = {
       file: '',
@@ -90,37 +175,178 @@ export const TraceView: React.FC<{
       column: 0,
       source: {
         errors: [],
-        content: sources[0].text
+        content: source.text
       }
     };
     return fallbackLocation;
-  }, [sources]);
+  }, [source]);
 
-  return <Workbench
-    key='workbench'
-    model={model?.model}
-    showSourcesFirst={true}
-    fallbackLocation={fallbackLocation}
+  const sourceTab: TabbedPaneTabModel = {
+    id: 'source',
+    title: 'Source',
+    render: () => <SourceTab
+      sources={sourceModel.current}
+      stackFrameLocation={'right'}
+      fallbackLocation={fallbackLocation}
+    />
+  };
+  const consoleTab: TabbedPaneTabModel = {
+    id: 'console',
+    title: 'Console',
+    count: consoleModel.entries.length,
+    render: () => <ConsoleTab
+      consoleModel={consoleModel}
+      boundaries={boundaries}
+      selectedTime={selectedTime}
+      onAccepted={m => setSelectedTime({ minimum: m.timestamp, maximum: m.timestamp })}
+    />
+  };
+  const networkTab: TabbedPaneTabModel = {
+    id: 'network',
+    title: 'Network',
+    count: networkModel.resources.length,
+    render: () => <NetworkTab boundaries={boundaries} networkModel={networkModel} />
+  };
+
+  const tabs: TabbedPaneTabModel[] = [
+    sourceTab,
+    inspectorTab,
+    consoleTab,
+    networkTab,
+  ];
+
+  const { boundaries } = React.useMemo(() => {
+    const boundaries = { minimum: model?.startTime || 0, maximum: model?.endTime || 30000 };
+    if (boundaries.minimum > boundaries.maximum) {
+      boundaries.minimum = 0;
+      boundaries.maximum = 30000;
+    }
+    // Leave some nice free space on the right hand side.
+    boundaries.maximum += (boundaries.maximum - boundaries.minimum) / 20;
+    return { boundaries };
+  }, [model]);
+
+  const actionList = <ActionList
+    sdkLanguage={sdkLanguage}
+    actions={model?.actions || []}
+    selectedAction={model ? selectedAction : undefined}
+    selectedTime={selectedTime}
+    setSelectedTime={setSelectedTime}
+    onSelected={onActionSelected}
+    revealConsole={() => selectPropertiesTab('console')}
     isLive={true}
-    hideTimeline={true}
   />;
+
+  const actionsTab: TabbedPaneTabModel = {
+    id: 'actions',
+    title: 'Actions',
+    component: actionList,
+  };
+
+  const toolbar = <Toolbar sidebarBackground>
+    <div style={{ width: 4 }}></div>
+    <ToolbarButton icon='circle-large-filled' title='Record' toggled={mode === 'recording'} onClick={() => {
+      setMode(mode === 'recording' ? 'standby' : 'recording');
+    }}>Record</ToolbarButton>
+    <ToolbarSeparator />
+    <ToolbarButton icon='inspect' title='Pick locator' toggled={isInspecting} onClick={() => {
+      setIsInspecting(!isInspecting);
+    }} />
+    <ToolbarButton icon='eye' title='Assert visibility' onClick={() => {
+    }} />
+    <ToolbarButton icon='whole-word' title='Assert text' onClick={() => {
+    }} />
+    <ToolbarButton icon='symbol-constant' title='Assert value' onClick={() => {
+    }} />
+    <ToolbarSeparator />
+    <ToolbarButton icon='files' title='Copy' onClick={() => {
+    }} />
+    <div style={{ flex: 'auto' }}></div>
+    <div>Target:</div>
+    <SourceChooser fileId={fileId} sources={sources} setFileId={fileId => {
+      setFileId(fileId);
+    }} />
+    <ToolbarButton icon='clear-all' title='Clear' onClick={() => {
+    }}></ToolbarButton>
+    <ToolbarButton icon='color-mode' title='Toggle color mode' toggled={false} onClick={() => toggleTheme()}></ToolbarButton>
+  </Toolbar>;
+
+  const sidebarTabbedPane = <TabbedPane tabs={[actionsTab]} />;
+
+  const propertiesTabbedPane = <TabbedPane
+    tabs={tabs}
+    selectedTab={selectedPropertiesTab}
+    setSelectedTab={selectPropertiesTab}
+  />;
+
+  const snapshotView = <SnapshotContainer
+    sdkLanguage={sdkLanguage}
+    action={selectedAction}
+    testIdAttributeName={model?.testIdAttributeName || 'data-testid'}
+    isInspecting={isInspecting}
+    setIsInspecting={setIsInspecting}
+    highlightedLocator={highlightedLocator}
+    locatorPicked={locatorPicked} />;
+
+  return <div className='vbox workbench'>
+    <SplitView
+      sidebarSize={250}
+      orientation={'horizontal'}
+      settingName='recorderActionListSidebar'
+      sidebarIsFirst
+      main={<SplitView
+        sidebarSize={250}
+        orientation='vertical'
+        settingName='recorderPropertiesSidebar'
+        main={<div className='vbox'>
+          {toolbar}
+          {snapshotView}
+        </div>}
+        sidebar={propertiesTabbedPane}
+      />}
+      sidebar={sidebarTabbedPane}
+    />
+  </div>;
 };
 
-async function loadSingleTraceFile(url: string): Promise<MultiTraceModel> {
-  const params = new URLSearchParams();
-  params.set('trace', url);
-  const response = await fetch(`contexts?${params.toString()}`);
-  const contextEntries = await response.json() as ContextEntry[];
-  return new MultiTraceModel(contextEntries);
-}
+const SnapshotContainer: React.FunctionComponent<{
+  sdkLanguage: Language,
+  action: modelUtil.ActionTraceEventInContext | undefined,
+  testIdAttributeName?: string,
+  isInspecting: boolean,
+  highlightedLocator: string,
+  setIsInspecting: (value: boolean) => void,
+  locatorPicked: (locator: string) => void,
+}> = ({ sdkLanguage, action, testIdAttributeName, isInspecting, setIsInspecting, highlightedLocator, locatorPicked }) => {
+  const snapshot = React.useMemo(() => {
+    const snapshot = collectSnapshots(action);
+    return snapshot.action || snapshot.after || snapshot.before;
+  }, [action]);
+  const snapshotUrls = React.useMemo(() => {
+    return snapshot ? extendSnapshot(snapshot) : undefined;
+  }, [snapshot]);
+  return <SnapshotView
+    sdkLanguage={sdkLanguage}
+    testIdAttributeName={testIdAttributeName || 'data-testid'}
+    isInspecting={isInspecting}
+    setIsInspecting={setIsInspecting}
+    highlightedLocator={highlightedLocator}
+    setHighlightedLocator={locatorPicked}
+    snapshotUrls={snapshotUrls} />;
+};
+
+type ConnectionOptions = {
+  setSources: (sources: Source[]) => void;
+  setMode: (mode: Mode) => void;
+};
 
 class Connection {
   private _lastId = 0;
   private _webSocket: WebSocket;
   private _callbacks = new Map<number, { resolve: (arg: any) => void, reject: (arg: Error) => void }>();
-  private _options: { setSources: (sources: Source[]) => void; };
+  private _options: ConnectionOptions;
 
-  constructor(webSocket: WebSocket, options: { setSources: (sources: Source[]) => void }) {
+  constructor(webSocket: WebSocket, options: ConnectionOptions) {
     this._webSocket = webSocket;
     this._callbacks = new Map();
     this._options = options;
@@ -166,5 +392,9 @@ class Connection {
       this._options.setSources(sources);
       window.playwrightSourcesEchoForTest = sources;
     }
+    if (method === 'setMode') {
+      const { mode } = params as { mode: Mode };
+      this._options.setMode(mode);
+    }
   }
 }
diff --git a/packages/trace-viewer/src/ui/sourceTab.tsx b/packages/trace-viewer/src/ui/sourceTab.tsx
index ce54b34d53..d130499207 100644
--- a/packages/trace-viewer/src/ui/sourceTab.tsx
+++ b/packages/trace-viewer/src/ui/sourceTab.tsx
@@ -28,7 +28,7 @@ import { ToolbarButton } from '@web/components/toolbarButton';
 import { Toolbar } from '@web/components/toolbar';
 
 export const SourceTab: React.FunctionComponent<{
-  stack: StackFrame[] | undefined,
+  stack?: StackFrame[],
   stackFrameLocation: 'bottom' | 'right',
   sources: Map<string, SourceModel>,
   rootDir?: string,
diff --git a/packages/trace-viewer/src/ui/workbench.tsx b/packages/trace-viewer/src/ui/workbench.tsx
index 13c5f5fd0e..2905bb052f 100644
--- a/packages/trace-viewer/src/ui/workbench.tsx
+++ b/packages/trace-viewer/src/ui/workbench.tsx
@@ -60,8 +60,7 @@ export const Workbench: React.FunctionComponent<{
 }> = ({ model, showSourcesFirst, rootDir, fallbackLocation, isLive, hideTimeline, status, annotations, inert, openPage, onOpenExternally, revealSource, showSettings }) => {
   const [selectedCallId, setSelectedCallId] = React.useState<string | undefined>(undefined);
   const [revealedError, setRevealedError] = React.useState<ErrorDescription | undefined>(undefined);
-
-  const [highlightedAction, setHighlightedAction] = React.useState<modelUtil.ActionTraceEventInContext | undefined>();
+  const [highlightedCallId, setHighlightedCallId] = React.useState<string | undefined>();
   const [highlightedEntry, setHighlightedEntry] = React.useState<Entry | undefined>();
   const [highlightedConsoleMessage, setHighlightedConsoleMessage] = React.useState<ConsoleEntry | undefined>();
   const [selectedNavigatorTab, setSelectedNavigatorTab] = React.useState<string>('actions');
@@ -77,6 +76,14 @@ export const Workbench: React.FunctionComponent<{
     setRevealedError(undefined);
   }, []);
 
+  const highlightedAction = React.useMemo(() => {
+    return model?.actions.find(a => a.callId === highlightedCallId);
+  }, [model, highlightedCallId]);
+
+  const setHighlightedAction = React.useCallback((highlightedAction: modelUtil.ActionTraceEventInContext | undefined) => {
+    setHighlightedCallId(highlightedAction?.callId);
+  }, []);
+
   const sources = React.useMemo(() => model?.sources || new Map<string, modelUtil.SourceModel>(), [model]);
 
   React.useEffect(() => {
diff --git a/packages/web/src/components/sourceChooser.css b/packages/web/src/components/sourceChooser.css
new file mode 100644
index 0000000000..60ac74bf85
--- /dev/null
+++ b/packages/web/src/components/sourceChooser.css
@@ -0,0 +1,20 @@
+/*
+  Copyright (c) Microsoft Corporation.
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+      http://www.apache.org/licenses/LICENSE-2.0
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+.source-chooser {
+  border: none;
+  background: none;
+  outline: none;
+  color: var(--vscode-sideBarTitle-foreground);
+  min-width: 100px;
+}
diff --git a/packages/web/src/components/sourceChooser.tsx b/packages/web/src/components/sourceChooser.tsx
new file mode 100644
index 0000000000..0645480a03
--- /dev/null
+++ b/packages/web/src/components/sourceChooser.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react';
+import type { Source } from '@recorder/recorderTypes';
+
+export const SourceChooser: React.FC<{
+  sources: Source[],
+  fileId: string | undefined,
+  setFileId: (fileId: string) => void,
+}> = ({ sources, fileId, setFileId }) => {
+  return <select className='source-chooser' hidden={!sources.length} value={fileId} onChange={event => {
+    setFileId(event.target.selectedOptions[0].value);
+  }}>{renderSourceOptions(sources)}</select>;
+};
+
+function renderSourceOptions(sources: Source[]): React.ReactNode {
+  const transformTitle = (title: string): string => title.replace(/.*[/\\]([^/\\]+)/, '$1');
+  const renderOption = (source: Source): React.ReactNode => (
+    <option key={source.id} value={source.id}>{transformTitle(source.label)}</option>
+  );
+
+  const hasGroup = sources.some(s => s.group);
+  if (hasGroup) {
+    const groups = new Set(sources.map(s => s.group));
+    return [...groups].filter(Boolean).map(group => (
+      <optgroup label={group} key={group}>
+        {sources.filter(s => s.group === group).map(source => renderOption(source))}
+      </optgroup>
+    ));
+  }
+
+  return sources.map(source => renderOption(source));
+}
+
+export function emptySource(): Source {
+  return {
+    id: 'default',
+    isRecorded: false,
+    text: '',
+    language: 'javascript',
+    label: '',
+    highlight: []
+  };
+}
\ No newline at end of file
diff --git a/packages/web/src/components/tabbedPane.tsx b/packages/web/src/components/tabbedPane.tsx
index b9872294df..5df94ec4c3 100644
--- a/packages/web/src/components/tabbedPane.tsx
+++ b/packages/web/src/components/tabbedPane.tsx
@@ -32,11 +32,13 @@ export const TabbedPane: React.FunctionComponent<{
   tabs: TabbedPaneTabModel[],
   leftToolbar?: React.ReactElement[],
   rightToolbar?: React.ReactElement[],
-  selectedTab: string,
-  setSelectedTab: (tab: string) => void,
+  selectedTab?: string,
+  setSelectedTab?: (tab: string) => void,
   dataTestId?: string,
   mode?: 'default' | 'select',
 }> = ({ tabs, selectedTab, setSelectedTab, leftToolbar, rightToolbar, dataTestId, mode }) => {
+  if (!selectedTab)
+    selectedTab = tabs[0].id;
   if (!mode)
     mode = 'default';
   return <div className='tabbed-pane' data-testid={dataTestId}>
@@ -60,7 +62,7 @@ export const TabbedPane: React.FunctionComponent<{
         </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);
+            setSelectedTab?.(tabs[e.currentTarget.selectedIndex].id);
           }}>
             {tabs.map(tab => {
               let suffix = '';
@@ -95,10 +97,10 @@ export const TabbedPaneTab: React.FunctionComponent<{
   count?: number,
   errorCount?: number,
   selected?: boolean,
-  onSelect: (id: string) => void
+  onSelect?: (id: string) => void
 }> = ({ id, title, count, errorCount, selected, onSelect }) => {
   return <div className={clsx('tabbed-pane-tab', selected && 'selected')}
-    onClick={() => onSelect(id)}
+    onClick={() => onSelect?.(id)}
     title={title}
     key={id}>
     <div className='tabbed-pane-tab-label'>{title}</div>
diff --git a/packages/web/src/components/toolbar.css b/packages/web/src/components/toolbar.css
index 8c58f96f65..8bebf79c62 100644
--- a/packages/web/src/components/toolbar.css
+++ b/packages/web/src/components/toolbar.css
@@ -24,6 +24,10 @@
   padding-right: 4px;
 }
 
+.toolbar.toolbar-sidebar-background {
+  background-color: var(--vscode-sideBar-background);
+}
+
 .toolbar:after {
   content: '';
   display: block;
diff --git a/packages/web/src/components/toolbar.tsx b/packages/web/src/components/toolbar.tsx
index c7dd6843d9..a81b834f4a 100644
--- a/packages/web/src/components/toolbar.tsx
+++ b/packages/web/src/components/toolbar.tsx
@@ -21,6 +21,7 @@ import * as React from 'react';
 type ToolbarProps = {
   noShadow?: boolean;
   noMinHeight?: boolean;
+  sidebarBackground?: boolean;
   className?: string;
   onClick?: (e: React.MouseEvent) => void;
 };
@@ -30,7 +31,8 @@ export const Toolbar: React.FC<React.PropsWithChildren<ToolbarProps>> = ({
   children,
   noMinHeight,
   className,
+  sidebarBackground,
   onClick,
 }) => {
-  return <div className={clsx('toolbar', noShadow && 'no-shadow', noMinHeight && 'no-min-height', className)} onClick={onClick}>{children}</div>;
+  return <div className={clsx('toolbar', noShadow && 'no-shadow', noMinHeight && 'no-min-height', className, sidebarBackground && 'toolbar-sidebar-background')} onClick={onClick}>{children}</div>;
 };
diff --git a/packages/web/src/uiUtils.ts b/packages/web/src/uiUtils.ts
index 49459fe29c..df344df394 100644
--- a/packages/web/src/uiUtils.ts
+++ b/packages/web/src/uiUtils.ts
@@ -203,5 +203,10 @@ export function clsx(...classes: (string | undefined | false)[]) {
   return classes.filter(Boolean).join(' ');
 }
 
+export async function sha1(str: string): Promise<string> {
+  const buffer = new TextEncoder().encode(str);
+  return Array.from(new Uint8Array(await crypto.subtle.digest('SHA-1', buffer))).map(b => b.toString(16).padStart(2, '0')).join('');
+}
+
 const kControlCodesRe = '\\u0000-\\u0020\\u007f-\\u009f';
 export const kWebLinkRe = new RegExp('(?:[a-zA-Z][a-zA-Z0-9+.-]{2,}:\\/\\/|www\\.)[^\\s' + kControlCodesRe + '"]{2,}[^\\s' + kControlCodesRe + '"\')}\\],:;.!?]', 'ug');

From 22c76aacadb87f2c951a632743529ea2edaacd7a Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Mon, 23 Sep 2024 20:01:08 -0700
Subject: [PATCH 16/29] chore: roll rollup to fix audit (#32778)

---
 package-lock.json | 140 +++++++++++++++++++++++-----------------------
 1 file changed, 70 insertions(+), 70 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d113e1c42e..fded01102a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1517,9 +1517,9 @@
       "link": true
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.3.tgz",
-      "integrity": "sha512-MmKSfaB9GX+zXl6E8z4koOr/xU63AMVleLEa64v7R0QF/ZloMs5vcD1sHgM64GXXS1csaJutG+ddtzcueI/BLg==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz",
+      "integrity": "sha512-Fxamp4aEZnfPOcGA8KSNEohV8hX7zVHOemC8jVBoBUHu5zpJK/Eu3uJwt6BMgy9fkvzxDaurgj96F/NiLukF2w==",
       "cpu": [
         "arm"
       ],
@@ -1529,9 +1529,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.21.3.tgz",
-      "integrity": "sha512-zrt8ecH07PE3sB4jPOggweBjJMzI1JG5xI2DIsUbkA+7K+Gkjys6eV7i9pOenNSDJH3eOr/jLb/PzqtmdwDq5g==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.4.tgz",
+      "integrity": "sha512-VXoK5UMrgECLYaMuGuVTOx5kcuap1Jm8g/M83RnCHBKOqvPPmROFJGQaZhGccnsFtfXQ3XYa4/jMCJvZnbJBdA==",
       "cpu": [
         "arm64"
       ],
@@ -1541,9 +1541,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.3.tgz",
-      "integrity": "sha512-P0UxIOrKNBFTQaXTxOH4RxuEBVCgEA5UTNV6Yz7z9QHnUJ7eLX9reOd/NYMO3+XZO2cco19mXTxDMXxit4R/eQ==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.4.tgz",
+      "integrity": "sha512-xMM9ORBqu81jyMKCDP+SZDhnX2QEVQzTcC6G18KlTQEzWK8r/oNZtKuZaCcHhnsa6fEeOBionoyl5JsAbE/36Q==",
       "cpu": [
         "arm64"
       ],
@@ -1553,9 +1553,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.21.3.tgz",
-      "integrity": "sha512-L1M0vKGO5ASKntqtsFEjTq/fD91vAqnzeaF6sfNAy55aD+Hi2pBI5DKwCO+UNDQHWsDViJLqshxOahXyLSh3EA==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.4.tgz",
+      "integrity": "sha512-aJJyYKQwbHuhTUrjWjxEvGnNNBCnmpHDvrb8JFDbeSH3m2XdHcxDd3jthAzvmoI8w/kSjd2y0udT+4okADsZIw==",
       "cpu": [
         "x64"
       ],
@@ -1565,9 +1565,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.21.3.tgz",
-      "integrity": "sha512-btVgIsCjuYFKUjopPoWiDqmoUXQDiW2A4C3Mtmp5vACm7/GnyuprqIDPNczeyR5W8rTXEbkmrJux7cJmD99D2g==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.4.tgz",
+      "integrity": "sha512-j63YtCIRAzbO+gC2L9dWXRh5BFetsv0j0va0Wi9epXDgU/XUi5dJKo4USTttVyK7fGw2nPWK0PbAvyliz50SCQ==",
       "cpu": [
         "arm"
       ],
@@ -1577,9 +1577,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.21.3.tgz",
-      "integrity": "sha512-zmjbSphplZlau6ZTkxd3+NMtE4UKVy7U4aVFMmHcgO5CUbw17ZP6QCgyxhzGaU/wFFdTfiojjbLG3/0p9HhAqA==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.4.tgz",
+      "integrity": "sha512-dJnWUgwWBX1YBRsuKKMOlXCzh2Wu1mlHzv20TpqEsfdZLb3WoJW2kIEsGwLkroYf24IrPAvOT/ZQ2OYMV6vlrg==",
       "cpu": [
         "arm"
       ],
@@ -1589,9 +1589,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.21.3.tgz",
-      "integrity": "sha512-nSZfcZtAnQPRZmUkUQwZq2OjQciR6tEoJaZVFvLHsj0MF6QhNMg0fQ6mUOsiCUpTqxTx0/O6gX0V/nYc7LrgPw==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.4.tgz",
+      "integrity": "sha512-AdPRoNi3NKVLolCN/Sp4F4N1d98c4SBnHMKoLuiG6RXgoZ4sllseuGioszumnPGmPM2O7qaAX/IJdeDU8f26Aw==",
       "cpu": [
         "arm64"
       ],
@@ -1601,9 +1601,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.21.3.tgz",
-      "integrity": "sha512-MnvSPGO8KJXIMGlQDYfvYS3IosFN2rKsvxRpPO2l2cum+Z3exiExLwVU+GExL96pn8IP+GdH8Tz70EpBhO0sIQ==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.4.tgz",
+      "integrity": "sha512-Gl0AxBtDg8uoAn5CCqQDMqAx22Wx22pjDOjBdmG0VIWX3qUBHzYmOKh8KXHL4UpogfJ14G4wk16EQogF+v8hmA==",
       "cpu": [
         "arm64"
       ],
@@ -1613,9 +1613,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.21.3.tgz",
-      "integrity": "sha512-+W+p/9QNDr2vE2AXU0qIy0qQE75E8RTwTwgqS2G5CRQ11vzq0tbnfBd6brWhS9bCRjAjepJe2fvvkvS3dno+iw==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.4.tgz",
+      "integrity": "sha512-3aVCK9xfWW1oGQpTsYJJPF6bfpWfhbRnhdlyhak2ZiyFLDaayz0EP5j9V1RVLAAxlmWKTDfS9wyRyY3hvhPoOg==",
       "cpu": [
         "ppc64"
       ],
@@ -1625,9 +1625,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.21.3.tgz",
-      "integrity": "sha512-yXH6K6KfqGXaxHrtr+Uoy+JpNlUlI46BKVyonGiaD74ravdnF9BUNC+vV+SIuB96hUMGShhKV693rF9QDfO6nQ==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.4.tgz",
+      "integrity": "sha512-ePYIir6VYnhgv2C5Xe9u+ico4t8sZWXschR6fMgoPUK31yQu7hTEJb7bCqivHECwIClJfKgE7zYsh1qTP3WHUA==",
       "cpu": [
         "riscv64"
       ],
@@ -1637,9 +1637,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.21.3.tgz",
-      "integrity": "sha512-R8cwY9wcnApN/KDYWTH4gV/ypvy9yZUHlbJvfaiXSB48JO3KpwSpjOGqO4jnGkLDSk1hgjYkTbTt6Q7uvPf8eg==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.4.tgz",
+      "integrity": "sha512-GqFJ9wLlbB9daxhVlrTe61vJtEY99/xB3C8e4ULVsVfflcpmR6c8UZXjtkMA6FhNONhj2eA5Tk9uAVw5orEs4Q==",
       "cpu": [
         "s390x"
       ],
@@ -1649,9 +1649,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.3.tgz",
-      "integrity": "sha512-kZPbX/NOPh0vhS5sI+dR8L1bU2cSO9FgxwM8r7wHzGydzfSjLRCFAT87GR5U9scj2rhzN3JPYVC7NoBbl4FZ0g==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.4.tgz",
+      "integrity": "sha512-87v0ol2sH9GE3cLQLNEy0K/R0pz1nvg76o8M5nhMR0+Q+BBGLnb35P0fVz4CQxHYXaAOhE8HhlkaZfsdUOlHwg==",
       "cpu": [
         "x64"
       ],
@@ -1661,9 +1661,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.21.3.tgz",
-      "integrity": "sha512-S0Yq+xA1VEH66uiMNhijsWAafffydd2X5b77eLHfRmfLsRSpbiAWiRHV6DEpz6aOToPsgid7TI9rGd6zB1rhbg==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.4.tgz",
+      "integrity": "sha512-UV6FZMUgePDZrFjrNGIWzDo/vABebuXBhJEqrHxrGiU6HikPy0Z3LfdtciIttEUQfuDdCn8fqh7wiFJjCNwO+g==",
       "cpu": [
         "x64"
       ],
@@ -1673,9 +1673,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.21.3.tgz",
-      "integrity": "sha512-9isNzeL34yquCPyerog+IMCNxKR8XYmGd0tHSV+OVx0TmE0aJOo9uw4fZfUuk2qxobP5sug6vNdZR6u7Mw7Q+Q==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.4.tgz",
+      "integrity": "sha512-BjI+NVVEGAXjGWYHz/vv0pBqfGoUH0IGZ0cICTn7kB9PyjrATSkX+8WkguNjWoj2qSr1im/+tTGRaY+4/PdcQw==",
       "cpu": [
         "arm64"
       ],
@@ -1685,9 +1685,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.21.3.tgz",
-      "integrity": "sha512-nMIdKnfZfzn1Vsk+RuOvl43ONTZXoAPUUxgcU0tXooqg4YrAqzfKzVenqqk2g5efWh46/D28cKFrOzDSW28gTA==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.4.tgz",
+      "integrity": "sha512-SiWG/1TuUdPvYmzmYnmd3IEifzR61Tragkbx9D3+R8mzQqDBz8v+BvZNDlkiTtI9T15KYZhP0ehn3Dld4n9J5g==",
       "cpu": [
         "ia32"
       ],
@@ -1697,9 +1697,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.21.3.tgz",
-      "integrity": "sha512-fOvu7PCQjAj4eWDEuD8Xz5gpzFqXzGlxHZozHP4b9Jxv9APtdxL6STqztDzMLuRXEc4UpXGGhx029Xgm91QBeA==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.4.tgz",
+      "integrity": "sha512-j8pPKp53/lq9lMXN57S8cFz0MynJk8OWNuUnXct/9KCpKU7DgU3bYMJhwWmcqC0UU29p8Lr0/7KEVcaM6bf47Q==",
       "cpu": [
         "x64"
       ],
@@ -5417,9 +5417,9 @@
       "dev": true
     },
     "node_modules/micromatch": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
       "dependencies": {
         "braces": "^3.0.3",
@@ -6313,9 +6313,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.21.3",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.3.tgz",
-      "integrity": "sha512-7sqRtBNnEbcBtMeRVc6VRsJMmpI+JU1z9VTvW8D4gXIYQFz0aLcsE6rRkyghZkLfEgUZgVvOG7A5CVz/VW5GIA==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.22.4.tgz",
+      "integrity": "sha512-vD8HJ5raRcWOyymsR6Z3o6+RzfEPCnVLMFJ6vRslO1jt4LO6dUo5Qnpg7y4RkZFM2DMe3WUirkI5c16onjrc6A==",
       "dependencies": {
         "@types/estree": "1.0.5"
       },
@@ -6327,22 +6327,22 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.21.3",
-        "@rollup/rollup-android-arm64": "4.21.3",
-        "@rollup/rollup-darwin-arm64": "4.21.3",
-        "@rollup/rollup-darwin-x64": "4.21.3",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.21.3",
-        "@rollup/rollup-linux-arm-musleabihf": "4.21.3",
-        "@rollup/rollup-linux-arm64-gnu": "4.21.3",
-        "@rollup/rollup-linux-arm64-musl": "4.21.3",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.21.3",
-        "@rollup/rollup-linux-riscv64-gnu": "4.21.3",
-        "@rollup/rollup-linux-s390x-gnu": "4.21.3",
-        "@rollup/rollup-linux-x64-gnu": "4.21.3",
-        "@rollup/rollup-linux-x64-musl": "4.21.3",
-        "@rollup/rollup-win32-arm64-msvc": "4.21.3",
-        "@rollup/rollup-win32-ia32-msvc": "4.21.3",
-        "@rollup/rollup-win32-x64-msvc": "4.21.3",
+        "@rollup/rollup-android-arm-eabi": "4.22.4",
+        "@rollup/rollup-android-arm64": "4.22.4",
+        "@rollup/rollup-darwin-arm64": "4.22.4",
+        "@rollup/rollup-darwin-x64": "4.22.4",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.22.4",
+        "@rollup/rollup-linux-arm-musleabihf": "4.22.4",
+        "@rollup/rollup-linux-arm64-gnu": "4.22.4",
+        "@rollup/rollup-linux-arm64-musl": "4.22.4",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.22.4",
+        "@rollup/rollup-linux-riscv64-gnu": "4.22.4",
+        "@rollup/rollup-linux-s390x-gnu": "4.22.4",
+        "@rollup/rollup-linux-x64-gnu": "4.22.4",
+        "@rollup/rollup-linux-x64-musl": "4.22.4",
+        "@rollup/rollup-win32-arm64-msvc": "4.22.4",
+        "@rollup/rollup-win32-ia32-msvc": "4.22.4",
+        "@rollup/rollup-win32-x64-msvc": "4.22.4",
         "fsevents": "~2.3.2"
       }
     },

From 59700aa9f1293a2a1d513ec315cd3bf681671a76 Mon Sep 17 00:00:00 2001
From: Dmitry Gozman <dgozman@gmail.com>
Date: Tue, 24 Sep 2024 02:51:09 -0700
Subject: [PATCH 17/29] chore: brush up documentation scripts (#32782)

References #32590.
---
 utils/doclint/api_parser.js      |  3 +-
 utils/doclint/documentation.js   | 43 +++++------------------
 utils/doclint/generateApiJson.js | 22 +++++++-----
 utils/generate_types/index.js    | 60 ++++++++++++++++++++------------
 4 files changed, 60 insertions(+), 68 deletions(-)

diff --git a/utils/doclint/api_parser.js b/utils/doclint/api_parser.js
index a593872f99..f2f53cbd1f 100644
--- a/utils/doclint/api_parser.js
+++ b/utils/doclint/api_parser.js
@@ -192,8 +192,7 @@ class ApiParser {
         method.argsArray.push(options);
       }
       p.required = false;
-      // @ts-ignore
-      options.type.properties.push(p);
+      options.type?.properties?.push(p);
     }
   }
 
diff --git a/utils/doclint/documentation.js b/utils/doclint/documentation.js
index 77b20ca769..e3e92c3ec7 100644
--- a/utils/doclint/documentation.js
+++ b/utils/doclint/documentation.js
@@ -363,11 +363,6 @@ class Member {
       this.alias = match[1];
       this.overloadIndex = (+match[2]) - 1;
     }
-    /**
-     * Param is true and option false
-     * @type {Boolean | null}
-     */
-    this.paramOrOption = null;
   }
 
   index() {
@@ -384,10 +379,8 @@ class Member {
     for (const arg of this.argsArray) {
       this.args.set(arg.name, arg);
       arg.enclosingMethod = this;
-      if (arg.name === 'options') {
-        // @ts-ignore
-        arg.type.properties.sort((p1, p2) => p1.name.localeCompare(p2.name));
-      }
+      if (arg.name === 'options')
+        arg.type?.properties?.sort((p1, p2) => p1.name.localeCompare(p2.name));
       indexArg(arg);
     }
   }
@@ -410,11 +403,9 @@ class Member {
         continue;
       const overriddenArg = (arg.langs.overrides && arg.langs.overrides[lang]) || arg;
       overriddenArg.filterForLanguage(lang, options);
-      // @ts-ignore
-      if (overriddenArg.name === 'options' && !overriddenArg.type.properties.length)
+      if (overriddenArg.name === 'options' && !overriddenArg.type?.properties?.length)
         continue;
-      // @ts-ignore
-      overriddenArg.type.filterForLanguage(lang, options);
+      overriddenArg.type?.filterForLanguage(lang, options);
       argsArray.push(overriddenArg);
     }
     this.argsArray = argsArray;
@@ -433,7 +424,6 @@ class Member {
     const result = new Member(this.kind, { langs: this.langs, since: this.since, deprecated: this.deprecated, discouraged: this.discouraged }, this.name, this.type?.clone(), this.argsArray.map(arg => arg.clone()), this.spec, this.required);
     result.alias = this.alias;
     result.async = this.async;
-    result.paramOrOption = this.paramOrOption;
     return result;
   }
 
@@ -526,8 +516,7 @@ class Type {
     if (!inUnion && (parsedType.union || parsedType.unionName)) {
       const type = new Type(parsedType.unionName || '');
       type.union = [];
-      // @ts-ignore
-      for (let t = parsedType; t; t = t.union) {
+      for (let /** @type {ParsedType | null} */ t = parsedType; t; t = t.union) {
         const nestedUnion = !!t.unionName && t !== parsedType;
         type.union.push(Type.fromParsedType(t, !nestedUnion));
         if (nestedUnion)
@@ -539,7 +528,6 @@ class Type {
     if (parsedType.args || parsedType.retType) {
       const type = new Type('function');
       type.args = [];
-      // @ts-ignore
       for (let t = parsedType.args; t; t = t.next)
         type.args.push(Type.fromParsedType(t));
       type.returnType = parsedType.retType ? Type.fromParsedType(parsedType.retType) : undefined;
@@ -549,8 +537,7 @@ class Type {
     if (parsedType.template) {
       const type = new Type(parsedType.name);
       type.templates = [];
-      // @ts-ignore
-      for (let t = parsedType.template; t; t = t.next)
+      for (let /** @type {ParsedType | null} */ t = parsedType.template; t; t = t.next)
         type.templates.push(Type.fromParsedType(t));
       return type;
     }
@@ -613,17 +600,6 @@ class Type {
     return [];
   }
 
-  /**
-    * @returns {Member[] | undefined}
-  */
-  sortedProperties() {
-    if (!this.properties)
-      return this.properties;
-    const sortedProperties = [...this.properties];
-    sortedProperties.sort((p1, p2) => p1.name.localeCompare(p2.name));
-    return sortedProperties;
-  }
-
   /**
    * @param {string} lang
    * @param {LanguageOptions=} options
@@ -768,11 +744,10 @@ function patchLinksInText(classOrMember, text, classesMap, membersMap, linkRende
       let alias = p2;
       if (classOrMember) {
         // param/option reference can only be in method or same method parameter comments.
-        // @ts-ignore
-        const method = classOrMember.enclosingMethod;
-        const param = method.argsArray.find(a => a.name === p2);
+        const method = /** @type {Member} */(classOrMember).enclosingMethod;
+        const param = method?.argsArray.find(a => a.name === p2);
         if (!param)
-          throw new Error(`Referenced parameter ${match} not found in the parent method ${method.name} `);
+          throw new Error(`Referenced parameter ${match} not found in the parent method ${method?.name} `);
         alias = param.alias;
       }
       return linkRenderer({ param: alias, href }) || match;
diff --git a/utils/doclint/generateApiJson.js b/utils/doclint/generateApiJson.js
index bb639abbaf..028e983d75 100644
--- a/utils/doclint/generateApiJson.js
+++ b/utils/doclint/generateApiJson.js
@@ -17,7 +17,6 @@
 // @ts-check
 
 const path = require('path');
-const Documentation = require('./documentation');
 const { parseApi } = require('./api_parser');
 const PROJECT_DIR = path.join(__dirname, '..', '..');
 
@@ -38,14 +37,14 @@ const PROJECT_DIR = path.join(__dirname, '..', '..');
 }
 
 /**
- * @param {Documentation} documentation
+ * @param {import('./documentation').Documentation} documentation
  */
 function serialize(documentation) {
   return documentation.classesArray.map(serializeClass);
 }
 
 /**
- * @param {Documentation.Class} clazz
+ * @param {import('./documentation').Class} clazz
  */
 function serializeClass(clazz) {
   const result = { name: clazz.name, spec: clazz.spec };
@@ -65,7 +64,7 @@ function serializeClass(clazz) {
 }
 
 /**
- * @param {Documentation.Member} member
+ * @param {import('./documentation').Member} member
  */
 function serializeMember(member) {
   const result = /** @type {any} */ ({ ...member });
@@ -76,14 +75,20 @@ function serializeMember(member) {
   return result;
 }
 
+/**
+ * @param {import('./documentation').Member} arg
+ */
 function serializeProperty(arg) {
   const result = { ...arg, parent: undefined };
   sanitize(result);
   if (arg.type)
-    result.type = serializeType(arg.type, arg.name === 'options');
+    result.type = serializeType(arg.type);
   return result;
 }
 
+/**
+ * @param {object} result
+ */
 function sanitize(result) {
   delete result.args;
   delete result.argsArray;
@@ -92,14 +97,13 @@ function sanitize(result) {
 }
 
 /**
- * @param {Documentation.Type} type
- * @param {boolean} sortProperties
+ * @param {import('./documentation').Type} type
  */
-function serializeType(type, sortProperties = false) {
+function serializeType(type) {
   /** @type {any} */
   const result = { ...type };
   if (type.properties)
-    result.properties = (sortProperties ? type.sortedProperties() : type.properties).map(serializeProperty);
+    result.properties = type.properties.map(serializeProperty);
   if (type.union)
     result.union = type.union.map(type => serializeType(type));
   if (type.templates)
diff --git a/utils/generate_types/index.js b/utils/generate_types/index.js
index eb1527c80b..ae988ac32c 100644
--- a/utils/generate_types/index.js
+++ b/utils/generate_types/index.js
@@ -91,7 +91,7 @@ class TypesGenerator {
       if (!docClass)
         return '';
       handledClasses.add(className);
-      return this.writeComment(docClass.comment) + '\n';
+      return this.writeComment(docClass.comment, '') + '\n';
     }, (className, methodName, overloadIndex) => {
       if (className === 'SuiteFunction' && methodName === '__call') {
         const cls = this.documentation.classes.get('Test');
@@ -218,7 +218,7 @@ class TypesGenerator {
   classToString(classDesc) {
     const parts = [];
     if (classDesc.comment) {
-      parts.push(this.writeComment(classDesc.comment))
+      parts.push(this.writeComment(classDesc.comment, ''))
     }
     const shouldExport = !this.doNotExportClassNames.has(classDesc.name);
     parts.push(`${shouldExport ? 'export ' : ''}interface ${classDesc.name} ${classDesc.extends ? `extends ${classDesc.extends} ` : ''}{`);
@@ -258,7 +258,7 @@ class TypesGenerator {
     const descriptions = [];
     for (let [eventName, value] of classDesc.events) {
       eventName = eventName.toLowerCase();
-      const type = this.stringifyComplexType(value && value.type, 'out', '  ', classDesc.name, eventName, 'payload');
+      const type = this.stringifyComplexType(value && value.type, 'out', '  ', [classDesc.name, eventName, 'payload']);
       const argName = this.argNameForType(type);
       const params = argName ? `${argName}: ${type}` : '';
       descriptions.push({
@@ -311,8 +311,8 @@ class TypesGenerator {
         return parts.join('\n');
       }
       const jsdoc = this.memberJSDOC(member, indent);
-      const args = this.argsFromMember(member, indent, classDesc.name);
-      let type = this.stringifyComplexType(member.type, 'out', indent, classDesc.name, member.alias);
+      const args = this.argsFromMember(member, indent, [classDesc.name]);
+      let type = this.stringifyComplexType(member.type, 'out', indent, [classDesc.name, member.alias]);
       if (member.async)
         type = `Promise<${type}>`;
       // do this late, because we still want object definitions for overridden types
@@ -351,7 +351,12 @@ class TypesGenerator {
     return this.documentation.classes.get(classDesc.extends);
   }
 
-  writeComment(comment, indent = '') {
+  /**
+   * @param {string} comment
+   * @param {string} indent
+   * @returns {string}
+   */
+  writeComment(comment, indent) {
     const parts = [];
     const out = [];
     const pushLine = (line) => {
@@ -387,26 +392,30 @@ class TypesGenerator {
 
   /**
    * @param {docs.Type|null} type
+   * @param {'in' | 'out'} direction
+   * @param {string} indent
+   * @param {string[]} namespace
+   * @returns {string}
    */
-  stringifyComplexType(type, direction, indent, ...namespace) {
+  stringifyComplexType(type, direction, indent, namespace) {
     if (!type)
       return 'void';
-    return this.stringifySimpleType(type, direction, indent, ...namespace);
+    return this.stringifySimpleType(type, direction, indent, namespace);
   }
 
   /**
    * @param {docs.Member[]} properties
    * @param {string} name
-   * @param {string=} indent
+   * @param {string} indent
    * @returns {string}
    */
-  stringifyObjectType(properties, name, indent = '') {
+  stringifyObjectType(properties, name, indent) {
     const parts = [];
     parts.push(`{`);
     parts.push(properties.map(member => {
       const comment = this.memberJSDOC(member, indent + '  ');
-      const args = this.argsFromMember(member, indent + '  ', name);
-      const type = this.stringifyComplexType(member.type, 'out', indent + '  ', name, member.name);
+      const args = this.argsFromMember(member, indent + '  ', [name]);
+      const type = this.stringifyComplexType(member.type, 'out', indent + '  ', [name, member.name]);
       return `${comment}${this.nameForProperty(member)}${args}: ${type};`;
     }).join('\n\n'));
     parts.push(indent + '}');
@@ -416,14 +425,16 @@ class TypesGenerator {
   /**
    * @param {docs.Type | null | undefined} type
    * @param {'in' | 'out'} direction
-   * @returns{string}
+   * @param {string} indent
+   * @param {string[]} namespace
+   * @returns {string}
    */
-  stringifySimpleType(type, direction, indent = '', ...namespace) {
+  stringifySimpleType(type, direction, indent, namespace) {
     if (!type)
       return 'void';
     if (type.name === 'Object' && type.templates) {
-      const keyType = this.stringifySimpleType(type.templates[0], direction, indent, ...namespace);
-      const valueType = this.stringifySimpleType(type.templates[1], direction, indent, ...namespace);
+      const keyType = this.stringifySimpleType(type.templates[0], direction, indent, namespace);
+      const valueType = this.stringifySimpleType(type.templates[1], direction, indent, namespace);
       return `{ [key: ${keyType}]: ${valueType}; }`;
     }
     let out = type.name;
@@ -434,7 +445,7 @@ class TypesGenerator {
     if (type.name === 'Object' && type.properties && type.properties.length) {
       const name = namespace.map(n => n[0].toUpperCase() + n.substring(1)).join('');
       const shouldExport = exported[name];
-      const properties = namespace[namespace.length - 1] === 'options' ? type.sortedProperties() : type.properties;
+      const properties = type.properties;
       if (!properties)
         throw new Error(`Object type must have properties`);
       if (!this.objectDefinitions.some(o => o.name === name))
@@ -448,10 +459,10 @@ class TypesGenerator {
 
     if (type.args) {
       const stringArgs = type.args.map(a => ({
-        type: this.stringifySimpleType(a, direction, indent, ...namespace),
+        type: this.stringifySimpleType(a, direction, indent, namespace),
         name: a.name.toLowerCase()
       }));
-      out = `((${stringArgs.map(({ name, type }) => `${name}: ${type}`).join(', ')}) => ${this.stringifySimpleType(type.returnType, 'out', indent, ...namespace)})`;
+      out = `((${stringArgs.map(({ name, type }) => `${name}: ${type}`).join(', ')}) => ${this.stringifySimpleType(type.returnType, 'out', indent, namespace)})`;
     } else if (type.name === 'function') {
       out = 'Function';
     }
@@ -460,19 +471,22 @@ class TypesGenerator {
     if (out === 'Any')
       return 'any';
     if (type.templates)
-      out += '<' + type.templates.map(t => this.stringifySimpleType(t, direction, indent, ...namespace)).join(', ') + '>';
+      out += '<' + type.templates.map(t => this.stringifySimpleType(t, direction, indent, namespace)).join(', ') + '>';
     if (type.union)
-      out = type.union.map(t => this.stringifySimpleType(t, direction, indent, ...namespace)).join('|');
+      out = type.union.map(t => this.stringifySimpleType(t, direction, indent, namespace)).join('|');
     return out.trim();
   }
 
   /**
    * @param {docs.Member} member
+   * @param {string} indent
+   * @param {string[]} namespace
+   * @returns {string}
    */
-  argsFromMember(member, indent, ...namespace) {
+  argsFromMember(member, indent, namespace) {
     if (member.kind === 'property')
       return '';
-    return '(' + member.argsArray.map(arg => `${this.nameForProperty(arg)}: ${this.stringifyComplexType(arg.type, 'in', indent, ...namespace, member.alias, arg.alias)}`).join(', ') + ')';
+    return '(' + member.argsArray.map(arg => `${this.nameForProperty(arg)}: ${this.stringifyComplexType(arg.type, 'in', indent, [...namespace, member.alias, arg.alias])}`).join(', ') + ')';
   }
 
   /**

From 995c73e9d93696d82bcbefd7c8753905a3f22ecc Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Tue, 24 Sep 2024 11:55:17 +0200
Subject: [PATCH 18/29] test: skip WebKit WebGL tests on Intel macOS (#32784)

---
 tests/library/modernizr.spec.ts    | 8 ++++----
 tests/page/page-screenshot.spec.ts | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/tests/library/modernizr.spec.ts b/tests/library/modernizr.spec.ts
index 2fd4e5c955..d74afaedb2 100644
--- a/tests/library/modernizr.spec.ts
+++ b/tests/library/modernizr.spec.ts
@@ -30,9 +30,9 @@ async function checkFeatures(name: string, context: any, server: any) {
   }
 }
 
-it('Safari Desktop', async ({ browser, browserName, platform, server, headless, isMac }) => {
+it('Safari Desktop', async ({ browser, browserName, platform, server, headless }) => {
   it.skip(browserName !== 'webkit');
-  it.skip(browserName === 'webkit' && platform === 'darwin' && parseInt(os.release(), 10) === 22, 'Modernizr uses WebGL which is not available in macOS-13 - https://bugs.webkit.org/show_bug.cgi?id=278277');
+  it.skip(browserName === 'webkit' && platform === 'darwin' && os.arch() === 'x64', 'Modernizr uses WebGL which is not available on Intel macOS - https://bugs.webkit.org/show_bug.cgi?id=278277');
   const context = await browser.newContext({
     deviceScaleFactor: 2
   });
@@ -93,9 +93,9 @@ it('Safari Desktop', async ({ browser, browserName, platform, server, headless,
   expect(actual).toEqual(expected);
 });
 
-it('Mobile Safari', async ({ playwright, browser, browserName, platform, isMac, server, headless }) => {
+it('Mobile Safari', async ({ playwright, browser, browserName, platform, server, headless }) => {
   it.skip(browserName !== 'webkit');
-  it.skip(browserName === 'webkit' && platform === 'darwin' && parseInt(os.release(), 10) === 22, 'Modernizr uses WebGL which is not available in macOS-13 - https://bugs.webkit.org/show_bug.cgi?id=278277');
+  it.skip(browserName === 'webkit' && platform === 'darwin' && os.arch() === 'x64', 'Modernizr uses WebGL which is not available on Intel macOS - https://bugs.webkit.org/show_bug.cgi?id=278277');
   const iPhone = playwright.devices['iPhone 12'];
   const context = await browser.newContext(iPhone);
   const { actual, expected } = await checkFeatures('mobile-safari-18', context, server);
diff --git a/tests/page/page-screenshot.spec.ts b/tests/page/page-screenshot.spec.ts
index 8d0e68e12d..15c8e4db39 100644
--- a/tests/page/page-screenshot.spec.ts
+++ b/tests/page/page-screenshot.spec.ts
@@ -323,7 +323,7 @@ it.describe('page screenshot', () => {
   it('should work for webgl', async ({ page, server, browserName, platform }) => {
     it.fixme(browserName === 'firefox');
     it.fixme(browserName === 'chromium' && platform === 'darwin' && os.arch() === 'arm64', 'SwiftShader is not available on macOS-arm64 - https://github.com/microsoft/playwright/issues/28216');
-    it.skip(browserName === 'webkit' && platform === 'darwin' && parseInt(os.release(), 10) === 22, 'WebGL is not available in macOS-13 - https://bugs.webkit.org/show_bug.cgi?id=278277');
+    it.skip(browserName === 'webkit' && platform === 'darwin' && os.arch() === 'x64', 'Modernizr uses WebGL which is not available on Intel macOS - https://bugs.webkit.org/show_bug.cgi?id=278277');
 
     await page.setViewportSize({ width: 640, height: 480 });
     await page.goto(server.PREFIX + '/screenshots/webgl.html');

From 76c3077a6943d9413e87b2ad2813353b2912efb6 Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Tue, 24 Sep 2024 12:02:40 +0200
Subject: [PATCH 19/29] test: retry oopif boundingBox assertions (#32787)

---
 tests/library/chromium/oopif.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/library/chromium/oopif.spec.ts b/tests/library/chromium/oopif.spec.ts
index bea16bdb75..3878aa5142 100644
--- a/tests/library/chromium/oopif.spec.ts
+++ b/tests/library/chromium/oopif.spec.ts
@@ -269,7 +269,7 @@ it('ElementHandle.boundingBox() should work', async function({ page, browser, se
 
   await assertOOPIFCount(browser, 1);
   const handle1 = await page.frames()[1].$('.box:nth-of-type(13)');
-  expect(await handle1!.boundingBox()).toEqual({ x: 100 + 42, y: 50 + 17, width: 50, height: 50 });
+  await expect.poll(() => handle1!.boundingBox()).toEqual({ x: 100 + 42, y: 50 + 17, width: 50, height: 50 });
 
   await Promise.all([
     page.frames()[1].waitForNavigation(),
@@ -277,7 +277,7 @@ it('ElementHandle.boundingBox() should work', async function({ page, browser, se
   ]);
   await assertOOPIFCount(browser, 0);
   const handle2 = await page.frames()[1].$('.box:nth-of-type(13)');
-  expect(await handle2!.boundingBox()).toEqual({ x: 100 + 42, y: 50 + 17, width: 50, height: 50 });
+  await expect.poll(() => handle2!.boundingBox()).toEqual({ x: 100 + 42, y: 50 + 17, width: 50, height: 50 });
 });
 
 it('should click', async function({ page, browser, server }) {

From 057a3187fcaabdcc67c4343a80578b91207bc94c Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Tue, 24 Sep 2024 12:20:39 +0200
Subject: [PATCH 20/29] devops: add logging for report name when uploading to
 flakiness dashboard (#32786)

---
 utils/upload_flakiness_dashboard.sh | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/utils/upload_flakiness_dashboard.sh b/utils/upload_flakiness_dashboard.sh
index d4e02894c5..cb610f9cdf 100755
--- a/utils/upload_flakiness_dashboard.sh
+++ b/utils/upload_flakiness_dashboard.sh
@@ -84,6 +84,8 @@ gzip "${REPORT_NAME}"
 
 AZ_STORAGE_ACCOUNT="folioflakinessdashboard"
 
+echo "Uploading ${REPORT_NAME}.gz"
+
 az storage blob upload --auth-mode login --account-name "${AZ_STORAGE_ACCOUNT}" -c uploads -f "${REPORT_NAME}.gz" -n "${REPORT_NAME}.gz"
 
 UTC_DATE=$(cat <<EOF | node

From b01dd556975d2b41efcb71c482d996cf258eb190 Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Tue, 24 Sep 2024 12:23:47 +0200
Subject: [PATCH 21/29] docs: use node-version: lts/* in GHA examples (#32789)

---
 docs/src/ci.md               | 8 ++++----
 docs/src/test-sharding-js.md | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/src/ci.md b/docs/src/ci.md
index 745ecc9d50..f4c11c9984 100644
--- a/docs/src/ci.md
+++ b/docs/src/ci.md
@@ -85,7 +85,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4
       with:
-        node-version: 18
+        node-version: lts/*
     - name: Install dependencies
       run: npm ci
     - name: Install Playwright Browsers
@@ -214,7 +214,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: lts/*
       - name: Install dependencies
         run: npm ci
       - name: Run your tests
@@ -319,7 +319,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4
       with:
-        node-version: 18
+        node-version: lts/*
     - name: Install dependencies
       run: npm ci
     - name: Install Playwright
@@ -434,7 +434,7 @@ jobs:
         fetch-depth: 0
     - uses: actions/setup-node@v4
       with:
-        node-version: 18
+        node-version: lts/*
     - name: Install dependencies
       run: npm ci
     - name: Install Playwright Browsers
diff --git a/docs/src/test-sharding-js.md b/docs/src/test-sharding-js.md
index d0312db811..263733e78d 100644
--- a/docs/src/test-sharding-js.md
+++ b/docs/src/test-sharding-js.md
@@ -85,7 +85,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4
       with:
-        node-version: 18
+        node-version: lts/*
     - name: Install dependencies
       run: npm ci
     - name: Install Playwright browsers
@@ -118,7 +118,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4
       with:
-        node-version: 18
+        node-version: lts/*
     - name: Install dependencies
       run: npm ci
 

From 137f192d5537322ff2e97bec050abb032437c73b Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Tue, 24 Sep 2024 12:27:36 +0200
Subject: [PATCH 22/29] test: add different expectation for macOS/headed
 'should work for canvas' (#32774)

---
 tests/page/page-screenshot.spec.ts               |   7 +++++--
 ...hot-canvas-with-accurate-corners-chromium.png | Bin 0 -> 1939 bytes
 2 files changed, 5 insertions(+), 2 deletions(-)
 create mode 100644 tests/page/page-screenshot.spec.ts-snapshots/screenshot-canvas-with-accurate-corners-chromium.png

diff --git a/tests/page/page-screenshot.spec.ts b/tests/page/page-screenshot.spec.ts
index 15c8e4db39..27cc28c141 100644
--- a/tests/page/page-screenshot.spec.ts
+++ b/tests/page/page-screenshot.spec.ts
@@ -280,12 +280,15 @@ it.describe('page screenshot', () => {
     expect(screenshot).toMatchSnapshot('screenshot-clip-odd-size.png');
   });
 
-  it('should work for canvas', async ({ page, server, isElectron, isMac }) => {
+  it('should work for canvas', async ({ page, server, isElectron, isMac, browserName, headless }) => {
     it.fixme(isElectron && isMac, 'Fails on the bots');
     await page.setViewportSize({ width: 500, height: 500 });
     await page.goto(server.PREFIX + '/screenshots/canvas.html');
     const screenshot = await page.screenshot();
-    expect(screenshot).toMatchSnapshot('screenshot-canvas.png');
+    if (!headless && browserName === 'chromium' && isMac && os.arch() === 'arm64' && /* macOS 14+ */ parseInt(os.release(), 10) >= 23)
+      expect(screenshot).toMatchSnapshot('screenshot-canvas-with-accurate-corners.png');
+    else
+      expect(screenshot).toMatchSnapshot('screenshot-canvas.png');
   });
 
   it('should capture canvas changes', async ({ page, isElectron, browserName, isMac, isWebView2 }) => {
diff --git a/tests/page/page-screenshot.spec.ts-snapshots/screenshot-canvas-with-accurate-corners-chromium.png b/tests/page/page-screenshot.spec.ts-snapshots/screenshot-canvas-with-accurate-corners-chromium.png
new file mode 100644
index 0000000000000000000000000000000000000000..830872e8d2e6ac8f68cc70a8d99bb838b2270fbc
GIT binary patch
literal 1939
zcmeAS@N?(olHy`uVBq!ia0y~yVEh8Y985qFmn|N5ffQqLkh>GZx^prw85r1oJzX3_
zD(1YsYnXS~K!D+(!H2_Ni<cElR&z~qT@r4*_dxJw3l1iWXLIBkw$!YXV`%u?Y3(p!
z2Qv#@s0)vqjE_l(&$(pqJjRwOAfcF@L#Vt#p^$uP*CW2G;d>s>UG%Ppb=u~gaDTl0
zclPh@#};Az9~RF|XU;qEj8EW;-|XL)^Q=GReP+0EhjG>sSp|<fj7@`=l3UIGV=KrD
z3>&OxTRU8sQT*?>Wb&V%H@S~l-@SWJ{KkZ{a4%$h-=7-yvyQhQ+KjUB1V+aKLtx}E
zGpHklCS4K--BRJGMfA(@qhUQ7)^x03sG8g^h+imH$hkdliaxNGW$<+Mb6Mw<&;$TH
CDVNRw

literal 0
HcmV?d00001


From 5e7d7f356bcf33098053205f23dbdd9f2e78f129 Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Tue, 24 Sep 2024 12:35:05 +0200
Subject: [PATCH 23/29] test: skip codegen tracing tests in PWTEST_TRACE mode
 (#32788)

---
 tests/library/inspector/cli-codegen-1.spec.ts |  1 +
 tests/library/inspector/cli-codegen-2.spec.ts | 28 +++++++++----------
 tests/library/inspector/cli-codegen-3.spec.ts |  1 +
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/tests/library/inspector/cli-codegen-1.spec.ts b/tests/library/inspector/cli-codegen-1.spec.ts
index 9056a890a1..00fe3d6802 100644
--- a/tests/library/inspector/cli-codegen-1.spec.ts
+++ b/tests/library/inspector/cli-codegen-1.spec.ts
@@ -19,6 +19,7 @@ import type { ConsoleMessage } from 'playwright';
 
 test.describe('cli codegen', () => {
   test.skip(({ mode }) => mode !== 'default');
+  test.skip(({ trace, codegenMode }) => trace === 'on' && codegenMode === 'trace-events');
 
   test('should click', async ({ openRecorder }) => {
     const { page, recorder } = await openRecorder();
diff --git a/tests/library/inspector/cli-codegen-2.spec.ts b/tests/library/inspector/cli-codegen-2.spec.ts
index 21182353a6..11355008e1 100644
--- a/tests/library/inspector/cli-codegen-2.spec.ts
+++ b/tests/library/inspector/cli-codegen-2.spec.ts
@@ -20,6 +20,7 @@ import fs from 'fs';
 
 test.describe('cli codegen', () => {
   test.skip(({ mode }) => mode !== 'default');
+  test.skip(({ trace, codegenMode }) => trace === 'on' && codegenMode === 'trace-events');
 
   test('should contain open page', async ({ openRecorder }) => {
     const { recorder } = await openRecorder();
@@ -549,18 +550,17 @@ await page.Locator("#textarea").FillAsync(\"Hello'\\"\`\\nWorld\");`);
     expect(message.text()).toBe('Hello\'\"\`\nWorld');
   });
 
-});
-
-test('should --test-id-attribute', async ({ openRecorder }) => {
-  const { page, recorder } = await openRecorder({ testIdAttributeName: 'my-test-id' });
-
-  await recorder.setContentAndWait(`<div my-test-id="foo">Hello</div>`);
-  await page.click('[my-test-id=foo]');
-  const sources = await recorder.waitForOutput('JavaScript', `page.getByTestId`);
-
-  expect.soft(sources.get('JavaScript')!.text).toContain(`await page.getByTestId('foo').click()`);
-  expect.soft(sources.get('Java')!.text).toContain(`page.getByTestId("foo").click()`);
-  expect.soft(sources.get('Python')!.text).toContain(`page.get_by_test_id("foo").click()`);
-  expect.soft(sources.get('Python Async')!.text).toContain(`await page.get_by_test_id("foo").click()`);
-  expect.soft(sources.get('C#')!.text).toContain(`await page.GetByTestId("foo").ClickAsync();`);
+  test('should --test-id-attribute', async ({ openRecorder }) => {
+    const { page, recorder } = await openRecorder({ testIdAttributeName: 'my-test-id' });
+
+    await recorder.setContentAndWait(`<div my-test-id="foo">Hello</div>`);
+    await page.click('[my-test-id=foo]');
+    const sources = await recorder.waitForOutput('JavaScript', `page.getByTestId`);
+
+    expect.soft(sources.get('JavaScript')!.text).toContain(`await page.getByTestId('foo').click()`);
+    expect.soft(sources.get('Java')!.text).toContain(`page.getByTestId("foo").click()`);
+    expect.soft(sources.get('Python')!.text).toContain(`page.get_by_test_id("foo").click()`);
+    expect.soft(sources.get('Python Async')!.text).toContain(`await page.get_by_test_id("foo").click()`);
+    expect.soft(sources.get('C#')!.text).toContain(`await page.GetByTestId("foo").ClickAsync();`);
+  });
 });
diff --git a/tests/library/inspector/cli-codegen-3.spec.ts b/tests/library/inspector/cli-codegen-3.spec.ts
index 7df682512b..47495a9909 100644
--- a/tests/library/inspector/cli-codegen-3.spec.ts
+++ b/tests/library/inspector/cli-codegen-3.spec.ts
@@ -18,6 +18,7 @@ import { test, expect } from './inspectorTest';
 
 test.describe('cli codegen', () => {
   test.skip(({ mode }) => mode !== 'default');
+  test.skip(({ trace, codegenMode }) => trace === 'on' && codegenMode === 'trace-events');
 
   test('should click locator.first', async ({ openRecorder }) => {
     const { page, recorder } = await openRecorder();

From 0b69b1370aa85286f6246a38ee931452b30b4447 Mon Sep 17 00:00:00 2001
From: Playwright Service <89237858+playwrightmachine@users.noreply.github.com>
Date: Tue, 24 Sep 2024 05:44:27 -0700
Subject: [PATCH 24/29] feat(chromium-tip-of-tree): roll to r1263 (#32791)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
---
 packages/playwright-core/browsers.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/playwright-core/browsers.json b/packages/playwright-core/browsers.json
index cba2baf730..097c4ec65a 100644
--- a/packages/playwright-core/browsers.json
+++ b/packages/playwright-core/browsers.json
@@ -9,9 +9,9 @@
     },
     {
       "name": "chromium-tip-of-tree",
-      "revision": "1262",
+      "revision": "1263",
       "installByDefault": false,
-      "browserVersion": "131.0.6734.0"
+      "browserVersion": "131.0.6736.0"
     },
     {
       "name": "firefox",

From dd91afa736dcaa22ff319047cf96cf78a14a3894 Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Tue, 24 Sep 2024 18:48:54 +0200
Subject: [PATCH 25/29] test: retry page-leak object count checks (#32794)

---
 tests/page/page-leaks.spec.ts | 32 ++++++++++++++++++++------------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/tests/page/page-leaks.spec.ts b/tests/page/page-leaks.spec.ts
index b33ce8e1d4..ce356f1e12 100644
--- a/tests/page/page-leaks.spec.ts
+++ b/tests/page/page-leaks.spec.ts
@@ -83,9 +83,11 @@ test('click should not leak', async ({ page, browserName, toImpl }) => {
   expect(leakedJSHandles()).toBeFalsy();
 
   if (browserName === 'chromium') {
-    const counts = await objectCounts(toImpl(page), 'HTMLButtonElement');
-    expect(counts.main + counts.utility).toBeGreaterThanOrEqual(2);
-    expect(counts.main + counts.utility).toBeLessThan(25);
+    await expect(async () => {
+      const counts = await objectCounts(toImpl(page), 'HTMLButtonElement');
+      expect(counts.main + counts.utility).toBeGreaterThanOrEqual(2);
+      expect(counts.main + counts.utility).toBeLessThan(25);
+    }).toPass();
   }
 });
 
@@ -114,9 +116,11 @@ test('fill should not leak', async ({ page, mode, browserName, toImpl }) => {
   expect(leakedJSHandles()).toBeFalsy();
 
   if (browserName === 'chromium') {
-    const counts = await objectCounts(toImpl(page), 'HTMLInputElement');
-    expect(counts.main + counts.utility).toBeGreaterThanOrEqual(2);
-    expect(counts.main + counts.utility).toBeLessThan(25);
+    await expect(async () => {
+      const counts = await objectCounts(toImpl(page), 'HTMLInputElement');
+      expect(counts.main + counts.utility).toBeGreaterThanOrEqual(2);
+      expect(counts.main + counts.utility).toBeLessThan(25);
+    }).toPass();
   }
 });
 
@@ -144,9 +148,11 @@ test('expect should not leak', async ({ page, mode, browserName, toImpl }) => {
   expect(leakedJSHandles()).toBeFalsy();
 
   if (browserName === 'chromium') {
-    const counts = await objectCounts(toImpl(page), 'HTMLButtonElement');
-    expect(counts.main + counts.utility).toBeGreaterThanOrEqual(2);
-    expect(counts.main + counts.utility).toBeLessThan(25);
+    await expect(async () => {
+      const counts = await objectCounts(toImpl(page), 'HTMLButtonElement');
+      expect(counts.main + counts.utility).toBeGreaterThanOrEqual(2);
+      expect(counts.main + counts.utility).toBeLessThan(25);
+    }).toPass();
   }
 });
 
@@ -174,8 +180,10 @@ test('waitFor should not leak', async ({ page, mode, browserName, toImpl }) => {
   expect(leakedJSHandles()).toBeFalsy();
 
   if (browserName === 'chromium') {
-    const counts = await objectCounts(toImpl(page), 'HTMLButtonElement');
-    expect(counts.main + counts.utility).toBeGreaterThanOrEqual(2);
-    expect(counts.main + counts.utility).toBeLessThan(25);
+    await expect(async () => {
+      const counts = await objectCounts(toImpl(page), 'HTMLButtonElement');
+      expect(counts.main + counts.utility).toBeGreaterThanOrEqual(2);
+      expect(counts.main + counts.utility).toBeLessThan(25);
+    }).toPass();
   }
 });

From a4cea0c2089a4900092133ff278234424ef770c1 Mon Sep 17 00:00:00 2001
From: Playwright Service <89237858+playwrightmachine@users.noreply.github.com>
Date: Tue, 24 Sep 2024 10:46:12 -0700
Subject: [PATCH 26/29] feat(webkit): roll to r2082 (#32793)

---
 packages/playwright-core/browsers.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playwright-core/browsers.json b/packages/playwright-core/browsers.json
index 097c4ec65a..d8605f9ed9 100644
--- a/packages/playwright-core/browsers.json
+++ b/packages/playwright-core/browsers.json
@@ -27,7 +27,7 @@
     },
     {
       "name": "webkit",
-      "revision": "2081",
+      "revision": "2082",
       "installByDefault": true,
       "revisionOverrides": {
         "mac10.14": "1446",

From 755edfba5be2ad0f70366631d34b3e846bbfc6e9 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Tue, 24 Sep 2024 14:00:13 -0700
Subject: [PATCH 27/29] chore: fallback expect.extend to legacy (#32795)

---
 packages/playwright/src/matchers/expect.ts |  5 +--
 tests/playwright-test/expect.spec.ts       | 36 +++++++++++++++++++++-
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/packages/playwright/src/matchers/expect.ts b/packages/playwright/src/matchers/expect.ts
index 3a254ae7bf..16300607d9 100644
--- a/packages/playwright/src/matchers/expect.ts
+++ b/packages/playwright/src/matchers/expect.ts
@@ -140,8 +140,7 @@ function createExpect(info: ExpectMetaInfo, prefix: string[], customMatchers: Re
           const wrappedMatchers: any = {};
           const extendedMatchers: any = { ...customMatchers };
           for (const [name, matcher] of Object.entries(matchers)) {
-            const key = qualifiedMatcherName(qualifier, name);
-            wrappedMatchers[key] = function(...args: any[]) {
+            wrappedMatchers[name] = function(...args: any[]) {
               const { isNot, promise, utils } = this;
               const newThis: ExpectMatcherState = {
                 isNot,
@@ -152,6 +151,8 @@ function createExpect(info: ExpectMetaInfo, prefix: string[], customMatchers: Re
               (newThis as any).equals = throwUnsupportedExpectMatcherError;
               return (matcher as any).call(newThis, ...args);
             };
+            const key = qualifiedMatcherName(qualifier, name);
+            wrappedMatchers[key] = wrappedMatchers[name];
             Object.defineProperty(wrappedMatchers[key], 'name', { value: name });
             extendedMatchers[name] = wrappedMatchers[key];
           }
diff --git a/tests/playwright-test/expect.spec.ts b/tests/playwright-test/expect.spec.ts
index a541ad9c96..8f82c256fb 100644
--- a/tests/playwright-test/expect.spec.ts
+++ b/tests/playwright-test/expect.spec.ts
@@ -1068,4 +1068,38 @@ test('expect.extend should be immutable', async ({ runInlineTest }) => {
     'foo',
     'bar',
   ]);
-});
\ No newline at end of file
+});
+
+test('expect.extend should fall back to legacy behavior', async ({ runInlineTest }) => {
+  const result = await runInlineTest({
+    'expect-test.spec.ts': `
+      import { test, expect } from '@playwright/test';
+      expect.extend({
+        toFoo() {
+          console.log('%%foo');
+          return { pass: true };
+        }
+      });
+      expect.extend({
+        toFoo() {
+          console.log('%%foo2');
+          return { pass: true };
+        }
+      });
+      expect.extend({
+        toBar() {
+          console.log('%%bar');
+          return { pass: true };
+        }
+      });
+      test('logs', () => {
+        expect().toFoo();
+        expect().toBar();
+      });
+    `
+  });
+  expect(result.outputLines).toEqual([
+    'foo2',
+    'bar',
+  ]);
+});

From 35158feec0c54e9a6dc3036416a4968143314f34 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Tue, 24 Sep 2024 19:56:31 -0700
Subject: [PATCH 28/29] chore: fix codegen flakiness (#32799)

---
 .../src/server/injected/recorder/recorder.ts     | 16 +++++++++++-----
 tests/library/inspector/cli-codegen-1.spec.ts    |  5 ++++-
 tests/library/inspector/cli-codegen-2.spec.ts    |  2 +-
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/playwright-core/src/server/injected/recorder/recorder.ts b/packages/playwright-core/src/server/injected/recorder/recorder.ts
index c255a14b08..757b413704 100644
--- a/packages/playwright-core/src/server/injected/recorder/recorder.ts
+++ b/packages/playwright-core/src/server/injected/recorder/recorder.ts
@@ -205,7 +205,7 @@ class InspectTool implements RecorderTool {
 
 class RecordActionTool implements RecorderTool {
   private _recorder: Recorder;
-  private _performingAction = false;
+  private _performingAction: actions.PerformOnRecordAction | null = null;
   private _hoveredModel: HighlightModel | null = null;
   private _hoveredElement: HTMLElement | null = null;
   private _activeModel: HighlightModel | null = null;
@@ -508,9 +508,15 @@ class RecordActionTool implements RecorderTool {
 
   private _actionInProgress(event: Event): boolean {
     // If Playwright is performing action for us, bail.
-    if (this._performingAction)
+    const isKeyEvent = event instanceof KeyboardEvent;
+    if (this._performingAction?.name === 'press' && isKeyEvent && event.key === this._performingAction.key)
       return true;
-    // Consume as the first thing.
+
+    const isMouseOrPointerEvent = event instanceof MouseEvent || event instanceof PointerEvent;
+    if (isMouseOrPointerEvent && (this._performingAction?.name === 'click' || this._performingAction?.name === 'check' || this._performingAction?.name === 'uncheck'))
+      return true;
+
+    // Consume event if action is not being executed.
     consumeEvent(event);
     return false;
   }
@@ -534,9 +540,9 @@ class RecordActionTool implements RecorderTool {
     this._hoveredModel = null;
     this._activeModel = null;
     this._recorder.updateHighlight(null, false);
-    this._performingAction = true;
+    this._performingAction = action;
     void this._recorder.performAction(action).then(() => {
-      this._performingAction = false;
+      this._performingAction = null;
 
       // If that was a keyboard action, it similarly requires new selectors for active model.
       this._onFocus(false);
diff --git a/tests/library/inspector/cli-codegen-1.spec.ts b/tests/library/inspector/cli-codegen-1.spec.ts
index 00fe3d6802..d825ed6e93 100644
--- a/tests/library/inspector/cli-codegen-1.spec.ts
+++ b/tests/library/inspector/cli-codegen-1.spec.ts
@@ -413,7 +413,7 @@ await page.GetByRole(AriaRole.Textbox).PressAsync("Shift+Enter");`);
     expect(messages[0].text()).toBe('press');
   });
 
-  test('should update selected element after pressing Tab', async ({ openRecorder }) => {
+  test('should update selected element after pressing Tab', async ({ openRecorder, browserName, codegenMode }) => {
     const { page, recorder } = await openRecorder();
 
     await recorder.setContentAndWait(`
@@ -429,6 +429,9 @@ await page.GetByRole(AriaRole.Textbox).PressAsync("Shift+Enter");`);
     await page.keyboard.press('Tab');
     await recorder.waitForOutput('JavaScript', 'Tab');
     await page.keyboard.type('barfoo321');
+    // I can't explain it atm, first character is being consumed for no apparent reason.
+    if (browserName === 'webkit' && codegenMode === 'trace-events')
+      await page.waitForTimeout(1000);
     await recorder.waitForOutput('JavaScript', 'barfoo321');
 
     const text = recorder.sources().get('JavaScript')!.text;
diff --git a/tests/library/inspector/cli-codegen-2.spec.ts b/tests/library/inspector/cli-codegen-2.spec.ts
index 11355008e1..0a130e0936 100644
--- a/tests/library/inspector/cli-codegen-2.spec.ts
+++ b/tests/library/inspector/cli-codegen-2.spec.ts
@@ -427,7 +427,7 @@ await page1.GotoAsync("about:blank?foo");`);
       page.click('button'),
       recorder.waitForOutput('JavaScript', '.click(')
     ]);
-    expect(messages).toEqual(['mousedown', 'mouseup', 'click']);
+    await expect.poll(() => messages).toEqual(['mousedown', 'mouseup', 'click']);
   });
 
   test('should update hover model on action', async ({ openRecorder }) => {

From b6783bb18b086d80504d68a9c24fd7a1e0e65172 Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Tue, 24 Sep 2024 19:59:15 -0700
Subject: [PATCH 29/29] fix(ui-mode): respect --tsconfig option (#32798)

Fixes https://github.com/microsoft/playwright/issues/32797
---
 .../src/server/trace/viewer/traceViewer.ts    |  3 -
 .../src/isomorphic/testServerInterface.ts     |  4 +-
 packages/playwright/src/program.ts            |  5 +-
 packages/playwright/src/runner/testServer.ts  | 31 +++++-----
 packages/playwright/src/runner/watchMode.ts   |  2 +-
 packages/trace-viewer/src/ui/uiModeView.tsx   | 10 +---
 .../playwright-test/ui-mode-test-run.spec.ts  | 59 +++++++++++++++++++
 7 files changed, 82 insertions(+), 32 deletions(-)

diff --git a/packages/playwright-core/src/server/trace/viewer/traceViewer.ts b/packages/playwright-core/src/server/trace/viewer/traceViewer.ts
index ee2ccac593..6d45e7c6f5 100644
--- a/packages/playwright-core/src/server/trace/viewer/traceViewer.ts
+++ b/packages/playwright-core/src/server/trace/viewer/traceViewer.ts
@@ -46,7 +46,6 @@ export type TraceViewerRedirectOptions = {
   reporter?: string[];
   webApp?: string;
   isServer?: boolean;
-  outputDir?: string;
   updateSnapshots?: 'all' | 'none' | 'missing';
 };
 
@@ -133,8 +132,6 @@ export async function installRootRedirect(server: HttpServer, traceUrls: string[
     params.append('timeout', String(options.timeout));
   if (options.headed)
     params.append('headed', '');
-  if (options.outputDir)
-    params.append('outputDir', options.outputDir);
   if (options.updateSnapshots)
     params.append('updateSnapshots', options.updateSnapshots);
   for (const reporter of options.reporter || [])
diff --git a/packages/playwright/src/isomorphic/testServerInterface.ts b/packages/playwright/src/isomorphic/testServerInterface.ts
index 22cb9e35ef..ce1c1888d5 100644
--- a/packages/playwright/src/isomorphic/testServerInterface.ts
+++ b/packages/playwright/src/isomorphic/testServerInterface.ts
@@ -45,7 +45,7 @@ export interface TestServerInterface {
 
   installBrowsers(params: {}): Promise<void>;
 
-  runGlobalSetup(params: { outputDir?: string }): Promise<{
+  runGlobalSetup(params: {}): Promise<{
     report: ReportEntry[],
     status: reporterTypes.FullResult['status']
   }>;
@@ -82,7 +82,6 @@ export interface TestServerInterface {
     locations?: string[];
     grep?: string;
     grepInvert?: string;
-    outputDir?: string;
   }): Promise<{
     report: ReportEntry[],
     status: reporterTypes.FullResult['status']
@@ -96,7 +95,6 @@ export interface TestServerInterface {
     headed?: boolean;
     workers?: number | string;
     timeout?: number,
-    outputDir?: string;
     updateSnapshots?: 'all' | 'none' | 'missing';
     reporters?: string[],
     trace?: 'on' | 'off';
diff --git a/packages/playwright/src/program.ts b/packages/playwright/src/program.ts
index 775ef27065..136606b26c 100644
--- a/packages/playwright/src/program.ts
+++ b/packages/playwright/src/program.ts
@@ -161,7 +161,7 @@ async function runTests(args: string[], opts: { [key: string]: any }) {
     if (opts.onlyChanged)
       throw new Error(`--only-changed is not supported in UI mode. If you'd like that to change, see https://github.com/microsoft/playwright/issues/15075 for more details.`);
 
-    const status = await testServer.runUIMode(opts.config, {
+    const status = await testServer.runUIMode(opts.config, cliOverrides, {
       host: opts.uiHost,
       port: opts.uiPort ? +opts.uiPort : undefined,
       args,
@@ -172,7 +172,6 @@ async function runTests(args: string[], opts: { [key: string]: any }) {
       reporter: Array.isArray(opts.reporter) ? opts.reporter : opts.reporter ? [opts.reporter] : undefined,
       workers: cliOverrides.workers,
       timeout: cliOverrides.timeout,
-      outputDir: cliOverrides.outputDir,
       updateSnapshots: cliOverrides.updateSnapshots,
     });
     await stopProfiling('runner');
@@ -227,7 +226,7 @@ async function runTests(args: string[], opts: { [key: string]: any }) {
 async function runTestServer(opts: { [key: string]: any }) {
   const host = opts.host || 'localhost';
   const port = opts.port ? +opts.port : 0;
-  const status = await testServer.runTestServer(opts.config, { host, port });
+  const status = await testServer.runTestServer(opts.config, { }, { host, port });
   if (status === 'restarted')
     return;
   const exitCode = status === 'interrupted' ? 130 : (status === 'passed' ? 0 : 1);
diff --git a/packages/playwright/src/runner/testServer.ts b/packages/playwright/src/runner/testServer.ts
index d4433b2d85..ee3cefaac4 100644
--- a/packages/playwright/src/runner/testServer.ts
+++ b/packages/playwright/src/runner/testServer.ts
@@ -44,14 +44,16 @@ const originalStderrWrite = process.stderr.write;
 
 class TestServer {
   private _configLocation: ConfigLocation;
+  private _configCLIOverrides: ConfigCLIOverrides;
   private _dispatcher: TestServerDispatcher | undefined;
 
-  constructor(configLocation: ConfigLocation) {
+  constructor(configLocation: ConfigLocation, configCLIOverrides: ConfigCLIOverrides) {
     this._configLocation = configLocation;
+    this._configCLIOverrides = configCLIOverrides;
   }
 
   async start(options: { host?: string, port?: number }): Promise<HttpServer> {
-    this._dispatcher = new TestServerDispatcher(this._configLocation);
+    this._dispatcher = new TestServerDispatcher(this._configLocation, this._configCLIOverrides);
     return await startTraceViewerServer({ ...options, transport: this._dispatcher.transport });
   }
 
@@ -63,6 +65,7 @@ class TestServer {
 
 export class TestServerDispatcher implements TestServerInterface {
   private _configLocation: ConfigLocation;
+  private _configCLIOverrides: ConfigCLIOverrides;
 
   private _watcher: Watcher;
   private _watchedProjectDirs = new Set<string>();
@@ -81,8 +84,9 @@ export class TestServerDispatcher implements TestServerInterface {
   private _closeOnDisconnect = false;
   private _populateDependenciesOnList = false;
 
-  constructor(configLocation: ConfigLocation) {
+  constructor(configLocation: ConfigLocation, configCLIOverrides: ConfigCLIOverrides) {
     this._configLocation = configLocation;
+    this._configCLIOverrides = configCLIOverrides;
     this.transport = {
       onconnect: () => {},
       dispatch: (method, params) => (this as any)[method](params),
@@ -145,11 +149,8 @@ export class TestServerDispatcher implements TestServerInterface {
   async runGlobalSetup(params: Parameters<TestServerInterface['runGlobalSetup']>[0]): ReturnType<TestServerInterface['runGlobalSetup']> {
     await this.runGlobalTeardown();
 
-    const overrides: ConfigCLIOverrides = {
-      outputDir: params.outputDir,
-    };
     const { reporter, report } = await this._collectingInternalReporter(new ListReporter());
-    const config = await this._loadConfigOrReportError(reporter, overrides);
+    const config = await this._loadConfigOrReportError(reporter, this._configCLIOverrides);
     if (!config)
       return { status: 'failed', report };
 
@@ -239,9 +240,9 @@ export class TestServerDispatcher implements TestServerInterface {
     config?: FullConfigInternal,
   }> {
     const overrides: ConfigCLIOverrides = {
+      ...this._configCLIOverrides,
       repeatEach: 1,
       retries: 0,
-      outputDir: params.outputDir,
     };
     const { reporter, report } = await this._collectingInternalReporter();
     const config = await this._loadConfigOrReportError(reporter, overrides);
@@ -295,6 +296,7 @@ export class TestServerDispatcher implements TestServerInterface {
   private async _innerRunTests(params: Parameters<TestServerInterface['runTests']>[0]): ReturnType<TestServerInterface['runTests']> {
     await this.stopTests();
     const overrides: ConfigCLIOverrides = {
+      ...this._configCLIOverrides,
       repeatEach: 1,
       retries: 0,
       preserveOutputDir: true,
@@ -307,7 +309,6 @@ export class TestServerDispatcher implements TestServerInterface {
         _optionContextReuseMode: params.reuseContext ? 'when-possible' : undefined,
         _optionConnectOptions: params.connectWsEndpoint ? { wsEndpoint: params.connectWsEndpoint } : undefined,
       },
-      outputDir: params.outputDir,
       updateSnapshots: params.updateSnapshots,
       workers: params.workers,
     };
@@ -424,9 +425,9 @@ export class TestServerDispatcher implements TestServerInterface {
   }
 }
 
-export async function runUIMode(configFile: string | undefined, options: TraceViewerServerOptions & TraceViewerRedirectOptions): Promise<reporterTypes.FullResult['status'] | 'restarted'> {
+export async function runUIMode(configFile: string | undefined, configCLIOverrides: ConfigCLIOverrides, options: TraceViewerServerOptions & TraceViewerRedirectOptions): Promise<reporterTypes.FullResult['status'] | 'restarted'> {
   const configLocation = resolveConfigLocation(configFile);
-  return await innerRunTestServer(configLocation, options, async (server: HttpServer, cancelPromise: ManualPromise<void>) => {
+  return await innerRunTestServer(configLocation, configCLIOverrides, options, async (server: HttpServer, cancelPromise: ManualPromise<void>) => {
     await installRootRedirect(server, [], { ...options, webApp: 'uiMode.html' });
     if (options.host !== undefined || options.port !== undefined) {
       await openTraceInBrowser(server.urlPrefix('human-readable'));
@@ -442,18 +443,18 @@ export async function runUIMode(configFile: string | undefined, options: TraceVi
   });
 }
 
-export async function runTestServer(configFile: string | undefined, options: { host?: string, port?: number }): Promise<reporterTypes.FullResult['status'] | 'restarted'> {
+export async function runTestServer(configFile: string | undefined, configCLIOverrides: ConfigCLIOverrides, options: { host?: string, port?: number }): Promise<reporterTypes.FullResult['status'] | 'restarted'> {
   const configLocation = resolveConfigLocation(configFile);
-  return await innerRunTestServer(configLocation, options, async server => {
+  return await innerRunTestServer(configLocation, configCLIOverrides, options, async server => {
     // eslint-disable-next-line no-console
     console.log('Listening on ' + server.urlPrefix('precise').replace('http:', 'ws:') + '/' + server.wsGuid());
   });
 }
 
-async function innerRunTestServer(configLocation: ConfigLocation, options: { host?: string, port?: number }, openUI: (server: HttpServer, cancelPromise: ManualPromise<void>, configLocation: ConfigLocation) => Promise<void>): Promise<reporterTypes.FullResult['status'] | 'restarted'> {
+async function innerRunTestServer(configLocation: ConfigLocation, configCLIOverrides: ConfigCLIOverrides, options: { host?: string, port?: number }, openUI: (server: HttpServer, cancelPromise: ManualPromise<void>, configLocation: ConfigLocation) => Promise<void>): Promise<reporterTypes.FullResult['status'] | 'restarted'> {
   if (restartWithExperimentalTsEsm(undefined, true))
     return 'restarted';
-  const testServer = new TestServer(configLocation);
+  const testServer = new TestServer(configLocation, configCLIOverrides);
   const cancelPromise = new ManualPromise<void>();
   const sigintWatcher = new SigIntWatcher();
   process.stdin.on('close', () => gracefullyProcessExitDoNotHang(0));
diff --git a/packages/playwright/src/runner/watchMode.ts b/packages/playwright/src/runner/watchMode.ts
index 2a2c9802f1..bdbe2d5c2d 100644
--- a/packages/playwright/src/runner/watchMode.ts
+++ b/packages/playwright/src/runner/watchMode.ts
@@ -75,7 +75,7 @@ export async function runWatchModeLoop(configLocation: ConfigLocation, initialOp
   const options: WatchModeOptions = { ...initialOptions };
   let bufferMode = false;
 
-  const testServerDispatcher = new TestServerDispatcher(configLocation);
+  const testServerDispatcher = new TestServerDispatcher(configLocation, {});
   const transport = new InMemoryTransport(
       async data => {
         const { id, method, params } = JSON.parse(data);
diff --git a/packages/trace-viewer/src/ui/uiModeView.tsx b/packages/trace-viewer/src/ui/uiModeView.tsx
index ba74e60092..5c6ab7969b 100644
--- a/packages/trace-viewer/src/ui/uiModeView.tsx
+++ b/packages/trace-viewer/src/ui/uiModeView.tsx
@@ -58,7 +58,6 @@ const queryParams = {
   workers: searchParams.get('workers') || undefined,
   timeout: searchParams.has('timeout') ? +searchParams.get('timeout')! : undefined,
   headed: searchParams.has('headed'),
-  outputDir: searchParams.get('outputDir') || undefined,
   updateSnapshots: (searchParams.get('updateSnapshots') as 'all' | 'none' | 'missing' | undefined) || undefined,
   reporters: searchParams.has('reporter') ? searchParams.getAll('reporter') : undefined,
   pathSeparator: searchParams.get('pathSeparator') || '/',
@@ -187,14 +186,12 @@ export const UIModeView: React.FC<{}> = ({
           interceptStdio: true,
           watchTestDirs: true
         });
-        const { status, report } = await testServerConnection.runGlobalSetup({
-          outputDir: queryParams.outputDir,
-        });
+        const { status, report } = await testServerConnection.runGlobalSetup({});
         teleSuiteUpdater.processGlobalReport(report);
         if (status !== 'passed')
           return;
 
-        const result = await testServerConnection.listTests({ projects: queryParams.projects, locations: queryParams.args, grep: queryParams.grep, grepInvert: queryParams.grepInvert, outputDir: queryParams.outputDir });
+        const result = await testServerConnection.listTests({ projects: queryParams.projects, locations: queryParams.args, grep: queryParams.grep, grepInvert: queryParams.grepInvert });
         teleSuiteUpdater.processListReport(result.report);
 
         testServerConnection.onReport(params => {
@@ -296,7 +293,6 @@ export const UIModeView: React.FC<{}> = ({
         workers: singleWorker ? '1' : (queryParams.workers === '1' ? undefined : queryParams.workers),
         timeout: queryParams.timeout,
         headed: showBrowser,
-        outputDir: queryParams.outputDir,
         updateSnapshots: updateSnapshots ? 'all' : queryParams.updateSnapshots,
         reporters: queryParams.reporters,
         trace: 'on',
@@ -319,7 +315,7 @@ export const UIModeView: React.FC<{}> = ({
       commandQueue.current = commandQueue.current.then(async () => {
         setIsLoading(true);
         try {
-          const result = await testServerConnection.listTests({ projects: queryParams.projects, locations: queryParams.args, grep: queryParams.grep, grepInvert: queryParams.grepInvert, outputDir: queryParams.outputDir });
+          const result = await testServerConnection.listTests({ projects: queryParams.projects, locations: queryParams.args, grep: queryParams.grep, grepInvert: queryParams.grepInvert });
           teleSuiteUpdater.processListReport(result.report);
         } catch (e) {
           // eslint-disable-next-line no-console
diff --git a/tests/playwright-test/ui-mode-test-run.spec.ts b/tests/playwright-test/ui-mode-test-run.spec.ts
index 9c1120ea04..81316f42ee 100644
--- a/tests/playwright-test/ui-mode-test-run.spec.ts
+++ b/tests/playwright-test/ui-mode-test-run.spec.ts
@@ -444,3 +444,62 @@ test('should show proper total when using deps', async ({ runUITest }) => {
   `);
   await expect(page.getByTestId('status-line')).toHaveText('2/2 passed (100%)');
 });
+
+test('should respect --tsconfig option', {
+  annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/32797' }
+}, async ({ runUITest }) => {
+  const { page } = await runUITest({
+    'playwright.config.ts': `
+      import { foo } from '~/foo';
+      export default {
+        testDir: './tests' + foo,
+      };
+    `,
+    'tsconfig.json': `{
+      "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+          "~/*": ["./does-not-exist/*"],
+        },
+      },
+    }`,
+    'tsconfig.special.json': `{
+      "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+          "~/*": ["./mapped-from-root/*"],
+        },
+      },
+    }`,
+    'mapped-from-root/foo.ts': `
+      export const foo = 42;
+    `,
+    'tests42/tsconfig.json': `{
+      "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+          "~/*": ["../should-be-ignored/*"],
+        },
+      },
+    }`,
+    'tests42/a.test.ts': `
+      import { foo } from '~/foo';
+      import { test, expect } from '@playwright/test';
+      test('test', ({}) => {
+        expect(foo).toBe(42);
+      });
+    `,
+    'should-be-ignored/foo.ts': `
+      export const foo = 43;
+    `,
+  }, undefined, { additionalArgs: ['--tsconfig=tsconfig.special.json'] });
+
+  await page.getByTitle('Run all').click();
+
+  await expect.poll(dumpTestTree(page)).toBe(`
+    ▼ ✅ a.test.ts
+        ✅ test
+  `);
+
+  await expect(page.getByTestId('status-line')).toHaveText('1/1 passed (100%)');
+});
\ No newline at end of file