chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

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

@@ -22,17 +22,25 @@ import type * as Menus from '../../../ui/components/menus/menus.js';
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import type * as Settings from '../../../ui/components/settings/settings.js';
 import * as UI from '../../../ui/legacy/legacy.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as MobileThrottling from '../../mobile_throttling/mobile_throttling.js';
 import {getThrottlingRecommendations, md} from '../utils/Helpers.js';
 
-import liveMetricsViewStyles from './liveMetricsView.css.js';
+import liveMetricsViewStylesRaw from './liveMetricsView.css.js';
 import type {MetricCardData} from './MetricCard.js';
-import metricValueStyles from './metricValueStyles.css.js';
+import metricValueStylesRaw from './metricValueStyles.css.js';
 import {CLS_THRESHOLDS, INP_THRESHOLDS, renderMetricValue} from './Utils.js';
 
-const {html, nothing} = LitHtml;
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const liveMetricsViewStyles = new CSSStyleSheet();
+liveMetricsViewStyles.replaceSync(liveMetricsViewStylesRaw.cssContent);
+
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const metricValueStyles = new CSSStyleSheet();
+metricValueStyles.replaceSync(metricValueStylesRaw.cssContent);
+
+const {html, nothing} = Lit;
 
 type DeviceOption = CrUXManager.DeviceScope|'AUTO';
 
@@ -294,9 +302,9 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
 
   #isNode: boolean = false;
 
-  #lcpValue?: LiveMetrics.LCPValue;
-  #clsValue?: LiveMetrics.CLSValue;
-  #inpValue?: LiveMetrics.INPValue;
+  #lcpValue?: LiveMetrics.LcpValue;
+  #clsValue?: LiveMetrics.ClsValue;
+  #inpValue?: LiveMetrics.InpValue;
   #interactions: LiveMetrics.InteractionMap = new Map();
   #layoutShifts: LiveMetrics.LayoutShift[] = [];
 
@@ -419,7 +427,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         EmulationModel.DeviceModeModel.Events.UPDATED, this.#onEmulationChanged, this);
   }
 
-  #renderLcpCard(): LitHtml.LitTemplate {
+  #renderLcpCard(): Lit.LitTemplate {
     const fieldData = this.#cruxManager.getSelectedFieldMetricData('largest_contentful_paint');
     const nodeLink = this.#lcpValue?.nodeRef?.link;
     const phases = this.#lcpValue?.phases;
@@ -452,7 +460,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     // clang-format on
   }
 
-  #renderClsCard(): LitHtml.LitTemplate {
+  #renderClsCard(): Lit.LitTemplate {
     const fieldData = this.#cruxManager.getSelectedFieldMetricData('cumulative_layout_shift');
 
     const clusterIds = new Set(this.#clsValue?.clusterShiftIds || []);
@@ -485,7 +493,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     // clang-format on
   }
 
-  #renderInpCard(): LitHtml.LitTemplate {
+  #renderInpCard(): Lit.LitTemplate {
     const fieldData = this.#cruxManager.getSelectedFieldMetricData('interaction_to_next_paint');
     const phases = this.#inpValue?.phases;
     const interaction = this.#inpValue && this.#interactions.get(this.#inpValue.interactionId);
@@ -521,7 +529,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     // clang-format on
   }
 
-  #renderRecordAction(action: UI.ActionRegistration.Action): LitHtml.LitTemplate {
+  #renderRecordAction(action: UI.ActionRegistration.Action): Lit.LitTemplate {
     function onClick(): void {
       void action.execute();
     }
@@ -582,7 +590,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     });
   }
 
-  #renderRecordingSettings(): LitHtml.LitTemplate {
+  #renderRecordingSettings(): Lit.LitTemplate {
     const fieldEnabled = this.#cruxManager.getConfigSetting().get().enabled;
 
     const deviceRecEl = document.createElement('span');
