chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

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

@@ -12,7 +12,6 @@ import './MetricCard.js';
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
-import type * as SDK from '../../../core/sdk/sdk.js';
 import * as CrUXManager from '../../../models/crux-manager/crux-manager.js';
 import * as EmulationModel from '../../../models/emulation/emulation.js';
 import * as LiveMetrics from '../../../models/live-metrics/live-metrics.js';
@@ -20,33 +19,30 @@ import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import type * as Menus from '../../../ui/components/menus/menus.js';
-import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import type * as Settings from '../../../ui/components/settings/settings.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as MobileThrottling from '../../mobile_throttling/mobile_throttling.js';
+import {getThrottlingRecommendations, md} from '../utils/Helpers.js';
 
 import liveMetricsViewStyles from './liveMetricsView.css.js';
 import type {MetricCardData} from './MetricCard.js';
 import metricValueStyles from './metricValueStyles.css.js';
 import {CLS_THRESHOLDS, INP_THRESHOLDS, renderMetricValue} from './Utils.js';
 
-const {html, nothing, Directives} = LitHtml;
-const {until} = Directives;
+const {html, nothing} = LitHtml;
 
 type DeviceOption = CrUXManager.DeviceScope|'AUTO';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 const DEVICE_OPTION_LIST: DeviceOption[] = ['AUTO', ...CrUXManager.DEVICE_SCOPE_LIST];
 
