chrome-devtools-frontend 1.0.1549484 → 1.0.1550444

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,34 +320,28 @@ export class OutlineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
     return -item.lineNumber - 1;
   }
 
-  override renderItem(itemIndex: number, query: string, wrapperElement: Element): void {
+  override renderItem(itemIndex: number, query: string): TemplateResult {
     const item = this.items[itemIndex];
-    const itemElement = wrapperElement.createChild('div');
-    const titleElement = itemElement.createChild('div');
-
-    const icon = IconButton.Icon.create('deployed');
-    wrapperElement.insertBefore(icon, itemElement);
-    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 = wrapperElement.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/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';
 
@@ -528,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'};
   }
@@ -561,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())};
   }
@@ -742,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;

package/front_end/panels/timeline/TimelineHistoryManager.ts

@@ -7,7 +7,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Trace from '../../models/trace/trace.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.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';
 
@@ -582,7 +582,7 @@ export class DropDown implements UI.ListControl.ListDelegate<number> {
 
     div.style.width = `${previewWidth}px`;
 
-    const icon = IconButton.Icon.create('arrow-back');
+    const icon = createIcon('arrow-back');
     icon.title = i18nString(UIStrings.backButtonTooltip);
     icon.classList.add('back-arrow');
     div.appendChild(icon);

package/front_end/panels/timeline/TimelinePanel.ts

@@ -431,8 +431,11 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   #onMainEntryHovered: (event: Common.EventTarget.EventTargetEvent<number>) => void;
   #hiddenTracksInfoBarByParsedTrace = new WeakMap<Trace.TraceModel.ParsedTrace, UI.Infobar.Infobar|'DISMISSED'>();
 
-  constructor(traceModel?: Trace.TraceModel.Model) {
+  readonly #resourceLoader: SDK.PageResourceLoader.ResourceLoader;
+
+  constructor(resourceLoader: SDK.PageResourceLoader.ResourceLoader, traceModel?: Trace.TraceModel.Model) {
     super('timeline');
+    this.#resourceLoader = resourceLoader;
     this.registerRequiredCSS(timelinePanelStyles);
     const adornerContent = document.createElement('span');
     adornerContent.innerHTML = `<div style="
@@ -698,13 +701,16 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   static instance(opts: {
-    forceNew: boolean|null,
+    forceNew: true,
+    resourceLoader: SDK.PageResourceLoader.ResourceLoader,
     traceModel?: Trace.TraceModel.Model,
-  }|undefined = {forceNew: null}): TimelinePanel {
-    const {forceNew} = opts;
+  }|undefined = undefined): TimelinePanel {
+    if (opts) {
+      timelinePanelInstance = new TimelinePanel(opts.resourceLoader, opts.traceModel);
+    }
 
-    if (!timelinePanelInstance || forceNew) {
-      timelinePanelInstance = new TimelinePanel(opts.traceModel);
+    if (!timelinePanelInstance) {
+      throw new Error('No TimelinePanel instance');
     }
 
     return timelinePanelInstance;
@@ -2643,8 +2649,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
           initiatorUrl: script.url as Platform.DevToolsPath.UrlString
         };
         rawSourceMap = await SDK.SourceMapManager.tryLoadSourceMap(
-            SDK.PageResourceLoader.PageResourceLoader.instance(),
-            script.sourceMapUrl as Platform.DevToolsPath.UrlString, initiator);
+            this.#resourceLoader, script.sourceMapUrl as Platform.DevToolsPath.UrlString, initiator);
       }
 
       if (script.url && rawSourceMap) {
@@ -2747,7 +2752,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         initiatorUrl: sourceUrl
       };
       const payload = await SDK.SourceMapManager.tryLoadSourceMap(
-          SDK.PageResourceLoader.PageResourceLoader.instance(), sourceMapUrl, initiator);
+          TimelinePanel.instance().#resourceLoader, sourceMapUrl, initiator);
       return payload ? new SDK.SourceMap.SourceMap(sourceUrl, sourceMapUrl, payload) : null;
     };
   }

package/front_end/panels/timeline/components/CPUThrottlingSelector.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 import '../../../ui/components/menus/menus.js';
 
 import * as Common from '../../../core/common/common.js';

package/front_end/panels/timeline/components/LiveMetricsView.ts

@@ -5,7 +5,7 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/components/settings/settings.js';
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 import './FieldSettingsDialog.js';
 import './NetworkThrottlingSelector.js';
 import '../../../ui/components/menus/menus.js';

package/front_end/panels/timeline/components/NetworkRequestTooltip.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';

package/front_end/panels/timeline/components/NetworkThrottlingSelector.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 import '../../../ui/components/menus/menus.js';
 
 import * as Common from '../../../core/common/common.js';

package/front_end/panels/timeline/components/OriginMap.ts

@@ -4,7 +4,7 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';

package/front_end/panels/timeline/components/insights/Checklist.ts

@@ -7,7 +7,7 @@
  * @file A list of pass/fail conditions for an insight.
  */
 
-import '../../../../ui/components/icon_button/icon_button.js';
+import '../../../../ui/kit/kit.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as Trace from '../../../../models/trace/trace.js';

package/front_end/panels/timeline/components/insights/DOMSize.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../../ui/components/icon_button/icon_button.js';
+import '../../../../ui/kit/kit.js';
 import './Table.js';
 import './NodeLink.js';
 

package/front_end/panels/timeline/components/insights/ImageDelivery.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../../ui/components/icon_button/icon_button.js';
+import '../../../../ui/kit/kit.js';
 
 import type {ImageDeliveryInsightModel} from '../../../../models/trace/insights/ImageDelivery.js';
 import * as Trace from '../../../../models/trace/trace.js';

package/front_end/panels/timeline/components/insights/NetworkDependencyTree.ts

@@ -4,7 +4,7 @@
 
 import './Table.js';
 import './NodeLink.js';
-import '../../../../ui/components/icon_button/icon_button.js';
+import '../../../../ui/kit/kit.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type {

package/front_end/panels/timeline/overlays/components/EntriesLinkOverlay.ts

@@ -1,7 +1,7 @@
 // Copyright 2024 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-import '../../../../ui/components/icon_button/icon_button.js';
+import '../../../../ui/kit/kit.js';
 
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 

package/front_end/panels/timeline/overlays/components/EntryLabelOverlay.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../../ui/components/icon_button/icon_button.js';
+import '../../../../ui/kit/kit.js';
 import '../../../../ui/components/tooltips/tooltips.js';
 import '../../../../ui/components/spinners/spinners.js';
 

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

@@ -87,9 +87,10 @@ UI.ViewManager.registerViewExtension({
   title: i18nLazyString(UIStrings.performance),
   commandPrompt: i18nLazyString(UIStrings.showPerformance),
   order: 50,
-  async loadView() {
+  async loadView(universe) {
     const Timeline = await loadTimelineModule();
-    return Timeline.TimelinePanel.TimelinePanel.instance();
+    const resourceLoader = universe.context.get(SDK.PageResourceLoader.PageResourceLoader);
+    return Timeline.TimelinePanel.TimelinePanel.instance({forceNew: true, resourceLoader});
   },
 });
 

package/front_end/panels/utils/utils.ts

@@ -2,6 +2,7 @@
 // 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/icon_button/icon_button.js';
 
 import * as Common from '../../core/common/common.js';

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://chromium.googlesource.com/chromium/src
 Version: N/A
-Revision: 3e09060fabbdeb607bc7ed4db07e88ef0112f839
+Revision: 5bbbb9ffe6bf19fdc31b46add466cd6ef53d75b4
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/components/adorners/Adorner.ts

@@ -16,7 +16,12 @@ export interface AdornerData {
   jslogContext?: string;
 }
 
+/**
+ * @deprecated Do not add new usages. The custom component will be removed an
+ * embedded into the corresponding views.
+ */
 export class Adorner extends HTMLElement {
+  static readonly observedAttributes = ['active', 'toggleable'];
   name = '';
 
   readonly #shadow = this.attachShadow({mode: 'open'});
@@ -53,6 +58,21 @@ export class Adorner extends HTMLElement {
     this.#render();
   }
 
+  attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
+    if (oldValue === newValue) {
+      return;
+    }
+
+    switch (name) {
+      case 'active':
+        this.toggle(newValue === 'true');
+        break;
+      case 'toggleable':
+        this.#isToggle = newValue === 'true';
+        break;
+    }
+  }
+
   isActive(): boolean {
     return this.getAttribute('aria-pressed') === 'true';
   }

package/front_end/ui/components/annotations/AnnotationRepository.ts

@@ -19,7 +19,7 @@ interface BaseAnnotationData {
   anchorToString?: string;
 }
 
-interface ElementsAnnotationData extends BaseAnnotationData {
+export interface ElementsAnnotationData extends BaseAnnotationData {
   type: AnnotationType.ELEMENT_NODE;
   anchor?: SDK.DOMModel.DOMNode;
 }

package/front_end/ui/components/buttons/Button.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import '../icon_button/icon_button.js';
+import '../../kit/kit.js';
 
 import * as Lit from '../../lit/lit.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';

package/front_end/ui/components/buttons/FloatingButton.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
-import '../icon_button/icon_button.js';
+import '../../kit/kit.js';
 
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Lit from '../../lit/lit.js';

package/front_end/ui/components/highlighting/HighlightElement.ts

@@ -6,11 +6,14 @@
 import * as TextUtils from '../../../models/text_utils/text_utils.js';
 
 import {HighlightManager} from './HighlightManager.js';
+import {type HighlightChange, highlightRangesWithStyleClass, revertDomChanges} from './MarkupHighlight.js';
 
 export class HighlightElement extends HTMLElement {
-  static readonly observedAttributes = ['ranges', 'current-range'];
+  static readonly observedAttributes = ['ranges', 'current-range', 'type'];
   #ranges: TextUtils.TextRange.SourceRange[] = [];
   #currentRange: TextUtils.TextRange.SourceRange|undefined;
+  #type = 'css';
+  #markupChanges: HighlightChange[] = [];
 
   attributeChangedCallback(name: string, oldValue: string|null, newValue: string|null): void {
     if (oldValue === newValue) {
@@ -23,8 +26,18 @@ export class HighlightElement extends HTMLElement {
       case 'current-range':
         this.#currentRange = parseRanges(newValue)[0];
         break;
+      case 'type':
+        this.#type = newValue || 'css';
+        break;
     }
-    HighlightManager.instance().set(this, this.#ranges, this.#currentRange);
+    queueMicrotask(() => {
+      if (this.#type === 'css') {
+        HighlightManager.instance().set(this, this.#ranges, this.#currentRange);
+      } else {
+        revertDomChanges(this.#markupChanges);
+        highlightRangesWithStyleClass(this, this.#ranges, 'highlight', this.#markupChanges);
+      }
+    });
   }
 }
 

package/front_end/ui/components/icon_button/FileSourceIcon.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import './IconButton.js';
+import '../../kit/kit.js';
 
 import {Directives, html, render} from '../../lit/lit.js';
 

package/front_end/ui/components/icon_button/IconButton.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import './Icon.js';
+import '../../kit/kit.js';
 
 import * as Lit from '../../lit/lit.js';
 

package/front_end/ui/components/icon_button/icon_button.ts

@@ -3,11 +3,9 @@
 // found in the LICENSE file.
 
 import * as FileSourceIcon from './FileSourceIcon.js';
-import * as Icon from './Icon.js';
 import * as IconButton from './IconButton.js';
 
 export {
   FileSourceIcon,
-  Icon,
   IconButton,
 };

package/front_end/ui/components/issue_counter/IssueCounter.ts

@@ -8,8 +8,8 @@ import '../icon_button/icon_button.js';
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as IssuesManager from '../../../models/issues_manager/issues_manager.js';
+import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import {html, render} from '../../lit/lit.js';
-import type * as IconButton from '../icon_button/icon_button.js';
 
 import issueCounterStyles from './issueCounter.css.js';
 

package/front_end/ui/components/issue_counter/IssueLinkIcon.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';

package/front_end/ui/components/markdown_view/MarkdownImage.ts

@@ -3,9 +3,9 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import '../../components/icon_button/icon_button.js';
+import '../../kit/kit.js';
 
-import type * as IconButton from '../../components/icon_button/icon_button.js';
+import type {IconData} from '../../kit/kit.js';
 import * as Lit from '../../lit/lit.js';
 
 import markdownImageStyles from './markdownImage.css.js';
@@ -42,7 +42,7 @@ export class MarkdownImage extends HTMLElement {
     }
     const {src, color, width = '100%', height = '100%'} = this.#imageData;
     return html`
-      <devtools-icon .data=${{iconPath: src, color, width, height} as IconButton.Icon.IconData}></devtools-icon>
+      <devtools-icon .data=${{iconPath: src, color, width, height} as IconData}></devtools-icon>
     `;
   }
 

package/front_end/ui/components/request_link_icon/RequestLinkIcon.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';

package/front_end/ui/components/settings/SettingDeprecationWarning.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import '../icon_button/icon_button.js';
+import '../../kit/kit.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as Lit from '../../lit/lit.js';

package/front_end/ui/components/survey_link/SurveyLink.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import '../icon_button/icon_button.js';
+import '../../kit/kit.js';
 
 import * as Common from '../../../core/common/common.js';
 import type * as Host from '../../../core/host/host.js';