chrome-devtools-frontend 1.0.1550444 → 1.0.1555174

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

@@ -1,7 +1,6 @@
 // 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.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 /**
  * @file A list of pass/fail conditions for an insight.
@@ -11,11 +10,13 @@ import '../../../../ui/kit/kit.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as Trace from '../../../../models/trace/trace.js';
-import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import checklistStyles from './checklist.css.js';
 
+const {html} = Lit;
+
 const UIStrings = {
   /**
    * @description Text for a screen-reader label to tell the user that the icon represents a successful insight check
@@ -32,7 +33,43 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/Checklist.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const {html} = Lit;
+interface ViewInput {
+  checklist: GenericChecklist;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const {
+    checklist,
+  } = input;
+
+  function getIcon(check: GenericChecklist['']): Lit.TemplateResult {
+    const icon = check.value ? 'check-circle' : 'clear';
+
+    const ariaLabel = check.value ? i18nString(UIStrings.successAriaLabel, {PH1: check.label}) :
+                                    i18nString(UIStrings.failedAriaLabel, {PH1: check.label});
+    return html`
+        <devtools-icon
+          aria-label=${ariaLabel}
+          name=${icon}
+          class=${check.value ? 'check-passed' : 'check-failed'}
+        ></devtools-icon>
+      `;
+  }
+
+  // clang-format off
+  Lit.render(html`
+    <style>${checklistStyles}</style>
+    <ul>
+      ${Object.values(checklist).map(check => html`<li>
+          ${getIcon(check)}
+          <span data-checklist-label>${check.label}</span>
+      </li>`)}
+    </ul>
+  `, target);
+  // clang-format on
+};
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type GenericChecklist = Trace.Insights.Types.Checklist<any>;
@@ -46,55 +83,28 @@ export interface TableDataRow {
   overlays?: Trace.Types.Overlays.Overlay[];
 }
 
-export class Checklist extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+export class Checklist extends UI.Widget.Widget {
+  #view: View;
   #checklist?: GenericChecklist;
 
-  set checklist(checklist: GenericChecklist) {
-    this.#checklist = checklist;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
-
-  connectedCallback(): void {
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
   }
 
-  #getIcon(check: GenericChecklist['']): Lit.TemplateResult {
-    const icon = check.value ? 'check-circle' : 'clear';
-
-    const ariaLabel = check.value ? i18nString(UIStrings.successAriaLabel, {PH1: check.label}) :
-                                    i18nString(UIStrings.failedAriaLabel, {PH1: check.label});
-    return html`
-        <devtools-icon
-          aria-label=${ariaLabel}
-          name=${icon}
-          class=${check.value ? 'check-passed' : 'check-failed'}
-        ></devtools-icon>
-      `;
+  set checklist(checklist: GenericChecklist) {
+    this.#checklist = checklist;
+    this.requestUpdate();
   }
 
-  async #render(): Promise<void> {
+  override performUpdate(): void {
     if (!this.#checklist) {
       return;
     }
 
-    Lit.render(
-        html`
-          <style>${checklistStyles}</style>
-          <ul>
-            ${Object.values(this.#checklist).map(check => html`<li>
-                ${this.#getIcon(check)}
-                <span data-checklist-label>${check.label}</span>
-            </li>`)}
-          </ul>`,
-        this.#shadow, {host: this});
+    const input: ViewInput = {
+      checklist: this.#checklist,
+    };
+    this.#view(input, undefined, this.contentElement);
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-checklist': Checklist;
-  }
-}
-
-customElements.define('devtools-performance-checklist', Checklist);

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

@@ -4,7 +4,6 @@
 
 import '../../../../ui/kit/kit.js';
 import './Table.js';
-import './NodeLink.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type {DOMSizeInsightModel} from '../../../../models/trace/insights/DOMSize.js';
@@ -14,7 +13,7 @@ import * as Lit from '../../../../ui/lit/lit.js';
 import {BaseInsightComponent} from './BaseInsightComponent.js';
 import {eventRef} from './EventRef.js';
 import {md} from './Helpers.js';
-import type * as NodeLink from './NodeLink.js';
+import {nodeLink} from './NodeLink.js';
 import type {TableData, TableDataRow} from './Table.js';
 
 const {UIStrings, i18nString} = Trace.Insights.Models.DOMSize;
@@ -22,7 +21,6 @@ const {UIStrings, i18nString} = Trace.Insights.Models.DOMSize;
 const {html} = Lit;
 
 export class DOMSize extends BaseInsightComponent<DOMSizeInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-dom-size`;
   override internalName = 'dom-size';
 
   protected override hasAskAiSupport(): boolean {
@@ -34,33 +32,21 @@ export class DOMSize extends BaseInsightComponent<DOMSizeInsightModel> {
 
     if (domStatsData.maxDepth) {
       const {nodeId, nodeName} = domStatsData.maxDepth;
-      // clang-format off
-      const template = html`
-        <devtools-performance-node-link
-          .data=${{
-            backendNodeId: nodeId,
-            frame: domStatsData.frame,
-            fallbackText: nodeName,
-          } as NodeLink.NodeLinkData}>
-        </devtools-performance-node-link>
-      `;
-      // clang-format on
+      const template = nodeLink({
+        backendNodeId: nodeId,
+        frame: domStatsData.frame,
+        fallbackText: nodeName,
+      });
       rows.push({values: [i18nString(UIStrings.maxDOMDepth), template]});
     }
 
     if (domStatsData.maxChildren) {
       const {nodeId, nodeName} = domStatsData.maxChildren;
-      // clang-format off
-      const template = html`
-        <devtools-performance-node-link
-          .data=${{
-            backendNodeId: nodeId,
-            frame: domStatsData.frame,
-            fallbackText: nodeName,
-          } as NodeLink.NodeLinkData}>
-        </devtools-performance-node-link>
-      `;
-      // clang-format on
+      const template = nodeLink({
+        backendNodeId: nodeId,
+        frame: domStatsData.frame,
+        fallbackText: nodeName,
+      });
       rows.push({values: [i18nString(UIStrings.maxChildren), template]});
     }
 
@@ -141,11 +127,3 @@ export class DOMSize extends BaseInsightComponent<DOMSizeInsightModel> {
     // clang-format on
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-dom-size': DOMSize;
-  }
-}
-
-customElements.define('devtools-performance-dom-size', DOMSize);

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

@@ -2,18 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './Checklist.js';
-
 import type {DocumentLatencyInsightModel} from '../../../../models/trace/insights/DocumentLatency.js';
 import type * as Trace from '../../../../models/trace/trace.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
+import {Checklist} from './Checklist.js';
 
 const {html} = Lit;
+const {widgetConfig} = UI.Widget;
 
 export class DocumentLatency extends BaseInsightComponent<DocumentLatencyInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-document-latency`;
   override internalName = 'document-latency';
 
   protected override hasAskAiSupport(): boolean {
@@ -30,15 +30,9 @@ export class DocumentLatency extends BaseInsightComponent<DocumentLatencyInsight
     }
 
     // clang-format off
-    return html`<devtools-performance-checklist .checklist=${this.model.data.checklist}></devtools-performance-checklist>`;
+    return html`<devtools-widget .widgetConfig=${widgetConfig(Checklist, {
+      checklist: this.model.data.checklist,
+    })}></devtools-widget>`;
     // clang-format on
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-document-latency': DocumentLatency;
-  }
-}
-
-customElements.define('devtools-performance-document-latency', DocumentLatency);

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

@@ -21,7 +21,6 @@ const {UIStrings, i18nString} = Trace.Insights.Models.DuplicatedJavaScript;
 const {html} = Lit;
 
 export class DuplicatedJavaScript extends BaseInsightComponent<DuplicatedJavaScriptInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-duplicated-javascript`;
   override internalName = 'duplicated-javascript';
   #treemapData: Utils.Treemap.TreemapData|null = null;
 
@@ -118,11 +117,3 @@ export class DuplicatedJavaScript extends BaseInsightComponent<DuplicatedJavaScr
     // clang-format on
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-duplicated-javascript': DuplicatedJavaScript;
-  }
-}
-
-customElements.define('devtools-performance-duplicated-javascript', DuplicatedJavaScript);

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

@@ -1,19 +1,16 @@
 // 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.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-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 Trace from '../../../../models/trace/trace.js';
-import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 import * as Utils from '../../utils/utils.js';
 
 import baseInsightComponentStyles from './baseInsightComponent.css.js';
 
 const {html, Directives: {ifDefined}} = Lit;
+const {widgetConfig} = UI.Widget;
 
 export class EventReferenceClick extends Event {
   static readonly eventName = 'eventreferenceclick';
@@ -23,37 +20,62 @@ export class EventReferenceClick extends Event {
   }
 }
 
-class EventRef extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+interface ViewInput {
+  text: string;
+  event: Trace.Types.Events.Event;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const {
+    text,
+    event,
+  } = input;
+
+  // clang-format off
+  Lit.render(html`
+    <style>${baseInsightComponentStyles}</style>
+    <button type="button" class="timeline-link" @click=${(e: Event) => {
+      e.stopPropagation();
+      if (event) {
+        target.dispatchEvent(new EventReferenceClick(event));
+      }
+    }}>${text}</button>
+  `, target);
+  // clang-format on
+};
+
+class EventRef extends UI.Widget.Widget {
+  #view: View;
   #text: string|null = null;
   #event: Trace.Types.Events.Event|null = null;
 
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
+
   set text(text: string) {
     this.#text = text;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+    this.requestUpdate();
   }
 
   set event(event: Trace.Types.Events.Event) {
     this.#event = event;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+    this.requestUpdate();
   }
 
-  #render(): void {
+  override performUpdate(): void {
     if (!this.#text || !this.#event) {
       return;
     }
 
-    // clang-format off
-    Lit.render(html`
-      <style>${baseInsightComponentStyles}</style>
-      <button type="button" class="timeline-link" @click=${(e: Event) => {
-        e.stopPropagation();
-        if (this.#event) {
-          this.dispatchEvent(new EventReferenceClick(this.#event));
-        }
-      }}>${this.#text}</button>
-    `, this.#shadow, {host: this});
-    // clang-format on
+    const input: ViewInput = {
+      text: this.#text,
+      event: this.#event,
+    };
+    this.#view(input, undefined, this.contentElement);
   }
 }
 
@@ -69,98 +91,14 @@ export function eventRef(
     text = event.name;
   }
 
-  return html`<devtools-performance-event-ref
-    .event=${event as Trace.Types.Events.Event}
-    .text=${text}
-    title=${ifDefined(title)}
-  ></devtools-performance-event-ref>`;
-}
-
-class ImageRef extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-
-  #request?: Trace.Types.Events.SyntheticNetworkRequest;
-  #imageDataUrl?: string|null;
-
-  set request(request: Trace.Types.Events.SyntheticNetworkRequest) {
-    this.#request = request;
-    this.#imageDataUrl = undefined;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
-
-  /**
-   * This only returns a data url if the resource is currently present from the active
-   * inspected page.
-   */
-  async #getOrCreateImageDataUrl(): Promise<string|null> {
-    if (!this.#request) {
-      return null;
-    }
-
-    if (this.#imageDataUrl !== undefined) {
-      return this.#imageDataUrl;
-    }
-
-    const originalUrl = this.#request.args.data.url as Platform.DevToolsPath.UrlString;
-    const resource = SDK.ResourceTreeModel.ResourceTreeModel.resourceForURL(originalUrl);
-    if (!resource) {
-      this.#imageDataUrl = null;
-      return this.#imageDataUrl;
-    }
-
-    const content = await resource.requestContentData();
-    if ('error' in content) {
-      this.#imageDataUrl = null;
-      return this.#imageDataUrl;
-    }
-
-    this.#imageDataUrl = content.asDataUrl();
-    return this.#imageDataUrl;
-  }
-
-  async #render(): Promise<void> {
-    if (!this.#request) {
-      return;
-    }
-
-    const url = this.#request.args.data.mimeType.includes('image') ? await this.#getOrCreateImageDataUrl() : null;
-    const img = url ? html`<img src=${url} class="element-img"/>` : Lit.nothing;
-
-    // clang-format off
-    Lit.render(html`
-      <style>${baseInsightComponentStyles}</style>
-      <div class="image-ref">
-        ${img}
-        <span class="element-img-details">
-          ${eventRef(this.#request)}
-          <span class="element-img-details-size">${
-            i18n.ByteUtilities.bytesToString(this.#request.args.data.decodedBodyLength ?? 0)
-          }</span>
-        </span>
-      </div>
-    `, this.#shadow, {host: this});
-    // clang-format on
-  }
-}
-
-export function imageRef(request: Trace.Types.Events.SyntheticNetworkRequest): Lit.TemplateResult {
-  return html`
-    <devtools-performance-image-ref
-      .request=${request}
-    ></devtools-performance-image-ref>
-  `;
+  return html`<devtools-widget title=${ifDefined(title)} .widgetConfig=${widgetConfig(EventRef, {
+    event,
+    text,
+  })}></devtools-widget>`;
 }
 
 declare global {
   interface GlobalEventHandlersEventMap {
     [EventReferenceClick.eventName]: EventReferenceClick;
   }
-
-  interface HTMLElementTagNameMap {
-    'devtools-performance-event-ref': EventRef;
-    'devtools-performance-image-ref': ImageRef;
-  }
 }