-const RTT_COMPARISON_THRESHOLD = 200;
 const RTT_MINIMUM = 60;
 
 const UIStrings = {
   /**
-   * @description Title of a view that shows performance metrics from the local environment and field metrics collected from real users in the field.
+   * @description Title of a view that shows performance metrics from the local environment and field metrics collected from real users. "field metrics" should be interpreted as "real user metrics".
    */
   localAndFieldMetrics: 'Local and field metrics',
   /**
@@ -70,7 +66,7 @@ const UIStrings = {
    */
   nextSteps: 'Next steps',
   /**
-   * @description Title of a section that shows options for how real user data in the field should be fetched.
+   * @description Title of a section that shows options for how real user data in the field should be fetched. This should be interpreted as "Real user data".
    */
   fieldData: 'Field data',
   /**
@@ -78,7 +74,7 @@ const UIStrings = {
    */
   environmentSettings: 'Environment settings',
   /**
-   * @description Label for an select box that selects which device type field data be shown for (e.g. desktop/mobile/all devices/etc).
+   * @description Label for an select box that selects which device type field data be shown for (e.g. desktop/mobile/all devices/etc). "field data" should be interpreted as "real user data".
    * @example {Mobile} PH1
    */
   showFieldDataForDevice: 'Show field data for device type: {PH1}',
@@ -92,7 +88,7 @@ const UIStrings = {
    */
   network: 'Network: {PH1}',
   /**
-   * @description Label for an select box that selects which device type field data be shown for (e.g. desktop/mobile/all devices/etc).
+   * @description Label for an select box that selects which device type real user data should be shown for (e.g. desktop/mobile/all devices/etc).
    * @example {Mobile} PH1
    */
   device: 'Device: {PH1}',
@@ -146,7 +142,7 @@ const UIStrings = {
    */
   originOptionWithKey: 'Origin: {PH1}',
   /**
-   * @description Label for an combo-box that indicates if field data should be taken from the page's URL or it's origin/domain.
+   * @description Label for an combo-box that indicates if field data should be taken from the page's URL or it's origin/domain. "field data" should be interpreted as "real user data".
    * @example {Origin: https://example.com} PH1
    */
   showFieldDataForPage: 'Show field data for {PH1}',
@@ -166,14 +162,10 @@ const UIStrings = {
    */
   percentDevices: '{PH1}% mobile, {PH2}% desktop',
   /**
-   * @description Text block explaining how to simulate different mobile and desktop devices. The placeholder at the end will be a link with the text "simulate different devices" translated separately.
-   * @example {simulate different devices} PH1
-   */
-  useDeviceToolbar: 'Use the device toolbar to {PH1}.',
-  /**
-   * @description Text for a link that is inserted inside a larger text block that explains how to simulate different mobile and desktop devices.
+   * @description Text block explaining how to simulate different mobile and desktop devices.
    */
-  simulateDifferentDevices: 'simulate different devices',
+  useDeviceToolbar:
+      'Use the [device toolbar](https://developer.chrome.com/docs/devtools/device-mode) and configure throttling to simulate real user environments and identify more performance issues.',
   /**
    * @description Text label for a checkbox that controls if the network cache is disabled.
    */
@@ -215,11 +207,11 @@ const UIStrings = {
    */
   seeHowYourLocalMetricsCompare: 'See how your local metrics compare to real user data in the {PH1}.',
   /**
-   * @description Text for a link that goes to more documentation about local and field data. "Local" refers to performance metrics measured in the developers local environment. "field data" is data measured by real users in the field.
+   * @description Text for a link that goes to more documentation about local and field data. "Local" refers to performance metrics measured in the developers local environment. "field data" should be interpreted as "real user data".
    */
   localFieldLearnMoreLink: 'Learn more about local and field data',
   /**
-   * @description Tooltip text for a link that goes to documentation explaining the difference between local and field metrics. "Local metrics" are performance metrics measured in the developers local environment. "field data" is data measured by real users in the field.
+   * @description Tooltip text for a link that goes to documentation explaining the difference between local and field metrics. "Local metrics" are performance metrics measured in the developers local environment. "field data" should be interpreted as "real user data".
    */
   localFieldLearnMoreTooltip:
       'Local metrics are captured from the current page using your network connection and device. Field data is measured by real users using many different network connections and devices.',
@@ -232,10 +224,6 @@ const UIStrings = {
    * @description Tooltip for a button that will remove everything from the currently selected log.
    */
   clearCurrentLog: 'Clear the current log',
-  /**
-   * @description Title for a section that contains more information about real user environments. This message is meant to prompt the user to understand the conditions experienced by real users.
-   */
-  realUserEnvironments: 'Real user environments',
   /**
    * @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.
    */
@@ -288,6 +276,14 @@ const UIStrings = {
    * @description Tooltip text for a button that will open the Chrome DevTools console to and log additional details about a user interaction.
    */
   logToConsole: 'Log additional interaction data to the console',
+  /**
+   * @description Title of a view that can be used to analyze the performance of a Node process as a timeline. "Node" is a product name and should not be translated.
+   */
+  nodePerformanceTimeline: 'Node performance',
+  /**
+   * @description Description of a view that can be used to analyze the performance of a Node process as a timeline. "Node" is a product name and should not be translated.
+   */
+  nodeClickToRecord: 'Record a performance timeline of the connected Node process.',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/LiveMetricsView.ts', UIStrings);
@@ -296,16 +292,15 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
   readonly #shadow = this.attachShadow({mode: 'open'});
 
+  #isNode: boolean = false;
+
   #lcpValue?: LiveMetrics.LCPValue;
   #clsValue?: LiveMetrics.CLSValue;
   #inpValue?: LiveMetrics.INPValue;
   #interactions: LiveMetrics.InteractionMap = new Map();
   #layoutShifts: LiveMetrics.LayoutShift[] = [];
 
-  #cruxPageResult?: CrUXManager.PageResult;
-
-  #fieldDeviceOption: DeviceOption = 'AUTO';
-  #fieldPageScope: CrUXManager.PageScope = 'url';
+  #cruxManager = CrUXManager.CrUXManager.instance();
 
   #toggleRecordAction: UI.ActionRegistration.Action;
   #recordReloadAction: UI.ActionRegistration.Action;
@@ -315,6 +310,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
   #interactionsListEl?: HTMLElement;
   #layoutShiftsListEl?: HTMLElement;
   #listIsScrolling = false;
+  #deviceModeModel = EmulationModel.DeviceModeModel.DeviceModeModel.tryInstance();
 
   constructor() {
     super();
@@ -323,6 +319,11 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     this.#recordReloadAction = UI.ActionRegistry.ActionRegistry.instance().getAction('timeline.record-reload');
   }
 
+  set isNode(isNode: boolean) {
+    this.#isNode = isNode;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+  }
+
   #onMetricStatus(event: {data: LiveMetrics.StatusEvent}): void {
     this.#lcpValue = event.data.lcp;
     this.#clsValue = event.data.cls;
@@ -371,8 +372,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     });
   }
 
-  #onFieldDataChanged(event: {data: CrUXManager.PageResult|undefined}): void {
-    this.#cruxPageResult = event.data;
+  #onFieldDataChanged(): void {
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
   }
 
@@ -381,19 +381,10 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
   }
 
   async #refreshFieldDataForCurrentPage(): Promise<void> {
-    this.#cruxPageResult = await CrUXManager.CrUXManager.instance().getFieldDataForCurrentPage();
+    await this.#cruxManager.refresh();
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
   }
 
-  #getSelectedFieldResponse(): CrUXManager.CrUXResponse|null|undefined {
-    const deviceScope = this.#fieldDeviceOption === 'AUTO' ? this.#getAutoDeviceScope() : this.#fieldDeviceOption;
-    return this.#cruxPageResult?.[`${this.#fieldPageScope}-${deviceScope}`];
-  }
-
-  #getFieldMetricData(fieldMetric: CrUXManager.StandardMetricNames): CrUXManager.MetricResponse|undefined {
-    return this.#getSelectedFieldResponse()?.record.metrics[fieldMetric];
-  }
-
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [liveMetricsViewStyles, metricValueStyles];
 
