[LCPPhases] Use duration instead of percent

Lighthouse, the RPP landing page, and CrUX all use ms instead of %.

Bug: None
Change-Id: I2b1938ba5908cf3a485146df9398d482c7d12cd8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6270376
Commit-Queue: Adriana Ixba <[email protected]>
Reviewed-by: Adriana Ixba <[email protected]>
Auto-Submit: Adam Raine <[email protected]>

Author: Adam Raine

front_end/models/trace/insights/LCPPhases.ts

@@ -48,9 +48,9 @@ export const UIStrings = {
    */
   phase: 'Phase',
   /**
-   *@description Label used for the percentage a single phase/component/stage/section takes up of a larger duration.
+   * @description Label used for the duration a single phase/component/stage/section takes up of a larger duration.
    */
-  percentLCP: '% of LCP',
+  duration: 'Duration',
   /**
    * @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.
    */

front_end/panels/timeline/components/insights/LCPPhases.ts

@@ -4,6 +4,7 @@
 
 import './Table.js';
 
+import * as i18n from '../../../../core/i18n/i18n.js';
 import type {LCPPhasesInsightModel} from '../../../../models/trace/insights/LCPPhases.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as Lit from '../../../../ui/lit/lit.js';
@@ -19,7 +20,6 @@ const {html} = Lit;
 interface PhaseData {
   phase: string;
   timing: number|Trace.Types.Timing.Milli;
-  percent: string;
 }
 
 export class LCPPhases extends BaseInsightComponent<LCPPhasesInsightModel> {
@@ -43,33 +43,29 @@ export class LCPPhases extends BaseInsightComponent<LCPPhasesInsightModel> {
 
     if (loadDelay && loadTime) {
       const phaseData = [
-        {phase: i18nString(UIStrings.timeToFirstByte), timing: ttfb, percent: `${(100 * ttfb / timing).toFixed(0)}%`},
+        {phase: i18nString(UIStrings.timeToFirstByte), timing: ttfb},
         {
           phase: i18nString(UIStrings.resourceLoadDelay),
           timing: loadDelay,
-          percent: `${(100 * loadDelay / timing).toFixed(0)}%`,
         },
         {
           phase: i18nString(UIStrings.resourceLoadDuration),
           timing: loadTime,
-          percent: `${(100 * loadTime / timing).toFixed(0)}%`,
         },
         {
           phase: i18nString(UIStrings.elementRenderDelay),
           timing: renderDelay,
-          percent: `${(100 * renderDelay / timing).toFixed(0)}%`,
         },
       ];
       return phaseData;
     }
 
     // If the lcp is text, we only have ttfb and render delay.
     const phaseData = [
-      {phase: i18nString(UIStrings.timeToFirstByte), timing: ttfb, percent: `${(100 * ttfb / timing).toFixed(0)}%`},
+      {phase: i18nString(UIStrings.timeToFirstByte), timing: ttfb},
       {
         phase: i18nString(UIStrings.elementRenderDelay),
         timing: renderDelay,
-        percent: `${(100 * renderDelay / timing).toFixed(0)}%`,
       },
     ];
     return phaseData;
@@ -164,10 +160,10 @@ export class LCPPhases extends BaseInsightComponent<LCPPhasesInsightModel> {
       return html`<div class="insight-section">${i18nString(UIStrings.noLcp)}</div>`;
     }
 
-    const rows = phaseData.map(({phase, percent}) => {
+    const rows = phaseData.map(({phase, timing}) => {
       const section = this.#overlay?.sections.find(section => phase === section.label);
       return {
-        values: [phase, percent],
+        values: [phase, i18n.TimeUtilities.preciseMillisToString(timing)],
         overlays: section && [{
                     type: 'TIMESPAN_BREAKDOWN',
                     sections: [section],
@@ -181,7 +177,7 @@ export class LCPPhases extends BaseInsightComponent<LCPPhasesInsightModel> {
         ${html`<devtools-performance-table
           .data=${{
             insight: this,
-            headers: [i18nString(UIStrings.phase), i18nString(UIStrings.percentLCP)],
+            headers: [i18nString(UIStrings.phase), i18nString(UIStrings.duration)],
             rows,
           } as TableData}>
         </devtools-performance-table>`}