-
-customElements.define('devtools-performance-event-ref', EventRef);
-customElements.define('devtools-performance-image-ref', ImageRef);

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

@@ -18,7 +18,6 @@ const {UIStrings, i18nString} = Trace.Insights.Models.FontDisplay;
 const {html} = Lit;
 
 export class FontDisplay extends BaseInsightComponent<FontDisplayInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-font-display`;
   override internalName = 'font-display';
   #overlayForRequest = new Map<Trace.Types.Events.Event, Trace.Types.Overlays.Overlay>();
 
@@ -88,11 +87,3 @@ export class FontDisplay extends BaseInsightComponent<FontDisplayInsightModel> {
     // clang-format on
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-font-display': FontDisplay;
-  }
-}
-
-customElements.define('devtools-performance-font-display', FontDisplay);

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

@@ -19,7 +19,6 @@ const {UIStrings, i18nString, createOverlayForEvents} = Trace.Insights.Models.Fo
 const {html, nothing} = Lit;
 
 export class ForcedReflow extends BaseInsightComponent<ForcedReflowInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-forced-reflow`;
   override internalName = 'forced-reflow';
 
   protected override hasAskAiSupport(): boolean {
@@ -113,11 +112,3 @@ export class ForcedReflow extends BaseInsightComponent<ForcedReflowInsightModel>
     // clang-format on
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-forced-reflow': ForcedReflow;
-  }
-}
-
-customElements.define('devtools-performance-forced-reflow', ForcedReflow);

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

