chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

package/front_end/panels/recorder/extensions/ExtensionManager.ts

@@ -1,10 +1,10 @@
 // Copyright 2023 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 Extensions from '../../../models/extensions/extensions.js';
+import * as PanelCommon from '../../common/common.js';
 
 let instance: ExtensionManager|null = null;
 
@@ -25,7 +25,7 @@ export class ExtensionManager extends Common.ObjectWrapper.ObjectWrapper<EventTy
     return instance;
   }
 
-  #views = new Map<string, ExtensionIframe>();
+  #views = new Map<string, PanelCommon.ExtensionIframe.ExtensionIframe>();
 
   constructor() {
     super();
@@ -54,7 +54,7 @@ export class ExtensionManager extends Common.ObjectWrapper.ObjectWrapper<EventTy
     return Extensions.RecorderPluginManager.RecorderPluginManager.instance().plugins();
   }
 
-  getView(descriptorId: string): ExtensionIframe {
+  getView(descriptorId: string): PanelCommon.ExtensionIframe.ExtensionIframe {
     const view = this.#views.get(descriptorId);
     if (!view) {
       throw new Error('View not found');
@@ -69,55 +69,11 @@ export class ExtensionManager extends Common.ObjectWrapper.ObjectWrapper<EventTy
   #handleView = (event: {data: Extensions.RecorderPluginManager.ViewDescriptor}): void => {
     const descriptor = event.data;
     if (!this.#views.has(descriptor.id)) {
-      this.#views.set(descriptor.id, new ExtensionIframe(descriptor));
+      this.#views.set(descriptor.id, new PanelCommon.ExtensionIframe.ExtensionIframe(descriptor));
     }
   };
 }
 
-class ExtensionIframe {
-  #descriptor: Extensions.RecorderPluginManager.ViewDescriptor;
-  #iframe: HTMLIFrameElement;
-  #isShowing = false;
-  #isLoaded = false;
-
-  constructor(descriptor: Extensions.RecorderPluginManager.ViewDescriptor) {
-    this.#descriptor = descriptor;
-    this.#iframe = document.createElement('iframe');
-    this.#iframe.src = descriptor.pagePath;
-    this.#iframe.onload = this.#onIframeLoad;
-  }
-
-  #onIframeLoad = (): void => {
-    this.#isLoaded = true;
-    if (this.#isShowing) {
-      this.#descriptor.onShown();
-    }
-  };
-
-  show(): void {
-    if (this.#isShowing) {
-      return;
-    }
-    this.#isShowing = true;
-    if (this.#isLoaded) {
-      this.#descriptor.onShown();
-    }
-  }
-
-  hide(): void {
-    if (!this.#isShowing) {
-      return;
-    }
-    this.#isShowing = false;
-    this.#isLoaded = false;
-    this.#descriptor.onHidden();
-  }
-
-  frame(): HTMLIFrameElement {
-    return this.#iframe;
-  }
-}
-
 export const enum Events {
   EXTENSIONS_UPDATED = 'extensionsUpdated',
 }

package/front_end/panels/recorder/models/ScreenshotUtils.ts

@@ -1,7 +1,6 @@
 // Copyright 2023 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 SDK from '../../../core/sdk/sdk.js';
 
