chrome-devtools-frontend 1.0.1386602 → 1.0.1418433

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

@@ -3,18 +3,27 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
+import * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
+import * as CrUXManager from '../../../models/crux-manager/crux-manager.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 LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as Lit from '../../../ui/lit/lit.js';
+import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
+import {md} from '../utils/Helpers.js';
 
 import {shouldRenderForCategory} from './insights/Helpers.js';
 import * as Insights from './insights/insights.js';
 import type {ActiveInsight} from './Sidebar.js';
-import styles from './sidebarSingleInsightSet.css.js';
-import {NumberWithUnit, type NumberWithUnitString} from './Utils.js';
+import stylesRaw from './sidebarSingleInsightSet.css.js';
+import {determineCompareRating, NumberWithUnit} from './Utils.js';
 
-const {html} = LitHtml;
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const styles = new CSSStyleSheet();
+styles.replaceSync(stylesRaw.cssContent);
+
+const {html} = Lit.StaticHtml;
 
 const UIStrings = {
   /**
@@ -24,16 +33,55 @@ const UIStrings = {
    *@example {poor} PH3
    */
   metricScore: '{PH1}: {PH2} {PH3} score',
+  /**
+   *@description title used for a metric value to tell the user that the data is unavailable
+   *@example {INP} PH1
+   */
+  metricScoreUnavailable: '{PH1}: unavailable',
+  /**
+   * @description Summary text for an expandable dropdown that contains all insights in a passing state.
+   * @example {4} PH1
+   */
+  passedInsights: 'Passed insights ({PH1})',
+  /**
+   * @description Label denoting that metrics were observed in the field, from real use data (CrUX). Also denotes if from URL or Origin dataset.
+   * @example {URL} PH1
+   */
+  fieldScoreLabel: 'Field ({PH1})',
+  /**
+   * @description Label for an option that selects the page's specific URL as opposed to it's entire origin/domain.
+   */
+  urlOption: 'URL',
+  /**
+   * @description Label for an option that selects the page's entire origin/domain as opposed to it's specific URL.
+   */
+  originOption: 'Origin',
+  /**
+   * @description Title for button that closes a warning popup.
+   */
+  dismissTitle: 'Dismiss',
+  /**
+   * @description Title shown in a warning dialog when field metrics (collected from real users) is worse than the locally observed metrics.
+   */
+  fieldMismatchTitle: 'Field & local metrics mismatch',
+  /**
+   * @description Text shown in a warning dialog when field metrics (collected from real users) is worse than the locally observed metrics.
+   * Asks user to use features such as throttling and device emulation.
+   */
+  fieldMismatchNotice:
+      'There are many reasons why local and field metrics [may not match](https://web.dev/articles/lab-and-field-data-differences). ' +
+      'Adjust [throttling settings and device emulation](https://developer.chrome.com/docs/devtools/device-mode) to analyze traces more similar to the average user\'s environment.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/SidebarSingleInsightSet.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface SidebarSingleInsightSetData {
-  parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
   insights: Trace.Insights.Types.TraceInsightSets|null;
   insightSetKey: Trace.Types.Events.NavigationId|null;
   activeCategory: Trace.Insights.Types.InsightCategory;
   activeInsight: ActiveInsight|null;
+  parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
+  traceMetadata: Trace.Types.File.MetaData|null;
 }
 
 /**
@@ -43,25 +91,32 @@ export interface SidebarSingleInsightSetData {
  * users. */
 const EXPERIMENTAL_INSIGHTS: ReadonlySet<string> = new Set([
   'FontDisplay',
+  'LongCriticalNetworkTree',
 ]);
 
+type InsightNameToComponentMapping = Record<
+    string, typeof Insights.BaseInsightComponent.BaseInsightComponent<Trace.Insights.Types.InsightModel<{}, {}>>>;
+
 /**
- * Every insight (INCLUDING experimental ones)
- * The order of these properties is the order the insights will be shown in the sidebar.
- * TODO(crbug.com/368135130): sort this in a smart way!
+ * Every insight (INCLUDING experimental ones).
+ *
+ * Order does not matter (but keep alphabetized).
  */
