chrome-devtools-frontend 1.0.1506453 → 1.0.1510180

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -1,13 +1,10 @@
 // Copyright (c) 2015 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.
-/* eslint-disable rulesdir/no-imperative-dom-api */
 
-import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import type * as Protocol from '../../generated/protocol.js';
 import * as Sources from '../../panels/sources/sources.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -129,108 +126,179 @@ const str_ = i18n.i18n.registerUIStrings('panels/browser_debugger/CategorizedBre
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
-const {html, render} = Lit;
+const {html, render, Directives: {ref}} = Lit;
 
+interface ViewOutput {
+  defaultFocus: Element|undefined;
+  userExpandedCategories: Set<SDK.CategorizedBreakpoint.Category>;
+}
 interface ViewInput {
-  onFilterChanged: (ev: CustomEvent<string|null>) => void;
+  onFilterChanged: (filterText: string|null) => void;
+  onBreakpointChange: (breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint, enabled: boolean) => void;
+
+  filterText: string|null;
+  userExpandedCategories: Set<SDK.CategorizedBreakpoint.Category>;
+  highlightedItem: SDK.CategorizedBreakpoint.CategorizedBreakpoint|null;
+  categories: Map<SDK.CategorizedBreakpoint.Category, SDK.CategorizedBreakpoint.CategorizedBreakpoint[]>;
+  sortedCategoryNames: SDK.CategorizedBreakpoint.Category[];
 }
 
-type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+export type View = typeof DEFAULT_VIEW;
+export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
+  const shouldExpandCategory = (breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[]): boolean =>
+      Boolean(input.filterText) || (input.highlightedItem && breakpoints.includes(input.highlightedItem)) ||
+      breakpoints.some(breakpoint => breakpoint.enabled());
+  const filter = (breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint): boolean => !input.filterText ||
+      Boolean(Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name).match(input.filterText)) ||
+      breakpoint === input.highlightedItem;
+  const filteredCategories =
+      input.sortedCategoryNames.values()
+          .map(category => [category, input.categories.get(category)?.filter(filter)])
+          .filter(
+              (filteredCategory): filteredCategory is
+                  [SDK.CategorizedBreakpoint.Category, SDK.CategorizedBreakpoint.CategorizedBreakpoint[]] =>
+                      Boolean(filteredCategory[1]?.length))
+          .toArray();
+
+  const onCheckboxClicked =
+      (event: Event, target: SDK.CategorizedBreakpoint.Category|SDK.CategorizedBreakpoint.CategorizedBreakpoint):
+          void => {
+            const eventTarget = event.target;
+            if (!(eventTarget instanceof UI.UIUtils.CheckboxLabel)) {
+              return;
+            }
+
+            const enabled = eventTarget.checked;
+            if (target instanceof SDK.CategorizedBreakpoint.CategorizedBreakpoint) {
+              input.onBreakpointChange(target, enabled);
+            } else {
+              input.categories.get(target)?.forEach(breakpoint => input.onBreakpointChange(breakpoint, enabled));
+            }
+          };
+
+  const {on} = UI.UIUtils.HTMLElementWithLightDOMTemplate;
+  const classes =
+      (breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint): ReturnType<typeof Lit.Directives.classMap> =>
+          Lit.Directives.classMap({
+            small: true,
+            'source-code': true,
+            'breakpoint-hit': input.highlightedItem === breakpoint,
+          });
+  const categoryConfigElements = new WeakMap<HTMLLIElement, SDK.CategorizedBreakpoint.Category>();
+  const trackCategoryConfigElement = (category: SDK.CategorizedBreakpoint.Category): ReturnType<typeof ref> =>
+      ref((e: Element|undefined) => {
+        if (e instanceof HTMLLIElement) {
+          categoryConfigElements.set(e, category);
+        }
+      });
+  const onExpand = ({detail: {expanded, target}}: UI.TreeOutline.TreeViewElement.ExpandEvent): void => {
+    const category = categoryConfigElements.get(target);
+    const breakpoints = category && input.categories.get(category);
+    if (!breakpoints) {
+      return;
+    }
+    if (shouldExpandCategory(breakpoints)) {
+      // Basically ignore expand/collapse when the category is expanded by default.
+      return;
+    }
+    if (expanded) {
+      output.userExpandedCategories.add(category);
+    } else {
+      output.userExpandedCategories.delete(category);
+    }
+  };
 
