chrome-devtools-frontend 1.0.1548980 → 1.0.1550444

package/front_end/panels/sources/CSSPlugin.ts

@@ -13,7 +13,7 @@ import * as Bindings from '../../models/bindings/bindings.js';
 import * as Geometry from '../../models/geometry/geometry.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 {createIcon, type Icon} from '../../ui/kit/kit.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';
@@ -61,7 +61,7 @@ function findPropertyAt(node: CodeMirror.SyntaxNode, pos: number): CodeMirror.Sy
 }
 
 function getCurrentStyleSheet(
-    url: Platform.DevToolsPath.UrlString, cssModel: SDK.CSSModel.CSSModel): Protocol.CSS.StyleSheetId {
+    url: Platform.DevToolsPath.UrlString, cssModel: SDK.CSSModel.CSSModel): Protocol.DOM.StyleSheetId {
   const currentStyleSheet = cssModel.getStyleSheetIdsForURL(url);
   if (currentStyleSheet.length === 0) {
     throw new Error('Can\'t find style sheet ID for current URL');
@@ -211,7 +211,7 @@ class CurveSwatchWidget extends CodeMirror.WidgetType {
   toDOM(view: CodeMirror.EditorView): HTMLElement {
     const container = document.createElement('span');
     const bezierText = container.createChild('span');
-    const icon = IconButton.Icon.create('bezier-curve-filled', 'bezier-swatch-icon');
+    const icon = createIcon('bezier-curve-filled', 'bezier-swatch-icon');
     icon.setAttribute('jslog', `${VisualLogging.showStyleEditor('bezier')}`);
     bezierText.append(this.text);
     UI.Tooltip.Tooltip.install(icon, i18nString(UIStrings.openCubicBezierEditor));
@@ -251,7 +251,7 @@ type ActiveTooltip = {
   pos: number,
   text: string,
   curve: Geometry.CubicBezier,
-  swatch: IconButton.Icon.Icon,
+  swatch: Icon,
 };
 
 function createCSSTooltip(active: ActiveTooltip): CodeMirror.Tooltip {

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -38,7 +38,7 @@ 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 * as Workspace from '../../models/workspace/workspace.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -126,7 +126,7 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     this.notPausedMessageElement.tabIndex = -1;
 
     this.callFrameWarningsElement = this.contentElement.createChild('div', 'call-frame-warnings-message');
-    const icon = new IconButton.Icon.Icon();
+    const icon = new Icon();
     icon.name = 'warning-filled';
     icon.classList.add('call-frame-warning-icon', 'small');
     this.callFrameWarningsElement.appendChild(icon);
@@ -330,14 +330,14 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     element.classList.toggle('selected', isSelected);
     UI.ARIAUtils.setSelected(element, isSelected);
     element.classList.toggle('hidden', !this.showIgnoreListed && item.isIgnoreListed);
-    const icon = new IconButton.Icon.Icon();
+    const icon = new 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();
+      const icon = new Icon();
       icon.name = 'warning-filled';
       icon.classList.add('call-frame-warning-icon', 'small');
       const messages = callframe.missingDebugInfoDetails.resources.map(

package/front_end/panels/sources/DebuggerPausedMessage.ts

@@ -9,8 +9,8 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import type * as Bindings from '../../models/bindings/bindings.js';
 import type * as BreakpointManager from '../../models/breakpoints/breakpoints.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as PanelsCommon from '../common/common.js';
@@ -158,7 +158,7 @@ export class DebuggerPausedMessage {
     }
 
     const mainElement = messageWrapper.createChild('div', 'status-main');
-    const mainIcon = new IconButton.Icon.Icon();
+    const mainIcon = new Icon();
     mainIcon.name = 'info';
     mainIcon.style.color = 'var(--sys-color-on-yellow-container)';
     mainIcon.classList.add('medium');
@@ -290,7 +290,7 @@ export class DebuggerPausedMessage {
     function buildWrapper(mainText: string, subText?: string, title?: string): Element {
       const messageWrapper = document.createElement('span');
       const mainElement = messageWrapper.createChild('div', 'status-main');
-      const mainIcon = new IconButton.Icon.Icon();
+      const mainIcon = new Icon();
       mainIcon.name = errorLike ? 'cross-circle-filled' : 'info';
       mainIcon.style.color = errorLike ? 'var(--icon-error)' : 'var(--sys-color-on-yellow-container)';
       mainIcon.classList.add('medium');

package/front_end/panels/sources/FilteredUISourceCodeListProvider.ts

@@ -2,15 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/components/highlighting/highlighting.js';
+
 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 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';
-import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, type TemplateResult} from '../../ui/lit/lit.js';
 
 import {FilePathScoreFunction} from './FilePathScoreFunction.js';
+import filteredUISourceCodeListProviderStyles from './filteredUISourceCodeListProvider.css.js';
 
 const UIStrings = {
   /**
@@ -23,8 +26,11 @@ const UIStrings = {
    */
   sIgnoreListed: '{PH1} (ignore listed)',
 } as const;
+
 const str_ = i18n.i18n.registerUIStrings('panels/sources/FilteredUISourceCodeListProvider.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {classMap} = Directives;
+
 export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidget.Provider {
   private queryLineNumberAndColumnNumber: string;
   private defaultScores: Map<Workspace.UISourceCode.UISourceCode, number>|null;
@@ -143,8 +149,7 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
     return score + multiplier * (contentTypeBonus + this.scorer.calculateScore(fullDisplayName, null));
   }
 
-  override renderItem(itemIndex: number, query: string, titleElement: Element, subtitleElement: Element): void {
-    titleElement.parentElement?.parentElement?.classList.toggle('search-mode', Boolean(query));
+  override renderItem(itemIndex: number, query: string): TemplateResult {
     query = this.rewriteQuery(query);
     const uiSourceCode = this.uiSourceCodes[itemIndex];
     const fullDisplayName = uiSourceCode.fullDisplayName();
@@ -157,41 +162,53 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
     let tooltipText = fullDisplayName;
 
     if (isIgnoreListed) {
-      titleElement.parentElement?.classList.add('is-ignore-listed');
       tooltipText = i18nString(UIStrings.sIgnoreListed, {PH1: tooltipText});
     }
 
-    titleElement.textContent = uiSourceCode.displayName() + (this.queryLineNumberAndColumnNumber || '');
-    this.renderSubtitleElement(subtitleElement, fullDisplayName.substring(0, fileNameIndex + 1));
-    UI.Tooltip.Tooltip.install((subtitleElement as HTMLElement), tooltipText);
-
-    const ranges = [];
-    for (let i = 0; i < indexes.length; ++i) {
-      ranges.push({offset: indexes[i], length: 1});
-    }
+    const titleRanges = [];
+    const subtitleRanges = [];
 
     if (indexes[0] > fileNameIndex) {
-      for (let i = 0; i < ranges.length; ++i) {
-        ranges[i].offset -= fileNameIndex + 1;
+      for (let i = 0; i < indexes.length; ++i) {
+        titleRanges.push({offset: indexes[i] - (fileNameIndex + 1), length: 1});
       }
-      UI.UIUtils.highlightRangesWithStyleClass(titleElement, ranges, 'highlight');
     } else {
-      UI.UIUtils.highlightRangesWithStyleClass(subtitleElement, ranges, 'highlight');
+      for (let i = 0; i < indexes.length; ++i) {
+        subtitleRanges.push({offset: indexes[i], length: 1});
+      }
     }
+    // clang-format off
+    return html`
+      <style>${filteredUISourceCodeListProviderStyles}</style>
+      <div class="filtered-ui-source-code-list-item
+                  ${classMap({'is-ignore-listed': isIgnoreListed})}">
+        <devtools-highlight
+            type="markup"
+            ranges=${titleRanges.map(r => `${r.offset},${r.length}`).join(' ')}
+            class="filtered-ui-source-code-title ${classMap({'search-mode': Boolean(query)})}">
+          ${uiSourceCode.displayName() + (this.queryLineNumberAndColumnNumber || '')}
+        </devtools-highlight>
+        <devtools-highlight
+            type="markup"
+            ranges=${subtitleRanges.map(r => `${r.offset},${r.length}`).join(' ')}
+            class="filtered-ui-source-code-subtitle" title=${tooltipText}>
+          ${this.renderSubtitleElement(fullDisplayName.substring(0, fileNameIndex + 1))}
+        </devtools-highlight>
+      </div>`;
+    // clang-format on
   }
 
-  private renderSubtitleElement(element: Element, text: string): void {
-    element.removeChildren();
+  private renderSubtitleElement(text: string): TemplateResult {
     let splitPosition = text.lastIndexOf('/');
     const maxTextLength = 43;
     if (text.length > maxTextLength) {
       splitPosition = text.length - maxTextLength;
     }
-    const first = element.createChild('div', 'first-part');
-    first.textContent = text.substring(0, splitPosition);
-    const second = element.createChild('div', 'second-part');
-    second.textContent = text.substring(splitPosition);
-    UI.Tooltip.Tooltip.install((element as HTMLElement), text);
+    // clang-format off
+    return html`
+      <div class="first-part">${text.substring(0, splitPosition)}</div>
+      <div class="second-part">${text.substring(splitPosition)}</div>`;
+    // clang-format on
   }
 
   override selectItem(itemIndex: number|null, promptValue: string): void {

package/front_end/panels/sources/GoToLineQuickOpen.ts

@@ -2,10 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/kit/kit.js';
+
 import * as i18n from '../../core/i18n/i18n.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, type TemplateResult} from '../../ui/lit/lit.js';
 
 import {SourcesView} from './SourcesView.js';
 import type {UISourceCodeFrame} from './UISourceCodeFrame.js';
@@ -77,10 +79,14 @@ export class GoToLineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
     return this.#goToLineStrings.length;
   }
 
-  override renderItem(itemIndex: number, _query: string, titleElement: Element, _subtitleElement: Element): void {
-    const icon = IconButton.Icon.create('colon');
-    titleElement.parentElement?.parentElement?.insertBefore(icon, titleElement.parentElement);
-    UI.UIUtils.createTextChild(titleElement, this.#goToLineStrings[itemIndex]);
+  override renderItem(itemIndex: number, _query: string): TemplateResult {
+    // clang-format off
+    return html`
+      <devtools-icon name="colon"></devtools-icon>
+      <div>
+        <div>${this.#goToLineStrings[itemIndex]}</div>
+      </div>`;
+    // clang-format on
   }
 
   override rewriteQuery(_query: string): string {

package/front_end/panels/sources/NavigatorView.ts

@@ -15,8 +15,8 @@ import * as Persistence from '../../models/persistence/persistence.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as Spinners from '../../ui/components/spinners/spinners.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as Snippets from '../snippets/snippets.js';
@@ -819,9 +819,9 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     }
     if (this.scriptsTree.selectedTreeElement) {
       // If the tree outline is being marked as "being edited" (i.e. we're renaming a file
-      // or chosing the name for a new snippet), we shall not proceed with revealing here,
+      // or choosing the name for a new snippet), we shall not proceed with revealing here,
       // as that will steal focus from the input widget and thus cancel editing. The
-      // test/e2e/snippets/breakpoint_test.ts exercises this.
+      // test/e2e/snippets/breakpoint.test.ts exercises this.
       if (UI.UIUtils.isBeingEdited(this.scriptsTree.selectedTreeElement.treeOutline?.element)) {
         return null;
       }
@@ -1287,7 +1287,7 @@ export class NavigatorFolderTreeElement extends UI.TreeOutline.TreeElement {
       iconType = 'folder-asterisk';
     }
 
-    const icon = IconButton.Icon.create(iconType);
+    const icon = createIcon(iconType);
     this.setLeadingIcons([icon]);
   }
 

package/front_end/panels/sources/OpenFileQuickOpen.ts

@@ -1,17 +1,20 @@
 // Copyright 2012 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
+
+import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
 import {PanelUtils} from '../../panels/utils/utils.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {Directives, html, type TemplateResult} from '../../ui/lit/lit.js';
 
 import {FilteredUISourceCodeListProvider} from './FilteredUISourceCodeListProvider.js';
 import {SourcesView} from './SourcesView.js';
 
+const {styleMap} = Directives;
+
 export class OpenFileQuickOpen extends FilteredUISourceCodeListProvider {
   constructor() {
     super('source-file');
@@ -40,20 +43,12 @@ export class OpenFileQuickOpen extends FilteredUISourceCodeListProvider {
     return !project.isServiceProject();
   }
 
-  override renderItem(itemIndex: number, query: string, titleElement: Element, subtitleElement: Element): void {
-    super.renderItem(itemIndex, query, titleElement, subtitleElement);
-
-    const iconElement = new IconButton.Icon.Icon();
+  override renderItem(itemIndex: number, query: string): TemplateResult {
     const {iconName, color} = PanelUtils.iconDataForResourceType(this.itemContentTypeAt(itemIndex));
-    iconElement.name = iconName;
-    if (color) {
-      iconElement.style.color = color;
-    }
-    iconElement.classList.add('large');
-    titleElement.parentElement?.parentElement?.insertBefore(iconElement, titleElement.parentElement);
-  }
-
-  override renderAsTwoRows(): boolean {
-    return true;
+    // clang-format off
+    return html`
+      <devtools-icon class="large" name=${iconName} style=${styleMap({color})}></devtools-icon>
+      ${super.renderItem(itemIndex, query)}`;
+    // clang-format on
   }
 }

package/front_end/panels/sources/OutlineQuickOpen.ts

@@ -2,11 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/kit/kit.js';
+import '../../ui/components/highlighting/highlighting.js';
+
 import * as i18n from '../../core/i18n/i18n.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 QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, nothing, type TemplateResult} from '../../ui/lit/lit.js';
 
 import {SourcesView} from './SourcesView.js';
 import type {UISourceCodeFrame} from './UISourceCodeFrame.js';
@@ -317,31 +320,28 @@ export class OutlineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
     return -item.lineNumber - 1;
   }
 
-  override renderItem(itemIndex: number, query: string, titleElement: Element, _subtitleElement: Element): void {
+  override renderItem(itemIndex: number, query: string): TemplateResult {
     const item = this.items[itemIndex];
-    const icon = IconButton.Icon.create('deployed');
-    titleElement.parentElement?.parentElement?.insertBefore(icon, titleElement.parentElement);
-    titleElement.textContent = item.title + (item.subtitle ? item.subtitle : '');
-    QuickOpen.FilteredListWidget.FilteredListWidget.highlightRanges(titleElement, query);
-
+    let location: string|undefined;
     const sourceFrame = this.currentSourceFrame();
-    if (!sourceFrame) {
-      return;
-    }
-
-    const tagElement = titleElement.parentElement?.parentElement?.createChild('span', 'tag');
-    if (!tagElement) {
-      return;
-    }
-
-    const disassembly = sourceFrame.wasmDisassembly;
-    if (disassembly) {
-      const lastBytecodeOffset = disassembly.lineNumberToBytecodeOffset(disassembly.lineNumbers - 1);
-      const bytecodeOffsetDigits = lastBytecodeOffset.toString(16).length;
-      tagElement.textContent = `:0x${item.columnNumber.toString(16).padStart(bytecodeOffsetDigits, '0')}`;
-    } else {
-      tagElement.textContent = `:${item.lineNumber + 1}`;
+    if (sourceFrame) {
+      const disassembly = sourceFrame.wasmDisassembly;
+      if (disassembly) {
+        const lastBytecodeOffset = disassembly.lineNumberToBytecodeOffset(disassembly.lineNumbers - 1);
+        const bytecodeOffsetDigits = lastBytecodeOffset.toString(16).length;
+        location = `:0x${item.columnNumber.toString(16).padStart(bytecodeOffsetDigits, '0')}`;
+      } else {
+        location = `:${item.lineNumber + 1}`;
+      }
     }
+    const title = item.title + (item.subtitle ? item.subtitle : '');
+    const highlightRanges = QuickOpen.FilteredListWidget.FilteredListWidget.getHighlightRanges(title, query, true);
+    // clang-format off
+    return html`
+      <devtools-icon name="deployed"></devtools-icon>
+      <div><devtools-highlight type="markup" ranges=${highlightRanges}>${title}</devtools-highlight></div>
+      ${location ? html`<span class="tag">${location}</span>` : nothing}`;
+    // clang-format on
   }
 
   override selectItem(itemIndex: number|null, _promptValue: string): void {

package/front_end/panels/sources/ProfilePlugin.ts

@@ -8,6 +8,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
+import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 
 import {Plugin} from './Plugin.js';
 
@@ -89,20 +90,16 @@ class PerformanceMarker extends CodeMirror.GutterMarker {
 }
 
 function markersFromProfileData(
-    map: Map<number, number>|Map<number, Map<number, number>>, state: CodeMirror.EditorState,
+    map: Workspace.UISourceCode.LineColumnProfileMap, state: CodeMirror.EditorState,
     type: Workspace.UISourceCode.DecoratorType): CodeMirror.RangeSet<CodeMirror.GutterMarker> {
   const markerType = type === Workspace.UISourceCode.DecoratorType.PERFORMANCE ? PerformanceMarker : MemoryMarker;
   const markers: Array<CodeMirror.Range<CodeMirror.GutterMarker>> = [];
   const aggregatedByLine = new Map<number, number>();
   for (const [line, value] of map) {
     if (line <= state.doc.lines) {
-      if (value instanceof Map) {
-        for (const [, data] of value) {
-          aggregatedByLine.set(line, (aggregatedByLine.get(line) || 0) + data);
-        }
-        continue;
+      for (const [, data] of value) {
+        aggregatedByLine.set(line, (aggregatedByLine.get(line) || 0) + data);
       }
-      aggregatedByLine.set(line, value);
     }
   }
   for (const [line, value] of aggregatedByLine) {
@@ -112,13 +109,15 @@ function markersFromProfileData(
   return CodeMirror.RangeSet.of(markers, true);
 }
 
-const makeLineLevelProfilePlugin = (type: Workspace.UISourceCode.DecoratorType): typeof Plugin => class extends Plugin {
-  updateEffect = CodeMirror.StateEffect.define<Map<number, number>|Map<number, Map<number, number>>>();
+const makeLineLevelProfilePlugin = (type: Workspace.UISourceCode.DecoratorType): typeof Plugin =>
+    class ProfilePlugin extends Plugin {
+  updateEffect = CodeMirror.StateEffect.define<Workspace.UISourceCode.LineColumnProfileMap>();
   field: CodeMirror.StateField<CodeMirror.RangeSet<CodeMirror.GutterMarker>>;
   gutter: CodeMirror.Extension;
   compartment: CodeMirror.Compartment = new CodeMirror.Compartment();
+  readonly #transformer: SourceFrame.SourceFrame.Transformer;
 
-  constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode) {
+  constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode, transformer: SourceFrame.SourceFrame.Transformer) {
     super(uiSourceCode);
 
     this.field = CodeMirror.StateField.define<CodeMirror.RangeSet<CodeMirror.GutterMarker>>({
@@ -136,14 +135,24 @@ const makeLineLevelProfilePlugin = (type: Workspace.UISourceCode.DecoratorType):
       markers: view => view.state.field(this.field),
       class: `cm-${type}Gutter`,
     });
+
+    this.#transformer = transformer;
   }
 
   static override accepts(uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {
     return uiSourceCode.contentType().hasScripts();
   }
 
-  private getLineMap(): Map<number, number>|Map<number, Map<number, number>>|undefined {
-    return this.uiSourceCode.getDecorationData(type);
+  private getLineMap(): Workspace.UISourceCode.LineColumnProfileMap|undefined {
+    const uiSourceCodeProfileMap = this.uiSourceCode.getDecorationData(type);
+    if (!uiSourceCodeProfileMap) {
+      return undefined;
+    }
+
+    return Workspace.UISourceCode.createMappedProfileData(uiSourceCodeProfileMap, (line, column) => {
+      const editorLocation = this.#transformer.uiLocationToEditorLocation(line, column);
+      return [editorLocation.lineNumber, editorLocation.columnNumber];
+    });
   }
 
   override editorExtension(): CodeMirror.Extension {

package/front_end/panels/sources/SourcesView.ts

@@ -13,7 +13,7 @@ import * as SDK from '../../core/sdk/sdk.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 IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -149,7 +149,7 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     const workspaceElement = placeholder.createChild('div', 'tabbed-pane-placeholder-row');
     workspaceElement.classList.add('workspace');
 
-    const icon = IconButton.Icon.create('sync', 'sync-icon');
+    const icon = createIcon('sync', 'sync-icon');
     workspaceElement.createChild('span', 'icon-container').appendChild(icon);
     const text = workspaceElement.createChild('span');
     text.textContent = UIStrings.workspaceDropInAFolderToSyncSources;

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -1,7 +1,6 @@
 // Copyright 2011 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -10,9 +9,9 @@ import * as Persistence from '../../models/persistence/persistence.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as Tooltips from '../../ui/components/tooltips/tooltips.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * 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';
@@ -527,7 +526,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
   }
 
   private addLoadErrorIcon(tabId: string): void {
-    const icon = new IconButton.Icon.Icon();
+    const icon = new Icon();
     icon.name = 'cross-circle-filled';
     icon.classList.add('small');
     UI.Tooltip.Tooltip.install(icon, i18nString(UIStrings.unableToLoadThisContent));
@@ -606,7 +605,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
       const tooltip = this.tooltipForFile(uiSourceCode);
       this.tabbedPane.changeTabTitle(tabId, title, tooltip);
       if (uiSourceCode.loadError()) {
-        const icon = new IconButton.Icon.Icon();
+        const icon = new Icon();
         icon.name = 'cross-circle-filled';
         icon.classList.add('small');
         UI.Tooltip.Tooltip.install(icon, i18nString(UIStrings.unableToLoadThisContent));
@@ -617,7 +616,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
          * and we will use a toast instead once available.
          **/
         const suffixElement = document.createElement('div');
-        const icon = new IconButton.Icon.Icon();
+        const icon = new Icon();
         icon.name = 'warning-filled';
         icon.classList.add('small');
         const id = `tab-tooltip-${nextTooltipId++}`;

package/front_end/panels/sources/ThreadsSidebarPane.ts

@@ -6,7 +6,7 @@
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -54,7 +54,7 @@ export class ThreadsSidebarPane extends UI.Widget.VBox implements
     element.classList.add('thread-item');
     const title = element.createChild('div', 'thread-item-title');
     const pausedState = element.createChild('div', 'thread-item-paused-state');
-    const icon = new IconButton.Icon.Icon();
+    const icon = new Icon();
     icon.name = 'large-arrow-right-filled';
     icon.classList.add('selected-thread-icon', 'small');
     element.appendChild(icon);

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -14,9 +14,9 @@ import * as Persistence from '../../models/persistence/persistence.js';
 import * as TextUtils from '../../models/text_utils/text_utils.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 IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
+import {Icon, type IconWithName} from '../../ui/kit/kit.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -238,7 +238,6 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
   }
 
   override async setContent(content: string): Promise<void> {
-    this.#uiSourceCode.formatChanged(this.formattedMap);
     this.disposePlugins();
     this.loadPlugins();
     await super.setContent(content);
@@ -529,7 +528,7 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
   }
 }
 
-function getIconDataForLevel(level: Workspace.UISourceCode.Message.Level): IconButton.Icon.IconWithName {
+function getIconDataForLevel(level: Workspace.UISourceCode.Message.Level): IconWithName {
   if (level === Workspace.UISourceCode.Message.Level.ERROR) {
     return {color: 'var(--icon-error)', width: '16px', height: '14px', iconName: 'cross-circle-filled'};
   }
@@ -562,7 +561,7 @@ function messageLevelComparator(a: RowMessage, b: RowMessage): number {
   return messageLevelPriority[a.level()] - messageLevelPriority[b.level()];
 }
 
-function getIconDataForMessage(message: RowMessage): IconButton.Icon.IconWithName {
+function getIconDataForMessage(message: RowMessage): IconWithName {
   if (message.origin instanceof IssuesManager.SourceFrameIssuesManager.IssueMessage) {
     return {iconName: IssueCounter.IssueCounter.getIssueKindIconName(message.origin.getIssueKind())};
   }
@@ -743,8 +742,8 @@ class RowMessageDecorations {
   }
 }
 
-function createIconFromIconData(data: IconButton.Icon.IconWithName): IconButton.Icon.Icon {
-  const icon = new IconButton.Icon.Icon();
+function createIconFromIconData(data: IconWithName): Icon {
+  const icon = new Icon();
   icon.name = data.iconName;
   if (data.width) {
     icon.style.width = data.width;