chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

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

@@ -43,7 +43,7 @@ export class SidebarInsightsTab extends HTMLElement {
   #parsedTrace: Trace.Handlers.Types.ParsedTrace|null = null;
   #insights: Trace.Insights.Types.TraceInsightSets|null = null;
   #activeInsight: ActiveInsight|null = null;
-  #selectedCategory = Insights.Types.Category.ALL;
+  #selectedCategory = Trace.Insights.Types.InsightCategory.ALL;
   /**
    * When a trace has sets of insights, we show an accordion with each
    * set within. A set can be specific to a single navigation, or include the
@@ -193,7 +193,6 @@ export class SidebarInsightsTab extends HTMLElement {
       <div class="insight-sets-wrapper">
         ${[...this.#insights.values()].map(({id, url}, index) => {
           const data = {
-            parsedTrace: this.#parsedTrace,
             insights: this.#insights,
             insightSetKey: id,
             activeCategory: this.#selectedCategory,

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

@@ -3,48 +3,34 @@
 // found in the LICENSE file.
 
 import * as Root from '../../../core/root/root.js';
+import * as Trace from '../../../models/trace/trace.js';
 import {getCleanTextContentFromElements, renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {TraceLoader} from '../../../testing/TraceLoader.js';
-import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as Components from './components.js';
-import * as InsightComponents from './insights/insights.js';
+import type * as InsightComponents from './insights/insights.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
+type BaseInsightComponent =
+    InsightComponents.BaseInsightComponent.BaseInsightComponent<Trace.Insights.Types.InsightModel<{}>>;
 
 function getUserVisibleInsights(component: Components.SidebarSingleInsightSet.SidebarSingleInsightSet):
-    InsightComponents.SidebarInsight.SidebarInsight[] {
+    BaseInsightComponent[] {
   assert.isOk(component.shadowRoot);
-  const insightWrappers = [...component.shadowRoot.querySelectorAll<HTMLDivElement>('[data-single-insight-wrapper]')];
-
-  // We have to jump through some hoops here => each insight is rendered in its
-  // own component, but within it they all use the
-  // devtools-performance-sidebar-insight component to render the header +
-  // body.
-  // So we first have to find the specific insight component (e.g.
-  // devtools-performance-render-blocking), then look inside its shadow dom for
-  // the devtools-performance-sidebar-insight component.
-  // If you are here debugging something, I highly recommend loading up
-  // DevTools and inspecting the DOM in the Insights sidebar. It will be much
-  // easier!
-  const userVisibleInsightComponents =
-      insightWrappers
-          .map(div => {
-            const component = div.querySelector('[data-insight-name]');
-            assert.instanceOf(component, HTMLElement);
-            const insightComponent =
-                component.shadowRoot?.querySelector<InsightComponents.SidebarInsight.SidebarInsight>(
-                    'devtools-performance-sidebar-insight');
-            return insightComponent ?? null;
-          })
-          .filter(x => x !== null);
-  return userVisibleInsightComponents;
+  return [...component.shadowRoot.querySelectorAll<BaseInsightComponent>('[data-insight-name]')];
+}
+
+function getPassedInsights(component: Components.SidebarSingleInsightSet.SidebarSingleInsightSet):
+    BaseInsightComponent[] {
+  assert.isOk(component.shadowRoot);
+  return [...component.shadowRoot.querySelectorAll<BaseInsightComponent>(
+      '.passed-insights-section [data-insight-name]')];
 }
 
 describeWithEnvironment('SidebarSingleInsightSet', () => {
   it('renders a list of insights', async function() {
-    const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const {insights} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
 
     assert.isOk(insights);
     // only one navigation in this trace.
@@ -56,13 +42,12 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
     const component = new Components.SidebarSingleInsightSet.SidebarSingleInsightSet();
     renderElementIntoDOM(component);
     component.data = {
-      parsedTrace,
       insights,
       insightSetKey: navigationId,
-      activeCategory: InsightComponents.Types.Category.ALL,
+      activeCategory: Trace.Insights.Types.InsightCategory.ALL,
       activeInsight: null,
     };
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const userVisibleTitles = getUserVisibleInsights(component).flatMap(component => {
       return getCleanTextContentFromElements(component.shadowRoot!, '.insight-title');
@@ -73,6 +58,22 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       'Render blocking requests',
       'Document request latency',
       'Third parties',
+      'INP by phase',
+      'Layout shift culprits',
+      'Improve image delivery',
+      'Optimize viewport for mobile',
+      'CSS Selector costs',
+    ]);
+
+    const passedInsightTitles = getPassedInsights(component).flatMap(component => {
+      return getCleanTextContentFromElements(component.shadowRoot!, '.insight-title');
+    });
+    assert.deepEqual(passedInsightTitles, [
+      'INP by phase',
+      'Layout shift culprits',
+      'Improve image delivery',
+      'Optimize viewport for mobile',
+      'CSS Selector costs',
     ]);
   });
 
@@ -83,13 +84,12 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
     const firstNavigation = parsedTrace.Meta.mainFrameNavigations.at(0)?.args.data?.navigationId;
     assert.isOk(firstNavigation);
     component.data = {
-      parsedTrace,
       insights,
       insightSetKey: firstNavigation,
-      activeCategory: InsightComponents.Types.Category.ALL,
+      activeCategory: Trace.Insights.Types.InsightCategory.ALL,
       activeInsight: null,
     };
-    await coordinator.done();
+    await RenderCoordinator.done();
     const userVisibleTitles = getUserVisibleInsights(component).flatMap(component => {
       return getCleanTextContentFromElements(component.shadowRoot!, '.insight-title');
     });
@@ -98,7 +98,25 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       'LCP by phase',
       'LCP request discovery',
       'Layout shift culprits',
+      'Improve image delivery',
       'Third parties',
+      'INP by phase',
+      'Render blocking requests',
+      'Document request latency',
+      'Optimize viewport for mobile',
+      'CSS Selector costs',
+    ]);
+
+    const passedInsightTitles = getPassedInsights(component).flatMap(component => {
+      return getCleanTextContentFromElements(component.shadowRoot!, '.insight-title');
+    });
+    // Does not include "font display", which is experimental.
+    assert.deepEqual(passedInsightTitles, [
+      'INP by phase',
+      'Render blocking requests',
+      'Document request latency',
+      'Optimize viewport for mobile',
+      'CSS Selector costs',
     ]);
   });
 
@@ -112,28 +130,46 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
     const firstNavigation = parsedTrace.Meta.mainFrameNavigations.at(0)?.args.data?.navigationId;
     assert.isOk(firstNavigation);
     component.data = {
-      parsedTrace,
       insights,
       insightSetKey: firstNavigation,
-      activeCategory: InsightComponents.Types.Category.ALL,
+      activeCategory: Trace.Insights.Types.InsightCategory.ALL,
       activeInsight: null,
     };
-    await coordinator.done();
+    await RenderCoordinator.done();
     const userVisibleTitles = getUserVisibleInsights(component).flatMap(component => {
       return getCleanTextContentFromElements(component.shadowRoot!, '.insight-title');
     });
-    // Does not include "font display", which is experimental.
+    // Includes "font display", which is experimental.
     assert.deepEqual(userVisibleTitles, [
       'LCP by phase',
       'LCP request discovery',
       'Layout shift culprits',
+      'Improve image delivery',
       'Font display',
       'Third parties',
+      'INP by phase',
+      'Render blocking requests',
+      'Document request latency',
+      'Optimize viewport for mobile',
+      'Optimize DOM size',
+      'CSS Selector costs',
+    ]);
+
+    const passedInsightTitles = getPassedInsights(component).flatMap(component => {
+      return getCleanTextContentFromElements(component.shadowRoot!, '.insight-title');
+    });
+    assert.deepEqual(passedInsightTitles, [
+      'INP by phase',
+      'Render blocking requests',
+      'Document request latency',
+      'Optimize viewport for mobile',
+      'Optimize DOM size',
+      'CSS Selector costs',
     ]);
   });
 
   it('will render the active insight fully', async function() {
-    const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const {insights} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
 
     assert.isOk(insights);
     // only one navigation in this trace.
@@ -142,26 +178,28 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
     const navigationId = '8463DF94CD61B265B664E7F768183DE3';
     assert.isTrue(insights.has(navigationId));
 
+    const model = insights.get(navigationId)?.model.LCPPhases;
+    if (!model) {
+      throw new Error('missing LCPPhases model');
+    }
+
     const component = new Components.SidebarSingleInsightSet.SidebarSingleInsightSet();
     renderElementIntoDOM(component);
     component.data = {
-      parsedTrace,
       insights,
       insightSetKey: navigationId,
-      activeCategory: InsightComponents.Types.Category.ALL,
+      activeCategory: Trace.Insights.Types.InsightCategory.ALL,
       activeInsight: {
-        name: 'lcp-by-phase',
+        model,
         insightSetKey: navigationId,
-        overlays: [],
-        relatedEvents: [],
       },
     };
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const expandedInsight = getUserVisibleInsights(component).find(insight => {
-      return 'insightExpanded' in insight.dataset;
+      return insight.selected;
     });
     assert.isOk(expandedInsight);
-    assert.strictEqual(expandedInsight.dataset.insightTitle, 'LCP by phase');
+    assert.strictEqual(expandedInsight.model?.title, 'LCP by phase');
   });
 });

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

@@ -8,12 +8,13 @@ import * as Trace from '../../../models/trace/trace.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.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';
 
-const {html} = LitHtml;
+const {html} = LitHtml.StaticHtml;
 
 const UIStrings = {
   /**
@@ -23,15 +24,19 @@ const UIStrings = {
    *@example {poor} PH3
    */
   metricScore: '{PH1}: {PH2} {PH3} score',
+  /**
+   * @description Summary text for an expandable dropdown that contains all insights in a passing state.
+   * @example {4} PH1
+   */
+  passedInsights: 'Passed insights ({PH1})',
 };
 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: Insights.Types.Category;
