chrome-devtools-frontend 1.0.1603822 → 1.0.1605219

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

@@ -21,8 +21,6 @@ import * as EmulationModel from '../../../models/emulation/emulation.js';
 import * as LiveMetrics from '../../../models/live-metrics/live-metrics.js';
 import * as Trace from '../../../models/trace/trace.js';
 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 RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import type * as Settings from '../../../ui/components/settings/settings.js';
@@ -40,7 +38,7 @@ import metricValueStyles from './metricValueStyles.css.js';
 import {CLS_THRESHOLDS, INP_THRESHOLDS, renderMetricValue} from './Utils.js';
 
 const {html, nothing} = Lit;
-const {widget} = UI.Widget;
+const {widget, widgetRef} = UI.Widget;
 
 type DeviceOption = CrUXManager.DeviceScope|'AUTO';
 
@@ -305,933 +303,979 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/LiveMetricsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-
-  isNode = Root.Runtime.Runtime.isNode();
-
-  #lcpValue?: LiveMetrics.LcpValue;
-  #clsValue?: LiveMetrics.ClsValue;
-  #inpValue?: LiveMetrics.InpValue;
-  #interactions: LiveMetrics.InteractionMap = new Map();
-  #layoutShifts: LiveMetrics.LayoutShift[] = [];
-
-  #cruxManager = CrUXManager.CrUXManager.instance();
+export interface ViewInput {
+  isNode: boolean;
+  lcpValue?: LiveMetrics.LcpValue;
+  clsValue?: LiveMetrics.ClsValue;
+  inpValue?: LiveMetrics.InpValue;
+  interactions: LiveMetrics.InteractionMap;
+  layoutShifts: LiveMetrics.LayoutShift[];
+  toggleRecordAction: UI.ActionRegistration.Action;
+  recordReloadAction: UI.ActionRegistration.Action;
+  cruxManager: CrUXManager.CrUXManager;
+  handlePageScopeSelected: (event: Menus.SelectMenu.SelectMenuItemSelectedEvent) => void;
+  handleDeviceOptionSelected: (event: Menus.SelectMenu.SelectMenuItemSelectedEvent) => void;
+  revealLayoutShiftCluster: (clusterIds: Set<LiveMetrics.LayoutShift['uniqueLayoutShiftId']>) => void;
+  revealInteraction: (interaction: LiveMetrics.Interaction) => void;
+  logExtraInteractionDetails: (interaction: LiveMetrics.Interaction) => void;
+  highlightedInteractionId?: string;
+  highlightedLayoutShiftClusterIds?: Set<string>;
+}
 
-  #toggleRecordAction: UI.ActionRegistration.Action;
-  #recordReloadAction: UI.ActionRegistration.Action;
+export interface ViewOutput {
+  shouldKeepInteractionsScrolledToBottom?: () => boolean;
+  keepInteractionsScrolledToBottom?: () => void;
+  shouldKeepLayoutShiftsScrolledToBottom?: () => boolean;
+  keepLayoutShiftsScrolledToBottom?: () => void;
+}
 
