chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

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

@@ -1,7 +1,6 @@
 // Copyright 2024 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable rulesdir/no-lit-render-outside-of-view */
 
 import '../../../ui/components/request_link_icon/request_link_icon.js';
 
@@ -20,81 +19,81 @@ import networkRequestTooltipStyles from './networkRequestTooltip.css.js';
 import {NetworkRequestTooltip} from './NetworkRequestTooltip.js';
 import {colorForNetworkRequest} from './Utils.js';
 
-const {html} = Lit;
+const {html, render} = Lit;
 
 const MAX_URL_LENGTH = 100;
 
 const UIStrings = {
   /**
-   *@description Text that refers to the network request method
+   * @description Text that refers to the network request method
    */
   requestMethod: 'Request method',
   /**
-   *@description Text that refers to the network request protocol
+   * @description Text that refers to the network request protocol
    */
   protocol: 'Protocol',
   /**
-   *@description Text to show the priority of an item
+   * @description Text to show the priority of an item
    */
   priority: 'Priority',
   /**
-   *@description Text used when referring to the data sent in a network request that is encoded as a particular file format.
+   * @description Text used when referring to the data sent in a network request that is encoded as a particular file format.
    */
   encodedData: 'Encoded data',
   /**
-   *@description Text used to refer to the data sent in a network request that has been decoded.
+   * @description Text used to refer to the data sent in a network request that has been decoded.
    */
   decodedBody: 'Decoded body',
   /**
-   *@description Text in Timeline indicating that input has happened recently
+   * @description Text in Timeline indicating that input has happened recently
    */
   yes: 'Yes',
   /**
-   *@description Text in Timeline indicating that input has not happened recently
+   * @description Text in Timeline indicating that input has not happened recently
    */
   no: 'No',
   /**
-   *@description Text to indicate to the user they are viewing an event representing a network request.
+   * @description Text to indicate to the user they are viewing an event representing a network request.
    */
   networkRequest: 'Network request',
   /**
-   *@description Text for the data source of a network request.
+   * @description Text for the data source of a network request.
    */
   fromCache: 'From cache',
   /**
-   *@description Text used to show the mime-type of the data transferred with a network request (e.g. "application/json").
+   * @description Text used to show the mime-type of the data transferred with a network request (e.g. "application/json").
    */
   mimeType: 'MIME type',
   /**
-   *@description Text used to show the user that a request was served from the browser's in-memory cache.
+   * @description Text used to show the user that a request was served from the browser's in-memory cache.
    */
   FromMemoryCache: ' (from memory cache)',
   /**
-   *@description Text used to show the user that a request was served from the browser's file cache.
+   * @description Text used to show the user that a request was served from the browser's file cache.
    */
   FromCache: ' (from cache)',
   /**
-   *@description Label for a network request indicating that it was a HTTP2 server push instead of a regular network request, in the Performance panel
+   * @description Label for a network request indicating that it was a HTTP2 server push instead of a regular network request, in the Performance panel
    */
   FromPush: ' (from push)',
   /**
-   *@description Text used to show a user that a request was served from an installed, active service worker.
+   * @description Text used to show a user that a request was served from an installed, active service worker.
    */
   FromServiceWorker: ' (from `service worker`)',
   /**
-   *@description Text for the event initiated by another one
+   * @description Text for the event initiated by another one
    */
   initiatedBy: 'Initiated by',
   /**
-   *@description Text that refers to if the network request is blocking
+   * @description Text that refers to if the network request is blocking
    */
   blocking: 'Blocking',
   /**
-   *@description Text that refers to if the network request is in-body parser render blocking
+   * @description Text that refers to if the network request is in-body parser render blocking
    */
   inBodyParserBlocking: 'In-body parser blocking',
   /**
-   *@description Text that refers to if the network request is render blocking
+   * @description Text that refers to if the network request is render blocking
    */
   renderBlocking: 'Render blocking',
   /**
@@ -117,34 +116,41 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/NetworkRequestDetails.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class NetworkRequestDetails extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-
-  #networkRequest: Trace.Types.Events.SyntheticNetworkRequest|null = null;
-  #maybeTarget: SDK.Target.Target|null = null;
+export class NetworkRequestDetails extends UI.Widget.Widget {
+  #view: typeof DEFAULT_VIEW;
+  #request: Trace.Types.Events.SyntheticNetworkRequest|null = null;
   #requestPreviewElements = new WeakMap<Trace.Types.Events.SyntheticNetworkRequest, HTMLElement>();
-  #linkifier: LegacyComponents.Linkifier.Linkifier;
-  #parsedTrace: Trace.Handlers.Types.ParsedTrace|null = null;
   #entityMapper: TimelineUtils.EntityMapper.EntityMapper|null = null;
+  #target: SDK.Target.Target|null = null;
+  #linkifier: LegacyComponents.Linkifier.Linkifier|null = null;
   #serverTimings: SDK.ServerTiming.ServerTiming[]|null = null;
-  constructor(linkifier: LegacyComponents.Linkifier.Linkifier) {
-    super();
+  #parsedTrace: Trace.Handlers.Types.ParsedTrace|null = null;
+
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+    this.requestUpdate();
+  }
+
+  set linkifier(linkifier: LegacyComponents.Linkifier.Linkifier|null) {
     this.#linkifier = linkifier;
+    this.requestUpdate();
   }
 
-  async setData(
-      parsedTrace: Trace.Handlers.Types.ParsedTrace, networkRequest: Trace.Types.Events.SyntheticNetworkRequest,
-      maybeTarget: SDK.Target.Target|null, entityMapper: TimelineUtils.EntityMapper.EntityMapper|null): Promise<void> {
-    if (this.#networkRequest === networkRequest && parsedTrace === this.#parsedTrace) {
-      return;
-    }
+  set parsedTrace(parsedTrace: Trace.Handlers.Types.ParsedTrace|null) {
     this.#parsedTrace = parsedTrace;
-    this.#networkRequest = networkRequest;
-    this.#maybeTarget = maybeTarget;
-    this.#entityMapper = entityMapper;
-    this.#serverTimings = null;
+    this.requestUpdate();
+  }
+
+  set target(maybeTarget: SDK.Target.Target|null) {
+    this.#target = maybeTarget;
+    this.requestUpdate();
+  }
+
+  set request(event: Trace.Types.Events.SyntheticNetworkRequest) {
+    this.#request = event;
 
-    for (const header of networkRequest.args.data.responseHeaders ?? []) {
+    for (const header of event.args.data.responseHeaders ?? []) {
       const headerName = header.name.toLocaleLowerCase();
       // Some popular hosting providers like vercel or render get rid of
       // Server-Timing headers added by users, so as a workaround we
@@ -156,280 +162,314 @@ export class NetworkRequestDetails extends HTMLElement {
         break;
       }
     }
-    await this.#render();
+    this.requestUpdate();
   }
 
-  #renderTitle(): Lit.TemplateResult|null {
-    if (!this.#networkRequest) {
-      return null;
-    }
-    const style = {
-      backgroundColor: `${colorForNetworkRequest(this.#networkRequest)}`,
-    };
-    return html`
-      <div class="network-request-details-title">
-        <div style=${Lit.Directives.styleMap(style)}></div>
-        ${i18nString(UIStrings.networkRequest)}
-      </div>
-    `;
+  set entityMapper(mapper: TimelineUtils.EntityMapper.EntityMapper|null) {
+    this.#entityMapper = mapper;
+    this.requestUpdate();
   }
 
-  #renderRow(title: string, value?: string|Node|Lit.TemplateResult): Lit.TemplateResult|null {
-    if (!value) {
-      return null;
-    }
-    // clang-format off
-    return html`
-      <div class="network-request-details-row">
-        <div class="title">${title}</div>
-        <div class="value">${value}</div>
-      </div>`;
-    // clang-format on
+  override performUpdate(): Promise<void>|void {
+    this.#view(
+        {
+          request: this.#request,
+          previewElementsCache: this.#requestPreviewElements,
+          target: this.#target,
+          entityMapper: this.#entityMapper,
+          serverTimings: this.#serverTimings,
+          linkifier: this.#linkifier,
+          parsedTrace: this.#parsedTrace,
+        },
+        {}, this.contentElement);
   }
+}
 
-  #renderServerTimings(): Lit.LitTemplate[]|Lit.LitTemplate {
-    if (!this.#serverTimings) {
-      return Lit.nothing;
-    }
-    // clang-format off
-    return html`
-      <div class="column-divider"></div>
-      <div class="network-request-details-col server-timings">
-          <div class="server-timing-column-header">${i18nString(UIStrings.serverTiming)}</div>
-          <div class="server-timing-column-header">${i18nString(UIStrings.description)}</div>
-          <div class="server-timing-column-header">${i18nString(UIStrings.time)}</div>
-        ${this.#serverTimings.map(timing => {
-          const classes = timing.metric.startsWith('(c') ? 'synthetic value' : 'value';
-          return html`
-              <div class=${classes}>${timing.metric || '-'}</div>
-              <div class=${classes}>${timing.description || '-'}</div>
-              <div class=${classes}>${timing.value || '-'}</div>
-          `;
-        })}
-      </div>`;
-    // clang-format on
+export interface ViewInput {
+  request: Trace.Types.Events.SyntheticNetworkRequest|null;
+  target: SDK.Target.Target|null;
+  previewElementsCache: WeakMap<Trace.Types.Events.SyntheticNetworkRequest, HTMLElement>;
+  entityMapper: TimelineUtils.EntityMapper.EntityMapper|null;
+  serverTimings: SDK.ServerTiming.ServerTiming[]|null;
+  linkifier: LegacyComponents.Linkifier.Linkifier|null;
+  parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
+}
+
+export const DEFAULT_VIEW: (
+    input: ViewInput, output: object, target: HTMLElement) => void = (input, _output, target) => {
+  if (!input.request) {
+    render(html``, target);
+    return;
   }
-  #renderURL(): Lit.TemplateResult|null {
-    if (!this.#networkRequest) {
-      return null;
-    }
-    const options: LegacyComponents.Linkifier.LinkifyURLOptions = {
-      tabStop: true,
-      showColumnNumber: false,
-      inlineFrameIndex: 0,
-      maxLength: MAX_URL_LENGTH,
-    };
-    const linkifiedURL = LegacyComponents.Linkifier.Linkifier.linkifyURL(
-        this.#networkRequest.args.data.url as Platform.DevToolsPath.UrlString, options);
-
-    // Potentially link to request within Network Panel
-    const networkRequest = SDK.TraceObject.RevealableNetworkRequest.create(this.#networkRequest);
-    if (networkRequest) {
-      linkifiedURL.addEventListener('contextmenu', (event: MouseEvent) => {
-        if (!this.#networkRequest) {
-          return;
-        }
-        const contextMenu = new UI.ContextMenu.ContextMenu(event);
-        contextMenu.appendApplicableItems(networkRequest);
-        void contextMenu.show();
-      });
-
-      // clang-format off
+  const {request} = input;
+  const {data} = request.args;
+
+  const redirectsHtml = NetworkRequestTooltip.renderRedirects(request);
+  // clang-format off
+      render(html`
+        <style>${networkRequestDetailsStyles}</style>
+        <style>${networkRequestTooltipStyles}</style>
+
+        <div class="network-request-details-content">
+          ${renderTitle(input.request)}
+          ${renderURL(input.request)}
+          <div class="network-request-details-cols">
+            ${Lit.Directives.until(renderPreviewElement(
+              input.request,
+              input.target,
+              input.previewElementsCache,
+            ))}
+            <div class="network-request-details-col">
+              ${renderRow(i18nString(UIStrings.requestMethod), data.requestMethod)}
+              ${renderRow(i18nString(UIStrings.protocol), data.protocol)}
+              ${renderRow(i18nString(UIStrings.priority), NetworkRequestTooltip.renderPriorityValue(request))}
+              ${renderRow(i18nString(UIStrings.mimeType), data.mimeType)}
+              ${renderEncodedDataLength(request)}
+              ${renderRow(i18nString(UIStrings.decodedBody), i18n.ByteUtilities.bytesToString(request.args.data.decodedBodyLength))}
+              ${renderBlockingRow(request)}
+              ${renderFromCache(request)}
+              ${renderThirdPartyEntity(request, input.entityMapper)}
+            </div>
+            <div class="column-divider"></div>
+            <div class="network-request-details-col">
+              <div class="timing-rows">
+                ${NetworkRequestTooltip.renderTimings(request)}
+              </div>
+            </div>
+            ${renderServerTimings(input.serverTimings)}
+            ${redirectsHtml ? html `
+              <div class="column-divider"></div>
+              <div class="network-request-details-col redirect-details">
+                ${redirectsHtml}
+              </div>
+            ` : Lit.nothing}
+            </div>
+            ${renderInitiatedBy(request, input.parsedTrace, input.target, input.linkifier)}
+          </div>
+        </div>
+     `, target);
+  // clang-format on
+};
+
+function renderTitle(request: Trace.Types.Events.SyntheticNetworkRequest): Lit.TemplateResult {
+  const style = {
+    backgroundColor: `${colorForNetworkRequest(request)}`,
+  };
+
+  return html`
+    <div class="network-request-details-title">
+      <div style=${Lit.Directives.styleMap(style)}></div>
+      ${i18nString(UIStrings.networkRequest)}
+    </div>
+  `;
+}
+
+function renderURL(request: Trace.Types.Events.SyntheticNetworkRequest): Lit.TemplateResult {
+  const options: LegacyComponents.Linkifier.LinkifyURLOptions = {
+    tabStop: true,
+    showColumnNumber: false,
+    inlineFrameIndex: 0,
+    maxLength: MAX_URL_LENGTH,
+  };
+  const linkifiedURL = LegacyComponents.Linkifier.Linkifier.linkifyURL(
+      request.args.data.url as Platform.DevToolsPath.UrlString, options);
+
+  // Potentially link to request within Network Panel
+  const networkRequest = SDK.TraceObject.RevealableNetworkRequest.create(request);
+  if (networkRequest) {
+    linkifiedURL.addEventListener('contextmenu', (event: MouseEvent) => {
+      const contextMenu = new UI.ContextMenu.ContextMenu(event);
+      contextMenu.appendApplicableItems(networkRequest);
+      void contextMenu.show();
+    });
+
+    // clang-format off
       const urlElement = html`
         ${linkifiedURL}
         <devtools-request-link-icon .data=${{request: networkRequest.networkRequest}}>
         </devtools-request-link-icon>
       `;
-      // clang-format on
-      return html`<div class="network-request-details-item">${urlElement}</div>`;
-    }
-
-    return html`<div class="network-request-details-item">${linkifiedURL}</div>`;
+    // clang-format on
+    return html`<div class="network-request-details-item">${urlElement}</div>`;
   }
 
-  #renderFromCache(): Lit.TemplateResult|null {
-    if (!this.#networkRequest) {
-      return null;
-    }
-    const cached = this.#networkRequest.args.data.syntheticData.isMemoryCached ||
-        this.#networkRequest.args.data.syntheticData.isDiskCached;
-    return this.#renderRow(
-        i18nString(UIStrings.fromCache), cached ? i18nString(UIStrings.yes) : i18nString(UIStrings.no));
-  }
+  return html`<div class="network-request-details-item">${linkifiedURL}</div>`;
+}
 
-  #renderThirdPartyEntity(): Lit.TemplateResult|null {
-    if (!this.#entityMapper || !this.#networkRequest) {
-      return null;
-    }
-    const entity = this.#entityMapper.entityForEvent(this.#networkRequest);
-    if (!entity) {
-      return null;
-    }
-    return this.#renderRow(i18nString(UIStrings.entity), entity.name);
+async function renderPreviewElement(
+    request: Trace.Types.Events.SyntheticNetworkRequest, target: SDK.Target.Target|null,
+    previewElementsCache: WeakMap<Trace.Types.Events.SyntheticNetworkRequest, HTMLElement>): Promise<Lit.LitTemplate> {
+  if (!request.args.data.url || !target) {
+    return Lit.nothing;
   }
 
-  #renderEncodedDataLength(): Lit.TemplateResult|null {
-    if (!this.#networkRequest) {
-      return null;
-    }
-    let lengthText = '';
-    if (this.#networkRequest.args.data.syntheticData.isMemoryCached) {
-      lengthText += i18nString(UIStrings.FromMemoryCache);
-    } else if (this.#networkRequest.args.data.syntheticData.isDiskCached) {
-      lengthText += i18nString(UIStrings.FromCache);
-    } else if (this.#networkRequest.args.data.timing?.pushStart) {
-      lengthText += i18nString(UIStrings.FromPush);
-    }
-    if (this.#networkRequest.args.data.fromServiceWorker) {
-      lengthText += i18nString(UIStrings.FromServiceWorker);
-    }
-    if (this.#networkRequest.args.data.encodedDataLength || !lengthText) {
-      lengthText = `${i18n.ByteUtilities.bytesToString(this.#networkRequest.args.data.encodedDataLength)}${lengthText}`;
-    }
-    return this.#renderRow(i18nString(UIStrings.encodedData), lengthText);
-  }
+  const url = request.args.data.url as Platform.DevToolsPath.UrlString;
 
-  #renderInitiatedBy(): Lit.TemplateResult|null {
-    if (!this.#networkRequest) {
-      return null;
-    }
+  if (!previewElementsCache.get(request)) {
+    const previewOpts = {
+      imageAltText:
+          LegacyComponents.ImagePreview.ImagePreview.defaultAltTextForImageURL(url as Platform.DevToolsPath.UrlString),
+      precomputedFeatures: undefined,
+      align: LegacyComponents.ImagePreview.Align.START,
+      hideFileData: true,
+    };
 
-    const hasStackTrace = Trace.Helpers.Trace.stackTraceInEvent(this.#networkRequest) !== null;
-    let link: HTMLElement|null = null;
-    // If we have a stack trace, that is the most reliable way to get the initiator data and display a link to the source.
-    if (hasStackTrace) {
-      const topFrame = Trace.Helpers.Trace.getZeroIndexedStackTraceInEventPayload(this.#networkRequest)?.at(0) ?? null;
-      if (topFrame) {
-        link = this.#linkifier.maybeLinkifyConsoleCallFrame(
-            this.#maybeTarget, topFrame, {tabStop: true, inlineFrameIndex: 0, showColumnNumber: true});
-      }
-    }
-    // If we do not, we can see if the network handler found an initiator and try to link by URL
-    const initiator = this.#parsedTrace?.NetworkRequests.eventToInitiator.get(this.#networkRequest);
-    if (initiator) {
-      link = this.#linkifier.maybeLinkifyScriptLocation(
-          this.#maybeTarget,
-          null,  // this would be the scriptId, but we don't have one. The linkifier will fallback to using the URL.
-          initiator.args.data.url as Platform.DevToolsPath.UrlString,
-          undefined,  // line number
-      );
+    const previewElement = await LegacyComponents.ImagePreview.ImagePreview.build(
+        url as Platform.DevToolsPath.UrlString, false, previewOpts);
+    if (previewElement) {
+      previewElementsCache.set(request, previewElement);
     }
+  }
 
-    if (!link) {
-      return null;
-    }
+  const requestPreviewElement = previewElementsCache.get(request);
+  if (requestPreviewElement) {
     // clang-format off
     return html`
-      <div class="network-request-details-item">
-        <div class="title">${i18nString(UIStrings.initiatedBy)}</div>
-        <div class="value">${link}</div>
-      </div>`;
+      <div class="network-request-details-col">${requestPreviewElement}</div>
+      <div class="column-divider"></div>`;
     // clang-format on
   }
+  return Lit.nothing;
+}
 
-  #renderBlockingRow(): Lit.TemplateResult|null {
-    if (!this.#networkRequest || !Helpers.Network.isSyntheticNetworkRequestEventRenderBlocking(this.#networkRequest)) {
-      return null;
-    }
-
-    let renderBlockingText;
-    switch (this.#networkRequest.args.data.renderBlocking) {
-      case 'blocking':
-        renderBlockingText = UIStrings.renderBlocking;
-        break;
-      case 'in_body_parser_blocking':
-        renderBlockingText = UIStrings.inBodyParserBlocking;
-        break;
-      default:
-        // Shouldn't fall to this block, if so, this network request is not render blocking, so return null.
-        return null;
-    }
-    return this.#renderRow(i18nString(UIStrings.blocking), renderBlockingText);
+function renderRow(title: string, value?: string|Node|Lit.TemplateResult): Lit.LitTemplate {
+  if (!value) {
+    return Lit.nothing;
   }
+  // clang-format off
+    return html`
+      <div class="network-request-details-row">
+        <div class="title">${title}</div>
+        <div class="value">${value}</div>
+      </div>`;
+  // clang-format on
+}
 
-  async #renderPreviewElement(): Promise<Lit.TemplateResult|null> {
-    if (!this.#networkRequest || !this.#networkRequest.args.data.url || !this.#maybeTarget) {
-      return null;
-    }
-    if (!this.#requestPreviewElements.get(this.#networkRequest)) {
-      const previewOpts = {
-        imageAltText: LegacyComponents.ImagePreview.ImagePreview.defaultAltTextForImageURL(
-            this.#networkRequest.args.data.url as Platform.DevToolsPath.UrlString),
-        precomputedFeatures: undefined,
-        align: LegacyComponents.ImagePreview.Align.START,
-        hideFileData: true,
-      };
-
-      const previewElement = await LegacyComponents.ImagePreview.ImagePreview.build(
-          this.#networkRequest.args.data.url as Platform.DevToolsPath.UrlString, false, previewOpts);
-      previewElement && this.#requestPreviewElements.set(this.#networkRequest, previewElement);
-    }
+function renderEncodedDataLength(request: Trace.Types.Events.SyntheticNetworkRequest): Lit.LitTemplate {
+  let lengthText = '';
+  if (request.args.data.syntheticData.isMemoryCached) {
+    lengthText += i18nString(UIStrings.FromMemoryCache);
+  } else if (request.args.data.syntheticData.isDiskCached) {
+    lengthText += i18nString(UIStrings.FromCache);
+  } else if (request.args.data.timing?.pushStart) {
+    lengthText += i18nString(UIStrings.FromPush);
+  }
+  if (request.args.data.fromServiceWorker) {
+    lengthText += i18nString(UIStrings.FromServiceWorker);
+  }
+  if (request.args.data.encodedDataLength || !lengthText) {
+    lengthText = `${i18n.ByteUtilities.bytesToString(request.args.data.encodedDataLength)}${lengthText}`;
+  }
+  return renderRow(i18nString(UIStrings.encodedData), lengthText);
+}
 
-    const requestPreviewElement = this.#requestPreviewElements.get(this.#networkRequest);
-    if (requestPreviewElement) {
-      // clang-format off
-      return html`
-        <div class="network-request-details-col">${requestPreviewElement}</div>
-        <div class="column-divider"></div>`;
-      // clang-format on
-    }
-    return null;
+function renderBlockingRow(request: Trace.Types.Events.SyntheticNetworkRequest): Lit.LitTemplate {
+  if (!Helpers.Network.isSyntheticNetworkRequestEventRenderBlocking(request)) {
+    return Lit.nothing;
   }
 
-  async #render(): Promise<void> {
-    if (!this.#networkRequest) {
-      return;
-    }
-    const networkData = this.#networkRequest.args.data;
+  let renderBlockingText;
+  switch (request.args.data.renderBlocking) {
+    case 'blocking':
+      renderBlockingText = UIStrings.renderBlocking;
+      break;
+    case 'in_body_parser_blocking':
+      renderBlockingText = UIStrings.inBodyParserBlocking;
+      break;
+    default:
+      // Shouldn't fall to this block, if so, this network request is not
+      // render blocking, so return null.
+      return Lit.nothing;
+  }
+  return renderRow(i18nString(UIStrings.blocking), renderBlockingText);
+}
 
-    const redirectsHtml = NetworkRequestTooltip.renderRedirects(this.#networkRequest);
+function renderFromCache(
+    request: Trace.Types.Events.SyntheticNetworkRequest,
+    ): Lit.LitTemplate {
+  const cached = request.args.data.syntheticData.isMemoryCached || request.args.data.syntheticData.isDiskCached;
+  return renderRow(i18nString(UIStrings.fromCache), cached ? i18nString(UIStrings.yes) : i18nString(UIStrings.no));
+}
 
-    // clang-format off
-    const output = html`
-      <style>${networkRequestDetailsStyles}</style>
-      <style>${networkRequestTooltipStyles}</style>
-      <div class="network-request-details-content">
-        ${this.#renderTitle()}
-        ${this.#renderURL()}
-        <div class="network-request-details-cols">
-          ${await this.#renderPreviewElement()}
-          <div class="network-request-details-col">
-            ${this.#renderRow(i18nString(UIStrings.requestMethod), networkData.requestMethod)}
-            ${this.#renderRow(i18nString(UIStrings.protocol), networkData.protocol)}
-            ${this.#renderRow(i18nString(UIStrings.priority), NetworkRequestTooltip.renderPriorityValue(this.#networkRequest))}
-            ${this.#renderRow(i18nString(UIStrings.mimeType), networkData.mimeType)}
-            ${this.#renderEncodedDataLength()}
-            ${this.#renderRow(i18nString(UIStrings.decodedBody), i18n.ByteUtilities.bytesToString(this.#networkRequest.args.data.decodedBodyLength))}
-            ${this.#renderBlockingRow()}
-            ${this.#renderFromCache()}
-            ${this.#renderThirdPartyEntity()}
-          </div>
-          <div class="column-divider"></div>
-          <div class="network-request-details-col">
-            <div class="timing-rows">
-              ${NetworkRequestTooltip.renderTimings(this.#networkRequest)}
-            </div>
-          </div>
-          ${this.#renderServerTimings()}
-          ${redirectsHtml ? html `
-            <div class="column-divider"></div>
-            <div class="network-request-details-col redirect-details">
-              ${redirectsHtml}
-            </div>
-          ` : Lit.nothing}
-        </div>
-        ${this.#renderInitiatedBy()}
-      </div>
-    `; // The last items are outside the 2 column layout because InitiatedBy can be very wide
-    // clang-format on
-    Lit.render(output, this.#shadow, {host: this});
+function renderThirdPartyEntity(
+    request: Trace.Types.Events.SyntheticNetworkRequest,
+    entityMapper: TimelineUtils.EntityMapper.EntityMapper|null): Lit.LitTemplate {
+  if (!entityMapper) {
+    return Lit.nothing;
   }
+  const entity = entityMapper.entityForEvent(request);
+  if (!entity) {
+    return Lit.nothing;
+  }
+  return renderRow(i18nString(UIStrings.entity), entity.name);
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-network-request-details': NetworkRequestDetails;
+function renderServerTimings(timings: SDK.ServerTiming.ServerTiming[]|null): Lit.LitTemplate[]|Lit.LitTemplate {
+  if (!timings || timings.length === 0) {
+    return Lit.nothing;
   }
+  // clang-format off
+  return html`
+    <div class="column-divider"></div>
+    <div class="network-request-details-col server-timings">
+      <div class="server-timing-column-header">${i18nString(UIStrings.serverTiming)}</div>
+      <div class="server-timing-column-header">${i18nString(UIStrings.description)}</div>
+      <div class="server-timing-column-header">${i18nString(UIStrings.time)}</div>
+      ${timings.map(timing => {
+        const classes = timing.metric.startsWith('(c') ? 'synthetic value' : 'value';
+        return html`
+          <div class=${classes}>${timing.metric || '-'}</div>
+          <div class=${classes}>${timing.description || '-'}</div>
+          <div class=${classes}>${timing.value || '-'}</div>
+        `;
+      })}
+    </div>`;
+  // clang-format on
 }
+function renderInitiatedBy(
+    request: Trace.Types.Events.SyntheticNetworkRequest,
+    parsedTrace: Trace.Handlers.Types.ParsedTrace|null,
+    target: SDK.Target.Target|null,
+    linkifier: LegacyComponents.Linkifier.Linkifier|null,
+    ): Lit.LitTemplate {
+  if (!linkifier) {
+    return Lit.nothing;
+  }
 
-customElements.define('devtools-performance-network-request-details', NetworkRequestDetails);
+  const hasStackTrace = Trace.Helpers.Trace.stackTraceInEvent(request) !== null;
+  let link: HTMLElement|null = null;
+  const options: LegacyComponents.Linkifier.LinkifyOptions = {
+    tabStop: true,
+    showColumnNumber: true,
+    inlineFrameIndex: 0,
+  };
+  // If we have a stack trace, that is the most reliable way to get the initiator data and display a link to the source.
+  if (hasStackTrace) {
+    const topFrame = Trace.Helpers.Trace.getZeroIndexedStackTraceInEventPayload(request)?.at(0) ?? null;
+    if (topFrame) {
+      link = linkifier.maybeLinkifyConsoleCallFrame(target, topFrame, options);
+    }
+  }
+  // If we do not, we can see if the network handler found an initiator and try to link by URL
+  const initiator = parsedTrace?.NetworkRequests.eventToInitiator.get(request);
+  if (initiator) {
+    link = linkifier.maybeLinkifyScriptLocation(
+        target,
+        null,  // this would be the scriptId, but we don't have one. The linkifier will fallback to using the URL.
+        initiator.args.data.url as Platform.DevToolsPath.UrlString,
+        undefined,  // line number
+        options);
+  }
+
+  if (!link) {
+    return Lit.nothing;
+  }
+
+  // clang-format off
+    return html`
+      <div class="network-request-details-item">
+        <div class="title">${i18nString(UIStrings.initiatedBy)}</div>
+        <div class="value focusable-outline">${link}</div>
+      </div>`;
+  // clang-format on
+}