+  activeCategory: Trace.Insights.Types.InsightCategory;
   activeInsight: ActiveInsight|null;
 }
 
@@ -42,24 +47,30 @@ export interface SidebarSingleInsightSetData {
  * users. */
 const EXPERIMENTAL_INSIGHTS: ReadonlySet<string> = new Set([
   'FontDisplay',
+  'DOMSize',
 ]);
 
+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,
+  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,
+  RenderBlocking: Insights.RenderBlocking.RenderBlocking,
   SlowCSSSelector: Insights.SlowCSSSelector.SlowCSSSelector,
+  ThirdParties: Insights.ThirdParties.ThirdParties,
+  Viewport: Insights.Viewport.Viewport,
 };
 
 export class SidebarSingleInsightSet extends HTMLElement {
@@ -67,10 +78,9 @@ export class SidebarSingleInsightSet extends HTMLElement {
   #renderBound = this.#render.bind(this);
 
   #data: SidebarSingleInsightSetData = {
-    parsedTrace: null,
     insights: null,
     insightSetKey: null,
-    activeCategory: Insights.Types.Category.ALL,
+    activeCategory: Trace.Insights.Types.InsightCategory.ALL,
     activeInsight: null,
   };
 
@@ -84,7 +94,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
   }
 
   #metricIsVisible(label: 'LCP'|'CLS'|'INP'): boolean {
