chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/sources/{components/BreakpointsViewUtils.test.ts → BreakpointsViewUtils.test.ts}

@@ -2,9 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Platform from '../../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 
-import * as SourcesComponents from './components.js';
+import * as Sources from './sources.js';
 
 const {urlString} = Platform.DevToolsPath;
 
@@ -13,52 +13,52 @@ describe('getDifferentiatingPathMap', () => {
   const OTHER_FILE_NAME = 'a.js';
 
   it('can extract the differentiating segment if it is the parent folder', () => {
-    const titleInfos: SourcesComponents.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
+    const titleInfos: Sources.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
       ambiguous: ['http://www.google.com/src/a', 'http://www.google.com/src/b', 'http://www.google.com/src/c'],
       nonAmbiguous: [],
     });
-    const differentiatingPathMap = SourcesComponents.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
+    const differentiatingPathMap = Sources.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[0].url), urlString`a/`);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[1].url), urlString`b/`);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[2].url), urlString`c/`);
   });
 
   it('can extract the differentiating segment if it is the direct parent folder', () => {
-    const titleInfos: SourcesComponents.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
+    const titleInfos: Sources.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
       ambiguous: ['http://www.google.com/src/a', 'http://www.google.com/src2/b'],
       nonAmbiguous: [],
     });
 
-    const differentiatingPathMap = SourcesComponents.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
+    const differentiatingPathMap = Sources.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[0].url), urlString`a/`);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[1].url), urlString`b/`);
   });
 
   it('can extract the differentiating segment if it is the parent folder, but has overlapping path prefixes', () => {
-    const titleInfos: SourcesComponents.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
+    const titleInfos: Sources.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
       ambiguous: ['http://www.google.com/src/a', 'http://www.google.com/src2/b', 'http://www.google.com/src2/c'],
       nonAmbiguous: [],
     });
 
-    const differentiatingPathMap = SourcesComponents.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
+    const differentiatingPathMap = Sources.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[0].url), urlString`a/`);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[1].url), urlString`b/`);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[2].url), urlString`c/`);
   });
 
   it('does not output any differentiating segment if the name is unique', () => {
-    const titleInfos: SourcesComponents.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
+    const titleInfos: Sources.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
       ambiguous: ['http://www.google.com/src/a', 'http://www.google.com/src/b'],
       nonAmbiguous: ['http://www.google.com/src/c'],
     });
-    const differentiatingPathMap = SourcesComponents.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
+    const differentiatingPathMap = Sources.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[0].url), urlString`a/`);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[1].url), urlString`b/`);
     assert.isUndefined(differentiatingPathMap.get(titleInfos[2].url));
   });
 
   it('can extract the differentiating segment if paths have overlapping prefixes and suffixes', () => {
-    const titleInfos: SourcesComponents.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
+    const titleInfos: Sources.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
       ambiguous: [
         'http://www.google.com/src/a',
         'http://www.google.com/src/b',
@@ -68,7 +68,7 @@ describe('getDifferentiatingPathMap', () => {
       nonAmbiguous: [],
     });
 
-    const differentiatingPathMap = SourcesComponents.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
+    const differentiatingPathMap = Sources.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[0].url), urlString`src/a/`);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[1].url), urlString`src/b/`);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[2].url), urlString`src2/a/`);
@@ -76,7 +76,7 @@ describe('getDifferentiatingPathMap', () => {
   });
 
   it('can extract the differentiating segment if paths have overlapping prefixes and suffixes', () => {
-    const titleInfos: SourcesComponents.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
+    const titleInfos: Sources.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
       ambiguous: [
         'http://www.google.com/src/a/d',
         'http://www.google.com/src/a/e',
@@ -85,7 +85,7 @@ describe('getDifferentiatingPathMap', () => {
       ],
       nonAmbiguous: [],
     });
-    const differentiatingPathMap = SourcesComponents.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
+    const differentiatingPathMap = Sources.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[0].url), urlString`src/a/d/`);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[1].url), urlString`src/a/e/`);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[2].url), urlString`src2/a/d/`);
@@ -93,7 +93,7 @@ describe('getDifferentiatingPathMap', () => {
   });
 
   it('can extract the differentiating segment if it is not the direct parent folder', () => {
-    const titleInfos: SourcesComponents.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
+    const titleInfos: Sources.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
       ambiguous: [
         'http://www.google.com/src/a/e',
         'http://www.google.com/src/b/e',
@@ -103,7 +103,7 @@ describe('getDifferentiatingPathMap', () => {
       nonAmbiguous: [],
     });
 
-    const differentiatingPathMap = SourcesComponents.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
+    const differentiatingPathMap = Sources.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[0].url), urlString`a/…/`);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[1].url), urlString`b/…/`);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[2].url), urlString`c/…/`);
@@ -111,29 +111,29 @@ describe('getDifferentiatingPathMap', () => {
   });
 
   it('can extract the differentiating segment if one path is completely overlapping', () => {
-    const titleInfos: SourcesComponents.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
+    const titleInfos: Sources.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
       ambiguous: ['http://www.google.com/src/a/e', 'http://www.google.com/src/a'],
       nonAmbiguous: [],
     });
 