@@ -26,30 +25,37 @@ async function captureScreenshot(): Promise<Screenshot> {
 
 export async function resizeScreenshot(data: Screenshot): Promise<Screenshot> {
   const img = new Image();
-  const promise = new Promise(resolve => {
+  const imageLoaded = new Promise(resolve => {
     img.onload = resolve;
   });
   img.src = data;
-  await promise;
+  await imageLoaded;
 
-  const canvas = document.createElement('canvas');
+  const aspectRatio = img.width / img.height;
+  const canvas = new OffscreenCanvas(
+      SCREENSHOT_WIDTH,
+      Math.min(
+          SCREENSHOT_MAX_HEIGHT,
+          SCREENSHOT_WIDTH / aspectRatio,
+          ));
   const context = canvas.getContext('2d', {willReadFrequently: true});
   if (!context) {
     throw new Error('Could not create context.');
   }
-  const aspectRatio = img.width / img.height;
-  canvas.width = SCREENSHOT_WIDTH;
-  canvas.height = Math.min(
-      SCREENSHOT_MAX_HEIGHT,
-      SCREENSHOT_WIDTH / aspectRatio,
-  );
   const bitmap = await createImageBitmap(img, {
     resizeWidth: SCREENSHOT_WIDTH,
     resizeQuality: 'high',
   });
   context.drawImage(bitmap, 0, 0);
 
-  return canvas.toDataURL('image/png') as Screenshot;
+  const blob = await canvas.convertToBlob({type: 'image/png'});
+  const dataUrl = await new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result as string);
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+  return dataUrl as Screenshot;
 }
 
 export async function takeScreenshot(): Promise<Screenshot> {

package/front_end/panels/screencast/ScreencastView.ts

@@ -10,7 +10,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon, Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {InputModel} from './InputModel.js';
@@ -104,8 +104,8 @@ export class ScreencastView extends UI.Widget.VBox implements SDK.OverlayModel.H
   private navigationProgressBar?: ProgressTracker;
   private touchInputToggle?: HTMLButtonElement;
   private mouseInputToggle?: HTMLButtonElement;
-  private touchInputToggleIcon?: IconButton.Icon.Icon;
-  private mouseInputToggleIcon?: IconButton.Icon.Icon;
+  private touchInputToggleIcon?: Icon;
+  private mouseInputToggleIcon?: Icon;
   private historyIndex?: number;
   private historyEntries?: Protocol.Page.NavigationEntry[];
   private isCasting = false;
@@ -648,17 +648,17 @@ export class ScreencastView extends UI.Widget.VBox implements SDK.OverlayModel.H
     this.navigationBar = this.element.createChild('div', 'screencast-navigation');
 
     this.navigationBack = this.navigationBar.createChild('button', 'navigation');
-    this.navigationBack.appendChild(IconButton.Icon.create('arrow-back'));
+    this.navigationBack.appendChild(createIcon('arrow-back'));
     this.navigationBack.disabled = true;
     UI.ARIAUtils.setLabel(this.navigationBack, i18nString(UIStrings.back));
 
     this.navigationForward = this.navigationBar.createChild('button', 'navigation');
-    this.navigationForward.appendChild(IconButton.Icon.create('arrow-forward'));
+    this.navigationForward.appendChild(createIcon('arrow-forward'));
     this.navigationForward.disabled = true;
     UI.ARIAUtils.setLabel(this.navigationForward, i18nString(UIStrings.forward));
 
     this.navigationReload = this.navigationBar.createChild('button', 'navigation');
-    this.navigationReload.appendChild(IconButton.Icon.create('refresh'));
+    this.navigationReload.appendChild(createIcon('refresh'));
     UI.ARIAUtils.setLabel(this.navigationReload, i18nString(UIStrings.reload));
 
     this.navigationUrl = this.navigationBar.appendChild(UI.UIUtils.createInput());
@@ -668,14 +668,14 @@ export class ScreencastView extends UI.Widget.VBox implements SDK.OverlayModel.H
     this.mouseInputToggle = this.navigationBar.createChild('button');
     this.mouseInputToggle.disabled = true;
     {
-      this.mouseInputToggleIcon = this.mouseInputToggle.appendChild(new IconButton.Icon.Icon());
+      this.mouseInputToggleIcon = this.mouseInputToggle.appendChild(new Icon());
       this.mouseInputToggleIcon.name = 'mouse';
       this.mouseInputToggleIcon.classList.toggle('toggled', true);
     }
     UI.ARIAUtils.setLabel(this.mouseInputToggle, i18nString(UIStrings.mouseInput));
 
     this.touchInputToggle = this.navigationBar.createChild('button');
-    this.touchInputToggleIcon = this.touchInputToggle.appendChild(IconButton.Icon.create('touch-app'));
+    this.touchInputToggleIcon = this.touchInputToggle.appendChild(createIcon('touch-app'));
     UI.ARIAUtils.setLabel(this.touchInputToggle, i18nString(UIStrings.touchInput));
 
     this.navigationProgressBar = new ProgressTracker(

package/front_end/panels/search/SearchView.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import '../../ui/legacy/legacy.js';
-import '../../ui/components/icon_button/icon_button.js';
+import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';

package/front_end/panels/security/CookieControlsTreeElement.ts

@@ -1,14 +1,14 @@
 // 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 * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 
 import {SecurityPanelSidebarTreeElement} from './SecurityPanelSidebarTreeElement.js';
 
 export class CookieControlsTreeElement extends SecurityPanelSidebarTreeElement {
   constructor(title: string, jslogContext: string|number) {
     super(title, false, jslogContext);
-    this.setLeadingIcons([IconButton.Icon.create('gear', 'cookie-icon')]);
+    this.setLeadingIcons([createIcon('gear', 'cookie-icon')]);
   }
 
   override get elemId(): string {

package/front_end/panels/security/CookieControlsView.ts

@@ -4,7 +4,6 @@
 
 import '../../ui/components/switch/switch.js';
 import '../../ui/kit/kit.js';
-import '../../ui/components/chrome_link/chrome_link.js';
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
@@ -102,20 +101,14 @@ const UIStrings = {
    * @example {#tpcd-heuristics-grants} PH1
    */
   enableFlag: 'To use this, set {PH1} to Default',
-  /**
-   * @description Text used for link within the enableFlag to show users where they can enable the Third-party Cookie Metadata Grants flag.
-   */
-  tpcdMetadataGrants: '#tpcd-metadata-grants',
-  /**
-   * @description Text used for link within the enableFlag to show users where they can enable the Third-party Cookie Heuristics Grants flag.
-   */
-  tpcdHeuristicsGrants: '#tpcd-heuristics-grants',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/security/CookieControlsView.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export const i18nFormatString = uiI18n.getFormatLocalizedString.bind(undefined, str_);
 
+export const i18nFormatStringTemplate = uiI18n.getFormatLocalizedStringTemplate.bind(undefined, str_);
+
 export interface ViewInput {
   thirdPartyControlsDict: Root.Runtime.HostConfig['thirdPartyCookieControls'];
   isGracePeriodActive: boolean;
@@ -127,9 +120,9 @@ export type View = (input: ViewInput, output: object, target: HTMLElement) => vo
 
 function getChromeFlagsLink(flag: string): TemplateResult {
   return html`
-    <devtools-chrome-link href="chrome://flags/#${flag}" tabindex="0">
-     ${flag}
-    </devtools-chrome-link>`;
+    <devtools-link href="chrome://flags/${flag}">
+      ${flag}
+    </devtools-link>`;
 }
 const DEFAULT_VIEW: View = (input: ViewInput, _output: object, target: HTMLElement): void => {
   // createSetting() allows us to initialize the settings with the UI binding values the first
@@ -213,8 +206,8 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: object, target: HTMLEleme
                     PH1: i18nString(UIStrings.gracePeriod),
                   }) :
                 (input.thirdPartyControlsDict ? !input.thirdPartyControlsDict?.thirdPartyCookieMetadataEnabled: false) ?
-                  i18nFormatString(UIStrings.enableFlag, {
-                    PH1: getChromeFlagsLink(UIStrings.tpcdMetadataGrants),
+                  i18nFormatStringTemplate(UIStrings.enableFlag, {
+                    PH1: getChromeFlagsLink('#tpcd-metadata-grants'),
                   }) :
                 i18nFormatString(input.isGracePeriodActive ? UIStrings.gracePeriodExplanation : UIStrings.enrollGracePeriod, {
                   PH1: UI.Fragment.html`<x-link class="devtools-link" href="https://developers.google.com/privacy-sandbox/cookies/temporary-exceptions/grace-period" jslog=${VisualLogging.link('grace-period-link').track({click: true})}>${i18nString(UIStrings.gracePeriod)}</x-link>`,
@@ -246,8 +239,8 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: object, target: HTMLEleme
                   PH1: i18nString(UIStrings.scenarios),
                 }) :
                 (input.thirdPartyControlsDict ? !input.thirdPartyControlsDict.thirdPartyCookieHeuristicsEnabled: false) ?
-                  i18nFormatString(UIStrings.enableFlag, {
-                    PH1: getChromeFlagsLink(UIStrings.tpcdHeuristicsGrants),
+                  i18nFormatStringTemplate(UIStrings.enableFlag, {
+                    PH1: getChromeFlagsLink('#tpcd-heuristics-grants'),
                   }) :
                 i18nFormatString(UIStrings.heuristicExplanation, {
                   PH1: UI.Fragment.html`<x-link class="devtools-link" href="https://developers.google.com/privacy-sandbox/cookies/temporary-exceptions/heuristics-based-exceptions" jslog=${VisualLogging.link('heuristic-link').track({click: true})}>${i18nString(UIStrings.scenarios)}</x-link>`,

package/front_end/panels/security/CookieReportTreeElement.ts

@@ -1,14 +1,14 @@
 // 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 * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 
 import {SecurityPanelSidebarTreeElement} from './SecurityPanelSidebarTreeElement.js';
 
 export class CookieReportTreeElement extends SecurityPanelSidebarTreeElement {
   constructor(title: string, jslogContext: string|number) {
     super(title, false, jslogContext);
-    this.setLeadingIcons([IconButton.Icon.create('cookie', 'cookie-icon')]);
+    this.setLeadingIcons([createIcon('cookie', 'cookie-icon')]);
   }
 
   override get elemId(): string {

package/front_end/panels/security/SecurityPanel.ts

@@ -10,7 +10,7 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon, type Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -470,7 +470,7 @@ const WARNING_ICON_NAME = 'warning';
 const UNKNOWN_ICON_NAME = 'indeterminate-question-box';
 
 export function getSecurityStateIconForDetailedView(
-    securityState: Protocol.Security.SecurityState, className: string): IconButton.Icon.Icon {
+    securityState: Protocol.Security.SecurityState, className: string): Icon {
   let iconName: string;
 
   switch (securityState) {
@@ -488,11 +488,11 @@ export function getSecurityStateIconForDetailedView(
       break;
   }
 
-  return IconButton.Icon.create(iconName, className);
+  return createIcon(iconName, className);
 }
 
 export function getSecurityStateIconForOverview(
-    securityState: Protocol.Security.SecurityState, className: string): IconButton.Icon.Icon {
+    securityState: Protocol.Security.SecurityState, className: string): Icon {
   let iconName: string;
   switch (securityState) {
     case Protocol.Security.SecurityState.Unknown:  // fallthrough
@@ -509,7 +509,7 @@ export function getSecurityStateIconForOverview(
     case Protocol.Security.SecurityState.Info:
       throw new Error(`Unexpected security state ${securityState}`);
   }
-  return IconButton.Icon.create(iconName, className);
+  return createIcon(iconName, className);
 }
 
 export function createHighlightedUrl(url: Platform.DevToolsPath.UrlString, securityState: string): Element {

package/front_end/panels/security/SecurityPanelSidebar.ts

@@ -8,7 +8,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as Protocol from '../../generated/protocol.js';
-import type * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import type {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {CookieControlsTreeElement} from './CookieControlsTreeElement.js';
@@ -73,7 +73,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class SecurityPanelSidebar extends UI.Widget.VBox {
   readonly #securitySidebarLastItemSetting: Common.Settings.Setting<string>;
   readonly sidebarTree: UI.TreeOutline.TreeOutlineInShadow;
-  readonly #originGroupTitles: Map<OriginGroup, {title: string, icon?: IconButton.Icon.Icon}>;
+  readonly #originGroupTitles: Map<OriginGroup, {title: string, icon?: Icon}>;
   #originGroups: Map<OriginGroup, UI.TreeOutline.TreeElement>;
   securityOverviewElement: OriginTreeElement;
   readonly #cookieControlsTreeElement: CookieControlsTreeElement|undefined;
@@ -204,8 +204,7 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
     return this.#originGroups.get(originGroup) as UI.TreeOutline.TreeElement;
   }
 
-  #createOriginGroupElement(originGroupTitle: string, originGroupIcon?: IconButton.Icon.Icon):
-      UI.TreeOutline.TreeElement {
+  #createOriginGroupElement(originGroupTitle: string, originGroupIcon?: Icon): UI.TreeOutline.TreeElement {
     const originGroup = new UI.TreeOutline.TreeElement(originGroupTitle, true);
     originGroup.selectable = false;
     originGroup.expand();

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -10,7 +10,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon, type Icon} from '../../ui/kit/kit.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -383,7 +383,7 @@ export class ShortcutListItem {
 
   private createEmptyInfo(): void {
     if (UI.ShortcutRegistry.ShortcutRegistry.instance().actionHasDefaultShortcut(this.item.id())) {
-      const icon = IconButton.Icon.create('keyboard-pen', 'keybinds-modified');
+      const icon = createIcon('keyboard-pen', 'keybinds-modified');
       UI.ARIAUtils.setLabel(icon, i18nString(UIStrings.shortcutModified));
       this.element.appendChild(icon);
     }
@@ -441,9 +441,9 @@ export class ShortcutListItem {
     if (this.editedShortcuts.has(shortcut) && !this.editedShortcuts.get(shortcut)) {
       return;
     }
-    let icon: IconButton.Icon.Icon;
+    let icon: Icon;
     if (shortcut.type !== UI.KeyboardShortcut.Type.UNSET_SHORTCUT && !shortcut.isDefault()) {
-      icon = IconButton.Icon.create('keyboard-pen', 'keybinds-modified');
+      icon = createIcon('keyboard-pen', 'keybinds-modified');
       UI.ARIAUtils.setLabel(icon, i18nString(UIStrings.shortcutModified));
       this.element.appendChild(icon);
     }

package/front_end/panels/settings/SettingsScreen.ts

@@ -12,9 +12,8 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UIHelpers from '../../ui/helpers/helpers.js';
-import type {Card} from '../../ui/kit/kit.js';
+import {type Card, createIcon} from '../../ui/kit/kit.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -460,7 +459,7 @@ export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTa
   private createExperimentsWarningSubsection(warningMessage: string): HTMLElement {
     const subsection = document.createElement('div');
     subsection.classList.add('experiments-warning-subsection');
-    const warningIcon = IconButton.Icon.create('warning');
+    const warningIcon = createIcon('warning');
     subsection.appendChild(warningIcon);
     const warning = subsection.createChild('span');
     warning.textContent = warningMessage;

package/front_end/panels/settings/components/SyncSection.ts

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

package/front_end/panels/snippets/SnippetsQuickOpen.ts

@@ -2,10 +2,13 @@
 // 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 type * as Workspace from '../../models/workspace/workspace.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 {html, type TemplateResult} from '../../ui/lit/lit.js';
 
 import {evaluateScriptSnippet, findSnippetsProject} from './ScriptSnippetFileSystem.js';
 
@@ -81,13 +84,18 @@ export class SnippetsQuickOpen extends QuickOpen.FilteredListWidget.Provider {
     return this.snippets[itemIndex].name();
   }
 
-  override renderItem(itemIndex: number, query: string, wrapperElement: Element): void {
-    const itemElement = wrapperElement.createChild('div');
-    const titleElement = itemElement.createChild('div');
-    const icon = IconButton.Icon.create('snippet', 'snippet');
-    wrapperElement.insertBefore(icon, itemElement);
-    titleElement.textContent = this.snippets[itemIndex].name();
-    QuickOpen.FilteredListWidget.FilteredListWidget.highlightRanges(titleElement, query, true);
+  override renderItem(itemIndex: number, query: string): TemplateResult {
+    // clang-format off
+    const snippet = this.snippets[itemIndex].name();
+    const highlightRanges = QuickOpen.FilteredListWidget.FilteredListWidget.getHighlightRanges(snippet, query, true);
+    return html`
+      <devtools-icon class="snippet" name="snippet"></devtools-icon>
+      <div>
+        <devtools-highlight type="markup" ranges=${highlightRanges}>
+          ${snippet}
+        </devtools-highlight>
+      </div>`;
+    // clang-format on
   }
 }
 

package/front_end/panels/sources/BreakpointEditDialog.ts

@@ -10,8 +10,8 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as BreakpointManager from '../../models/breakpoints/breakpoints.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 TextEditor from '../../ui/components/text_editor/text_editor.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';
 
@@ -181,7 +181,7 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
     }));
     editorWrapper.appendChild(this.editor);
 
-    const closeIcon = IconButton.Icon.create('cross');
+    const closeIcon = createIcon('cross');
     closeIcon.title = i18nString(UIStrings.closeDialog);
     closeIcon.setAttribute('jslog', `${VisualLogging.close().track({click: true})}`);
     closeIcon.onclick = () => this.finishEditing(true, this.editor.state.doc.toString());
@@ -196,7 +196,7 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
     const link = UI.Fragment.html`<x-link class="link devtools-link" tabindex="0" href="https://goo.gle/devtools-loc"
                                           jslog="${VisualLogging.link('learn-more')}">${
                      i18nString(UIStrings.learnMoreOnBreakpointTypes)}</x-link>` as UI.XLink.XLink;
-    const linkIcon = IconButton.Icon.create('open-externally', 'link-icon');
+    const linkIcon = createIcon('open-externally', 'link-icon');
     link.prepend(linkIcon);
     linkWrapper.appendChild(link);
 

package/front_end/panels/sources/BreakpointsView.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 * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';

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';
@@ -163,7 +163,7 @@ class ColorSwatchWidget extends CodeMirror.WidgetType {
 
   toDOM(view: CodeMirror.EditorView): HTMLElement {
     const swatch = new InlineEditor.ColorSwatch.ColorSwatch(i18nString(UIStrings.openColorPicker));
-    swatch.renderColor(this.#color);
+    swatch.color = this.#color;
     const value = swatch.createChild('span');
     value.textContent = this.#text;
     value.setAttribute('hidden', 'true');
@@ -171,13 +171,13 @@ class ColorSwatchWidget extends CodeMirror.WidgetType {
       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;
+      this.#color = swatch.color 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;
+      this.#color = swatch.color as Common.Color.Color;
     });
     swatch.addEventListener(InlineEditor.ColorSwatch.ClickEvent.eventName, event => {
       event.consume(true);
@@ -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 {