chrome-devtools-frontend 1.0.1681498 → 1.0.1682249

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

@@ -33,7 +33,7 @@ export const UIStrings = {
   /**
    * @description Text to tell the user that the charset is NOT declared in the Content-Type HTTP response header.
    */
-  failedHttpHeader: 'Does not declare charset in HTTP header',
+  failedHttpHeader: 'Doesn’t declare charset in HTTP header',
   /**
    * @description Text to tell the user that a meta charset tag was found in the first 1024 bytes of the HTML.
    */
@@ -45,11 +45,11 @@ export const UIStrings = {
   /**
    * @description Text to tell the user that no meta charset tag was found in the HTML.
    */
-  failedMetaCharsetMissing: 'Does not declare charset using a meta tag',
+  failedMetaCharsetMissing: 'Doesn’t declare charset using a meta tag',
   /**
    * @description Text to tell the user that trace data did not include the Blink signal for meta charset.
    */
-  failedMetaCharsetUnknown: 'Could not determine meta charset declaration from trace',
+  failedMetaCharsetUnknown: 'Couldn’t determine meta charset declaration from trace',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/CharacterSet.ts', UIStrings);

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

@@ -43,7 +43,7 @@ export const UIStrings = {
    */
   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.
+   * @description Label for a value representing the maximum depth of the Document Object Model (DOM). "DOM" is an acronym and should not be translated.
    */
   maxDOMDepth: 'DOM depth',
   /**

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

@@ -27,9 +27,13 @@ export const UIStrings = {
    */
   description:
       'Remove large, [duplicate JavaScript modules](https://developer.chrome.com/docs/performance/insights/duplicated-javascript) from bundles to reduce unnecessary bytes consumed by network activity.',
-  /** Label for a column in a data table; entries will be the locations of JavaScript or CSS code, e.g. the name of a Javascript package or module. */
+  /**
+   * @description Label for a column in a data table; entries will be the locations of JavaScript or CSS code, e.g. the name of a JavaScript package or module.
+   */
   columnSource: 'Source',
-  /** Label for a column in a data table; entries will be the number of wasted bytes due to duplication of a web resource. */
+  /**
+   * @description Label for a column in a data table; entries will be the number of wasted bytes due to duplication of a web resource.
+   */
   columnDuplicatedBytes: 'Duplicated bytes',
   /**
    * @description Message shown when no duplicated JavaScript is found.

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

@@ -17,16 +17,22 @@ import {
 } from './types.js';
 
 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. */
+  /**
+   * @description 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/docs/performance/insights/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. */
+  /**
+   * @description Column for a font loaded by the page to render text.
+   */
   fontColumn: 'Font',
-  /** Column for the amount of time wasted. */
+  /**
+   * @description Column for the amount of time wasted.
+   */
   wastedTimeColumn: 'Wasted time',
   /**
    * @description Message shown when no fonts with suboptimal font-display are found.

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

@@ -29,15 +29,15 @@ export const UIStrings = {
   description:
       'A forced reflow occurs when JavaScript queries geometric properties (such as `offsetWidth`) after styles have been invalidated by a change to the DOM state. This can result in poor performance. Learn more about [forced reflows](https://developer.chrome.com/docs/performance/insights/forced-reflow) and possible mitigations.',
   /**
-   * @description Title of a list to provide related stack trace data
+   * @description Title of a list to provide related stack trace data.
    */
   reflowCallFrames: 'Call frames that trigger reflow',
   /**
-   * @description Text to describe the top time-consuming function call
+   * @description Text to describe the top time-consuming function call.
    */
   topTimeConsumingFunctionCall: 'Top function call',
   /**
-   * @description Text to describe the total reflow time
+   * @description Text to describe the total reflow time.
    */
   totalReflowTime: 'Total reflow time',
   /**
@@ -45,7 +45,7 @@ export const UIStrings = {
    */
   unattributed: '[unattributed]',
   /**
-   * @description Text for the name of anonymous functions
+   * @description Text for the name of anonymous functions.
    */
   anonymous: '(anonymous)',
 } as const;

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

@@ -5,7 +5,6 @@
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
-import type {SyntheticInteractionPair} from '../types/TraceEvents.js';
 import type * as Types from '../types/types.js';
 
 import {
@@ -58,8 +57,8 @@ const str_ = i18n.i18n.registerUIStrings('models/trace/insights/INPBreakdown.ts'
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export type INPBreakdownInsightModel = InsightModel<typeof UIStrings, {
-  longestInteractionEvent?: SyntheticInteractionPair,
-  highPercentileInteractionEvent?: SyntheticInteractionPair,
+  longestInteractionEvent?: Types.Events.SyntheticInteractionPair,
+  highPercentileInteractionEvent?: Types.Events.SyntheticInteractionPair,
 }>;
 
 export function isINPBreakdownInsight(insight: InsightModel): insight is INPBreakdownInsightModel {
@@ -101,7 +100,7 @@ export function generateInsight(
     return finalize({});
   }
 
-  const longestByInteractionId = new Map<number, SyntheticInteractionPair>();
+  const longestByInteractionId = new Map<number, Types.Events.SyntheticInteractionPair>();
   for (const event of interactionEvents) {
     const key = event.interactionId;
     const longest = longestByInteractionId.get(key);

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

@@ -25,7 +25,7 @@ export const UIStrings = {
    * @description Description of an insight that recommends ways to reduce the size of images downloaded and used on the page.
    */
   description:
-      'Reducing the download time of images can improve the perceived load time of the page and LCP. [Learn more about optimizing image size](https://developer.chrome.com/docs/performance/insights/image-delivery)',
+      'Reducing the download time of images can improve the perceived load time of the page and LCP. [Learn more about optimizing image size](https://developer.chrome.com/docs/performance/insights/image-delivery).',
   /**
    * @description Message displayed in a chip explaining that an image file size is large for the # of pixels it has and recommends possible adjustments to improve the image size.
    */
@@ -56,7 +56,7 @@ export const UIStrings = {
    */
   others: '{PH1} others',
   /**
-   * @description Text status indicating that no potential optimizations were found for any image file
+   * @description Text status indicating that no potential optimizations were found for any image file.
    */
   noOptimizableImages: 'No optimizable images',
   /**

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

@@ -58,7 +58,7 @@ export const UIStrings = {
    */
   fieldDuration: 'Field p75',
   /**
-   * @description Text status indicating that the the Largest Contentful Paint (LCP) metric timing was not found. "LCP" is an acronym and should not be translated.
+   * @description Text status indicating that the Largest Contentful Paint (LCP) metric timing was not found. "LCP" is an acronym and should not be translated.
    */
   noLcp: 'No LCP detected',
 } as const;

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

@@ -20,14 +20,14 @@ import {
 
 export const UIStrings = {
   /**
-   * @description Title of an insight that provides details about the LCP metric, and the network requests necessary to load it. Details how the LCP request was discoverable - in other words, the path necessary to load it (ex: network requests, JavaScript)
+   * @description Title of an insight that provides details about the LCP metric, and the network requests necessary to load it. Details how the LCP request was discoverable - in other words, the path necessary to load it (ex: network requests, JavaScript).
    */
   title: 'LCP request discovery',
   /**
    * @description Description of an insight that provides details about the LCP metric, and the network requests necessary to load it.
    */
   description:
-      '[Optimize LCP](https://developer.chrome.com/docs/performance/insights/lcp-discovery) by making the LCP image discoverable from the HTML immediately, and avoiding lazy-loading',
+      '[Optimize LCP](https://developer.chrome.com/docs/performance/insights/lcp-discovery) by making the LCP image discoverable from the HTML immediately, and avoiding lazy-loading.',
   /**
    * @description Text to tell the user how long after the earliest discovery time their LCP element loaded.
    * @example {401ms} PH1
@@ -52,15 +52,15 @@ export const UIStrings = {
   /**
    * @description Text to tell the user that LCP resources should avoid using loading=lazy.
    */
-  lazyLoadNotApplied: 'LCP resources should not use loading=lazy',
+  lazyLoadNotApplied: 'LCP resources shouldn’t use loading=lazy',
   /**
-   * @description Text status indicating that the the Largest Contentful Paint (LCP) metric timing was not found. "LCP" is an acronym and should not be translated.
+   * @description Text status indicating that the Largest Contentful Paint (LCP) metric timing was not found. "LCP" is an acronym and should not be translated.
    */
   noLcp: 'No LCP detected',
   /**
    * @description Text status indicating that the Largest Contentful Paint (LCP) metric was text rather than an image. "LCP" is an acronym and should not be translated.
    */
-  noLcpResource: 'No LCP resource detected because the LCP is not an image',
+  noLcpResource: 'No LCP resource detected because the LCP isn’t an image',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/LCPDiscovery.ts', UIStrings);

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

@@ -28,10 +28,14 @@ export const UIStrings = {
    * @description Description of an insight that identifies polyfills for modern JavaScript features, and recommends their removal.
    */
   description:
-      'Polyfills and transforms enable older browsers to use new JavaScript features. However, many aren’t necessary for modern browsers. Consider modifying your JavaScript build process to not transpile [Baseline](https://web.dev/articles/baseline-and-polyfills) features, unless you know you must support older browsers. [Learn why most sites can deploy ES6+ code without transpiling](https://developer.chrome.com/docs/performance/insights/legacy-javascript)',
-  /** Label for a column in a data table; entries will be the individual JavaScript scripts. */
+      'Polyfills and transforms enable older browsers to use new JavaScript features. However, many aren’t necessary for modern browsers. Consider modifying your JavaScript build process to not transpile [Baseline](https://web.dev/articles/baseline-and-polyfills) features, unless you know you must support older browsers. [Learn why most sites can deploy ES6+ code without transpiling](https://developer.chrome.com/docs/performance/insights/legacy-javascript).',
+  /**
+   * @description Label for a column in a data table; entries will be the individual JavaScript scripts.
+   */
   columnScript: 'Script',
-  /** Label for a column in a data table; entries will be the number of wasted bytes (aka the estimated savings in terms of bytes). */
+  /**
+   * @description Label for a column in a data table; entries will be the number of wasted bytes (aka the estimated savings in terms of bytes).
+   */
   columnWastedBytes: 'Wasted bytes',
   /**
    * @description Message shown when no legacy JavaScript is found.

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

@@ -24,7 +24,7 @@ export const UIStrings = {
    */
   title: 'Modern HTTP',
   /**
-   * @description Description of an insight that recommends recommends using HTTP/2 over HTTP/1.1 because of the performance benefits. "HTTP" should not be translated.
+   * @description Description of an insight that recommends using HTTP/2 over HTTP/1.1 because of the performance benefits. "HTTP" should not be translated.
    */
   description:
       'HTTP/2 and HTTP/3 offer many benefits over HTTP/1.1, such as multiplexing. [Learn more about using modern HTTP](https://developer.chrome.com/docs/performance/insights/modern-http).',
@@ -37,10 +37,10 @@ export const UIStrings = {
    */
   protocol: 'Protocol',
   /**
-   * @description Text explaining that there were not requests that were slowed down by using HTTP/1.1. "HTTP/1.1" should not be translated.
+   * @description Text explaining that there were no requests that were slowed down by using HTTP/1.1. "HTTP/1.1" should not be translated.
    */
   noOldProtocolRequests:
-      'No requests used HTTP/1.1, or its current use of HTTP/1.1 does not present a significant optimization opportunity. HTTP/1.1 requests are only flagged if six or more static assets originate from the same origin, and they are not served from a local development environment or a third-party source.',
+      'No requests used HTTP/1.1, or its current use of HTTP/1.1 doesn’t present a significant optimization opportunity. HTTP/1.1 requests are only flagged if six or more static assets originate from the same origin, and they aren’t served from a local development environment or a third-party source.',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/ModernHTTP.ts', UIStrings);

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

@@ -38,7 +38,7 @@ export const UIStrings = {
   warningDescription:
       'Avoid chaining critical requests by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load.',
   /**
-   * @description Text status indicating that there isn't long chaining critical network requests.
+   * @description Text status indicating that there aren’t long chaining critical network requests.
    */
   noNetworkDependencyTree: 'No rendering tasks impacted by network dependencies',
   /**
@@ -46,9 +46,13 @@ export const UIStrings = {
    * the browser must download before it can render the page.
    */
   maxCriticalPathLatency: 'Max critical path latency:',
-  /** Label for a column in a data table; entries will be the network request */
+  /**
+   * @description Label for a column in a data table; entries will be the network request.
+   */
   columnRequest: 'Request',
-  /** Label for a column in a data table; entries will be the time from main document till current network request. */
+  /**
+   * @description Label for a column in a data table; entries will be the time from main document till current network request.
+   */
   columnTime: 'Time',
   /**
    * @description Title of the table of the detected preconnect origins.
@@ -60,9 +64,9 @@ export const UIStrings = {
   preconnectOriginsTableDescription:
       '[preconnect](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/) hints help the browser establish a connection earlier in the page load, saving time when the first request for that origin is made. The following are the origins that the page preconnected to.',
   /**
-   * @description Text status indicating that there isn't any preconnected origins.
+   * @description Text status indicating that no origins were preconnected.
    */
-  noPreconnectOrigins: 'no origins were preconnected',
+  noPreconnectOrigins: 'No origins were preconnected',
   /**
    * @description A warning message that is shown when found more than 4 preconnected links. "preconnect" should not be translated.
    */
@@ -73,15 +77,15 @@ export const UIStrings = {
    */
   unusedWarning: 'Unused preconnect. Only use `preconnect` for origins that the page is likely to request.',
   /**
-   * @description A warning message that is shown when the user forget to set the `crossorigin` HTML attribute, or setting it to an incorrect value, on the link is a common mistake when adding preconnect links. "preconnect" should not be translated.
-   * */
+   * @description A warning message that is shown when the user forgets to set the `crossorigin` HTML attribute, or setting it to an incorrect value, on the link is a common mistake when adding preconnect links. "preconnect" should not be translated.
+   */
   crossoriginWarning: 'Unused preconnect. Check that the `crossorigin` attribute is used properly.',
   /**
    * @description Label for a column in a data table; entries will be the source of the origin.
    */
   columnSource: 'Source',
   /**
-   * @description Text status indicating that there isn't preconnect candidates.
+   * @description Text status indicating that there aren’t preconnect candidates.
    */
   noPreconnectCandidates: 'No additional origins are good candidates for preconnecting',
   /**
@@ -94,7 +98,7 @@ export const UIStrings = {
   estSavingTableDescription:
       'Add [preconnect](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/) hints to your most important origins, but try to use no more than 4.',
   /**
-   * @description Label for a column in a data table; entries will be the origin of a web resource
+   * @description Label for a column in a data table; entries will be the origin of a web resource.
    */
   columnOrigin: 'Origin',
   /**

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

@@ -40,7 +40,7 @@ export const UIStrings = {
    */
   duration: 'Duration',
   /**
-   * @description Text status indicating that no requests blocked the initial render of a navigation
+   * @description Text status indicating that no requests blocked the initial render of a navigation.
    */
   noRenderBlocking: 'No render-blocking requests for this navigation',
 } as const;

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

@@ -4,9 +4,7 @@
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Handlers from '../handlers/handlers.js';
-import type {SelectorStatsData} from '../handlers/SelectorStatsHandler.js';
 import * as Helpers from '../helpers/helpers.js';
-import {type SelectorTiming, SelectorTimingsKey} from '../types/TraceEvents.js';
 import * as Types from '../types/types.js';
 
 import {
@@ -21,23 +19,23 @@ export const UIStrings = {
   /**
    * @description Title of an insight that provides details about slow CSS selectors.
    */
-  title: 'CSS Selector costs',
+  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/performance/insights/slow-css-selector) 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.',
+      'If recalculate style costs remain high, selector optimization can reduce them. [Optimize the selectors](https://developer.chrome.com/docs/performance/insights/slow-css-selector) 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.',
   /**
-   * @description Column name for count of elements that the engine attempted to match against a style rule
+   * @description Column name for count of elements that the engine attempted to match against a style rule.
    */
   matchAttempts: 'Match attempts',
   /**
-   * @description Column name for count of elements that matched a style rule
+   * @description Column name for count of elements that matched a style rule.
    */
   matchCount: 'Match count',
   /**
-   * @description Column name for elapsed time spent computing a style rule
+   * @description Column name for elapsed time spent computing a style rule.
    */
   elapsed: 'Elapsed time',
   /**
@@ -52,13 +50,13 @@ export const UIStrings = {
    * @description Text status indicating that no CSS selector data was found.
    */
   enableSelectorData:
-      'No CSS selector data was found. CSS selector stats need to be enabled in the performance panel settings.',
+      'No CSS selector data was found. CSS selector stats need to be enabled in the Performance panel settings.',
   /**
-   * @description top CSS selector when ranked by elapsed time in ms
+   * @description Top CSS selector when ranked by elapsed time in ms.
    */
   topSelectorElapsedTime: 'Top selector elapsed time',
   /**
-   * @description top CSS selector when ranked by match attempt
+   * @description Top CSS selector when ranked by match attempt.
    */
   topSelectorMatchAttempt: 'Top selector match attempt',
 } as const;
@@ -75,8 +73,9 @@ export type SlowCSSSelectorInsightModel = InsightModel<typeof UIStrings, {
   topSelectorMatchAttempts: Types.Events.SelectorTiming | null,
 }>;
 
-function aggregateSelectorStats(data: SelectorStatsData, context: InsightSetContext): SelectorTiming[] {
-  const selectorMap = new Map<String, SelectorTiming>();
+function aggregateSelectorStats(data: Handlers.ModelHandlers.SelectorStats.SelectorStatsData,
+                                context: InsightSetContext): Types.Events.SelectorTiming[] {
+  const selectorMap = new Map<String, Types.Events.SelectorTiming>();
 
   for (const [event, value] of data.dataForRecalcStyleEvent) {
     if (event.args.beginData?.frame !== context.frameId) {
@@ -86,13 +85,16 @@ function aggregateSelectorStats(data: SelectorStatsData, context: InsightSetCont
       continue;
     }
     for (const timing of value.timings) {
-      const key = timing[SelectorTimingsKey.Selector] + '_' + timing[SelectorTimingsKey.StyleSheetId];
+      const key =
+          timing[Types.Events.SelectorTimingsKey.Selector] + '_' + timing[Types.Events.SelectorTimingsKey.StyleSheetId];
       const findTiming = selectorMap.get(key);
       if (findTiming !== undefined) {
-        findTiming[SelectorTimingsKey.Elapsed] += timing[SelectorTimingsKey.Elapsed];
-        findTiming[SelectorTimingsKey.FastRejectCount] += timing[SelectorTimingsKey.FastRejectCount];
-        findTiming[SelectorTimingsKey.MatchAttempts] += timing[SelectorTimingsKey.MatchAttempts];
-        findTiming[SelectorTimingsKey.MatchCount] += timing[SelectorTimingsKey.MatchCount];
+        findTiming[Types.Events.SelectorTimingsKey.Elapsed] += timing[Types.Events.SelectorTimingsKey.Elapsed];
+        findTiming[Types.Events.SelectorTimingsKey.FastRejectCount] +=
+            timing[Types.Events.SelectorTimingsKey.FastRejectCount];
+        findTiming[Types.Events.SelectorTimingsKey.MatchAttempts] +=
+            timing[Types.Events.SelectorTimingsKey.MatchAttempts];
+        findTiming[Types.Events.SelectorTimingsKey.MatchCount] += timing[Types.Events.SelectorTimingsKey.MatchCount];
       } else {
         selectorMap.set(key, {...timing});
       }
@@ -134,28 +136,30 @@ export function generateInsight(
   let totalMatchCount = 0;
 
   selectorTimings.map(timing => {
-    totalElapsedUs += timing[SelectorTimingsKey.Elapsed];
-    totalMatchAttempts += timing[SelectorTimingsKey.MatchAttempts];
-    totalMatchCount += timing[SelectorTimingsKey.MatchCount];
+    totalElapsedUs += timing[Types.Events.SelectorTimingsKey.Elapsed];
+    totalMatchAttempts += timing[Types.Events.SelectorTimingsKey.MatchAttempts];
+    totalMatchCount += timing[Types.Events.SelectorTimingsKey.MatchCount];
   });
 
-  let topSelectorElapsedMs: SelectorTiming|null = null;
-  let topSelectorMatchAttempts: SelectorTiming|null = null;
+  let topSelectorElapsedMs: Types.Events.SelectorTiming|null = null;
+  let topSelectorMatchAttempts: Types.Events.SelectorTiming|null = null;
 
   if (selectorTimings.length > 0) {
     // find the selector with most elapsed time
     topSelectorElapsedMs = selectorTimings.reduce((a, b) => {
-      return a[SelectorTimingsKey.Elapsed] > b[SelectorTimingsKey.Elapsed] ? a : b;
+      return a[Types.Events.SelectorTimingsKey.Elapsed] > b[Types.Events.SelectorTimingsKey.Elapsed] ? a : b;
     });
 
     // check if the slowest selector is slow enough to trigger insights info
-    if (topSelectorElapsedMs && topSelectorElapsedMs[SelectorTimingsKey.Elapsed] < slowCSSSelectorThreshold) {
+    if (topSelectorElapsedMs &&
+        topSelectorElapsedMs[Types.Events.SelectorTimingsKey.Elapsed] < slowCSSSelectorThreshold) {
       topSelectorElapsedMs = null;
     }
 
     // find the selector with most match attempts
     topSelectorMatchAttempts = selectorTimings.reduce((a, b) => {
-      return a[SelectorTimingsKey.MatchAttempts] > b[SelectorTimingsKey.MatchAttempts] ? a : b;
+      return a[Types.Events.SelectorTimingsKey.MatchAttempts] > b[Types.Events.SelectorTimingsKey.MatchAttempts] ? a :
+                                                                                                                   b;
     });
   }
 

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

@@ -17,7 +17,9 @@ import {
 } from './types.js';
 
 export 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"). */
+  /**
+   * @description 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: '3rd parties',
   /**
    * @description Description of a DevTools insight that identifies the code on the page that the user doesn't control.
@@ -25,14 +27,20 @@ export const UIStrings = {
    */
   description: '3rd party code can significantly impact load performance. ' +
       '[Reduce and defer loading of 3rd party code](https://developer.chrome.com/docs/performance/insights/third-parties) to prioritize your page’s content.',
-  /** Label for a table column that displays the name of a third-party provider. */
+  /**
+   * @description Label for a table column that displays the name of a third-party provider.
+   */
   columnThirdParty: '3rd party',
-  /** Label for a column in a data table; entries will be the download size of a web resource in kilobytes. */
+  /**
+   * @description Label for a column in a data table; entries will be the download size of a web resource in kilobytes.
+   */
   columnTransferSize: 'Transfer size',
-  /** Label for a table column that displays how much time each row spent running on the main thread, entries will be the number of milliseconds spent. */
+  /**
+   * @description Label for a table column that displays how much time each row spent running on the main thread, entries will be the number of milliseconds spent.
+   */
   columnMainThreadTime: 'Main thread time',
   /**
-   * @description Text block indicating that no third party content was detected on the page
+   * @description Text block indicating that no third party content was detected on the page.
    */
   noThirdParties: 'No third parties found',
 } as const;

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

@@ -18,13 +18,15 @@ import {
 } from './types.js';
 
 export const UIStrings = {
-  /** Title of an insight that provides details about if the page's viewport is optimized for mobile viewing. */
+  /**
+   * @description Title of an insight that provides details about if the page's viewport is optimized for mobile viewing.
+   */
   title: 'Optimize viewport for mobile',
   /**
    * @description Text to tell the user how a viewport meta element can improve performance. \xa0 is a non-breaking space
    */
   description:
-      'Tap interactions may be [delayed by up to 300\xA0ms](https://developer.chrome.com/docs/performance/insights/viewport) if the viewport is not optimized for mobile.',
+      'Tap interactions may be [delayed by up to 300\xA0ms](https://developer.chrome.com/docs/performance/insights/viewport) if the viewport isn’t optimized for mobile.',
   /**
    * @description Text for a label describing the portion of an interaction event that was delayed due to a bad mobile viewport.
    */