-    const differentiatingPathMap = SourcesComponents.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
+    const differentiatingPathMap = Sources.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[0].url), urlString`e/`);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[1].url), urlString`a/`);
   });
 
   it('can extract the differentiating segment if parts of the differentiating foldername is overlapping', () => {
-    const titleInfos: SourcesComponents.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
+    const titleInfos: Sources.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
       ambiguous: ['http://www.google.com/src/a/b/cfile', 'http://www.google.com/src/c/d/c'],
       nonAmbiguous: [],
     });
 
-    const differentiatingPathMap = SourcesComponents.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
+    const differentiatingPathMap = Sources.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[0].url), urlString`cfile/`);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[1].url), urlString`c/`);
   });
 
   it('can extract the differentiating segment if part of suffix is unique', () => {
-    const titleInfos: SourcesComponents.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
+    const titleInfos: Sources.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
       ambiguous: [
         'http://www.google.com/src/a/y',
         'http://www.google.com/src2/a/x',
@@ -142,7 +142,7 @@ describe('getDifferentiatingPathMap', () => {
       ],
       nonAmbiguous: [],
     });
-    const differentiatingPathMap = SourcesComponents.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
+    const differentiatingPathMap = Sources.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[0].url), urlString`a/y/`);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[1].url), urlString`a/x/`);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[2].url), urlString`b/y/`);
@@ -150,18 +150,18 @@ describe('getDifferentiatingPathMap', () => {
   });
 
   it('can extract the differentiating segment if separate paths of urls are unique', () => {
-    const titleInfos: SourcesComponents.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
+    const titleInfos: Sources.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
       ambiguous: ['http://www.google.com/src/d/y', 'http://www.google.com/src2/c/y', 'http://www.google.com/src3/c/y'],
       nonAmbiguous: [],
     });
-    const differentiatingPathMap = SourcesComponents.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
+    const differentiatingPathMap = Sources.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[0].url), urlString`d/…/`);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[1].url), urlString`src2/c/…/`);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[2].url), urlString`src3/c/…/`);
   });
 
   it('can extract the differentiating segment if paths have different length', () => {
-    const titleInfos: SourcesComponents.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
+    const titleInfos: Sources.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
       ambiguous: [
         'http://www.google.com/src/d',
         'http://www.google.com/src/c/y/d',
@@ -170,7 +170,7 @@ describe('getDifferentiatingPathMap', () => {
       ],
       nonAmbiguous: [],
     });
-    const differentiatingPathMap = SourcesComponents.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
+    const differentiatingPathMap = Sources.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[0].url), urlString`src/…/`);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[1].url), urlString`src/c/y/…/`);
     assert.strictEqual(differentiatingPathMap.get(titleInfos[2].url), urlString`src2/c/y/…/`);
