chrome-devtools-frontend 1.0.1550444 → 1.0.1555174

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/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,13 +206,21 @@ 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),
-                  }) :
-                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>`,
-                })
-              }
+                  i18nFormatStringTemplate(UIStrings.enableFlag, {
+                    PH1: getChromeFlagsLink('#tpcd-metadata-grants'),
+                  })
+                : i18nFormatStringTemplate(
+                    input.isGracePeriodActive
+                      ? UIStrings.gracePeriodExplanation
+                      : UIStrings.enrollGracePeriod,
+                    {
+                      PH1: html`<devtools-link
+                        href="https://developers.google.com/privacy-sandbox/cookies/temporary-exceptions/grace-period"
+                        .jslogContext=${'grace-period-link'}
+                        >${i18nString(UIStrings.gracePeriod)}</devtools-link
+                      >`,
+                    },
+                  )}
             </div>
           </div>
         </label>
@@ -246,13 +247,16 @@ 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),
-                  }) :
-                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>`,
-                })
-              }
+                  i18nFormatStringTemplate(UIStrings.enableFlag, {
+                    PH1: getChromeFlagsLink('#tpcd-heuristics-grants'),
+                  })
+                : i18nFormatStringTemplate(UIStrings.heuristicExplanation, {
+                    PH1: html`<devtools-link
+                      href="https://developers.google.com/privacy-sandbox/cookies/temporary-exceptions/heuristics-based-exceptions"
+                      .jslogContext=${'heuristic-link'}
+                      >${i18nString(UIStrings.scenarios)}</devtools-link
+                    >`,
+                  })}
             </div>
           </div>
         </label>

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/sources/CSSPlugin.ts

@@ -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);

package/front_end/panels/sources/CallStackSidebarPane.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.
 /* eslint-disable @devtools/no-imperative-dom-api */