-  #logsEl?: LiveMetricsLogs;
-  #tooltipContainerEl?: Element;
-  #interactionsListEl?: HTMLElement;
-  #layoutShiftsListEl?: HTMLElement;
-  #listIsScrolling = false;
-  #deviceModeModel = EmulationModel.DeviceModeModel.DeviceModeModel.tryInstance();
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement|DocumentFragment) => void;
+
+function getLcpFieldPhases(cruxManager: CrUXManager.CrUXManager): LiveMetrics.LcpValue['phases']|null {
+  const ttfb =
+      cruxManager.getSelectedFieldMetricData('largest_contentful_paint_image_time_to_first_byte')?.percentiles?.p75;
+  const loadDelay =
+      cruxManager.getSelectedFieldMetricData('largest_contentful_paint_image_resource_load_delay')?.percentiles?.p75;
+  const loadDuration =
+      cruxManager.getSelectedFieldMetricData('largest_contentful_paint_image_resource_load_duration')?.percentiles?.p75;
+  const renderDelay =
+      cruxManager.getSelectedFieldMetricData('largest_contentful_paint_image_element_render_delay')?.percentiles?.p75;
+
+  if (typeof ttfb !== 'number' || typeof loadDelay !== 'number' || typeof loadDuration !== 'number' ||
+      typeof renderDelay !== 'number') {
+    return null;
+  }
 
-  constructor() {
-    super();
+  return {
+    timeToFirstByte: Trace.Types.Timing.Milli(ttfb),
+    resourceLoadDelay: Trace.Types.Timing.Milli(loadDelay),
+    resourceLoadTime: Trace.Types.Timing.Milli(loadDuration),
+    elementRenderDelay: Trace.Types.Timing.Milli(renderDelay),
+  };
+}
 
-    this.#toggleRecordAction = UI.ActionRegistry.ActionRegistry.instance().getAction('timeline.toggle-recording');
-    this.#recordReloadAction = UI.ActionRegistry.ActionRegistry.instance().getAction('timeline.record-reload');
+function getNetworkRecTitle(cruxManager: CrUXManager.CrUXManager): string|null {
+  const response = cruxManager.getSelectedFieldMetricData('round_trip_time');
+  if (!response?.percentiles) {
+    return null;
   }
 
-  #onMetricStatus(event: {data: LiveMetrics.StatusEvent}): void {
-    this.#lcpValue = event.data.lcp;
-    this.#clsValue = event.data.cls;
-    this.#inpValue = event.data.inp;
-
-    const hasNewLS = this.#layoutShifts.length < event.data.layoutShifts.length;
-    this.#layoutShifts = [...event.data.layoutShifts];
+  const rtt = Number(response.percentiles.p75);
+  if (!Number.isFinite(rtt)) {
+    return null;
+  }
 
-    const hasNewInteraction = this.#interactions.size < event.data.interactions.size;
-    this.#interactions = new Map(event.data.interactions);
+  if (rtt < RTT_MINIMUM) {
+    return i18nString(UIStrings.tryDisablingThrottling);
+  }
 
-    const renderPromise = ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+  const conditions = SDK.NetworkManager.getRecommendedNetworkPreset(rtt);
+  if (!conditions) {
+    return null;
+  }
 
-    if (hasNewInteraction && this.#interactionsListEl) {
-      this.#keepScrolledToBottom(renderPromise, this.#interactionsListEl);
-    }
+  const title = typeof conditions.title === 'function' ? conditions.title() : conditions.title;
+  return i18nString(UIStrings.tryUsingThrottling, {PH1: title});
+}
 
-    if (hasNewLS && this.#layoutShiftsListEl) {
-      this.#keepScrolledToBottom(renderPromise, this.#layoutShiftsListEl);
-    }
+function getDeviceRec(cruxManager: CrUXManager.CrUXManager): string|null {
+  // `form_factors` metric is only populated if CrUX data is fetched for all devices.
+  const fractions =
+      cruxManager.getFieldResponse(cruxManager.fieldPageScope, 'ALL')?.record.metrics.form_factors?.fractions;
+  if (!fractions) {
+    return null;
   }
 
-  #keepScrolledToBottom(renderPromise: Promise<void>, listEl: HTMLElement): void {
-    if (!listEl.checkVisibility()) {
-      return;
-    }
+  return i18nString(UIStrings.percentDevices, {
+    PH1: Math.round(fractions.phone * 100),
+    PH2: Math.round(fractions.desktop * 100),
+  });
+}
 
-    const isAtBottom = Math.abs(listEl.scrollHeight - listEl.clientHeight - listEl.scrollTop) <= 1;
+function getPageScopeLabel(cruxManager: CrUXManager.CrUXManager, pageScope: CrUXManager.PageScope): string {
+  const key = cruxManager.pageResult?.[`${pageScope}-ALL` as const]?.record.key[pageScope];
+  if (key) {
+    return pageScope === 'url' ? i18nString(UIStrings.urlOptionWithKey, {PH1: key}) :
+                                 i18nString(UIStrings.originOptionWithKey, {PH1: key});
+  }
 
-    // We shouldn't scroll to the bottom if the list wasn't already at the bottom.
-    // However, if a new item appears while the animation for a previous item is still going,
-    // then we should "finish" the scroll by sending another scroll command even if the scroll position
-    // the element hasn't scrolled all the way to the bottom yet.
-    if (!isAtBottom && !this.#listIsScrolling) {
-      return;
-    }
+  const baseLabel = pageScope === 'url' ? i18nString(UIStrings.urlOption) : i18nString(UIStrings.originOption);
+  return i18nString(UIStrings.needsDataOption, {PH1: baseLabel});
+}
 
-    void renderPromise.then(() => {
-      requestAnimationFrame(() => {
-        this.#listIsScrolling = true;
-        listEl.addEventListener('scrollend', () => {
-          this.#listIsScrolling = false;
-        }, {once: true});
-        listEl.scrollTo({top: listEl.scrollHeight, behavior: 'smooth'});
-      });
-    });
+function getDeviceScopeDisplayName(deviceScope: CrUXManager.DeviceScope): string {
+  switch (deviceScope) {
+    case 'ALL':
+      return i18nString(UIStrings.allDevices);
+    case 'DESKTOP':
+      return i18nString(UIStrings.desktop);
+    case 'PHONE':
+      return i18nString(UIStrings.mobile);
+    case 'TABLET':
+      return i18nString(UIStrings.tablet);
   }
+}
 
-  #onFieldDataChanged(): void {
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+function getLabelForDeviceOption(cruxManager: CrUXManager.CrUXManager, deviceOption: DeviceOption): string {
+  let baseLabel;
+  if (deviceOption === 'AUTO') {
+    const deviceScope = cruxManager.resolveDeviceOptionToScope(deviceOption);
+    const deviceScopeLabel = getDeviceScopeDisplayName(deviceScope);
+    baseLabel = i18nString(UIStrings.auto, {PH1: deviceScopeLabel});
+  } else {
+    baseLabel = getDeviceScopeDisplayName(deviceOption);
   }
 
-  #onEmulationChanged(): void {
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+  if (!cruxManager.pageResult) {
+    return i18nString(UIStrings.loadingOption, {PH1: baseLabel});
   }
 
-  async #refreshFieldDataForCurrentPage(): Promise<void> {
-    if (!this.isNode) {
-      await this.#cruxManager.refresh();
-    }
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+  const result = cruxManager.getSelectedFieldResponse();
+  if (!result) {
+    return i18nString(UIStrings.needsDataOption, {PH1: baseLabel});
   }
 
-  connectedCallback(): void {
-    const liveMetrics = LiveMetrics.LiveMetrics.instance();
-    liveMetrics.addEventListener(LiveMetrics.Events.STATUS, this.#onMetricStatus, this);
+  return baseLabel;
+}
 
-    const cruxManager = CrUXManager.CrUXManager.instance();
-    cruxManager.addEventListener(CrUXManager.Events.FIELD_DATA_CHANGED, this.#onFieldDataChanged, this);
+function getCollectionPeriodRange(cruxManager: CrUXManager.CrUXManager): string|null {
+  const selectedResponse = cruxManager.getSelectedFieldResponse();
+  if (!selectedResponse) {
+    return null;
+  }
 
-    this.#deviceModeModel?.addEventListener(
-        EmulationModel.DeviceModeModel.Events.UPDATED, this.#onEmulationChanged, this);
+  const {firstDate, lastDate} = selectedResponse.record.collectionPeriod;
+
+  const formattedFirstDate = new Date(
+      firstDate.year,
+      // CrUX month is 1-indexed but `Date` month is 0-indexed
+      firstDate.month - 1,
+      firstDate.day,
+  );
+  const formattedLastDate = new Date(
+      lastDate.year,
+      // CrUX month is 1-indexed but `Date` month is 0-indexed
+      lastDate.month - 1,
+      lastDate.day,
+  );
+
+  const options: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  };
 
-    if (cruxManager.getConfigSetting().get().enabled) {
-      void this.#refreshFieldDataForCurrentPage();
+  return i18nString(UIStrings.dateRange, {
+    PH1: formattedFirstDate.toLocaleDateString(undefined, options),
+    PH2: formattedLastDate.toLocaleDateString(undefined, options),
+  });
+}
+
+function createMetricCardRef(cardData: Omit<MetricCardData, 'tooltipContainer'>):
+    ReturnType<typeof Lit.Directives.ref> {
+  return Lit.Directives.ref(el => {
+    if (el instanceof HTMLElement) {
+      (el as HTMLElement & {data: MetricCardData}).data = {
+        ...cardData,
+        tooltipContainer: (el.closest('.metric-cards') as HTMLElement) || undefined,
+      };
     }
+  });
+}
 
-    this.#lcpValue = liveMetrics.lcpValue;
-    this.#clsValue = liveMetrics.clsValue;
-    this.#inpValue = liveMetrics.inpValue;
-    this.#interactions = liveMetrics.interactions;
-    this.#layoutShifts = liveMetrics.layoutShifts;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
+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 fieldPhases = getLcpFieldPhases(input.cruxManager);
+
+  // clang-format off
+  return html`
+    <devtools-metric-card ${createMetricCardRef({
+      metric: 'LCP',
+      localValue: input.lcpValue?.value,
+      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],
+      ],
+    })}>
+      ${nodeLink ? html`
+          <div class="related-info" slot="extra-info">
+            <span class="related-info-label">${i18nString(UIStrings.lcpElement)}</span>
+            <span class="related-info-link">
+             ${widget(PanelsCommon.DOMLinkifier.DOMNodeLink, {node: input.lcpValue?.nodeRef})}
+            </span>
+          </div>
+        `
+        : nothing}
+    </devtools-metric-card>
+  `;
+  // clang-format on
+}
 
-  disconnectedCallback(): void {
-    LiveMetrics.LiveMetrics.instance().removeEventListener(LiveMetrics.Events.STATUS, this.#onMetricStatus, this);
+function renderClsCard(input: ViewInput): Lit.LitTemplate {
+  const fieldData = input.cruxManager.getSelectedFieldMetricData('cumulative_layout_shift');
+
+  const clusterIds = new Set(input.clsValue?.clusterShiftIds || []);
+  const clusterIsVisible =
+      clusterIds.size > 0 && input.layoutShifts.some(layoutShift => clusterIds.has(layoutShift.uniqueLayoutShiftId));
+
+  // clang-format off
+  return html`
+    <devtools-metric-card ${createMetricCardRef({
+      metric: 'CLS',
+      localValue: input.clsValue?.value,
+      fieldValue: fieldData?.percentiles?.p75,
+      histogram: fieldData?.histogram,
+      warnings: input.clsValue?.warnings,
+    })}>
+      ${clusterIsVisible ? html`
+        <div class="related-info" slot="extra-info">
+          <span class="related-info-label">${i18nString(UIStrings.worstCluster)}</span>
+          <button
+            class="link-to-log"
+            title=${i18nString(UIStrings.showClsCluster)}
+            @click=${() => input.revealLayoutShiftCluster(clusterIds)}
+            jslog=${VisualLogging.action('timeline.landing.show-cls-cluster').track({click: true})}
+          >${i18nString(UIStrings.numShifts, {shiftCount: clusterIds.size})}</button>
+        </div>
+      ` : nothing}
+    </devtools-metric-card>
+  `;
+  // clang-format on
+}
 
-    const cruxManager = CrUXManager.CrUXManager.instance();
-    cruxManager.removeEventListener(CrUXManager.Events.FIELD_DATA_CHANGED, this.#onFieldDataChanged, this);
+function renderInpCard(input: ViewInput): Lit.LitTemplate {
+  const fieldData = input.cruxManager.getSelectedFieldMetricData('interaction_to_next_paint');
+  const phases = input.inpValue?.phases;
+  const interaction = input.inpValue && input.interactions.get(input.inpValue.interactionId);
+
+  // clang-format off
+  return html`
+    <devtools-metric-card ${createMetricCardRef({
+      metric: 'INP',
+      localValue: input.inpValue?.value,
+      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],
+      ],
+    })}>
+      ${interaction ? html`
+        <div class="related-info" slot="extra-info">
+          <span class="related-info-label">${i18nString(UIStrings.inpInteractionLink)}</span>
+          <button
+            class="link-to-log"
+            title=${i18nString(UIStrings.showInpInteraction)}
+            @click=${() => input.revealInteraction(interaction)}
+            jslog=${VisualLogging.action('timeline.landing.show-inp-interaction').track({click: true})}
+          >${interaction.interactionType}</button>
+        </div>
+      ` : nothing}
+    </devtools-metric-card>
+  `;
+  // clang-format on
+}
 
-    this.#deviceModeModel?.removeEventListener(
-        EmulationModel.DeviceModeModel.Events.UPDATED, this.#onEmulationChanged, this);
+function renderRecordAction(action: UI.ActionRegistration.Action): Lit.LitTemplate {
+  function onClick(): void {
+    void action.execute();
   }
 
-  #getLcpFieldPhases(): LiveMetrics.LcpValue['phases']|null {
-    const ttfb = this.#cruxManager.getSelectedFieldMetricData('largest_contentful_paint_image_time_to_first_byte')
-                     ?.percentiles?.p75;
-    const loadDelay =
-        this.#cruxManager.getSelectedFieldMetricData('largest_contentful_paint_image_resource_load_delay')
-            ?.percentiles?.p75;
-    const loadDuration =
-        this.#cruxManager.getSelectedFieldMetricData('largest_contentful_paint_image_resource_load_duration')
-            ?.percentiles?.p75;
-    const renderDelay =
-        this.#cruxManager.getSelectedFieldMetricData('largest_contentful_paint_image_element_render_delay')
-            ?.percentiles?.p75;
-
-    if (typeof ttfb !== 'number' || typeof loadDelay !== 'number' || typeof loadDuration !== 'number' ||
-        typeof renderDelay !== 'number') {
-      return null;
-    }
+  // clang-format off
+  return html`
+    <div class="record-action">
+      <devtools-button @click=${onClick} .data=${{
+          variant: Buttons.Button.Variant.TEXT,
+          size: Buttons.Button.Size.REGULAR,
+          iconName: action.icon(),
+          title: action.title(),
+          jslogContext: action.id(),
+      } as Buttons.Button.ButtonData}>
+        ${action.title()}
+      </devtools-button>
+      <span class="shortcut-label">${UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutTitleForAction(action.id())}</span>
+    </div>
+  `;
+  // clang-format on
+}
 
-    return {
-      timeToFirstByte: Trace.Types.Timing.Milli(ttfb),
-      resourceLoadDelay: Trace.Types.Timing.Milli(loadDelay),
-      resourceLoadTime: Trace.Types.Timing.Milli(loadDuration),
-      elementRenderDelay: Trace.Types.Timing.Milli(renderDelay),
-    };
-  }
+function renderRecordingSettings(input: ViewInput): Lit.LitTemplate {
+  const fieldEnabled = input.cruxManager.getConfigSetting().get().enabled;
+
+  const deviceRec = getDeviceRec(input.cruxManager) || i18nString(UIStrings.notEnoughData);
+  const networkRec = getNetworkRecTitle(input.cruxManager) || i18nString(UIStrings.notEnoughData);
+
+  const recs = PanelsCommon.ThrottlingUtils.getThrottlingRecommendations();
+
+  // clang-format off
+  return html`
+    <h3 class="card-title">${i18nString(UIStrings.environmentSettings)}</h3>
+    <div class="device-toolbar-description">${md(i18nString(UIStrings.useDeviceToolbar))}</div>
+    ${fieldEnabled ? html`
+      <ul class="environment-recs-list">
+        <li>${uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.device, {PH1: html`<span class="environment-rec">${deviceRec}</span>`})}</li>
+        <li>${uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.network, {PH1: html`<span class="environment-rec">${networkRec}</span>`})}</li>
+      </ul>
+    ` : nothing}
+    <div class="environment-option">
+      ${widget(CPUThrottlingSelector, {recommendedOption: recs.cpuOption})}
+    </div>
+    <div class="environment-option">
+      <devtools-network-throttling-selector .recommendedConditions=${recs.networkConditions}></devtools-network-throttling-selector>
+    </div>
+    <div class="environment-option">
+      <setting-checkbox
+        class="network-cache-setting"
+        .data=${{
+          setting: Common.Settings.Settings.instance().moduleSetting('cache-disabled'),
+          textOverride: i18nString(UIStrings.disableNetworkCache),
+        } as Settings.SettingCheckbox.SettingCheckboxData}
+      ></setting-checkbox>
+    </div>
+  `;
+  // clang-format on
+}
 
-  #renderLcpCard(): Lit.LitTemplate {
-    const fieldData = this.#cruxManager.getSelectedFieldMetricData('largest_contentful_paint');
-    const nodeLink =
-        this.#lcpValue?.nodeRef && PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(this.#lcpValue?.nodeRef);
-    const phases = this.#lcpValue?.phases;
-
-    const fieldPhases = this.#getLcpFieldPhases();
-
-    // clang-format off
-    return html`
-      <devtools-metric-card .data=${{
-        metric: 'LCP',
-        localValue: this.#lcpValue?.value,
-        fieldValue: fieldData?.percentiles?.p75,
-        histogram: fieldData?.histogram,
-        tooltipContainer: this.#tooltipContainerEl,
-        warnings: this.#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],
-        ],
-      } as MetricCardData}>
-        ${nodeLink ? html`
-            <div class="related-info" slot="extra-info">
-              <span class="related-info-label">${i18nString(UIStrings.lcpElement)}</span>
-              <span class="related-info-link">
-               ${widget(PanelsCommon.DOMLinkifier.DOMNodeLink, {node: this.#lcpValue?.nodeRef})}
-              </span>
-            </div>
-          `
-          : nothing}
-      </devtools-metric-card>
-    `;
-    // clang-format on
+function renderPageScopeSetting(input: ViewInput): Lit.LitTemplate {
+  if (!input.cruxManager.getConfigSetting().get().enabled) {
+    return Lit.nothing;
   }
 
-  #renderClsCard(): Lit.LitTemplate {
-    const fieldData = this.#cruxManager.getSelectedFieldMetricData('cumulative_layout_shift');
-
-    const clusterIds = new Set(this.#clsValue?.clusterShiftIds || []);
-    const clusterIsVisible =
-        clusterIds.size > 0 && this.#layoutShifts.some(layoutShift => clusterIds.has(layoutShift.uniqueLayoutShiftId));
-
-    // clang-format off
-    return html`
-      <devtools-metric-card .data=${{
-        metric: 'CLS',
-        localValue: this.#clsValue?.value,
-        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">
-            <span class="related-info-label">${i18nString(UIStrings.worstCluster)}</span>
-            <button
-              class="link-to-log"
-              title=${i18nString(UIStrings.showClsCluster)}
-              @click=${() => this.#revealLayoutShiftCluster(clusterIds)}
-              jslog=${VisualLogging.action('timeline.landing.show-cls-cluster').track({click: true})}
-            >${i18nString(UIStrings.numShifts, {shiftCount: clusterIds.size})}</button>
-          </div>
-        ` : nothing}
-      </devtools-metric-card>
-    `;
-    // clang-format on
-  }
+  const urlLabel = getPageScopeLabel(input.cruxManager, 'url');
+  const originLabel = getPageScopeLabel(input.cruxManager, 'origin');
+
+  const buttonTitle = input.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 = !input.cruxManager.pageResult?.['url-ALL'] && !input.cruxManager.pageResult?.['origin-ALL'];
+
+  /* eslint-disable @devtools/no-deprecated-component-usages */
+  return html`
+    <devtools-select-menu
+      id="page-scope-select"
+      class="field-data-option"
+      @selectmenuselected=${input.handlePageScopeSelected}
+      .showDivider=${true}
+      .showArrow=${true}
+      .sideButton=${false}
+      .showSelectedItem=${true}
+      .buttonTitle=${buttonTitle}
+      .disabled=${shouldDisable}
+      title=${accessibleTitle}
+    >
+      <devtools-menu-item
+        .value=${'url'}
+        .selected=${input.cruxManager.fieldPageScope === 'url'}
+      >
+        ${urlLabel}
+      </devtools-menu-item>
+      <devtools-menu-item
+        .value=${'origin'}
+        .selected=${input.cruxManager.fieldPageScope === 'origin'}
+      >
+        ${originLabel}
+      </devtools-menu-item>
+    </devtools-select-menu>
+  `;
+  /* eslint-enable @devtools/no-deprecated-component-usages */
+}
 
-  #renderInpCard(): Lit.LitTemplate {
-    const fieldData = this.#cruxManager.getSelectedFieldMetricData('interaction_to_next_paint');
-    const phases = this.#inpValue?.phases;
-    const interaction = this.#inpValue && this.#interactions.get(this.#inpValue.interactionId);
-
-    // clang-format off
-    return html`
-      <devtools-metric-card .data=${{
-        metric: 'INP',
-        localValue: this.#inpValue?.value,
-        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],
-          [i18nString(UIStrings.presentationDelay), phases.presentationDelay],
-        ],
-      } as MetricCardData}>
-        ${interaction ? html`
-          <div class="related-info" slot="extra-info">
-            <span class="related-info-label">${i18nString(UIStrings.inpInteractionLink)}</span>
-            <button
-              class="link-to-log"
-              title=${i18nString(UIStrings.showInpInteraction)}
-              @click=${() => this.#revealInteraction(interaction)}
-              jslog=${VisualLogging.action('timeline.landing.show-inp-interaction').track({click: true})}
-            >${interaction.interactionType}</button>
-          </div>
-        ` : nothing}
-      </devtools-metric-card>
-    `;
-    // clang-format on
+function renderDeviceScopeSetting(input: ViewInput): Lit.LitTemplate {
+  if (!input.cruxManager.getConfigSetting().get().enabled) {
+    return Lit.nothing;
   }
 
-  #renderRecordAction(action: UI.ActionRegistration.Action): Lit.LitTemplate {
-    function onClick(): void {
-      void action.execute();
-    }
+  // 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 = !input.cruxManager.getFieldResponse(input.cruxManager.fieldPageScope, 'ALL');
+
+  const currentDeviceLabel = getLabelForDeviceOption(input.cruxManager, input.cruxManager.fieldDeviceOption);
+
+  // clang-format off
+  /* eslint-disable @devtools/no-deprecated-component-usages */
+  return html`
+    <devtools-select-menu
+      id="device-scope-select"
+      class="field-data-option"
+      @selectmenuselected=${input.handleDeviceOptionSelected}
+      .showDivider=${true}
+      .showArrow=${true}
+      .sideButton=${false}
+      .showSelectedItem=${true}
+      .buttonTitle=${i18nString(UIStrings.device, {PH1: currentDeviceLabel})}
+      .disabled=${shouldDisable}
+      title=${i18nString(UIStrings.showFieldDataForDevice, {PH1: currentDeviceLabel})}
+    >
+      ${DEVICE_OPTION_LIST.map(deviceOption => {
+        return html`
+          <devtools-menu-item
+            .value=${deviceOption}
+            .selected=${input.cruxManager.fieldDeviceOption === deviceOption}
+          >
+            ${getLabelForDeviceOption(input.cruxManager, deviceOption)}
+          </devtools-menu-item>
+        `;
+      })}
+    </devtools-select-menu>
+  `;
+  /* eslint-enable @devtools/no-deprecated-component-usages */
+  // clang-format on
+}
 
-    // clang-format off
-    return html`
-      <div class="record-action">
-        <devtools-button @click=${onClick} .data=${{
-            variant: Buttons.Button.Variant.TEXT,
-            size: Buttons.Button.Size.REGULAR,
-            iconName: action.icon(),
-            title: action.title(),
-            jslogContext: action.id(),
-        } as Buttons.Button.ButtonData}>
-          ${action.title()}
-        </devtools-button>
-        <span class="shortcut-label">${UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutTitleForAction(action.id())}</span>
-      </div>
-    `;
-    // clang-format on
+function renderFieldDataHistoryLink(cruxManager: CrUXManager.CrUXManager): Lit.LitTemplate {
+  if (!cruxManager.getConfigSetting().get().enabled) {
+    return Lit.nothing;
+  }
+  const normalizedUrl = cruxManager.pageResult?.normalizedUrl;
+  if (!normalizedUrl) {
+    return Lit.nothing;
   }
+  const tmp = new URL('https://cruxvis.withgoogle.com/');
+  tmp.searchParams.set('view', 'cwvsummary');
+  tmp.searchParams.set('url', normalizedUrl);
+  // identifier must be 'origin' or 'url'.
+  const identifier = cruxManager.fieldPageScope;
+  tmp.searchParams.set('identifier', identifier);
+  // device must be one 'PHONE', 'DESKTOP', 'TABLET', or 'ALL'.
+  const device = cruxManager.getSelectedDeviceScope();
+  tmp.searchParams.set('device', device);
+  const cruxVis = `${tmp.origin}/#/${tmp.search}`;
+  return html`
+      (<devtools-link href=${cruxVis}
+               class="local-field-link"
+               title=${i18nString(UIStrings.fieldDataHistoryTooltip)}
+      >${i18nString(UIStrings.fieldDataHistoryLink)}</devtools-link>)
+    `;
+}
 
-  #getNetworkRecTitle(): string|null {
-    const response = this.#cruxManager.getSelectedFieldMetricData('round_trip_time');
-    if (!response?.percentiles) {
-      return null;
-    }
+function renderCollectionPeriod(cruxManager: CrUXManager.CrUXManager): Lit.LitTemplate {
+  const range = getCollectionPeriodRange(cruxManager);
 
-    const rtt = Number(response.percentiles.p75);
-    if (!Number.isFinite(rtt)) {
-      return null;
-    }
+  const dateText = range || i18nString(UIStrings.notEnoughData);
 
-    if (rtt < RTT_MINIMUM) {
-      return i18nString(UIStrings.tryDisablingThrottling);
-    }
+  const fieldDataHistoryLink = range ? renderFieldDataHistoryLink(cruxManager) : Lit.nothing;
 
-    const conditions = SDK.NetworkManager.getRecommendedNetworkPreset(rtt);
-    if (!conditions) {
-      return null;
-    }
-
-    const title = typeof conditions.title === 'function' ? conditions.title() : conditions.title;
-    return i18nString(UIStrings.tryUsingThrottling, {PH1: title});
-  }
+  const warnings = cruxManager.pageResult?.warnings || [];
 
-  #getDeviceRec(): string|null {
-    // `form_factors` metric is only populated if CrUX data is fetched for all devices.
-    const fractions = this.#cruxManager.getFieldResponse(this.#cruxManager.fieldPageScope, 'ALL')
-                          ?.record.metrics.form_factors?.fractions;
-    if (!fractions) {
-      return null;
-    }
+  return html`
+    <div class="field-data-message">
+      <div>${uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.collectionPeriod, {
+    PH1: html`<span class="collection-period-range">${dateText}</span>`,
+  })} ${fieldDataHistoryLink}</div>
+      ${warnings.map(warning => html`
+        <div class="field-data-warning">${warning}</div>
+      `)}
+    </div>
+  `;
+}
 
-    return i18nString(UIStrings.percentDevices, {
-      PH1: Math.round(fractions.phone * 100),
-      PH2: Math.round(fractions.desktop * 100),
-    });
+function renderFieldDataMessage(cruxManager: CrUXManager.CrUXManager): Lit.LitTemplate {
+  if (cruxManager.getConfigSetting().get().enabled) {
+    return renderCollectionPeriod(cruxManager);
   }
 
-  #renderRecordingSettings(): Lit.LitTemplate {
-    const fieldEnabled = this.#cruxManager.getConfigSetting().get().enabled;
+  // clang-format off
+  return html`
+    <div class="field-data-message">
+      ${uiI18n.getFormatLocalizedStringTemplate(
+        str_,
+        UIStrings.seeHowYourLocalMetricsCompare,
+        { PH1: html`<devtools-link href="https://developer.chrome.com/docs/crux">${i18n.i18n.lockedString('Chrome UX Report')}</devtools-link>` },
+      )}
+    </div>
+  `;
+  // clang-format on
+}
 
-    const deviceRecEl = document.createElement('span');
-    deviceRecEl.classList.add('environment-rec');
-    deviceRecEl.textContent = this.#getDeviceRec() || i18nString(UIStrings.notEnoughData);
+const listIsScrolling = new WeakMap<HTMLElement, boolean>();
 
-    const networkRecEl = document.createElement('span');
-    networkRecEl.classList.add('environment-rec');
-    networkRecEl.textContent = this.#getNetworkRecTitle() || i18nString(UIStrings.notEnoughData);
+function shouldKeepScrolledToBottom(listEl: HTMLElement): boolean {
+  if (!listEl.checkVisibility()) {
+    return false;
+  }
 
-    const recs = PanelsCommon.ThrottlingUtils.getThrottlingRecommendations();
+  const isAtBottom = Math.abs(listEl.scrollHeight - listEl.clientHeight - listEl.scrollTop) <= 1;
 
-    // clang-format off
-    return html`
-      <h3 class="card-title">${i18nString(UIStrings.environmentSettings)}</h3>
-      <div class="device-toolbar-description">${md(i18nString(UIStrings.useDeviceToolbar))}</div>
-      ${fieldEnabled ? html`
-        <ul class="environment-recs-list">
-          <li>${uiI18n.getFormatLocalizedString(str_, UIStrings.device, {PH1: deviceRecEl})}</li>
-          <li>${uiI18n.getFormatLocalizedString(str_, UIStrings.network, {PH1: networkRecEl})}</li>
-        </ul>
-      ` : nothing}
-      <div class="environment-option">
-        ${widget(CPUThrottlingSelector, {recommendedOption: recs.cpuOption})}
-      </div>
-      <div class="environment-option">
-        <devtools-network-throttling-selector .recommendedConditions=${recs.networkConditions}></devtools-network-throttling-selector>
-      </div>
-      <div class="environment-option">
-        <setting-checkbox
-          class="network-cache-setting"
-          .data=${{
-            setting: Common.Settings.Settings.instance().moduleSetting('cache-disabled'),
-            textOverride: i18nString(UIStrings.disableNetworkCache),
-          } as Settings.SettingCheckbox.SettingCheckboxData}
-        ></setting-checkbox>
-      </div>
-    `;
-    // clang-format on
-  }
+  // We shouldn't scroll to the bottom if the list wasn't already at the bottom.
+  // However, if a new item appears while the animation for a previous item is still going,
+  // then we should "finish" the scroll by sending another scroll command even if the scroll position
+  // the element hasn't scrolled all the way to the bottom yet.
+  return isAtBottom || Boolean(listIsScrolling.get(listEl));
+}
 
-  #getPageScopeLabel(pageScope: CrUXManager.PageScope): string {
-    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});
-    }
+function keepScrolledToBottom(listEl: HTMLElement): void {
+  requestAnimationFrame(() => {
+    listIsScrolling.set(listEl, true);
+    listEl.addEventListener('scrollend', () => {
+      listIsScrolling.set(listEl, false);
+    }, {once: true});
+    listEl.scrollTo({top: listEl.scrollHeight, behavior: 'smooth'});
+  });
+}
 
