chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

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

@@ -2,12 +2,33 @@
 // 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 {
+  InsightCategory,
+  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 +56,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 +76,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 +116,30 @@ function breakdownPhases(
   };
 }
 
-export function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): LCPInsightResult {
+function finalize(partialModel: Omit<LCPPhasesInsightModel, 'title'|'description'|'category'|'shouldShow'>):
+    LCPPhasesInsightModel {
+  const relatedEvents = [];
+  if (partialModel.lcpEvent) {
+    relatedEvents.push(partialModel.lcpEvent);
+  }
+  if (partialModel.lcpRequest) {
+    relatedEvents.push(partialModel.lcpRequest);
+  }
+  return {
+    title: i18nString(UIStrings.title),
+    description: i18nString(UIStrings.description),
+    category: InsightCategory.LCP,
+    // TODO: should move the component's "getPhaseData" to model.
+    shouldShow: Boolean(partialModel.phases) && (partialModel.lcpMs ?? 0) > 0,
+    ...partialModel,
+    relatedEvents,
+  };
+}
+
+export function generateInsight(
+    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): LCPPhasesInsightModel {
   if (!context.navigation) {
-    return {};
+    return finalize({});
   }
 
   const networkRequests = parsedTrace.NetworkRequests;
@@ -118,52 +156,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,14 @@
 // 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 ImageDelivery from './ImageDelivery.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,16 @@
 // 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,
+  InsightCategory,
+  type InsightModel,
   type InsightSetContext,
   type InsightSetContextWithNavigation,
   InsightWarning,
@@ -18,7 +19,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 +102,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 +151,23 @@ function computeSavings(
   return {metricSavings, requestIdToWastedMs};
 }
 
+function finalize(partialModel: Omit<RenderBlockingInsightModel, 'title'|'description'|'category'|'shouldShow'>):
+    RenderBlockingInsightModel {
+  return {
+    title: i18nString(UIStrings.title),
+    description: i18nString(UIStrings.description),
+    category: InsightCategory.LCP,
+    shouldShow: partialModel.renderBlockingRequests.length > 0,
+    ...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 +175,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 +224,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 {InsightCategory, type InsightModel, type InsightSetContext, type 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,19 @@ function aggregateSelectorStats(
   return [...selectorMap.values()];
 }
 
+function finalize(partialModel: Omit<SlowCSSSelectorInsightModel, 'title'|'description'|'category'|'shouldShow'>):
+    SlowCSSSelectorInsightModel {
+  return {
+    title: i18nString(UIStrings.title),
+    description: i18nString(UIStrings.description),
+    category: InsightCategory.ALL,
+    shouldShow: partialModel.topElapsedMs.length !== 0 && partialModel.topMatchAttempts.length !== 0,
+    ...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 +109,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 +117,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/{ThirdPartyWeb.ts → ThirdParties.ts}

@@ -2,19 +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 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 {InsightResult, InsightSetContext, RequiredData} from './types.js';
+import {InsightCategory, type InsightModel, type InsightSetContext, type 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 ThirdPartyWebInsightResult = InsightResult<{
+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>,
@@ -37,8 +52,20 @@ function getRelatedEvents(
   return events;
 }
 
+function finalize(partialModel: Omit<ThirdPartiesInsightModel, 'title'|'description'|'category'|'shouldShow'>):
+    ThirdPartiesInsightModel {
+  return {
+    title: i18nString(UIStrings.title),
+    description: i18nString(UIStrings.description),
+    category: InsightCategory.ALL,
+    shouldShow:
+        Boolean([...partialModel.summaryByEntity.entries()].find(kv => kv[0] !== partialModel.firstPartyEntity)),
+    ...partialModel,
+  };
+}
+
 export function generateInsight(
-    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): ThirdPartyWebInsightResult {
+    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): ThirdPartiesInsightModel {
   const networkRequests = parsedTrace.NetworkRequests.byTime.filter(event => {
     if (!context.navigation) {
       return false;
@@ -58,12 +85,12 @@ export function generateInsight(
   const firstPartyEntity = ThirdPartyWeb.ThirdPartyWeb.getEntity(firstPartyUrl) ||
       Extras.ThirdParties.makeUpEntity(madeUpEntityCache, firstPartyUrl);
 
-  return {
+  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,53 @@
 // 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 {
+  InsightCategory,
+  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'|'category'|'shouldShow'>):
+    ViewportInsightModel {
+  return {
+    title: i18nString(UIStrings.title),
+    description: i18nString(UIStrings.description),
+    category: InsightCategory.INP,
+    shouldShow: partialModel.mobileOptimized === false,
+    ...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 +59,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 +76,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';