+/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 /*
  * Copyright (C) 2008 Apple Inc. All Rights Reserved.
@@ -40,6 +41,7 @@ import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scop
 import * as Workspace from '../../models/workspace/workspace.js';
 import {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import callStackSidebarPaneStyles from './callStackSidebarPane.css.js';
@@ -88,6 +90,8 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/sources/CallStackSidebarPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+const {createRef, ref} = Directives;
+
 let callstackSidebarPaneInstance: CallStackSidebarPane;
 
 export class CallStackSidebarPane extends UI.View.SimpleView implements UI.ContextFlavorListener.ContextFlavorListener,
@@ -99,12 +103,11 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
   private readonly items: UI.ListModel.ListModel<Item>;
   private list: UI.ListControl.ListControl<Item>;
   private readonly showMoreMessageElement: Element;
-  private showIgnoreListed: boolean;
-  private readonly locationPool: Bindings.LiveLocation.LiveLocationPool;
-  private readonly updateThrottler: Common.Throttler.Throttler;
-  private maxAsyncStackChainDepth: number;
-  private readonly updateItemThrottler: Common.Throttler.Throttler;
-  private readonly scheduledForUpdateItems: Set<Item>;
+  private showIgnoreListed = false;
+  private readonly locationPool = new Bindings.LiveLocation.LiveLocationPool();
+  private maxAsyncStackChainDepth = defaultMaxAsyncStackChainDepth;
+  private readonly updateItemThrottler = new Common.Throttler.Throttler(100);
+  private readonly scheduledForUpdateItems = new Set<Item>();
   private muteActivateItem?: boolean;
   private lastDebuggerModel: SDK.DebuggerModel.DebuggerModel|null = null;
 
@@ -115,27 +118,23 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
       viewId: 'sources.callstack',
       useShadowDom: true,
     });
-    this.registerRequiredCSS(callStackSidebarPaneStyles);
-
-    ({element: this.ignoreListMessageElement, checkbox: this.ignoreListCheckboxElement} =
-         this.createIgnoreListMessageElementAndCheckbox());
-    this.contentElement.appendChild(this.ignoreListMessageElement);
 
-    this.notPausedMessageElement = this.contentElement.createChild('div', 'gray-info-message');
-    this.notPausedMessageElement.textContent = i18nString(UIStrings.notPaused);
-    this.notPausedMessageElement.tabIndex = -1;
-
-    this.callFrameWarningsElement = this.contentElement.createChild('div', 'call-frame-warnings-message');
-    const icon = new Icon();
-    icon.name = 'warning-filled';
-    icon.classList.add('call-frame-warning-icon', 'small');
-    this.callFrameWarningsElement.appendChild(icon);
-    this.callFrameWarningsElement.appendChild(document.createTextNode(i18nString(UIStrings.callFrameWarnings)));
-    this.callFrameWarningsElement.tabIndex = -1;
+    const [ignoreListMessageRef, ignoreListCheckboxRef, notPausedRef, warningRef, showMoreRef] = [
+      createRef<HTMLElement>(),
+      createRef<HTMLInputElement>(),
+      createRef<HTMLElement>(),
+      createRef<HTMLElement>(),
+      createRef<HTMLElement>(),
+    ];
+    const ignoreListCheckboxChanged = (): void => {
+      this.showIgnoreListed = Boolean(ignoreListCheckboxRef.value?.checked);
+      for (const item of this.items) {
+        this.refreshItem(item);
+      }
+    };
 
     this.items = new UI.ListModel.ListModel();
     this.list = new UI.ListControl.ListControl(this.items, this, UI.ListControl.ListMode.NonViewport);
-    this.contentElement.appendChild(this.list.element);
     this.list.element.addEventListener('contextmenu', this.onContextMenu.bind(this), false);
     self.onInvokeElement(this.list.element, event => {
       const item = this.list.itemForNode((event.target as Node | null));
@@ -145,19 +144,42 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
       }
     });
 
-    this.showMoreMessageElement = this.createShowMoreMessageElement();
-    this.showMoreMessageElement.classList.add('hidden');
-    this.contentElement.appendChild(this.showMoreMessageElement);
-
-    this.showIgnoreListed = false;
-    this.locationPool = new Bindings.LiveLocation.LiveLocationPool();
-
-    this.updateThrottler = new Common.Throttler.Throttler(100);
-    this.maxAsyncStackChainDepth = defaultMaxAsyncStackChainDepth;
-    this.update();
+    const onShowMoreClicked = (): void => {
+      this.maxAsyncStackChainDepth += defaultMaxAsyncStackChainDepth;
+      this.requestUpdate();
+    };
 
-    this.updateItemThrottler = new Common.Throttler.Throttler(100);
-    this.scheduledForUpdateItems = new Set();
+    // clang-format off
+    render(html`
+      <style>${callStackSidebarPaneStyles}</style>
+      <div class='ignore-listed-message' ${ref(ignoreListMessageRef)}>
+        <label class='ignore-listed-message-label'>
+          <input type='checkbox' tabindex=0 class='ignore-listed-checkbox'
+              @change=${ignoreListCheckboxChanged} ${ref(ignoreListCheckboxRef)}></input>
+          ${i18nString(UIStrings.showIgnorelistedFrames)}
+        </label>
+      </div>
+      <div class='gray-info-message' tabindex=-1 ${ref(notPausedRef)}>
+        ${i18nString(UIStrings.notPaused)}
+      </div>
+      <div class='call-frame-warnings-message' tabindex=-1 ${ref(warningRef)}>
+        <devtools-icon .name=${'warning-filled'} class='call-frame-warning-icon small'></devtools-icon>
+        ${i18nString(UIStrings.callFrameWarnings)}
+      </div>
+      ${this.list.element}
+      <div class='show-more-message hidden' ${ref(showMoreRef)}>
+        <span class='link' @click=${onShowMoreClicked}>${i18nString(UIStrings.showMore)}</span>
+      </div>
+    `, this.contentElement);
+    // clang-format on
+
+    this.ignoreListMessageElement = ignoreListMessageRef.value as HTMLElement;
+    this.ignoreListCheckboxElement = ignoreListCheckboxRef.value as HTMLInputElement;
+    this.notPausedMessageElement = notPausedRef.value as HTMLElement;
+    this.callFrameWarningsElement = warningRef.value as HTMLElement;
+    this.showMoreMessageElement = showMoreRef.value as HTMLElement;
+
+    this.requestUpdate();
 
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.DebugInfoAttached, this.debugInfoAttached, this);
@@ -178,11 +200,11 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     this.showIgnoreListed = false;
     this.ignoreListCheckboxElement.checked = false;
     this.maxAsyncStackChainDepth = defaultMaxAsyncStackChainDepth;
-    this.update();
+    this.requestUpdate();
   }
 
   private debugInfoAttached(): void {
-    this.update();
+    this.requestUpdate();
   }
 
   private setSourceMapSubscription(debuggerModel: SDK.DebuggerModel.DebuggerModel|null): void {
@@ -203,11 +225,7 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     }
   }
 
-  update(): void {
-    void this.updateThrottler.schedule(() => this.doUpdate());
-  }
-
-  async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     this.locationPool.disposeAll();
 
     this.callFrameWarningsElement.classList.add('hidden');
@@ -375,39 +393,6 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     return true;
   }
 
-  private createIgnoreListMessageElementAndCheckbox(): {element: Element, checkbox: HTMLInputElement} {
-    const element = document.createElement('div');
-    element.classList.add('ignore-listed-message');
-    const label = element.createChild('label');
-    label.classList.add('ignore-listed-message-label');
-    const checkbox = label.createChild('input');
-    checkbox.tabIndex = 0;
-    checkbox.type = 'checkbox';
-    checkbox.classList.add('ignore-listed-checkbox');
-    label.append(i18nString(UIStrings.showIgnorelistedFrames));
-    const showAll = (): void => {
-      this.showIgnoreListed = checkbox.checked;
-      for (const item of this.items) {
-        this.refreshItem(item);
-      }
-    };
-    checkbox.addEventListener('click', showAll);
-    return {element, checkbox};
-  }
-
-  private createShowMoreMessageElement(): Element {
-    const element = document.createElement('div');
-    element.classList.add('show-more-message');
-    element.createChild('span');
-    const showAllLink = element.createChild('span', 'link');
-    showAllLink.textContent = i18nString(UIStrings.showMore);
-    showAllLink.addEventListener('click', () => {
-      this.maxAsyncStackChainDepth += defaultMaxAsyncStackChainDepth;
-      this.update();
-    }, false);
-    return element;
-  }
-
   private onContextMenu(event: Event): void {
     const item = this.list.itemForNode((event.target as Node | null));
     if (!item) {

package/front_end/panels/sources/SourcesPanel.ts

@@ -977,11 +977,8 @@ export class SourcesPanel extends UI.Panel.Panel implements
       const editorElement = this.element.querySelector('devtools-text-editor');
       if (!eventTarget.isSelfOrDescendant(editorElement) && uiSourceCode.contentType().isTextType()) {
         UI.Context.Context.instance().setFlavor(Workspace.UISourceCode.UISourceCode, uiSourceCode);
-        if (Root.Runtime.hostConfig.devToolsAiSubmenuPrompts?.enabled) {
           const action = UI.ActionRegistry.ActionRegistry.instance().getAction(openAiAssistanceId);
-          const submenu = contextMenu.footerSection().appendSubMenuItem(
-              action.title(), false, openAiAssistanceId,
-              Root.Runtime.hostConfig.devToolsAiAssistanceFileAgent?.featureName);
+          const submenu = contextMenu.footerSection().appendSubMenuItem(action.title(), false, openAiAssistanceId);
           submenu.defaultSection().appendAction('drjones.sources-panel-context', i18nString(UIStrings.startAChat));
           appendSubmenuPromptAction(
               submenu, action, i18nString(UIStrings.assessPerformance), 'Is this script optimized for performance?',
@@ -992,13 +989,6 @@ export class SourcesPanel extends UI.Panel.Panel implements
           appendSubmenuPromptAction(
               submenu, action, i18nString(UIStrings.explainInputHandling), 'Does the script handle user input safely',
               openAiAssistanceId + '.input');
-        } else if (Root.Runtime.hostConfig.devToolsAiDebugWithAi?.enabled) {
-          contextMenu.footerSection().appendAction(
-              openAiAssistanceId, undefined, false, undefined,
-              Root.Runtime.hostConfig.devToolsAiAssistanceFileAgent?.featureName);
-        } else {
-          contextMenu.footerSection().appendAction(openAiAssistanceId);
-        }
       }
     }
 

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -14,6 +14,7 @@ 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 {html} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as PanelCommon from '../common/common.js';
 import * as Snippets from '../snippets/snippets.js';
@@ -526,10 +527,11 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
   }
 
   private addLoadErrorIcon(tabId: string): void {
-    const icon = new Icon();
-    icon.name = 'cross-circle-filled';
-    icon.classList.add('small');
-    UI.Tooltip.Tooltip.install(icon, i18nString(UIStrings.unableToLoadThisContent));
+    // clang-format off
+    const icon = html`<devtools-icon class="small" name="cross-circle-filled"
+                                     title=${i18nString(UIStrings.unableToLoadThisContent)}>
+                      </devtools-icon>`;
+    // clang-format on
     if (this.tabbedPane.tabView(tabId)) {
       this.tabbedPane.setTrailingTabIcon(tabId, icon);
     }
@@ -605,10 +607,11 @@ 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 Icon();
-        icon.name = 'cross-circle-filled';
-        icon.classList.add('small');
-        UI.Tooltip.Tooltip.install(icon, i18nString(UIStrings.unableToLoadThisContent));
+        // clang-format off
+        const icon = html`<devtools-icon class="small" name="cross-circle-filled"
+                                         title=${i18nString(UIStrings.unableToLoadThisContent)}>
+                          </devtools-icon>`;
+        // clang-format on
         this.tabbedPane.setTrailingTabIcon(tabId, icon);
       } else if (Persistence.Persistence.PersistenceImpl.instance().hasUnsavedCommittedChanges(uiSourceCode)) {
         /* eslint-disable @devtools/no-imperative-dom-api --