-const DEFAULT_VIEW = (input: ViewInput, _output: object, target: HTMLElement): void => {
   render(
       // clang-format off
-    html`
+      html`
     <devtools-toolbar jslog=${VisualLogging.toolbar()}>
       <devtools-toolbar-input
         type="filter"
-        @change=${input.onFilterChanged}
+        @change=${(e: CustomEvent<string>) => input.onFilterChanged(e.detail)}
         style="flex: 1;"
         ></devtools-toolbar-input>
-    </devtools-toolbar>`,
+    </devtools-toolbar>
+    <devtools-tree
+      ${ref(e => { output.defaultFocus = e; })}
+      @expand=${onExpand}
+      .template=${html`
+        <ul role="tree">
+          ${filteredCategories.map(([category, breakpoints]) => html`
+            <li
+                role="treeitem"
+                jslog-context=${category}
+                aria-checked=${breakpoints.some(breakpoint => breakpoint.enabled())
+                  ? breakpoints.some(breakpoint => !breakpoint.enabled()) ? 'mixed' : true
+                  : false}
+                ${trackCategoryConfigElement(category)}>
+              <style>${categorizedBreakpointsSidebarPaneStyles}</style>
+              <devtools-checkbox
+                class="small"
+                tabIndex=-1
+                title=${getLocalizedCategory(category)}
+                ?indeterminate=${breakpoints.some(breakpoint => !breakpoint.enabled()) &&
+                                 breakpoints.some(breakpoint => breakpoint.enabled())}
+                ?checked=${!breakpoints.some(breakpoint => !breakpoint.enabled())}
+                @change=${on((e: Event) => onCheckboxClicked(e, category))}
+              >${getLocalizedCategory(category)}</devtools-checkbox>
+              <ul
+                  role="group"
+                  ?hidden=${!shouldExpandCategory(breakpoints) && !input.userExpandedCategories.has(category)}>
+                ${breakpoints.map(breakpoint => html`
+                <li
+                    role="treeitem"
+                    aria-checked=${breakpoint.enabled()}
+                    jslog-context=${Platform.StringUtilities.toKebabCase(breakpoint.name)}>
+                  <div ?hidden=${breakpoint !== input.highlightedItem} class="breakpoint-hit-marker"></div>
+                  <devtools-checkbox
+                    class=${classes(breakpoint)}
+                    tabIndex=-1
+                    title=${Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name)}
+                    ?checked=${breakpoint.enabled()}
+                    aria-description=${breakpoint === input.highlightedItem ? i18nString(UIStrings.breakpointHit)
+                                                                            : Lit.nothing}
+                    @change=${on((e: Event) => onCheckboxClicked(e, breakpoint))}
+                  >${Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name)}</devtools-checkbox>
+                </li>`)}
+              </ul>
+            </li>`)}
+        </ul>
+      `}>
+    </devtools-tree>`,
       // clang-format on
       target);
 };
 
-export class FilterToolbar extends Common.ObjectWrapper.eventMixin<FilterToolbar.EventTypes, typeof UI.Widget.VBox>(
-    UI.Widget.VBox) {
-  readonly #view: View;
-  #filterText: string|null = null;
-  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
-    super(element);
-    this.#view = view;
-
-    this.performUpdate();
-  }
-
-  get filterText(): string|null {
-    return this.#filterText;
-  }
-
-  override performUpdate(): void {
-    const input: ViewInput = {
-      onFilterChanged: e => {
-        this.#filterText = e.detail;
-        this.dispatchEventToListeners(FilterToolbar.Events.FILTER_CHANGED, e.detail);
-      },
-    };
-    this.#view(input, {}, this.contentElement);
-  }
-}
-
-export namespace FilterToolbar {
-  export enum Events {FILTER_CHANGED = 'filter-changed'}
-  export interface EventTypes {
-    [Events.FILTER_CHANGED]: string|null;
-  }
-}
-
 export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