@@ -179,17 +179,17 @@ describe('getDifferentiatingPathMap', () => {
 
   it('can extract the differentiating segment if paths have different length and are completely overlapping otherwise',
      () => {
-       const titleInfos: SourcesComponents.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
+       const titleInfos: Sources.BreakpointsViewUtils.TitleInfo[] = createTitleInfos({
          ambiguous: ['http://www.google.com/src/d', 'http://www.google.com/x/src/d'],
          nonAmbiguous: [],
        });
-       const differentiatingPathMap = SourcesComponents.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
+       const differentiatingPathMap = Sources.BreakpointsViewUtils.getDifferentiatingPathMap(titleInfos);
        assert.strictEqual(differentiatingPathMap.get(titleInfos[0].url), urlString`/…/`);
        assert.strictEqual(differentiatingPathMap.get(titleInfos[1].url), urlString`x/…/`);
      });
 
   function createTitleInfos(data: {ambiguous: string[], nonAmbiguous: string[]}):
-      SourcesComponents.BreakpointsViewUtils.TitleInfo[] {
+      Sources.BreakpointsViewUtils.TitleInfo[] {
     const infos = [];
     for (const path of data.ambiguous) {
       infos.push({

package/front_end/panels/sources/{components/BreakpointsViewUtils.ts → BreakpointsViewUtils.ts}

@@ -2,9 +2,9 @@
 // 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 Common from '../../core/common/common.js';
+import * as Platform from '../../core/platform/platform.js';
+import {assertNotNullOrUndefined} from '../../core/platform/platform.js';
 
 const SUMMARY_ELEMENT_SELECTOR = 'summary';
 

package/front_end/panels/sources/CSSPlugin.ts

@@ -12,10 +12,12 @@ import type * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as ColorPicker from '../../ui/legacy/components/color_picker/color_picker.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {AddDebugInfoURLDialog} from './AddSourceMapURLDialog.js';
 import {Plugin} from './Plugin.js';
@@ -25,25 +27,25 @@ import {Plugin} from './Plugin.js';
 
 const UIStrings = {
   /**
-   *@description Swatch icon element title in CSSPlugin of the Sources panel
+   * @description Swatch icon element title in CSSPlugin of the Sources panel
    */
   openColorPicker: 'Open color picker.',
   /**
-   *@description Text to open the cubic bezier editor
+   * @description Text to open the cubic bezier editor
    */
   openCubicBezierEditor: 'Open cubic bezier editor.',
   /**
-   *@description Text for a context menu item for attaching a sourcemap to the currently open css file
+   * @description Text for a context menu item for attaching a sourcemap to the currently open css file
    */
   addSourceMap: 'Add source map…',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/sources/CSSPlugin.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const dontCompleteIn = new Set(['ColorLiteral', 'NumberLiteral', 'StringLiteral', 'Comment', 'Important']);
+const doNotCompleteIn = new Set(['ColorLiteral', 'NumberLiteral', 'StringLiteral', 'Comment', 'Important']);
 
 function findPropertyAt(node: CodeMirror.SyntaxNode, pos: number): CodeMirror.SyntaxNode|null {
-  if (dontCompleteIn.has(node.name)) {
+  if (doNotCompleteIn.has(node.name)) {
     return null;
   }
   for (let cur: CodeMirror.SyntaxNode|null = node; cur; cur = cur.parent) {
@@ -170,6 +172,12 @@ class ColorSwatchWidget extends CodeMirror.WidgetType {
       this.#text = insert;
       this.#color = swatch.getColor() as Common.Color.Color;
     });
+    swatch.addEventListener(InlineEditor.ColorSwatch.ColorFormatChangedEvent.eventName, event => {
+      const insert = event.data.color.getAuthoredText() ?? event.data.color.asString();
+      view.dispatch({changes: {from: this.#from, to: this.#from + this.#text.length, insert}});
+      this.#text = insert;
+      this.#color = swatch.getColor() as Common.Color.Color;
+    });
     swatch.addEventListener(InlineEditor.ColorSwatch.ClickEvent.eventName, event => {
       event.consume(true);
       view.dispatch({
@@ -200,23 +208,25 @@ class CurveSwatchWidget extends CodeMirror.WidgetType {
   }
 
   toDOM(view: CodeMirror.EditorView): HTMLElement {
-    const swatch = InlineEditor.Swatches.BezierSwatch.create();
-    swatch.setBezierText(this.text);
-    UI.Tooltip.Tooltip.install(swatch.iconElement(), i18nString(UIStrings.openCubicBezierEditor));
-    swatch.iconElement().addEventListener('click', (event: MouseEvent) => {
+    const container = document.createElement('span');
+    const bezierText = container.createChild('span');
+    const icon = IconButton.Icon.create('bezier-curve-filled', 'bezier-swatch-icon');
+    icon.setAttribute('jslog', `${VisualLogging.showStyleEditor('bezier')}`);
+    bezierText.append(this.text);
+    UI.Tooltip.Tooltip.install(icon, i18nString(UIStrings.openCubicBezierEditor));
+    icon.addEventListener('click', (event: MouseEvent) => {
       event.consume(true);
       view.dispatch({
         effects: setTooltip.of({
           type: TooltipType.CURVE,
-          pos: view.posAtDOM(swatch),
+          pos: view.posAtDOM(icon),
           text: this.text,
-          swatch,
+          swatch: icon,
           curve: this.curve,
         }),
       });
     }, false);
-    swatch.hideText(true);
-    return swatch;
+    return icon;
   }
 
   override ignoreEvent(): boolean {
@@ -240,7 +250,7 @@ type ActiveTooltip = {
   pos: number,
   text: string,
   curve: UI.Geometry.CubicBezier,
-  swatch: InlineEditor.Swatches.BezierSwatch,
+  swatch: IconButton.Icon.Icon,
 };
 
 function createCSSTooltip(active: ActiveTooltip): CodeMirror.Tooltip {
@@ -349,8 +359,7 @@ function computeSwatchDeco(state: CodeMirror.EditorState, from: number, to: numb
 }
 
 const cssSwatchPlugin = CodeMirror.ViewPlugin.fromClass(class {
-decorations:
-  CodeMirror.DecorationSet;
+  decorations: CodeMirror.DecorationSet;
 
   constructor(view: CodeMirror.EditorView) {
     this.decorations = computeSwatchDeco(view.state, view.viewport.from, view.viewport.to);
@@ -481,7 +490,7 @@ export class CSSPlugin extends Plugin implements SDK.TargetManager.SDKModelObser
     const cssModel = this.#cssModel;
     const url = this.uiSourceCode.url();
     if (this.uiSourceCode.project().type() === Workspace.Workspace.projectTypes.Network && cssModel &&
-        !Bindings.IgnoreListManager.IgnoreListManager.instance().isUserIgnoreListedURL(url)) {
+        !Workspace.IgnoreListManager.IgnoreListManager.instance().isUserIgnoreListedURL(url)) {
       const addSourceMapURLLabel = i18nString(UIStrings.addSourceMap);
       contextMenu.debugSection().appendItem(
           addSourceMapURLLabel, () => addSourceMapURL(cssModel, url), {jslogContext: 'add-source-map'});

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -37,7 +37,7 @@ import type * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
-import type * as Workspace from '../../models/workspace/workspace.js';
+import * as Workspace from '../../models/workspace/workspace.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -46,36 +46,36 @@ import callStackSidebarPaneStyles from './callStackSidebarPane.css.js';
 
 const UIStrings = {
   /**
-   *@description Text in Call Stack Sidebar Pane of the Sources panel
+   * @description Text in Call Stack Sidebar Pane of the Sources panel
    */
   callStack: 'Call Stack',
   /**
-   *@description Not paused message element text content in Call Stack Sidebar Pane of the Sources panel
+   * @description Not paused message element text content in Call Stack Sidebar Pane of the Sources panel
    */
   notPaused: 'Not paused',
   /**
-   *@description Text exposed to screen reader when navigating through a ignore-listed call frame in the sources panel
+   * @description Text exposed to screen reader when navigating through a ignore-listed call frame in the sources panel
    */
   onIgnoreList: 'on ignore list',
   /**
-   *@description Show all link text content in Call Stack Sidebar Pane of the Sources panel
+   * @description Show all link text content in Call Stack Sidebar Pane of the Sources panel
    */
   showIgnorelistedFrames: 'Show ignore-listed frames',
   /**
-   *@description Text to show more content
+   * @description Text to show more content
    */
   showMore: 'Show more',
   /**
-   *@description A context menu item in the Call Stack Sidebar Pane of the Sources panel
+   * @description A context menu item in the Call Stack Sidebar Pane of the Sources panel
    */
   copyStackTrace: 'Copy stack trace',
   /**
-   *@description Text in Call Stack Sidebar Pane of the Sources panel when some call frames have warnings
+   * @description Text in Call Stack Sidebar Pane of the Sources panel when some call frames have warnings
    */
   callFrameWarnings: 'Some call frames have warnings',
   /**
-   *@description Error message that is displayed in UI when a file needed for debugging information for a call frame is missing
-   *@example {src/myapp.debug.wasm.dwp} PH1
+   * @description Error message that is displayed in UI when a file needed for debugging information for a call frame is missing
+   * @example {src/myapp.debug.wasm.dwp} PH1
    */
   debugFileNotFound: 'Failed to load debug file "{PH1}".',
   /**
@@ -109,10 +109,14 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
   private lastDebuggerModel: SDK.DebuggerModel.DebuggerModel|null = null;
 
   private constructor() {
-    super(i18nString(UIStrings.callStack), true, 'sources.callstack');
+    super({
+      jslog: `${VisualLogging.section('sources.callstack')}`,
+      title: i18nString(UIStrings.callStack),
+      viewId: 'sources.callstack',
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(callStackSidebarPaneStyles);
 
-    this.contentElement.setAttribute('jslog', `${VisualLogging.section('sources.callstack')}`);
     ({element: this.ignoreListMessageElement, checkbox: this.ignoreListCheckboxElement} =
          this.createIgnoreListMessageElementAndCheckbox());
     this.contentElement.appendChild(this.ignoreListMessageElement);
@@ -123,13 +127,8 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
 
     this.callFrameWarningsElement = this.contentElement.createChild('div', 'call-frame-warnings-message');
     const icon = new IconButton.Icon.Icon();
-    icon.data = {
-      iconName: 'warning-filled',
-      color: 'var(--icon-warning)',
-      width: '14px',
-      height: '14px',
-    };
-    icon.classList.add('call-frame-warning-icon');
+    icon.name = 'warning-filled';
+    icon.classList.add('call-frame-warning-icon', 'small');
     this.callFrameWarningsElement.appendChild(icon);
     this.callFrameWarningsElement.appendChild(document.createTextNode(i18nString(UIStrings.callFrameWarnings)));
     this.callFrameWarningsElement.tabIndex = -1;
@@ -241,34 +240,21 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
       UI.Tooltip.Tooltip.install(this.callFrameWarningsElement, Array.from(uniqueWarnings).join('\n'));
     }
 
-    let debuggerModel = details.debuggerModel;
-    let asyncStackTraceId = details.asyncStackTraceId;
-    let asyncStackTrace: Protocol.Runtime.StackTrace|undefined|null = details.asyncStackTrace;
     let previousStackTrace: Protocol.Runtime.CallFrame[]|SDK.DebuggerModel.CallFrame[] = details.callFrames;
-    for (let {maxAsyncStackChainDepth} = this; maxAsyncStackChainDepth > 0; --maxAsyncStackChainDepth) {
-      if (!asyncStackTrace) {
-        if (!asyncStackTraceId) {
-          break;
-        }
-        if (asyncStackTraceId.debuggerId) {
-          const dm = await SDK.DebuggerModel.DebuggerModel.modelForDebuggerId(asyncStackTraceId.debuggerId);
-          if (!dm) {
-            break;
-          }
-          debuggerModel = dm;
-        }
-        asyncStackTrace = await debuggerModel.fetchAsyncStackTrace(asyncStackTraceId);
-        if (!asyncStackTrace) {
-          break;
-        }
-      }
+    let {maxAsyncStackChainDepth} = this;
+    let asyncStackTrace: Protocol.Runtime.StackTrace|null = null;
+    for await (const {stackTrace} of details.debuggerModel.iterateAsyncParents(details)) {
+      asyncStackTrace = stackTrace;
       const title = UI.UIUtils.asyncStackTraceLabel(asyncStackTrace.description, previousStackTrace);
       items.push(...await Item.createItemsForAsyncStack(
-          title, debuggerModel, asyncStackTrace.callFrames, this.locationPool, this.refreshItem.bind(this)));
+          title, details.debuggerModel, asyncStackTrace.callFrames, this.locationPool, this.refreshItem.bind(this)));
       previousStackTrace = asyncStackTrace.callFrames;
-      asyncStackTraceId = asyncStackTrace.parentId;
-      asyncStackTrace = asyncStackTrace.parent;
+
+      if (--maxAsyncStackChainDepth <= 0) {
+        break;
+      }
     }
+
     this.showMoreMessageElement.classList.toggle('hidden', !asyncStackTrace);
     this.items.replaceAll(items);
     for (const item of this.items) {
@@ -345,25 +331,15 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     UI.ARIAUtils.setSelected(element, isSelected);
     element.classList.toggle('hidden', !this.showIgnoreListed && item.isIgnoreListed);
     const icon = new IconButton.Icon.Icon();
-    icon.data = {
-      iconName: 'large-arrow-right-filled',
-      color: 'var(--icon-arrow-main-thread)',
-      width: '14px',
-      height: '14px',
-    };
-    icon.classList.add('selected-call-frame-icon');
+    icon.name = 'large-arrow-right-filled';
+    icon.classList.add('selected-call-frame-icon', 'small');
     element.appendChild(icon);
     element.tabIndex = item === this.list.selectedItem() ? 0 : -1;
 
     if (callframe?.missingDebugInfoDetails) {
       const icon = new IconButton.Icon.Icon();
-      icon.data = {
-        iconName: 'warning-filled',
-        color: 'var(--icon-warning)',
-        width: '14px',
-        height: '14px',
-      };
-      icon.classList.add('call-frame-warning-icon');
+      icon.name = 'warning-filled';
+      icon.classList.add('call-frame-warning-icon', 'small');
       const messages = callframe.missingDebugInfoDetails.resources.map(
           r => i18nString(UIStrings.debugFileNotFound, {PH1: Common.ParsedURL.ParsedURL.extractName(r.resourceUrl)}));
       UI.Tooltip.Tooltip.install(icon, [callframe.missingDebugInfoDetails.details, ...messages].join('\n'));
@@ -494,7 +470,7 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
       return;
     }
 
-    for (const {text, callback, jslogContext} of Bindings.IgnoreListManager.IgnoreListManager.instance()
+    for (const {text, callback, jslogContext} of Workspace.IgnoreListManager.IgnoreListManager.instance()
              .getIgnoreListURLContextMenuItems(uiSourceCode)) {
       menuSection.appendItem(text, callback, {jslogContext});
     }
@@ -647,7 +623,7 @@ export class Item {
 
   private async update(liveLocation: Bindings.LiveLocation.LiveLocation): Promise<void> {
     const uiLocation = await liveLocation.uiLocation();
-    this.isIgnoreListed = await liveLocation.isIgnoreListed();
+    this.isIgnoreListed = Boolean(uiLocation?.isIgnoreListed());
     this.linkText = uiLocation ? uiLocation.linkText() : '';
     this.uiLocation = uiLocation;
     this.updateDelegate(this);

package/front_end/panels/sources/CategorizedBreakpointL10n.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 /**
- * @fileoverview The sources panel (via DebuggerPausedMessage) and the
+ * @file The sources panel (via DebuggerPausedMessage) and the
  * "browser_debugger" module both require localized CategorizedBreakpoint
  * names. We put them "upstream" into "panels/sources" so they are
  * available to both.
@@ -39,60 +39,60 @@ const UIStrings = {
    */
   beforeSellerWorkletReportingStart: 'Seller Reporting Phase Start',
   /**
-   *@description Text in the Event Listener Breakpoints Panel of the JavaScript Debugger in the Sources Panel
-   *@example {setTimeout} PH1
+   * @description Text in the Event Listener Breakpoints Panel of the JavaScript Debugger in the Sources Panel
+   * @example {setTimeout} PH1
    */
   setTimeoutOrIntervalFired: '{PH1} fired',
   /**
-   *@description Text in the Event Listener Breakpoints Panel of the JavaScript Debugger in the Sources Panel
+   * @description Text in the Event Listener Breakpoints Panel of the JavaScript Debugger in the Sources Panel
    */
   scriptFirstStatement: 'Script First Statement',
   /**
-   *@description Text in the Event Listener Breakpoints Panel of the JavaScript Debugger in the Sources Panel
+   * @description Text in the Event Listener Breakpoints Panel of the JavaScript Debugger in the Sources Panel
    */
   scriptBlockedByContentSecurity: 'Script Blocked by Content Security Policy',
   /**
-   *@description Text for the request animation frame event
+   * @description Text for the request animation frame event
    */
   requestAnimationFrame: 'Request Animation Frame',
   /**
-   *@description Text to cancel the animation frame
+   * @description Text to cancel the animation frame
    */
   cancelAnimationFrame: 'Cancel Animation Frame',
   /**
-   *@description Text for the event that an animation frame is fired
+   * @description Text for the event that an animation frame is fired
    */
   animationFrameFired: 'Animation Frame Fired',
   /**
-   *@description Text in the Event Listener Breakpoints Panel of the JavaScript Debugger in the Sources Panel
+   * @description Text in the Event Listener Breakpoints Panel of the JavaScript Debugger in the Sources Panel
    */
   webglErrorFired: 'WebGL Error Fired',
   /**
-   *@description Text in the Event Listener Breakpoints Panel of the JavaScript Debugger in the Sources Panel
+   * @description Text in the Event Listener Breakpoints Panel of the JavaScript Debugger in the Sources Panel
    */
   webglWarningFired: 'WebGL Warning Fired',
   /**
-   *@description Text in the Event Listener Breakpoints Panel of the JavaScript Debugger in the Sources Panel
+   * @description Text in the Event Listener Breakpoints Panel of the JavaScript Debugger in the Sources Panel
    */
   setInnerhtml: 'Set `innerHTML`',
   /**
-   *@description Name of a breakpoint type in the Sources Panel.
+   * @description Name of a breakpoint type in the Sources Panel.
    */
   createCanvasContext: 'Create canvas context',
   /**
-   *@description Name of a breakpoint type in the Sources Panel.
+   * @description Name of a breakpoint type in the Sources Panel.
    */
   createAudiocontext: 'Create `AudioContext`',
   /**
-   *@description Name of a breakpoint type in the Sources Panel. Close is a verb.
+   * @description Name of a breakpoint type in the Sources Panel. Close is a verb.
    */
   closeAudiocontext: 'Close `AudioContext`',
   /**
-   *@description Name of a breakpoint type in the Sources Panel. Resume is a verb.
+   * @description Name of a breakpoint type in the Sources Panel. Resume is a verb.
    */
   resumeAudiocontext: 'Resume `AudioContext`',
   /**
-   *@description Name of a breakpoint type in the Sources Panel.
+   * @description Name of a breakpoint type in the Sources Panel.
    */
   suspendAudiocontext: 'Suspend `AudioContext`',
   /**
@@ -103,7 +103,7 @@ const UIStrings = {
    */
   sinkViolations: 'Sink Violations',
   /**
-   *@description Title for a checkbox that turns on breakpoints on Trusted Type policy violations
+   * @description Title for a checkbox that turns on breakpoints on Trusted Type policy violations
    */
   policyViolations: 'Policy Violations',
 } as const;
@@ -154,7 +154,7 @@ const LOCALIZED_INSTRUMENTATION_NAMES:
           i18n.i18n.lockedLazyString('getCurrentPosition'),
       [SDK.EventBreakpointsModel.InstrumentationNames.GEOLOCATION_WATCH_POSITION]:
           i18n.i18n.lockedLazyString('watchPosition'),
-      [SDK.EventBreakpointsModel.InstrumentationNames.NOTIFCATION_REQUEST_PERMISSION]:
+      [SDK.EventBreakpointsModel.InstrumentationNames.NOTIFICATION_REQUEST_PERMISSION]:
           i18n.i18n.lockedLazyString('requestPermission'),
       [SDK.EventBreakpointsModel.InstrumentationNames.DOM_WINDOW_CLOSE]: i18n.i18n.lockedLazyString('window.close'),
       [SDK.EventBreakpointsModel.InstrumentationNames.DOCUMENT_WRITE]: i18n.i18n.lockedLazyString('document.write'),

package/front_end/panels/sources/CoveragePlugin.test.ts

@@ -30,10 +30,12 @@ describeWithMockConnection('CoveragePlugin', () => {
     const workspace = Workspace.Workspace.WorkspaceImpl.instance();
     const targetManager = SDK.TargetManager.TargetManager.instance();
     const resourceMapping = new Bindings.ResourceMapping.ResourceMapping(targetManager, workspace);
+    const ignoreListManager = Workspace.IgnoreListManager.IgnoreListManager.instance({forceNew: true});
     Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance({
       forceNew: true,
       resourceMapping,
       targetManager,
+      ignoreListManager,
     });
     Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding.instance({
       forceNew: true,