-    const baseLabel = pageScope === 'url' ? i18nString(UIStrings.urlOption) : i18nString(UIStrings.originOption);
-    return i18nString(UIStrings.needsDataOption, {PH1: baseLabel});
+function renderInteractionsLog(input: ViewInput, output: ViewOutput): Lit.LitTemplate {
+  if (!input.interactions.size) {
+    return Lit.nothing;
   }
 
-  #onPageScopeMenuItemSelected(event: Menus.SelectMenu.SelectMenuItemSelectedEvent): void {
-    if (event.itemValue === 'url') {
-      this.#cruxManager.fieldPageScope = 'url';
-    } else {
-      this.#cruxManager.fieldPageScope = 'origin';
-    }
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+  // clang-format off
+  return html`
+    <ol class="log"
+      slot="interactions-log-content"
+      ${Lit.Directives.ref(el => {
+        if (el instanceof HTMLElement) {
+          output.shouldKeepInteractionsScrolledToBottom = () => {
+            return shouldKeepScrolledToBottom(el);
+          };
+          output.keepInteractionsScrolledToBottom = () => {
+            keepScrolledToBottom(el);
+          };
+        }
+      })}
+    >
+      ${input.interactions.values().map(interaction => {
+        const metricValue = renderMetricValue(
+          'timeline.landing.interaction-event-timing',
+          interaction.duration,
+          INP_THRESHOLDS,
+          v => i18n.TimeUtilities.preciseMillisToString(v),
+          {dim: true},
+        );
+
+        const isP98Excluded = input.inpValue && input.inpValue.value < interaction.duration;
+        const isInp = input.inpValue?.interactionId === interaction.interactionId;
+
+        return html`
+          <li id=${interaction.interactionId} class="log-item interaction" tabindex="-1">
+            <details>
+              <summary>
+                <span class="interaction-type">
+                  ${interaction.interactionType} ${isInp ?
+                    html`<span class="interaction-inp-chip" title=${i18nString(UIStrings.inpInteraction)}>INP</span>`
+                  : nothing}
+                </span>
+                <span class="interaction-node">
+                  ${widget(PanelsCommon.DOMLinkifier.DOMNodeLink, {node: interaction.nodeRef})}
+                </span>
+                ${isP98Excluded ? html`<devtools-icon
+                  class="interaction-info"
+                  name="info"
+                  title=${i18nString(UIStrings.interactionExcluded)}
+                ></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 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)}
+                  </div>
+                </div>
+                <div class="phase-table-row" role="row">
+                  <div role="cell">${i18nString(UIStrings.inputDelay)}</div>
+                  <div role="cell">${Math.round(interaction.phases.inputDelay)}</div>
+                </div>
+                <div class="phase-table-row" role="row">
+                  <div role="cell">${i18nString(UIStrings.processingDuration)}</div>
+                  <div role="cell">${Math.round(interaction.phases.processingDuration)}</div>
+                </div>
+                <div class="phase-table-row" role="row">
+                  <div role="cell">${i18nString(UIStrings.presentationDelay)}</div>
+                  <div role="cell">${Math.round(interaction.phases.presentationDelay)}</div>
+                </div>
+              </div>
+            </details>
+          </li>
+        `;
+      })}
+    </ol>
+  `;
+  // clang-format on
+}
+
+function renderLayoutShiftsLog(input: ViewInput, output: ViewOutput): Lit.LitTemplate {
+  if (!input.layoutShifts.length) {
+    return Lit.nothing;
   }
 
-  #renderPageScopeSetting(): Lit.LitTemplate {
-    if (!this.#cruxManager.getConfigSetting().get().enabled) {
-      return Lit.nothing;
-    }
+  // clang-format off
+  return html`
+    <ol class="log"
+      slot="layout-shifts-log-content"
+      ${Lit.Directives.ref(el => {
+        if (el instanceof HTMLElement) {
+          output.shouldKeepLayoutShiftsScrolledToBottom = () => {
+            return shouldKeepScrolledToBottom(el);
+          };
+          output.keepLayoutShiftsScrolledToBottom = () => {
+            keepScrolledToBottom(el);
+          };
+        }
+      })}
+    >
+      ${input.layoutShifts.map(layoutShift => {
+        const metricValue = renderMetricValue(
+          'timeline.landing.layout-shift-event-score',
+          layoutShift.score,
+          CLS_THRESHOLDS,
+          // CLS value is 2 decimal places, but individual shift scores tend to be much smaller
+          // so we expand the precision here.
+          v => v.toFixed(4),
+          {dim: true},
+        );
+
+        return html`
+          <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.affectedNodeRefs.map(node => html`
+                <div class="layout-shift-node">
+                  ${widget(PanelsCommon.DOMLinkifier.DOMNodeLink, {node})}
+                </div>
+              `)}
+            </div>
+          </li>
+        `;
+      })}
+    </ol>
+  `;
+  // clang-format on
+}
 
-    const urlLabel = this.#getPageScopeLabel('url');
-    const originLabel = this.#getPageScopeLabel('origin');
-
-    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.#cruxManager.pageResult?.['url-ALL'] && !this.#cruxManager.pageResult?.['origin-ALL'];
-
-    /* eslint-disable @devtools/no-deprecated-component-usages */
-    return html`
-      <devtools-select-menu
-        id="page-scope-select"
-        class="field-data-option"
-        @selectmenuselected=${this.#onPageScopeMenuItemSelected}
-        .showDivider=${true}
-        .showArrow=${true}
-        .sideButton=${false}
-        .showSelectedItem=${true}
-        .buttonTitle=${buttonTitle}
-        .disabled=${shouldDisable}
-        title=${accessibleTitle}
+function renderLogSection(input: ViewInput, output: ViewOutput): Lit.LitTemplate {
+  // clang-format off
+  return html`
+    <section
+      class="logs-section"
+      aria-label=${i18nString(UIStrings.eventLogs)}
+    >
+      <devtools-widget ${widget(LiveMetricsLogs)}
+        ${widgetRef(LiveMetricsLogs, widget => {
+          if (input.highlightedInteractionId) {
+            widget.selectTab('interactions');
+          } else if (input.highlightedLayoutShiftClusterIds?.size) {
+            widget.selectTab('layout-shifts');
+          }
+        })}
       >
-        <devtools-menu-item
-          .value=${'url'}
-          .selected=${this.#cruxManager.fieldPageScope === 'url'}
-        >
-          ${urlLabel}
-        </devtools-menu-item>
-        <devtools-menu-item
-          .value=${'origin'}
-          .selected=${this.#cruxManager.fieldPageScope === 'origin'}
-        >
-          ${originLabel}
-        </devtools-menu-item>
-      </devtools-select-menu>
-    `;
-    /* eslint-enable @devtools/no-deprecated-component-usages */
-  }
+        ${renderInteractionsLog(input, output)}
+        ${renderLayoutShiftsLog(input, output)}
+      </devtools-widget>
+    </section>
+  `;
+  // clang-format on
+}
 
-  #getDeviceScopeDisplayName(deviceScope: CrUXManager.DeviceScope): string {
-    switch (deviceScope) {
-      case 'ALL':
-        return i18nString(UIStrings.allDevices);
-      case 'DESKTOP':
-        return i18nString(UIStrings.desktop);
-      case 'PHONE':
-        return i18nString(UIStrings.mobile);
-      case 'TABLET':
-        return i18nString(UIStrings.tablet);
-    }
+function renderNodeView(input: ViewInput): Lit.LitTemplate {
+  return html`
+    <style>${liveMetricsViewStyles}</style>
+    <style>${metricValueStyles}</style>
+    <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">${renderRecordAction(input.toggleRecordAction)}</div>
+      </main>
+    </div>
+  `;
+}
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  if (input.isNode) {
+    Lit.render(renderNodeView(input), target, {host: input});
+    return;
   }
 
-  #getLabelForDeviceOption(deviceOption: DeviceOption): string {
-    let baseLabel;
-    if (deviceOption === 'AUTO') {
-      const deviceScope = this.#cruxManager.resolveDeviceOptionToScope(deviceOption);
-      const deviceScopeLabel = this.#getDeviceScopeDisplayName(deviceScope);
-      baseLabel = i18nString(UIStrings.auto, {PH1: deviceScopeLabel});
-    } else {
-      baseLabel = this.#getDeviceScopeDisplayName(deviceOption);
+  const fieldEnabled = input.cruxManager.getConfigSetting().get().enabled;
+  const liveMetricsTitle =
+      fieldEnabled ? i18nString(UIStrings.localAndFieldMetrics) : i18nString(UIStrings.localMetrics);
+
+  const helpLink = 'https://web.dev/articles/lab-and-field-data-differences#lab_data_versus_field_data' as
+      Platform.DevToolsPath.UrlString;
+
+  // clang-format off
+  const outputTemplate = html`
+    <style>${liveMetricsViewStyles}</style>
+    <style>${metricValueStyles}</style>
+    <div class="container">
+      <div class="live-metrics-view">
+        <main class="live-metrics">
+          <h2 class="section-title">${liveMetricsTitle}</h2>
+          <div class="metric-cards">
+            <div id="lcp">
+              ${renderLcpCard(input)}
+            </div>
+            <div id="cls">
+              ${renderClsCard(input)}
+            </div>
+            <div id="inp">
+              ${renderInpCard(input)}
+            </div>
+          </div>
+          <devtools-link
+            href=${helpLink}
+            class="local-field-link"
+            title=${i18nString(UIStrings.localFieldLearnMoreTooltip)}
+          >${i18nString(UIStrings.localFieldLearnMoreLink)}</devtools-link>
+          ${renderLogSection(input, output)}
+        </main>
+        <aside class="next-steps" aria-labelledby="next-steps-section-title">
+          <h2 id="next-steps-section-title" class="section-title">${i18nString(UIStrings.nextSteps)}</h2>
+          <div id="field-setup" class="settings-card">
+            <h3 class="card-title">${i18nString(UIStrings.fieldMetricsTitle)}</h3>
+            ${renderFieldDataMessage(input.cruxManager)}
+            ${renderPageScopeSetting(input)}
+            ${renderDeviceScopeSetting(input)}
+            <div class="field-setup-buttons">
+              <devtools-field-settings-dialog></devtools-field-settings-dialog>
+            </div>
+          </div>
+          <div id="recording-settings" class="settings-card">
+            ${renderRecordingSettings(input)}
+          </div>
+          <div id="record" class="record-action-card">
+            ${renderRecordAction(input.toggleRecordAction)}
+          </div>
+          <div id="record-page-load" class="record-action-card">
+            ${renderRecordAction(input.recordReloadAction)}
+          </div>
+        </aside>
+      </div>
+    </div>
+  `;
+  Lit.render(outputTemplate, target, {host: input});
+
+  if (input.highlightedInteractionId) {
+    const interactionEl = target.querySelector<HTMLElement>('#' + CSS.escape(input.highlightedInteractionId));
+    if (interactionEl) {
+      void RenderCoordinator.write(() => {
+        interactionEl.scrollIntoView({
+          block: 'center',
+        });
+        interactionEl.focus();
+        UI.UIUtils.runCSSAnimationOnce(interactionEl, 'highlight');
+      });
     }
+  }
 
-    if (!this.#cruxManager.pageResult) {
-      return i18nString(UIStrings.loadingOption, {PH1: baseLabel});
+  if (input.highlightedLayoutShiftClusterIds?.size) {
+    const layoutShiftEls: HTMLElement[] = [];
+    for (const shiftId of input.highlightedLayoutShiftClusterIds) {
+      const layoutShiftEl = target.querySelector<HTMLElement>('#' + CSS.escape(shiftId));
+      if (layoutShiftEl) {
+        layoutShiftEls.push(layoutShiftEl);
+      }
     }
 
-    const result = this.#cruxManager.getSelectedFieldResponse();
-    if (!result) {
-      return i18nString(UIStrings.needsDataOption, {PH1: baseLabel});
+    if (layoutShiftEls.length) {
+      void RenderCoordinator.write(() => {
+        layoutShiftEls[0].scrollIntoView({
+          block: 'start',
+        });
+        layoutShiftEls[0].focus();
+        for (const layoutShiftEl of layoutShiftEls) {
+          UI.UIUtils.runCSSAnimationOnce(layoutShiftEl, 'highlight');
+        }
+      });
     }
-
-    return baseLabel;
   }
+};
 
-  #onDeviceOptionMenuItemSelected(event: Menus.SelectMenu.SelectMenuItemSelectedEvent): void {
-    this.#cruxManager.fieldDeviceOption = event.itemValue as DeviceOption;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
+export class LiveMetricsView extends UI.Widget.Widget {
+  isNode = Root.Runtime.Runtime.isNode();
 
-  #renderDeviceScopeSetting(): Lit.LitTemplate {
-    if (!this.#cruxManager.getConfigSetting().get().enabled) {
-      return Lit.nothing;
-    }
+  #lcpValue?: LiveMetrics.LcpValue;
+  #clsValue?: LiveMetrics.ClsValue;
+  #inpValue?: LiveMetrics.InpValue;
+  #interactions: LiveMetrics.InteractionMap = new Map();
+  #layoutShifts: LiveMetrics.LayoutShift[] = [];
 
-    // 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.#cruxManager.getFieldResponse(this.#cruxManager.fieldPageScope, 'ALL');
-
-    const currentDeviceLabel = this.#getLabelForDeviceOption(this.#cruxManager.fieldDeviceOption);
-
-    // clang-format off
-    /* eslint-disable @devtools/no-deprecated-component-usages */
-    return html`
-      <devtools-select-menu
-        id="device-scope-select"
-        class="field-data-option"
-        @selectmenuselected=${this.#onDeviceOptionMenuItemSelected}
-        .showDivider=${true}
-        .showArrow=${true}
-        .sideButton=${false}
-        .showSelectedItem=${true}
-        .buttonTitle=${i18nString(UIStrings.device, {PH1: currentDeviceLabel})}
-        .disabled=${shouldDisable}
-        title=${i18nString(UIStrings.showFieldDataForDevice, {PH1: currentDeviceLabel})}
-      >
-        ${DEVICE_OPTION_LIST.map(deviceOption => {
-          return html`
-            <devtools-menu-item
-              .value=${deviceOption}
-              .selected=${this.#cruxManager.fieldDeviceOption === deviceOption}
-            >
-              ${this.#getLabelForDeviceOption(deviceOption)}
-            </devtools-menu-item>
-          `;
-        })}
-      </devtools-select-menu>
-    `;
-    /* eslint-enable @devtools/no-deprecated-component-usages */
-    // clang-format on
-  }
+  #highlightedInteractionId = '';
+  #highlightedLayoutShiftClusterIds = new Set<string>();
 
-  #getCollectionPeriodRange(): string|null {
-    const selectedResponse = this.#cruxManager.getSelectedFieldResponse();
-    if (!selectedResponse) {
-      return null;
-    }
+  #cruxManager = CrUXManager.CrUXManager.instance();
 
-    const {firstDate, lastDate} = selectedResponse.record.collectionPeriod;
-
-    const formattedFirstDate = new Date(
-        firstDate.year,
-        // CrUX month is 1-indexed but `Date` month is 0-indexed
-        firstDate.month - 1,
-        firstDate.day,
-    );
-    const formattedLastDate = new Date(
-        lastDate.year,
-        // CrUX month is 1-indexed but `Date` month is 0-indexed
-        lastDate.month - 1,
-        lastDate.day,
-    );
-
-    const options: Intl.DateTimeFormatOptions = {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-    };
+  #toggleRecordAction: UI.ActionRegistration.Action;
+  #recordReloadAction: UI.ActionRegistration.Action;
 
-    return i18nString(UIStrings.dateRange, {
-      PH1: formattedFirstDate.toLocaleDateString(undefined, options),
-      PH2: formattedLastDate.toLocaleDateString(undefined, options),
-    });
-  }
+  #view: View;
+  #viewOutput: ViewOutput = {};
+  #deviceModeModel = EmulationModel.DeviceModeModel.DeviceModeModel.tryInstance();
 
-  #renderFieldDataHistoryLink(): Lit.LitTemplate {
-    if (!this.#cruxManager.getConfigSetting().get().enabled) {
-      return Lit.nothing;
-    }
-    const normalizedUrl = this.#cruxManager.pageResult?.normalizedUrl;
-    if (!normalizedUrl) {
-      return Lit.nothing;
-    }
-    const tmp = new URL('https://cruxvis.withgoogle.com/');
-    tmp.searchParams.set('view', 'cwvsummary');
-    tmp.searchParams.set('url', normalizedUrl);
-    // identifier must be 'origin' or 'url'.
-    const identifier = this.#cruxManager.fieldPageScope;
-    tmp.searchParams.set('identifier', identifier);
-    // device must be one 'PHONE', 'DESKTOP', 'TABLET', or 'ALL'.
-    const device = this.#cruxManager.getSelectedDeviceScope();
-    tmp.searchParams.set('device', device);
-    const cruxVis = `${tmp.origin}/#/${tmp.search}`;
-    return html`
-        (<devtools-link href=${cruxVis}
-                 class="local-field-link"
-                 title=${i18nString(UIStrings.fieldDataHistoryTooltip)}
-        >${i18nString(UIStrings.fieldDataHistoryLink)}</devtools-link>)
-      `;
-  }
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
 
-  #renderCollectionPeriod(): Lit.LitTemplate {
-    const range = this.#getCollectionPeriodRange();
+    this.#toggleRecordAction = UI.ActionRegistry.ActionRegistry.instance().getAction('timeline.toggle-recording');
+    this.#recordReloadAction = UI.ActionRegistry.ActionRegistry.instance().getAction('timeline.record-reload');
+  }
 