@@ -17,7 +17,6 @@ const {UIStrings, i18nString, createOverlaysForSubpart} = Trace.Insights.Models.
 const {html} = Lit;
 
 export class INPBreakdown extends BaseInsightComponent<INPBreakdownInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-inp-breakdown`;
   override internalName = 'inp';
 
   protected override hasAskAiSupport(): boolean {
@@ -60,11 +59,3 @@ export class INPBreakdown extends BaseInsightComponent<INPBreakdownInsightModel>
     // clang-format on
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-inp-breakdown': INPBreakdown;
-  }
-}
-
-customElements.define('devtools-performance-inp-breakdown', INPBreakdown);

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

@@ -9,7 +9,7 @@ import * as Trace from '../../../../models/trace/trace.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
-import {imageRef} from './EventRef.js';
+import {imageRef} from './ImageRef.js';
 import {createLimitedRows, renderOthersLabel, type TableDataRow} from './Table.js';
 
 const {UIStrings, i18nString, createOverlayForRequest} = Trace.Insights.Models.ImageDelivery;
@@ -17,7 +17,6 @@ const {UIStrings, i18nString, createOverlayForRequest} = Trace.Insights.Models.I
 const {html} = Lit;
 
 export class ImageDelivery extends BaseInsightComponent<ImageDeliveryInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-image-delivery`;
   override internalName = 'image-delivery';
 
   mapToRow(image: Trace.Insights.Models.ImageDelivery.OptimizableImage): TableDataRow {
@@ -69,11 +68,3 @@ export class ImageDelivery extends BaseInsightComponent<ImageDeliveryInsightMode
     // clang-format on
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-image-delivery': ImageDelivery;
-  }
-}
-
-customElements.define('devtools-performance-image-delivery', ImageDelivery);

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

