chrome-devtools-frontend 1.0.1636056 → 1.0.1640418

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -154,6 +154,8 @@ const lockedString = i18n.i18n.lockedString;
 const FILTER_IDLE_PERIOD = 500;
 // Minimum number of @property rules for the @property section block to be folded initially
 const MIN_FOLDED_SECTIONS_COUNT = 5;
+// The number of properties required in a matched styles cascade to trigger IntersectionObserver lazy rendering.
+const LAZY_RENDER_THRESHOLD = 200;
 /** Title of the registered properties section **/
 export const REGISTERED_PROPERTY_SECTION_NAME = '@property';
 /** Title of the function section **/
@@ -230,12 +232,18 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   aiCodeCompletionProvider?: StylesAiCodeCompletionProvider.StylesAiCodeCompletionProvider;
   #aiCodeCompletionSummaryToolbarContainer?: HTMLElement;
   #aiCodeCompletionSummaryToolbar?: PanelsCommon.AiCodeCompletionSummaryToolbar.AiCodeCompletionSummaryToolbar;
+  #shouldRenderLazily = false;
+  #lazyRenderObserver?: IntersectionObserver;
+  #lazyRenderCallbacks = new WeakMap<Element, () => void>();
 
   constructor(computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel) {
     super(computedStyleModel, {delegatesFocus: true, useShadowDom: true, classes: ['flex-none']});
     this.setMinimumSize(96, 26);
     this.registerRequiredCSS(stylesSidebarPaneStyles);
     Common.Settings.Settings.instance().moduleSetting('text-editor-indent').addChangeListener(this.requestUpdate, this);
+    Common.Settings.Settings.instance()
+        .moduleSetting('collapse-non-contributing-css-rules')
+        .addChangeListener(this.updateCollapsedSectionsSetting, this);
     this.toolbarPaneElement = this.createStylesSidebarToolbar();
     this.noMatchesElement = this.contentElement.createChild('div', 'gray-info-message hidden');
     this.noMatchesElement.textContent = i18nString(UIStrings.noMatchingSelectorOrStyle);
@@ -363,6 +371,12 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.requestUpdate();
   }
 