@@ -403,8 +394,8 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     const cruxManager = CrUXManager.CrUXManager.instance();
     cruxManager.addEventListener(CrUXManager.Events.FIELD_DATA_CHANGED, this.#onFieldDataChanged, this);
 
-    const emulationModel = this.#deviceModeModel();
-    emulationModel?.addEventListener(EmulationModel.DeviceModeModel.Events.UPDATED, this.#onEmulationChanged, this);
+    this.#deviceModeModel?.addEventListener(
+        EmulationModel.DeviceModeModel.Events.UPDATED, this.#onEmulationChanged, this);
 
     if (cruxManager.getConfigSetting().get().enabled) {
       void this.#refreshFieldDataForCurrentPage();
@@ -418,33 +409,19 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
   }
 
-  #deviceModeModel(): EmulationModel.DeviceModeModel.DeviceModeModel|null {
-    // This is wrapped in a try/catch because in some DevTools entry points
-    // (such as worker_app.ts) the Emulation panel is not included and as such
-    // the below code fails; it tries to instantiate the model which requires
-    // reading the value of a setting which has not been registered.
-    // In this case, we fallback to 'ALL'. See crbug.com/361515458 for an
-    // example bug that this resolves.
-    try {
-      return EmulationModel.DeviceModeModel.DeviceModeModel.instance();
-    } catch {
-      return null;
-    }
-  }
-
   disconnectedCallback(): void {
     LiveMetrics.LiveMetrics.instance().removeEventListener(LiveMetrics.Events.STATUS, this.#onMetricStatus, this);
 
     const cruxManager = CrUXManager.CrUXManager.instance();
     cruxManager.removeEventListener(CrUXManager.Events.FIELD_DATA_CHANGED, this.#onFieldDataChanged, this);
 
-    this.#deviceModeModel()?.removeEventListener(
+    this.#deviceModeModel?.removeEventListener(
         EmulationModel.DeviceModeModel.Events.UPDATED, this.#onEmulationChanged, this);
   }
 
   #renderLcpCard(): LitHtml.LitTemplate {
-    const fieldData = this.#getFieldMetricData('largest_contentful_paint');
-    const node = this.#lcpValue?.node;
+    const fieldData = this.#cruxManager.getSelectedFieldMetricData('largest_contentful_paint');
+    const nodeLink = this.#lcpValue?.nodeRef?.link;
     const phases = this.#lcpValue?.phases;
 
     // clang-format off
@@ -455,6 +432,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         fieldValue: fieldData?.percentiles?.p75,
         histogram: fieldData?.histogram,
         tooltipContainer: this.#tooltipContainerEl,
+        warnings: this.#lcpValue?.warnings,
         phases: phases && [
           [i18nString(UIStrings.timeToFirstByte), phases.timeToFirstByte],
           [i18nString(UIStrings.resourceLoadDelay), phases.resourceLoadDelay],
@@ -462,10 +440,10 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
           [i18nString(UIStrings.elementRenderDelay), phases.elementRenderDelay],
         ],
       } as MetricCardData}>
-        ${node ? html`
+        ${nodeLink ? html`
             <div class="related-info" slot="extra-info">
               <span class="related-info-label">${i18nString(UIStrings.lcpElement)}</span>
-              <span class="related-info-link">${until(Common.Linkifier.Linkifier.linkify(node))}</span>
+              <span class="related-info-link">${nodeLink}</span>
             </div>
           `
           : nothing}
@@ -475,7 +453,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
   }
 
   #renderClsCard(): LitHtml.LitTemplate {
-    const fieldData = this.#getFieldMetricData('cumulative_layout_shift');
+    const fieldData = this.#cruxManager.getSelectedFieldMetricData('cumulative_layout_shift');
 
     const clusterIds = new Set(this.#clsValue?.clusterShiftIds || []);
     const clusterIsVisible =
@@ -489,6 +467,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         fieldValue: fieldData?.percentiles?.p75,
         histogram: fieldData?.histogram,
         tooltipContainer: this.#tooltipContainerEl,
+        warnings: this.#clsValue?.warnings,
       } as MetricCardData}>
         ${clusterIsVisible ? html`
           <div class="related-info" slot="extra-info">
@@ -507,7 +486,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
   }
 
   #renderInpCard(): LitHtml.LitTemplate {
-    const fieldData = this.#getFieldMetricData('interaction_to_next_paint');
+    const fieldData = this.#cruxManager.getSelectedFieldMetricData('interaction_to_next_paint');
     const phases = this.#inpValue?.phases;
     const interaction = this.#inpValue && this.#interactions.get(this.#inpValue.interactionId);
 
@@ -519,6 +498,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         fieldValue: fieldData?.percentiles?.p75,
         histogram: fieldData?.histogram,
         tooltipContainer: this.#tooltipContainerEl,
+        warnings: this.#inpValue?.warnings,
         phases: phases && [
           [i18nString(UIStrings.inputDelay), phases.inputDelay],
           [i18nString(UIStrings.processingDuration), phases.processingDuration],
@@ -564,8 +544,8 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     // clang-format on
   }
 
-  #getNetworkRec(): string|null {
-    const response = this.#getFieldMetricData('round_trip_time');
+  #getNetworkRecTitle(): string|null {
+    const response = this.#cruxManager.getSelectedFieldMetricData('round_trip_time');
     if (!response?.percentiles) {
       return null;
     }
@@ -579,39 +559,19 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
       return i18nString(UIStrings.tryDisablingThrottling);
     }
 
