chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/sources/CoveragePlugin.ts

@@ -20,20 +20,20 @@ import {Plugin} from './Plugin.js';
 
 const UIStrings = {
   /**
-   *@description Text for Coverage Status Bar Item in Sources Panel
+   * @description Text for Coverage Status Bar Item in Sources Panel
    */
   clickToShowCoveragePanel: 'Click to show Coverage Panel',
   /**
-   *@description Text for Coverage Status Bar Item in Sources Panel
+   * @description Text for Coverage Status Bar Item in Sources Panel
    */
   showDetails: 'Show Details',
   /**
-   *@description Text to show in the status bar if coverage data is available
-   *@example {12.3} PH1
+   * @description Text to show in the status bar if coverage data is available
+   * @example {12.3} PH1
    */
   coverageS: 'Coverage: {PH1}',
   /**
-   *@description Text to be shown in the status bar if no coverage data is available
+   * @description Text to be shown in the status bar if no coverage data is available
    */
   coverageNa: 'Coverage: n/a',
 } as const;

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

@@ -20,10 +20,12 @@ describeWithEnvironment('DebuggerPausedMessage', () => {
     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});
     debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance({
       forceNew: true,
       resourceMapping,
       targetManager,
+      ignoreListManager,
     });
     breakpointManager = Breakpoints.BreakpointManager.BreakpointManager.instance({
       forceNew: true,

package/front_end/panels/sources/DebuggerPausedMessage.ts

@@ -19,96 +19,96 @@ import debuggerPausedMessageStyles from './debuggerPausedMessage.css.js';
 
 const UIStrings = {
   /**
-   *@description Text in the JavaScript Debugging pane of the Sources pane when a DOM breakpoint is hit
-   *@example {conditional breakpoint} PH1
+   * @description Text in the JavaScript Debugging pane of the Sources pane when a DOM breakpoint is hit
+   * @example {conditional breakpoint} PH1
    */
   pausedOnS: 'Paused on {PH1}',
   /**
-   *@description Text in the JavaScript Debugging pane of the Sources pane when a DOM breakpoint is hit because a child is added to the subtree
-   *@example {node} PH1
+   * @description Text in the JavaScript Debugging pane of the Sources pane when a DOM breakpoint is hit because a child is added to the subtree
+   * @example {node} PH1
    */
   childSAdded: 'Child {PH1} added',
   /**
-   *@description Text in the JavaScript Debugging pane of the Sources pane when a DOM breakpoint is hit because a descendant is added
-   *@example {node} PH1
+   * @description Text in the JavaScript Debugging pane of the Sources pane when a DOM breakpoint is hit because a descendant is added
+   * @example {node} PH1
    */
   descendantSAdded: 'Descendant {PH1} added',
   /**
-   *@description Text in the JavaScript Debugging pane of the Sources pane when a DOM breakpoint is hit because a descendant is removed
-   *@example {node} PH1
+   * @description Text in the JavaScript Debugging pane of the Sources pane when a DOM breakpoint is hit because a descendant is removed
+   * @example {node} PH1
    */
   descendantSRemoved: 'Descendant {PH1} removed',
   /**
-   *@description Text in Debugger Paused Message of the Sources panel
+   * @description Text in Debugger Paused Message of the Sources panel
    */
   pausedOnEventListener: 'Paused on event listener',
   /**
-   *@description Text in Debugger Paused Message of the Sources panel
+   * @description Text in Debugger Paused Message of the Sources panel
    */
   pausedOnXhrOrFetch: 'Paused on XHR or fetch',
   /**
-   *@description Text in Debugger Paused Message of the Sources panel
+   * @description Text in Debugger Paused Message of the Sources panel
    */
   pausedOnException: 'Paused on exception',
   /**
-   *@description We pause exactly when the promise rejection is happening, so that the user can see where in the code it comes from.
+   * @description We pause exactly when the promise rejection is happening, so that the user can see where in the code it comes from.
    * A Promise is a Web API object (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise),
    * that will either be 'fulfilled' or 'rejected' at some unknown time in the future.
    * The subject of the term is omited but it is "Execution", that is, "Execution was paused on <event>".
    */
   pausedOnPromiseRejection: 'Paused on `promise` rejection',
   /**
-   *@description Text in Debugger Paused Message of the Sources panel
+   * @description Text in Debugger Paused Message of the Sources panel
    */
   pausedOnAssertion: 'Paused on assertion',
   /**
-   *@description Text in Debugger Paused Message of the Sources panel
+   * @description Text in Debugger Paused Message of the Sources panel
    */
   pausedOnDebuggedFunction: 'Paused on debugged function',
   /**
-   *@description Text in Debugger Paused Message of the Sources panel
+   * @description Text in Debugger Paused Message of the Sources panel
    */
   pausedBeforePotentialOutofmemory: 'Paused before potential out-of-memory crash',
   /**
-   *@description Text in Debugger Paused Message of the Sources panel
+   * @description Text in Debugger Paused Message of the Sources panel
    */
   pausedOnCspViolation: 'Paused on CSP violation',
   /**
-   *@description Text in Debugger Paused Message of the Sources panel specifying cause of break
+   * @description Text in Debugger Paused Message of the Sources panel specifying cause of break
    */
   trustedTypeSinkViolation: '`Trusted Type` Sink Violation',
   /**
-   *@description Text in Debugger Paused Message of the Sources panel specifying cause of break
+   * @description Text in Debugger Paused Message of the Sources panel specifying cause of break
    */
   trustedTypePolicyViolation: '`Trusted Type` Policy Violation',
   /**
-   *@description Text in Debugger Paused Message of the Sources panel
+   * @description Text in Debugger Paused Message of the Sources panel
    */
   pausedOnBreakpoint: 'Paused on breakpoint',
   /**
-   *@description Text in Debugger Paused Message of the Sources panel
+   * @description Text in Debugger Paused Message of the Sources panel
    */
   debuggerPaused: 'Debugger paused',
   /**
-   *@description Text in Debugger Paused Message of the Sources panel
+   * @description Text in Debugger Paused Message of the Sources panel
    */
   subtreeModifications: 'subtree modifications',
   /**
-   *@description Text in Debugger Paused Message of the Sources panel
+   * @description Text in Debugger Paused Message of the Sources panel
    */
   attributeModifications: 'attribute modifications',
   /**
-   *@description Text in Debugger Paused Message of the Sources panel
+   * @description Text in Debugger Paused Message of the Sources panel
    */
   nodeRemoval: 'node removal',
   /**
-   *@description Error message text
-   *@example {Snag Error} PH1
+   * @description Error message text
+   * @example {Snag Error} PH1
    */
   webglErrorFiredS: 'WebGL Error Fired ({PH1})',
   /**
-   *@description Text in DOMDebugger Model
-   *@example {"script-src 'self'"} PH1
+   * @description Text in DOMDebugger Model
+   * @example {"script-src 'self'"} PH1
    */
   scriptBlockedDueToContent: 'Script blocked due to Content Security Policy directive: {PH1}',
 } as const;
@@ -159,12 +159,9 @@ export class DebuggerPausedMessage {
 
     const mainElement = messageWrapper.createChild('div', 'status-main');
     const mainIcon = new IconButton.Icon.Icon();
-    mainIcon.data = {
-      iconName: 'info',
-      color: 'var(--sys-color-on-yellow-container)',
-      width: '16px',
-      height: '16px',
-    };
+    mainIcon.name = 'info';
+    mainIcon.style.color = 'var(--sys-color-on-yellow-container)';
+    mainIcon.classList.add('medium');
     mainElement.appendChild(mainIcon);
     const breakpointType = BreakpointTypeNouns.get(data.type);
     mainElement.appendChild(document.createTextNode(
@@ -294,12 +291,9 @@ export class DebuggerPausedMessage {
       const messageWrapper = document.createElement('span');
       const mainElement = messageWrapper.createChild('div', 'status-main');
       const mainIcon = new IconButton.Icon.Icon();
-      mainIcon.data = {
-        iconName: errorLike ? 'cross-circle-filled' : 'info',
-        color: errorLike ? 'var(--icon-error)' : 'var(--sys-color-on-yellow-container)',
-        width: '16px',
-        height: '16px',
-      };
+      mainIcon.name = errorLike ? 'cross-circle-filled' : 'info';
+      mainIcon.style.color = errorLike ? 'var(--icon-error)' : 'var(--sys-color-on-yellow-container)';
+      mainIcon.classList.add('medium');
       mainElement.appendChild(mainIcon);
       mainElement.appendChild(document.createTextNode(mainText));
       if (subText) {

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

@@ -27,12 +27,13 @@ describeWithMockConnection('Inline variable view scope helpers', () => {
     const workspace = Workspace.Workspace.WorkspaceImpl.instance();
     const targetManager = SDK.TargetManager.TargetManager.instance();
     const resourceMapping = new Bindings.ResourceMapping.ResourceMapping(targetManager, workspace);
-    const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance({
+    const ignoreListManager = Workspace.IgnoreListManager.IgnoreListManager.instance({forceNew: true});
+    Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance({
       forceNew: true,
       resourceMapping,
       targetManager,
+      ignoreListManager,
     });
-    Bindings.IgnoreListManager.IgnoreListManager.instance({forceNew: true, debuggerWorkspaceBinding});
     target = createTarget();
     backend = new MockProtocolBackend();
   });
@@ -43,7 +44,7 @@ describeWithMockConnection('Inline variable view scope helpers', () => {
       return null;
     }
     const entry = sourceMap.findEntry(location.lineNumber, location.columnNumber);
-    if (!entry || !entry.sourceURL) {
+    if (!entry?.sourceURL) {
       return null;
     }
     const content = sourceMap.embeddedContentByURL(entry.sourceURL);

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -45,6 +45,7 @@ import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
+import * as Tooltips from '../../ui/components/tooltips/tooltips.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -52,7 +53,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {AddDebugInfoURLDialog} from './AddSourceMapURLDialog.js';
 import {BreakpointEditDialog} from './BreakpointEditDialog.js';
-import * as SourceComponents from './components/components.js';
+import {BreakpointsSidebarController} from './BreakpointsView.js';
 import {Plugin} from './Plugin.js';
 import {SourcesPanel} from './SourcesPanel.js';
 
@@ -60,117 +61,117 @@ const {EMPTY_BREAKPOINT_CONDITION, NEVER_PAUSE_HERE_CONDITION} = Breakpoints.Bre
 
 const UIStrings = {
   /**
-   *@description Text in Debugger Plugin of the Sources panel
+   * @description Text in Debugger Plugin of the Sources panel
    */
   thisScriptIsOnTheDebuggersIgnore: 'This script is on the debugger\'s ignore list',
   /**
-   *@description Text to stop preventing the debugger from stepping into library code
+   * @description Text to stop preventing the debugger from stepping into library code
    */
   removeFromIgnoreList: 'Remove from ignore list',
   /**
-   *@description Text of a button in the Sources panel Debugger Plugin to configure ignore listing in Settings
+   * @description Text of a button in the Sources panel Debugger Plugin to configure ignore listing in Settings
    */
   configure: 'Configure',
   /**
-   *@description Text to add a breakpoint
+   * @description Text to add a breakpoint
    */
   addBreakpoint: 'Add breakpoint',
   /**
-   *@description A context menu item in the Debugger Plugin of the Sources panel
+   * @description A context menu item in the Debugger Plugin of the Sources panel
    */
   addConditionalBreakpoint: 'Add conditional breakpoint…',
   /**
-   *@description A context menu item in the Debugger Plugin of the Sources panel
+   * @description A context menu item in the Debugger Plugin of the Sources panel
    */
   addLogpoint: 'Add logpoint…',
   /**
-   *@description A context menu item in the Debugger Plugin of the Sources panel
+   * @description A context menu item in the Debugger Plugin of the Sources panel
    */
   neverPauseHere: 'Never pause here',
   /**
-   *@description Context menu command to delete/remove a breakpoint that the user
+   * @description Context menu command to delete/remove a breakpoint that the user
    *has set. One line of code can have multiple breakpoints. Always >= 1 breakpoint.
    */
   removeBreakpoint: '{n, plural, =1 {Remove breakpoint} other {Remove all breakpoints in line}}',
   /**
-   *@description A context menu item in the Debugger Plugin of the Sources panel
+   * @description A context menu item in the Debugger Plugin of the Sources panel
    */
   editBreakpoint: 'Edit breakpoint…',
   /**
-   *@description Context menu command to disable (but not delete) a breakpoint
+   * @description Context menu command to disable (but not delete) a breakpoint
    *that the user has set. One line of code can have multiple breakpoints. Always
    *>= 1 breakpoint.
    */
   disableBreakpoint: '{n, plural, =1 {Disable breakpoint} other {Disable all breakpoints in line}}',
   /**
-   *@description Context menu command to enable a breakpoint that the user has
+   * @description Context menu command to enable a breakpoint that the user has
    *set. One line of code can have multiple breakpoints. Always >= 1 breakpoint.
    */
   enableBreakpoint: '{n, plural, =1 {Enable breakpoint} other {Enable all breakpoints in line}}',
   /**
-   *@description Text in Debugger Plugin of the Sources panel
+   * @description Text in Debugger Plugin of the Sources panel
    */
   addSourceMap: 'Add source map…',
   /**
-   *@description Text in Debugger Plugin of the Sources panel
+   * @description Text in Debugger Plugin of the Sources panel
    */
   addWasmDebugInfo: 'Add DWARF debug info…',
   /**
-   *@description Text in Debugger Plugin of the Sources panel
+   * @description Text in Debugger Plugin of the Sources panel
    */
   sourceMapLoaded: 'Source map loaded',
   /**
-   *@description Title of the Filtered List WidgetProvider of Quick Open
-   *@example {Ctrl+P Ctrl+O} PH1
+   * @description Title of the Filtered List WidgetProvider of Quick Open
+   * @example {Ctrl+P Ctrl+O} PH1
    */
   associatedFilesAreAvailable: 'Associated files are available via file tree or {PH1}.',
   /**
-   *@description Text in Debugger Plugin of the Sources panel
+   * @description Text in Debugger Plugin of the Sources panel
    */
   associatedFilesShouldBeAdded:
       'Associated files should be added to the file tree. You can debug these resolved source files as regular JavaScript files.',
   /**
-   *@description Text in Debugger Plugin of the Sources panel
+   * @description Text in Debugger Plugin of the Sources panel
    */
   theDebuggerWillSkipStepping: 'The debugger will skip stepping through this script, and will not stop on exceptions.',
   /**
-   *@description Text in Debugger Plugin of the Sources panel
+   * @description Text in Debugger Plugin of the Sources panel
    */
   sourceMapSkipped: 'Source map skipped for this file',
   /**
-   *@description Text in Debugger Plugin of the Sources panel
+   * @description Text in Debugger Plugin of the Sources panel
    */
   sourceMapFailed: 'Source map failed to load',
   /**
-   *@description Text in Debugger Plugin of the Sources panel
+   * @description Text in Debugger Plugin of the Sources panel
    */
   debuggingPowerReduced: 'DevTools can\'t show authored sources, but you can debug the deployed code.',
   /**
-   *@description Text in Debugger Plugin of the Sources panel
+   * @description Text in Debugger Plugin of the Sources panel
    */
   reloadForSourceMap: 'To enable again, make sure the file isn\'t on the ignore list and reload.',
   /**
-   *@description Text in Debugger Plugin of the Sources panel
-   *@example {http://site.com/lib.js.map} PH1
-   *@example {HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME} PH2
+   * @description Text in Debugger Plugin of the Sources panel
+   * @example {http://site.com/lib.js.map} PH1
+   * @example {HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME} PH2
    */
   errorLoading: 'Error loading url {PH1}: {PH2}',
   /**
-   *@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}".',
   /**
-   *@description Error message that is displayed when no debug info could be loaded
-   *@example {app.wasm} PH1
+   * @description Error message that is displayed when no debug info could be loaded
+   * @example {app.wasm} PH1
    */
   debugInfoNotFound: 'Failed to load any debug info for {PH1}',
   /**
-   *@description Text of a button to open up details on a request when no debug info could be loaded
+   * @description Text of a button to open up details on a request when no debug info could be loaded
    */
   showRequest: 'Show request',
   /**
-   *@description Tooltip text that shows on hovering over a button to see more details on a request
+   * @description Tooltip text that shows on hovering over a button to see more details on a request
    */
   openDeveloperResources: 'Opens the request in the Developer resource panel',
 } as const;
@@ -270,7 +271,7 @@ export class DebuggerPlugin extends Plugin {
         SDK.PageResourceLoader.Events.UPDATE, this.showSourceMapInfobarIfNeeded.bind(this), this);
 
     this.ignoreListCallback = this.showIgnoreListInfobarIfNeeded.bind(this);
-    Bindings.IgnoreListManager.IgnoreListManager.instance().addChangeListener(this.ignoreListCallback);
+    Workspace.IgnoreListManager.IgnoreListManager.instance().addChangeListener(this.ignoreListCallback);
 
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DebuggerModel.CallFrame, this.callFrameChanged, this);
     this.liveLocationPool = new Bindings.LiveLocation.LiveLocationPool();
@@ -411,7 +412,7 @@ export class DebuggerPlugin extends Plugin {
       return;
     }
 
-    if (!Bindings.IgnoreListManager.IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(
+    if (!Workspace.IgnoreListManager.IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(
             uiSourceCode)) {
       this.hideIgnoreListInfobar();
       return;
@@ -422,7 +423,7 @@ export class DebuggerPlugin extends Plugin {
     }
 
     function unIgnoreList(): void {
-      Bindings.IgnoreListManager.IgnoreListManager.instance().unIgnoreListUISourceCode(uiSourceCode);
+      Workspace.IgnoreListManager.IgnoreListManager.instance().unIgnoreListUISourceCode(uiSourceCode);
     }
 
     const infobar = new UI.Infobar.Infobar(
@@ -454,13 +455,13 @@ export class DebuggerPlugin extends Plugin {
 
   attachInfobar(bar: UI.Infobar.Infobar): void {
     if (this.editor) {
-      this.editor.dispatch({effects: SourceFrame.SourceFrame.addInfobar.of(bar)});
+      this.editor.dispatch({effects: SourceFrame.SourceFrame.addSourceFrameInfobar.of({element: bar.element})});
     }
   }
 
   removeInfobar(bar: UI.Infobar.Infobar|null): void {
     if (this.editor && bar) {
-      this.editor.dispatch({effects: SourceFrame.SourceFrame.removeInfobar.of(bar)});
+      this.editor.dispatch({effects: SourceFrame.SourceFrame.removeSourceFrameInfobar.of({element: bar.element})});
     }
   }
 
@@ -586,7 +587,7 @@ export class DebuggerPlugin extends Plugin {
 
     if (this.uiSourceCode.project().type() === Workspace.Workspace.projectTypes.Network &&
         Common.Settings.Settings.instance().moduleSetting('js-source-maps-enabled').get() &&
-        !Bindings.IgnoreListManager.IgnoreListManager.instance().isUserIgnoreListedURL(this.uiSourceCode.url())) {
+        !Workspace.IgnoreListManager.IgnoreListManager.instance().isUserIgnoreListedURL(this.uiSourceCode.url())) {
       if (this.scriptFileForDebuggerModel.size) {
         const scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile =
             this.scriptFileForDebuggerModel.values().next().value as Bindings.ResourceScriptMapping.ResourceScriptFile;
@@ -893,12 +894,10 @@ export class DebuggerPlugin extends Plugin {
       dialog.detach();
       editor.dispatch({effects: compartment.reconfigure([])});
       if (!result.committed) {
-        SourceComponents.BreakpointsView.BreakpointsSidebarController.instance().breakpointEditFinished(
-            breakpoint, false);
+        BreakpointsSidebarController.instance().breakpointEditFinished(breakpoint, false);
         return;
       }
-      SourceComponents.BreakpointsView.BreakpointsSidebarController.instance().breakpointEditFinished(
-          breakpoint, oldCondition !== result.condition);
+      BreakpointsSidebarController.instance().breakpointEditFinished(breakpoint, oldCondition !== result.condition);
       if (breakpoint) {
         breakpoint.setCondition(result.condition, result.isLogpoint);
       } else if (location) {
@@ -1274,7 +1273,7 @@ export class DebuggerPlugin extends Plugin {
       } else if (main.condition()) {
         gutterClass += ' cm-breakpoint-conditional';
       }
-      gutterMarkers.push((new BreakpointGutterMarker(gutterClass, lineStart)).range(lineStart));
+      gutterMarkers.push((new BreakpointGutterMarker(gutterClass, lineStart, main.condition())).range(lineStart));
     }
 
     const addPossibleBreakpoints = (line: CodeMirror.Line, locations: Workspace.UISourceCode.UILocation[]): void => {
@@ -1740,7 +1739,7 @@ export class DebuggerPlugin extends Plugin {
     this.uiSourceCode.removeEventListener(
         Workspace.UISourceCode.Events.WorkingCopyCommitted, this.workingCopyCommitted, this);
 
-    Bindings.IgnoreListManager.IgnoreListManager.instance().removeChangeListener(this.ignoreListCallback);
+    Workspace.IgnoreListManager.IgnoreListManager.instance().removeChangeListener(this.ignoreListCallback);
 
     debuggerPluginForUISourceCode.delete(this.uiSourceCode);
     super.dispose();
@@ -1783,8 +1782,7 @@ export class BreakpointLocationRevealer implements
     if (debuggerPlugin) {
       debuggerPlugin.editBreakpointLocation(breakpointLocation);
     } else {
-      SourceComponents.BreakpointsView.BreakpointsSidebarController.instance().breakpointEditFinished(
-          breakpointLocation.breakpoint, false);
+      BreakpointsSidebarController.instance().breakpointEditFinished(breakpointLocation.breakpoint, false);
     }
   }
 }
@@ -1827,7 +1825,9 @@ function muteGutterMarkers(markers: CodeMirror.RangeSet<CodeMirror.GutterMarker>
     if (!/cm-breakpoint-disabled/.test(className)) {
       className += ' cm-breakpoint-disabled';
     }
-    newMarkers.push(new BreakpointGutterMarker(className, from).range(from));
+    newMarkers.push(new BreakpointGutterMarker(
+                        className, from, marker instanceof BreakpointGutterMarker ? marker.condition : undefined)
+                        .range(from));
   });
   return CodeMirror.RangeSet.of(newMarkers, false);
 }
@@ -1903,11 +1903,16 @@ class BreakpointInlineMarker extends CodeMirror.WidgetType {
 }
 
 class BreakpointGutterMarker extends CodeMirror.GutterMarker {
+  static nextTooltipId = 0;
   readonly #position: number;
+  readonly condition: Breakpoints.BreakpointManager.UserCondition|undefined;
 
-  constructor(override readonly elementClass: string, position: number) {
+  constructor(
+      override readonly elementClass: string, position: number,
+      condition?: Breakpoints.BreakpointManager.UserCondition) {
     super();
     this.#position = position;
+    this.condition = condition;
   }
 
   override eq(other: BreakpointGutterMarker): boolean {
@@ -1920,7 +1925,21 @@ class BreakpointGutterMarker extends CodeMirror.GutterMarker {
     const line = view.state.doc.lineAt(this.#position).number;
     const formatNumber = view.state.facet(SourceFrame.SourceFrame.LINE_NUMBER_FORMATTER);
     div.textContent = formatNumber(line, view.state);
-    return div;
+    if (!this.condition) {
+      return div;
+    }
+    const container = document.createElement('div');
+    const id = `cm-breakpoint-tooltip-${BreakpointGutterMarker.nextTooltipId++}`;
+    div.setAttribute('aria-details', id);
+    container.appendChild(div);
+    const tooltip = new Tooltips.Tooltip.Tooltip({
+      id,
+      anchor: div,
+      jslogContext: 'breakpoint-tooltip',
+    });
+    tooltip.append(this.condition);
+    container.appendChild(tooltip);
+    return container;
   }
 }
 

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

@@ -5,7 +5,6 @@
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
-import * as Bindings from '../../models/bindings/bindings.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
 import {setUpEnvironment} from '../../testing/OverridesHelpers.js';
@@ -15,8 +14,8 @@ import * as Sources from './sources.js';
 const {urlString} = Platform.DevToolsPath;
 const setUpEnvironmentWithUISourceCode =
     (url: string, resourceType: Common.ResourceType.ResourceType, project?: Workspace.Workspace.Project) => {
-      const {workspace, debuggerWorkspaceBinding} = setUpEnvironment();
-      Bindings.IgnoreListManager.IgnoreListManager.instance({forceNew: false, debuggerWorkspaceBinding});
+      const {workspace} = setUpEnvironment();
+      Workspace.IgnoreListManager.IgnoreListManager.instance({forceNew: false});
 
       if (!project) {
         project = {id: () => url, type: () => Workspace.Workspace.projectTypes.Network} as Workspace.Workspace.Project;
@@ -97,7 +96,7 @@ describeWithEnvironment('FilteredUISourceCodeListProvider', () => {
 
     // ignore the uiSourceCode
     Root.Runtime.experiments.setEnabled(Root.Runtime.ExperimentName.JUST_MY_CODE, true);
-    Bindings.IgnoreListManager.IgnoreListManager.instance().ignoreListUISourceCode(uiSourceCode);
+    Workspace.IgnoreListManager.IgnoreListManager.instance().ignoreListUISourceCode(uiSourceCode);
 
     const filteredUISourceCodeListProvider =
         new Sources.FilteredUISourceCodeListProvider.FilteredUISourceCodeListProvider('test');

package/front_end/panels/sources/FilteredUISourceCodeListProvider.ts

@@ -5,7 +5,6 @@
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
-import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
@@ -15,12 +14,12 @@ import {FilePathScoreFunction} from './FilePathScoreFunction.js';
 
 const UIStrings = {
   /**
-   *@description Text in Filtered UISource Code List Provider of the Sources panel
+   * @description Text in Filtered UISource Code List Provider of the Sources panel
    */
   noFilesFound: 'No files found',
   /**
-   *@description Name of an item that is on the ignore list
-   *@example {compile.html} PH1
+   * @description Name of an item that is on the ignore list
+   * @example {compile.html} PH1
    */
   sIgnoreListed: '{PH1} (ignore listed)',
 } as const;
@@ -70,7 +69,7 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
       return false;
     }
     if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.JUST_MY_CODE) &&
-        Bindings.IgnoreListManager.IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(
+        Workspace.IgnoreListManager.IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(
             uiSourceCode)) {
       return false;
     }
@@ -134,7 +133,7 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
     if (uiSourceCode.contentType().isScript()) {
       // Bonus points for being a script if it is not ignore-listed. Note
       // that ignore listing logic does not apply to non-scripts.
-      if (!Bindings.IgnoreListManager.IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(
+      if (!Workspace.IgnoreListManager.IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(
               uiSourceCode)) {
         contentTypeBonus += 50;
       }
@@ -153,7 +152,8 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
     new FilePathScoreFunction(query).calculateScore(fullDisplayName, indexes);
     const fileNameIndex = fullDisplayName.lastIndexOf('/');
     const isIgnoreListed =
-        Bindings.IgnoreListManager.IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(uiSourceCode);
+        Workspace.IgnoreListManager.IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(
+            uiSourceCode);
     let tooltipText = fullDisplayName;
 
     if (isIgnoreListed) {