chrome-devtools-frontend 1.0.939277 → 1.0.939473

package/.stylelintrc.json

@@ -27,11 +27,5 @@
     "property-no-vendor-prefix": null,
     "value-no-vendor-prefix": null,
     "media-feature-name-no-vendor-prefix": null
-  },
-  "overrides": [
-    {
-      "files": ["**/*.ts"],
-      "customSyntax": "html"
-    }
-  ]
+  }
 }

package/config/gni/all_devtools_files.gni

@@ -58,7 +58,6 @@ all_devtools_files = [
   "front_end/legacy_test_runner/layers_test_runner/layers_test_runner.js",
   "front_end/panels/layer_viewer/module.json",
   "front_end/panels/layers/module.json",
-  "front_end/entrypoints/main/module.json",
   "front_end/panels/media/module.json",
   "front_end/entrypoints/ndb_app/ndb_app.json",
   "front_end/legacy_test_runner/network_test_runner/network_test_runner.js",

package/config/gni/devtools_grd_files.gni

@@ -595,6 +595,7 @@ grd_files_debug_sources = [
   "front_end/core/sdk/CSSRule.js",
   "front_end/core/sdk/CSSStyleDeclaration.js",
   "front_end/core/sdk/CSSStyleSheetHeader.js",
+  "front_end/core/sdk/CategorizedBreakpoint.js",
   "front_end/core/sdk/ChildTargetManager.js",
   "front_end/core/sdk/CompilerSourceMappingContentProvider.js",
   "front_end/core/sdk/Connections.js",
@@ -607,6 +608,7 @@ grd_files_debug_sources = [
   "front_end/core/sdk/DOMModel.js",
   "front_end/core/sdk/DebuggerModel.js",
   "front_end/core/sdk/EmulationModel.js",
+  "front_end/core/sdk/EventBreakpointsModel.js",
   "front_end/core/sdk/FilmStripModel.js",
   "front_end/core/sdk/FrameAssociated.js",
   "front_end/core/sdk/FrameManager.js",

package/docs/triage_guidelines.md

@@ -43,22 +43,24 @@ Issues in the untriaged queue should receive a meaningful response within a busi
 
 ## How should issues be triaged?
 
-An issue is triaged when it meets the following criteria:
-
-- Priority is set correctly
-- Component is set correctly
-- Type is set correctly especially consider Feature vs Bug vs Bug-Regression
-- Status is set correctly (Available most of the time)
-- Request bisection from the Chrome Test Engineer team by adding the label "Needs-Bisect".
+- Close issues as `WontFix` if they don't reproduce (in simple cases) or are requests for features we've already concluded not to pursue.
+- Close issues as `Archived` that are valid, but it seems unlikely that we will get there anytime soon.
+- Move issues out of `Platform>DevTools` if they are not DevTools issues (but just reported via the menu item in DevTools), put on the `Hotlist-DevTools-Triaged` and leave the `Untriaged` status as is.
+- Assign regression bugs with bisects to individuals directly and set the status to `Assigned`.  
+  - Put proper `Platform>DevTools>XXX` component(s) on the issue and do an initial check-in regarding the priority.
+  - Put one of the following labels on it and set the status to "Available":
+  - `Hotlist-DevTools-ProductReview` if it's controversial or clear that consensus needs to be built first.
+  - `Hotlist-DevTools-BrowserAutomation-Backlog` if it's an issue related to ChromeDriver or puppeteer.
+  - `Hotlist-DevTools-Debugging-Backlog` if it's a debugging issue.
+  - `Hotlist-DevTools-DesignAccessibility-Backlog` if it's a design or accessibility issue.
+  - `Hotlist-DevTools-Performance-Backlog` if the issue is related to our performance tooling (i.e. Performance panel, Lighthouse).
+  - `Hotlist-DevTools-Backlog` if it's a general DevTools issue that is not specific to one of the core areas.
+- Also remember to put the Needs-UX label on it, if help from a designer is likely to be required.
 
 ### Setting Assigned or Available
 
 Set issues to Available if they don’t need immediate action and nobody right now and in the short-term future (an iteration) needs to work on it.
 
-If you think they should be addressed in the short-term please add the label “Hotlist-DevTools-CurrentSprint”.
-
-If you think they should be addressed mid-term or the next iteration, please add the label “Hotlist-DevTools-Backlog”
-
 Issues that are handled by Microsoft have the label “Hotlist-DevTools-MS-Backlog” and “Hotlist-DevTools-MS-CurrentSprint” respectively and can be considered triaged.
 
 If you think they are super urgent, please assign them to yangguo@chromium.org and cc bmeurer@chromium.org and hablich@chromium.org.

package/front_end/Tests.js

@@ -1290,6 +1290,7 @@
 
   TestSuite.prototype.testInspectedElementIs = async function(nodeName) {
     this.takeControl();
+    await self.runtime.loadLegacyModule('panels/elements/elements-legacy.js');
     if (!Elements.ElementsPanel.firstInspectElementNodeNameForTest) {
       await new Promise(f => this.addSniffer(Elements.ElementsPanel, 'firstInspectElementCompletedForTest', f));
     }
@@ -1438,6 +1439,38 @@
     this.releaseControl();
   };
 
+  TestSuite.prototype.testInputDispatchEventsToCorrectTarget = async function() {
+    this.takeControl();
+
+    const mainTarget = self.SDK.targetManager.mainTarget();
+    const otherTarget = await createIsolatedTarget('about:blank');
+
+    const setupLogging = `
+      window.logs = [];
+      ['dragenter', 'keydown', 'mousedown', 'mouseenter', 'mouseleave', 'mousemove', 'mouseout', 'mouseover', 'mouseup',
+       'click', 'touchcancel', 'touchend', 'touchmove', 'touchstart',
+      ].forEach((event) => window.addEventListener(event, (e) => logs.push(e.type)));`;
+    await evalCode(mainTarget, setupLogging);
+    await evalCode(otherTarget, setupLogging);
+
+    const inputAgent = mainTarget.inputAgent();
+    await inputAgent.invoke_dispatchMouseEvent({type: 'mousePressed', button: 'left', clickCount: 1, x: 100, y: 250});
+    await inputAgent.invoke_dispatchMouseEvent({type: 'mouseMoved', button: 'left', clickCount: 1, x: 110, y: 270});
+    await inputAgent.invoke_dispatchMouseEvent({type: 'mouseReleased', button: 'left', clickCount: 1, x: 110, y: 270});
+    await inputAgent.invoke_dispatchDragEvent(
+        {type: 'dragEnter', x: 100, y: 250, data: {items: [], dragOperationsMask: 1}});
+    await inputAgent.invoke_synthesizeTapGesture({x: 100, y: 250});
+    await inputAgent.invoke_dispatchKeyEvent({type: 'keyDown', key: 'a'});
+
+    const mainTargetEvents = await evalCode(mainTarget, ' logs.join(\' \')');
+    const otherTargetEvents = await evalCode(otherTarget, 'logs.join(\' \')');
+    this.assertEquals(
+        'mainTargetEvents: mouseover mousedown mousemove mouseup click dragenter keydown; otherTargetEvents: ',
+        `mainTargetEvents: ${mainTargetEvents}; otherTargetEvents: ${otherTargetEvents}`);
+
+    this.releaseControl();
+  };
+
   TestSuite.prototype.testLoadResourceForFrontend = async function(baseURL, fileURL) {
     const test = this;
     const loggedHeaders = new Set(['cache-control', 'pragma']);

package/front_end/core/host/UserMetrics.ts

@@ -378,6 +378,7 @@ export const PanelCodes: {
   'issues-pane': 37,
   'settings-keybinds': 38,
   'cssoverview': 39,
+  'chrome_recorder': 40,
 };
 
 export const SidebarPaneCodes: {

package/front_end/core/i18n/locales/en-US.json

@@ -401,6 +401,21 @@
   "core/sdk/DOMDebuggerModel.ts | xhr": {
     "message": "XHR"
   },
+  "core/sdk/EventBreakpointsModel.ts | auctionWorklet": {
+    "message": "Ad Auction Worklet"
+  },
+  "core/sdk/EventBreakpointsModel.ts | beforeBidderWorkletBiddingStart": {
+    "message": "Bidder Bidding Phase Start"
+  },
+  "core/sdk/EventBreakpointsModel.ts | beforeBidderWorkletReportingStart": {
+    "message": "Bidder Reporting Phase Start"
+  },
+  "core/sdk/EventBreakpointsModel.ts | beforeSellerWorkletReportingStart": {
+    "message": "Seller Reporting Phase Start"
+  },
+  "core/sdk/EventBreakpointsModel.ts | beforeSellerWorkletScoringStart": {
+    "message": "Seller Scoring Phase Start"
+  },
   "core/sdk/NetworkManager.ts | crossoriginReadBlockingCorb": {
     "message": "Cross-Origin Read Blocking (CORB) blocked cross-origin response {PH1} with MIME type {PH2}. See https://www.chromestatus.com/feature/5629709824032768 for more details."
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -401,6 +401,21 @@
   "core/sdk/DOMDebuggerModel.ts | xhr": {
     "message": "X̂H́R̂"
   },
+  "core/sdk/EventBreakpointsModel.ts | auctionWorklet": {
+    "message": "Âd́ Âúĉt́îón̂ Ẃôŕk̂ĺêt́"
+  },
+  "core/sdk/EventBreakpointsModel.ts | beforeBidderWorkletBiddingStart": {
+    "message": "B̂íd̂d́êŕ B̂íd̂d́îńĝ Ṕĥáŝé Ŝt́âŕt̂"
+  },
+  "core/sdk/EventBreakpointsModel.ts | beforeBidderWorkletReportingStart": {
+    "message": "B̂íd̂d́êŕ R̂ép̂ór̂t́îńĝ Ṕĥáŝé Ŝt́âŕt̂"
+  },
+  "core/sdk/EventBreakpointsModel.ts | beforeSellerWorkletReportingStart": {
+    "message": "Ŝél̂ĺêŕ R̂ép̂ór̂t́îńĝ Ṕĥáŝé Ŝt́âŕt̂"
+  },
+  "core/sdk/EventBreakpointsModel.ts | beforeSellerWorkletScoringStart": {
+    "message": "Ŝél̂ĺêŕ Ŝćôŕîńĝ Ṕĥáŝé Ŝt́âŕt̂"
+  },
   "core/sdk/NetworkManager.ts | crossoriginReadBlockingCorb": {
     "message": "Ĉŕôśŝ-Ór̂íĝín̂ Ŕêád̂ B́l̂óĉḱîńĝ (ĆÔŔB̂) b́l̂óĉḱêd́ ĉŕôśŝ-ór̂íĝín̂ ŕêśp̂ón̂śê {PH1} ẃît́ĥ ḾÎḾÊ t́ŷṕê {PH2}. Śêé ĥt́t̂ṕŝ://ẃŵẃ.ĉh́r̂óm̂éŝt́ât́ûś.ĉóm̂/f́êát̂úr̂é/5629709824032768 f̂ór̂ ḿôŕê d́êt́âíl̂ś."
   },

package/front_end/core/protocol_client/InspectorBackend.ts

@@ -644,6 +644,10 @@ export class TargetBase {
     return this.getAgent('Emulation');
   }
 
+  eventBreakpointsAgent(): ProtocolProxyApi.EventBreakpointsApi {
+    return this.getAgent('EventBreakpoints');
+  }
+
   heapProfilerAgent(): ProtocolProxyApi.HeapProfilerApi {
     return this.getAgent('HeapProfiler');
   }

package/front_end/core/root/Runtime.ts

@@ -232,6 +232,10 @@ export class Runtime {
   getModulesMap(): {[x: string]: Module} {
     return this.modulesMap;
   }
+
+  loadLegacyModule(modulePath: string): Promise<void> {
+    return import(`../../${modulePath}`);
+  }
 }
 
 export class ModuleDescriptor {

package/front_end/core/sdk/CategorizedBreakpoint.ts

@@ -0,0 +1,35 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+export class CategorizedBreakpoint {
+  readonly #categoryInternal: string;
+  titleInternal: string;
+  enabledInternal: boolean;
+
+  constructor(category: string, title: string) {
+    this.#categoryInternal = category;
+    this.titleInternal = title;
+    this.enabledInternal = false;
+  }
+
+  category(): string {
+    return this.#categoryInternal;
+  }
+
+  enabled(): boolean {
+    return this.enabledInternal;
+  }
+
+  setEnabled(enabled: boolean): void {
+    this.enabledInternal = enabled;
+  }
+
+  title(): string {
+    return this.titleInternal;
+  }
+
+  setTitle(title: string): void {
+    this.titleInternal = title;
+  }
+}

package/front_end/core/sdk/DOMDebuggerModel.ts

@@ -7,6 +7,7 @@ import * as i18n from '../i18n/i18n.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import * as Protocol from '../../generated/protocol.js';
 
+import {CategorizedBreakpoint} from './CategorizedBreakpoint.js';
 import type {Location} from './DebuggerModel.js';
 import type {DOMNode} from './DOMModel.js';
 import {DOMModel, Events as DOMModelEvents} from './DOMModel.js';
@@ -690,38 +691,6 @@ export namespace EventListener {
   }
 }
 
-export class CategorizedBreakpoint {
-  readonly #categoryInternal: string;
-  titleInternal: string;
-  enabledInternal: boolean;
-
-  constructor(category: string, title: string) {
-    this.#categoryInternal = category;
-    this.titleInternal = title;
-    this.enabledInternal = false;
-  }
-
-  category(): string {
-    return this.#categoryInternal;
-  }
-
-  enabled(): boolean {
-    return this.enabledInternal;
-  }
-
-  setEnabled(enabled: boolean): void {
-    this.enabledInternal = enabled;
-  }
-
-  title(): string {
-    return this.titleInternal;
-  }
-
-  setTitle(title: string): void {
-    this.titleInternal = title;
-  }
-}
-
 export class CSPViolationBreakpoint extends CategorizedBreakpoint {
   readonly #typeInternal: Protocol.DOMDebugger.CSPViolationType;
   constructor(category: string, title: string, type: Protocol.DOMDebugger.CSPViolationType) {
@@ -734,7 +703,7 @@ export class CSPViolationBreakpoint extends CategorizedBreakpoint {
   }
 }
 
-export class EventListenerBreakpoint extends CategorizedBreakpoint {
+export class DOMEventListenerBreakpoint extends CategorizedBreakpoint {
   readonly instrumentationName: string;
   readonly eventName: string;
   readonly eventTargetNames: string[];
@@ -784,7 +753,7 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
   readonly #xhrBreakpointsSetting: Common.Settings.Setting<{url: string, enabled: boolean}[]>;
   readonly #xhrBreakpointsInternal: Map<string, boolean>;
   readonly #cspViolationsToBreakOn: CSPViolationBreakpoint[];
-  readonly #eventListenerBreakpointsInternal: EventListenerBreakpoint[];
+  readonly #eventListenerBreakpointsInternal: DOMEventListenerBreakpoint[];
 
   constructor() {
     this.#xhrBreakpointsSetting = Common.Settings.Settings.instance().createLocalSetting('xhrBreakpoints', []);
@@ -933,19 +902,19 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
   private createInstrumentationBreakpoints(category: string, instrumentationNames: string[]): void {
     for (const instrumentationName of instrumentationNames) {
       this.#eventListenerBreakpointsInternal.push(
-          new EventListenerBreakpoint(instrumentationName, '', [], category, instrumentationName));
+          new DOMEventListenerBreakpoint(instrumentationName, '', [], category, instrumentationName));
     }
   }
 
   private createEventListenerBreakpoints(category: string, eventNames: string[], eventTargetNames: string[]): void {
     for (const eventName of eventNames) {
       this.#eventListenerBreakpointsInternal.push(
-          new EventListenerBreakpoint('', eventName, eventTargetNames, category, eventName));
+          new DOMEventListenerBreakpoint('', eventName, eventTargetNames, category, eventName));
     }
   }
 
-  private resolveEventListenerBreakpointInternal(eventName: string, eventTargetName?: string): EventListenerBreakpoint
-      |null {
+  private resolveEventListenerBreakpointInternal(eventName: string, eventTargetName?: string):
+      DOMEventListenerBreakpoint|null {
     const instrumentationPrefix = 'instrumentation:';
     const listenerPrefix = 'listener:';
     let instrumentationName = '';
@@ -958,7 +927,7 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
       return null;
     }
     eventTargetName = (eventTargetName || '*').toLowerCase();
-    let result: EventListenerBreakpoint|null = null;
+    let result: DOMEventListenerBreakpoint|null = null;
     for (const breakpoint of this.#eventListenerBreakpointsInternal) {
       if (instrumentationName && breakpoint.instrumentationName === instrumentationName) {
         result = breakpoint;
@@ -975,7 +944,7 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
     return result;
   }
 
-  eventListenerBreakpoints(): EventListenerBreakpoint[] {
+  eventListenerBreakpoints(): DOMEventListenerBreakpoint[] {
     return this.#eventListenerBreakpointsInternal.slice();
   }
 
@@ -1008,7 +977,7 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
   resolveEventListenerBreakpoint(auxData: {
     eventName: string,
     targetName: string,
-  }): EventListenerBreakpoint|null {
+  }): DOMEventListenerBreakpoint|null {
     return this.resolveEventListenerBreakpointInternal(auxData['eventName'], auxData['targetName']);
   }
 

package/front_end/core/sdk/EventBreakpointsModel.ts

@@ -0,0 +1,178 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Common from '../common/common.js';
+import * as i18n from '../i18n/i18n.js';
+import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
+
+import {CategorizedBreakpoint} from './CategorizedBreakpoint.js';
+import type {Target} from './Target.js';
+import {Capability} from './Target.js';
+import {SDKModel} from './SDKModel.js';
+import type {SDKModelObserver} from './TargetManager.js';
+import {TargetManager} from './TargetManager.js';
+
+const UIStrings = {
+  /**
+   * @description Category of breakpoints
+   */
+  auctionWorklet: 'Ad Auction Worklet',
+
+  /**
+   * @description Name of a breakpoint type.
+   * https://github.com/WICG/turtledove/blob/main/FLEDGE.md#32-on-device-bidding
+   */
+  beforeBidderWorkletBiddingStart: 'Bidder Bidding Phase Start',
+
+  /**
+   * @description Name of a breakpoint type.
+   * https://github.com/WICG/turtledove/blob/main/FLEDGE.md#52-buyer-reporting-on-render-and-ad-events
+   */
+  beforeBidderWorkletReportingStart: 'Bidder Reporting Phase Start',
+
+  /**
+   * @description Name of a breakpoint type.
+   * https://github.com/WICG/turtledove/blob/main/FLEDGE.md#23-scoring-bids
+   */
+  beforeSellerWorkletScoringStart: 'Seller Scoring Phase Start',
+
+  /**
+   * @description Name of a breakpoint type.
+   * https://github.com/WICG/turtledove/blob/main/FLEDGE.md#51-seller-reporting-on-render
+   */
+  beforeSellerWorkletReportingStart: 'Seller Reporting Phase Start',
+};
+
+const str_ = i18n.i18n.registerUIStrings('core/sdk/EventBreakpointsModel.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const enum InstrumentationNames {
+  BeforeBidderWorkletBiddingStart = 'beforeBidderWorkletBiddingStart',
+  BeforeBidderWorkletReportingStart = 'beforeBidderWorkletReportingStart',
+  BeforeSellerWorkletScoringStart = 'beforeSellerWorkletScoringStart',
+  BeforeSellerWorkletReportingStart = 'beforeSellerWorkletReportingStart',
+}
+
+function getTitleForInstrumentationName(instrumentationName: InstrumentationNames): Common.UIString.LocalizedString {
+  switch (instrumentationName) {
+    case InstrumentationNames.BeforeBidderWorkletBiddingStart:
+      return i18nString(UIStrings.beforeBidderWorkletBiddingStart);
+
+    case InstrumentationNames.BeforeBidderWorkletReportingStart:
+      return i18nString(UIStrings.beforeBidderWorkletReportingStart);
+
+    case InstrumentationNames.BeforeSellerWorkletScoringStart:
+      return i18nString(UIStrings.beforeSellerWorkletScoringStart);
+
+    case InstrumentationNames.BeforeSellerWorkletReportingStart:
+      return i18nString(UIStrings.beforeSellerWorkletReportingStart);
+  }
+}
+
+export class EventBreakpointsModel extends SDKModel<void> {
+  readonly agent: ProtocolProxyApi.EventBreakpointsApi;
+
+  constructor(target: Target) {
+    super(target);
+    this.agent = target.eventBreakpointsAgent();
+  }
+}
+
+// This implementation (as opposed to similar class in DOMDebuggerModel) is for
+// instrumentation breakpoints in targets that run JS but do not have a DOM.
+class EventListenerBreakpoint extends CategorizedBreakpoint {
+  readonly instrumentationName: string;
+  constructor(instrumentationName: InstrumentationNames, category: string) {
+    super(category, getTitleForInstrumentationName(instrumentationName));
+    this.instrumentationName = instrumentationName;
+  }
+
+  setEnabled(enabled: boolean): void {
+    if (this.enabled() === enabled) {
+      return;
+    }
+    super.setEnabled(enabled);
+    for (const model of TargetManager.instance().models(EventBreakpointsModel)) {
+      this.updateOnModel(model);
+    }
+  }
+
+  updateOnModel(model: EventBreakpointsModel): void {
+    if (this.enabled()) {
+      model.agent.invoke_setInstrumentationBreakpoint({eventName: this.instrumentationName});
+    } else {
+      model.agent.invoke_removeInstrumentationBreakpoint({eventName: this.instrumentationName});
+    }
+  }
+
+  static readonly instrumentationPrefix = 'instrumentation:';
+}
+
+let eventBreakpointManagerInstance: EventBreakpointsManager;
+
+export class EventBreakpointsManager implements SDKModelObserver<EventBreakpointsModel> {
+  readonly #eventListenerBreakpointsInternal: EventListenerBreakpoint[] = [];
+
+  constructor() {
+    this.createInstrumentationBreakpoints(i18nString(UIStrings.auctionWorklet), [
+      InstrumentationNames.BeforeBidderWorkletBiddingStart,
+      InstrumentationNames.BeforeBidderWorkletReportingStart,
+      InstrumentationNames.BeforeSellerWorkletScoringStart,
+      InstrumentationNames.BeforeSellerWorkletReportingStart,
+    ]);
+
+    TargetManager.instance().observeModels(EventBreakpointsModel, this);
+  }
+
+  static instance(opts: {
+    forceNew: boolean|null,
+  } = {forceNew: null}): EventBreakpointsManager {
+    const {forceNew} = opts;
+    if (!eventBreakpointManagerInstance || forceNew) {
+      eventBreakpointManagerInstance = new EventBreakpointsManager();
+    }
+
+    return eventBreakpointManagerInstance;
+  }
+
+  private createInstrumentationBreakpoints(category: string, instrumentationNames: InstrumentationNames[]): void {
+    for (const instrumentationName of instrumentationNames) {
+      this.#eventListenerBreakpointsInternal.push(new EventListenerBreakpoint(instrumentationName, category));
+    }
+  }
+
+  eventListenerBreakpoints(): EventListenerBreakpoint[] {
+    return this.#eventListenerBreakpointsInternal.slice();
+  }
+
+  resolveEventListenerBreakpointTitle(auxData: {
+    eventName: string,
+  }): string|null {
+    const breakpoint = this.resolveEventListenerBreakpoint(auxData);
+    return breakpoint ? breakpoint.title() : null;
+  }
+
+  resolveEventListenerBreakpoint(auxData: {eventName: string}): EventListenerBreakpoint|null {
+    const eventName = auxData.eventName;
+    if (!eventName.startsWith(EventListenerBreakpoint.instrumentationPrefix)) {
+      return null;
+    }
+
+    const instrumentationName = eventName.substring(EventListenerBreakpoint.instrumentationPrefix.length);
+    return this.#eventListenerBreakpointsInternal.find(b => b.instrumentationName === instrumentationName) || null;
+  }
+
+  modelAdded(eventBreakpointModel: EventBreakpointsModel): void {
+    for (const breakpoint of this.#eventListenerBreakpointsInternal) {
+      if (breakpoint.enabled()) {
+        breakpoint.updateOnModel(eventBreakpointModel);
+      }
+    }
+  }
+
+  modelRemoved(_eventBreakpointModel: EventBreakpointsModel): void {
+  }
+}
+
+SDKModel.register(EventBreakpointsModel, {capabilities: Capability.EventBreakpoints, autostart: false});

package/front_end/core/sdk/Target.ts

@@ -67,7 +67,7 @@ export class Target extends ProtocolClient.InspectorBackend.TargetBase {
         this.#capabilitiesMask = Capability.JS;
         break;
       case Type.AuctionWorklet:
-        this.#capabilitiesMask = Capability.JS;
+        this.#capabilitiesMask = Capability.JS | Capability.EventBreakpoints;
         break;
       case Type.Browser:
         this.#capabilitiesMask = Capability.Target | Capability.IO;
@@ -249,5 +249,6 @@ export enum Capability {
   WebAuthn = 1 << 16,
   IO = 1 << 17,
   Media = 1 << 18,
+  EventBreakpoints = 1 << 19,
   None = 0,
 }

package/front_end/core/sdk/sdk.ts

@@ -11,6 +11,7 @@ import './NetworkManager.js';
 import './RuntimeModel.js';
 
 import * as AccessibilityModel from './AccessibilityModel.js';
+import * as CategorizedBreakpoint from './CategorizedBreakpoint.js';
 import * as ChildTargetManager from './ChildTargetManager.js';
 import * as CompilerSourceMappingContentProvider from './CompilerSourceMappingContentProvider.js';
 import * as Connections from './Connections.js';
@@ -37,6 +38,7 @@ import * as DebuggerModel from './DebuggerModel.js';
 import * as DOMDebuggerModel from './DOMDebuggerModel.js';
 import * as DOMModel from './DOMModel.js';
 import * as EmulationModel from './EmulationModel.js';
+import * as EventBreakpointsModel from './EventBreakpointsModel.js';
 import * as FilmStripModel from './FilmStripModel.js';
 import * as FrameManager from './FrameManager.js';
 import * as HeapProfilerModel from './HeapProfilerModel.js';
@@ -76,6 +78,7 @@ import * as WebAuthnModel from './WebAuthnModel.js';
 
 export {
   AccessibilityModel,
+  CategorizedBreakpoint,
   ChildTargetManager,
   CompilerSourceMappingContentProvider,
   Connections,
@@ -102,6 +105,7 @@ export {
   DOMDebuggerModel,
   DOMModel,
   EmulationModel,
+  EventBreakpointsModel,
   FilmStripModel,
   FrameManager,
   HeapProfilerModel,

package/front_end/entrypoints/main/main-meta.ts

@@ -223,8 +223,6 @@ let loadedInspectorMainModule: (typeof InspectorMain|undefined);
 
 async function loadMainModule(): Promise<typeof Main> {
   if (!loadedMainModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('entrypoints/main');
     loadedMainModule = await import('./main.js');
   }
   return loadedMainModule;

package/front_end/entrypoints/shell/shell.js

@@ -20,4 +20,5 @@ import '../../models/persistence/persistence-legacy.js';
 import '../../models/extensions/extensions-legacy.js';
 
 import './shell-meta-files.js';
+import '../main/main.js';
 // We generate the descriptors in this file, which depend on the runtime.

package/front_end/entrypoints/shell/shell.json

@@ -1,6 +1,5 @@
 {
   "modules": [
-    { "name": "entrypoints/main", "type": "autostart" },
     { "name": "ui/legacy", "type": "autostart" },
     { "name": "ui/legacy/components/text_editor", "type": "autostart" },
     { "name": "ui/legacy/components/source_frame", "type": "autostart" },

package/front_end/panels/browser_debugger/CSPViolationBreakpointsSidebarPane.ts

@@ -26,14 +26,14 @@ export class CSPViolationBreakpointsSidebarPane extends CategorizedBreakpointsSi
   }
 
   protected getBreakpointFromPausedDetails(details: SDK.DebuggerModel.DebuggerPausedDetails):
-      SDK.DOMDebuggerModel.CategorizedBreakpoint|null {
+      SDK.CategorizedBreakpoint.CategorizedBreakpoint|null {
     const breakpointType = details.auxData && details.auxData['violationType'] ? details.auxData['violationType'] : '';
     const breakpoints = SDK.DOMDebuggerModel.DOMDebuggerManager.instance().cspViolationBreakpoints();
     const breakpoint = breakpoints.find(x => x.type() === breakpointType);
     return breakpoint ? breakpoint : null;
   }
 
-  protected toggleBreakpoint(breakpoint: SDK.DOMDebuggerModel.CategorizedBreakpoint, enabled: boolean): void {
+  protected toggleBreakpoint(breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint, enabled: boolean): void {
     breakpoint.setEnabled(enabled);
     SDK.DOMDebuggerModel.DOMDebuggerManager.instance().updateCSPViolationBreakpoints();
   }

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -24,10 +24,10 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
   readonly #viewId: string;
   readonly #detailsPausedReason: Protocol.Debugger.PausedEventReason;
   readonly #categories: Map<string, Item>;
-  readonly #breakpoints: Map<SDK.DOMDebuggerModel.CategorizedBreakpoint, Item>;
+  readonly #breakpoints: Map<SDK.CategorizedBreakpoint.CategorizedBreakpoint, Item>;
   #highlightedElement?: HTMLLIElement;
   constructor(
-      categories: string[], breakpoints: SDK.DOMDebuggerModel.CategorizedBreakpoint[], viewId: string,
+      categories: string[], breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[], viewId: string,
       detailsPausedReason: Protocol.Debugger.PausedEventReason) {
     super(true);
     this.#categoriesTreeOutline = new UI.TreeOutline.TreeOutlineInShadow();
@@ -66,7 +66,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     return this.#categories;
   }
 
-  get breakpoints(): Map<SDK.DOMDebuggerModel.CategorizedBreakpoint, Item> {
+  get breakpoints(): Map<SDK.CategorizedBreakpoint.CategorizedBreakpoint, Item> {
     return this.#breakpoints;
   }
 
@@ -96,7 +96,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     this.#categories.set(name, {element: treeElement, checkbox: labelNode.checkboxElement});
   }
 
-  protected createBreakpoint(breakpoint: SDK.DOMDebuggerModel.CategorizedBreakpoint): void {
+  protected createBreakpoint(breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint): void {
     const labelNode = UI.UIUtils.CheckboxLabel.create(breakpoint.title());
     labelNode.classList.add('source-code');
     labelNode.checkboxElement.addEventListener('click', this.breakpointCheckboxClicked.bind(this, breakpoint), true);
@@ -124,7 +124,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
   }
 
   protected getBreakpointFromPausedDetails(_details: SDK.DebuggerModel.DebuggerPausedDetails):
-      SDK.DOMDebuggerModel.CategorizedBreakpoint|null {
+      SDK.CategorizedBreakpoint.CategorizedBreakpoint|null {
     return null;
   }
 
@@ -180,11 +180,11 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     }
   }
 
-  protected toggleBreakpoint(breakpoint: SDK.DOMDebuggerModel.CategorizedBreakpoint, enabled: boolean): void {
+  protected toggleBreakpoint(breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint, enabled: boolean): void {
     breakpoint.setEnabled(enabled);
   }
 
-  private breakpointCheckboxClicked(breakpoint: SDK.DOMDebuggerModel.CategorizedBreakpoint): void {
+  private breakpointCheckboxClicked(breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint): void {
     const item = this.#breakpoints.get(breakpoint);
     if (!item) {
       return;

package/front_end/panels/browser_debugger/EventListenerBreakpointsSidebarPane.ts

@@ -11,10 +11,13 @@ let eventListenerBreakpointsSidebarPaneInstance: EventListenerBreakpointsSidebar
 
 export class EventListenerBreakpointsSidebarPane extends CategorizedBreakpointsSidebarPane {
   private constructor() {
-    const categories = SDK.DOMDebuggerModel.DOMDebuggerManager.instance().eventListenerBreakpoints().map(
-        breakpoint => breakpoint.category());
+    let breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[] =
+        SDK.DOMDebuggerModel.DOMDebuggerManager.instance().eventListenerBreakpoints();
+    const nonDomBreakpoints = SDK.EventBreakpointsModel.EventBreakpointsManager.instance().eventListenerBreakpoints();
+    breakpoints = breakpoints.concat(nonDomBreakpoints);
+
+    const categories = breakpoints.map(breakpoint => breakpoint.category());
     categories.sort();
-    const breakpoints = SDK.DOMDebuggerModel.DOMDebuggerManager.instance().eventListenerBreakpoints();
     super(
         categories, breakpoints, 'sources.eventListenerBreakpoints', Protocol.Debugger.PausedEventReason.EventListener);
   }
@@ -27,10 +30,15 @@ export class EventListenerBreakpointsSidebarPane extends CategorizedBreakpointsS
   }
 
   getBreakpointFromPausedDetails(details: SDK.DebuggerModel.DebuggerPausedDetails):
-      SDK.DOMDebuggerModel.CategorizedBreakpoint|null {
-    return SDK.DOMDebuggerModel.DOMDebuggerManager.instance().resolveEventListenerBreakpoint(details.auxData as {
+      SDK.CategorizedBreakpoint.CategorizedBreakpoint|null {
+    const auxData = details.auxData as {
       eventName: string,
       targetName: string,
-    });
+    };
+    const domBreakpoint = SDK.DOMDebuggerModel.DOMDebuggerManager.instance().resolveEventListenerBreakpoint(auxData);
+    if (domBreakpoint) {
+      return domBreakpoint;
+    }
+    return SDK.EventBreakpointsModel.EventBreakpointsManager.instance().resolveEventListenerBreakpoint(auxData);
   }
 }

package/front_end/panels/network/RequestPayloadView.ts

@@ -491,6 +491,8 @@ export class RequestPayloadView extends UI.Widget.VBox {
   private createToggleButton(title: string): Element {
     const button = document.createElement('span');
     button.classList.add('payload-toggle');
+    button.tabIndex = 0;
+    button.setAttribute('role', 'button');
     button.textContent = title;
     return button;
   }

package/front_end/panels/network/requestPayloadTree.css

@@ -64,6 +64,11 @@
   color: var(--color-text-primary);
 }
 
+.tree-outline li.expanded .payload-toggle:focus-visible {
+  border: 2px solid var(--color-button-outline-focus);
+  border-radius: 5px;
+}
+
 .tree-outline li .header-toggle:hover {
   color: var(--color-text-secondary);
   cursor: pointer;

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -142,6 +142,7 @@ export class ProtocolMonitorImpl extends UI.Widget.VBox {
     clearButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, () => {
       this.messages = [];
       this.dataGridIntegrator.update({...this.dataGridIntegrator.data(), rows: []});
+      this.infoWidget.render(null);
     });
     topToolbar.appendToolbarItem(clearButton);
 

package/front_end/panels/sources/DebuggerPausedMessage.ts

@@ -191,13 +191,20 @@ export class DebuggerPausedMessage {
     } else if (details.reason === Protocol.Debugger.PausedEventReason.EventListener) {
       let eventNameForUI = '';
       if (details.auxData) {
-        eventNameForUI =
-            SDK.DOMDebuggerModel.DOMDebuggerManager.instance().resolveEventListenerBreakpointTitle((details.auxData as {
-              directiveText: string,
-              eventName: string,
-              targetName: string,
-              webglErrorName: string,
-            }));
+        const maybeNonDomEventNameForUI =
+            SDK.EventBreakpointsModel.EventBreakpointsManager.instance().resolveEventListenerBreakpointTitle(
+                (details.auxData as {eventName: string}));
+        if (maybeNonDomEventNameForUI) {
+          eventNameForUI = maybeNonDomEventNameForUI;
+        } else {
+          eventNameForUI = SDK.DOMDebuggerModel.DOMDebuggerManager.instance().resolveEventListenerBreakpointTitle(
+              (details.auxData as {
+                directiveText: string,
+                eventName: string,
+                targetName: string,
+                webglErrorName: string,
+              }));
+        }
       }
       messageWrapper = buildWrapper(i18nString(UIStrings.pausedOnEventListener), eventNameForUI);
     } else if (details.reason === Protocol.Debugger.PausedEventReason.XHR) {

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.939277"
+  "version": "1.0.939473"
 }

package/scripts/eslint_rules/lib/check_component_naming.js

@@ -44,7 +44,7 @@ module.exports = {
 
     function findComponentTagNameFromStaticProperty(classBodyNode) {
       return classBodyNode.body.find(node => {
-        return node.type === 'ClassProperty' && node.key.name === 'litTagName';
+        return node.type === 'PropertyDefinition' && node.key.name === 'litTagName';
       });
     }
 

package/scripts/eslint_rules/lib/enforce_custom_event_names.js

@@ -73,7 +73,7 @@ module.exports = {
 
         // If the reference is right, let's find the value of the static eventName property and make sure it is valid.
         const eventNameProperty = node.body.body.find(classBodyPart => {
-          return classBodyPart.type === 'ClassProperty' && classBodyPart.key.name === 'eventName';
+          return classBodyPart.type === 'PropertyDefinition' && classBodyPart.key.name === 'eventName';
         });
 
         // This should always exist because we checked for its existence

package/scripts/eslint_rules/lib/l10n_no_i18nString_calls_module_instantiation.js

@@ -7,7 +7,7 @@
 // One of these AST nodes must be an ancestor of an i18nString call.
 const REQUIRED_ANCESTOR = new Set([
   'ArrowFunctionExpression',
-  'ClassProperty',
+  'PropertyDefinition',
   'FunctionDeclaration',
   'FunctionExpression',
   'MethodDefinition',

package/scripts/eslint_rules/lib/no_underscored_properties.js

@@ -49,7 +49,7 @@ module.exports = {
   },
   create: function(context) {
     return {
-      ClassProperty(node) {
+      PropertyDefinition(node) {
         checkNodeForUnderscoredProperties(context, node, 'property');
       },
       MethodDefinition(node) {

package/front_end/entrypoints/main/module.json

@@ -1,5 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy"
-  ]
-}