-    let closestPreset: SDK.NetworkManager.Conditions|null = null;
-    let smallestDiff = Infinity;
-    for (const preset of MobileThrottling.ThrottlingPresets.ThrottlingPresets.networkPresets) {
-      const {targetLatency} = preset;
-      if (!targetLatency) {
-        continue;
-      }
-
-      const diff = Math.abs(targetLatency - rtt);
-      if (diff > RTT_COMPARISON_THRESHOLD) {
-        continue;
-      }
-
-      if (smallestDiff < diff) {
-        continue;
-      }
-
-      closestPreset = preset;
-      smallestDiff = diff;
-    }
-
-    if (!closestPreset) {
+    const conditions = MobileThrottling.ThrottlingPresets.ThrottlingPresets.getRecommendedNetworkPreset(rtt);
+    if (!conditions) {
       return null;
     }
 
-    const title = typeof closestPreset.title === 'function' ? closestPreset.title() : closestPreset.title;
-
+    const title = typeof conditions.title === 'function' ? conditions.title() : conditions.title;
     return i18nString(UIStrings.tryUsingThrottling, {PH1: title});
   }
 
   #getDeviceRec(): string|null {
     // `form_factors` metric is only populated if CrUX data is fetched for all devices.
-    const fractions = this.#cruxPageResult?.[`${this.#fieldPageScope}-ALL`]?.record.metrics.form_factors?.fractions;
+    const fractions = this.#cruxManager.getFieldResponse(this.#cruxManager.fieldPageScope, 'ALL')
+                          ?.record.metrics.form_factors?.fractions;
     if (!fractions) {
       return null;
     }
@@ -623,11 +583,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
   }
 
   #renderRecordingSettings(): LitHtml.LitTemplate {
