chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

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

@@ -2,6 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/icon_button/icon_button.js';
+import './CPUThrottlingSelector.js';
+import './FieldSettingsDialog.js';
+import './NetworkThrottlingSelector.js';
+import '../../../ui/components/menus/menus.js';
+import './MetricCard.js';
+
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
@@ -10,28 +17,27 @@ import * as EmulationModel from '../../../models/emulation/emulation.js';
 import * as LiveMetrics from '../../../models/live-metrics/live-metrics.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import * as Menus from '../../../ui/components/menus/menus.js';
-import * as Settings from '../../../ui/components/settings/settings.js';
-import * as Components from '../../../ui/legacy/components/utils/utils.js';
+import type * as Menus from '../../../ui/components/menus/menus.js';
+import * as Coordinator 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 {CPUThrottlingSelector} from './CPUThrottlingSelector.js';
-import {FieldSettingsDialog} from './FieldSettingsDialog.js';
 import liveMetricsViewStyles from './liveMetricsView.css.js';
-import {MetricCard, type MetricCardData} from './MetricCard.js';
+import type {MetricCardData} from './MetricCard.js';
 import metricValueStyles from './metricValueStyles.css.js';
-import {NetworkThrottlingSelector} from './NetworkThrottlingSelector.js';
-import {INP_THRESHOLDS, renderMetricValue} from './Utils.js';
+import {CLS_THRESHOLDS, INP_THRESHOLDS, renderMetricValue} from './Utils.js';
 
 const {html, nothing, Directives} = LitHtml;
 const {until} = Directives;
 
 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;