-    const dateEl = document.createElement('span');
-    dateEl.classList.add('collection-period-range');
-    dateEl.textContent = range || i18nString(UIStrings.notEnoughData);
+  async #onMetricStatus(event: {data: LiveMetrics.StatusEvent}): Promise<void> {
+    this.#lcpValue = event.data.lcp;
+    this.#clsValue = event.data.cls;
+    this.#inpValue = event.data.inp;
 
-    const message = uiI18n.getFormatLocalizedString(str_, UIStrings.collectionPeriod, {
-      PH1: dateEl,
-    });
+    const hasNewLS = this.#layoutShifts.length < event.data.layoutShifts.length;
+    this.#layoutShifts = [...event.data.layoutShifts];
 
-    const fieldDataHistoryLink = range ? this.#renderFieldDataHistoryLink() : Lit.nothing;
+    const hasNewInteraction = this.#interactions.size < event.data.interactions.size;
+    this.#interactions = new Map(event.data.interactions);
 
-    const warnings = this.#cruxManager.pageResult?.warnings || [];
+    const shouldScrollInteractions = hasNewInteraction && this.#viewOutput.shouldKeepInteractionsScrolledToBottom?.();
+    const shouldScrollLS = hasNewLS && this.#viewOutput.shouldKeepLayoutShiftsScrolledToBottom?.();
 