-    const fieldEnabled = CrUXManager.CrUXManager.instance().getConfigSetting().get().enabled;
-
-    const deviceLinkEl = UI.XLink.XLink.create(
-        'https://developer.chrome.com/docs/devtools/device-mode', i18nString(UIStrings.simulateDifferentDevices));
-    const deviceMessage = i18n.i18n.getFormatLocalizedString(str_, UIStrings.useDeviceToolbar, {PH1: deviceLinkEl});
+    const fieldEnabled = this.#cruxManager.getConfigSetting().get().enabled;
 
     const deviceRecEl = document.createElement('span');
     deviceRecEl.classList.add('environment-rec');
@@ -635,24 +591,25 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
 
     const networkRecEl = document.createElement('span');
     networkRecEl.classList.add('environment-rec');
-    networkRecEl.textContent = this.#getNetworkRec() || i18nString(UIStrings.notEnoughData);
+    networkRecEl.textContent = this.#getNetworkRecTitle() || i18nString(UIStrings.notEnoughData);
+
+    const recs = getThrottlingRecommendations();
 
     // clang-format off
     return html`
       <h3 class="card-title">${i18nString(UIStrings.environmentSettings)}</h3>
-      <div class="device-toolbar-description">${deviceMessage}</div>
+      <div class="device-toolbar-description">${md(i18nString(UIStrings.useDeviceToolbar))}</div>
       ${fieldEnabled ? html`
-        <div class="environment-recs-title">${i18nString(UIStrings.realUserEnvironments)}</div>
         <ul class="environment-recs-list">
           <li>${i18n.i18n.getFormatLocalizedString(str_, UIStrings.device, {PH1: deviceRecEl})}</li>
           <li>${i18n.i18n.getFormatLocalizedString(str_, UIStrings.network, {PH1: networkRecEl})}</li>
         </ul>
       ` : nothing}
       <div class="environment-option">
-        <devtools-cpu-throttling-selector></devtools-cpu-throttling-selector>
+        <devtools-cpu-throttling-selector .recommendedRate=${recs.cpuRate}></devtools-cpu-throttling-selector>
       </div>
       <div class="environment-option">
-        <devtools-network-throttling-selector></devtools-network-throttling-selector>
+        <devtools-network-throttling-selector .recommendedConditions=${recs.networkConditions}></devtools-network-throttling-selector>
       </div>
       <div class="environment-option">
         <setting-checkbox
@@ -668,7 +625,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
   }
 
   #getPageScopeLabel(pageScope: CrUXManager.PageScope): string {
-    const key = this.#cruxPageResult?.[`${pageScope}-ALL`]?.record.key[pageScope];
+    const key = this.#cruxManager.pageResult?.[`${pageScope}-ALL`]?.record.key[pageScope];
     if (key) {
       return pageScope === 'url' ? i18nString(UIStrings.urlOptionWithKey, {PH1: key}) :
                                    i18nString(UIStrings.originOptionWithKey, {PH1: key});
@@ -680,26 +637,26 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
 
   #onPageScopeMenuItemSelected(event: Menus.SelectMenu.SelectMenuItemSelectedEvent): void {
     if (event.itemValue === 'url') {
-      this.#fieldPageScope = 'url';
+      this.#cruxManager.fieldPageScope = 'url';
     } else {
-      this.#fieldPageScope = 'origin';
+      this.#cruxManager.fieldPageScope = 'origin';
     }
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
   }
 
   #renderPageScopeSetting(): LitHtml.LitTemplate {
-    if (!CrUXManager.CrUXManager.instance().getConfigSetting().get().enabled) {
+    if (!this.#cruxManager.getConfigSetting().get().enabled) {
       return LitHtml.nothing;
     }
 
     const urlLabel = this.#getPageScopeLabel('url');
     const originLabel = this.#getPageScopeLabel('origin');
 
-    const buttonTitle = this.#fieldPageScope === 'url' ? urlLabel : originLabel;
+    const buttonTitle = this.#cruxManager.fieldPageScope === 'url' ? urlLabel : originLabel;
     const accessibleTitle = i18nString(UIStrings.showFieldDataForPage, {PH1: buttonTitle});
 
     // If there is no data at all we should force users to switch pages or reconfigure CrUX.
-    const shouldDisable = !this.#cruxPageResult?.['url-ALL'] && !this.#cruxPageResult?.['origin-ALL'];
+    const shouldDisable = !this.#cruxManager.pageResult?.['url-ALL'] && !this.#cruxManager.pageResult?.['origin-ALL'];
 
     return html`
       <devtools-select-menu
