From 42fe2c4d98cd87a4bb07183cc95df319f686b52c Mon Sep 17 00:00:00 2001
From: Adam Raine <asraine@chromium.org>
Date: Fri, 28 Mar 2025 12:41:45 -0700
Subject: [PATCH] [LiveMetrics] Render field data phase column on the right

Fixed: 406826928
Change-Id: I7bd68732e5db30c7e55f2c2b4eb446d0c677c93c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6404928
Commit-Queue: Paul Irish <paulirish@chromium.org>
Commit-Queue: Adam Raine <asraine@chromium.org>
Auto-Submit: Adam Raine <asraine@chromium.org>
Reviewed-by: Paul Irish <paulirish@chromium.org>
---
 front_end/panels/timeline/components/MetricCard.test.ts | 6 +++---
 front_end/panels/timeline/components/MetricCard.ts      | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/front_end/panels/timeline/components/MetricCard.test.ts b/front_end/panels/timeline/components/MetricCard.test.ts
index ff7a2f3dac..07d9347319 100644
--- a/front_end/panels/timeline/components/MetricCard.test.ts
+++ b/front_end/panels/timeline/components/MetricCard.test.ts
@@ -260,9 +260,9 @@ describeWithMockConnection('MetricCard', () => {
 
       const phaseTable = getPhaseTable(view);
       assert.deepEqual(phaseTable, [
-        ['TTFB', '400 ms', '500 ms'],
-        ['Phase 1', '10 ms', '0 ms'],
-        ['Phase 2', '100 ms', '124 ms'],
+        ['TTFB', '500 ms', '400 ms'],
+        ['Phase 1', '0 ms', '10 ms'],
+        ['Phase 2', '124 ms', '100 ms'],
       ]);
     });
   });
diff --git a/front_end/panels/timeline/components/MetricCard.ts b/front_end/panels/timeline/components/MetricCard.ts
index e26111f121..d955f3411d 100644
--- a/front_end/panels/timeline/components/MetricCard.ts
+++ b/front_end/panels/timeline/components/MetricCard.ts
@@ -584,22 +584,22 @@ export class MetricCard extends HTMLElement {
       <div class="phase-table" role="table">
         <div class="phase-table-row phase-table-header-row" role="row">
           <div role="columnheader" style="grid-column: 1">${i18nString(UIStrings.phase)}</div>
+          <div role="columnheader" class="phase-table-value" style="grid-column: 2">${i18nString(UIStrings.localValue)}</div>
           ${hasFieldData ? html`
             <div
               role="columnheader"
               class="phase-table-value"
-              style="grid-column: 2"
+              style="grid-column: 3"
               title=${i18nString(UIStrings.field75thPercentile)}>${i18nString(UIStrings.fieldP75)}</div>
           ` : nothing}
-          <div role="columnheader" class="phase-table-value" style=${hasFieldData ? 'grid-column: 3' : 'grid-column: 2'}>${i18nString(UIStrings.localValue)}</div>
         </div>
         ${phases.map(phase => html`
           <div class="phase-table-row" role="row">
             <div role="cell">${phase[0]}</div>
+            <div role="cell" class="phase-table-value">${i18n.TimeUtilities.preciseMillisToString(phase[1])}</div>
             ${phase[2] !== undefined ? html`
               <div role="cell" class="phase-table-value">${i18n.TimeUtilities.preciseMillisToString(phase[2])}</div>
             ` : nothing}
-            <div role="cell" class="phase-table-value">${i18n.TimeUtilities.preciseMillisToString(phase[1])}</div>
           </div>
         `)}
       </div>