-    if (this.#data.activeCategory === Insights.Types.Category.ALL) {
+    if (this.#data.activeCategory === Trace.Insights.Types.InsightCategory.ALL) {
       return true;
     }
     return label === this.#data.activeCategory;
@@ -122,53 +132,10 @@ export class SidebarSingleInsightSet extends HTMLElement {
     // 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;
-    }
-
-    const value = insight.longestInteractionEvent.dur;
-    return {value, event: insight.longestInteractionEvent};
-  }
-
-  #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) {
-      return null;
-    }
-
-    const value = Trace.Helpers.Timing.millisecondsToMicroseconds(insight.lcpMs);
-    return {value, event: insight.lcpEvent};
-  }
-
-  #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};
-    }
-
-    // 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;
-      }
-    }
-
-    return {value: maxScore, worstShiftEvent: worstCluster?.worstShiftEvent ?? null};
-  }
-
   #renderMetrics(insightSetKey: string): LitHtml.TemplateResult {
-    const lcp = this.#getLCP(insightSetKey);
-    const cls = this.#getCLS(insightSetKey);
-    const inp = this.#getINP(insightSetKey);
+    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);
 
     return html`
     <div class="metrics-row">
@@ -195,49 +162,74 @@ export class SidebarSingleInsightSet extends HTMLElement {
 
   #renderInsights(
       insightSets: Trace.Insights.Types.TraceInsightSets|null,
-      parsedTrace: Trace.Handlers.Types.ParsedTrace|null,
       insightSetKey: string,
-      ): LitHtml.TemplateResult {
+      ): LitHtml.LitTemplate {
     const includeExperimental = Root.Runtime.experiments.isEnabled(
         Root.Runtime.ExperimentName.TIMELINE_EXPERIMENTAL_INSIGHTS,
     );
 
-    const models = insightSets?.get(insightSetKey)?.model;
-    if (!models) {
-      return html``;
+    const insightSet = insightSets?.get(insightSetKey);
+    if (!insightSet) {
+      return LitHtml.nothing;
     }
 
-    const components: LitHtml.TemplateResult[] = [];
-    for (const [name, componentClass] of Object.entries(INSIGHT_NAME_TO_COMPONENT)) {
+    const models = insightSet.model;
+    const shownInsights: LitHtml.TemplateResult[] = [];
+    const passedInsights: LitHtml.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;
       }
 
+      if (!model ||
+          !shouldRenderForCategory({activeCategory: this.#data.activeCategory, insightCategory: model.category})) {
+        continue;
+      }
+
       // clang-format off
-      const component = html`<div data-single-insight-wrapper>
+      const component = html`<div>
         <${componentClass.litTagName}
-          .model=${models[name as keyof typeof models]}
-          .parsedTrace=${parsedTrace}
+          .selected=${this.#data.activeInsight?.model === model}
+          .model=${model}
+          .bounds=${insightSet.bounds}
           .insightSetKey=${insightSetKey}
-          .activeInsight=${this.#data.activeInsight}
-          .activeCategory=${this.#data.activeCategory}>
         </${componentClass.litTagName}>
       </div>`;
       // clang-format on
 