@@ -606,7 +614,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         </ul>
       ` : nothing}
       <div class="environment-option">
-        <devtools-cpu-throttling-selector .recommendedRate=${recs.cpuRate}></devtools-cpu-throttling-selector>
+        <devtools-cpu-throttling-selector .recommendedOption=${recs.cpuOption}></devtools-cpu-throttling-selector>
       </div>
       <div class="environment-option">
         <devtools-network-throttling-selector .recommendedConditions=${recs.networkConditions}></devtools-network-throttling-selector>
@@ -644,9 +652,9 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
   }
 
-  #renderPageScopeSetting(): LitHtml.LitTemplate {
+  #renderPageScopeSetting(): Lit.LitTemplate {
     if (!this.#cruxManager.getConfigSetting().get().enabled) {
-      return LitHtml.nothing;
+      return Lit.nothing;
     }
 
     const urlLabel = this.#getPageScopeLabel('url');
@@ -703,7 +711,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
   #getLabelForDeviceOption(deviceOption: DeviceOption): string {
     let baseLabel;
     if (deviceOption === 'AUTO') {
-      const deviceScope = this.#cruxManager.getSelectedDeviceScope();
+      const deviceScope = this.#cruxManager.resolveDeviceOptionToScope(deviceOption);
       const deviceScopeLabel = this.#getDeviceScopeDisplayName(deviceScope);
       baseLabel = i18nString(UIStrings.auto, {PH1: deviceScopeLabel});
     } else {
@@ -727,9 +735,9 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
   }
 
-  #renderDeviceScopeSetting(): LitHtml.LitTemplate {
+  #renderDeviceScopeSetting(): Lit.LitTemplate {
     if (!this.#cruxManager.getConfigSetting().get().enabled) {
-      return LitHtml.nothing;
+      return Lit.nothing;
     }
 
     // If there is no data at all we should force users to try adjusting the page scope
@@ -800,7 +808,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     });
   }
 
-  #renderCollectionPeriod(): LitHtml.LitTemplate {
+  #renderCollectionPeriod(): Lit.LitTemplate {
     const range = this.#getCollectionPeriodRange();
 
     const dateEl = document.createElement('span');
@@ -823,7 +831,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     `;
   }
 
-  #renderFieldDataMessage(): LitHtml.LitTemplate {
+  #renderFieldDataMessage(): Lit.LitTemplate {
     if (this.#cruxManager.getConfigSetting().get().enabled) {
       return this.#renderCollectionPeriod();
     }
@@ -837,7 +845,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     `;
   }
 
-  #renderLogSection(): LitHtml.LitTemplate {
+  #renderLogSection(): Lit.LitTemplate {
     // clang-format off
     return html`
       <section class="logs-section" aria-label=${i18nString(UIStrings.eventLogs)}>
@@ -881,9 +889,9 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     }
   }
 
-  #renderInteractionsLog(): LitHtml.LitTemplate {
+  #renderInteractionsLog(): Lit.LitTemplate {
     if (!this.#interactions.size) {
-      return LitHtml.nothing;
+      return Lit.nothing;
     }
 
     // clang-format off
@@ -992,9 +1000,9 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     });
   }
 
-  #renderLayoutShiftsLog(): LitHtml.LitTemplate {
+  #renderLayoutShiftsLog(): Lit.LitTemplate {
     if (!this.#layoutShifts.length) {
-      return LitHtml.nothing;
+      return Lit.nothing;
     }
 
     // clang-format off
@@ -1032,7 +1040,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     // clang-format on
   }
 
-  #renderNodeView(): LitHtml.LitTemplate {
+  #renderNodeView(): Lit.LitTemplate {
     return html`
       <div class="node-view">
         <main>
@@ -1046,7 +1054,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
 
   #render = (): void => {
     if (this.#isNode) {
-      LitHtml.render(this.#renderNodeView(), this.#shadow, {host: this});
+      Lit.render(this.#renderNodeView(), this.#shadow, {host: this});
       return;
     }
 
@@ -1109,7 +1117,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         </div>
       </div>
     `;
-    LitHtml.render(output, this.#shadow, {host: this});
+    Lit.render(output, this.#shadow, {host: this});
   };
   // clang-format on
 }

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