-    return html`
-      <div class="field-data-message">
-        <div>${message} ${fieldDataHistoryLink}</div>
-        ${warnings.map(warning => html`
-          <div class="field-data-warning">${warning}</div>
-        `)}
-      </div>
-    `;
-  }
+    this.requestUpdate();
+    await this.updateComplete;
 
-  #renderFieldDataMessage(): Lit.LitTemplate {
-    if (this.#cruxManager.getConfigSetting().get().enabled) {
-      return this.#renderCollectionPeriod();
+    if (shouldScrollInteractions) {
+      this.#viewOutput.keepInteractionsScrolledToBottom?.();
     }
 
-    // clang-format off
-    return html`
-      <div class="field-data-message">
-        ${uiI18n.getFormatLocalizedStringTemplate(
-          str_,
-          UIStrings.seeHowYourLocalMetricsCompare,
-          { PH1: html`<devtools-link href="https://developer.chrome.com/docs/crux">${i18n.i18n.lockedString('Chrome UX Report')}</devtools-link>` },
-        )}
-      </div>
-    `;
-    // clang-format on
+    if (shouldScrollLS) {
+      this.#viewOutput.keepLayoutShiftsScrolledToBottom?.();
+    }
   }
 
-  #renderLogSection(): Lit.LitTemplate {
-    // clang-format off
-    return html`
-      <section
-        class="logs-section"
-        aria-label=${i18nString(UIStrings.eventLogs)}
-      >
-        <devtools-live-metrics-logs
-          ${Lit.Directives.ref(el => {
-            if (el instanceof HTMLElement) {
-              this.#logsEl = el as LiveMetricsLogs;
-            }
-          })}
-        >
-          ${this.#renderInteractionsLog()}
-          ${this.#renderLayoutShiftsLog()}
-        </devtools-live-metrics-logs>
-      </section>
-    `;
-    // clang-format on
+  #onFieldDataChanged(): void {
+    this.requestUpdate();
   }
 
