chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -3,12 +3,15 @@
 // 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';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import categorizedBreakpointsSidebarPaneStyles from './categorizedBreakpointsSidebarPane.css.js';
 
@@ -18,19 +21,19 @@ const UIStrings = {
    */
   auctionWorklet: 'Ad Auction Worklet',
   /**
-   *@description Text that refers to the animation of the web page
+   * @description Text that refers to the animation of the web page
    */
   animation: 'Animation',
   /**
-   *@description Screen reader description of a hit breakpoint in the Sources panel
+   * @description Screen reader description of a hit breakpoint in the Sources panel
    */
   breakpointHit: 'breakpoint hit',
   /**
-   *@description Text in DOMDebugger Model
+   * @description Text in DOMDebugger Model
    */
   canvas: 'Canvas',
   /**
-   *@description Text in DOMDebugger Model
+   * @description Text in DOMDebugger Model
    */
   clipboard: 'Clipboard',
   /**
@@ -38,87 +41,87 @@ const UIStrings = {
    */
   control: 'Control',
   /**
-   *@description Text that refers to device such as a phone
+   * @description Text that refers to device such as a phone
    */
   device: 'Device',
   /**
-   *@description Text in DOMDebugger Model
+   * @description Text in DOMDebugger Model
    */
   domMutation: 'DOM Mutation',
   /**
-   *@description Text in DOMDebugger Model
+   * @description Text in DOMDebugger Model
    */
   dragDrop: 'Drag / drop',
   /**
-   *@description Title for a group of cities
+   * @description Title for a group of cities
    */
   geolocation: 'Geolocation',
   /**
-   *@description Text in DOMDebugger Model
+   * @description Text in DOMDebugger Model
    */
   keyboard: 'Keyboard',
   /**
-   *@description Text to load something
+   * @description Text to load something
    */
   load: 'Load',
   /**
-   *@description Text that appears on a button for the media resource type filter.
+   * @description Text that appears on a button for the media resource type filter.
    */
   media: 'Media',
   /**
-   *@description Text in DOMDebugger Model
+   * @description Text in DOMDebugger Model
    */
   mouse: 'Mouse',
   /**
-   *@description Text in DOMDebugger Model
+   * @description Text in DOMDebugger Model
    */
   notification: 'Notification',
   /**
-   *@description Text to parse something
+   * @description Text to parse something
    */
   parse: 'Parse',
   /**
-   *@description Text in DOMDebugger Model
+   * @description Text in DOMDebugger Model
    */
   pictureinpicture: 'Picture-in-Picture',
   /**
-   *@description Text in DOMDebugger Model
+   * @description Text in DOMDebugger Model
    */
   pointer: 'Pointer',
   /**
-   *@description Label for a group of JavaScript files
+   * @description Label for a group of JavaScript files
    */
   script: 'Script',
   /**
-   *@description Category of breakpoints
+   * @description Category of breakpoints
    */
   sharedStorageWorklet: 'Shared Storage Worklet',
   /**
-   *@description Text in DOMDebugger Model
+   * @description Text in DOMDebugger Model
    */
   timer: 'Timer',
   /**
-   *@description Text for the touch type to simulate on a device
+   * @description Text for the touch type to simulate on a device
    */
   touch: 'Touch',
   /**
-   *@description Title for a category of breakpoints on Trusted Type violations
+   * @description Title for a category of breakpoints on Trusted Type violations
    */
   trustedTypeViolations: 'Trusted Type Violations',
   /**
-   *@description Title of the WebAudio tool
+   * @description Title of the WebAudio tool
    */
   webaudio: 'WebAudio',
   /**
-   *@description Text in DOMDebugger Model
+   * @description Text in DOMDebugger Model
    */
   window: 'Window',
   /**
-   *@description Text for the service worker type.
+   * @description Text for the service worker type.
    */
   worker: 'Worker',
   /**
-   *@description Text that appears on a button for the xhr resource type filter.
+   * @description Text that appears on a button for the xhr resource type filter.
    */
   xhr: 'XHR',
 } as const;