-  readonly #categoriesTreeOutline: UI.TreeOutline.TreeOutlineInShadow;
   readonly #viewId: string;
-  readonly #detailsPausedReason: Protocol.Debugger.PausedEventReason;
-  readonly #categories: Map<SDK.CategorizedBreakpoint.Category, Item>;
-  readonly #breakpoints: Map<SDK.CategorizedBreakpoint.CategorizedBreakpoint, Item>;
-  #highlightedElement?: HTMLLIElement;
+  // A layout test reaches into this
+  private readonly categories =
+      new Map<SDK.CategorizedBreakpoint.Category, SDK.CategorizedBreakpoint.CategorizedBreakpoint[]>();
   #sortedCategories: SDK.CategorizedBreakpoint.Category[];
-  protected readonly filterToolbar: FilterToolbar;
-  #expandedForFilter = new Set<SDK.CategorizedBreakpoint.Category>();
+  #highlightedItem: SDK.CategorizedBreakpoint.CategorizedBreakpoint|null = null;
+  #filterText: string|null = null;
+  #view: View;
+  #userExpandedCategories = new Set<SDK.CategorizedBreakpoint.Category>();
   constructor(
-      breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[], viewId: string,
-      detailsPausedReason: Protocol.Debugger.PausedEventReason) {
-    super({useShadowDom: true});
-    this.filterToolbar = new FilterToolbar();
-    this.filterToolbar.addEventListener(FilterToolbar.Events.FILTER_CHANGED, this.#onFilterChanged.bind(this));
-    this.filterToolbar.show(this.contentElement);
-    this.#categoriesTreeOutline = new UI.TreeOutline.TreeOutlineInShadow();
-    this.#categoriesTreeOutline.registerRequiredCSS(categorizedBreakpointsSidebarPaneStyles);
-
-    this.#categoriesTreeOutline.setShowSelectionOnKeyboardFocus(/* show */ true);
-    this.contentElement.appendChild(this.#categoriesTreeOutline.element);
+      breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[], jslog: string, viewId: string,
+      view = DEFAULT_VIEW) {
+    super({useShadowDom: true, jslog});
+    this.#view = view;
     this.#viewId = viewId;
-    this.#detailsPausedReason = detailsPausedReason;
 
-    const categories = new Set(breakpoints.map(bp => bp.category()));
-    this.#sortedCategories = [...categories].sort((a, b) => {
+    for (const breakpoint of breakpoints) {
+      let categorizedBreakpoints = this.categories.get(breakpoint.category());
+      if (!categorizedBreakpoints) {
+        categorizedBreakpoints = [];
+        this.categories.set(breakpoint.category(), categorizedBreakpoints);
+      }
+      categorizedBreakpoints.push(breakpoint);
+    }
+    this.#sortedCategories = [...this.categories.keys()].sort((a, b) => {
       const categoryA = getLocalizedCategory(a);
       const categoryB = getLocalizedCategory(b);
       return categoryA.localeCompare(categoryB, i18n.DevToolsLocale.DevToolsLocale.instance().locale);
     });
-    this.#categories = new Map();
-    for (const category of this.#sortedCategories) {
-      this.createCategory(category);
-    }
-    if (this.#sortedCategories.length > 0) {
-      const firstCategory = this.#categories.get(this.#sortedCategories[0]);
-      if (firstCategory) {
-        firstCategory.element.select();
-      }
-    }
-
-    this.#breakpoints = new Map();
-    for (const breakpoint of breakpoints) {
-      this.createBreakpoint(breakpoint);
-    }
 
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.DebuggerPaused, this.update, this);
@@ -238,80 +306,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
         SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.DebuggerResumed, this.update, this);
     UI.Context.Context.instance().addFlavorChangeListener(SDK.Target.Target, this.update, this);
 