@@ -710,20 +667,19 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         .showArrow=${true}
         .sideButton=${false}
         .showSelectedItem=${true}
-        .showConnector=${false}
         .buttonTitle=${buttonTitle}
         .disabled=${shouldDisable}
         title=${accessibleTitle}
       >
         <devtools-menu-item
           .value=${'url'}
-          .selected=${this.#fieldPageScope === 'url'}
+          .selected=${this.#cruxManager.fieldPageScope === 'url'}
         >
           ${urlLabel}
         </devtools-menu-item>
         <devtools-menu-item
           .value=${'origin'}
-          .selected=${this.#fieldPageScope === 'origin'}
+          .selected=${this.#cruxManager.fieldPageScope === 'origin'}
         >
           ${originLabel}
         </devtools-menu-item>
@@ -744,38 +700,21 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     }
   }
 
-  #getAutoDeviceScope(): CrUXManager.DeviceScope {
-    const emulationModel = this.#deviceModeModel();
-
-    if (emulationModel === null) {
-      return 'ALL';
-    }
-
-    if (emulationModel.isMobile()) {
-      if (this.#cruxPageResult?.[`${this.#fieldPageScope}-PHONE`]) {
-        return 'PHONE';
-      }
-
-      return 'ALL';
-    }
-
-    if (this.#cruxPageResult?.[`${this.#fieldPageScope}-DESKTOP`]) {
-      return 'DESKTOP';
-    }
-
-    return 'ALL';
-  }
-
   #getLabelForDeviceOption(deviceOption: DeviceOption): string {
-    const deviceScope = deviceOption === 'AUTO' ? this.#getAutoDeviceScope() : deviceOption;
-    const deviceScopeLabel = this.#getDeviceScopeDisplayName(deviceScope);
-    const baseLabel = deviceOption === 'AUTO' ? i18nString(UIStrings.auto, {PH1: deviceScopeLabel}) : deviceScopeLabel;
+    let baseLabel;
+    if (deviceOption === 'AUTO') {
+      const deviceScope = this.#cruxManager.getSelectedDeviceScope();
+      const deviceScopeLabel = this.#getDeviceScopeDisplayName(deviceScope);
+      baseLabel = i18nString(UIStrings.auto, {PH1: deviceScopeLabel});
+    } else {
+      baseLabel = this.#getDeviceScopeDisplayName(deviceOption);
+    }
 
-    if (!this.#cruxPageResult) {
+    if (!this.#cruxManager.pageResult) {
       return i18nString(UIStrings.loadingOption, {PH1: baseLabel});
     }
 
-    const result = this.#cruxPageResult[`${this.#fieldPageScope}-${deviceScope}`];
+    const result = this.#cruxManager.getSelectedFieldResponse();
     if (!result) {
       return i18nString(UIStrings.needsDataOption, {PH1: baseLabel});
     }
@@ -784,19 +723,20 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
   }
 
   #onDeviceOptionMenuItemSelected(event: Menus.SelectMenu.SelectMenuItemSelectedEvent): void {
-    this.#fieldDeviceOption = event.itemValue as DeviceOption;
+    this.#cruxManager.fieldDeviceOption = event.itemValue as DeviceOption;
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
   }
 
   #renderDeviceScopeSetting(): LitHtml.LitTemplate {
