chrome-devtools-frontend 1.0.1652307 → 1.0.1654411

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -151,6 +151,32 @@ const UIStrings = {
    * objects retained by event handlers
    */
   objectsRetainedByEventHandlers: 'Objects retained by Event Handlers',
+  /**
+   * @description An option which will filter the heap snapshot to show only
+   * objects attributed to a specific native context (roughly, a JavaScript
+   * realm such as a frame). PH1 is a name identifying the context
+   * (often a URL) which may be empty, PH2 is the id of the native context
+   * object, and PH3 is the context's attributed size.
+   * @example {https://example.com/ } PH1
+   * @example {1234} PH2
+   * @example {1.2 MB} PH3
+   */
+  objectsAttributedToNativeContextS: 'Native context {PH1}@{PH2} ({PH3})',
+  /**
+   * @description An option which will filter the heap snapshot to show only
+   * objects which are shared between multiple native contexts (roughly,
+   * JavaScript realms such as frames). PH1 is their total size.
+   * @example {1.2 MB} PH1
+   */
+  objectsSharedBetweenNativeContextsS: 'Objects shared between native contexts ({PH1})',
+  /**
+   * @description An option which will filter the heap snapshot to show only
+   * objects which could not be attributed to any single native context
+   * (roughly, a JavaScript realm such as a frame). PH1 is their
+   * total size.
+   * @example {1.2 MB} PH1
+   */
+  objectsNotAttributedToNativeContextS: 'Objects not attributed to a native context ({PH1})',
   /**
    * @description Text for the summary view
    */
@@ -266,6 +292,19 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const moduleUIstr_ = i18n.i18n.registerUIStrings('panels/profiler/ModuleUIStrings.ts', ModuleUIStrings.UIStrings);
 const moduleI18nString = i18n.i18n.getLocalizedString.bind(undefined, moduleUIstr_);
+
+interface NamedFilter {
+  uiName: string;
+  filterName: string;
+}
+
+interface FilterOption {
+  uiName: string;
+  profileIndex: number;
+  filterName?: string;
+  disabled?: boolean;
+}
+
 export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayDelegate, UI.SearchableView.Searchable {
   searchResults: number[] = [];
   profile: HeapProfileHeader;
@@ -293,6 +332,8 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
   readonly perspectiveSelect: UI.Toolbar.ToolbarComboBox;
   baseSelect: UI.Toolbar.ToolbarComboBox;
   readonly filterSelect: UI.Toolbar.ToolbarComboBox;
+  #filterOptions: FilterOption[] = [];
+  #nativeContextFilters: NamedFilter[] = [];
   readonly classNameFilter: UI.Toolbar.ToolbarInput;
   readonly selectedSizeText: UI.Toolbar.ToolbarText;
   readonly resetRetainersButton: UI.Toolbar.ToolbarButton;
@@ -556,6 +597,7 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
     const heapSnapshotProxy = await this.profile.loadPromise;
 
     void this.retrieveStatistics(heapSnapshotProxy);
+    void this.updateNativeContextFilters(heapSnapshotProxy);
     if (this.dataGrid) {
       void this.dataGrid.setDataSource(heapSnapshotProxy, 0);
     }
@@ -611,6 +653,52 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
     return statistics;
   }
 
+  async updateNativeContextFilters(heapSnapshotProxy: HeapSnapshotModel.HeapSnapshotProxy.HeapSnapshotProxy):
+      Promise<void> {
+    const sizes = await heapSnapshotProxy.getNativeContextSizes();
+    const filters: NamedFilter[] = [];
+
+    // List the individual native contexts first, sorted by attributed size
+    // (largest first), then the shared and unattributed buckets.
+    const nativeContexts = sizes.nativeContexts.toSorted((a, b) => b.attributedSize - a.attributedSize);
+    for (const nativeContext of nativeContexts) {
+      // Drop the "system / NativeContext" boilerplate (and any "Detached "
+      // marker) so the label shows just the distinguishing part of the name
+      // (e.g. the URL). The remaining name (if any) is followed by the native
+      // context object id, e.g. "Native context https://example.com @1234".
+      let name = nativeContext.nodeName;
+      if (name.startsWith('Detached ')) {
+        name = name.substring('Detached '.length);
+      }
+      if (name.startsWith('system / NativeContext / ')) {
+        name = name.substring('system / NativeContext / '.length);
+      } else if (name.startsWith('system / NativeContext')) {
+        name = name.substring('system / NativeContext'.length);
+      }
+      filters.push({
+        uiName: i18nString(UIStrings.objectsAttributedToNativeContextS, {
+          PH1: name ? `${name} ` : '',
+          PH2: nativeContext.nodeId,
+          PH3: i18n.ByteUtilities.bytesToString(nativeContext.attributedSize),
+        }),
+        filterName: `nativeContext_${nativeContext.nodeIndex}`,
+      });
+    }
+    filters.push({
+      uiName: i18nString(UIStrings.objectsSharedBetweenNativeContextsS,
+                         {PH1: i18n.ByteUtilities.bytesToString(sizes.sharedSize)}),
+      filterName: 'sharedNativeContext',
+    });
+    filters.push({
+      uiName: i18nString(UIStrings.objectsNotAttributedToNativeContextS,
+                         {PH1: i18n.ByteUtilities.bytesToString(sizes.noAttributionSize)}),
+      filterName: 'noNativeContext',
+    });
+
+    this.#nativeContextFilters = filters;
+    this.updateFilterOptions();
+  }
+
   onIdsRangeChanged(event: Common.EventTarget.EventTargetEvent<IdsRangeChangedEvent>): void {
     const {minId, maxId} = event.data;
     this.selectedSizeText.setText(
@@ -775,7 +863,7 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
     this.performSearch(this.currentSearch, false);
   }
 
-  static readonly ALWAYS_AVAILABLE_FILTERS: ReadonlyArray<{uiName: string, filterName: string}> = [
+  static readonly ALWAYS_AVAILABLE_FILTERS: readonly NamedFilter[] = [
     {uiName: i18nString(UIStrings.duplicatedStrings), filterName: 'duplicatedStrings'},
     {uiName: i18nString(UIStrings.objectsRetainedByDetachedDomNodes), filterName: 'objectsRetainedByDetachedDomNodes'},
     {uiName: i18nString(UIStrings.objectsRetainedByContexts), filterName: 'objectsRetainedByContexts'},
@@ -784,16 +872,9 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
   ];
 
   changeFilter(): void {
-    let selectedIndex = this.filterSelect.selectedIndex();
-    let filterName = undefined;
-    const indexOfFirstAlwaysAvailableFilter =
-        this.filterSelect.size() - HeapSnapshotView.ALWAYS_AVAILABLE_FILTERS.length;
-    if (selectedIndex >= indexOfFirstAlwaysAvailableFilter) {
-      filterName =
-          HeapSnapshotView.ALWAYS_AVAILABLE_FILTERS[selectedIndex - indexOfFirstAlwaysAvailableFilter].filterName;
-      selectedIndex = 0;
-    }
-    const profileIndex = selectedIndex - 1;
+    const selectedOption = this.#filterOptions[this.filterSelect.selectedIndex()];
+    const profileIndex = selectedOption?.profileIndex ?? -1;
+    const filterName = selectedOption?.filterName;
     if (!this.dataGrid) {
       return;
     }
@@ -1024,10 +1105,20 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
   updateFilterOptions(): void {
     const list = this.profiles();
     const selectedIndex = this.filterSelect.selectedIndex();
-    const originalSize = this.filterSelect.size();
+    const selectedOption = this.#filterOptions[selectedIndex];
+    const filterOptions: FilterOption[] = [];
+    const createOption = (filterOption: FilterOption): HTMLOptionElement => {
+      filterOptions.push(filterOption);
+      const option = this.filterSelect.createOption(filterOption.uiName);
+      option.disabled = Boolean(filterOption.disabled);
+      return option;
+    };
+    const createSeparator = (): HTMLOptionElement => {
+      return createOption({uiName: '\u2014'.repeat(18), profileIndex: -1, disabled: true});
+    };
 
     this.filterSelect.removeOptions();
-    this.filterSelect.createOption(i18nString(UIStrings.allObjects));
+    createOption({uiName: i18nString(UIStrings.allObjects), profileIndex: -1});
     for (let i = 0; i < list.length; ++i) {
       let title;
       if (!i) {
@@ -1035,34 +1126,31 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
       } else {
         title = i18nString(UIStrings.objectsAllocatedBetweenSAndS, {PH1: list[i - 1].title, PH2: list[i].title});
       }
-      this.filterSelect.createOption(title);
+      createOption({uiName: title, profileIndex: i});
     }
 
-    // Create a dividing line using em dashes.
-    const dividerIndex = this.filterSelect.size();
-    const divider = this.filterSelect.createOption('\u2014'.repeat(18));
-    (divider).disabled = true;
+    createSeparator();
 
     for (const filter of HeapSnapshotView.ALWAYS_AVAILABLE_FILTERS) {
-      this.filterSelect.createOption(filter.uiName);
+      createOption({uiName: filter.uiName, profileIndex: -1, filterName: filter.filterName});
     }
 
-    const newSize = this.filterSelect.size();
-
-    if (selectedIndex > -1) {
-      const distanceFromEnd = originalSize - selectedIndex;
-      if (distanceFromEnd <= HeapSnapshotView.ALWAYS_AVAILABLE_FILTERS.length) {
-        // If one of the always-available filters was selected, then select the
-        // same filter again even though its index may have changed.
-        this.filterSelect.setSelectedIndex(newSize - distanceFromEnd);
-      } else if (selectedIndex >= dividerIndex) {
-        // If the select list is now shorter than it was, such that we can't
-        // keep the index unchanged, set it to -1, which causes it to be blank.
-        this.filterSelect.setSelectedIndex(-1);
-      } else {
-        this.filterSelect.setSelectedIndex(selectedIndex);
+    if (this.#nativeContextFilters.length > 0) {
+      createSeparator();
+      for (const filter of this.#nativeContextFilters) {
+        createOption({uiName: filter.uiName, profileIndex: -1, filterName: filter.filterName});
       }
     }
+
+    this.#filterOptions = filterOptions;
+
+    if (selectedOption) {
+      const newSelectedIndex = this.#filterOptions.findIndex(option => {
+        return !option.disabled && option.profileIndex === selectedOption.profileIndex &&
+            option.filterName === selectedOption.filterName;
+      });
+      this.filterSelect.setSelectedIndex(newSelectedIndex);
+    }
   }
 
   updateControls(): void {

package/front_end/panels/profiler/ModuleUIStrings.ts

@@ -53,6 +53,10 @@ export const UIStrings = {
    * @description Text to indicate the status of a heap snapshot in the Performance Pane
    */
   buildingLocations: 'Building locations…',
+  /**
+   * @description Text to indicate the status of a heap snapshot in the Performance Pane
+   */
+  calculatingNativeContextAttribution: 'Calculating native context attribution…',
   /**
    * @description Text to indicate the status of a heap snapshot in the Performance Pane
    */

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

@@ -2149,14 +2149,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
@@ -3206,3 +3213,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

@@ -139,10 +139,11 @@ export class CPUThrottlingSelector extends UI.Widget.Widget {
   #groups: CPUThrottlingGroup[] = [];
   #calibratedThrottlingSetting: Common.Settings.Setting<SDK.CPUThrottlingManager.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 = this.#cpuThrottlingManager.cpuThrottlingOption();
     this.#calibratedThrottlingSetting =
         Common.Settings.Settings.instance().createSetting<SDK.CPUThrottlingManager.CalibratedCPUThrottling>(
             'calibrated-cpu-throttling', {}, Common.Settings.SettingStorageType.GLOBAL);
@@ -157,8 +158,8 @@ export class CPUThrottlingSelector extends UI.Widget.Widget {
 
   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 +167,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 = this.#cpuThrottlingManager.cpuThrottlingOption();
 
     this.requestUpdate();
   }

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>