chrome-devtools-frontend 1.0.1652307 → 1.0.1656291

package/front_end/panels/timeline/TimelineHistoryManager.ts

@@ -7,8 +7,8 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Trace from '../../models/trace/trace.js';
-import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, type LitTemplate, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {
@@ -361,39 +361,43 @@ export class TimelineHistoryManager {
     };
     parsedTraceIndexToPerformancePreviewData.set(parsedTraceIndex, data);
 
-    preview.appendChild(this.#buildTextDetails(parsedTrace.metadata, domain));
-    const screenshotAndOverview = preview.createChild('div', 'hbox');
-    screenshotAndOverview.appendChild(this.#buildScreenshotThumbnail(filmStrip));
-    screenshotAndOverview.appendChild(this.#buildOverview(parsedTrace));
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(html`
+      ${this.#renderTextDetails(parsedTrace.metadata, domain)}
+      <div class="hbox">
+        ${this.#renderScreenshotThumbnail(filmStrip)}
+        ${this.#buildOverview(parsedTrace)}
+      </div>
+    `,
+           preview, {host: this});
+
     return data.preview;
   }
 
-  #buildTextDetails(metadata: Trace.Types.File.MetaData|null, title: string): Element {
-    const container = document.createElement('div');
-    container.classList.add('text-details');
-    container.classList.add('hbox');
-    const nameSpan = container.createChild('span', 'name');
-    nameSpan.textContent = title;
-    UI.ARIAUtils.setLabel(nameSpan, title);
-
+  #renderTextDetails(metadata: Trace.Types.File.MetaData|null, title: string): LitTemplate {
+    let metadataText = '';
     if (metadata) {
       const parts = [
         metadata.emulatedDeviceTitle,
         metadata.cpuThrottling ? i18nString(UIStrings.dSlowdown, {PH1: metadata.cpuThrottling}) : undefined,
         metadata.networkThrottling,
       ].filter(Boolean);
-      container.createChild('span', 'metadata').textContent = listFormatter.format(parts as string[]);
+      metadataText = listFormatter.format(parts as string[]);
     }
 
-    return container;
+    return html`
+      <div class="text-details hbox">
+        <span class="name">${title}</span>
+        ${metadataText ? html`<span class="metadata">${metadataText}</span>` : ''}
+      </div>
+    `;
   }
 
-  #buildScreenshotThumbnail(filmStrip: Trace.Extras.FilmStrip.Data|null): Element {
-    const container = document.createElement('div');
-    container.classList.add('screenshot-thumb');
+  #renderScreenshotThumbnail(filmStrip: Trace.Extras.FilmStrip.Data|null): LitTemplate {
     const thumbnailAspectRatio = 3 / 2;
-    container.style.width = this.totalHeight * thumbnailAspectRatio + 'px';
-    container.style.height = this.totalHeight + 'px';
+    const width = this.totalHeight * thumbnailAspectRatio + 'px';
+    const height = this.totalHeight + 'px';
+    const container = html`<div class="screenshot-thumb" style="width: ${width}; height: ${height}"></div>`;
     if (!filmStrip) {
       return container;
     }
@@ -403,12 +407,11 @@ export class TimelineHistoryManager {
     }
     // TODO(paulirish): Adopt Util.ImageCache
     const uri = Trace.Handlers.ModelHandlers.Screenshots.screenshotImageDataUri(lastFrame.screenshotEvent);
-    void UI.UIUtils.loadImage(uri).then(img => {
-      if (img) {
-        container.appendChild(img);
-      }
-    });
-    return container;
+    return html`
+      <div class="screenshot-thumb" style="width: ${width}; height: ${height}">
+        <img src=${uri}>
+      </div>
+    `;
   }
 
   #buildOverview(parsedTrace: Trace.TraceModel.ParsedTrace): Element {
@@ -582,14 +585,14 @@ export class DropDown implements UI.ListControl.ListDelegate<number> {
 
     div.style.width = `${previewWidth}px`;
 
-    const icon = createIcon('arrow-back');
-    icon.title = i18nString(UIStrings.backButtonTooltip);
-    icon.classList.add('back-arrow');
-    div.appendChild(icon);
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(html`
+      <devtools-icon class="back-arrow" title=${
+               i18nString(UIStrings.backButtonTooltip)} name="arrow-back"></devtools-icon>
+      <span>${this.#landingPageTitle}</span>
+    `,
+           div, {host: this});
 
-    const text = document.createElement('span');
-    text.innerText = this.#landingPageTitle;
-    div.appendChild(text);
     return div;
   }
 
@@ -619,14 +622,11 @@ export class DropDown implements UI.ListControl.ListDelegate<number> {
 }
 
 export class ToolbarButton extends UI.Toolbar.ToolbarItem {
-  private contentElement: HTMLElement;
-
   constructor(action: UI.ActionRegistration.Action) {
     const element = document.createElement('button');
     element.classList.add('history-dropdown-button');
     element.setAttribute('jslog', `${VisualLogging.dropDown('history')}`);
     super(element);
-    this.contentElement = this.element.createChild('span', 'content');
     this.element.addEventListener('click', () => void action.execute(), false);
     this.setEnabled(action.enabled());
     action.addEventListener(UI.ActionRegistration.Events.ENABLED, event => this.setEnabled(event.data));
@@ -634,6 +634,7 @@ export class ToolbarButton extends UI.Toolbar.ToolbarItem {
   }
 
   setText(text: string): void {
-    this.contentElement.textContent = text;
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(html`<span class="content">${text}</span>`, this.element, {host: this});
   }
 }

package/front_end/panels/timeline/TimelinePanel.ts

@@ -316,6 +316,9 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 let timelinePanelInstance: TimelinePanel|undefined;
 
+// Total time to wait for source maps to load before giving up so trace processing can proceed.
+const SOURCE_MAP_LOAD_TIMEOUT_MS = 5000;
+
 /**
  * Represents the states that the timeline panel can be in.
  * If you need to change the panel's view, use the {@link TimelinePanel.#changeView} method.
@@ -2149,14 +2152,21 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     // Annotation Overlays.
     currentManager?.addEventListener(AnnotationModifiedEvent.eventName, this.#onAnnotationModifiedEventBound);
 
-    // To calculate the activity we might want to zoom in, we use the top-most main-thread track
-    const topMostMainThreadAppender =
-        this.flameChart.getMainDataProvider().compatibilityTracksAppenderInstance().threadAppenders().at(0);
-    if (topMostMainThreadAppender) {
-      const zoomedInBounds = Trace.Extras.MainThreadActivity.calculateWindow(
-          parsedTrace.data.Meta.traceBounds, topMostMainThreadAppender.getEntries());
-
-      TraceBounds.TraceBounds.BoundsManager.instance().setTimelineVisibleWindow(zoomedInBounds);
+    // To calculate the activity we might want to zoom in, we use the top-most main-thread track.
+    // If the trace has an active breadcrumb that is not the initial full trace breadcrumb, we do
+    // not zoom in, but keep the window at the active breadcrumb bounds.
+    const breadcrumbs = currentManager?.getTimelineBreadcrumbs();
+    const hasActiveBreadcrumb = breadcrumbs ? breadcrumbs.activeBreadcrumb !== breadcrumbs.initialBreadcrumb : false;
+    if (!hasActiveBreadcrumb) {
+      const topMostMainThreadAppender =
+          this.flameChart.getMainDataProvider().compatibilityTracksAppenderInstance().threadAppenders().at(0);
+      const zoomWindow = calculateAutoZoomWindow(
+          parsedTrace.data.Meta.traceBounds,
+          topMostMainThreadAppender?.getEntries(),
+      );
+      if (zoomWindow) {
+        TraceBounds.TraceBounds.BoundsManager.instance().setTimelineVisibleWindow(zoomWindow);
+      }
     }
 
     // Add overlays for annotations loaded from the trace file
@@ -2642,12 +2652,19 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     };
 
     metadata.sourceMaps = [];
+    await this.#handleSourceMapPromise(parsedTrace, handleScript);
+  }
 
+  async #handleSourceMapPromise(parsedTrace: Trace.TraceModel.ParsedTrace,
+                                handleScript: (script: Trace.Handlers.ModelHandlers.Scripts.Script) => Promise<void>):
+      Promise<void> {
     const promises = [];
     for (const script of parsedTrace?.data.Scripts.scripts.values() ?? []) {
       promises.push(handleScript(script));
     }
-    await Promise.all(promises);
+
+    const timeout = new Promise<void>(resolve => setTimeout(resolve, SOURCE_MAP_LOAD_TIMEOUT_MS));
+    await Promise.race([Promise.allSettled(promises), timeout]);
   }
 
   #createSourceMapResolver(isFreshRecording: boolean, metadata: Trace.Types.File.MetaData|null):
@@ -2681,7 +2698,8 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       return await debuggerModel.sourceMapManager().sourceMapForClientPromise(script);
     }
 
-    return async function resolveSourceMap(params: Trace.Types.Configuration.ResolveSourceMapParams) {
+    async function resolveSourceMap(params: Trace.Types.Configuration.ResolveSourceMapParams):
+        Promise<SDK.SourceMap.SourceMap|null> {
       const {scriptId, scriptUrl, sourceUrl, sourceMapUrl, frame, cachedRawSourceMap} = params;
 
       if (cachedRawSourceMap) {
@@ -2738,7 +2756,13 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       const payload = await SDK.SourceMapManager.tryLoadSourceMap(
           TimelinePanel.instance().#resourceLoader, sourceMapUrl, initiator);
       return payload ? new SDK.SourceMap.SourceMap(sourceUrl, sourceMapUrl, payload) : null;
-    };
+    }
+
+    const timeout = new Promise<null>(resolve => setTimeout(() => resolve(null), SOURCE_MAP_LOAD_TIMEOUT_MS));
+    return function resolveSourceMapWithTimeout(params: Trace.Types.Configuration.ResolveSourceMapParams):
+        Promise<SDK.SourceMap.SourceMap|null> {
+          return Promise.race([resolveSourceMap(params), timeout]);
+        };
   }
 
   async #retainResourceContentsForEnhancedTrace(
@@ -3206,3 +3230,20 @@ export interface EventTypes {
   [Events.IS_VIEWING_TRACE]: boolean;
   [Events.RECORDING_COMPLETED]: {traceIndex: number}|{errorText: string};
 }
+
+/**
+ * Calculates the window to auto-zoom into when a trace is loaded.
+ * We only auto-zoom to the main thread activity if there is no active breadcrumb,
+ * as we want to preserve the active breadcrumb's window if one exists.
+ *
+ * @returns the window to zoom into, or null if no auto-zoom should be applied.
+ */
+export function calculateAutoZoomWindow(
+    traceBounds: Trace.Types.Timing.TraceWindowMicro,
+    topMostMainThreadAppenderEntries: readonly Trace.Types.Events.Event[]|undefined,
+    ): Trace.Types.Timing.TraceWindowMicro|null {
+  if (!topMostMainThreadAppenderEntries || topMostMainThreadAppenderEntries.length === 0) {
+    return null;
+  }
+  return Trace.Extras.MainThreadActivity.calculateWindow(traceBounds, topMostMainThreadAppenderEntries);
+}

package/front_end/panels/timeline/components/CPUThrottlingSelector.ts

@@ -12,6 +12,7 @@ import type * as Menus from '../../../ui/components/menus/menus.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
+import * as PanelsCommon from '../../common/common.js';
 import * as MobileThrottling from '../../mobile_throttling/mobile_throttling.js';
 
 import cpuThrottlingSelectorStyles from './cpuThrottlingSelector.css.js';
@@ -57,22 +58,22 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 interface CPUThrottlingGroup {
   name: string;
-  items: SDK.CPUThrottlingManager.CPUThrottlingOption[];
+  items: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption[];
   showCustomAddOption?: boolean;
 }
 
 interface ViewInput {
-  recommendedOption: SDK.CPUThrottlingManager.CPUThrottlingOption|null;
-  currentOption: SDK.CPUThrottlingManager.CPUThrottlingOption;
+  recommendedOption: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption|null;
+  currentOption: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption;
   groups: CPUThrottlingGroup[];
-  throttling: SDK.CPUThrottlingManager.CalibratedCPUThrottling;
+  throttling: PanelsCommon.CPUThrottlingOption.CalibratedCPUThrottling;
   onMenuItemSelected: (event: Menus.SelectMenu.SelectMenuItemSelectedEvent) => void;
   onCalibrateClick: () => void;
 }
 
 export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
   let recommendedInfoEl;
-  if (input.recommendedOption && input.currentOption === SDK.CPUThrottlingManager.NoThrottlingOption) {
+  if (input.recommendedOption && input.currentOption === PanelsCommon.CPUThrottlingOption.NoThrottlingOption) {
     recommendedInfoEl = html`<devtools-icon
         title=${i18nString(UIStrings.recommendedThrottlingReason)}
         name=info></devtools-icon>`;
@@ -134,31 +135,32 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
 type View = typeof DEFAULT_VIEW;
 
 export class CPUThrottlingSelector extends UI.Widget.Widget {
-  #currentOption: SDK.CPUThrottlingManager.CPUThrottlingOption;
-  #recommendedOption: SDK.CPUThrottlingManager.CPUThrottlingOption|null = null;
+  #currentOption: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption;
+  #recommendedOption: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption|null = null;
   #groups: CPUThrottlingGroup[] = [];
-  #calibratedThrottlingSetting: Common.Settings.Setting<SDK.CPUThrottlingManager.CalibratedCPUThrottling>;
+  #calibratedThrottlingSetting: Common.Settings.Setting<PanelsCommon.CPUThrottlingOption.CalibratedCPUThrottling>;
   readonly #view: View;
+  readonly #cpuThrottlingManager = SDK.CPUThrottlingManager.CPUThrottlingManager.instance();
 
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
-    this.#currentOption = SDK.CPUThrottlingManager.CPUThrottlingManager.instance().cpuThrottlingOption();
+    this.#currentOption = MobileThrottling.ThrottlingManager.throttlingManager().cpuThrottlingOption();
     this.#calibratedThrottlingSetting =
-        Common.Settings.Settings.instance().createSetting<SDK.CPUThrottlingManager.CalibratedCPUThrottling>(
+        Common.Settings.Settings.instance().createSetting<PanelsCommon.CPUThrottlingOption.CalibratedCPUThrottling>(
             'calibrated-cpu-throttling', {}, Common.Settings.SettingStorageType.GLOBAL);
     this.#resetGroups();
     this.#view = view;
   }
 
-  set recommendedOption(recommendedOption: SDK.CPUThrottlingManager.CPUThrottlingOption|null) {
+  set recommendedOption(recommendedOption: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption|null) {
     this.#recommendedOption = recommendedOption;
     this.requestUpdate();
   }
 
   override wasShown(): void {
     super.wasShown();
-    SDK.CPUThrottlingManager.CPUThrottlingManager.instance().addEventListener(
-        SDK.CPUThrottlingManager.Events.RATE_CHANGED, this.#onOptionChange, this);
+    this.#cpuThrottlingManager.addEventListener(SDK.CPUThrottlingManager.Events.RATE_CHANGED, this.#onOptionChange,
+                                                this);
     this.#calibratedThrottlingSetting.addChangeListener(this.#onCalibratedSettingChanged, this);
     this.#onOptionChange();
   }
@@ -166,12 +168,12 @@ export class CPUThrottlingSelector extends UI.Widget.Widget {
   override willHide(): void {
     super.willHide();
     this.#calibratedThrottlingSetting.removeChangeListener(this.#onCalibratedSettingChanged, this);
-    SDK.CPUThrottlingManager.CPUThrottlingManager.instance().removeEventListener(
-        SDK.CPUThrottlingManager.Events.RATE_CHANGED, this.#onOptionChange, this);
+    this.#cpuThrottlingManager.removeEventListener(SDK.CPUThrottlingManager.Events.RATE_CHANGED, this.#onOptionChange,
+                                                   this);
   }
 
   #onOptionChange(): void {
-    this.#currentOption = SDK.CPUThrottlingManager.CPUThrottlingManager.instance().cpuThrottlingOption();
+    this.#currentOption = MobileThrottling.ThrottlingManager.throttlingManager().cpuThrottlingOption();
 
     this.requestUpdate();
   }
@@ -185,9 +187,9 @@ export class CPUThrottlingSelector extends UI.Widget.Widget {
     let option;
     if (typeof event.itemValue === 'string') {
       if (event.itemValue === 'low-tier-mobile') {
-        option = SDK.CPUThrottlingManager.CalibratedLowTierMobileThrottlingOption;
+        option = PanelsCommon.CPUThrottlingOption.CalibratedLowTierMobileThrottlingOption;
       } else if (event.itemValue === 'mid-tier-mobile') {
-        option = SDK.CPUThrottlingManager.CalibratedMidTierMobileThrottlingOption;
+        option = PanelsCommon.CPUThrottlingOption.CalibratedMidTierMobileThrottlingOption;
       }
     } else {
       const rate = Number(event.itemValue);

package/front_end/panels/timeline/components/LiveMetricsView.ts

@@ -236,31 +236,31 @@ const UIStrings = {
    */
   clearCurrentLog: 'Clear the current log',
   /**
-   * @description Title for a page load phase that measures the time between when the page load starts and the time when the first byte of the initial document is downloaded.
+   * @description Title for a page load subpart that measures the time between when the page load starts and the time when the first byte of the initial document is downloaded.
    */
   timeToFirstByte: 'Time to first byte',
   /**
-   * @description Title for a page load phase that measures the time between when the first byte of the initial document is downloaded and when the request for the largest image content starts.
+   * @description Title for a page load subpart that measures the time between when the first byte of the initial document is downloaded and when the request for the largest image content starts.
    */
   resourceLoadDelay: 'Resource load delay',
   /**
-   * @description Title for a page load phase that measures the time between when the request for the largest image content starts and when it finishes.
+   * @description Title for a page load subpart that measures the time between when the request for the largest image content starts and when it finishes.
    */
   resourceLoadDuration: 'Resource load duration',
   /**
-   * @description Title for a page load phase that measures the time between when the request for the largest image content finishes and when the largest image element is rendered on the page.
+   * @description Title for a page load subpart that measures the time between when the request for the largest image content finishes and when the largest image element is rendered on the page.
    */
   elementRenderDelay: 'Element render delay',
   /**
-   * @description Title for a phase during a user interaction that measures the time between when the interaction starts and when the browser starts running interaction handlers.
+   * @description Title for a subpart during a user interaction that measures the time between when the interaction starts and when the browser starts running interaction handlers.
    */
   inputDelay: 'Input delay',
   /**
-   * @description Title for a phase during a user interaction that measures the time between when the browser starts running interaction handlers and when the browser finishes running interaction handlers.
+   * @description Title for a subpart during a user interaction that measures the time between when the browser starts running interaction handlers and when the browser finishes running interaction handlers.
    */
   processingDuration: 'Processing duration',
   /**
-   * @description Title for a phase during a user interaction that measures the time between when the browser finishes running interaction handlers and when the browser renders the next visual frame that shows the result of the interaction.
+   * @description Title for a subpart during a user interaction that measures the time between when the browser finishes running interaction handlers and when the browser renders the next visual frame that shows the result of the interaction.
    */
   presentationDelay: 'Presentation delay',
   /**
@@ -276,11 +276,11 @@ const UIStrings = {
    */
   showClsCluster: 'Go to worst layout shift cluster.',
   /**
-   * @description Column header for table cell values representing the phase/component/stage/section of a larger duration.
+   * @description Column header for table cell values representing the subpart/component/stage/section of a larger duration.
    */
-  phase: 'Phase',
+  subpart: 'Subpart',
   /**
-   * @description Column header for table cell values representing a phase duration (in milliseconds) that was measured in the developers local environment.
+   * @description Column header for table cell values representing a subpart duration (in milliseconds) that was measured in the developers local environment.
    */
   duration: 'Local duration (ms)',
   /**
@@ -328,7 +328,7 @@ export interface ViewOutput {
 
 export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement|DocumentFragment) => void;
 
-function getLcpFieldPhases(cruxManager: CrUXManager.CrUXManager): LiveMetrics.LcpValue['phases']|null {
+function getLcpFieldSubparts(cruxManager: CrUXManager.CrUXManager): LiveMetrics.LcpValue['subparts']|null {
   const ttfb =
       cruxManager.getSelectedFieldMetricData('largest_contentful_paint_image_time_to_first_byte')?.percentiles?.p75;
   const loadDelay =
@@ -484,9 +484,9 @@ function renderLcpCard(input: ViewInput): Lit.LitTemplate {
   const fieldData = input.cruxManager.getSelectedFieldMetricData('largest_contentful_paint');
   const nodeLink =
       input.lcpValue?.nodeRef && PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(input.lcpValue?.nodeRef);
-  const phases = input.lcpValue?.phases;
+  const subparts = input.lcpValue?.subparts;
 
-  const fieldPhases = getLcpFieldPhases(input.cruxManager);
+  const fieldSubparts = getLcpFieldSubparts(input.cruxManager);
 
   // clang-format off
   return html`
@@ -496,11 +496,11 @@ function renderLcpCard(input: ViewInput): Lit.LitTemplate {
       fieldValue: fieldData?.percentiles?.p75,
       histogram: fieldData?.histogram,
       warnings: input.lcpValue?.warnings,
-      phases: phases && [
-        [i18nString(UIStrings.timeToFirstByte), phases.timeToFirstByte, fieldPhases?.timeToFirstByte],
-        [i18nString(UIStrings.resourceLoadDelay), phases.resourceLoadDelay, fieldPhases?.resourceLoadDelay],
-        [i18nString(UIStrings.resourceLoadDuration), phases.resourceLoadTime, fieldPhases?.resourceLoadTime],
-        [i18nString(UIStrings.elementRenderDelay), phases.elementRenderDelay, fieldPhases?.elementRenderDelay],
+      subparts: subparts && [
+        [i18nString(UIStrings.timeToFirstByte), subparts.timeToFirstByte, fieldSubparts?.timeToFirstByte],
+        [i18nString(UIStrings.resourceLoadDelay), subparts.resourceLoadDelay, fieldSubparts?.resourceLoadDelay],
+        [i18nString(UIStrings.resourceLoadDuration), subparts.resourceLoadTime, fieldSubparts?.resourceLoadTime],
+        [i18nString(UIStrings.elementRenderDelay), subparts.elementRenderDelay, fieldSubparts?.elementRenderDelay],
       ],
     })}>
       ${nodeLink ? html`
@@ -551,7 +551,7 @@ function renderClsCard(input: ViewInput): Lit.LitTemplate {
 
 function renderInpCard(input: ViewInput): Lit.LitTemplate {
   const fieldData = input.cruxManager.getSelectedFieldMetricData('interaction_to_next_paint');
-  const phases = input.inpValue?.phases;
+  const subparts = input.inpValue?.subparts;
   const interaction = input.inpValue && input.interactions.get(input.inpValue.interactionId);
 
   // clang-format off
@@ -562,10 +562,10 @@ function renderInpCard(input: ViewInput): Lit.LitTemplate {
       fieldValue: fieldData?.percentiles?.p75,
       histogram: fieldData?.histogram,
       warnings: input.inpValue?.warnings,
-      phases: phases && [
-        [i18nString(UIStrings.inputDelay), phases.inputDelay],
-        [i18nString(UIStrings.processingDuration), phases.processingDuration],
-        [i18nString(UIStrings.presentationDelay), phases.presentationDelay],
+      subparts: subparts && [
+        [i18nString(UIStrings.inputDelay), subparts.inputDelay],
+        [i18nString(UIStrings.processingDuration), subparts.processingDuration],
+        [i18nString(UIStrings.presentationDelay), subparts.presentationDelay],
       ],
     })}>
       ${interaction ? html`
@@ -873,30 +873,30 @@ function renderInteractionsLog(input: ViewInput, output: ViewOutput): Lit.LitTem
                 ></devtools-icon>` : nothing}
                 <span class="interaction-duration">${metricValue}</span>
               </summary>
-              <div class="phase-table" role="table">
-                <div class="phase-table-row phase-table-header-row" role="row">
-                  <div role="columnheader">${i18nString(UIStrings.phase)}</div>
+              <div class="subpart-table" role="table">
+                <div class="subpart-table-row subpart-table-header-row" role="row">
+                  <div role="columnheader">${i18nString(UIStrings.subpart)}</div>
                   <div role="columnheader">
                     ${interaction.longAnimationFrameTimings.length ? html`
-                      <button
-                        class="log-extra-details-button"
-                        title=${i18nString(UIStrings.logToConsole)}
-                        @click=${() => input.logExtraInteractionDetails(interaction)}
-                      >${i18nString(UIStrings.duration)}</button>
-                    ` : i18nString(UIStrings.duration)}
+                       <button
+                         class="log-extra-details-button"
+                         title=${i18nString(UIStrings.logToConsole)}
+                         @click=${() => input.logExtraInteractionDetails(interaction)}
+                       >${i18nString(UIStrings.duration)}</button>
+                     ` : i18nString(UIStrings.duration)}
                   </div>
                 </div>
-                <div class="phase-table-row" role="row">
+                <div class="subpart-table-row" role="row">
                   <div role="cell">${i18nString(UIStrings.inputDelay)}</div>
-                  <div role="cell">${Math.round(interaction.phases.inputDelay)}</div>
+                  <div role="cell">${Math.round(interaction.subparts.inputDelay)}</div>
                 </div>
-                <div class="phase-table-row" role="row">
+                <div class="subpart-table-row" role="row">
                   <div role="cell">${i18nString(UIStrings.processingDuration)}</div>
-                  <div role="cell">${Math.round(interaction.phases.processingDuration)}</div>
+                  <div role="cell">${Math.round(interaction.subparts.processingDuration)}</div>
                 </div>
-                <div class="phase-table-row" role="row">
+                <div class="subpart-table-row" role="row">
                   <div role="cell">${i18nString(UIStrings.presentationDelay)}</div>
-                  <div role="cell">${Math.round(interaction.phases.presentationDelay)}</div>
+                  <div role="cell">${Math.round(interaction.subparts.presentationDelay)}</div>
                 </div>
               </div>
             </details>

package/front_end/panels/timeline/components/MetricCard.ts

@@ -123,9 +123,9 @@ const UIStrings = {
    */
   recDynamicContentCLS: 'Dynamic content can influence what layout shifts happen.',
   /**
-   * @description Column header for table cell values representing the phase/component/stage/section of a larger duration.
+   * @description Column header for table cell values representing the subpart/component/stage/section of a larger duration.
    */
-  phase: 'Phase',
+  subpart: 'Subpart',
   /**
    * @description Tooltip text for a link that goes to documentation explaining the Largest Contentful Paint (LCP) metric. "LCP" is an acronym and should not be translated.
    */
@@ -145,7 +145,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/MetricCard.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export type PhaseTable = Array<[string, Trace.Types.Timing.Milli, Trace.Types.Timing.Milli?]>;
+export type SubpartTable = Array<[string, Trace.Types.Timing.Milli, Trace.Types.Timing.Milli?]>;
 
 export interface MetricCardData {
   metric: 'LCP'|'CLS'|'INP';
@@ -153,7 +153,7 @@ export interface MetricCardData {
   fieldValue?: number|string;
   histogram?: CrUXManager.MetricResponse['histogram'];
   tooltipContainer?: HTMLElement;
-  phases?: PhaseTable;
+  subparts?: SubpartTable;
   warnings?: string[];
 }
 
@@ -566,30 +566,30 @@ export class MetricCard extends HTMLElement {
     // clang-format on
   }
 
-  #renderPhaseTable(phases: PhaseTable): Lit.LitTemplate {
-    const hasFieldData = phases.every(phase => phase[2] !== undefined);
+  #renderSubpartTable(subparts: SubpartTable): Lit.LitTemplate {
+    const hasFieldData = subparts.every(subpart => subpart[2] !== undefined);
 
     // clang-format off
     return html`
       <hr class="divider">
-      <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>
+      <div class="subpart-table" role="table">
+        <div class="subpart-table-row subpart-table-header-row" role="row">
+          <div role="columnheader" style="grid-column: 1">${i18nString(UIStrings.subpart)}</div>
+          <div role="columnheader" class="subpart-table-value" style="grid-column: 2">${i18nString(UIStrings.localValue)}</div>
           ${hasFieldData ? html`
             <div
               role="columnheader"
-              class="phase-table-value"
+              class="subpart-table-value"
               style="grid-column: 3"
               title=${i18nString(UIStrings.field75thPercentile)}>${i18nString(UIStrings.fieldP75)}</div>
           ` : nothing}
         </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>
+        ${subparts.map(subpart => html`
+          <div class="subpart-table-row" role="row">
+            <div role="cell">${subpart[0]}</div>
+            <div role="cell" class="subpart-table-value">${i18n.TimeUtilities.preciseMillisToString(subpart[1])}</div>
+            ${subpart[2] !== undefined ? html`
+              <div role="cell" class="subpart-table-value">${i18n.TimeUtilities.preciseMillisToString(subpart[2])}</div>
             ` : nothing}
           </div>
         `)}
@@ -659,7 +659,7 @@ export class MetricCard extends HTMLElement {
                   ${this.#renderDetailedCompareString()}
                   <hr class="divider">
                   ${this.#renderFieldHistogram()}
-                  ${localValue && this.#data.phases ? this.#renderPhaseTable(this.#data.phases) : nothing}
+                  ${localValue && this.#data.subparts ? this.#renderSubpartTable(this.#data.subparts) : nothing}
                 </div>
               </div>
             </div>

package/front_end/panels/timeline/components/liveMetricsView.css

@@ -175,7 +175,7 @@
 }
 
 .interaction {
-  --phase-table-margin: 120px;
+  --subpart-table-margin: 120px;
   --details-indicator-width: 18px;
 
   summary {
@@ -200,7 +200,7 @@
 
 .interaction-type {
   font-weight: var(--ref-typeface-weight-medium);
-  width: calc(var(--phase-table-margin) - var(--details-indicator-width));
+  width: calc(var(--subpart-table-margin) - var(--details-indicator-width));
   flex-shrink: 0;
 }
 
@@ -344,18 +344,18 @@ devtools-link {
   }
 }
 
-.phase-table {
+.subpart-table {
   border-top: 1px solid var(--sys-color-divider);
   padding: 7px 4px;
-  margin-left: var(--phase-table-margin);
+  margin-left: var(--subpart-table-margin);
 }
 
-.phase-table-row {
+.subpart-table-row {
   display: flex;
   justify-content: space-between;
 }
 
-.phase-table-header-row {
+.subpart-table-header-row {
   font-weight: var(--ref-typeface-weight-medium);
   margin-bottom: 4px;
 }