chrome-devtools-frontend 1.0.1040857 → 1.0.1070764

package/front_end/panels/sources/BreakpointsSidebarPane.ts

@@ -2,20 +2,24 @@
 // 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 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 TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+import {LogpointPrefix, LogpointSuffix} from './BreakpointEditDialog.js';
 import * as SourcesComponents from './components/components.js';
 
 let breakpointsSidebarPaneInstance: BreakpointsSidebarPane;
-let breakpointsViewControllerInstance: BreakpointsSidebarController;
+let breakpointsViewControllerInstance: BreakpointsSidebarController|null;
 
 export class BreakpointsSidebarPane extends UI.ThrottledWidget.ThrottledWidget {
   readonly #breakpointsView: SourcesComponents.BreakpointsView.BreakpointsView;
+  readonly #controller: BreakpointsSidebarController;
 
   static instance(): BreakpointsSidebarPane {
     if (!breakpointsSidebarPaneInstance) {
@@ -26,56 +30,211 @@ export class BreakpointsSidebarPane extends UI.ThrottledWidget.ThrottledWidget {
 
   constructor() {
     super(true);
-
+    this.#controller = BreakpointsSidebarController.instance();
     this.#breakpointsView = new SourcesComponents.BreakpointsView.BreakpointsView();
+    this.#breakpointsView.addEventListener(
+        SourcesComponents.BreakpointsView.CheckboxToggledEvent.eventName, (event: Event) => {
+          const {data: {breakpointItem, checked}} = event as SourcesComponents.BreakpointsView.CheckboxToggledEvent;
+          this.#controller.breakpointStateChanged(breakpointItem, checked);
+          event.consume();
+        });
+    this.#breakpointsView.addEventListener(
+        SourcesComponents.BreakpointsView.BreakpointSelectedEvent.eventName, (event: Event) => {
+          const {data: {breakpointItem}} = event as SourcesComponents.BreakpointsView.BreakpointSelectedEvent;
+          void this.#controller.jumpToSource(breakpointItem);
+          event.consume();
+        });
+    this.#breakpointsView.addEventListener(
+        SourcesComponents.BreakpointsView.BreakpointEditedEvent.eventName, (event: Event) => {
+          const {data: {breakpointItem}} = event as SourcesComponents.BreakpointsView.BreakpointEditedEvent;
+          void this.#controller.breakpointEdited(breakpointItem);
+          event.consume();
+        });
+    this.#breakpointsView.addEventListener(
+        SourcesComponents.BreakpointsView.BreakpointsRemovedEvent.eventName, (event: Event) => {
+          const {data: {breakpointItems}} = event as SourcesComponents.BreakpointsView.BreakpointsRemovedEvent;
+          void this.#controller.breakpointsRemoved(breakpointItems);
+          event.consume();
+        });
+    this.#breakpointsView.addEventListener(
+        SourcesComponents.BreakpointsView.ExpandedStateChangedEvent.eventName, (event: Event) => {
+          const {data: {url, expanded}} = event as SourcesComponents.BreakpointsView.ExpandedStateChangedEvent;
+          void this.#controller.expandedStateChanged(url, expanded);
+          event.consume();
+        });
+    this.#breakpointsView.addEventListener(
+        SourcesComponents.BreakpointsView.PauseOnExceptionsStateChangedEvent.eventName, (event: Event) => {
+          const {data: {checked}} = event as SourcesComponents.BreakpointsView.PauseOnExceptionsStateChangedEvent;
+          this.#controller.setPauseOnExceptions(checked);
+          event.consume();
+        });
+    this.#breakpointsView.addEventListener(
+        SourcesComponents.BreakpointsView.PauseOnCaughtExceptionsStateChangedEvent.eventName, (event: Event) => {
+          const {data: {checked}} = event as SourcesComponents.BreakpointsView.PauseOnCaughtExceptionsStateChangedEvent;
+          this.#controller.setPauseOnCaughtExceptions(checked);
+          event.consume();
+        });
+
     this.contentElement.appendChild(this.#breakpointsView);
     this.update();
   }
 