@@ -126,6 +129,62 @@ 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;
+
+interface ViewInput {
+  onFilterChanged: (ev: CustomEvent<string|null>) => void;
+}
+
+type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+
+const DEFAULT_VIEW = (input: ViewInput, _output: object, target: HTMLElement): void => {
+  render(
+      // clang-format off
+    html`
+    <devtools-toolbar jslog=${VisualLogging.toolbar()}>
+      <devtools-toolbar-input
+        type="filter"
+        @change=${input.onFilterChanged}
+        style="flex: 1;"
+        ></devtools-toolbar-input>
+    </devtools-toolbar>`,
+      // 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;
@@ -133,10 +192,16 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
   readonly #categories: Map<SDK.CategorizedBreakpoint.Category, Item>;
   readonly #breakpoints: Map<SDK.CategorizedBreakpoint.CategorizedBreakpoint, Item>;
   #highlightedElement?: HTMLLIElement;
+  #sortedCategories: SDK.CategorizedBreakpoint.Category[];
+  protected readonly filterToolbar: FilterToolbar;
+  #expandedForFilter = new Set<SDK.CategorizedBreakpoint.Category>();
   constructor(
       breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[], viewId: string,
       detailsPausedReason: Protocol.Debugger.PausedEventReason) {
-    super(true);
+    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);
 
@@ -146,17 +211,17 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     this.#detailsPausedReason = detailsPausedReason;
 
     const categories = new Set(breakpoints.map(bp => bp.category()));
-    const sortedCategories = [...categories].sort((a, b) => {
+    this.#sortedCategories = [...categories].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 sortedCategories) {
+    for (const category of this.#sortedCategories) {
       this.createCategory(category);
     }
-    if (sortedCategories.length > 0) {
-      const firstCategory = this.#categories.get(sortedCategories[0]);
+    if (this.#sortedCategories.length > 0) {
+      const firstCategory = this.#categories.get(this.#sortedCategories[0]);
       if (firstCategory) {
         firstCategory.element.select();
       }
@@ -172,6 +237,8 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     SDK.TargetManager.TargetManager.instance().addModelListener(
         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> {
@@ -182,6 +249,10 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     return this.#breakpoints;
   }
 
+  protected get treeOutline(): UI.TreeOutline.TreeOutline {
+    return this.#categoriesTreeOutline;
+  }
+
   override focus(): void {
     this.#categoriesTreeOutline.forceSelect();
   }
@@ -212,9 +283,8 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     });
 
     UI.ARIAUtils.setChecked(treeElement.listItemElement, false);
-    this.#categoriesTreeOutline.appendChild(treeElement);
 
-    this.#categories.set(name, {element: treeElement, checkbox: labelNode});
+    this.#categories.set(name, {element: treeElement, checkbox: labelNode, category: name});
   }
 
   protected createBreakpoint(breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint): void {
@@ -240,10 +310,8 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     treeElement.listItemElement.createChild('div', 'breakpoint-hit-marker');
     const category = this.#categories.get(breakpoint.category());
     if (category) {
-      category.element.appendChild(treeElement);
+      this.#breakpoints.set(breakpoint, {element: treeElement, checkbox: labelNode, category: category.category});
     }
-    // Better to return that to produce a side-effect
-    this.#breakpoints.set(breakpoint, {element: treeElement, checkbox: labelNode});
   }
 
   protected getBreakpointFromPausedDetails(_details: SDK.DebuggerModel.DebuggerPausedDetails):
@@ -273,6 +341,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     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) {
@@ -280,6 +349,47 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
       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();
+        }
+      }
+    }
   }
 
   // Probably can be kept although eventListener does not call this._breakpointCheckboxClicke