-    if (!CrUXManager.CrUXManager.instance().getConfigSetting().get().enabled) {
+    if (!this.#cruxManager.getConfigSetting().get().enabled) {
       return LitHtml.nothing;
     }
+
     // If there is no data at all we should force users to try adjusting the page scope
     // before coming back to this option.
-    const shouldDisable = !this.#cruxPageResult?.[`${this.#fieldPageScope}-ALL`];
+    const shouldDisable = !this.#cruxManager.getFieldResponse(this.#cruxManager.fieldPageScope, 'ALL');
 
-    const currentDeviceLabel = this.#getLabelForDeviceOption(this.#fieldDeviceOption);
+    const currentDeviceLabel = this.#getLabelForDeviceOption(this.#cruxManager.fieldDeviceOption);
 
     // clang-format off
     return html`
@@ -808,7 +748,6 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         .showArrow=${true}
         .sideButton=${false}
         .showSelectedItem=${true}
-        .showConnector=${false}
         .buttonTitle=${i18nString(UIStrings.device, {PH1: currentDeviceLabel})}
         .disabled=${shouldDisable}
         title=${i18nString(UIStrings.showFieldDataForDevice, {PH1: currentDeviceLabel})}
@@ -817,7 +756,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
           return html`
             <devtools-menu-item
               .value=${deviceOption}
-              .selected=${this.#fieldDeviceOption === deviceOption}
+              .selected=${this.#cruxManager.fieldDeviceOption === deviceOption}
             >
               ${this.#getLabelForDeviceOption(deviceOption)}
             </devtools-menu-item>
@@ -829,7 +768,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
   }
 
   #getCollectionPeriodRange(): string|null {
-    const selectedResponse = this.#getSelectedFieldResponse();
+    const selectedResponse = this.#cruxManager.getSelectedFieldResponse();
     if (!selectedResponse) {
       return null;
     }
@@ -872,13 +811,20 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
       PH1: dateEl,
     });
 
+    const warnings = this.#cruxManager.pageResult?.warnings || [];
+
     return html`
-      <div class="field-data-message">${message}</div>
+      <div class="field-data-message">
+        <div>${message}</div>
+        ${warnings.map(warning => html`
+          <div class="field-data-warning">${warning}</div>
+        `)}
+      </div>
     `;
   }
 
   #renderFieldDataMessage(): LitHtml.LitTemplate {
-    if (CrUXManager.CrUXManager.instance().getConfigSetting().get().enabled) {
+    if (this.#cruxManager.getConfigSetting().get().enabled) {
       return this.#renderCollectionPeriod();
     }
 
@@ -919,7 +865,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
       return;
     }
 
-    await coordinator.write(() => {
+    await RenderCoordinator.write(() => {
       interactionEl.scrollIntoView({
         block: 'center',
       });
@@ -970,8 +916,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
                       html`<span class="interaction-inp-chip" title=${i18nString(UIStrings.inpInteraction)}>INP</span>`
                     : nothing}
                   </span>
-                  <span class="interaction-node">${
-                    interaction.node && until(Common.Linkifier.Linkifier.linkify(interaction.node))}</span>
+                  <span class="interaction-node">${interaction.nodeRef?.link}</span>
                   ${isP98Excluded ? html`<devtools-icon
                     class="interaction-info"
                     name="info"
@@ -1036,7 +981,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
       return;
     }
 
-    await coordinator.write(() => {
+    await RenderCoordinator.write(() => {
       layoutShiftEls[0].scrollIntoView({
         block: 'start',
       });
@@ -1075,8 +1020,8 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
             <li id=${layoutShift.uniqueLayoutShiftId} class="log-item layout-shift" tabindex="-1">
               <div class="layout-shift-score">Layout shift score: ${metricValue}</div>
               <div class="layout-shift-nodes">
-                ${layoutShift.affectedNodes.map(({node}) => html`
-                  <div class="layout-shift-node">${until(Common.Linkifier.Linkifier.linkify(node))}</div>
+                ${layoutShift.affectedNodeRefs.map(({link}) => html`
+                  <div class="layout-shift-node">${link}</div>
                 `)}
               </div>
             </li>
@@ -1087,8 +1032,25 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     // clang-format on
   }
 
+  #renderNodeView(): LitHtml.LitTemplate {
+    return html`
+      <div class="node-view">
+        <main>
+          <h2 class="section-title">${i18nString(UIStrings.nodePerformanceTimeline)}</h2>
+          <div class="node-description">${i18nString(UIStrings.nodeClickToRecord)}</div>
+          <div class="record-action-card">${this.#renderRecordAction(this.#toggleRecordAction)}</div>
+        </main>
+      </div>
+    `;
+  }
+
   #render = (): void => {
-    const fieldEnabled = CrUXManager.CrUXManager.instance().getConfigSetting().get().enabled;
+    if (this.#isNode) {
+      LitHtml.render(this.#renderNodeView(), this.#shadow, {host: this});
+      return;
+    }
+
+    const fieldEnabled = this.#cruxManager.getConfigSetting().get().enabled;
     const liveMetricsTitle =
         fieldEnabled ? i18nString(UIStrings.localAndFieldMetrics) : i18nString(UIStrings.localMetrics);