-  async doUpdate(): Promise<void> {
-    await BreakpointsSidebarController.instance().update();
+  doUpdate(): Promise<void> {
+    return this.#controller.update();
   }
 
   set data(data: SourcesComponents.BreakpointsView.BreakpointsViewData) {
     this.#breakpointsView.data = data;
   }
 }
+
 export class BreakpointsSidebarController implements UI.ContextFlavorListener.ContextFlavorListener {
   readonly #breakpointManager: Bindings.BreakpointManager.BreakpointManager;
-
-  constructor() {
-    this.#breakpointManager = Bindings.BreakpointManager.BreakpointManager.instance();
-    this.#breakpointManager.addEventListener(Bindings.BreakpointManager.Events.BreakpointAdded, this.update, this);
-    this.#breakpointManager.addEventListener(Bindings.BreakpointManager.Events.BreakpointRemoved, this.update, this);
+  readonly #breakpointItemToLocationMap =
+      new WeakMap<SourcesComponents.BreakpointsView.BreakpointItem, Bindings.BreakpointManager.BreakpointLocation[]>();
+  readonly #breakpointsActiveSetting: Common.Settings.Setting<boolean>;
+  readonly #pauseOnExceptionEnabledSetting: Common.Settings.Setting<boolean>;
+  readonly #pauseOnCaughtExceptionSetting: Common.Settings.Setting<boolean>;
+
+  readonly #collapsedFilesSettings: Common.Settings.Setting<Platform.DevToolsPath.UrlString[]>;
+  readonly #collapsedFiles: Set<Platform.DevToolsPath.UrlString>;
+
+  #updateScheduled = false;
+  #updateRunning = false;
+
+  private constructor(
+      breakpointManager: Bindings.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(
+        Bindings.BreakpointManager.Events.BreakpointAdded, this.#onBreakpointAdded, this);
+    this.#breakpointManager.addEventListener(
+        Bindings.BreakpointManager.Events.BreakpointRemoved, this.#onBreakpointRemoved, this);
+    this.#breakpointsActiveSetting = settings.moduleSetting('breakpointsActive');
+    this.#breakpointsActiveSetting.addChangeListener(this.update, this);
+    this.#pauseOnExceptionEnabledSetting = settings.moduleSetting('pauseOnExceptionEnabled');
+    this.#pauseOnExceptionEnabledSetting.addChangeListener(this.update, this);
+    this.#pauseOnCaughtExceptionSetting = settings.moduleSetting('pauseOnCaughtException');
+    this.#pauseOnCaughtExceptionSetting.addChangeListener(this.update, this);
   }
 
-  static instance(opts: {forceNew: boolean|null} = {forceNew: null}): BreakpointsSidebarController {
-    if (!breakpointsViewControllerInstance || opts.forceNew) {
-      breakpointsViewControllerInstance = new BreakpointsSidebarController();
+  static instance({forceNew, breakpointManager, settings}: {
+    forceNew: boolean|null,
+    breakpointManager: Bindings.BreakpointManager.BreakpointManager,
+    settings: Common.Settings.Settings,
+  } = {
+    forceNew: null,
+    breakpointManager: Bindings.BreakpointManager.BreakpointManager.instance(),
+    settings: Common.Settings.Settings.instance(),
+  }): BreakpointsSidebarController {
+    if (!breakpointsViewControllerInstance || forceNew) {
+      breakpointsViewControllerInstance = new BreakpointsSidebarController(breakpointManager, settings);
     }
     return breakpointsViewControllerInstance;
   }
 
+  static removeInstance(): void {
+    breakpointsViewControllerInstance = null;
+  }
+
   flavorChanged(_object: Object|null): void {
     void this.update();
   }
 
+  breakpointStateChanged(breakpointItem: SourcesComponents.BreakpointsView.BreakpointItem, checked: boolean): void {
+    const locations = this.#getLocationsForBreakpointItem(breakpointItem);
+    locations.forEach((value: Bindings.BreakpointManager.BreakpointLocation) => {
+      const breakpoint = value.breakpoint;
+      breakpoint.setEnabled(checked);
+    });
+  }
+
+  async breakpointEdited(breakpointItem: SourcesComponents.BreakpointsView.BreakpointItem): Promise<void> {
+    const locations = this.#getLocationsForBreakpointItem(breakpointItem);
+    let location: Bindings.BreakpointManager.BreakpointLocation|undefined;
+    for (const locationCandidate of locations) {
+      if (!location || locationCandidate.uiLocation.compareTo(location.uiLocation) < 0) {
+        location = locationCandidate;
+      }
+    }
+    if (location) {
+      await Common.Revealer.reveal(location);
+    }
+  }
+
+  breakpointsRemoved(breakpointItems: SourcesComponents.BreakpointsView.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);
+    }
+
+    this.#saveSettings();
+  }
+
+  async jumpToSource(breakpointItem: SourcesComponents.BreakpointsView.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);
+    }
+  }
+
+  setPauseOnExceptions(value: boolean): void {
+    this.#pauseOnExceptionEnabledSetting.set(value);
+  }
+
+  setPauseOnCaughtExceptions(value: boolean): void {
+    this.#pauseOnCaughtExceptionSetting.set(value);
+  }
+
   async update(): Promise<void> {
-    const data = await this.getUpdatedBreakpointViewData();
-    BreakpointsSidebarPane.instance().data = data;
+    this.#updateScheduled = true;
+    if (this.#updateRunning) {
+      return;
+    }
+    this.#updateRunning = true;
+    while (this.#updateScheduled) {
+      this.#updateScheduled = false;
+      const data = await this.getUpdatedBreakpointViewData();
+      BreakpointsSidebarPane.instance().data = data;
+    }
+    this.#updateRunning = false;
   }
 
   async getUpdatedBreakpointViewData(): Promise<SourcesComponents.BreakpointsView.BreakpointsViewData> {
+    const breakpointsActive = this.#breakpointsActiveSetting.get();
+    const pauseOnExceptions = this.#pauseOnExceptionEnabledSetting.get();
+    const pauseOnCaughtExceptions = this.#pauseOnCaughtExceptionSetting.get();
+
     const breakpointLocations = this.#getBreakpointLocations();
     if (!breakpointLocations.length) {
-      return {groups: []};
+      return {
+        breakpointsActive,
+        pauseOnCaughtExceptions,
+        pauseOnExceptions,
+        groups: [],
+      };
     }
 
     const locationsGroupedById = this.#groupBreakpointLocationsById(breakpointLocations);
     const locationIdsByLineId = this.#getLocationIdsByLineId(breakpointLocations);
 
-    const content = await this.#getContent(locationsGroupedById);
-    const selectedUILocation = await this.#getHitUILocation();
+    const [content, selectedUILocation] = await Promise.all([
+      this.#getContent(locationsGroupedById),
+      this.#getHitUILocation(),
+    ]);
 
     const urlToGroup = new Map<Platform.DevToolsPath.UrlString, SourcesComponents.BreakpointsView.BreakpointGroup>();
 
@@ -90,26 +249,107 @@ export class BreakpointsSidebarController implements UI.ContextFlavorListener.Co
 
       const numBreakpointsOnLine = locationIdsByLineId.get(uiLocation.lineId()).size;
       const showColumn = numBreakpointsOnLine > 1;
-      const locationText = uiLocation.lineAndColumnText(showColumn);
+      const locationText = uiLocation.lineAndColumnText(showColumn) as string;
 
-      const text = (content[idx] as TextUtils.Text.Text);
+      const text = content[idx];
       const codeSnippet = text.lineAt(uiLocation.lineNumber);
 
+      if (isHit && this.#collapsedFiles.has(sourceURL)) {
+        this.#collapsedFiles.delete(sourceURL);
+        this.#saveSettings();
+      }
+      const expanded = !this.#collapsedFiles.has(sourceURL);
+
       const status: SourcesComponents.BreakpointsView.BreakpointStatus = this.#getBreakpointState(locations);
-      const item = {location: locationText, codeSnippet, isHit, status} as
-          SourcesComponents.BreakpointsView.BreakpointItem;
+      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 = urlToGroup.get(sourceURL);
       if (group) {
         group.breakpointItems.push(item);
+        group.expanded ||= expanded;
       } else {
-        group =
-            {url: sourceURL, name: uiLocation.uiSourceCode.displayName(), expanded: true, breakpointItems: [item]} as
-            SourcesComponents.BreakpointsView.BreakpointGroup;
+        const editable = this.#breakpointManager.supportsConditionalBreakpoints(uiLocation.uiSourceCode);
+        group = {
+          url: sourceURL,
+          name: uiLocation.uiSourceCode.displayName(),
+          editable,
+          expanded,
+          breakpointItems: [item],
+        };
         urlToGroup.set(sourceURL, group);
       }
     }
-    return {groups: Array.from(urlToGroup.values())};
+    return {
+      breakpointsActive,
+      pauseOnCaughtExceptions,
+      pauseOnExceptions,
+      groups: Array.from(urlToGroup.values()),
+    };
+  }
+
+  #onBreakpointAdded(event: Common.EventTarget.EventTargetEvent<Bindings.BreakpointManager.BreakpointLocation>):
+      Promise<void> {
+    const breakpoint = event.data.breakpoint;
+    if (breakpoint.origin === Bindings.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<Bindings.BreakpointManager.BreakpointLocation>):
+      Promise<void> {
+    const breakpoint = event.data.breakpoint;
+    if (this.#collapsedFiles.has(breakpoint.url())) {
+      const locations = Bindings.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: Bindings.BreakpointManager.BreakpointLocation[]):
+      {type: SourcesComponents.BreakpointsView.BreakpointType, hoverText?: string} {
+    const breakpointWithCondition = locations.find(location => Boolean(location.breakpoint.condition()));
+    let hoverText = breakpointWithCondition?.breakpoint.condition();
+    let type = SourcesComponents.BreakpointsView.BreakpointType.REGULAR_BREAKPOINT;
+    if (breakpointWithCondition && hoverText) {
+      if (hoverText.startsWith(LogpointPrefix) && hoverText.endsWith(LogpointSuffix)) {
+        type = SourcesComponents.BreakpointsView.BreakpointType.LOGPOINT;
+        hoverText = hoverText.slice(LogpointPrefix.length, hoverText.length - LogpointSuffix.length);
+      } else {
+        type = SourcesComponents.BreakpointsView.BreakpointType.CONDITIONAL_BREAKPOINT;
+      }
+    }
+    return {type, hoverText};
+  }
+
+  #getLocationsForBreakpointItem(breakpointItem: SourcesComponents.BreakpointsView.BreakpointItem):
+      Bindings.BreakpointManager.BreakpointLocation[] {
+    const locations = this.#breakpointItemToLocationMap.get(breakpointItem);
+    assertNotNullOrUndefined(locations);
+    return locations;
   }
 
   async #getHitUILocation(): Promise<Workspace.UISourceCode.UILocation|null> {

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -600,10 +600,19 @@ export class Item {
   static async createForDebuggerCallFrame(
       frame: SDK.DebuggerModel.CallFrame, locationPool: Bindings.LiveLocation.LiveLocationPool,
       updateDelegate: (arg0: Item) => void): Promise<Item> {
-    const name = await SourceMapScopes.NamesResolver.resolveFrameFunctionName(frame) ?? frame.functionName;
+    const name = frame.functionName;
     const item = new Item(UI.UIUtils.beautifyFunctionName(name), updateDelegate);
     await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createCallFrameLiveLocation(
         frame.location(), item.update.bind(item), locationPool);
+    void SourceMapScopes.NamesResolver.resolveDebuggerFrameFunctionName(frame).then(functionName => {
+      if (functionName && functionName !== name) {
+        // Just update the item's title and call the update delegate directly,
+        // instead of going through the update method below, since location
+        // didn't change.
+        item.title = functionName;
+        item.updateDelegate(item);
+      }
+    });
     return item;
   }
 

package/front_end/panels/sources/CoveragePlugin.ts

@@ -55,7 +55,7 @@ export class CoveragePlugin extends Plugin {
       void UI.ViewManager.ViewManager.instance().showView('coverage');
     });
 
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
     if (mainTarget) {
       this.model = mainTarget.model(Coverage.CoverageModel.CoverageModel);
       if (this.model) {