[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>
This commit is contained in:
Adam Raine
2025-03-28 13:15:54 -07:00
committed by Devtools-frontend LUCI CQ
parent 6333612700
commit 42fe2c4d98
2 changed files with 6 additions and 6 deletions
@@ -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'],
]);
});
});
@@ -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>