@@ -8,13 +8,14 @@ import * as Platform from '../../../core/platform/platform.js';
 import * as CrUXManager from '../../../models/crux-manager/crux-manager.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as Lit from '../../../ui/lit/lit.js';
 
-import metricCardStyles from './metricCard.css.js';
+import metricCardStylesRaw from './metricCard.css.js';
 import {type CompareRating, renderCompareText, renderDetailedCompareText} from './MetricCompareStrings.js';
-import metricValueStyles from './metricValueStyles.css.js';
+import metricValueStylesRaw from './metricValueStyles.css.js';
 import {
   CLS_THRESHOLDS,
+  determineCompareRating,
   INP_THRESHOLDS,
   LCP_THRESHOLDS,
   type MetricRating,
@@ -23,7 +24,15 @@ import {
   renderMetricValue,
 } from './Utils.js';
 
-const {html, nothing} = LitHtml;
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const metricCardStyles = new CSSStyleSheet();
+metricCardStyles.replaceSync(metricCardStylesRaw.cssContent);
+
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const metricValueStyles = new CSSStyleSheet();
+metricValueStyles.replaceSync(metricValueStylesRaw.cssContent);
+
+const {html, nothing} = Lit;
 
 const UIStrings = {
   /**
@@ -261,17 +270,6 @@ export class MetricCard extends HTMLElement {
     });
   }
 
-  #getCompareThreshold(): number {
-    switch (this.#data.metric) {
-      case 'LCP':
-        return 1000;
-      case 'CLS':
-        return 0.1;
-      case 'INP':
-        return 200;
-    }
-  }
-
   #getTitle(): string {
     switch (this.#data.metric) {
       case 'LCP':
@@ -366,28 +364,10 @@ export class MetricCard extends HTMLElement {
       return;
     }
 
-    const thresholds = this.#getThresholds();
-    const localRating = rateMetric(localValue, thresholds);
-    const fieldRating = rateMetric(fieldValue, thresholds);
-
-    // It's not worth highlighting a significant difference when both #s
-    // are rated "good"
-    if (localRating === 'good' && fieldRating === 'good') {
-      return 'similar';
-    }
-
-    const compareThreshold = this.#getCompareThreshold();
-    if (localValue - fieldValue > compareThreshold) {
-      return 'worse';
-    }
-    if (fieldValue - localValue > compareThreshold) {
-      return 'better';
-    }
-
-    return 'similar';
+    return determineCompareRating(this.#data.metric, localValue, fieldValue);
   }
 
-  #renderCompareString(): LitHtml.LitTemplate {
+  #renderCompareString(): Lit.LitTemplate {
     const localValue = this.#getLocalValue();
     if (localValue === undefined) {
       if (this.#data.metric === 'INP') {
@@ -395,7 +375,7 @@ export class MetricCard extends HTMLElement {
           <div class="compare-text">${i18nString(UIStrings.interactToMeasure)}</div>
         `;
       }
-      return LitHtml.nothing;
+      return Lit.nothing;
     }
 
     const compare = this.#getCompareRating();
@@ -418,10 +398,10 @@ export class MetricCard extends HTMLElement {
     // clang-format on
   }
 
-  #renderEnvironmentRecommendations(): LitHtml.LitTemplate {
+  #renderEnvironmentRecommendations(): Lit.LitTemplate {
     const compare = this.#getCompareRating();
     if (!compare || compare === 'similar') {
-      return LitHtml.nothing;
+      return Lit.nothing;
     }
 
     const recs: string[] = [];
@@ -456,7 +436,7 @@ export class MetricCard extends HTMLElement {
     }
 
     if (!recs.length) {
-      return LitHtml.nothing;
+      return Lit.nothing;
     }
 
     return html`
@@ -471,7 +451,7 @@ export class MetricCard extends HTMLElement {
     return `timeline.landing.${isLocal ? 'local' : 'field'}-${this.#data.metric.toLowerCase()}`;
   }
 
-  #renderDetailedCompareString(): LitHtml.LitTemplate {
+  #renderDetailedCompareString(): Lit.LitTemplate {
     const localValue = this.#getLocalValue();
     if (localValue === undefined) {
       if (this.#data.metric === 'INP') {
@@ -479,7 +459,7 @@ export class MetricCard extends HTMLElement {
           <div class="detailed-compare-text">${i18nString(UIStrings.interactToMeasure)}</div>
         `;
       }
-      return LitHtml.nothing;
+      return Lit.nothing;
     }
 
     const localRating = rateMetric(localValue, this.#getThresholds());
@@ -536,7 +516,7 @@ export class MetricCard extends HTMLElement {
     return i18nString(UIStrings.percentage, {PH1: percent});
   }
 
-  #renderFieldHistogram(): LitHtml.LitTemplate {
+  #renderFieldHistogram(): Lit.LitTemplate {
     const fieldEnabled = CrUXManager.CrUXManager.instance().getConfigSetting().get().enabled;
 
     const format = this.#getFormatFn();
@@ -592,11 +572,11 @@ export class MetricCard extends HTMLElement {
     // clang-format on
   }
 
-  #renderPhaseTable(): LitHtml.LitTemplate {
+  #renderPhaseTable(): Lit.LitTemplate {
     const localValue = this.#getLocalValue();
     const phases = this.#data.phases;
     if (!phases || !localValue) {
-      return LitHtml.nothing;
+      return Lit.nothing;
     }
 
     return html`
@@ -678,7 +658,7 @@ export class MetricCard extends HTMLElement {
         <slot name="extra-info"></slot>
       </div>
     `;
-    LitHtml.render(output, this.#shadow, {host: this});
+    Lit.render(output, this.#shadow, {host: this});
   };
   // clang-format on
 }

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

@@ -12,6 +12,7 @@ import * as TimelineComponents from './components.js';
 describeWithMockConnection('NetworkRequestDetails', () => {
   it('renders the right details for a network event from Trace', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'lcp-web-font.json.gz');
+    const entityMapper = new Timeline.Utils.EntityMapper.EntityMapper(parsedTrace);
     const networkRequests = parsedTrace.NetworkRequests.byTime;
     const cssRequest = networkRequests.find(request => {
       return request.args.data.url === 'https://chromedevtools.github.io/performance-stories/lcp-web-font/app.css';
@@ -22,7 +23,8 @@ describeWithMockConnection('NetworkRequestDetails', () => {
 
     const details =
         new TimelineComponents.NetworkRequestDetails.NetworkRequestDetails(new Components.Linkifier.Linkifier());
-    await details.setData(parsedTrace, cssRequest, Timeline.TargetForEvent.targetForEvent(parsedTrace, cssRequest));
+    await details.setData(
+        parsedTrace, cssRequest, Timeline.TargetForEvent.targetForEvent(parsedTrace, cssRequest), entityMapper);
 
     if (!details.shadowRoot) {
       throw new Error('Could not find expected element to test.');
@@ -52,6 +54,7 @@ describeWithMockConnection('NetworkRequestDetails', () => {
             value: 'Render blocking',
           },
           {title: 'From cache', value: 'Yes'},
+          {title: 'Third party', value: 'GitHub'},
           {title: undefined, value: durationInnerText},
           {
             title: 'Initiated by',

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

@@ -6,20 +6,28 @@ import '../../../ui/components/request_link_icon/request_link_icon.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
-import type * as SDK from '../../../core/sdk/sdk.js';
+import * as SDK from '../../../core/sdk/sdk.js';
 import * as Helpers from '../../../models/trace/helpers/helpers.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as LegacyComponents from '../../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../../ui/legacy/legacy.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
-import * as TimelineUtils from '../utils/utils.js';
+import * as Lit from '../../../ui/lit/lit.js';
+import type * as TimelineUtils from '../utils/utils.js';
 
-import NetworkRequestDetailsStyles from './networkRequestDetails.css.js';
-import networkRequestTooltipStyles from './networkRequestTooltip.css.js';
+import NetworkRequestDetailsStylesRaw from './networkRequestDetails.css.js';
+import networkRequestTooltipStylesRaw from './networkRequestTooltip.css.js';
 import {NetworkRequestTooltip} from './NetworkRequestTooltip.js';
 import {colorForNetworkRequest} from './Utils.js';
 
-const {html} = LitHtml;
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const NetworkRequestDetailsStyles = new CSSStyleSheet();
+NetworkRequestDetailsStyles.replaceSync(NetworkRequestDetailsStylesRaw.cssContent);
+
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const networkRequestTooltipStyles = new CSSStyleSheet();
+networkRequestTooltipStyles.replaceSync(networkRequestTooltipStylesRaw.cssContent);
+
+const {html} = Lit;
 
 const MAX_URL_LENGTH = 100;
 
@@ -92,6 +100,10 @@ const UIStrings = {
    *@description Text that refers to if the network request is render blocking
    */
   renderBlocking: 'Render blocking',
+  /**
+   * @description Text to refer to a 3rd Party entity.
+   */
+  entity: 'Third party',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/NetworkRequestDetails.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -104,6 +116,7 @@ export class NetworkRequestDetails extends HTMLElement {
   #requestPreviewElements = new WeakMap<Trace.Types.Events.SyntheticNetworkRequest, HTMLImageElement>();
   #linkifier: LegacyComponents.Linkifier.Linkifier;
   #parsedTrace: Trace.Handlers.Types.ParsedTrace|null = null;
+  #entityMapper: TimelineUtils.EntityMapper.EntityMapper|null = null;
   constructor(linkifier: LegacyComponents.Linkifier.Linkifier) {
     super();
     this.#linkifier = linkifier;
@@ -115,17 +128,18 @@ export class NetworkRequestDetails extends HTMLElement {
 
   async setData(
       parsedTrace: Trace.Handlers.Types.ParsedTrace, networkRequest: Trace.Types.Events.SyntheticNetworkRequest,
-      maybeTarget: SDK.Target.Target|null): Promise<void> {
+      maybeTarget: SDK.Target.Target|null, entityMapper: TimelineUtils.EntityMapper.EntityMapper|null): Promise<void> {
     if (this.#networkRequest === networkRequest && parsedTrace === this.#parsedTrace) {
       return;
     }
     this.#parsedTrace = parsedTrace;
     this.#networkRequest = networkRequest;
     this.#maybeTarget = maybeTarget;
+    this.#entityMapper = entityMapper;
     await this.#render();
   }
 
-  #renderTitle(): LitHtml.TemplateResult|null {
+  #renderTitle(): Lit.TemplateResult|null {
     if (!this.#networkRequest) {
       return null;
     }
@@ -134,13 +148,13 @@ export class NetworkRequestDetails extends HTMLElement {
     };
     return html`
       <div class="network-request-details-title">
-        <div style=${LitHtml.Directives.styleMap(style)}></div>
+        <div style=${Lit.Directives.styleMap(style)}></div>
         ${i18nString(UIStrings.networkRequest)}
       </div>
     `;
   }
 
-  #renderRow(title: string, value?: string|Node|LitHtml.TemplateResult): LitHtml.TemplateResult|null {
+  #renderRow(title: string, value?: string|Node|Lit.TemplateResult): Lit.TemplateResult|null {
     if (!value) {
       return null;
     }
@@ -149,7 +163,7 @@ export class NetworkRequestDetails extends HTMLElement {
     `;
   }
 
-  #renderURL(): LitHtml.TemplateResult|null {
+  #renderURL(): Lit.TemplateResult|null {
     if (!this.#networkRequest) {
       return null;
     }
@@ -162,28 +176,22 @@ export class NetworkRequestDetails extends HTMLElement {
     const linkifiedURL = LegacyComponents.Linkifier.Linkifier.linkifyURL(
         this.#networkRequest.args.data.url as Platform.DevToolsPath.UrlString, options);
 
-    const networkRequest = TimelineUtils.NetworkRequest.getNetworkRequest(this.#networkRequest);
+    // 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;
         }
-        // Add a wrapper class here.
-        // The main reason is the `Open in Network panel` option is handled by the context menu provider, which will
-        // add this option for all supporting types. And there are a lot of context menu providers that support
-        // `SDK.NetworkRequest.NetworkRequest`, for example `Override content` by PersistenceActions, but we so far just
-        // want the one to reveal in network panel, so add a new class which will only be supported by Network panel.
-        // Also we want to have a different behavior(select the network request) from the
-        // `SDK.NetworkRequest.NetworkRequest` (highlight the network request once).
         const contextMenu = new UI.ContextMenu.ContextMenu(event);
-        contextMenu.appendApplicableItems(new TimelineUtils.NetworkRequest.TimelineNetworkRequest(networkRequest));
+        contextMenu.appendApplicableItems(networkRequest);
         void contextMenu.show();
       });
 
       // clang-format off
       const urlElement = html`
         ${linkifiedURL}
-        <devtools-request-link-icon .data=${{request: networkRequest}}>
+        <devtools-request-link-icon .data=${{request: networkRequest.networkRequest}}>
         </devtools-request-link-icon>
       `;
       // clang-format on
@@ -193,7 +201,7 @@ export class NetworkRequestDetails extends HTMLElement {
     return html`<div class="network-request-details-row">${linkifiedURL}</div>`;
   }
 
-  #renderFromCache(): LitHtml.TemplateResult|null {
+  #renderFromCache(): Lit.TemplateResult|null {
     if (!this.#networkRequest) {
       return null;
     }
@@ -203,7 +211,18 @@ export class NetworkRequestDetails extends HTMLElement {
         i18nString(UIStrings.fromCache), cached ? i18nString(UIStrings.yes) : i18nString(UIStrings.no));
   }
 
-  #renderEncodedDataLength(): LitHtml.TemplateResult|null {
+  #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);
+  }
+
+  #renderEncodedDataLength(): Lit.TemplateResult|null {
     if (!this.#networkRequest) {
       return null;
     }
@@ -224,7 +243,7 @@ export class NetworkRequestDetails extends HTMLElement {
     return this.#renderRow(i18nString(UIStrings.encodedData), lengthText);
   }
 
-  #renderInitiatedBy(): LitHtml.TemplateResult|null {
+  #renderInitiatedBy(): Lit.TemplateResult|null {
     if (!this.#networkRequest) {
       return null;
     }
@@ -259,7 +278,7 @@ export class NetworkRequestDetails extends HTMLElement {
     return null;
   }
 
-  #renderBlockingRow(): LitHtml.TemplateResult|null {
+  #renderBlockingRow(): Lit.TemplateResult|null {
     if (!this.#networkRequest || !Helpers.Network.isSyntheticNetworkRequestEventRenderBlocking(this.#networkRequest)) {
       return null;
     }
@@ -279,7 +298,7 @@ export class NetworkRequestDetails extends HTMLElement {
     return this.#renderRow(i18nString(UIStrings.blocking), renderBlockingText);
   }
 
-  async #renderPreviewElement(): Promise<LitHtml.TemplateResult|null> {
+  async #renderPreviewElement(): Promise<Lit.TemplateResult|null> {
     if (!this.#networkRequest) {
       return null;
     }
@@ -325,6 +344,7 @@ export class NetworkRequestDetails extends HTMLElement {
           ${this.#renderRow(i18nString(UIStrings.decodedBody), i18n.ByteUtilities.bytesToString(this.#networkRequest.args.data.decodedBodyLength))}
           ${this.#renderBlockingRow()}
           ${this.#renderFromCache()}
+          ${this.#renderThirdPartyEntity()}
         </div>
         <div class="network-request-details-col">
           <div class="timing-rows">
@@ -335,7 +355,7 @@ export class NetworkRequestDetails extends HTMLElement {
       ${this.#renderInitiatedBy()}
     `; // The last items are outside the 2 column layout because InitiatedBy can be very wide
     // clang-format on
-    LitHtml.render(output, this.#shadow, {host: this});
+    Lit.render(output, this.#shadow, {host: this});
   }
 }