chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/models/trace/insights/{LargestContentfulPaint.ts → LCPPhases.ts}

@@ -2,12 +2,27 @@
 // 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 * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import {findLCPRequest} from './Common.js';
-import {type InsightResult, type InsightSetContext, InsightWarning, type RequiredData} from './types.js';
+import {type InsightModel, type InsightSetContext, InsightWarning, type RequiredData} from './types.js';
+
+const UIStrings = {
+  /**
+   *@description Title of an insight that provides details about the LCP metric, broken down by phases / parts.
+   */
+  title: 'LCP by phase',
+  /**
+   * @description Description of a DevTools insight that presents a breakdown for the LCP metric by phases.
+   * This is displayed after a user expands the section to see more. No character length limits.
+   */
+  description:
+      'Each [phase has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.',
+};
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/LCPPhases.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export function deps(): ['NetworkRequests', 'PageLoadMetrics', 'LargestImagePaint', 'Meta'] {
   return ['NetworkRequests', 'PageLoadMetrics', 'LargestImagePaint', 'Meta'];
@@ -35,17 +50,13 @@ interface LCPPhases {
   renderDelay: Types.Timing.MilliSeconds;
 }
 
-export type LCPInsightResult = InsightResult<{
+export type LCPPhasesInsightModel = InsightModel<{
   lcpMs?: Types.Timing.MilliSeconds,
   lcpTs?: Types.Timing.MilliSeconds,
   lcpEvent?: Types.Events.LargestContentfulPaintCandidate,
-  phases?: LCPPhases,
-  shouldRemoveLazyLoading?: boolean,
-  shouldIncreasePriorityHint?: boolean,
-  shouldPreloadImage?: boolean,
   /** The network request for the LCP image, if there was one. */
   lcpRequest?: Types.Events.SyntheticNetworkRequest,
-  earliestDiscoveryTimeTs?: Types.Timing.MicroSeconds,
+  phases?: LCPPhases,
 }>;
 
 function anyValuesNaN(...values: number[]): boolean {
@@ -59,7 +70,7 @@ function anyValuesNaN(...values: number[]): boolean {
  */
 function breakdownPhases(
     nav: Types.Events.NavigationStart, docRequest: Types.Events.SyntheticNetworkRequest,
-    lcpMs: Types.Timing.MilliSeconds, lcpRequest: Types.Events.SyntheticNetworkRequest|null): LCPPhases|null {
+    lcpMs: Types.Timing.MilliSeconds, lcpRequest: Types.Events.SyntheticNetworkRequest|undefined): LCPPhases|null {
   const docReqTiming = docRequest.args.data.timing;
   if (!docReqTiming) {
     throw new Error('no timing for document request');
@@ -99,9 +110,14 @@ function breakdownPhases(
   };
 }
 
-export function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): LCPInsightResult {
+function finalize(partialModel: Omit<LCPPhasesInsightModel, 'title'|'description'>): LCPPhasesInsightModel {
+  return {title: i18nString(UIStrings.title), description: i18nString(UIStrings.description), ...partialModel};
+}
+
+export function generateInsight(
+    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): LCPPhasesInsightModel {
   if (!context.navigation) {
-    return {};
+    return finalize({});
   }
 
   const networkRequests = parsedTrace.NetworkRequests;
@@ -118,52 +134,35 @@ export function generateInsight(parsedTrace: RequiredData<typeof deps>, context:
   const metricScore = navMetrics.get(Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP);
   const lcpEvent = metricScore?.event;
   if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {
-    return {warnings: [InsightWarning.NO_LCP]};
+    return finalize({warnings: [InsightWarning.NO_LCP]});
   }
 
   // This helps calculate the phases.
   const lcpMs = Helpers.Timing.microSecondsToMilliseconds(metricScore.timing);
   // This helps position things on the timeline's UI accurately for a trace.
   const lcpTs = metricScore.event?.ts ? Helpers.Timing.microSecondsToMilliseconds(metricScore.event?.ts) : undefined;
-  const lcpRequest = findLCPRequest(parsedTrace, context, lcpEvent);
+  const lcpRequest = parsedTrace.LargestImagePaint.lcpRequestByNavigation.get(context.navigation);
+
   const docRequest = networkRequests.byTime.find(req => req.args.data.requestId === context.navigationId);
   if (!docRequest) {
-    return {lcpMs, lcpTs, lcpEvent, warnings: [InsightWarning.NO_DOCUMENT_REQUEST]};
+    return finalize({lcpMs, lcpTs, lcpEvent, lcpRequest, warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});
   }
 
   if (!lcpRequest) {
-    return {
+    return finalize({
       lcpMs,
       lcpTs,
       lcpEvent,
+      lcpRequest,
       phases: breakdownPhases(context.navigation, docRequest, lcpMs, lcpRequest) ?? undefined,
-    };
+    });
   }
 
-  const initiatorUrl = lcpRequest.args.data.initiator?.url;
-  // TODO(b/372319476): Explore using trace event HTMLDocumentParser::FetchQueuedPreloads to determine if the request
-  // is discovered by the preload scanner.
-  const initiatedByMainDoc =
-      lcpRequest?.args.data.initiator?.type === 'parser' && docRequest.args.data.url === initiatorUrl;
-  const imgPreloadedOrFoundInHTML = lcpRequest?.args.data.isLinkPreload || initiatedByMainDoc;
-
-  const imageLoadingAttr = lcpEvent.args.data?.loadingAttr;
-  const imageFetchPriorityHint = lcpRequest?.args.data.fetchPriorityHint;
-  // This is the earliest discovery time an LCP request could have - it's TTFB.
-  const earliestDiscoveryTime = docRequest && docRequest.args.data.timing ?
-      Helpers.Timing.secondsToMicroseconds(docRequest.args.data.timing.requestTime) +
-          Helpers.Timing.millisecondsToMicroseconds(docRequest.args.data.timing.receiveHeadersStart) :
-      undefined;
-
-  return {
+  return finalize({
     lcpMs,
     lcpTs,
     lcpEvent,
-    phases: breakdownPhases(context.navigation, docRequest, lcpMs, lcpRequest) ?? undefined,
-    shouldRemoveLazyLoading: imageLoadingAttr === 'lazy',
-    shouldIncreasePriorityHint: imageFetchPriorityHint !== 'high',
-    shouldPreloadImage: !imgPreloadedOrFoundInHTML,
     lcpRequest,
-    earliestDiscoveryTimeTs: earliestDiscoveryTime ? Types.Timing.MicroSeconds(earliestDiscoveryTime) : undefined,
-  };
+    phases: breakdownPhases(context.navigation, docRequest, lcpMs, lcpRequest) ?? undefined,
+  });
 }

package/front_end/models/trace/insights/{InsightRunners.ts → Models.ts}

@@ -2,12 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-export * as CumulativeLayoutShift from './CumulativeLayoutShift.js';
+export * as CLSCulprits from './CLSCulprits.js';
 export * as DocumentLatency from './DocumentLatency.js';
 export * as FontDisplay from './FontDisplay.js';
 export * as InteractionToNextPaint from './InteractionToNextPaint.js';
-export * as LargestContentfulPaint from './LargestContentfulPaint.js';
+export * as LCPDiscovery from './LCPDiscovery.js';
+export * as LCPPhases from './LCPPhases.js';
 export * as RenderBlocking from './RenderBlocking.js';
 export * as SlowCSSSelector from './SlowCSSSelector.js';
-export * as ThirdPartyWeb from './ThirdPartyWeb.js';
+export * as ThirdParties from './ThirdParties.js';
 export * as Viewport from './Viewport.js';

package/front_end/models/trace/insights/RenderBlocking.test.ts

@@ -16,7 +16,7 @@ export async function processTrace(testContext: Mocha.Suite|Mocha.Context|null,
   return {data: parsedTrace, insights};
 }
 
-describeWithEnvironment('RenderBlockingRequests', function() {
+describeWithEnvironment('RenderBlocking', function() {
   it('finds render blocking requests', async () => {
     const {data, insights} = await processTrace(this, 'load-simple.json.gz');
     assert.deepStrictEqual(

package/front_end/models/trace/insights/RenderBlocking.ts

@@ -2,15 +2,15 @@
 // 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 * as Protocol from '../../../generated/protocol.js';
 import * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import type * as Lantern from '../lantern/lantern.js';
-import * as Types from '../types/types.js';
+import type * as Types from '../types/types.js';
 
-import {findLCPRequest} from './Common.js';
 import {
-  type InsightResult,
+  type InsightModel,
   type InsightSetContext,
   type InsightSetContextWithNavigation,
   InsightWarning,
@@ -18,7 +18,23 @@ import {
   type RequiredData,
 } from './types.js';
 
-export type RenderBlockingInsightResult = InsightResult<{
+const UIStrings = {
+  /**
+   * @description Title of an insight that provides the user with the list of network requests that blocked and therefore slowed down the page rendering and becoming visible to the user.
+   */
+  title: 'Render blocking requests',
+  /**
+   * @description Text to describe that there are requests blocking rendering, which may affect LCP.
+   */
+  description: 'Requests are blocking the page\'s initial render, which may delay LCP. ' +
+      '[Deferring or inlining](https://web.dev/learn/performance/understanding-the-critical-path#render-blocking_resources/) ' +
+      'can move these network requests out of the critical path.',
+};
+
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/RenderBlocking.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export type RenderBlockingInsightModel = InsightModel<{
   renderBlockingRequests: Types.Events.SyntheticNetworkRequest[],
   requestIdToWastedMs?: Map<string, number>,
 }>;
@@ -85,28 +101,13 @@ function estimateSavingsWithGraphs(
 }
 
 function hasImageLCP(parsedTrace: RequiredData<typeof deps>, context: InsightSetContextWithNavigation): boolean {
-  const frameMetrics = parsedTrace.PageLoadMetrics.metricScoresByFrameId.get(context.frameId);
-  if (!frameMetrics) {
-    throw new Error('no frame metrics');
-  }
-
-  const navMetrics = frameMetrics.get(context.navigationId);
-  if (!navMetrics) {
-    throw new Error('no navigation metrics');
-  }
-  const metricScore = navMetrics.get(Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP);
-  const lcpEvent = metricScore?.event;
-  if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {
-    return false;
-  }
-
-  return findLCPRequest(parsedTrace, context, lcpEvent) !== null;
+  return parsedTrace.LargestImagePaint.lcpRequestByNavigation.get(context.navigation) !== undefined;
 }
 
 function computeSavings(
     parsedTrace: RequiredData<typeof deps>, context: InsightSetContextWithNavigation,
     renderBlockingRequests: Types.Events.SyntheticNetworkRequest[]):
-    Pick<RenderBlockingInsightResult, 'metricSavings'|'requestIdToWastedMs'>|undefined {
+    Pick<RenderBlockingInsightModel, 'metricSavings'|'requestIdToWastedMs'>|undefined {
   if (!context.lantern) {
     return;
   }
@@ -149,12 +150,16 @@ function computeSavings(
   return {metricSavings, requestIdToWastedMs};
 }
 
+function finalize(partialModel: Omit<RenderBlockingInsightModel, 'title'|'description'>): RenderBlockingInsightModel {
+  return {title: i18nString(UIStrings.title), description: i18nString(UIStrings.description), ...partialModel};
+}
+
 export function generateInsight(
-    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): RenderBlockingInsightResult {
+    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): RenderBlockingInsightModel {
   if (!context.navigation) {
-    return {
+    return finalize({
       renderBlockingRequests: [],
-    };
+    });
   }
 
   const firstPaintTs = parsedTrace.PageLoadMetrics.metricScoresByFrameId.get(context.frameId)
@@ -162,10 +167,10 @@ export function generateInsight(
                            ?.get(Handlers.ModelHandlers.PageLoadMetrics.MetricName.FP)
                            ?.event?.ts;
   if (!firstPaintTs) {
-    return {
+    return finalize({
       renderBlockingRequests: [],
       warnings: [InsightWarning.NO_FP],
-    };
+    });
   }
 
   let renderBlockingRequests: Types.Events.SyntheticNetworkRequest[] = [];
@@ -211,9 +216,9 @@ export function generateInsight(
     return b.dur - a.dur;
   });
 
-  return {
+  return finalize({
     relatedEvents: renderBlockingRequests,
     renderBlockingRequests,
     ...savings,
-  };
+  });
 }

package/front_end/models/trace/insights/SlowCSSSelector.ts

@@ -2,17 +2,34 @@
 // 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 * as Helpers from '../helpers/helpers.js';
 import {type SelectorTiming, SelectorTimingsKey} from '../types/TraceEvents.js';
 import * as Types from '../types/types.js';
 
-import type {InsightResult, InsightSetContext, RequiredData} from './types.js';
+import type {InsightModel, InsightSetContext, RequiredData} from './types.js';
+
+const UIStrings = {
+  /**
+   *@description Title of an insight that provides details about slow CSS selectors.
+   */
+  title: 'CSS Selector costs',
+
+  /**
+   * @description Text to describe how to improve the performance of CSS selectors.
+   */
+  description:
+      'If Recalculate Style costs remain high, selector optimization can reduce them. [Optimize the selectors](https://developer.chrome.com/docs/devtools/performance/selector-stats) with both high elapsed time and high slow-path %. Simpler selectors, fewer selectors, a smaller DOM, and a shallower DOM will all reduce matching costs.',
+};
+
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/SlowCSSSelector.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export function deps(): ['SelectorStats'] {
   return ['SelectorStats'];
 }
 
-export type SlowCSSSelectorInsightResult = InsightResult<{
+export type SlowCSSSelectorInsightModel = InsightModel<{
   totalElapsedMs: Types.Timing.MilliSeconds,
   totalMatchAttempts: number,
   totalMatchCount: number,
@@ -51,8 +68,12 @@ function aggregateSelectorStats(
   return [...selectorMap.values()];
 }
 
+function finalize(partialModel: Omit<SlowCSSSelectorInsightModel, 'title'|'description'>): SlowCSSSelectorInsightModel {
+  return {title: i18nString(UIStrings.title), description: i18nString(UIStrings.description), ...partialModel};
+}
+
 export function generateInsight(
-    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): SlowCSSSelectorInsightResult {
+    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): SlowCSSSelectorInsightModel {
   const selectorStatsData = parsedTrace.SelectorStats;
 
   if (!selectorStatsData) {
@@ -81,7 +102,7 @@ export function generateInsight(
     return b[SelectorTimingsKey.MatchAttempts] - a[SelectorTimingsKey.MatchAttempts];
   });
 
-  return {
+  return finalize({
     // TODO: should we identify UpdateLayout events as linked to this insight?
     relatedEvents: [],
     totalElapsedMs: Types.Timing.MilliSeconds(totalElapsedUs / 1000.0),
@@ -89,5 +110,5 @@ export function generateInsight(
     totalMatchCount,
     topElapsedMs: sortByElapsedMs.slice(0, 3),
     topMatchAttempts: sortByMatchAttempts.slice(0, 3),
-  };
+  });
 }

package/front_end/models/trace/insights/{ThirdPartyWeb.test.ts → ThirdParties.test.ts}

@@ -15,12 +15,12 @@ export async function processTrace(testContext: Mocha.Suite|Mocha.Context|null,
   return {data: parsedTrace, insights};
 }
 
-describeWithEnvironment('ThirdPartyWeb', function() {
+describeWithEnvironment('ThirdParties', function() {
   it('categorizes third party web requests (simple)', async () => {
     const {data, insights} = await processTrace(this, 'load-simple.json.gz');
     assert.strictEqual(insights.size, 2);
     const insight =
-        getInsightOrError('ThirdPartyWeb', insights, getFirstOrError(data.Meta.navigationsByNavigationId.values()));
+        getInsightOrError('ThirdParties', insights, getFirstOrError(data.Meta.navigationsByNavigationId.values()));
 
     const entityByRequestResult = [...insight.entityByRequest.entries()].map(([request, entity]) => {
       return [request.args.data.url, entity.name];
@@ -72,7 +72,7 @@ describeWithEnvironment('ThirdPartyWeb', function() {
     const {data, insights} = await processTrace(this, 'lantern/paul/trace.json.gz');
     assert.strictEqual(insights.size, 1);
     const insight =
-        getInsightOrError('ThirdPartyWeb', insights, getFirstOrError(data.Meta.navigationsByNavigationId.values()));
+        getInsightOrError('ThirdParties', insights, getFirstOrError(data.Meta.navigationsByNavigationId.values()));
 
     const entityNames = [...insight.entityByRequest.values()].map(entity => entity.name);
     assert.deepEqual([...new Set(entityNames)], [

package/front_end/models/trace/insights/ThirdParties.ts

@@ -0,0 +1,88 @@
+// 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.
+
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as ThirdPartyWeb from '../../../third_party/third-party-web/third-party-web.js';
+import * as Extras from '../extras/extras.js';
+import type * as Handlers from '../handlers/handlers.js';
+import * as Helpers from '../helpers/helpers.js';
+import type * as Types from '../types/types.js';
+
+import type {InsightModel, InsightSetContext, RequiredData} from './types.js';
+
+const UIStrings = {
+  /** Title of an insight that provides details about the code on a web page that the user doesn't control (referred to as "third-party code"). */
+  title: 'Third parties',
+  /**
+   * @description Description of a DevTools insight that identifies the code on the page that the user doesn't control.
+   * This is displayed after a user expands the section to see more. No character length limits.
+   */
+  description: 'Third party code can significantly impact load performance. ' +
+      '[Reduce and defer loading of third party code](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/) to prioritize your page\'s content.',
+};
+
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/ThirdParties.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export function deps(): ['Meta', 'NetworkRequests', 'Renderer', 'ImagePainting'] {
+  return ['Meta', 'NetworkRequests', 'Renderer', 'ImagePainting'];
+}
+
+export type ThirdPartiesInsightModel = InsightModel<{
+  entityByRequest: Map<Types.Events.SyntheticNetworkRequest, Extras.ThirdParties.Entity>,
+  requestsByEntity: Map<Extras.ThirdParties.Entity, Types.Events.SyntheticNetworkRequest[]>,
+  summaryByRequest: Map<Types.Events.SyntheticNetworkRequest, Extras.ThirdParties.Summary>,
+  summaryByEntity: Map<Extras.ThirdParties.Entity, Extras.ThirdParties.Summary>,
+  /** The entity for this navigation's URL. Any other entity is from a third party. */
+  firstPartyEntity?: Extras.ThirdParties.Entity,
+}>;
+
+function getRelatedEvents(
+    summaries: Extras.ThirdParties.SummaryMaps,
+    firstPartyEntity: Extras.ThirdParties.Entity|undefined): Types.Events.Event[] {
+  const events = [];
+
+  for (const [entity, requests] of summaries.requestsByEntity.entries()) {
+    if (entity !== firstPartyEntity) {
+      events.push(...requests);
+    }
+  }
+
+  return events;
+}
+
+function finalize(partialModel: Omit<ThirdPartiesInsightModel, 'title'|'description'>): ThirdPartiesInsightModel {
+  return {title: i18nString(UIStrings.title), description: i18nString(UIStrings.description), ...partialModel};
+}
+
+export function generateInsight(
+    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): ThirdPartiesInsightModel {
+  const networkRequests = parsedTrace.NetworkRequests.byTime.filter(event => {
+    if (!context.navigation) {
+      return false;
+    }
+
+    if (event.args.data.frame !== context.frameId) {
+      return false;
+    }
+
+    return Helpers.Timing.eventIsInBounds(event, context.bounds);
+  });
+
+  const {entityByRequest, madeUpEntityCache, summaries} = Extras.ThirdParties.getSummariesAndEntitiesForTraceBounds(
+      parsedTrace as Handlers.Types.ParsedTrace, context.bounds, networkRequests);
+
+  const firstPartyUrl = context.navigation?.args.data?.documentLoaderURL ?? parsedTrace.Meta.mainFrameURL;
+  const firstPartyEntity = ThirdPartyWeb.ThirdPartyWeb.getEntity(firstPartyUrl) ||
+      Extras.ThirdParties.makeUpEntity(madeUpEntityCache, firstPartyUrl);
+
+  return finalize({
+    relatedEvents: getRelatedEvents(summaries, firstPartyEntity),
+    entityByRequest,
+    requestsByEntity: summaries.requestsByEntity,
+    summaryByRequest: summaries.byRequest,
+    summaryByEntity: summaries.byEntity,
+    firstPartyEntity,
+  });
+}

package/front_end/models/trace/insights/Viewport.test.ts

@@ -36,7 +36,7 @@ describeWithEnvironment('Viewport', function() {
       event.args.is_mobile_optimized = false;
     }
 
-    const insight = Trace.Insights.InsightRunners.Viewport.generateInsight(data, context);
+    const insight = Trace.Insights.Models.Viewport.generateInsight(data, context);
     assert.strictEqual(insight.mobileOptimized, false);
   });
 });

package/front_end/models/trace/insights/Viewport.ts

@@ -2,22 +2,40 @@
 // 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 * as Helpers from '../helpers/helpers.js';
 import type * as Types from '../types/types.js';
 
-import {type InsightResult, type InsightSetContext, InsightWarning, type RequiredData} from './types.js';
+import {type InsightModel, type InsightSetContext, InsightWarning, type RequiredData} from './types.js';
+
+const UIStrings = {
+  /** Title of an insight that provides details about if the page's viewport is optimized for mobile viewing. */
+  title: 'Viewport not optimized for mobile',
+  /**
+   * @description Text to tell the user how a viewport meta element can improve performance. \xa0 is a non-breaking space
+   */
+  description:
+      'The page\'s viewport is not mobile-optimized, so tap interactions may be [delayed by up to 300\xA0ms](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/).',
+};
+
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/Viewport.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export function deps(): ['Meta', 'UserInteractions'] {
   return ['Meta', 'UserInteractions'];
 }
 
-export type ViewportInsightResult = InsightResult<{
+export type ViewportInsightModel = InsightModel<{
   mobileOptimized: boolean | null,
   viewportEvent?: Types.Events.ParseMetaViewport,
 }>;
 
+function finalize(partialModel: Omit<ViewportInsightModel, 'title'|'description'>): ViewportInsightModel {
+  return {title: i18nString(UIStrings.title), description: i18nString(UIStrings.description), ...partialModel};
+}
+
 export function generateInsight(
-    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): ViewportInsightResult {
+    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): ViewportInsightModel {
   const compositorEvents = parsedTrace.UserInteractions.beginCommitCompositorFrameEvents.filter(event => {
     if (event.args.frame !== context.frameId) {
       return false;
@@ -28,10 +46,10 @@ export function generateInsight(
 
   if (!compositorEvents.length) {
     // Trace doesn't have the data we need.
-    return {
+    return finalize({
       mobileOptimized: null,
       warnings: [InsightWarning.NO_LAYOUT],
-    };
+    });
   }
 
   const viewportEvent = parsedTrace.UserInteractions.parseMetaViewportEvents.find(event => {
@@ -45,16 +63,16 @@ export function generateInsight(
   // Returns true only if all events are mobile optimized.
   for (const event of compositorEvents) {
     if (!event.args.is_mobile_optimized) {
-      return {
+      return finalize({
         mobileOptimized: false,
         viewportEvent,
         metricSavings: {INP: 300 as Types.Timing.MilliSeconds},
-      };
+      });
     }
   }
 
-  return {
+  return finalize({
     mobileOptimized: true,
     viewportEvent,
-  };
+  });
 }

package/front_end/models/trace/insights/insights.ts

@@ -3,5 +3,5 @@
 // found in the LICENSE file.
 
 export * as Common from './Common.js';
-export * as InsightRunners from './InsightRunners.js';
+export * as Models from './Models.js';
 export * as Types from './types.js';

package/front_end/models/trace/insights/types.ts

@@ -6,7 +6,7 @@ import type * as Handlers from '../handlers/handlers.js';
 import type * as Lantern from '../lantern/lantern.js';
 import type * as Types from '../types/types.js';
 
-import type * as InsightsRunners from './InsightRunners.js';
+import type * as Models from './Models.js';
 
 /**
  * Context for the portion of the trace an insight should look at.
@@ -33,7 +33,7 @@ export interface LanternContext {
   metrics: Record<string, Lantern.Metrics.MetricResult>;
 }
 
-export type InsightRunnersType = typeof InsightsRunners;
+export type InsightModelsType = typeof Models;
 
 export enum InsightWarning {
   NO_FP = 'NO_FP',
@@ -53,7 +53,9 @@ export interface MetricSavings {
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 
-export type InsightResult<R extends Record<string, unknown>> = R&{
+export type InsightModel<R extends Record<string, unknown>> = R&{
+  title: string,
+  description: string,
   relatedEvents?: Types.Events.Event[],
   warnings?: InsightWarning[],
   metricSavings?: MetricSavings,
@@ -64,22 +66,22 @@ export type InsightResult<R extends Record<string, unknown>> = R&{
  * this could instead represent the duration from the beginning of the trace up to the first recorded
  * navigation (or the end of the trace).
  */
-export type InsightSets = {
+export type InsightSet = {
   /** If for a navigation, this is the navigationId. Else it is Trace.Types.Events.NO_NAVIGATION. */
   id: Types.Events.NavigationId,
   /** The URL to show in the accordion list. */
   url: URL,
   frameId: string,
   bounds: Types.Timing.TraceWindowMicroSeconds,
-  data: InsightResults,
+  model: InsightModels,
   navigation?: Types.Events.NavigationStart,
 };
 
 /**
- * Contains insights for a specific navigation.
+ * Contains insights for a specific insight set.
  */
-export type InsightResults = {
-  [I in keyof InsightRunnersType]: ReturnType<InsightRunnersType[I]['generateInsight']>;
+export type InsightModels = {
+  [I in keyof InsightModelsType]: ReturnType<InsightModelsType[I]['generateInsight']>;
 };
 
 /**
@@ -88,7 +90,7 @@ export type InsightResults = {
  * If the analyzed trace started after the navigation, and has meaningful work with that span, there is no
  * navigation to map it to. In this case `Types.Events.NO_NAVIGATION` is used for the key.
  */
-export type TraceInsightSets = Map<Types.Events.NavigationId, InsightSets>;
+export type TraceInsightSets = Map<Types.Events.NavigationId, InsightSet>;
 
 /**
  * Represents the narrow set of dependencies defined by an insight's `deps()` function. `Meta` is always included regardless of `deps()`.

package/front_end/models/trace/lantern/core/NetworkAnalyzer.test.ts

@@ -42,7 +42,7 @@ describe('NetworkAnalyzer', () => {
           connectionReused: false,
           networkRequestTime: 10,
           networkEndTime: 10,
-          transferSize: 0,
+          transferSize: 10000,
           protocol: opts.protocol || 'http/1.1',
           parsedURL: {scheme: url.match(/https?/)[0], securityOrigin: url.match(/.*\.com/)[0]},
           timing: opts.timing || null,
@@ -339,9 +339,9 @@ describe('NetworkAnalyzer', () => {
       );
     }
 
-    it('should return Infinity for no/missing records', () => {
-      assert.strictEqual(estimateThroughput([]), Infinity);
-      assert.strictEqual(estimateThroughput([createThroughputRecord(0, 0, {finished: false})]), Infinity);
+    it('should return null for no/missing records', () => {
+      assert.strictEqual(estimateThroughput([]), null);
+      assert.strictEqual(estimateThroughput([createThroughputRecord(0, 0, {finished: false})]), null);
     });
 
     it('should compute correctly for a basic waterfall', () => {