-  async #revealInteraction(interaction: LiveMetrics.Interaction): Promise<void> {
-    const interactionEl = this.#shadow.getElementById(interaction.interactionId);
-    if (!interactionEl || !this.#logsEl) {
-      return;
-    }
-
-    const success = this.#logsEl.selectTab('interactions');
-    if (!success) {
-      return;
-    }
-
-    await RenderCoordinator.write(() => {
-      interactionEl.scrollIntoView({
-        block: 'center',
-      });
-      interactionEl.focus();
-      UI.UIUtils.runCSSAnimationOnce(interactionEl, 'highlight');
-    });
+  #onEmulationChanged(): void {
+    this.requestUpdate();
   }
 
-  async #logExtraInteractionDetails(interaction: LiveMetrics.Interaction): Promise<void> {
-    const success = await LiveMetrics.LiveMetrics.instance().logInteractionScripts(interaction);
-    if (success) {
-      await Common.Console.Console.instance().showPromise();
+  async #refreshFieldDataForCurrentPage(): Promise<void> {
+    if (!this.isNode) {
+      await this.#cruxManager.refresh();
     }
+    this.requestUpdate();
   }
 
-  #renderInteractionsLog(): Lit.LitTemplate {
-    if (!this.#interactions.size) {
-      return Lit.nothing;
-    }
+  override wasShown(): void {
+    super.wasShown();
+    const liveMetrics = LiveMetrics.LiveMetrics.instance();
+    liveMetrics.addEventListener(LiveMetrics.Events.STATUS, this.#onMetricStatus, this);
 
-    // clang-format off
-    return html`
-      <ol class="log"
-        slot="interactions-log-content"
-        ${Lit.Directives.ref(el => {
-          if (el instanceof HTMLElement) {
-            this.#interactionsListEl = el as HTMLElement;
-          }
-        })}
-      >
-        ${this.#interactions.values().map(interaction => {
-          const metricValue = renderMetricValue(
-            'timeline.landing.interaction-event-timing',
-            interaction.duration,
-            INP_THRESHOLDS,
-            v => i18n.TimeUtilities.preciseMillisToString(v),
-            {dim: true},
-          );
-
-          const isP98Excluded = this.#inpValue && this.#inpValue.value < interaction.duration;
-          const isInp = this.#inpValue?.interactionId === interaction.interactionId;
-
-          return html`
-            <li id=${interaction.interactionId} class="log-item interaction" tabindex="-1">
-              <details>
-                <summary>
-                  <span class="interaction-type">
-                    ${interaction.interactionType} ${isInp ?
-                      html`<span class="interaction-inp-chip" title=${i18nString(UIStrings.inpInteraction)}>INP</span>`
-                    : nothing}
-                  </span>
-                  <span class="interaction-node">
-                    ${widget(PanelsCommon.DOMLinkifier.DOMNodeLink, {node: interaction.nodeRef})}
-                  </span>
-                  ${isP98Excluded ? html`<devtools-icon
-                    class="interaction-info"
-                    name="info"
-                    title=${i18nString(UIStrings.interactionExcluded)}
-                  ></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 role="columnheader">
-                      ${interaction.longAnimationFrameTimings.length ? html`
-                        <button
-                          class="log-extra-details-button"
-                          title=${i18nString(UIStrings.logToConsole)}
-                          @click=${() => this.#logExtraInteractionDetails(interaction)}
-                        >${i18nString(UIStrings.duration)}</button>
-                      ` : i18nString(UIStrings.duration)}
-                    </div>
-                  </div>
-                  <div class="phase-table-row" role="row">
-                    <div role="cell">${i18nString(UIStrings.inputDelay)}</div>
-                    <div role="cell">${Math.round(interaction.phases.inputDelay)}</div>
-                  </div>
-                  <div class="phase-table-row" role="row">
-                    <div role="cell">${i18nString(UIStrings.processingDuration)}</div>
-                    <div role="cell">${Math.round(interaction.phases.processingDuration)}</div>
-                  </div>
-                  <div class="phase-table-row" role="row">
-                    <div role="cell">${i18nString(UIStrings.presentationDelay)}</div>
-                    <div role="cell">${Math.round(interaction.phases.presentationDelay)}</div>
-                  </div>
-                </div>
-              </details>
-            </li>
-          `;
-        })}
-      </ol>
-    `;
-    // clang-format on
-  }
+    const cruxManager = CrUXManager.CrUXManager.instance();
+    cruxManager.addEventListener(CrUXManager.Events.FIELD_DATA_CHANGED, this.#onFieldDataChanged, this);
 
-  async #revealLayoutShiftCluster(clusterIds: Set<LiveMetrics.LayoutShift['uniqueLayoutShiftId']>): Promise<void> {
-    if (!this.#logsEl) {
-      return;
-    }
+    this.#deviceModeModel?.addEventListener(
+        EmulationModel.DeviceModeModel.Events.UPDATED, this.#onEmulationChanged, this);
 
-    const layoutShiftEls: HTMLElement[] = [];
-    for (const shiftId of clusterIds) {
-      const layoutShiftEl = this.#shadow.getElementById(shiftId);
-      if (layoutShiftEl) {
-        layoutShiftEls.push(layoutShiftEl);
-      }
+    if (cruxManager.getConfigSetting().get().enabled) {
+      void this.#refreshFieldDataForCurrentPage();
     }
 
-    if (!layoutShiftEls.length) {
-      return;
-    }
+    this.#lcpValue = liveMetrics.lcpValue;
+    this.#clsValue = liveMetrics.clsValue;
+    this.#inpValue = liveMetrics.inpValue;
+    this.#interactions = liveMetrics.interactions;
+    this.#layoutShifts = liveMetrics.layoutShifts;
+    this.requestUpdate();
+  }
 
-    const success = this.#logsEl.selectTab('layout-shifts');
-    if (!success) {
-      return;
-    }
+  override willHide(): void {
+    super.willHide();
+    LiveMetrics.LiveMetrics.instance().removeEventListener(LiveMetrics.Events.STATUS, this.#onMetricStatus, this);
 
-    await RenderCoordinator.write(() => {
-      layoutShiftEls[0].scrollIntoView({
-        block: 'start',
-      });
-      layoutShiftEls[0].focus();
-      for (const layoutShiftEl of layoutShiftEls) {
-        UI.UIUtils.runCSSAnimationOnce(layoutShiftEl, 'highlight');
-      }
-    });
+    const cruxManager = CrUXManager.CrUXManager.instance();
+    cruxManager.removeEventListener(CrUXManager.Events.FIELD_DATA_CHANGED, this.#onFieldDataChanged, this);
+
+    this.#deviceModeModel?.removeEventListener(
+        EmulationModel.DeviceModeModel.Events.UPDATED, this.#onEmulationChanged, this);
   }
 
-  #renderLayoutShiftsLog(): Lit.LitTemplate {
-    if (!this.#layoutShifts.length) {
-      return Lit.nothing;
+  #onPageScopeMenuItemSelected(event: Menus.SelectMenu.SelectMenuItemSelectedEvent): void {
+    if (event.itemValue === 'url') {
+      this.#cruxManager.fieldPageScope = 'url';
+    } else {
+      this.#cruxManager.fieldPageScope = 'origin';
     }
+    this.requestUpdate();
+  }
 
-    // clang-format off
-    return html`
-      <ol class="log"
-        slot="layout-shifts-log-content"
-        ${Lit.Directives.ref(el => {
-          if (el instanceof HTMLElement) {
-            this.#layoutShiftsListEl = el as HTMLElement;
-          }
-        })}
-      >
-        ${this.#layoutShifts.map(layoutShift => {
-          const metricValue = renderMetricValue(
-            'timeline.landing.layout-shift-event-score',
-            layoutShift.score,
-            CLS_THRESHOLDS,
-            // CLS value is 2 decimal places, but individual shift scores tend to be much smaller
-            // so we expand the precision here.
-            v => v.toFixed(4),
-            {dim: true},
-          );
-
-          return html`
-            <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.affectedNodeRefs.map(node => html`
-                  <div class="layout-shift-node">
-                    ${widget(PanelsCommon.DOMLinkifier.DOMNodeLink, {node})}
-                  </div>
-                `)}
-              </div>
-            </li>
-          `;
-        })}
-      </ol>
-    `;
-    // clang-format on
+  #onDeviceOptionMenuItemSelected(event: Menus.SelectMenu.SelectMenuItemSelectedEvent): void {
+    this.#cruxManager.fieldDeviceOption = event.itemValue as DeviceOption;
+    this.requestUpdate();
   }
 
-  #renderNodeView(): Lit.LitTemplate {
-    return html`
-      <style>${liveMetricsViewStyles}</style>
-      <style>${metricValueStyles}</style>
-      <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>
-    `;
+  async #revealInteraction(interaction: LiveMetrics.Interaction): Promise<void> {
+    this.#highlightedInteractionId = interaction.interactionId;
+    this.requestUpdate();
+    await this.updateComplete;
+    this.#highlightedInteractionId = '';
   }
 
-  #render = (): void => {
-    if (this.isNode) {
-      Lit.render(this.#renderNodeView(), this.#shadow, {host: this});
-      return;
+  async #logExtraInteractionDetails(interaction: LiveMetrics.Interaction): Promise<void> {
+    const success = await LiveMetrics.LiveMetrics.instance().logInteractionScripts(interaction);
+    if (success) {
+      await Common.Console.Console.instance().showPromise();
     }
+  }
 
-    const fieldEnabled = this.#cruxManager.getConfigSetting().get().enabled;
-    const liveMetricsTitle =
-        fieldEnabled ? i18nString(UIStrings.localAndFieldMetrics) : i18nString(UIStrings.localMetrics);
-
-    const helpLink = 'https://web.dev/articles/lab-and-field-data-differences#lab_data_versus_field_data' as
-        Platform.DevToolsPath.UrlString;
-
-    // clang-format off
-    const output = html`
-      <style>${liveMetricsViewStyles}</style>
-      <style>${metricValueStyles}</style>
-      <div class="container">
-        <div class="live-metrics-view">
-          <main class="live-metrics">
-            <h2 class="section-title">${liveMetricsTitle}</h2>
-            <div class="metric-cards"
-              ${Lit.Directives.ref(el => {
-                if (el instanceof HTMLElement) {
-                  this.#tooltipContainerEl = el;
-                }
-              })}
-            >
-              <div id="lcp">
-                ${this.#renderLcpCard()}
-              </div>
-              <div id="cls">
-                ${this.#renderClsCard()}
-              </div>
-              <div id="inp">
-                ${this.#renderInpCard()}
-              </div>
-            </div>
-            <devtools-link
-              href=${helpLink}
-              class="local-field-link"
-              title=${i18nString(UIStrings.localFieldLearnMoreTooltip)}
-            >${i18nString(UIStrings.localFieldLearnMoreLink)}</devtools-link>
-            ${this.#renderLogSection()}
-          </main>
-          <aside class="next-steps" aria-labelledby="next-steps-section-title">
-            <h2 id="next-steps-section-title" class="section-title">${i18nString(UIStrings.nextSteps)}</h2>
-            <div id="field-setup" class="settings-card">
-              <h3 class="card-title">${i18nString(UIStrings.fieldMetricsTitle)}</h3>
-              ${this.#renderFieldDataMessage()}
-              ${this.#renderPageScopeSetting()}
-              ${this.#renderDeviceScopeSetting()}
-              <div class="field-setup-buttons">
-                <devtools-field-settings-dialog></devtools-field-settings-dialog>
-              </div>
-            </div>
-            <div id="recording-settings" class="settings-card">
-              ${this.#renderRecordingSettings()}
-            </div>
-            <div id="record" class="record-action-card">
-              ${this.#renderRecordAction(this.#toggleRecordAction)}
-            </div>
-            <div id="record-page-load" class="record-action-card">
-              ${this.#renderRecordAction(this.#recordReloadAction)}
-            </div>
-          </aside>
-        </div>
-      </div>
-    `;
-    Lit.render(output, this.#shadow, {host: this});
-  };
-  // clang-format on
-}
+  async #revealLayoutShiftCluster(clusterIds: Set<LiveMetrics.LayoutShift['uniqueLayoutShiftId']>): Promise<void> {
+    this.#highlightedLayoutShiftClusterIds = clusterIds;
+    this.requestUpdate();
+    await this.updateComplete;
+    this.#highlightedLayoutShiftClusterIds = new Set();
+  }
 
-class LiveMetricsLogs extends UI.Widget.WidgetElement<UI.Widget.Widget> {
-  #tabbedPane?: UI.TabbedPane.TabbedPane;
+  override performUpdate(): void {
+    const viewInput: ViewInput = {
+      isNode: this.isNode,
+      lcpValue: this.#lcpValue,
+      clsValue: this.#clsValue,
+      inpValue: this.#inpValue,
+      interactions: this.#interactions,
+      layoutShifts: this.#layoutShifts,
+      toggleRecordAction: this.#toggleRecordAction,
+      recordReloadAction: this.#recordReloadAction,
+      cruxManager: this.#cruxManager,
+      handlePageScopeSelected: this.#onPageScopeMenuItemSelected.bind(this),
+      handleDeviceOptionSelected: this.#onDeviceOptionMenuItemSelected.bind(this),
+      revealLayoutShiftCluster: this.#revealLayoutShiftCluster.bind(this),
+      revealInteraction: this.#revealInteraction.bind(this),
+      logExtraInteractionDetails: this.#logExtraInteractionDetails.bind(this),
+      highlightedInteractionId: this.#highlightedInteractionId,
+      highlightedLayoutShiftClusterIds: this.#highlightedLayoutShiftClusterIds,
+    };
 
-  constructor() {
-    super();
-    this.style.display = 'contents';
+    this.#view(viewInput, this.#viewOutput, this.contentElement);
   }
+}
+
+class LiveMetricsLogs extends UI.Widget.Widget {
+  #tabbedPane: UI.TabbedPane.TabbedPane;
 
   /**
    * Returns `true` if selecting the tab was successful.
    */
   selectTab(tabId: string): boolean {
-    if (!this.#tabbedPane) {
-      return false;
-    }
     return this.#tabbedPane.selectTab(tabId);
   }
 
   #clearCurrentLog(): void {
     const liveMetrics = LiveMetrics.LiveMetrics.instance();
 
-    switch (this.#tabbedPane?.selectedTabId) {
+    switch (this.#tabbedPane.selectedTabId) {
       case 'interactions':
         liveMetrics.clearInteractions();
         break;
@@ -1240,16 +1284,12 @@ class LiveMetricsLogs extends UI.Widget.WidgetElement<UI.Widget.Widget> {
         break;
     }
   }
-
-  override createWidget(): UI.Widget.Widget {
-    // We need a generic widget with a shadow DOM as the container widget so that we can take advantage
-    // of web component slots. Passing `this` into the container widget will make `this` the root element
-    // of that widget.
-    //
+  constructor(element: HTMLElement) {
+    super(element, {useShadowDom: true});
+    this.element.style.display = 'contents';
     // Any children of the root element `this` will be matched to the slots defined within the container
     // widget's shadow DOM.
-    const containerWidget = new UI.Widget.Widget(this, {useShadowDom: true});
-    containerWidget.contentElement.style.display = 'contents';
+    this.contentElement.style.display = 'contents';
 
     this.#tabbedPane = new UI.TabbedPane.TabbedPane();
 
@@ -1273,18 +1313,6 @@ class LiveMetricsLogs extends UI.Widget.WidgetElement<UI.Widget.Widget> {
         i18nString(UIStrings.clearCurrentLog), 'clear', undefined, 'timeline.landing.clear-log');
     clearButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.#clearCurrentLog, this);
     this.#tabbedPane.rightToolbar().appendToolbarItem(clearButton);
-    this.#tabbedPane.show(containerWidget.contentElement);
-
-    return containerWidget;
-  }
-}
-
-customElements.define('devtools-live-metrics-view', LiveMetricsView);
-customElements.define('devtools-live-metrics-logs', LiveMetricsLogs);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-live-metrics-view': LiveMetricsView;
-    'devtools-live-metrics-logs': LiveMetricsLogs;
+    this.#tabbedPane.show(this.contentElement);
   }
 }