@@ -46,10 +52,18 @@ const UIStrings = {
    * @description Title of a view that shows performance metrics from the local environment.
    */
   localMetrics: 'Local metrics',
+  /**
+   * @description Accessible label for a section that logs user interactions and layout shifts. A layout shift is an event that shifts content in the layout of the page causing a jarring experience for the user.
+   */
+  eventLogs: 'Interaction and layout shift logs section',
   /**
    * @description Title of a section that lists user interactions.
    */
   interactions: 'Interactions',
+  /**
+   * @description Title of a section that lists layout shifts. A layout shift is an event that shifts content in the layout of the page causing a jarring experience for the user.
+   */
+  layoutShifts: 'Layout shifts',
   /**
    * @description Title of a sidebar section that shows options for the user to take after using the main view.
    */
@@ -172,7 +186,23 @@ const UIStrings = {
   /**
    * @description Text label for a link to the Largest Contentful Paint (LCP) related page element. This element represents the largest content on the page. "LCP" should not be translated.
    */
-  lcpElement: 'LCP Element',
+  lcpElement: 'LCP element',
+  /**
+   * @description Text label for a button that reveals the user interaction associated with the Interaction to Next Paint (INP) performance metric. "INP" should not be translated.
+   */
+  inpInteractionLink: 'INP interaction',
+  /**
+   * @description Text label for a button that reveals the cluster of layout shift events that affected the page content the most. A cluster is a group of layout shift events that occur in quick succession.
+   */
+  worstCluster: 'Worst cluster',
+  /**
+   * @description [ICU Syntax] Text content of a button that reveals the cluster of layout shift events that affected the page content the most. A layout shift is an event that shifts content in the layout of the page causing a jarring experience for the user. This text will indicate how many shifts were in the cluster.
+   * @example {3} shiftCount
+   */
+  numShifts: `{shiftCount, plural,
+    =1 {{shiftCount} shift}
+    other {{shiftCount} shifts}
+  }`,
   /**
    * @description Label for a a range of dates that represents the period of time a set of field data is collected from.
    */
@@ -212,9 +242,9 @@ const UIStrings = {
   interactionExcluded:
       'INP is calculated using the 98th percentile of interaction delays, so some interaction delays may be larger than the INP value.',
   /**
-   * @description Tooltip for a button that will remove everything from a log that lists user interactions that happened on the page.
+   * @description Tooltip for a button that will remove everything from the currently selected log.
    */
-  clearInteractionsLog: 'Clear interactions log',
+  clearCurrentLog: 'Clear the current log',
   /**
    * @description Title for an expandable 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.
    */
@@ -255,19 +285,23 @@ const UIStrings = {
    * @description Tooltip text for a button that reveals the user interaction associated with the Interaction to Next Paint (INP) performance metric.
    */
   showInpInteraction: 'Go to the INP interaction.',
+  /**
+   * @description Tooltip text for a button that reveals the cluster of layout shift events that affected the page content the most. A layout shift is an event that shifts content in the layout of the page causing a jarring experience for the user. A cluster is a group of layout shift events that occur in quick succession.
+   */
+  showClsCluster: 'Go to worst layout shift cluster.',
 };
 
 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 {
-  static readonly litTagName = LitHtml.literal`devtools-live-metrics-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #lcpValue?: LiveMetrics.LCPValue;
   #clsValue?: LiveMetrics.CLSValue;
   #inpValue?: LiveMetrics.INPValue;
   #interactions: LiveMetrics.Interaction[] = [];
+  #layoutShifts: LiveMetrics.LayoutShift[] = [];
 
   #cruxPageResult?: CrUXManager.PageResult;
 
@@ -277,29 +311,17 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
   #toggleRecordAction: UI.ActionRegistration.Action;
   #recordReloadAction: UI.ActionRegistration.Action;
 
+  #logsEl?: LiveMetricsLogs;
   #tooltipContainerEl?: Element;
   #interactionsListEl?: HTMLElement;
-  #interactionsListScrolling = false;
+  #layoutShiftsListEl?: HTMLElement;
+  #listIsScrolling = false;
 
   constructor() {
     super();
 
     this.#toggleRecordAction = UI.ActionRegistry.ActionRegistry.instance().getAction('timeline.toggle-recording');
     this.#recordReloadAction = UI.ActionRegistry.ActionRegistry.instance().getAction('timeline.record-reload');
-
-    const interactionRevealer = new InteractionRevealer(this);
-
-    Common.Revealer.registerRevealer({
-      contextTypes() {
-        return [LiveMetrics.Interaction];
-      },
-      destination: Common.Revealer.RevealerDestination.TIMELINE_PANEL,
-      async loadRevealer() {
-        return interactionRevealer;
-      },
-    });
-
-    this.#render();
   }
 
   #onMetricStatus(event: {data: LiveMetrics.StatusEvent}): void {
@@ -307,13 +329,25 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     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 hasNewInteraction = this.#interactions.length < event.data.interactions.length;
     this.#interactions = [...event.data.interactions];
 
     const renderPromise = ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
 
-    const listEl = this.#interactionsListEl;
-    if (!hasNewInteraction || !listEl) {
+    if (hasNewInteraction && this.#interactionsListEl) {
+      this.#keepScrolledToBottom(renderPromise, this.#interactionsListEl);
+    }
+
+    if (hasNewLS && this.#layoutShiftsListEl) {
+      this.#keepScrolledToBottom(renderPromise, this.#layoutShiftsListEl);
+    }
+  }
+
+  #keepScrolledToBottom(renderPromise: Promise<void>, listEl: HTMLElement): void {
+    if (!listEl.checkVisibility()) {
       return;
     }
 
@@ -323,15 +357,15 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     // 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.#interactionsListScrolling) {
+    if (!isAtBottom && !this.#listIsScrolling) {
       return;
     }
 
     void renderPromise.then(() => {
       requestAnimationFrame(() => {
-        this.#interactionsListScrolling = true;
+        this.#listIsScrolling = true;
         listEl.addEventListener('scrollend', () => {
-          this.#interactionsListScrolling = false;
+          this.#listIsScrolling = false;
         }, {once: true});
         listEl.scrollTo({top: listEl.scrollHeight, behavior: 'smooth'});
       });
@@ -381,6 +415,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     this.#clsValue = liveMetrics.clsValue;
     this.#inpValue = liveMetrics.inpValue;
     this.#interactions = liveMetrics.interactions;
+    this.#layoutShifts = liveMetrics.layoutShifts;
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
   }
 
@@ -415,7 +450,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
 
     // clang-format off
     return html`
-      <${MetricCard.litTagName} .data=${{
+      <devtools-metric-card .data=${{
         metric: 'LCP',
         localValue: this.#lcpValue?.value,
         fieldValue: fieldData?.percentiles?.p75,
@@ -435,7 +470,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
             </div>
           `
           : nothing}
-      </${MetricCard.litTagName}>
+      </devtools-metric-card>
     `;
     // clang-format on
   }
@@ -443,16 +478,31 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
   #renderClsCard(): LitHtml.LitTemplate {
     const fieldData = this.#getFieldMetricData('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`
-      <${MetricCard.litTagName} .data=${{
+      <devtools-metric-card .data=${{
         metric: 'CLS',
         localValue: this.#clsValue?.value,
         fieldValue: fieldData?.percentiles?.p75,
         histogram: fieldData?.histogram,
         tooltipContainer: this.#tooltipContainerEl,
       } as MetricCardData}>
-      </${MetricCard.litTagName}>
+        ${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
   }
@@ -463,21 +513,9 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     const interaction =
         this.#interactions.find(interaction => interaction.uniqueInteractionId === this.#inpValue?.uniqueInteractionId);
 
-    let interactionLink;
-    if (interaction) {
-      interactionLink = Components.Linkifier.Linkifier.linkifyRevealable(
-          interaction,
-          interaction.interactionType,
-          undefined,
-          i18nString(UIStrings.showInpInteraction),
-          'link-to-interaction',
-      );
-      interactionLink.tabIndex = 0;
-    }
-
     // clang-format off
     return html`
-      <${MetricCard.litTagName} .data=${{
+      <devtools-metric-card .data=${{
         metric: 'INP',
         localValue: this.#inpValue?.value,
         fieldValue: fieldData?.percentiles?.p75,
@@ -489,13 +527,18 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
           [i18nString(UIStrings.presentationDelay), phases.presentationDelay],
         ],
       } as MetricCardData}>
-        ${interactionLink ? html`
+        ${interaction ? html`
           <div class="related-info" slot="extra-info">
-            <span class="related-info-label">INP interaction</span>
-            ${interactionLink}
+            <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}
-      </${MetricCard.litTagName}>
+      </devtools-metric-card>
     `;
     // clang-format on
   }
@@ -508,7 +551,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     // clang-format off
     return html`
       <div class="record-action">
-        <${Buttons.Button.Button.litTagName} @click=${onClick} .data=${{
+        <devtools-button @click=${onClick} .data=${{
             variant: Buttons.Button.Variant.TEXT,
             size: Buttons.Button.Size.REGULAR,
             iconName: action.icon(),
@@ -516,7 +559,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
             jslogContext: action.id(),
         } as Buttons.Button.ButtonData}>
           ${action.title()}
-        </${Buttons.Button.Button.litTagName}>
+        </devtools-button>
         <span class="shortcut-label">${UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutTitleForAction(action.id())}</span>
       </div>
     `;
@@ -611,24 +654,24 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         </details>
       ` : nothing}
       <div class="environment-option">
-        <${CPUThrottlingSelector.litTagName}></${CPUThrottlingSelector.litTagName}>
+        <devtools-cpu-throttling-selector></devtools-cpu-throttling-selector>
       </div>
       <div class="environment-option">
-        <${NetworkThrottlingSelector.litTagName}></${NetworkThrottlingSelector.litTagName}>
+        <devtools-network-throttling-selector></devtools-network-throttling-selector>
       </div>
       <div class="environment-option">
-        <${Settings.SettingCheckbox.SettingCheckbox.litTagName}
+        <setting-checkbox
           class="network-cache-setting"
           .data=${{
             setting: Common.Settings.Settings.instance().moduleSetting('cache-disabled'),
             textOverride: i18nString(UIStrings.disableNetworkCache),
           } as Settings.SettingCheckbox.SettingCheckboxData}
-        ></${Settings.SettingCheckbox.SettingCheckbox.litTagName}>
-        <${IconButton.Icon.Icon.litTagName}
+        ></setting-checkbox>
+        <devtools-icon
           class="setting-hint"
           name="help"
           title=${i18nString(UIStrings.networkCacheExplanation)}
-        ></${IconButton.Icon.Icon.litTagName}>
+        ></devtools-icon>
         </div>
     `;
     // clang-format on
@@ -669,7 +712,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     const shouldDisable = !this.#cruxPageResult?.['url-ALL'] && !this.#cruxPageResult?.['origin-ALL'];
 
     return html`
-      <${Menus.SelectMenu.SelectMenu.litTagName}
+      <devtools-select-menu
         id="page-scope-select"
         class="field-data-option"
         @selectmenuselected=${this.#onPageScopeMenuItemSelected}
@@ -682,19 +725,19 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         .disabled=${shouldDisable}
         title=${accessibleTitle}
       >
-        <${Menus.Menu.MenuItem.litTagName}
+        <devtools-menu-item
           .value=${'url'}
           .selected=${this.#fieldPageScope === 'url'}
         >
           ${urlLabel}
-        </${Menus.Menu.MenuItem.litTagName}>
-        <${Menus.Menu.MenuItem.litTagName}
+        </devtools-menu-item>
+        <devtools-menu-item
           .value=${'origin'}
           .selected=${this.#fieldPageScope === 'origin'}
         >
           ${originLabel}
-        </${Menus.Menu.MenuItem.litTagName}>
-      </${Menus.SelectMenu.SelectMenu.litTagName}>
+        </devtools-menu-item>
+      </devtools-select-menu>
     `;
   }
 
@@ -767,7 +810,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
 
     // clang-format off
     return html`
-      <${Menus.SelectMenu.SelectMenu.litTagName}
+      <devtools-select-menu
         id="device-scope-select"
         class="field-data-option"
         @selectmenuselected=${this.#onDeviceOptionMenuItemSelected}
@@ -782,15 +825,15 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
       >
         ${DEVICE_OPTION_LIST.map(deviceOption => {
           return html`
-            <${Menus.Menu.MenuItem.litTagName}
+            <devtools-menu-item
               .value=${deviceOption}
               .selected=${this.#fieldDeviceOption === deviceOption}
             >
               ${this.#getLabelForDeviceOption(deviceOption)}
-            </${Menus.Menu.MenuItem.litTagName}>
+            </devtools-menu-item>
           `;
         })}
-      </${Menus.SelectMenu.SelectMenu.litTagName}>
+      </devtools-select-menu>
     `;
     // clang-format on
   }
@@ -869,68 +912,161 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     `;
   }
 
-  #clearInteractionsLog(): void {
-    LiveMetrics.LiveMetrics.instance().clearInteractions();
+  #renderLogSection(): LitHtml.LitTemplate {
+    // clang-format off
+    return html`
+      <section class="logs-section" aria-label=${i18nString(UIStrings.eventLogs)}>
+        <devtools-live-metrics-logs
+          on-render=${ComponentHelpers.Directives.nodeRenderedCallback(node => {
+            this.#logsEl = node as LiveMetricsLogs;
+          })}
+        >
+          ${this.#renderInteractionsLog()}
+          ${this.#renderLayoutShiftsLog()}
+        </devtools-live-metrics-logs>
+      </section>
+    `;
+    // clang-format on
+  }
+
+  async #revealInteraction(interaction: LiveMetrics.Interaction): Promise<void> {
+    const interactionEl = this.#shadow.getElementById(interaction.uniqueInteractionId);
+    if (!interactionEl || !this.#logsEl) {
+      return;
+    }
+
+    const success = this.#logsEl.selectTab('interactions');
+    if (!success) {
+      return;
+    }
+
+    await coordinator.write(() => {
+      interactionEl.scrollIntoView({
+        block: 'center',
+      });
+      interactionEl.focus();
+      UI.UIUtils.runCSSAnimationOnce(interactionEl, 'highlight');
+    });
   }
 
-  #renderInteractionsSection(): LitHtml.LitTemplate {
+  #renderInteractionsLog(): LitHtml.LitTemplate {
     if (!this.#interactions.length) {
       return LitHtml.nothing;
     }
 
     // clang-format off
     return html`
-      <section class="interactions-section" aria-labelledby="interactions-section-title">
-        <h2 id="interactions-section-title" class="section-title">
-          ${i18nString(UIStrings.interactions)}
-          <${Buttons.Button.Button.litTagName}
-            class="interactions-clear"
-            title=${i18nString(UIStrings.clearInteractionsLog)}
-            @click=${this.#clearInteractionsLog}
-            .data=${{
-              variant: Buttons.Button.Variant.ICON,
-              size: Buttons.Button.Size.REGULAR,
-              iconName: 'clear',
-            } as Buttons.Button.ButtonData}></${Buttons.Button.Button.litTagName}>
-        </h2>
-        <ol class="interactions-list"
-          on-render=${ComponentHelpers.Directives.nodeRenderedCallback(node => {
-            this.#interactionsListEl = node as HTMLElement;
-          })}
-        >
-          ${this.#interactions.map(interaction => {
-            const metricValue = renderMetricValue(
-              'timeline.landing.interaction-event-timing',
-              interaction.duration,
-              INP_THRESHOLDS,
-              v => i18n.TimeUtilities.millisToString(v),
-              {dim: true},
-            );
-
-            const isP98Excluded = this.#inpValue && this.#inpValue.value < interaction.duration;
-            const isInp = this.#inpValue?.uniqueInteractionId === interaction.uniqueInteractionId;
-
-            return html`
-              <li id=${interaction.uniqueInteractionId} class="interaction" tabindex="-1">
-                <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">${
-                  interaction.node && until(Common.Linkifier.Linkifier.linkify(interaction.node))}</span>
-                ${isP98Excluded ? html`<${IconButton.Icon.Icon.litTagName}
-                  class="interaction-info"
-                  name="info"
-                  title=${i18nString(UIStrings.interactionExcluded)}
-                ></${IconButton.Icon.Icon.litTagName}>` : nothing}
-                <span class="interaction-duration">${metricValue}</span>
-              </li>
-            `;
-          })}
-        </ol>
-      </section>
+      <ol class="log"
+        slot="interactions-log-content"
+        on-render=${ComponentHelpers.Directives.nodeRenderedCallback(node => {
+          this.#interactionsListEl = node as HTMLElement;
+        })}
+      >
+        ${this.#interactions.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?.uniqueInteractionId === interaction.uniqueInteractionId;
+
+          return html`
+            <li id=${interaction.uniqueInteractionId} class="log-item interaction" tabindex="-1">
+              <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">${
+                interaction.node && until(Common.Linkifier.Linkifier.linkify(interaction.node))}</span>
+              ${isP98Excluded ? html`<devtools-icon
+                class="interaction-info"
+                name="info"
+                title=${i18nString(UIStrings.interactionExcluded)}
+              ></devtools-icon>` : nothing}
+              <span class="interaction-duration">${metricValue}</span>
+            </li>
+          `;
+        })}
+      </ol>
+    `;
+    // clang-format on
+  }
+
+  async #revealLayoutShiftCluster(clusterIds: Set<LiveMetrics.LayoutShift['uniqueLayoutShiftId']>): Promise<void> {
+    if (!this.#logsEl) {
+      return;
+    }
+
+    const layoutShiftEls: HTMLElement[] = [];
+    for (const shiftId of clusterIds) {
+      const layoutShiftEl = this.#shadow.getElementById(shiftId);
+      if (layoutShiftEl) {
+        layoutShiftEls.push(layoutShiftEl);
+      }
+    }
+
+    if (!layoutShiftEls.length) {
+      return;
+    }
+
+    const success = this.#logsEl.selectTab('layout-shifts');
+    if (!success) {
+      return;
+    }
+
+    await coordinator.write(() => {
+      layoutShiftEls[0].scrollIntoView({
+        block: 'start',
+      });
+      layoutShiftEls[0].focus();
+      for (const layoutShiftEl of layoutShiftEls) {
+        UI.UIUtils.runCSSAnimationOnce(layoutShiftEl, 'highlight');
+      }
+    });
+  }
+
+  #renderLayoutShiftsLog(): LitHtml.LitTemplate {
+    if (!this.#layoutShifts.length) {
+      return LitHtml.nothing;
+    }
+
+    // clang-format off
+    return html`
+      <ol class="log"
+        slot="layout-shifts-log-content"
+        on-render=${ComponentHelpers.Directives.nodeRenderedCallback(node => {
+          this.#layoutShiftsListEl = node 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.affectedNodes.map(({node}) => html`
+                  <div class="layout-shift-node">${until(Common.Linkifier.Linkifier.linkify(node))}</div>
+                `)}
+              </div>
+            </li>
+          `;
+        })}
+      </ol>
     `;
     // clang-format on
   }
@@ -963,7 +1099,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
               </div>
             </div>
             ${this.#renderDataDescriptions()}
-            ${this.#renderInteractionsSection()}
+            ${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>
@@ -973,7 +1109,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
               ${this.#renderPageScopeSetting()}
               ${this.#renderDeviceScopeSetting()}
               <div class="field-setup-buttons">
-                <${FieldSettingsDialog.litTagName}></${FieldSettingsDialog.litTagName}>
+                <devtools-field-settings-dialog></devtools-field-settings-dialog>
               </div>
             </div>
             <div id="recording-settings" class="settings-card">
@@ -994,31 +1130,81 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
   // clang-format on
 }
 
-export class InteractionRevealer implements Common.Revealer.Revealer<LiveMetrics.Interaction> {
-  #view: LiveMetricsView;
+class LiveMetricsLogs extends UI.Widget.WidgetElement<UI.Widget.Widget> {
+  #tabbedPane?: UI.TabbedPane.TabbedPane;
 
-  constructor(view: LiveMetricsView) {
-    this.#view = view;
+  constructor() {
+    super();
+    this.style.display = 'contents';
   }
 
-  async reveal(interaction: LiveMetrics.Interaction): Promise<void> {
-    const interactionEl = this.#view.shadowRoot?.getElementById(interaction.uniqueInteractionId);
-    if (!interactionEl) {
-      return;
+  /**
+   * Returns `true` if selecting the tab was successful.
+   */
+  selectTab(tabId: string): boolean {
+    if (!this.#tabbedPane) {
+      return false;
     }
+    return this.#tabbedPane.selectTab(tabId);
+  }
 
-    interactionEl.scrollIntoView({
-      block: 'center',
-    });
-    interactionEl.focus();
-    UI.UIUtils.runCSSAnimationOnce(interactionEl, 'highlight');
+  #clearCurrentLog(): void {
+    const liveMetrics = LiveMetrics.LiveMetrics.instance();
+
+    switch (this.#tabbedPane?.selectedTabId) {
+      case 'interactions':
+        liveMetrics.clearInteractions();
+        break;
+      case 'layout-shifts':
+        liveMetrics.clearLayoutShifts();
+        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.
+    //
+    // 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(true, undefined, this);
+    containerWidget.contentElement.style.display = 'contents';
+
+    this.#tabbedPane = new UI.TabbedPane.TabbedPane();
+
+    // Taking advantage of web component slots allows us to render updates in the lit templates defined in the
+    // main component. This should be more performant and doesn't require us to inject live metrics styles twice.
+    const interactionsSlot = document.createElement('slot');
+    interactionsSlot.name = 'interactions-log-content';
+    const interactionsTab = UI.Widget.Widget.getOrCreateWidget(interactionsSlot);
+    this.#tabbedPane.appendTab(
+        'interactions', i18nString(UIStrings.interactions), interactionsTab, undefined, undefined, undefined, undefined,
+        undefined, 'timeline.landing.interactions-log');
+
+    const layoutShiftsSlot = document.createElement('slot');
+    layoutShiftsSlot.name = 'layout-shifts-log-content';
+    const layoutShiftsTab = UI.Widget.Widget.getOrCreateWidget(layoutShiftsSlot);
+    this.#tabbedPane.appendTab(
+        'layout-shifts', i18nString(UIStrings.layoutShifts), layoutShiftsTab, undefined, undefined, undefined,
+        undefined, undefined, 'timeline.landing.layout-shifts-log');
+
+    const clearButton = new UI.Toolbar.ToolbarButton(
+        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;
   }
 }