[RPP] Use correct label for field metrics in insight sidebar

Bug: 368135130
Change-Id: I37c22d8a7626918cf6e7573c97ac6a9283bc2421
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6202364
Reviewed-by: Adam Raine <[email protected]>
Commit-Queue: Connor Clark <[email protected]>

Author: Connor Clark

front_end/panels/timeline/components/SidebarSingleInsightSet.ts

@@ -38,6 +38,19 @@ const UIStrings = {
    * @example {4} PH1
    */
   passedInsights: 'Passed insights ({PH1})',
+  /**
+   * @description Label denoting that metrics were observed in the field, from real use data (CrUX). Also denotes if from URL or Origin dataset.
+   * @example {URL} PH1
+   */
+  fieldScoreLabel: 'Field ({PH1})',
+  /**
+   * @description Label for an option that selects the page's specific URL as opposed to it's entire origin/domain.
+   */
+  urlOption: 'URL',
+  /**
+   * @description Label for an option that selects the page's entire origin/domain as opposed to it's specific URL.
+   */
+  originOption: 'Origin',
   /**
    * @description Title for button that closes a warning popup.
    */
@@ -282,15 +295,22 @@ export class SidebarSingleInsightSet extends HTMLElement {
       const inpEl = this.#renderMetricValue('INP', inp?.value ?? null, null);
       const clsEl = this.#renderMetricValue('CLS', cls?.value ?? null, null);
 
+      let scope = i18nString(UIStrings.originOption);
+      if (lcp?.pageScope === 'url' || inp?.pageScope === 'url') {
+        scope = i18nString(UIStrings.urlOption);
+      }
+
+      // clang-format off
       fieldMetricsTemplateResult = html`
         <div class="metrics-row">
           <span>${lcpEl}</span>
           <span>${inpEl}</span>
           <span>${clsEl}</span>
-          <span class="row-label">Field (Origin)</span>
+          <span class="row-label">${i18nString(UIStrings.fieldScoreLabel, {PH1: scope})}</span>
         </div>
         <span class="row-border"></span>
       `;
+      // clang-format on
     }
 
     const localValues = {

front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -24,6 +24,14 @@ const UIStrings = {
    * @example {URL} PH2
    */
   fieldMetricMarkerField: '{PH1} - Field ({PH2})',
+  /**
+   * @description Label for an option that selects the page's specific URL as opposed to it's entire origin/domain.
+   */
+  urlOption: 'URL',
+  /**
+   * @description Label for an option that selects the page's entire origin/domain as opposed to it's specific URL.
+   */
+  originOption: 'Origin',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/overlays/OverlaysImpl.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -1595,9 +1603,9 @@ export class Overlays extends EventTarget {
           i18n.TimeUtilities.formatMicroSecondsTime(fieldResult.value);
       let scope: string = fieldResult.pageScope;
       if (fieldResult.pageScope === 'url') {
-        scope = 'URL';
+        scope = i18nString(UIStrings.urlOption);
       } else if (fieldResult.pageScope === 'origin') {
-        scope = 'Origin';
+        scope = i18nString(UIStrings.originOption);
       }
       popoverContents.createChild('span', 'overlay-popover-title').textContent =
           i18nString(UIStrings.fieldMetricMarkerField, {