-      components.push(component);
+      if (model.shouldShow) {
+        shownInsights.push(component);
+      } else {
+        passedInsights.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>
+      ` : LitHtml.nothing}
+    `;
+    // clang-format on
   }
 
   #render(): void {
     const {
-      parsedTrace,
       insights,
       insightSetKey,
     } = this.#data;
-    if (!parsedTrace || !insights || !insightSetKey) {
+    if (!insights || !insightSetKey) {
       LitHtml.render(html``, this.#shadow, {host: this});
       return;
     }
@@ -246,7 +238,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
     LitHtml.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

@@ -0,0 +1,75 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {describeWithMockConnection} from '../../../testing/MockConnection.js';
+
+import * as TimelineComponents from './components.js';
+
+describeWithMockConnection('TimelineSummary', () => {
+  it('correctly renders categories', async function() {
+    const categories: TimelineComponents.TimelineSummary.CategoryData[] = [
+      {title: 'System', value: 100, color: 'blue'},
+      {title: 'Scripting', value: 5, color: 'red'},
+      {title: 'Painting', value: 2, color: 'green'},
+      {title: 'Loading', value: 1, color: 'white'},
+      {title: 'Rendering', value: 0, color: 'black'},
+    ];
+
+    const summary = new TimelineComponents.TimelineSummary.TimelineSummary();
+    summary.data = {
+      rangeStart: 0,
+      rangeEnd: 110,
+      total: 110,
+      categories,
+    };
+
+    categories.push({title: 'Total', value: 110, color: 'yellow'});
+
+    assert.isNotNull(summary.shadowRoot);
+    const range = summary.shadowRoot.querySelector('.summary-range');
+    assert.include(range?.textContent, 'Range: ');
+
+    const categorySummaries = summary.shadowRoot.querySelector('.category-summary');
+    const rows = categorySummaries?.querySelectorAll('.category-row') || [];
+    for (let i = 0; i < rows.length; i++) {
+      const swatch = rows[i].querySelector('.category-swatch');
+      assert.isNotNull(swatch);
+      const name = rows[i].querySelector('.category-name');
+      assert.include(name?.textContent, categories[i]?.title);
+      const value = rows[i].querySelector('.category-value');
+      assert.include(value?.textContent, categories[i]?.value.toString());
+    }
+  });
+  it('no categories should just render Total', async function() {
+    const categories: TimelineComponents.TimelineSummary.CategoryData[] = [];
+
+    const summary = new TimelineComponents.TimelineSummary.TimelineSummary();
+    summary.data = {
+      rangeStart: 0,
+      rangeEnd: 110,
+      total: 110,
+      categories,
+    };
+
+    categories.push({title: 'Total', value: 110, color: 'grey'});
+
+    assert.isNotNull(summary.shadowRoot);
+    const range = summary.shadowRoot.querySelector('.summary-range');
+    assert.include(range?.textContent, 'Range: ');
+
+    const categorySummaries = summary.shadowRoot.querySelector('.category-summary');
+    // Should just have the "Total" row.
+    const rows = categorySummaries?.querySelectorAll('.category-row') || [];
+    assert.isTrue(rows.length === 1);
+
+    const swatch = rows[0].querySelector('.category-swatch');
+    assert.isNotNull(swatch);
+
+    const name = rows[0].querySelector('.category-name');
+    assert.include(name?.textContent, 'Total');
+
+    const value = rows[0].querySelector('.category-value');
+    assert.include(value?.textContent, (110).toString());
+  });
+});

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

@@ -0,0 +1,101 @@
+// Copyright (c) 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+
+import timelineSummaryStyles from './timelineSummary.css.js';
+
+const {render, html} = LitHtml;
+
+const UIStrings = {
+  /**
+   *@description Text for total
+   */
+  total: 'Total',
+  /**
+   *@description Range in Timeline Details View's Summary
+   *@example {1ms} PH1
+   *@example {10ms} PH2
+   */
+  rangeSS: 'Range:  {PH1} – {PH2}',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/TimelineSummary.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export interface CategoryData {
+  value: number;
+  color: string;
+  title: string;
+}
+
+export interface SummaryTableData {
+  total: number;
+  rangeStart: number;
+  rangeEnd: number;
+  categories: CategoryData[];
+}
+
+export class TimelineSummary extends HTMLElement {
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #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;
+    this.#rangeStart = data.rangeStart;
+    this.#rangeEnd = data.rangeEnd;
+    this.#render();
+  }
+
+  #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>
+            </div>
+        </div>`;
+    // clang-format on
+    render(output, this.#shadow, {host: this});
+  }
+}
+
+customElements.define('devtools-performance-timeline-summary', TimelineSummary);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-performance-timeline-summary': TimelineSummary;
+  }
+}