+  private updateCollapsedSectionsSetting(): void {
+    for (const section of this.allSections()) {
+      section.updateCollapsedState();
+    }
+  }
+
   private sectionsContainerKeyDown(event: Event): void {
     const activeElement = UI.DOMUtilities.deepActiveElement(this.sectionsContainer.contentElement.ownerDocument);
     if (!activeElement) {
@@ -553,10 +567,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     // Hide all popovers when scrolling.
     // Styles and Computed panels both have popover (e.g. imagePreviewPopover),
     // so we need to bind both scroll events.
-    const scrollerElementLists =
-        this?.contentElement?.enclosingNodeOrSelfWithClass('style-panes-wrapper')
-            ?.parentElement?.querySelectorAll('.style-panes-wrapper') as unknown as NodeListOf<Element>;
-    if (scrollerElementLists.length > 0) {
+    const scrollerElementLists = this?.contentElement?.enclosingNodeOrSelfWithClass('style-panes-wrapper')
+                                     ?.parentElement?.querySelectorAll('.style-panes-wrapper');
+    if (scrollerElementLists && scrollerElementLists.length > 0) {
       for (const element of scrollerElementLists) {
         this.scrollerElement = element;
         this.scrollerElement.addEventListener('scroll', this.boundOnScroll, false);
@@ -1109,6 +1122,14 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     const animationsPanelVisible = UI.ViewManager.ViewManager.instance().isViewVisible('animations');
     const cssAnimationsOnlyWhenAnimationsTabOpen =
         Common.Settings.Settings.instance().moduleSetting('css-animations-only-when-animations-tab-open').get();
+
+    let totalProperties = 0;
+    for (const style of matchedStyles.nodeStyles()) {
+      totalProperties += style.leadingProperties().length;
+    }
+    // Always render eagerly for layout tests.
+    this.#shouldRenderLazily = !Host.InspectorFrontendHost.isUnderTest() && totalProperties > LAZY_RENDER_THRESHOLD;
+
     for (const style of matchedStyles.nodeStyles()) {
       const isTransitionOrAnimationStyle = style.type === SDK.CSSStyleDeclaration.Type.Transition ||
           style.type === SDK.CSSStyleDeclaration.Type.Animation;
@@ -1610,6 +1631,35 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   #onAiCodeCompletionResponseReceived(): void {
     this.#aiCodeCompletionSummaryToolbar?.setLoading(false);
   }
+
+  trackForLazyRendering(element: Element, callback: () => void): void {
+    if (!this.#lazyRenderObserver) {
+      this.#lazyRenderObserver = new IntersectionObserver(entries => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            const cb = this.#lazyRenderCallbacks.get(entry.target);
+            if (cb) {
+              cb();
+              this.untrackForLazyRendering(entry.target);
+            }
+          }
+        }
+      }, {rootMargin: '100px'});
+    }
+    this.#lazyRenderCallbacks.set(element, callback);
+    this.#lazyRenderObserver.observe(element);
+  }
+
+  shouldRenderLazily(): boolean {
+    return this.#shouldRenderLazily;
+  }
+
+  untrackForLazyRendering(element: Element): void {
+    if (this.#lazyRenderObserver) {
+      this.#lazyRenderObserver.unobserve(element);
+    }
+    this.#lazyRenderCallbacks.delete(element);
+  }
 }
 
 export const enum Events {

package/front_end/panels/elements/elements-meta.ts

@@ -156,6 +156,10 @@ const UIStrings = {
    * @description Title of a setting under the Elements category.
    */
   cssAnimationsOnlyWhenAnimationsTabOpen: 'Show animation styles only when the Animations tab is open',
+  /**
+   * @description Whether CSS rules that do not apply active styles in the Styles pane are collapsed by default.
+   */
+  collapseNonContributingCSSRules: 'Collapse non-contributing CSS rules',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/elements-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -558,6 +562,16 @@ Common.Settings.registerSettingExtension({
   defaultValue: true,
 });
 
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.ELEMENTS,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  order: 7,
+  title: i18nLazyString(UIStrings.collapseNonContributingCSSRules),
+  settingName: 'collapse-non-contributing-css-rules',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+});
+
 Common.Settings.registerSettingExtension({
   settingName: 'show-event-listeners-for-ancestors',
   settingType: Common.Settings.SettingType.BOOLEAN,

package/front_end/panels/layer_viewer/layerDetailsView.css

@@ -36,7 +36,7 @@ ul {
   margin-block: 0;
 }
 
-.devtools-link.link-margin {
+.devtools-link.link-margin, .devtools-link.link-margin:hover {
   margin: 8px;
   display: inline-block;
 }

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -310,7 +310,7 @@ class LighthouseRun {
       }
     }
 
-    await this.protocolService.attach();
+    await this.protocolService.attach(this.inspectedURL);
   }
 
   private async restoreEmulationAndProtocolConnection(): Promise<void> {

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -86,7 +86,9 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
    */
   readonly #pendingRequests = new Map<number, (reason: Error) => void>();
 
-  async attach(): Promise<void> {
+  async attach(inspectedURL: Platform.DevToolsPath.UrlString): Promise<void> {
+    const parsedInitialOrigin = Common.ParsedURL.ParsedURL.extractOrigin(inspectedURL);
+
     await SDK.TargetManager.TargetManager.instance().suspendAllTargets();
     const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
     if (!mainTarget) {
@@ -130,8 +132,6 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
     // To ensure the teardown operations can proceed, we need a dialog handler which lasts until
     // the LighthouseProtocolService detaches.
 
-    const initialInspectedUrl = mainTarget.inspectedURL();
-    const parsedInitialOrigin = Common.ParsedURL.ParsedURL.extractOrigin(initialInspectedUrl);
     const dialogHandler =
         (event: Common.EventTarget.EventTargetEvent<Protocol.Page.JavascriptDialogOpeningEvent>): void => {
           const parsedEventOrigin =
@@ -139,7 +139,7 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
           if (!parsedInitialOrigin || parsedEventOrigin !== parsedInitialOrigin) {
             // See http://crbug.com/513728809.
             console.warn(`Lighthouse auto-accept for dialog on ${
-                event.data.url} blocked as it was not from the original audit origin ${initialInspectedUrl}.`);
+                event.data.url} blocked as it was not from the original audit origin ${inspectedURL}.`);
             return;
           }
 

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -932,6 +932,20 @@ export class NetworkRequestNode extends NetworkNode {
     return aValue > bValue ? 1 : -1;
   }
 
+  static OverrideTypesComparator(a: NetworkNode, b: NetworkNode): number {
+    const aRequest = a.requestOrFirstKnownChildRequest();
+    const bRequest = b.requestOrFirstKnownChildRequest();
+    if (!aRequest || !bRequest) {
+      if (!aRequest && !bRequest) {
+        return 0;
+      }
+      return !aRequest ? -1 : 1;
+    }
+    const aValue = aRequest.overrideTypes.join(', ');
+    const bValue = bRequest.overrideTypes.join(', ');
+    return aValue.localeCompare(bValue) || aRequest.identityCompare(bRequest);
+  }
+
   override showingInitiatorChainChanged(): void {
     const showInitiatorChain = this.showingInitiatorChain();
 

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -1129,9 +1129,9 @@ const DEFAULT_COLUMNS = [
     sortingFunction: NetworkRequestNode.ResponseHeaderStringComparator.bind(null, 'etag'),
   },
   {
-    id: 'response-header-has-overrides',
+    id: 'has-overrides',
     title: i18nLazyString(UIStrings.hasOverrides),
-    sortingFunction: NetworkRequestNode.ResponseHeaderStringComparator.bind(null, 'has-overrides'),
+    sortingFunction: NetworkRequestNode.OverrideTypesComparator,
   },
   {
     id: 'response-header-keep-alive',

package/front_end/panels/network/RequestHeadersView.ts

@@ -106,8 +106,8 @@ interface ViewInput {
   toReveal?: {section: NetworkForward.UIRequestLocation.UIHeaderSection, header?: string};
 }
 type View = (input: ViewInput, output: object, target: HTMLElement) => void;
-export const DEFAULT_VIEW: View = (input, output, target) => {
-  const requestHeadersText = input.request.requestHeadersText();
+
+export function renderGeneralRows(input: ViewInput): Lit.LitTemplate {
   const statusClasses = ['status'];
   if (input.request.statusCode < 300 || input.request.statusCode === 304) {
     statusClasses.push('green-circle');
@@ -137,28 +137,42 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
   }
 
   const statusText = [input.request.statusCode, input.request.getInferredStatusText(), comment].join(' ');
+
+  // clang-format off
+  return html`<div jslog=${VisualLogging.section('general')}>
+    ${renderGeneralRow(input, i18nString(UIStrings.requestUrl), input.request.url(), 'request-url')}
+    ${input.request.statusCode ? renderGeneralRow(input, i18nString(UIStrings.requestMethod), input.request.requestMethod, 'request-method') :
+      Lit.nothing}
+    ${input.request.statusCode ? renderGeneralRow(input, i18nString(UIStrings.statusCode), statusText, 'status-code', statusClasses) :
+      Lit.nothing}
+    ${input.request.remoteAddress()? renderGeneralRow(input, i18nString(UIStrings.remoteAddress), input.request.remoteAddress(), 'remote-address') :
+      Lit.nothing}
+    ${input.request.referrerPolicy()? renderGeneralRow(input, i18nString(UIStrings.referrerPolicy), String(input.request.referrerPolicy()), 'referrer-policy') :
+      Lit.nothing}
+  </div>`;
+  // clang-format on
+}
+
+export function renderGeneralSection(input: ViewInput, forceOpen: boolean): Lit.LitTemplate {
+  // Rendered in a walkthrough widget where we only want rows without the ability to collapse the section.
+  return renderCategory({
+    name: 'general',
+    title: i18nString(UIStrings.general),
+    forceOpen,
+    loggingContext: 'general',
+    contents: renderGeneralRows(input),
+  });
+}
+
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  const requestHeadersText = input.request.requestHeadersText();
+
   // clang-format off
   render(
       html`
         <style>${NetworkComponents.RequestHeaderSection.requestHeadersViewStyles}</style>
         <style>${Input.checkboxStyles}</style>
-        ${renderCategory({
-          name: 'general',
-          title: i18nString(UIStrings.general),
-          forceOpen: input.toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.GENERAL,
-          loggingContext: 'general',
-          contents: html`<div jslog=${VisualLogging.section('general')}>
-            ${renderGeneralRow(input, i18nString(UIStrings.requestUrl), input.request.url(), 'request-url')}
-            ${input.request.statusCode? renderGeneralRow(input, i18nString(UIStrings.requestMethod),
-                input.request.requestMethod, 'request-method') : Lit.nothing}
-            ${input.request.statusCode? renderGeneralRow(input, i18nString(UIStrings.statusCode),
-                statusText, 'status-code', statusClasses) : Lit.nothing}
-            ${input.request.remoteAddress()? renderGeneralRow(input, i18nString(UIStrings.remoteAddress),
-                input.request.remoteAddress(), 'remote-address') : Lit.nothing}
-            ${input.request.referrerPolicy()? renderGeneralRow(input, i18nString(UIStrings.referrerPolicy),
-              String(input.request.referrerPolicy()), 'referrer-policy') : Lit.nothing}
-            </div>`
-        })}
+        ${renderGeneralSection(input, input.toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.GENERAL)}
         ${!input.request?.earlyHintsHeaders || input.request.earlyHintsHeaders.length === 0
           ? Lit.nothing
           : renderCategory({
@@ -221,6 +235,22 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       target, {container: {attributes: {jslog: `${VisualLogging.pane('headers').track({resize: true})}`}}});
 };
 
+/**
+ * View used by the AI Assistance walkthrough's NetworkRequestGeneralHeaders widget
+ * to display only the General section of the network headers.
+ */
+export const GENERAL_HEADERS_ONLY_VIEW: View = (input, _output, target) => {
+  // clang-format off
+  render(
+      html`
+        <style>${NetworkComponents.RequestHeaderSection.requestHeadersViewStyles}</style>
+        <style>${Input.checkboxStyles}</style>
+        ${renderGeneralRows(input)}
+      `,
+      target, {container: {attributes: {jslog: `${VisualLogging.pane('headers').track({resize: true})}`}}});
+  // clang-format on
+};
+
 export class RequestHeadersView extends UI.Widget.Widget {
   #request?: SDK.NetworkRequest.NetworkRequest;
   #showResponseHeadersText = false;
@@ -243,6 +273,12 @@ export class RequestHeadersView extends UI.Widget.Widget {
     this.#view = view;
   }
 
+  static createGeneralHeadersView(request: SDK.NetworkRequest.NetworkRequest): RequestHeadersView {
+    const view = new RequestHeadersView(undefined, GENERAL_HEADERS_ONLY_VIEW);
+    view.request = request;
+    return view;
+  }
+
   #addEventListeners(): void {
     this.#request?.addEventListener(SDK.NetworkRequest.Events.REMOTE_ADDRESS_CHANGED, this.#refreshHeadersView, this);
     this.#request?.addEventListener(SDK.NetworkRequest.Events.FINISHED_LOADING, this.#refreshHeadersView, this);

package/front_end/panels/network/networkTimingTable.css

@@ -79,7 +79,6 @@ table.network-timing-table > tr:not(.network-timing-table-header, .network-timin
   position: absolute;
   min-width: 1px;
   inset: 0 attr(data-right %) 0 attr(data-left %); /* stylelint-disable-line declaration-property-value-no-unknown */
-  background-color: attr(data-background <color>); /* stylelint-disable-line declaration-property-value-no-unknown */
 }
 
 .network-timing-bar-title {
@@ -218,9 +217,8 @@ td.throttled {
   background: var(--sys-color-surface1);
 }
 
-.network-timing-bar.server-timing,
-.-theme-preserve {
-  background-color: var(--sys-color-neutral-container);
+.network-timing-bar.server-timing {
+  background-color: attr(data-background type(<color>), var(--sys-color-neutral-container)); /* stylelint-disable-line declaration-property-value-no-unknown */
 }
 
 tr.synthetic {

package/front_end/panels/recorder/components/ReplaySection.ts

@@ -72,6 +72,11 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const REPLAY_EXTENSION_PREFIX = 'extension';
 
+function isPlayRecordingSpeed(string: string): string is PlayRecordingSpeed {
+  return string === PlayRecordingSpeed.NORMAL || string === PlayRecordingSpeed.SLOW ||
+      string === PlayRecordingSpeed.VERY_SLOW || string === PlayRecordingSpeed.EXTREMELY_SLOW;
+}
+
 interface Item {
   value: string;
   buttonIconName: string;
@@ -274,9 +279,9 @@ export class ReplaySection extends UI.Widget.Widget {
     if (this.#replayExtensions.length) {
       groups.push({
         name: i18nString(UIStrings.extensionGroup),
-        items: this.#replayExtensions.map((extension, idx) => {
+        items: this.#replayExtensions.map(extension => {
           return {
-            value: (REPLAY_EXTENSION_PREFIX + idx),
+            value: REPLAY_EXTENSION_PREFIX + extension.getOrigin(),
             buttonIconName: 'play',
             buttonLabel: () => extension.getName() as Platform.UIString.LocalizedString,
             label: () => extension.getName() as Platform.UIString.LocalizedString,
@@ -301,28 +306,35 @@ export class ReplaySection extends UI.Widget.Widget {
 
   #onStartReplay(): void {
     const value = this.#settings?.replayExtension || this.#settings?.speed || '';
-    if (value?.startsWith(REPLAY_EXTENSION_PREFIX)) {
-      const extensionIdx = Number(
-          value.substring(REPLAY_EXTENSION_PREFIX.length),
-      );
-      const extension = this.#replayExtensions[extensionIdx];
-      if (this.#settings) {
-        this.#settings.replayExtension = REPLAY_EXTENSION_PREFIX + extensionIdx;
-      }
-      if (this.onStartReplay) {
-        this.onStartReplay(PlayRecordingSpeed.NORMAL, extension);
+    if (value.startsWith(REPLAY_EXTENSION_PREFIX)) {
+      const origin = value.substring(REPLAY_EXTENSION_PREFIX.length);
+      const extension = this.#replayExtensions.find(ext => ext.getOrigin() === origin);
+      if (extension) {
+        if (this.#settings) {
+          this.#settings.replayExtension = REPLAY_EXTENSION_PREFIX + extension.getOrigin();
+        }
+        if (this.onStartReplay) {
+          this.onStartReplay(PlayRecordingSpeed.NORMAL, extension);
+        }
+        this.performUpdate();
+        return;
       }
-    } else if (this.onStartReplay) {
+    }
+    if (this.onStartReplay) {
       this.onStartReplay(this.#settings ? this.#settings.speed : PlayRecordingSpeed.NORMAL);
     }
     this.performUpdate();
   }
 
   #onItemSelected(item: string): void {
-    const speed = item as PlayRecordingSpeed;
-    if (this.#settings && speed) {
-      this.#settings.speed = speed;
+    if (!this.#settings) {
+      return;
+    }
+    if (isPlayRecordingSpeed(item)) {
+      this.#settings.speed = item;
       this.#settings.replayExtension = '';
+    } else {
+      this.#settings.replayExtension = item;
     }
     this.performUpdate();
   }

package/front_end/panels/recorder/converters/LighthouseConverter.snapshot.txt

@@ -0,0 +1,47 @@
+Title: LighthouseConverter should stringify a flow
+Content:
+import fs from 'fs';
+import { Locator, launch } from 'puppeteer'; // v25.0.0 or later
+
+const browser = await launch();
+const page = await browser.newPage();
+const timeout = 5000;
+page.setDefaultTimeout(timeout);
+
+const lhApi = await import('lighthouse'); // v10.0.0 or later
+const flags = {
+  screenEmulation: {
+    disabled: true
+  }
+}
+const config = lhApi.desktopConfig;
+const lhFlow = await lhApi.startFlow(page, {name: 'test', config, flags});
+await lhFlow.startNavigation();
+{
+  const targetPage = page;
+  await targetPage.goto('https://example.com');
+}
+await lhFlow.endNavigation();
+await lhFlow.startTimespan();
+{
+  const targetPage = page;
+  await Locator.race([
+    targetPage.locator('.cls')
+  ])
+    .setTimeout(timeout)
+    .scroll({ scrollTop: undefined, scrollLeft: undefined});
+}
+await lhFlow.endTimespan();
+const lhFlowReport = await lhFlow.generateReport();
+fs.writeFileSync(import.meta.dirname + '/flow.report.html', lhFlowReport)
+
+await browser.close();
+=== end content
+
+Title: LighthouseConverter should stringify a step
+Content:
+{
+  const targetPage = page;
+  await targetPage.evaluate((x, y) => { window.scroll(x, y); }, undefined, undefined)
+}
+=== end content

package/front_end/panels/recorder/converters/PuppeteerConverter.snapshot.txt

@@ -0,0 +1,49 @@
+Title: PuppeteerConverter should stringify a flow
+Content:
+import { Locator, launch } from 'puppeteer'; // v25.0.0 or later
+
+const browser = await launch();
+const page = await browser.newPage();
+const timeout = 5000;
+page.setDefaultTimeout(timeout);
+
+{
+  const targetPage = page;
+  await Locator.race([
+    targetPage.locator('.cls')
+  ])
+    .setTimeout(timeout)
+    .scroll({ scrollTop: undefined, scrollLeft: undefined});
+}
+
+await browser.close();
+=== end content
+
+Title: PuppeteerConverter should stringify a step
+Content:
+{
+  const targetPage = page;
+  await targetPage.evaluate((x, y) => { window.scroll(x, y); }, undefined, undefined)
+}
+=== end content
+
+Title: PuppeteerConverter should stringify a flow for Firefox
+Content:
+import { Locator, launch } from 'puppeteer'; // v25.0.0 or later
+
+const browser = await launch({browser: 'firefox'});
+const page = await browser.newPage();
+const timeout = 5000;
+page.setDefaultTimeout(timeout);
+
+{
+  const targetPage = page;
+  await Locator.race([
+    targetPage.locator('.cls')
+  ])
+    .setTimeout(timeout)
+    .scroll({ scrollTop: undefined, scrollLeft: undefined});
+}
+
+await browser.close();
+=== end content

package/front_end/panels/recorder/converters/PuppeteerReplayConverter.snapshot.txt

@@ -0,0 +1,33 @@
+Title: PuppeteerReplayConverter should stringify a flow
+Content:
+import url from 'url';
+import { createRunner } from '@puppeteer/replay';
+
+export async function run(extension) {
+  const runner = await createRunner(extension);
+
+  await runner.runBeforeAllSteps();
+
+  await runner.runStep({
+    type: 'scroll',
+    selectors: [
+      [
+        '.cls'
+      ]
+    ]
+  });
+
+  await runner.runAfterAllSteps();
+}
+
+if (process && import.meta.url === url.pathToFileURL(process.argv[1]).href) {
+  run()
+}
+=== end content
+
+Title: PuppeteerReplayConverter should stringify a step
+Content:
+await runner.runStep({
+  type: 'scroll'
+});
+=== end content

package/front_end/panels/settings/SettingsScreen.ts

@@ -636,7 +636,7 @@ const GREENDEV_VIEW: View = (input, _output, target) => {
               <span>${i18nString(UIStrings.greenDevUnstable)}</span>
              </div>
              <div class="settings-experiments-block">
-               ${renderPrototypeCheckboxes(input.settings, ['aiAnnotations', 'beyondStylingGemini', 'beyondStylingAntigravity', 'breakpointDebuggerAgent', 'emulationCapabilities'])}
+               ${renderPrototypeCheckboxes(input.settings, ['aiAnnotations', 'beyondStylingGemini', 'beyondStylingAntigravity', 'emulationCapabilities'])}
              </div>
            </devtools-card>
          </div>
@@ -648,7 +648,6 @@ const GREENDEV_PROTOTYPE_NAMES: Record<keyof GreenDev.GreenDevSettings, string>
   aiAnnotations: 'AI auto-annotations',
   beyondStylingGemini: 'Beyond Styling (Gemini CLI)',
   beyondStylingAntigravity: 'Beyond Styling (Antigravity CLI)',
-  breakpointDebuggerAgent: 'Breakpoint Debugger Agent',
   emulationCapabilities: 'Emulation Capabilities',
 };