@@ -346,6 +456,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
 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> = {

package/front_end/panels/browser_debugger/DOMBreakpointsSidebarPane.ts

@@ -43,73 +43,73 @@ import domBreakpointsSidebarPaneStyles from './domBreakpointsSidebarPane.css.js'
 
 const UIStrings = {
   /**
-   *@description Header text to indicate there are no breakpoints
+   * @description Header text to indicate there are no breakpoints
    */
   noBreakpoints: 'No DOM breakpoints',
   /**
-   *@description DOM breakpoints description that shows if no DOM breakpoints are set
+   * @description DOM breakpoints description that shows if no DOM breakpoints are set
    */
   domBreakpointsDescription: 'DOM breakpoints pause on the code that changes a DOM node or its children.',
   /**
-   *@description Accessibility label for the DOM breakpoints list in the Sources panel
+   * @description Accessibility label for the DOM breakpoints list in the Sources panel
    */
   domBreakpointsList: 'DOM Breakpoints list',
   /**
-   *@description Text with two placeholders separated by a colon
-   *@example {Node removed} PH1
-   *@example {div#id1} PH2
+   * @description Text with two placeholders separated by a colon
+   * @example {Node removed} PH1
+   * @example {div#id1} PH2
    */
   sS: '{PH1}: {PH2}',
   /**
-   *@description Text with three placeholders separated by a colon and a comma
-   *@example {Node removed} PH1
-   *@example {div#id1} PH2
-   *@example {checked} PH3
+   * @description Text with three placeholders separated by a colon and a comma
+   * @example {Node removed} PH1
+   * @example {div#id1} PH2
+   * @example {checked} PH3
    */
   sSS: '{PH1}: {PH2}, {PH3}',
   /**
-   *@description Text exposed to screen readers on checked items.
+   * @description Text exposed to screen readers on checked items.
    */
   checked: 'checked',
   /**
-   *@description Accessible text exposed to screen readers when the screen reader encounters an unchecked checkbox.
+   * @description Accessible text exposed to screen readers when the screen reader encounters an unchecked checkbox.
    */
   unchecked: 'unchecked',
   /**
-   *@description Accessibility label for hit breakpoints in the Sources panel.
-   *@example {checked} PH1
+   * @description Accessibility label for hit breakpoints in the Sources panel.
+   * @example {checked} PH1
    */
   sBreakpointHit: '{PH1} breakpoint hit',
   /**
-   *@description Screen reader description of a hit breakpoint in the Sources panel
+   * @description Screen reader description of a hit breakpoint in the Sources panel
    */
   breakpointHit: 'breakpoint hit',
   /**
-   *@description A context menu item in the DOM Breakpoints sidebar that reveals the node on which the current breakpoint is set.
+   * @description A context menu item in the DOM Breakpoints sidebar that reveals the node on which the current breakpoint is set.
    */
   revealDomNodeInElementsPanel: 'Reveal DOM node in Elements panel',
   /**
-   *@description Text to remove a breakpoint
+   * @description Text to remove a breakpoint
    */
   removeBreakpoint: 'Remove breakpoint',
   /**
-   *@description A context menu item in the DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
+   * @description A context menu item in the DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
    */
   removeAllDomBreakpoints: 'Remove all DOM breakpoints',
   /**
-   *@description Text in DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
+   * @description Text in DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
    */
   subtreeModified: 'Subtree modified',
   /**
-   *@description Text in DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
+   * @description Text in DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
    */
   attributeModified: 'Attribute modified',
   /**
-   *@description Text in DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
+   * @description Text in DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
    */
   nodeRemoved: 'Node removed',
   /**
-   *@description Entry in context menu of the elements pane, allowing developers to select a DOM
+   * @description Entry in context menu of the elements pane, allowing developers to select a DOM
    * breakpoint for the element that they have right-clicked on. Short for the action 'set a
    * breakpoint on this DOM Element'. A breakpoint pauses the website when the code reaches a
    * specified line, or when a specific action happen (in this case, when the DOM Element is
@@ -117,11 +117,11 @@ const UIStrings = {
    */
   breakOn: 'Break on',
   /**
-   *@description Screen reader description for removing a DOM breakpoint.
+   * @description Screen reader description for removing a DOM breakpoint.
    */
   breakpointRemoved: 'Breakpoint removed',
   /**
-   *@description Screen reader description for setting a DOM breakpoint.
+   * @description Screen reader description for setting a DOM breakpoint.
    */
   breakpointSet: 'Breakpoint set',
 } as const;
@@ -143,7 +143,7 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
   #highlightedBreakpoint: SDK.DOMDebuggerModel.DOMBreakpoint|null;
 
   private constructor() {
-    super(true);
+    super({useShadowDom: true});
     this.registerRequiredCSS(domBreakpointsSidebarPaneStyles);
 
     this.elementToCheckboxes = new WeakMap();
@@ -422,10 +422,10 @@ export class ContextMenuProvider implements UI.ContextMenu.Provider<SDK.DOMModel
       const labelString = label ? label() : '';
       if (domDebuggerModel.hasDOMBreakpoint(node, type)) {
         domDebuggerModel.removeDOMBreakpoint(node, type);
-        UI.ARIAUtils.alert(`${i18nString(UIStrings.breakpointRemoved)}: ${labelString}`);
+        UI.ARIAUtils.LiveAnnouncer.alert(`${i18nString(UIStrings.breakpointRemoved)}: ${labelString}`);
       } else {
         domDebuggerModel.setDOMBreakpoint(node, type);
-        UI.ARIAUtils.alert(`${i18nString(UIStrings.breakpointSet)}: ${labelString}`);
+        UI.ARIAUtils.LiveAnnouncer.alert(`${i18nString(UIStrings.breakpointSet)}: ${labelString}`);
       }
     }
 

package/front_end/panels/browser_debugger/ObjectEventListenersSidebarPane.ts

@@ -20,8 +20,9 @@ export class ObjectEventListenersSidebarPane extends UI.ThrottledWidget.Throttle
     super();
     this.contentElement.setAttribute('jslog', `${VisualLogging.section('sources.global-listeners')}`);
 
-    this.eventListenersView = new EventListeners.EventListenersView.EventListenersView(
-        this.update.bind(this), /* enableDefaultTreeFocus */ true);
+    this.eventListenersView = new EventListeners.EventListenersView.EventListenersView();
+    this.eventListenersView.changeCallback = this.update.bind(this);
+    this.eventListenersView.enableDefaultTreeFocus = true;
     this.eventListenersView.show(this.element);
     this.setDefaultFocusedChild(this.eventListenersView);
     this.update();

package/front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts

@@ -14,48 +14,48 @@ import xhrBreakpointsSidebarPaneStyles from './xhrBreakpointsSidebarPane.css.js'
 
 const UIStrings = {
   /**
-   *@description Title of the 'XHR/fetch Breakpoints' tool in the bottom sidebar of the Sources tool
+   * @description Title of the 'XHR/fetch Breakpoints' tool in the bottom sidebar of the Sources tool
    */
   xhrfetchBreakpoints: 'XHR/fetch Breakpoints',
   /**
-   *@description Text to indicate there are no breakpoints
+   * @description Text to indicate there are no breakpoints
    */
   noBreakpoints: 'No breakpoints',
   /**
-   *@description Label for a button in the Sources panel that opens the input field to create a new XHR/fetch breakpoint.
+   * @description Label for a button in the Sources panel that opens the input field to create a new XHR/fetch breakpoint.
    */
   addXhrfetchBreakpoint: 'Add XHR/fetch breakpoint',
   /**
-   *@description Text to add a breakpoint
+   * @description Text to add a breakpoint
    */
   addBreakpoint: 'Add breakpoint',
   /**
-   *@description Input element container text content in XHRBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
+   * @description Input element container text content in XHRBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
    */
   breakWhenUrlContains: 'Break when URL contains:',
   /**
-   *@description Accessible label for XHR/fetch breakpoint text input
+   * @description Accessible label for XHR/fetch breakpoint text input
    */
   urlBreakpoint: 'URL Breakpoint',
   /**
-   *@description Text in XHRBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
-   *@example {example.com} PH1
+   * @description Text in XHRBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
+   * @example {example.com} PH1
    */
   urlContainsS: 'URL contains "{PH1}"',
   /**
-   *@description Text in XHRBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
+   * @description Text in XHRBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
    */
   anyXhrOrFetch: 'Any XHR or fetch',
   /**
-   *@description Screen reader description of a hit breakpoint in the Sources panel
+   * @description Screen reader description of a hit breakpoint in the Sources panel
    */
   breakpointHit: 'breakpoint hit',
   /**
-   *@description Text to remove all breakpoints
+   * @description Text to remove all breakpoints
    */
   removeAllBreakpoints: 'Remove all breakpoints',
   /**
-   *@description Text to remove a breakpoint
+   * @description Text to remove a breakpoint
    */
   removeBreakpoint: 'Remove breakpoint',
 } as const;
@@ -80,12 +80,14 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
   #hitBreakpoint?: any;
 
   private constructor() {
-    super(true);
+    super({
+      jslog: `${VisualLogging.section('source.xhr-breakpoints')}`,
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(xhrBreakpointsSidebarPaneStyles);
 
     this.#breakpoints = new UI.ListModel.ListModel();
     this.#list = new UI.ListControl.ListControl(this.#breakpoints, this, UI.ListControl.ListMode.NonViewport);
-    this.contentElement.setAttribute('jslog', `${VisualLogging.section('source.xhr-breakpoints')}`);
     this.contentElement.appendChild(this.#list.element);
     this.#list.element.classList.add('breakpoint-list', 'hidden');
     UI.ARIAUtils.markAsList(this.#list.element);

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

@@ -12,71 +12,71 @@ import type * as BrowserDebugger from './browser_debugger.js';
 
 const UIStrings = {
   /**
-   *@description Command for showing the 'Event Listener Breakpoints' tool
+   * @description Command for showing the 'Event Listener Breakpoints' tool
    */
   showEventListenerBreakpoints: 'Show Event Listener Breakpoints',
   /**
-   *@description Title of the 'Event Listener Breakpoints' tool in the bottom sidebar of the Sources tool
+   * @description Title of the 'Event Listener Breakpoints' tool in the bottom sidebar of the Sources tool
    */
   eventListenerBreakpoints: 'Event Listener Breakpoints',
   /**
-   *@description Title for showing the 'CSP Violation Breakpoints' tool in the Sources panel
+   * @description Title for showing the 'CSP Violation Breakpoints' tool in the Sources panel
    */
   showCspViolationBreakpoints: 'Show CSP Violation Breakpoints',
   /**
-   *@description Title of the 'CSP Violation Breakpoints' tool in the bottom sidebar of the Sources tool
+   * @description Title of the 'CSP Violation Breakpoints' tool in the bottom sidebar of the Sources tool
    */
   cspViolationBreakpoints: 'CSP Violation Breakpoints',
   /**
-   *@description Command for showing the 'XHR/fetch Breakpoints' in the sources panel
+   * @description Command for showing the 'XHR/fetch Breakpoints' in the sources panel
    */
   showXhrfetchBreakpoints: 'Show XHR/fetch Breakpoints',
   /**
-   *@description Title of the 'XHR/fetch Breakpoints' tool in the bottom sidebar of the Sources tool
+   * @description Title of the 'XHR/fetch Breakpoints' tool in the bottom sidebar of the Sources tool
    */
   xhrfetchBreakpoints: 'XHR/fetch Breakpoints',
   /**
-   *@description Command for showing the 'DOM Breakpoints' tool in the Elements panel
+   * @description Command for showing the 'DOM Breakpoints' tool in the Elements panel
    */
   showDomBreakpoints: 'Show DOM Breakpoints',
   /**
-   *@description Title of the 'DOM Breakpoints' tool in the bottom sidebar of the Sources tool
+   * @description Title of the 'DOM Breakpoints' tool in the bottom sidebar of the Sources tool
    */
   domBreakpoints: 'DOM Breakpoints',
   /**
-   *@description Command for showing the 'Gobal Listeners' tool in the sources panel
+   * @description Command for showing the 'Global Listeners' tool in the sources panel
    */
   showGlobalListeners: 'Show Global Listeners',
   /**
-   *@description Title of the 'Global Listeners' tool in the bottom sidebar of the Sources tool
+   * @description Title of the 'Global Listeners' tool in the bottom sidebar of the Sources tool
    */
   globalListeners: 'Global Listeners',
   /**
-   *@description Text that refers to one or a group of webpages
+   * @description Text that refers to one or a group of webpages
    */
   page: 'Page',
   /**
-   *@description Command for showing the 'Page' tab in the Sources panel
+   * @description Command for showing the 'Page' tab in the Sources panel
    */
   showPage: 'Show Page',
   /**
-   *@description Title as part of a tool to override existing configurations
+   * @description Title as part of a tool to override existing configurations
    */
   overrides: 'Overrides',
   /**
-   *@description Command for showing the 'Overrides' tool in the Sources panel
+   * @description Command for showing the 'Overrides' tool in the Sources panel
    */
   showOverrides: 'Show Overrides',
   /**
-   *@description Title for a type of source files
+   * @description Title for a type of source files
    */
   contentScripts: 'Content scripts',
   /**
-   *@description Command for showing the 'Content scripts' tool in the sources panel
+   * @description Command for showing the 'Content scripts' tool in the sources panel
    */
   showContentScripts: 'Show Content scripts',
   /**
-   *@description Label for a button in the sources panel that refreshes the list of global event listeners.
+   * @description Label for a button in the sources panel that refreshes the list of global event listeners.
    */
   refreshGlobalListeners: 'Refresh global listeners',
 } as const;