chrome-devtools-frontend 1.0.1153166 → 1.0.1155899

package/front_end/panels/sources/components/BreakpointsView.ts

@@ -2,14 +2,20 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import {assertNotNullOrUndefined} from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
+import * as Bindings from '../../../models/bindings/bindings.js';
+import * as Breakpoints from '../../../models/breakpoints/breakpoints.js';
+import * as TextUtils from '../../../models/text_utils/text_utils.js';
+import * as Workspace from '../../../models/workspace/workspace.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as Input from '../../../ui/components/input/input.js';
+import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
@@ -130,77 +136,408 @@ export const enum BreakpointStatus {
   INDETERMINATE = 'INDETERMINATE',
 }
 
-export class CheckboxToggledEvent extends Event {
-  static readonly eventName = 'checkboxtoggled';
-  data: {breakpointItem: BreakpointItem, checked: boolean};
+let breakpointsViewInstance: LegacyWrapper.LegacyWrapper.LegacyWrapper<UI.Widget.Widget, BreakpointsView>|null;
+let breakpointsViewControllerInstance: BreakpointsSidebarController|null;
+
+export class BreakpointsSidebarController implements UI.ContextFlavorListener.ContextFlavorListener {
+  readonly #breakpointManager: Breakpoints.BreakpointManager.BreakpointManager;
+  readonly #breakpointItemToLocationMap =
+      new WeakMap<BreakpointItem, Breakpoints.BreakpointManager.BreakpointLocation[]>();
+  readonly #breakpointsActiveSetting: Common.Settings.Setting<boolean>;
+  readonly #pauseOnUncaughtExceptionSetting: Common.Settings.Setting<boolean>;
+  readonly #pauseOnCaughtExceptionSetting: Common.Settings.Setting<boolean>;
+
+  readonly #collapsedFilesSettings: Common.Settings.Setting<Platform.DevToolsPath.UrlString[]>;
+  readonly #collapsedFiles: Set<Platform.DevToolsPath.UrlString>;
+
+  // This is used to keep track of outstanding edits to breakpoints that were initiated
+  // by the breakpoint edit button (for UMA).
+  #outstandingBreakpointEdited: Breakpoints.BreakpointManager.Breakpoint|undefined;
+  #updateScheduled = false;
+  #updateRunning = false;
+
+  private constructor(
+      breakpointManager: Breakpoints.BreakpointManager.BreakpointManager, settings: Common.Settings.Settings) {
+    this.#collapsedFilesSettings = Common.Settings.Settings.instance().createSetting('collapsedFiles', []);
+    this.#collapsedFiles = new Set(this.#collapsedFilesSettings.get());
+    this.#breakpointManager = breakpointManager;
+    this.#breakpointManager.addEventListener(
+        Breakpoints.BreakpointManager.Events.BreakpointAdded, this.#onBreakpointAdded, this);
+    this.#breakpointManager.addEventListener(
+        Breakpoints.BreakpointManager.Events.BreakpointRemoved, this.#onBreakpointRemoved, this);
+    this.#breakpointsActiveSetting = settings.moduleSetting('breakpointsActive');
+    this.#breakpointsActiveSetting.addChangeListener(this.update, this);
+    this.#pauseOnUncaughtExceptionSetting = settings.moduleSetting('pauseOnUncaughtException');
+    this.#pauseOnUncaughtExceptionSetting.addChangeListener(this.update, this);
+    this.#pauseOnCaughtExceptionSetting = settings.moduleSetting('pauseOnCaughtException');
+    this.#pauseOnCaughtExceptionSetting.addChangeListener(this.update, this);
+  }
 
-  constructor(breakpointItem: BreakpointItem, checked: boolean) {
-    super(CheckboxToggledEvent.eventName);
-    this.data = {breakpointItem: breakpointItem, checked};
+  static instance({forceNew, breakpointManager, settings}: {
+    forceNew: boolean|null,
+    breakpointManager: Breakpoints.BreakpointManager.BreakpointManager,
+    settings: Common.Settings.Settings,
+  } = {
+    forceNew: null,
+    breakpointManager: Breakpoints.BreakpointManager.BreakpointManager.instance(),
+    settings: Common.Settings.Settings.instance(),
+  }): BreakpointsSidebarController {
+    if (!breakpointsViewControllerInstance || forceNew) {
+      breakpointsViewControllerInstance = new BreakpointsSidebarController(breakpointManager, settings);
+    }
+    return breakpointsViewControllerInstance;
   }
-}
 
-export class PauseOnUncaughtExceptionsStateChangedEvent extends Event {
-  static readonly eventName = 'pauseonuncaughtexceptionsstatechanged';
-  data: {checked: boolean};
+  static removeInstance(): void {
+    breakpointsViewControllerInstance = null;
+  }
 
-  constructor(checked: boolean) {
-    super(PauseOnUncaughtExceptionsStateChangedEvent.eventName);
-    this.data = {checked};
+  static targetSupportsIndependentPauseOnExceptionToggles(): boolean {
+    const hasNodeTargets =
+        SDK.TargetManager.TargetManager.instance().targets().some(target => target.type() === SDK.Target.Type.Node);
+    return !hasNodeTargets;
   }
-}
 
-export class PauseOnCaughtExceptionsStateChangedEvent extends Event {
-  static readonly eventName = 'pauseoncaughtexceptionsstatechanged';
-  data: {checked: boolean};
+  flavorChanged(_object: Object|null): void {
+    void this.update();
+  }
 
-  constructor(checked: boolean) {
-    super(PauseOnCaughtExceptionsStateChangedEvent.eventName);
-    this.data = {checked};
+  breakpointEditFinished(breakpoint: Breakpoints.BreakpointManager.Breakpoint|null, edited: boolean): void {
+    if (this.#outstandingBreakpointEdited && this.#outstandingBreakpointEdited === breakpoint) {
+      if (edited) {
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.BreakpointConditionEditedFromSidebar);
+      }
+      this.#outstandingBreakpointEdited = undefined;
+    }
   }
-}
 
-export class ExpandedStateChangedEvent extends Event {
-  static readonly eventName = 'expandedstatechanged';
-  data: {url: Platform.DevToolsPath.UrlString, expanded: boolean};
+  breakpointStateChanged(breakpointItem: BreakpointItem, checked: boolean): void {
+    const locations = this.#getLocationsForBreakpointItem(breakpointItem);
+    locations.forEach((value: Breakpoints.BreakpointManager.BreakpointLocation) => {
+      const breakpoint = value.breakpoint;
+      breakpoint.setEnabled(checked);
+    });
+  }
 
-  constructor(url: Platform.DevToolsPath.UrlString, expanded: boolean) {
-    super(ExpandedStateChangedEvent.eventName);
-    this.data = {url, expanded};
+  async breakpointEdited(breakpointItem: BreakpointItem, editButtonClicked: boolean): Promise<void> {
+    const locations = this.#getLocationsForBreakpointItem(breakpointItem);
+    let location: Breakpoints.BreakpointManager.BreakpointLocation|undefined;
+    for (const locationCandidate of locations) {
+      if (!location || locationCandidate.uiLocation.compareTo(location.uiLocation) < 0) {
+        location = locationCandidate;
+      }
+    }
+    if (location) {
+      if (editButtonClicked) {
+        this.#outstandingBreakpointEdited = location.breakpoint;
+      }
+      await Common.Revealer.reveal(location);
+    }
   }
-}
 
-export class BreakpointSelectedEvent extends Event {
-  static readonly eventName = 'breakpointselected';
-  data: {breakpointItem: BreakpointItem};
+  breakpointsRemoved(breakpointItems: BreakpointItem[]): void {
+    const locations = breakpointItems.flatMap(breakpointItem => this.#getLocationsForBreakpointItem(breakpointItem));
+    locations.forEach(location => location?.breakpoint.remove(false /* keepInStorage */));
+  }
+
+  expandedStateChanged(url: Platform.DevToolsPath.UrlString, expanded: boolean): void {
+    if (expanded) {
+      this.#collapsedFiles.delete(url);
+    } else {
+      this.#collapsedFiles.add(url);
+    }
 
-  constructor(breakpointItem: BreakpointItem) {
-    super(BreakpointSelectedEvent.eventName);
-    this.data = {breakpointItem: breakpointItem};
+    this.#saveSettings();
   }
-}
 
-export class BreakpointEditedEvent extends Event {
-  static readonly eventName = 'breakpointedited';
-  data: {breakpointItem: BreakpointItem, editButtonClicked: boolean};
+  async jumpToSource(breakpointItem: BreakpointItem): Promise<void> {
+    const uiLocations = this.#getLocationsForBreakpointItem(breakpointItem).map(location => location.uiLocation);
+    let uiLocation: Workspace.UISourceCode.UILocation|undefined;
+    for (const uiLocationCandidate of uiLocations) {
+      if (!uiLocation || uiLocationCandidate.compareTo(uiLocation) < 0) {
+        uiLocation = uiLocationCandidate;
+      }
+    }
+    if (uiLocation) {
+      await Common.Revealer.reveal(uiLocation);
+    }
+  }
 
-  constructor(breakpointItem: BreakpointItem, editButtonClicked: boolean) {
-    super(BreakpointEditedEvent.eventName);
-    this.data = {breakpointItem, editButtonClicked};
+  setPauseOnUncaughtExceptions(value: boolean): void {
+    this.#pauseOnUncaughtExceptionSetting.set(value);
+  }
+
+  setPauseOnCaughtExceptions(value: boolean): void {
+    this.#pauseOnCaughtExceptionSetting.set(value);
+  }
+
+  async update(): Promise<void> {
+    this.#updateScheduled = true;
+    if (this.#updateRunning) {
+      return;
+    }
+    this.#updateRunning = true;
+    while (this.#updateScheduled) {
+      this.#updateScheduled = false;
+      const data = await this.getUpdatedBreakpointViewData();
+      BreakpointsView.instance().data = data;
+    }
+    this.#updateRunning = false;
+  }
+
+  async getUpdatedBreakpointViewData(): Promise<BreakpointsViewData> {
+    const breakpointsActive = this.#breakpointsActiveSetting.get();
+    const independentPauseToggles = BreakpointsSidebarController.targetSupportsIndependentPauseOnExceptionToggles();
+    const pauseOnUncaughtExceptions = this.#pauseOnUncaughtExceptionSetting.get();
+    const pauseOnCaughtExceptions = this.#pauseOnCaughtExceptionSetting.get();
+
+    const breakpointLocations = this.#getBreakpointLocations();
+    if (!breakpointLocations.length) {
+      return {
+        breakpointsActive,
+        pauseOnCaughtExceptions,
+        pauseOnUncaughtExceptions,
+        independentPauseToggles,
+        groups: [],
+      };
+    }
+
+    const locationsGroupedById = this.#groupBreakpointLocationsById(breakpointLocations);
+    const locationIdsByLineId = this.#getLocationIdsByLineId(breakpointLocations);
+
+    const [content, selectedUILocation] = await Promise.all([
+      this.#getContent(locationsGroupedById),
+      this.#getHitUILocation(),
+    ]);
+
+    const scriptIdToGroup = new Map<string, BreakpointGroup>();
+
+    for (let idx = 0; idx < locationsGroupedById.length; idx++) {
+      const locations = locationsGroupedById[idx];
+      const fstLocation = locations[0];
+      const sourceURL = fstLocation.uiLocation.uiSourceCode.url();
+      const scriptId = fstLocation.uiLocation.uiSourceCode.canononicalScriptId();
+      const uiLocation = fstLocation.uiLocation;
+
+      const isHit = selectedUILocation !== null &&
+          locations.some(location => location.uiLocation.id() === selectedUILocation.id());
+
+      const numBreakpointsOnLine = locationIdsByLineId.get(uiLocation.lineId()).size;
+      const showColumn = numBreakpointsOnLine > 1;
+      const locationText = uiLocation.lineAndColumnText(showColumn) as string;
+
+      const text = content[idx];
+      const codeSnippet = text instanceof TextUtils.Text.Text ?
+          text.lineAt(uiLocation.lineNumber) :
+          text.lines[text.bytecodeOffsetToLineNumber(uiLocation.columnNumber ?? 0)] ?? '';
+
+      if (isHit && this.#collapsedFiles.has(sourceURL)) {
+        this.#collapsedFiles.delete(sourceURL);
+        this.#saveSettings();
+      }
+      const expanded = !this.#collapsedFiles.has(sourceURL);
+
+      const status: BreakpointStatus = this.#getBreakpointState(locations);
+      const {type, hoverText} = this.#getBreakpointTypeAndDetails(locations);
+      const item = {
+        id: fstLocation.breakpoint.breakpointStorageId(),
+        location: locationText,
+        codeSnippet,
+        isHit,
+        status,
+        type,
+        hoverText,
+      };
+      this.#breakpointItemToLocationMap.set(item, locations);
+
+      let group = scriptIdToGroup.get(scriptId);
+      if (group) {
+        group.breakpointItems.push(item);
+        group.expanded ||= expanded;
+      } else {
+        const editable = this.#breakpointManager.supportsConditionalBreakpoints(uiLocation.uiSourceCode);
+        group = {
+          url: sourceURL,
+          name: uiLocation.uiSourceCode.displayName(),
+          editable,
+          expanded,
+          breakpointItems: [item],
+        };
+        scriptIdToGroup.set(scriptId, group);
+      }
+    }
+    return {
+      breakpointsActive,
+      pauseOnCaughtExceptions,
+      pauseOnUncaughtExceptions,
+      independentPauseToggles,
+      groups: Array.from(scriptIdToGroup.values()),
+    };
+  }
+
+  #onBreakpointAdded(event: Common.EventTarget.EventTargetEvent<Breakpoints.BreakpointManager.BreakpointLocation>):
+      Promise<void> {
+    const breakpoint = event.data.breakpoint;
+    if (breakpoint.origin === Breakpoints.BreakpointManager.BreakpointOrigin.USER_ACTION &&
+        this.#collapsedFiles.has(breakpoint.url())) {
+      // Auto-expand if a new breakpoint was added to a collapsed group.
+      this.#collapsedFiles.delete(breakpoint.url());
+      this.#saveSettings();
+    }
+    return this.update();
+  }
+
+  #onBreakpointRemoved(event: Common.EventTarget.EventTargetEvent<Breakpoints.BreakpointManager.BreakpointLocation>):
+      Promise<void> {
+    const breakpoint = event.data.breakpoint;
+    if (this.#collapsedFiles.has(breakpoint.url())) {
+      const locations = Breakpoints.BreakpointManager.BreakpointManager.instance().allBreakpointLocations();
+      const otherBreakpointsOnSameFileExist =
+          locations.some(location => location.breakpoint.url() === breakpoint.url());
+      if (!otherBreakpointsOnSameFileExist) {
+        // Clear up the #collapsedFiles set from this url if no breakpoint is left in this group.
+        this.#collapsedFiles.delete(breakpoint.url());
+        this.#saveSettings();
+      }
+    }
+    return this.update();
+  }
+
+  #saveSettings(): void {
+    this.#collapsedFilesSettings.set(Array.from(this.#collapsedFiles.values()));
+  }
+
+  #getBreakpointTypeAndDetails(locations: Breakpoints.BreakpointManager.BreakpointLocation[]):
+      {type: SDK.DebuggerModel.BreakpointType, hoverText?: string} {
+    const breakpointWithCondition = locations.find(location => Boolean(location.breakpoint.condition()));
+    const breakpoint = breakpointWithCondition?.breakpoint;
+    if (!breakpoint || !breakpoint.condition()) {
+      return {type: SDK.DebuggerModel.BreakpointType.REGULAR_BREAKPOINT};
+    }
+
+    const condition = breakpoint.condition();
+    if (breakpoint.isLogpoint()) {
+      return {type: SDK.DebuggerModel.BreakpointType.LOGPOINT, hoverText: condition};
+    }
+
+    return {type: SDK.DebuggerModel.BreakpointType.CONDITIONAL_BREAKPOINT, hoverText: condition};
+  }
+
+  #getLocationsForBreakpointItem(breakpointItem: BreakpointItem): Breakpoints.BreakpointManager.BreakpointLocation[] {
+    const locations = this.#breakpointItemToLocationMap.get(breakpointItem);
+    assertNotNullOrUndefined(locations);
+    return locations;
+  }
+
+  async #getHitUILocation(): Promise<Workspace.UISourceCode.UILocation|null> {
+    const details = UI.Context.Context.instance().flavor(SDK.DebuggerModel.DebuggerPausedDetails);
+    if (details && details.callFrames.length) {
+      return await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().rawLocationToUILocation(
+          details.callFrames[0].location());
+    }
+    return null;
+  }
+
+  #getBreakpointLocations(): Breakpoints.BreakpointManager.BreakpointLocation[] {
+    const locations = this.#breakpointManager.allBreakpointLocations().filter(
+        breakpointLocation =>
+            breakpointLocation.uiLocation.uiSourceCode.project().type() !== Workspace.Workspace.projectTypes.Debugger);
+
+    locations.sort((item1, item2) => item1.uiLocation.compareTo(item2.uiLocation));
+
+    const result = [];
+    let lastBreakpoint: Breakpoints.BreakpointManager.Breakpoint|null = null;
+    let lastLocation: Workspace.UISourceCode.UILocation|null = null;
+    for (const location of locations) {
+      if (location.breakpoint !== lastBreakpoint || (lastLocation && location.uiLocation.compareTo(lastLocation))) {
+        result.push(location);
+        lastBreakpoint = location.breakpoint;
+        lastLocation = location.uiLocation;
+      }
+    }
+    return result;
+  }
+
+  #groupBreakpointLocationsById(breakpointLocations: Breakpoints.BreakpointManager.BreakpointLocation[]):
+      Breakpoints.BreakpointManager.BreakpointLocation[][] {
+    const map = new Platform.MapUtilities.Multimap<string, Breakpoints.BreakpointManager.BreakpointLocation>();
+    for (const breakpointLocation of breakpointLocations) {
+      const uiLocation = breakpointLocation.uiLocation;
+      map.set(uiLocation.id(), breakpointLocation);
+    }
+    const arr: Breakpoints.BreakpointManager.BreakpointLocation[][] = [];
+    for (const id of map.keysArray()) {
+      const locations = Array.from(map.get(id));
+      if (locations.length) {
+        arr.push(locations);
+      }
+    }
+    return arr;
   }
-}
 
-export class BreakpointsRemovedEvent extends Event {
-  static readonly eventName = 'breakpointsremoved';
-  data: {breakpointItems: BreakpointItem[]};
+  #getLocationIdsByLineId(breakpointLocations: Breakpoints.BreakpointManager.BreakpointLocation[]):
+      Platform.MapUtilities.Multimap<string, string> {
+    const result = new Platform.MapUtilities.Multimap<string, string>();
 
-  constructor(breakpointItems: BreakpointItem[]) {
-    super(BreakpointsRemovedEvent.eventName);
-    this.data = {breakpointItems};
+    for (const breakpointLocation of breakpointLocations) {
+      const uiLocation = breakpointLocation.uiLocation;
+      result.set(uiLocation.lineId(), uiLocation.id());
+    }
+
+    return result;
+  }
+
+  #getBreakpointState(locations: Breakpoints.BreakpointManager.BreakpointLocation[]): BreakpointStatus {
+    const hasEnabled = locations.some(location => location.breakpoint.enabled());
+    const hasDisabled = locations.some(location => !location.breakpoint.enabled());
+    let status: BreakpointStatus;
+    if (hasEnabled) {
+      status = hasDisabled ? BreakpointStatus.INDETERMINATE : BreakpointStatus.ENABLED;
+    } else {
+      status = BreakpointStatus.DISABLED;
+    }
+    return status;
+  }
+
+  #getContent(locations: Breakpoints.BreakpointManager.BreakpointLocation[][]):
+      Promise<Array<TextUtils.Text.Text|Common.WasmDisassembly.WasmDisassembly>> {
+    // Use a cache to share the Text objects between all breakpoints. This way
+    // we share the cached line ending information that Text calculates. This
+    // was very slow to calculate with a lot of breakpoints in the same very
+    // large source file.
+    const contentToTextMap = new Map<string, TextUtils.Text.Text>();
+
+    return Promise.all(locations.map(async ([{uiLocation: {uiSourceCode}}]) => {
+      const deferredContent = await uiSourceCode.requestContent({cachedWasmOnly: true});
+      if ('wasmDisassemblyInfo' in deferredContent && deferredContent.wasmDisassemblyInfo) {
+        return deferredContent.wasmDisassemblyInfo;
+      }
+      const contentText = deferredContent.content || '';
+      if (contentToTextMap.has(contentText)) {
+        return contentToTextMap.get(contentText) as TextUtils.Text.Text;
+      }
+      const text = new TextUtils.Text.Text(contentText);
+      contentToTextMap.set(contentText, text);
+      return text;
+    }));
   }
 }
 
-export class BreakpointsView extends HTMLElement {
+export class BreakpointsView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
+  readonly #controller: BreakpointsSidebarController;
+
+  static instance(): BreakpointsView {
+    if (!breakpointsViewInstance) {
+      breakpointsViewInstance = LegacyWrapper.LegacyWrapper.legacyWrapper(UI.Widget.Widget, new BreakpointsView());
+    }
+    return breakpointsViewInstance.getComponent();
+  }
+
+  constructor() {
+    super();
+    this.#controller = BreakpointsSidebarController.instance();
+  }
+
   static readonly litTagName = LitHtml.literal`devtools-breakpoint-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
@@ -214,9 +551,6 @@ export class BreakpointsView extends HTMLElement {
   #breakpointGroups: BreakpointGroup[] = [];
   #urlToDifferentiatingPath: Map<Platform.DevToolsPath.UrlString, string> = new Map();
 
-  #scheduledRender = false;
-  #enqueuedRender = false;
-
   set data(data: BreakpointsViewData) {
     this.#pauseOnUncaughtExceptions = data.pauseOnUncaughtExceptions;
     this.#pauseOnCaughtExceptions = data.pauseOnCaughtExceptions;
@@ -230,22 +564,14 @@ export class BreakpointsView extends HTMLElement {
     }
     this.#urlToDifferentiatingPath = getDifferentiatingPathMap(titleInfos);
 
-    void this.#render();
+    void this.render();
   }
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [Input.checkboxStyles, breakpointsViewStyles];
   }
 
-  async #render(): Promise<void> {
-    if (this.#scheduledRender) {
-      // If we are already rendering, don't render again immediately, but
-      // enqueue it to be run after we're done on our current render.
-      this.#enqueuedRender = true;
-      return;
-    }
-
-    this.#scheduledRender = true;
+  override async render(): Promise<void> {
     await coordinator.write('BreakpointsView render', () => {
       const clickHandler = async(event: Event): Promise<void> => {
         const currentTarget = event.currentTarget as HTMLElement;
@@ -296,15 +622,6 @@ export class BreakpointsView extends HTMLElement {
         element?.setAttribute('tabindex', '0');
       }
     });
-
-    this.#scheduledRender = false;
-
-    // If render() was called when we were already mid-render, let's re-render
-    // to ensure we're not rendering any stale UI.
-    if (this.#enqueuedRender) {
-      this.#enqueuedRender = false;
-      return this.#render();
-    }
   }
 
   async #keyDownHandler(event: KeyboardEvent): Promise<void> {
@@ -388,7 +705,7 @@ export class BreakpointsView extends HTMLElement {
     const clickHandler = (event: Event): void => {
       Host.userMetrics.breakpointEditDialogRevealedFrom(
           Host.UserMetrics.BreakpointEditDialogRevealedFrom.BreakpointSidebarEditButton);
-      this.dispatchEvent(new BreakpointEditedEvent(breakpointItem, true /* editButtonClicked */));
+      void this.#controller.breakpointEdited(breakpointItem, true /* editButtonClicked */);
       event.consume();
     };
     const title = breakpointItem.type === SDK.DebuggerModel.BreakpointType.LOGPOINT ?
@@ -414,7 +731,7 @@ export class BreakpointsView extends HTMLElement {
       breakpointItems: BreakpointItem[], tooltipText: string, action: Host.UserMetrics.Action): LitHtml.TemplateResult {
     const clickHandler = (event: Event): void => {
       Host.userMetrics.actionTaken(action);
-      this.dispatchEvent(new BreakpointsRemovedEvent(breakpointItems));
+      void this.#controller.breakpointsRemoved(breakpointItems);
       event.consume();
     };
     // clang-format off
@@ -439,16 +756,16 @@ export class BreakpointsView extends HTMLElement {
 
     menu.defaultSection().appendItem(i18nString(UIStrings.removeAllBreakpointsInFile), () => {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.BreakpointsInFileRemovedFromContextMenu);
-      this.dispatchEvent(new BreakpointsRemovedEvent(breakpointItems));
+      void this.#controller.breakpointsRemoved(breakpointItems);
     });
     const otherGroups = this.#breakpointGroups.filter(group => group !== breakpointGroup);
     menu.defaultSection().appendItem(i18nString(UIStrings.removeOtherBreakpoints), () => {
       const breakpointItems = otherGroups.map(({breakpointItems}) => breakpointItems).flat();
-      this.dispatchEvent(new BreakpointsRemovedEvent(breakpointItems));
+      void this.#controller.breakpointsRemoved(breakpointItems);
     }, otherGroups.length === 0);
     menu.defaultSection().appendItem(i18nString(UIStrings.removeAllBreakpoints), () => {
       const breakpointItems = this.#breakpointGroups.map(({breakpointItems}) => breakpointItems).flat();
-      this.dispatchEvent(new BreakpointsRemovedEvent(breakpointItems));
+      void this.#controller.breakpointsRemoved(breakpointItems);
     });
 
     const notEnabledItems =
@@ -456,7 +773,7 @@ export class BreakpointsView extends HTMLElement {
     menu.debugSection().appendItem(i18nString(UIStrings.enableAllBreakpointsInFile), () => {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.BreakpointsInFileEnabledDisabledFromContextMenu);
       for (const breakpointItem of notEnabledItems) {
-        this.dispatchEvent(new CheckboxToggledEvent(breakpointItem, true));
+        this.#controller.breakpointStateChanged(breakpointItem, true);
       }
     }, notEnabledItems.length === 0);
     const notDisabledItems =
@@ -464,7 +781,7 @@ export class BreakpointsView extends HTMLElement {
     menu.debugSection().appendItem(i18nString(UIStrings.disableAllBreakpointsInFile), () => {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.BreakpointsInFileEnabledDisabledFromContextMenu);
       for (const breakpointItem of notDisabledItems) {
-        this.dispatchEvent(new CheckboxToggledEvent(breakpointItem, false));
+        this.#controller.breakpointStateChanged(breakpointItem, false);
       }
     }, notDisabledItems.length === 0);
 
@@ -479,7 +796,7 @@ export class BreakpointsView extends HTMLElement {
     const toggleHandler = (event: Event): void => {
       const htmlDetails = event.target as HTMLDetailsElement;
       group.expanded = htmlDetails.open;
-      this.dispatchEvent(new ExpandedStateChangedEvent(group.url, group.expanded));
+      void this.#controller.expandedStateChanged(group.url, group.expanded);
     };
     const clickHandler = async(event: Event): Promise<void> => {
       const selected = event.currentTarget as HTMLElement;
@@ -528,7 +845,7 @@ export class BreakpointsView extends HTMLElement {
       const updatedStatus = element.checked ? BreakpointStatus.ENABLED : BreakpointStatus.DISABLED;
       const itemsToUpdate = group.breakpointItems.filter(item => item.status !== updatedStatus);
       itemsToUpdate.forEach(item => {
-        this.dispatchEvent(new CheckboxToggledEvent(item, element.checked));
+        this.#controller.breakpointStateChanged(item, element.checked);
       });
       e.consume();
     };
@@ -559,26 +876,26 @@ export class BreakpointsView extends HTMLElement {
     menu.revealSection().appendItem(editBreakpointText, () => {
       Host.userMetrics.breakpointEditDialogRevealedFrom(
           Host.UserMetrics.BreakpointEditDialogRevealedFrom.BreakpointSidebarContextMenu);
-      this.dispatchEvent(new BreakpointEditedEvent(breakpointItem, false /* editButtonClicked */));
+      void this.#controller.breakpointEdited(breakpointItem, false /* editButtonClicked */);
     }, !editable);
 
     menu.defaultSection().appendItem(i18nString(UIStrings.removeBreakpoint), () => {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.BreakpointRemovedFromContextMenu);
-      this.dispatchEvent(new BreakpointsRemovedEvent([breakpointItem]));
+      void this.#controller.breakpointsRemoved([breakpointItem]);
     });
     const otherItems = this.#breakpointGroups.map(({breakpointItems}) => breakpointItems)
                            .flat()
                            .filter(item => item !== breakpointItem);
     menu.defaultSection().appendItem(i18nString(UIStrings.removeOtherBreakpoints), () => {
-      this.dispatchEvent(new BreakpointsRemovedEvent(otherItems));
+      void this.#controller.breakpointsRemoved(otherItems);
     }, otherItems.length === 0);
     menu.defaultSection().appendItem(i18nString(UIStrings.removeAllBreakpoints), () => {
       const breakpointItems = this.#breakpointGroups.map(({breakpointItems}) => breakpointItems).flat();
-      this.dispatchEvent(new BreakpointsRemovedEvent(breakpointItems));
+      void this.#controller.breakpointsRemoved(breakpointItems);
     });
 
     menu.editSection().appendItem(i18nString(UIStrings.revealLocation), () => {
-      this.dispatchEvent(new BreakpointSelectedEvent(breakpointItem));
+      void this.#controller.jumpToSource(breakpointItem);
     });
 
     void menu.show();
@@ -588,7 +905,7 @@ export class BreakpointsView extends HTMLElement {
       breakpointItem: BreakpointItem, editable: boolean, groupIndex: number,
       breakpointItemIndex: number): LitHtml.TemplateResult {
     const codeSnippetClickHandler = (event: Event): void => {
-      this.dispatchEvent(new BreakpointSelectedEvent(breakpointItem));
+      void this.#controller.jumpToSource(breakpointItem);
       event.consume();
     };
     const breakpointItemClickHandler = async(event: Event): Promise<void> => {
@@ -676,12 +993,12 @@ export class BreakpointsView extends HTMLElement {
 
   #onCheckboxToggled(e: Event, item: BreakpointItem): void {
     const element = e.target as HTMLInputElement;
-    this.dispatchEvent(new CheckboxToggledEvent(item, element.checked));
+    this.#controller.breakpointStateChanged(item, element.checked);
   }
 
   #onPauseOnCaughtExceptionsStateChanged(e: Event): void {
     const {checked} = e.target as HTMLInputElement;
-    this.dispatchEvent(new PauseOnCaughtExceptionsStateChangedEvent(checked));
+    this.#controller.setPauseOnCaughtExceptions(checked);
   }
 
   #onPauseOnUncaughtExceptionsStateChanged(e: Event): void {
@@ -705,7 +1022,7 @@ export class BreakpointsView extends HTMLElement {
         }
       });
     }
-    this.dispatchEvent(new PauseOnUncaughtExceptionsStateChangedEvent(checked));
+    this.#controller.setPauseOnUncaughtExceptions(checked);
   }
 }