@@ -0,0 +1,112 @@
+// Copyright 2025 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 i18n from '../../../../core/i18n/i18n.js';
+import type * as Platform from '../../../../core/platform/platform.js';
+import * as SDK from '../../../../core/sdk/sdk.js';
+import type * as Trace from '../../../../models/trace/trace.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
+import * as Lit from '../../../../ui/lit/lit.js';
+
+import baseInsightComponentStyles from './baseInsightComponent.css.js';
+import {eventRef} from './EventRef.js';
+
+const {html} = Lit;
+const {widgetConfig} = UI.Widget;
+
+interface ViewInput {
+  request: Trace.Types.Events.SyntheticNetworkRequest;
+  imageDataUrl: string|null;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const {
+    request,
+    imageDataUrl,
+  } = input;
+
+  const img = imageDataUrl ? html`<img src=${imageDataUrl} class="element-img"/>` : Lit.nothing;
+
+  // clang-format off
+  Lit.render(html`
+    <style>${baseInsightComponentStyles}</style>
+    <div class="image-ref">
+      ${img}
+      <span class="element-img-details">
+        ${eventRef(request)}
+        <span class="element-img-details-size">${
+          i18n.ByteUtilities.bytesToString(request.args.data.decodedBodyLength ?? 0)
+        }</span>
+      </span>
+    </div>
+`, target);
+  // clang-format on
+};
+
+class ImageRef extends UI.Widget.Widget {
+  #view: View;
+  #request?: Trace.Types.Events.SyntheticNetworkRequest;
+  #imageDataUrl?: string|null;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
+
+  set request(request: Trace.Types.Events.SyntheticNetworkRequest) {
+    this.#request = request;
+    this.#imageDataUrl = undefined;
+    this.requestUpdate();
+  }
+
+  /**
+   * This only returns a data url if the resource is currently present from the active
+   * inspected page.
+   */
+  async #getOrCreateImageDataUrl(): Promise<string|null> {
+    if (!this.#request) {
+      return null;
+    }
+
+    if (this.#imageDataUrl !== undefined) {
+      return this.#imageDataUrl;
+    }
+
+    const originalUrl = this.#request.args.data.url as Platform.DevToolsPath.UrlString;
+    const resource = SDK.ResourceTreeModel.ResourceTreeModel.resourceForURL(originalUrl);
+    if (!resource) {
+      this.#imageDataUrl = null;
+      return this.#imageDataUrl;
+    }
+
+    const content = await resource.requestContentData();
+    if ('error' in content) {
+      this.#imageDataUrl = null;
+      return this.#imageDataUrl;
+    }
+
+    this.#imageDataUrl = content.asDataUrl();
+    return this.#imageDataUrl;
+  }
+
+  override async performUpdate(): Promise<void> {
+    if (!this.#request) {
+      return;
+    }
+
+    const input: ViewInput = {
+      request: this.#request,
+      imageDataUrl: await this.#getOrCreateImageDataUrl(),
+    };
+    this.#view(input, undefined, this.contentElement);
+  }
+}
+
+export function imageRef(request: Trace.Types.Events.SyntheticNetworkRequest): Lit.TemplateResult {
+  return html`<devtools-widget .widgetConfig=${widgetConfig(ImageRef, {
+    request,
+  })}></devtools-widget>`;
+}