-    this.populate();
-  }
-
-  get categories(): Map<SDK.CategorizedBreakpoint.Category, Item> {
-    return this.#categories;
-  }
-
-  get breakpoints(): Map<SDK.CategorizedBreakpoint.CategorizedBreakpoint, Item> {
-    return this.#breakpoints;
-  }
-
-  protected get treeOutline(): UI.TreeOutline.TreeOutline {
-    return this.#categoriesTreeOutline;
-  }
-
-  override focus(): void {
-    this.#categoriesTreeOutline.forceSelect();
-  }
-
-  private handleSpaceKeyEventOnBreakpoint(event: KeyboardEvent, breakpoint?: Item): void {
-    if (event && event.key === ' ') {
-      if (breakpoint) {
-        breakpoint.checkbox.click();
-      }
-      event.consume(true);
-    }
-  }
-
-  private createCategory(name: SDK.CategorizedBreakpoint.Category): void {
-    const labelNode =
-        UI.UIUtils.CheckboxLabel.create(getLocalizedCategory(name), undefined, undefined, name, /* small */ true);
-    labelNode.addEventListener('click', this.categoryCheckboxClicked.bind(this, name), true);
-    labelNode.tabIndex = -1;
-
-    const treeElement = new UI.TreeOutline.TreeElement(labelNode, undefined, name);
-    treeElement.listItemElement.addEventListener('keydown', event => {
-      this.handleSpaceKeyEventOnBreakpoint(event, this.#categories.get(name));
-    });
-
-    labelNode.addEventListener('keydown', event => {
-      treeElement.listItemElement.focus();
-      this.handleSpaceKeyEventOnBreakpoint(event, this.#categories.get(name));
-    });
-
-    UI.ARIAUtils.setChecked(treeElement.listItemElement, false);
-
-    this.#categories.set(name, {element: treeElement, checkbox: labelNode, category: name});
-  }
-
-  protected createBreakpoint(breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint): void {
-    const labelNode = UI.UIUtils.CheckboxLabel.create(
-        Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name), undefined, undefined,
-        Platform.StringUtilities.toKebabCase(breakpoint.name), /* small */ true);
-    labelNode.classList.add('source-code', 'breakpoint');
-    labelNode.addEventListener('click', this.breakpointCheckboxClicked.bind(this, breakpoint), true);
-    labelNode.tabIndex = -1;
-
-    const treeElement =
-        new UI.TreeOutline.TreeElement(labelNode, undefined, Platform.StringUtilities.toKebabCase(breakpoint.name));
-    treeElement.listItemElement.addEventListener('keydown', event => {
-      this.handleSpaceKeyEventOnBreakpoint(event, this.#breakpoints.get(breakpoint));
-    });
-
-    labelNode.addEventListener('keydown', event => {
-      treeElement.listItemElement.focus();
-      this.handleSpaceKeyEventOnBreakpoint(event, this.#breakpoints.get(breakpoint));
-    });
-
-    UI.ARIAUtils.setChecked(treeElement.listItemElement, false);
-    treeElement.listItemElement.createChild('div', 'breakpoint-hit-marker');
-    const category = this.#categories.get(breakpoint.category());
-    if (category) {
-      this.#breakpoints.set(breakpoint, {element: treeElement, checkbox: labelNode, category: category.category});
-    }
+    this.requestUpdate();
   }
 
   protected getBreakpointFromPausedDetails(_details: SDK.DebuggerModel.DebuggerPausedDetails):
@@ -324,140 +319,47 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     const debuggerModel = target ? target.model(SDK.DebuggerModel.DebuggerModel) : null;
     const details = debuggerModel ? debuggerModel.debuggerPausedDetails() : null;
 
-    if (!details || details.reason !== this.#detailsPausedReason || !details.auxData) {
-      if (this.#highlightedElement) {
-        UI.ARIAUtils.setDescription(this.#highlightedElement, '');
-        this.#highlightedElement.classList.remove('breakpoint-hit');
-        this.#highlightedElement = undefined;
-      }
-      return;
-    }
-    const breakpoint = this.getBreakpointFromPausedDetails(details);
+    const breakpoint = details && this.getBreakpointFromPausedDetails(details);
+    this.#highlightedItem = breakpoint;
     if (!breakpoint) {
       return;
     }
 
     void UI.ViewManager.ViewManager.instance().showView(this.#viewId);
-    const category = this.#categories.get(breakpoint.category());
-    if (category) {
-      category.element.expand();
-      this.#expandedForFilter.delete(category.category);
-    }
-    const matchingBreakpoint = this.#breakpoints.get(breakpoint);
-    if (matchingBreakpoint) {
-      this.#highlightedElement = matchingBreakpoint.element.listItemElement;
-      UI.ARIAUtils.setDescription(this.#highlightedElement, i18nString(UIStrings.breakpointHit));
-      this.#highlightedElement.classList.add('breakpoint-hit');
-    }
-
-    this.populate(this.filterToolbar.filterText);
-  }
 
-  #onFilterChanged(e: Common.EventTarget.EventTargetEvent<string|null>): void {
-    this.populate(e.data);
-  }
-
-  protected populate(filterText: string|null = null): void {
-    this.#categoriesTreeOutline.removeChildren();
-    for (const category of this.#sortedCategories) {
-      this.categories.get(category)?.element.removeChildren();
-    }
-    const nonEmptyCategories = new Set<SDK.CategorizedBreakpoint.Category>();
-    for (const [breakpoint, item] of this.#breakpoints) {
-      if (!filterText || breakpoint.name.match(filterText) ||
-          item.element.listItemElement === this.#highlightedElement) {
-        const categoryItem = this.categories.get(breakpoint.category());
-        if (!categoryItem) {
-          continue;
-        }
-        if (!nonEmptyCategories.has(breakpoint.category())) {
-          nonEmptyCategories.add(breakpoint.category());
-        }
-        categoryItem.element.appendChild(item.element);
-      }
-    }
-
-    for (const category of this.#sortedCategories) {
-      if (nonEmptyCategories.has(category)) {
-        const treeElement = (this.categories.get(category) as Item).element;
-        this.#categoriesTreeOutline.appendChild(treeElement);
-        if (filterText && !treeElement.expanded) {
-          this.#expandedForFilter.add(category);
-          treeElement.expand();
-        } else if (!filterText && this.#expandedForFilter.has(category)) {
-          this.#expandedForFilter.delete(category);
-          treeElement.collapse();
-        }
-      }
-    }
+    this.requestUpdate();
   }
 
-  // Probably can be kept although eventListener does not call this._breakpointCheckboxClicke
-  private categoryCheckboxClicked(category: SDK.CategorizedBreakpoint.Category): void {
-    const item = this.#categories.get(category);
-    if (!item) {
-      return;
-    }
-
-    const enabled = item.checkbox.checked;
-    UI.ARIAUtils.setChecked(item.element.listItemElement, enabled);
-
-    for (const [breakpoint, treeItem] of this.#breakpoints) {
-      if (breakpoint.category() === category) {
-        const matchingBreakpoint = this.#breakpoints.get(breakpoint);
-        if (matchingBreakpoint) {
-          matchingBreakpoint.checkbox.checked = enabled;
-          this.toggleBreakpoint(breakpoint, enabled);
-          UI.ARIAUtils.setChecked(treeItem.element.listItemElement, enabled);
-        }
-      }
-    }
+  #onFilterChanged(filterText: string|null): void {
+    this.#filterText = filterText;
+    this.requestUpdate();
   }
 
-  protected toggleBreakpoint(breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint, enabled: boolean): void {
+  protected onBreakpointChanged(breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint, enabled: boolean): void {
     breakpoint.setEnabled(enabled);
+    this.requestUpdate();
   }
 
-  private breakpointCheckboxClicked(breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint): void {
-    const item = this.#breakpoints.get(breakpoint);
-    if (!item) {
-      return;
-    }
-
-    this.toggleBreakpoint(breakpoint, item.checkbox.checked);
-    UI.ARIAUtils.setChecked(item.element.listItemElement, item.checkbox.checked);
-
-    // Put the rest in a separate function
-    let hasEnabled = false;
-    let hasDisabled = false;
-    for (const other of this.#breakpoints.keys()) {
-      if (other.category() === breakpoint.category()) {
-        if (other.enabled()) {
-          hasEnabled = true;
-        } else {
-          hasDisabled = true;
-        }
-      }
-    }
-
-    const category = this.#categories.get(breakpoint.category());
-    if (!category) {
-      return;
-    }
-    category.checkbox.checked = hasEnabled;
-    category.checkbox.indeterminate = hasEnabled && hasDisabled;
-    if (category.checkbox.indeterminate) {
-      UI.ARIAUtils.setCheckboxAsIndeterminate(category.element.listItemElement);
-    } else {
-      UI.ARIAUtils.setChecked(category.element.listItemElement, hasEnabled);
-    }
+  override performUpdate(): void {
+    const input: ViewInput = {
+      filterText: this.#filterText,
+      onFilterChanged: this.#onFilterChanged.bind(this),
+      onBreakpointChange: this.onBreakpointChanged.bind(this),
+      sortedCategoryNames: this.#sortedCategories,
+      categories: this.categories,
+      highlightedItem: this.#highlightedItem,
+      userExpandedCategories: this.#userExpandedCategories,
+    };
+    const that = this;
+    const output: ViewOutput = {
+      set defaultFocus(e: Element|undefined) {
+        that.setDefaultFocusedElement(e ?? null);
+      },
+      userExpandedCategories: this.#userExpandedCategories,
+    };
+    this.#view(input, output, this.contentElement);
   }
 }
-export interface Item {
-  element: UI.TreeOutline.TreeElement;
-  checkbox: UI.UIUtils.CheckboxLabel;
-  category: SDK.CategorizedBreakpoint.Category;
-}
 
 const LOCALIZED_CATEGORIES: Record<SDK.CategorizedBreakpoint.Category, () => Platform.UIString.LocalizedString> = {
   [SDK.CategorizedBreakpoint.Category.ANIMATION]: i18nLazyString(UIStrings.animation),

package/front_end/panels/browser_debugger/EventListenerBreakpointsSidebarPane.ts

@@ -1,10 +1,8 @@
 // Copyright (c) 2015 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.
-/* eslint-disable rulesdir/no-imperative-dom-api */
 
 import * as SDK from '../../core/sdk/sdk.js';
-import * as Protocol from '../../generated/protocol.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {CategorizedBreakpointsSidebarPane} from './CategorizedBreakpointsSidebarPane.js';
@@ -18,8 +16,9 @@ export class EventListenerBreakpointsSidebarPane extends CategorizedBreakpointsS
     const nonDomBreakpoints = SDK.EventBreakpointsModel.EventBreakpointsManager.instance().eventListenerBreakpoints();
     breakpoints = breakpoints.concat(nonDomBreakpoints);
 
-    super(breakpoints, 'sources.event-listener-breakpoints', Protocol.Debugger.PausedEventReason.EventListener);
-    this.contentElement.setAttribute('jslog', `${VisualLogging.section('sources.event-listener-breakpoints')}`);
+    super(
+        breakpoints, `${VisualLogging.section('sources.event-listener-breakpoints')}`,
+        'sources.event-listener-breakpoints');
   }
 
   static instance(): EventListenerBreakpointsSidebarPane {
@@ -31,8 +30,12 @@ export class EventListenerBreakpointsSidebarPane extends CategorizedBreakpointsS
 
   override getBreakpointFromPausedDetails(details: SDK.DebuggerModel.DebuggerPausedDetails):
       SDK.CategorizedBreakpoint.CategorizedBreakpoint|null {
-    const auxData = details.auxData as SDK.DebuggerModel.EventListenerPausedDetailsAuxData;
-    const domBreakpoint = SDK.DOMDebuggerModel.DOMDebuggerManager.instance().resolveEventListenerBreakpoint(auxData);
+    const auxData = details.auxData as SDK.DebuggerModel.EventListenerPausedDetailsAuxData | undefined;
+    if (!auxData) {
+      return null;
+    }
+    const domBreakpoint =
+        auxData && SDK.DOMDebuggerModel.DOMDebuggerManager.instance().resolveEventListenerBreakpoint(auxData);
     if (domBreakpoint) {
       return domBreakpoint;
     }

package/front_end/panels/browser_debugger/categorizedBreakpointsSidebarPane.css

@@ -32,7 +32,7 @@
   color: var(--sys-color-on-yellow-container);
 }
 
-.breakpoint-hit .breakpoint-hit-marker {
+.breakpoint-hit-marker {
   background-color: var(--sys-color-yellow-container);
   border-right: 3px solid var(--sys-color-yellow-outline);
   color: var(--sys-color-on-yellow-container);