Export all UIStrings in insight models, for external usage

We should have no i18n strings defined in insight component modules,
since Lighthouse (and any other future external usages) should be able
to utilize the exact same translated strings. This was already the case
for title/description, but now every translated string has been moved.

Bug: 388723721
Change-Id: Ic3e72acb4b697a225b102f64383660b5a0f275af
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6227699
Auto-Submit: Connor Clark <[email protected]>
Reviewed-by: Jack Franklin <[email protected]>
Commit-Queue: Jack Franklin <[email protected]>
Reviewed-by: Adam Raine <[email protected]>

Author: Connor Clark

front_end/models/trace/Processor.test.ts

@@ -261,6 +261,10 @@ describeWithEnvironment('TraceProcessor', function() {
       sinon.stub(Trace.Processor.TraceProcessor, 'getEnabledInsightRunners').callsFake(() => {
         return {
           RenderBlocking: {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            UIStrings: {} as any,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            i18nString: (() => {}) as any,
             generateInsight: () => {
               throw new Error('forced error');
             },

front_end/models/trace/insights/CLSCulprits.ts

@@ -8,9 +8,15 @@ import type * as Protocol from '../../../generated/protocol.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import {InsightCategory, type InsightModel, type InsightSetContext, type RequiredData} from './types.js';
-
-const UIStrings = {
+import {
+  InsightCategory,
+  type InsightModel,
+  type InsightSetContext,
+  type PartialInsightModel,
+  type RequiredData
+} from './types.js';
+
+export const UIStrings = {
   /** Title of an insight that provides details about why elements shift/move on the page. The causes for these shifts are referred to as culprits ("reasons"). */
   title: 'Layout shift culprits',
   /**
@@ -19,11 +25,53 @@ const UIStrings = {
    */
   description:
       'Layout shifts occur when elements move absent any user interaction. [Investigate the causes of layout shifts](https://web.dev/articles/optimize-cls), such as elements being added, removed, or their fonts changing as the page loads.',
+  /**
+   *@description Text indicating the worst layout shift cluster.
+   */
+  worstLayoutShiftCluster: 'Worst layout shift cluster',
+  /**
+   * @description Text indicating the worst layout shift cluster.
+   */
+  worstCluster: 'Worst cluster',
+  /**
+   * @description Text indicating a layout shift cluster and its start time.
+   * @example {32 ms} PH1
+   */
+  layoutShiftCluster: 'Layout shift cluster @ {PH1}',
+  /**
+   *@description Text indicating the biggest reasons for the layout shifts.
+   */
+  topCulprits: 'Top layout shift culprits',
+  /**
+   * @description Text for a culprit type of Injected iframe.
+   */
+  injectedIframe: 'Injected iframe',
+  /**
+   * @description Text for a culprit type of Font request.
+   */
+  fontRequest: 'Font request',
+  /**
+   * @description Text for a culprit type of Animation.
+   */
+  animation: 'Animation',
+  /**
+   * @description Text for a culprit type of Unsized images.
+   */
+  unsizedImages: 'Unsized Images',
+  /**
+   * @description Text status when there were no layout shifts detected.
+   */
+  noLayoutShifts: 'No layout shifts',
+  /**
+   * @description Text status when there no layout shifts culprits/root causes were found.
+   */
+  noCulprits: 'Could not detect any layout shift culprits',
 };
+
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/CLSCulprits.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export type CLSCulpritsInsightModel = InsightModel<{
+export type CLSCulpritsInsightModel = InsightModel<typeof UIStrings, {
   animationFailures: readonly NoncompositedAnimationFailure[],
   shifts: Map<Types.Events.SyntheticLayoutShift, LayoutShiftRootCausesData>,
   clusters: Types.Events.SyntheticLayoutShiftCluster[],
@@ -425,8 +473,7 @@ function getFontRootCauses(
   return rootCausesByShift;
 }
 
-function finalize(partialModel: Omit<CLSCulpritsInsightModel, 'title'|'description'|'category'|'shouldShow'>):
-    CLSCulpritsInsightModel {
+function finalize(partialModel: PartialInsightModel<CLSCulpritsInsightModel>): CLSCulpritsInsightModel {
   let maxScore = 0;
   for (const cluster of partialModel.clusters) {
     if (cluster.clusterCumulativeScore > maxScore) {
@@ -435,6 +482,7 @@ function finalize(partialModel: Omit<CLSCulpritsInsightModel, 'title'|'descripti
   }
 
   return {
+    strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
     category: InsightCategory.CLS,

front_end/models/trace/insights/DOMSize.ts

@@ -7,9 +7,15 @@ import * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import {InsightCategory, type InsightModel, type InsightSetContext, type RequiredData} from './types.js';
-
-const UIStrings = {
+import {
+  InsightCategory,
+  type InsightModel,
+  type InsightSetContext,
+  type PartialInsightModel,
+  type RequiredData
+} from './types.js';
+
+export const UIStrings = {
   /**
    * @description Title of an insight that recommends reducing the size of the DOM tree as a means to improve page responsiveness. "DOM" is an acronym and should not be translated.
    */
@@ -19,10 +25,34 @@ const UIStrings = {
    */
   description:
       'A large DOM can increase the duration of style calculations and layout reflows, impacting page responsiveness. A large DOM will also increase memory usage. [Learn how to avoid an excessive DOM size](https://developer.chrome.com/docs/lighthouse/performance/dom-size/).',
+  /**
+   * @description Header for a column containing the names of statistics as opposed to the actual statistic values.
+   */
+  statistic: 'Statistic',
+  /**
+   * @description Header for a column containing the value of a statistic.
+   */
+  value: 'Value',
+  /**
+   * @description Header for a column containing the page element related to a statistic.
+   */
+  element: 'Element',
+  /**
+   * @description Label for a value representing the total number of elements on the page.
+   */
+  totalElements: 'Total elements',
+  /**
+   * @description Label for a value representing the maximum depth of the Document Object Model (DOM). "DOM" is a acronym and should not be translated.
+   */
+  maxDOMDepth: 'DOM depth',
+  /**
+   * @description Label for a value representing the maximum number of child elements of any parent element on the page.
+   */
+  maxChildren: 'Most children',
 };
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/DOMSize.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const DOM_SIZE_DURATION_THRESHOLD = Helpers.Timing.milliToMicro(Types.Timing.Milli(40));
 
@@ -32,7 +62,7 @@ const DOM_SIZE_DURATION_THRESHOLD = Helpers.Timing.milliToMicro(Types.Timing.Mil
 const LAYOUT_OBJECTS_THRESHOLD = 100;
 const STYLE_RECALC_ELEMENTS_THRESHOLD = 300;
 
-export type DOMSizeInsightModel = InsightModel<{
+export type DOMSizeInsightModel = InsightModel<typeof UIStrings, {
   largeLayoutUpdates: Types.Events.Layout[],
   largeStyleRecalcs: Types.Events.UpdateLayoutTree[],
   maxDOMStats?: Types.Events.DOMStats,
@@ -42,10 +72,10 @@ export function deps(): ['Renderer', 'AuctionWorklets', 'DOMStats'] {
   return ['Renderer', 'AuctionWorklets', 'DOMStats'];
 }
 
-function finalize(partialModel: Omit<DOMSizeInsightModel, 'title'|'description'|'category'|'shouldShow'>):
-    DOMSizeInsightModel {
+function finalize(partialModel: PartialInsightModel<DOMSizeInsightModel>): DOMSizeInsightModel {
   const relatedEvents = [...partialModel.largeLayoutUpdates, ...partialModel.largeStyleRecalcs];
   return {
+    strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
     category: InsightCategory.INP,

front_end/models/trace/insights/DocumentLatency.ts

@@ -11,10 +11,11 @@ import {
   type InsightModel,
   type InsightSetContext,
   InsightWarning,
+  type PartialInsightModel,
   type RequiredData
 } from './types.js';
 
-const UIStrings = {
+export const UIStrings = {
   /**
    *@description Title of an insight that provides a breakdown for how long it took to download the main document.
    */
@@ -24,10 +25,56 @@ const UIStrings = {
    */
   description:
       'Your first network request is the most important.  Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.',
+  /**
+   * @description Text to tell the user that the document request does not have redirects.
+   */
+  passingRedirects: 'Avoids redirects',
+  /**
+   * @description Text to tell the user that the document request had redirects.
+   */
+  failedRedirects: 'Had redirects',
+  /**
+   * @description Text to tell the user that the time starting the document request to when the server started responding is acceptable.
+   */
+  passingServerResponseTime: 'Server responds quickly',
+  /**
+   * @description Text to tell the user that the time starting the document request to when the server started responding is not acceptable.
+   */
+  failedServerResponseTime: 'Server responded slowly',
+  /**
+   * @description Text to tell the user that text compression (like gzip) was applied.
+   */
+  passingTextCompression: 'Applies text compression',
+  /**
+   * @description Text to tell the user that text compression (like gzip) was not applied.
+   */
+  failedTextCompression: 'No compression applied',
+  /**
+   * @description Text for a label describing a network request event as having redirects.
+   */
+  redirectsLabel: 'Redirects',
+  /**
+   * @description Text for a label describing a network request event as taking too long to start delivery by the server.
+   */
+  serverResponseTimeLabel: 'Server response time',
+  /**
+   * @description Text for a label describing a network request event as taking longer to download because it wasn't compressed.
+   */
+  uncompressedDownload: 'Uncompressed download',
+  /**
+   *@description Text for a screen-reader label to tell the user that the icon represents a successful insight check
+   *@example {Server response time} PH1
+   */
+  successAriaLabel: 'Insight check passed: {PH1}',
+  /**
+   *@description Text for a screen-reader label to tell the user that the icon represents an unsuccessful insight check
+   *@example {Server response time} PH1
+   */
+  failedAriaLabel: 'Insight check failed: {PH1}',
 };
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/DocumentLatency.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 // Due to the way that DevTools throttling works we cannot see if server response took less than ~570ms.
 // We set our failure threshold to 600ms to avoid those false positives but we want devs to shoot for 100ms.
@@ -37,7 +84,7 @@ const TARGET_MS = 100;
 // Threshold for compression savings.
 const IGNORE_THRESHOLD_IN_BYTES = 1400;
 
-export type DocumentLatencyInsightModel = InsightModel<{
+export type DocumentLatencyInsightModel = InsightModel<typeof UIStrings, {
   data?: {
     serverResponseTime: Types.Timing.Milli,
     serverResponseTooSlow: boolean,
@@ -125,15 +172,15 @@ function getCompressionSavings(request: Types.Events.SyntheticNetworkRequest): n
   return estimatedSavings < IGNORE_THRESHOLD_IN_BYTES ? 0 : estimatedSavings;
 }
 
-function finalize(partialModel: Omit<DocumentLatencyInsightModel, 'title'|'description'|'category'|'shouldShow'>):
-    DocumentLatencyInsightModel {
+function finalize(partialModel: PartialInsightModel<DocumentLatencyInsightModel>): DocumentLatencyInsightModel {
   let hasFailure = false;
   if (partialModel.data) {
     hasFailure = partialModel.data.redirectDuration > 0 || partialModel.data.serverResponseTooSlow ||
         partialModel.data.uncompressedResponseBytes > 0;
   }
 
   return {
+    strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
     category: InsightCategory.ALL,

front_end/models/trace/insights/FontDisplay.ts

@@ -7,36 +7,46 @@ import * as Platform from '../../../core/platform/platform.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import {InsightCategory, type InsightModel, type InsightSetContext, type RequiredData} from './types.js';
+import {
+  InsightCategory,
+  type InsightModel,
+  type InsightSetContext,
+  type PartialInsightModel,
+  type RequiredData
+} from './types.js';
 
-const UIStrings = {
+export const UIStrings = {
   /** Title of an insight that provides details about the fonts used on the page, and the value of their `font-display` properties. */
   title: 'Font display',
   /**
    * @description Text to tell the user about the font-display CSS feature to help improve a the UX of a page.
    */
   description:
       'Consider setting [`font-display`](https://developer.chrome.com/blog/font-display) to `swap` or `optional` to ensure text is consistently visible. `swap` can be further optimized to mitigate layout shifts with [font metric overrides](https://developer.chrome.com/blog/font-fallbacks).',
+  /** Column for a font loaded by the page to render text. */
+  fontColumn: 'Font',
+  /** Column for the amount of time wasted. */
+  wastedTimeColumn: 'Wasted time',
 };
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/FontDisplay.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export function deps(): ['Meta', 'NetworkRequests', 'LayoutShifts'] {
   return ['Meta', 'NetworkRequests', 'LayoutShifts'];
 }
 
-export type FontDisplayInsightModel = InsightModel<{
+export type FontDisplayInsightModel = InsightModel<typeof UIStrings, {
   fonts: Array<{
     request: Types.Events.SyntheticNetworkRequest,
     display: string,
     wastedTime: Types.Timing.Milli,
   }>,
 }>;
 
-function finalize(partialModel: Omit<FontDisplayInsightModel, 'title'|'description'|'category'|'shouldShow'>):
-    FontDisplayInsightModel {
+function finalize(partialModel: PartialInsightModel<FontDisplayInsightModel>): FontDisplayInsightModel {
   return {
+    strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
     category: InsightCategory.INP,

front_end/models/trace/insights/ForcedReflow.ts

@@ -13,14 +13,15 @@ import {
   type ForcedReflowAggregatedData,
   InsightCategory,
   type InsightModel,
+  type PartialInsightModel,
   type RequiredData,
 } from './types.js';
 
 export function deps(): ['Warnings', 'Renderer'] {
   return ['Warnings', 'Renderer'];
 }
 
-const UIStrings = {
+export const UIStrings = {
   /**
    *@description Title of an insight that provides details about Forced reflow.
    */
@@ -30,12 +31,24 @@ const UIStrings = {
    */
   description:
       'Many APIs, typically reading layout geometry, force the rendering engine to pause script execution in order to calculate the style and layout. Learn more about [forced reflow](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts) and its mitigations.',
+  /**
+   *@description Title of a list to provide related stack trace data
+   */
+  relatedStackTrace: 'Stack trace',
+  /**
+   *@description Text to describe the top time-consuming function call
+   */
+  topTimeConsumingFunctionCall: 'Top function call',
+  /**
+   * @description Text to describe the total reflow time
+   */
+  totalReflowTime: 'Total reflow time',
 };
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/ForcedReflow.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export type ForcedReflowInsightModel = InsightModel<{
+export type ForcedReflowInsightModel = InsightModel<typeof UIStrings, {
   topLevelFunctionCallData: ForcedReflowAggregatedData | undefined,
   aggregatedBottomUpData: BottomUpCallStack[],
 }>;
@@ -175,9 +188,9 @@ function aggregateForcedReflow(
   return [topLevelFunctionCallData, aggregatedBottomUpData];
 }
 
-function finalize(partialModel: Omit<ForcedReflowInsightModel, 'title'|'description'|'category'|'shouldShow'>):
-    ForcedReflowInsightModel {
+function finalize(partialModel: PartialInsightModel<ForcedReflowInsightModel>): ForcedReflowInsightModel {
   return {
+    strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
     category: InsightCategory.ALL,