-const INSIGHT_NAME_TO_COMPONENT = {
-  InteractionToNextPaint: Insights.InteractionToNextPaint.InteractionToNextPaint,
-  LCPPhases: Insights.LCPPhases.LCPPhases,
-  LCPDiscovery: Insights.LCPDiscovery.LCPDiscovery,
+const INSIGHT_NAME_TO_COMPONENT: InsightNameToComponentMapping = {
   CLSCulprits: Insights.CLSCulprits.CLSCulprits,
-  RenderBlocking: Insights.RenderBlocking.RenderBlocking,
-  ImageDelivery: Insights.ImageDelivery.ImageDelivery,
+  DOMSize: Insights.DOMSize.DOMSize,
   DocumentLatency: Insights.DocumentLatency.DocumentLatency,
   FontDisplay: Insights.FontDisplay.FontDisplay,
-  Viewport: Insights.Viewport.Viewport,
-  ThirdParties: Insights.ThirdParties.ThirdParties,
+  ImageDelivery: Insights.ImageDelivery.ImageDelivery,
+  InteractionToNextPaint: Insights.InteractionToNextPaint.InteractionToNextPaint,
+  LCPDiscovery: Insights.LCPDiscovery.LCPDiscovery,
+  LCPPhases: Insights.LCPPhases.LCPPhases,
+  LongCriticalNetworkTree: Insights.LongCriticalNetworkTree.LongCriticalNetworkTree,
+  RenderBlocking: Insights.RenderBlocking.RenderBlocking,
   SlowCSSSelector: Insights.SlowCSSSelector.SlowCSSSelector,
+  ThirdParties: Insights.ThirdParties.ThirdParties,
+  ForcedReflow: Insights.ForcedReflow.ForcedReflow,
+  Viewport: Insights.Viewport.Viewport,
 };
 
 export class SidebarSingleInsightSet extends HTMLElement {
@@ -69,13 +124,16 @@ export class SidebarSingleInsightSet extends HTMLElement {
   #renderBound = this.#render.bind(this);
 
   #data: SidebarSingleInsightSetData = {
-    parsedTrace: null,
     insights: null,
     insightSetKey: null,
     activeCategory: Trace.Insights.Types.InsightCategory.ALL,
     activeInsight: null,
+    parsedTrace: null,
+    traceMetadata: null,
   };
 
+  #dismissedFieldMismatchNotice = false;
+
   set data(data: SidebarSingleInsightSetData) {
     this.#data = data;
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#renderBound);
@@ -96,12 +154,34 @@ export class SidebarSingleInsightSet extends HTMLElement {
     this.dispatchEvent(new Insights.EventRef.EventReferenceClick(traceEvent));
   }
 
-  #renderMetricValue(
-      label: 'LCP'|'CLS'|'INP', value: string|NumberWithUnitString,
-      classification: Trace.Handlers.ModelHandlers.PageLoadMetrics.ScoreClassification,
-      eventToSelectOnClick: Trace.Types.Events.Event|null): LitHtml.LitTemplate {
-    const valueText = typeof value === 'string' ? value : value.text;
-    const valueDisplay = typeof value === 'string' ? value : value.element;
+  #renderMetricValue(metric: 'LCP'|'CLS'|'INP', value: number|null, relevantEvent: Trace.Types.Events.Event|null):
+      Lit.LitTemplate {
+    let valueText: string;
+    let valueDisplay: HTMLElement|string;
+    let classification;
+    if (value === null) {
+      valueText = valueDisplay = '-';
+      classification = Trace.Handlers.ModelHandlers.PageLoadMetrics.ScoreClassification.UNCLASSIFIED;
+    } else if (metric === 'LCP') {
+      const micros = value as Trace.Types.Timing.Micro;
+      const {text, element} = NumberWithUnit.formatMicroSecondsAsSeconds(micros);
+      valueText = text;
+      valueDisplay = element;
+      classification =
+          Trace.Handlers.ModelHandlers.PageLoadMetrics.scoreClassificationForLargestContentfulPaint(micros);
+    } else if (metric === 'CLS') {
+      valueText = valueDisplay = value ? value.toFixed(2) : '0';
+      classification = Trace.Handlers.ModelHandlers.LayoutShifts.scoreClassificationForLayoutShift(value);
+    } else if (metric === 'INP') {
+      const micros = value as Trace.Types.Timing.Micro;
+      const {text, element} = NumberWithUnit.formatMicroSecondsAsMillisFixed(micros);
+      valueText = text;
+      valueDisplay = element;
+      classification =
+          Trace.Handlers.ModelHandlers.UserInteractions.scoreClassificationForInteractionToNextPaint(micros);
+    } else {
+      Platform.TypeScriptUtilities.assertNever(metric, `Unexpected metric ${metric}`);
+    }
 
     // NOTE: it is deliberate to use the same value for the title and
     // aria-label; the aria-label is used to give more context to
@@ -109,114 +189,193 @@ export class SidebarSingleInsightSet extends HTMLElement {
     // the red/orange/green classification is, or those who are unable to
     // easily distinguish the visual colour differences.
     // clang-format off
-    const title = i18nString(UIStrings.metricScore, {PH1: label, PH2: valueText, PH3: classification});
+    const title = value !== null ?
+      i18nString(UIStrings.metricScore, {PH1: metric, PH2: valueText, PH3: classification}) :
+      i18nString(UIStrings.metricScoreUnavailable, {PH1: metric});
 
-    return this.#metricIsVisible(label) ? html`
+    return this.#metricIsVisible(metric) ? html`
       <button class="metric"
-        @click=${eventToSelectOnClick ? this.#onClickMetric.bind(this, eventToSelectOnClick) : null}
+        @click=${relevantEvent ? this.#onClickMetric.bind(this, relevantEvent) : null}
         title=${title}
         aria-label=${title}
       >
         <div class="metric-value metric-value-${classification}">${valueDisplay}</div>
-        <div class="metric-label">${label}</div>
       </button>
-    ` : LitHtml.nothing;
+    ` : Lit.nothing;
     // clang-format on
   }
 
-  #getINP(insightSetKey: string):
-      {value: Trace.Types.Timing.MicroSeconds, event: Trace.Types.Events.SyntheticInteractionPair}|null {
-    const insight = Trace.Insights.Common.getInsight('InteractionToNextPaint', this.#data.insights, insightSetKey);
-    if (!insight?.longestInteractionEvent?.dur) {
-      return null;
-    }
+  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+  #getLocalMetrics(insightSetKey: string) {
+    const lcp = Trace.Insights.Common.getLCP(this.#data.insights, insightSetKey);
+    const cls = Trace.Insights.Common.getCLS(this.#data.insights, insightSetKey);
+    const inp = Trace.Insights.Common.getINP(this.#data.insights, insightSetKey);
 
-    const value = insight.longestInteractionEvent.dur;
-    return {value, event: insight.longestInteractionEvent};
+    return {lcp, cls, inp};
   }
 
-  #getLCP(insightSetKey: string):
-      {value: Trace.Types.Timing.MicroSeconds, event: Trace.Types.Events.LargestContentfulPaintCandidate}|null {
-    const insight = Trace.Insights.Common.getInsight('LCPPhases', this.#data.insights, insightSetKey);
-    if (!insight || !insight.lcpMs || !insight.lcpEvent) {
+  #getFieldMetrics(insightSetKey: string): Omit<Trace.Insights.Common.CrUXFieldMetricResults, 'fcp'>|null {
+    const insightSet = this.#data.insights?.get(insightSetKey);
+    if (!insightSet) {
+      return null;
+    }
+
+    const fieldMetricsResults = Trace.Insights.Common.getFieldMetricsForInsightSet(
+        insightSet, this.#data.traceMetadata, CrUXManager.CrUXManager.instance().getSelectedScope());
+    if (!fieldMetricsResults) {
       return null;
     }
 
-    const value = Trace.Helpers.Timing.millisecondsToMicroseconds(insight.lcpMs);
-    return {value, event: insight.lcpEvent};
+    return fieldMetricsResults;
   }
 
-  #getCLS(insightSetKey: string): {value: number, worstShiftEvent: Trace.Types.Events.Event|null} {
-    const insight = Trace.Insights.Common.getInsight('CLSCulprits', this.#data.insights, insightSetKey);
-    if (!insight) {
-      // Unlike the other metrics, there is still a value for this metric even with no data.
-      // This means this view will always display a CLS score.
-      return {value: 0, worstShiftEvent: null};
+  /**
+   * Returns true if LCP or INP are worse in the field than what was observed locally.
+   *
+   * CLS is ignored because the guidance of applying throttling or device emulation doesn't
+   * correlate as much with observing a more average user experience.
+   */
+  #isFieldWorseThanLocal(local: {lcp?: Trace.Types.Timing.Milli, inp?: Trace.Types.Timing.Milli}, field: {
+    lcp?: Trace.Types.Timing.Milli,
+    inp?: Trace.Types.Timing.Milli,
+  }): boolean {
+    if (local.lcp !== undefined && field.lcp !== undefined) {
+      if (determineCompareRating('LCP', local.lcp, field.lcp) === 'better') {
+        return true;
+      }
     }
 
-    // TODO(cjamcl): the CLS insight should be doing this for us.
-    let maxScore = 0;
-    let worstCluster;
-    for (const cluster of insight.clusters) {
-      if (cluster.clusterCumulativeScore > maxScore) {
-        maxScore = cluster.clusterCumulativeScore;
-        worstCluster = cluster;
+    if (local.inp !== undefined && field.inp !== undefined) {
+      if (determineCompareRating('LCP', local.inp, field.inp) === 'better') {
+        return true;
       }
     }
 
-    return {value: maxScore, worstShiftEvent: worstCluster?.worstShiftEvent ?? null};
+    return false;
   }
 
-  #renderMetrics(insightSetKey: string): LitHtml.TemplateResult {
-    const lcp = this.#getLCP(insightSetKey);
-    const cls = this.#getCLS(insightSetKey);
-    const inp = this.#getINP(insightSetKey);
+  #dismissFieldMismatchNotice(): void {
+    this.#dismissedFieldMismatchNotice = true;
+    this.#render();
+  }
+
+  #renderMetrics(insightSetKey: string): Lit.TemplateResult {
+    const local = this.#getLocalMetrics(insightSetKey);
+    const field = this.#getFieldMetrics(insightSetKey);
+
+    const lcpEl = this.#renderMetricValue('LCP', local.lcp?.value ?? null, local.lcp?.event ?? null);
+    const inpEl = this.#renderMetricValue('INP', local.inp?.value ?? null, local.inp?.event ?? null);
+    const clsEl = this.#renderMetricValue('CLS', local.cls.value ?? null, local.cls?.worstClusterEvent ?? null);
+
+    const localMetricsTemplateResult = html`
+      <div class="metrics-row">
+        <span>${lcpEl}</span>
+        <span>${inpEl}</span>
+        <span>${clsEl}</span>
+        <span class="row-label">Local</span>
+      </div>
+      <span class="row-border"></span>
+    `;
+
+    let fieldMetricsTemplateResult;
+    if (field) {
+      const {lcp, inp, cls} = field;
+
+      const lcpEl = this.#renderMetricValue('LCP', lcp?.value ?? null, null);
+      const inpEl = this.#renderMetricValue('INP', inp?.value ?? null, null);
+      const clsEl = this.#renderMetricValue('CLS', cls?.value ?? null, null);
+
+      let scope = i18nString(UIStrings.originOption);
+      if (lcp?.pageScope === 'url' || inp?.pageScope === 'url') {
+        scope = i18nString(UIStrings.urlOption);
+      }
+
+      // clang-format off
+      fieldMetricsTemplateResult = html`
+        <div class="metrics-row">
+          <span>${lcpEl}</span>
+          <span>${inpEl}</span>
+          <span>${clsEl}</span>
+          <span class="row-label">${i18nString(UIStrings.fieldScoreLabel, {PH1: scope})}</span>
+        </div>
+        <span class="row-border"></span>
+      `;
+      // clang-format on
+    }
+
+    const localValues = {
+      lcp: local.lcp?.value !== undefined ? Trace.Helpers.Timing.microToMilli(local.lcp.value) : undefined,
+      inp: local.inp?.value !== undefined ? Trace.Helpers.Timing.microToMilli(local.inp.value) : undefined,
+    };
+    const fieldValues = field && {
+      lcp: field.lcp?.value !== undefined ? Trace.Helpers.Timing.microToMilli(field.lcp.value) : undefined,
+      inp: field.inp?.value !== undefined ? Trace.Helpers.Timing.microToMilli(field.inp.value) : undefined,
+    };
+
+    let fieldIsDifferentEl;
+    if (!this.#dismissedFieldMismatchNotice && fieldValues && this.#isFieldWorseThanLocal(localValues, fieldValues)) {
+      // clang-format off
+      fieldIsDifferentEl = html`
+        <div class="field-mismatch-notice" jslog=${VisualLogging.section('timeline.insights.field-mismatch')}>
+          <h3>${i18nString(UIStrings.fieldMismatchTitle)}</h3>
+          <devtools-button
+            title=${i18nString(UIStrings.dismissTitle)}
+            .iconName=${'cross'}
+            .variant=${Buttons.Button.Variant.ICON}
+            .jslogContext=${'timeline.insights.dismiss-field-mismatch'}
+            @click=${this.#dismissFieldMismatchNotice}
+          ></devtools-button>
+          <div class="field-mismatch-notice__body">${md(i18nString(UIStrings.fieldMismatchNotice))}</div>
+        </div>
+      `;
+      // clang-format on
+    }
+
+    const classes = {metrics: true, 'metrics--field': Boolean(fieldMetricsTemplateResult)};
+    const metricsTableEl = html`<div class=${Lit.Directives.classMap(classes)}>
+      <div class="metrics-row">
+        <span class="metric-label">LCP</span>
+        <span class="metric-label">INP</span>
+        <span class="metric-label">CLS</span>
+        <span class="row-label"></span>
+      </div>
+      ${localMetricsTemplateResult}
+      ${fieldMetricsTemplateResult}
+    </div>`;
 
     return html`
-    <div class="metrics-row">
-    ${
-        lcp ? this.#renderMetricValue(
-                  'LCP', NumberWithUnit.formatMicroSecondsAsSeconds(lcp.value),
-                  Trace.Handlers.ModelHandlers.PageLoadMetrics.scoreClassificationForLargestContentfulPaint(lcp.value),
-                  lcp.event ?? null) :
-              LitHtml.nothing}
-    ${
-        inp ? this.#renderMetricValue(
-                  'INP', NumberWithUnit.formatMicroSecondsAsMillisFixed(inp.value),
-                  Trace.Handlers.ModelHandlers.UserInteractions.scoreClassificationForInteractionToNextPaint(inp.value),
-                  inp.event) :
-              LitHtml.nothing}
-    ${
-        this.#renderMetricValue(
-            'CLS', cls.value ? cls.value.toFixed(2) : '0',
-            Trace.Handlers.ModelHandlers.LayoutShifts.scoreClassificationForLayoutShift(cls.value),
-            cls.worstShiftEvent)}
-    </div>
+      ${metricsTableEl}
+      ${fieldIsDifferentEl}
     `;
   }
 
   #renderInsights(
       insightSets: Trace.Insights.Types.TraceInsightSets|null,
-      parsedTrace: Trace.Handlers.Types.ParsedTrace|null,
       insightSetKey: string,
-      ): LitHtml.LitTemplate {
+      ): Lit.LitTemplate {
     const includeExperimental = Root.Runtime.experiments.isEnabled(
         Root.Runtime.ExperimentName.TIMELINE_EXPERIMENTAL_INSIGHTS,
     );
 
-    const models = insightSets?.get(insightSetKey)?.model;
-    if (!models) {
-      return LitHtml.nothing;
+    const insightSet = insightSets?.get(insightSetKey);
+    if (!insightSet) {
+      return Lit.nothing;
     }
 
-    const components: LitHtml.TemplateResult[] = [];
-    for (const [name, componentClass] of Object.entries(INSIGHT_NAME_TO_COMPONENT)) {
+    const models = insightSet.model;
+    const shownInsights: Lit.TemplateResult[] = [];
+    const passedInsights: Lit.TemplateResult[] = [];
+    for (const [name, model] of Object.entries(models)) {
+      const componentClass = INSIGHT_NAME_TO_COMPONENT[name as keyof Trace.Insights.Types.InsightModels];
+      if (!componentClass) {
+        continue;
+      }
+
       if (!includeExperimental && EXPERIMENTAL_INSIGHTS.has(name)) {
         continue;
       }
 
-      const model = models[name as keyof typeof models];
-      if (!model || !model.shouldShow ||
+      if (!model ||
           !shouldRenderForCategory({activeCategory: this.#data.activeCategory, insightCategory: model.category})) {
         continue;
       }
@@ -226,34 +385,50 @@ export class SidebarSingleInsightSet extends HTMLElement {
         <${componentClass.litTagName}
           .selected=${this.#data.activeInsight?.model === model}
           .model=${model}
-          .parsedTrace=${parsedTrace}
+          .bounds=${insightSet.bounds}
           .insightSetKey=${insightSetKey}
+          .parsedTrace=${this.#data.parsedTrace}>
         </${componentClass.litTagName}>
       </div>`;
       // clang-format on
 
-      components.push(component);
+      if (model.state === 'pass') {
+        passedInsights.push(component);
+      } else {
+        shownInsights.push(component);
+      }
     }
 
-    return html`${components}`;
+    // clang-format off
+    return html`
+      ${shownInsights}
+      ${passedInsights.length ? html`
+        <details class="passed-insights-section">
+          <summary>${i18nString(UIStrings.passedInsights, {
+            PH1: passedInsights.length,
+          })}</summary>
+          ${passedInsights}
+        </details>
+      ` : Lit.nothing}
+    `;
+    // clang-format on
   }
 
   #render(): void {
     const {
-      parsedTrace,
       insights,
       insightSetKey,
     } = this.#data;
-    if (!parsedTrace || !insights || !insightSetKey) {
-      LitHtml.render(html``, this.#shadow, {host: this});
+    if (!insights || !insightSetKey) {
+      Lit.render(html``, this.#shadow, {host: this});
       return;
     }
 
     // clang-format off
-    LitHtml.render(html`
+    Lit.render(html`
       <div class="navigation">
         ${this.#renderMetrics(insightSetKey)}
-        ${this.#renderInsights(insights, parsedTrace, insightSetKey)}
+        ${this.#renderInsights(insights, insightSetKey)}
         </div>
       `, this.#shadow, {host: this});
     // clang-format on

package/front_end/panels/timeline/components/TimelineSummary.test.ts

@@ -16,12 +16,13 @@ describeWithMockConnection('TimelineSummary', () => {
       {title: 'Rendering', value: 0, color: 'black'},
     ];
 
-    const summary = new TimelineComponents.TimelineSummary.TimelineSummary();
+    const summary = new TimelineComponents.TimelineSummary.CategorySummary();
     summary.data = {
       rangeStart: 0,
       rangeEnd: 110,
       total: 110,
       categories,
+      selectedEvents: [],
     };
 
     categories.push({title: 'Total', value: 110, color: 'yellow'});
@@ -44,12 +45,13 @@ describeWithMockConnection('TimelineSummary', () => {
   it('no categories should just render Total', async function() {
     const categories: TimelineComponents.TimelineSummary.CategoryData[] = [];
 
-    const summary = new TimelineComponents.TimelineSummary.TimelineSummary();
+    const summary = new TimelineComponents.TimelineSummary.CategorySummary();
     summary.data = {
       rangeStart: 0,
       rangeEnd: 110,
       total: 110,
       categories,
+      selectedEvents: [],
     };
 
     categories.push({title: 'Total', value: 110, color: 'grey'});

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

@@ -3,11 +3,13 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import type * as Trace from '../../../models/trace/trace.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+import * as Lit from '../../../ui/lit/lit.js';
 
 import timelineSummaryStyles from './timelineSummary.css.js';
 
-const {render, html} = LitHtml;
+const {render, html} = Lit;
 
 const UIStrings = {
   /**
@@ -35,19 +37,18 @@ export interface SummaryTableData {
   rangeStart: number;
   rangeEnd: number;
   categories: CategoryData[];
+  selectedEvents: Trace.Types.Events.Event[];
 }
 
-export class TimelineSummary extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+export class CategorySummary extends HTMLElement {
+  readonly #shadow =
+      UI.UIUtils.createShadowRootWithCoreStyles(this, {cssFile: timelineSummaryStyles, delegatesFocus: undefined});
+
   #rangeStart = 0;
   #rangeEnd = 0;
   #total = 0;
   #categories: CategoryData[] = [];
 
-  connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [timelineSummaryStyles];
-  }
-
   set data(data: SummaryTableData) {
     this.#total = data.total;
     this.#categories = data.categories;
@@ -59,43 +60,46 @@ export class TimelineSummary extends HTMLElement {
   #render(): void {
     // clang-format off
     const output = html`
-        <div class="timeline-summary">
-            <div class="summary-range">${i18nString(UIStrings.rangeSS, {PH1: i18n.TimeUtilities.millisToString(this.#rangeStart), PH2: i18n.TimeUtilities.millisToString(this.#rangeEnd)})}</div>
-            <div class="category-summary">
-                ${this.#categories.map(category => {
-                    return html`
-                        <div class="category-row">
-                        <div class="category-swatch" style="background-color: ${category.color};"></div>
-                        <div class="category-name">${category.title}</div>
-                        <div class="category-value">
-                            ${i18n.TimeUtilities.preciseMillisToString(category.value)}
-                            <div class="background-bar-container">
-                                <div class="background-bar" style='width: ${(category.value * 100 / this.#total).toFixed(1)}%;'></div>
-                            </div>
-                        </div>
-                        </div>`;
-                })}
-                <div class="category-row">
-                    <div class="category-swatch"></div>
-                    <div class="category-name">${i18nString(UIStrings.total)}</div>
-                    <div class="category-value">
-                        ${i18n.TimeUtilities.preciseMillisToString(this.#total)}
-                        <div class="background-bar-container">
-                            <div class="background-bar"></div>
-                        </div>
-                    </div>
+          <div class="timeline-summary">
+              <div class="summary-range">${i18nString(UIStrings.rangeSS, {PH1: i18n.TimeUtilities.millisToString(this.#rangeStart), PH2: i18n.TimeUtilities.millisToString(this.#rangeEnd)})}</div>
+              <div class="category-summary">
+                  ${this.#categories.map(category => {
+                      return html`
+                          <div class="category-row">
+                          <div class="category-swatch" style="background-color: ${category.color};"></div>
+                          <div class="category-name">${category.title}</div>
+                          <div class="category-value">
+                              ${i18n.TimeUtilities.preciseMillisToString(category.value)}
+                              <div class="background-bar-container">
+                                  <div class="background-bar" style='width: ${(category.value * 100 / this.#total).toFixed(1)}%;'></div>
+                              </div>
+                          </div>
+                          </div>`;
+                  })}
+                  <div class="category-row">
+                      <div class="category-swatch"></div>
+                      <div class="category-name">${i18nString(UIStrings.total)}</div>
+                      <div class="category-value">
+                          ${i18n.TimeUtilities.preciseMillisToString(this.#total)}
+                          <div class="background-bar-container">
+                              <div class="background-bar"></div>
+                          </div>
+                      </div>
+                  </div>
                 </div>
-            </div>
+          </div>
+          </div>
+
         </div>`;
     // clang-format on
     render(output, this.#shadow, {host: this});
   }
 }
 
-customElements.define('devtools-performance-timeline-summary', TimelineSummary);
+customElements.define('devtools-performance-timeline-summary', CategorySummary);
 
 declare global {
   interface HTMLElementTagNameMap {
-    'devtools-performance-timeline-summary': TimelineSummary;
+    'devtools-performance-timeline-summary': CategorySummary;
   }
 }