chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

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;
+  }
+}

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

@@ -2,8 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Protocol from '../../../generated/protocol.js';
 import type * as Trace from '../../../models/trace/trace.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
+import {TraceLoader} from '../../../testing/TraceLoader.js';
 
 import * as Utils from './Utils.js';
 
@@ -62,4 +64,51 @@ describeWithEnvironment('Utils', () => {
       assert.deepStrictEqual(NumberWithUnit.parse('100 s]('), null);
     });
   });
+
+  describe('networkResourceCategory', function() {
+    const {networkResourceCategory, NetworkCategory} = Utils;
+    const {ResourceType} = Protocol.Network;
+    const getCategory = networkResourceCategory;
+    let req: Trace.Types.Events.SyntheticNetworkRequest|undefined;
+
+    before(async function() {
+      const events = await TraceLoader.fixtureContents(this, 'load-simple.json.gz');
+      const {parsedTrace} = await TraceLoader.executeTraceEngineOnFileContents(events);
+      req = parsedTrace.NetworkRequests.byId.get('2648544.35');
+    });
+
+    function tweakRequest(
+        mimeType: string, resourceType: Protocol.Network.ResourceType = Protocol.Network.ResourceType.Other):
+        Trace.Types.Events.SyntheticNetworkRequest {
+      assert.exists(req);
+      req.args.data.mimeType = mimeType;
+      req.args.data.resourceType = resourceType;
+      return req;
+    }
+
+    it('uses resource type when available', () => {
+      assert.strictEqual(getCategory(tweakRequest('text/html', ResourceType.Document)), NetworkCategory.DOC);
+      assert.strictEqual(getCategory(tweakRequest('text/css', ResourceType.Stylesheet)), NetworkCategory.CSS);
+      assert.strictEqual(getCategory(tweakRequest('image/png', ResourceType.Image)), NetworkCategory.IMG);
+      assert.strictEqual(getCategory(tweakRequest('video/webm', ResourceType.Media)), NetworkCategory.MEDIA);
+      assert.strictEqual(getCategory(tweakRequest('font/woff2', ResourceType.Font)), NetworkCategory.FONT);
+      assert.strictEqual(getCategory(tweakRequest('text/javascript', ResourceType.Script)), NetworkCategory.JS);
+      assert.strictEqual(getCategory(tweakRequest('something/unknown', ResourceType.WebSocket)), NetworkCategory.JS);
+      assert.strictEqual(getCategory(tweakRequest('something/unknown', ResourceType.Other)), NetworkCategory.OTHER);
+    });
+
+    it('falls back to mime type for older traces', () => {
+      assert.strictEqual(getCategory(tweakRequest('text/html')), NetworkCategory.DOC);
+      assert.strictEqual(getCategory(tweakRequest('text/css')), NetworkCategory.CSS);
+      assert.strictEqual(getCategory(tweakRequest('image/png')), NetworkCategory.IMG);
+      assert.strictEqual(getCategory(tweakRequest('video/webm')), NetworkCategory.MEDIA);
+      assert.strictEqual(getCategory(tweakRequest('font/woff2')), NetworkCategory.FONT);
+      assert.strictEqual(getCategory(tweakRequest('text/javascript')), NetworkCategory.JS);
+      assert.strictEqual(getCategory(tweakRequest('application/javascript')), NetworkCategory.JS);
+      assert.strictEqual(getCategory(tweakRequest('application/wasm')), NetworkCategory.WASM);
+      assert.strictEqual(getCategory(tweakRequest('application/x-font-woff')), NetworkCategory.FONT);
+      assert.strictEqual(getCategory(tweakRequest('application/font-woff2')), NetworkCategory.FONT);
+      assert.strictEqual(getCategory(tweakRequest('something/unknown')), NetworkCategory.OTHER);
+    });
+  });
 });

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

@@ -62,13 +62,13 @@ export function networkResourceCategory(request: Trace.Types.Events.SyntheticNet
 
       // Traces before Feb 2024 don't have `resourceType`.
       // We'll keep mimeType logic for a couple years to avoid grey network requests for last year's traces.
-      return mimeType.startsWith('text/')                                ? NetworkCategory.DOC :
-          mimeType.endsWith('/css')                                      ? NetworkCategory.CSS :
+      return mimeType.endsWith('/css')                                   ? NetworkCategory.CSS :
           mimeType.endsWith('javascript')                                ? NetworkCategory.JS :
           mimeType.startsWith('image/')                                  ? NetworkCategory.IMG :
           mimeType.startsWith('audio/') || mimeType.startsWith('video/') ? NetworkCategory.MEDIA :
           mimeType.startsWith('font/') || mimeType.includes('font-')     ? NetworkCategory.FONT :
           mimeType === 'application/wasm'                                ? NetworkCategory.WASM :
+          mimeType.startsWith('text/')                                   ? NetworkCategory.DOC :
                                                                            // Ultimate fallback:
                                                                            NetworkCategory.OTHER;
   }

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

@@ -19,6 +19,7 @@ import * as Sidebar from './Sidebar.js';
 import * as SidebarAnnotationsTab from './SidebarAnnotationsTab.js';
 import * as SidebarInsightsTab from './SidebarInsightsTab.js';
 import * as SidebarSingleInsightSet from './SidebarSingleInsightSet.js';
+import * as TimelineSummary from './TimelineSummary.js';
 import * as Utils from './Utils.js';
 
 export {
@@ -39,5 +40,6 @@ export {
   SidebarAnnotationsTab,
   SidebarInsightsTab,
   SidebarSingleInsightSet,
+  TimelineSummary,
   Utils,
 };

package/front_end/panels/timeline/components/insights/BaseInsightComponent.test.ts

@@ -0,0 +1,84 @@
+// 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 type * as Common from '../../../../core/common/common.js';
+import * as Trace from '../../../../models/trace/trace.js';
+import {renderElementIntoDOM} from '../../../../testing/DOMHelpers.js';
+import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
+import * as Coordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
+import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+import type {TimelineOverlay} from '../../overlays/OverlaysImpl.js';
+
+import * as Insights from './insights.js';
+
+const {html} = LitHtml;
+
+describeWithEnvironment('BaseInsightComponent', () => {
+  const {BaseInsightComponent} = Insights.BaseInsightComponent;
+  const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
+
+  class TestInsightComponent extends BaseInsightComponent<Trace.Insights.Types.InsightModel<{}>> {
+    override internalName = 'test-insight';
+    override createOverlays(): TimelineOverlay[] {
+      return [];
+    }
+    override render(): void {
+      this.renderWithContent(html`<div>test content</div>`);
+    }
+  }
+  customElements.define('test-insight-component', TestInsightComponent);
+
+  describe('sidebar insight component rendering', () => {
+    it('renders insight title even when not active', async () => {
+      const component = new TestInsightComponent();
+      component.selected = false;
+      component.model = {
+        title: 'LCP by Phase' as Common.UIString.LocalizedString,
+        description: 'some description' as Common.UIString.LocalizedString,
+        category: Trace.Insights.Types.InsightCategory.ALL,
+        shouldShow: true,
+      };
+      renderElementIntoDOM(component);
+
+      await coordinator.done();
+
+      assert.isNotNull(component.shadowRoot);
+      const titleElement = component.shadowRoot.querySelector<HTMLElement>('.insight-title');
+      assert.isNotNull(titleElement);
+      const descElement = component.shadowRoot.querySelector<HTMLElement>('.insight-description');
+      assert.isNull(descElement);
+      const contentElement = component.shadowRoot.querySelector<HTMLElement>('.insight-content');
+      assert.isNull(contentElement);
+      assert.deepEqual(titleElement.textContent, 'LCP by Phase');
+    });
+
+    it('renders title, description and content when toggled', async () => {
+      const component = new TestInsightComponent();
+      component.selected = true;
+      component.model = {
+        title: 'LCP by Phase' as Common.UIString.LocalizedString,
+        description: 'some description' as Common.UIString.LocalizedString,
+        category: Trace.Insights.Types.InsightCategory.ALL,
+        shouldShow: true,
+      };
+      renderElementIntoDOM(component);
+
+      await coordinator.done();
+
+      assert.isNotNull(component.shadowRoot);
+      const titleElement = component.shadowRoot.querySelector<HTMLElement>('.insight-title');
+      assert.isNotNull(titleElement);
+      assert.deepEqual(titleElement.textContent, 'LCP by Phase');
+
+      const descElement = component.shadowRoot.querySelector<HTMLElement>('.insight-description');
+      assert.isNotNull(descElement);
+      // It's in the markdown component.
+      assert.strictEqual(descElement.children[0].shadowRoot?.textContent?.trim(), 'some description');
+
+      const contentElement = component.shadowRoot.querySelector<HTMLElement>('.insight-content');
+      assert.isNotNull(contentElement);
+      assert.strictEqual(contentElement.textContent, 'test content');
+    });
+  });
+});

package/front_end/panels/timeline/components/insights/BaseInsightComponent.ts

@@ -0,0 +1,291 @@
+// 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 '../../../../ui/components/markdown_view/markdown_view.js';
+
+import * as i18n from '../../../../core/i18n/i18n.js';
+import type {InsightModel} from '../../../../models/trace/insights/types.js';
+import type * 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 VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
+import type * as Overlays from '../../overlays/overlays.js';
+import {md} from '../../utils/Helpers.js';
+
+import baseInsightComponentStyles from './baseInsightComponent.css.js';
+import * as SidebarInsight from './SidebarInsight.js';
+import type {TableState} from './Table.js';
+
+const {html} = LitHtml;
+
+const UIStrings = {
+  /**
+   * @description Text to tell the user the estimated time or size savings for this insight. "&" means "and" - space is limited to prefer abbreviated terms if possible. Text will still fit if not short, it just won't look very good, so using no abbreviations is fine if necessary.
+   * @example {401 ms} PH1
+   * @example {112 kB} PH1
+   */
+  estimatedSavings: 'Est savings: {PH1}',
+  /**
+   * @description Text to tell the user the estimated time and size savings for this insight. "&" means "and", "Est" means "Estimated" - space is limited to prefer abbreviated terms if possible. Text will still fit if not short, it just won't look very good, so using no abbreviations is fine if necessary.
+   * @example {401 ms} PH1
+   * @example {112 kB} PH2
+   */
+  estimatedSavingsTimingAndBytes: 'Est savings: {PH1} & {PH2}',
+  /**
+   * @description Used for screen-readers as a label on the button to expand an insight to view details
+   * @example {LCP by phase} PH1
+   */
+  viewDetails: 'View details for {PH1}',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/BaseInsightComponent.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export interface BaseInsightData {
+  parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
+  /** The key into `insights` that contains this particular insight. */
+  insightSetKey: string|null;
+}
+
+export abstract class BaseInsightComponent<T extends InsightModel<{}>> extends HTMLElement {
+  abstract internalName: string;
+  // So we can use the TypeScript BaseInsight class without getting warnings
+  // about litTagName. Every child should overrwrite this.
+  static readonly litTagName = LitHtml.literal``;
+
+  readonly #shadowRoot = this.attachShadow({mode: 'open'});
+
+  #selected = false;
+  #model: T|null = null;
+
+  get model(): T|null {
+    return this.#model;
+  }
+
+  protected data: BaseInsightData = {
+    parsedTrace: null,
+    insightSetKey: null,
+  };
+
+  // eslint-disable-next-line rulesdir/no_bound_component_methods
+  readonly #boundRender = this.render.bind(this);
+  readonly sharedTableState: TableState = {
+    selectedRowEl: null,
+    selectionIsSticky: false,
+  };
+  #initialOverlays: Overlays.Overlays.TimelineOverlay[]|null = null;
+
+  protected scheduleRender(): void {
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  connectedCallback(): void {
+    this.#shadowRoot.adoptedStyleSheets.push(baseInsightComponentStyles);
+    this.setAttribute('jslog', `${VisualLogging.section(`timeline.insights.${this.internalName}`)}`);
+    // Used for unit test purposes when querying the DOM.
+    this.dataset.insightName = this.internalName;
+  }
+
+  set selected(selected: boolean) {
+    if (!this.#selected && selected) {
+      this.dispatchEvent(
+          new SidebarInsight.InsightProvideOverlays(this.getInitialOverlays(), {updateTraceWindow: true}));
+    }
+
+    this.#selected = selected;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  get selected(): boolean {
+    return this.#selected;
+  }
+
+  set model(model: T) {
+    this.#model = model;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  set parsedTrace(parsedTrace: Trace.Handlers.Types.ParsedTrace|null) {
+    this.data.parsedTrace = parsedTrace;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  set insightSetKey(insightSetKey: string|null) {
+    this.data.insightSetKey = insightSetKey;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  #dispatchInsightToggle(): void {
+    if (this.#selected) {
+      this.dispatchEvent(new SidebarInsight.InsightDeactivated());
+      return;
+    }
+
+    if (!this.data.insightSetKey) {
+      // Shouldn't happen, but needed to satisfy TS.
+      return;
+    }
+
+    this.sharedTableState.selectedRowEl?.classList.remove('selected');
+    this.sharedTableState.selectedRowEl = null;
+    this.sharedTableState.selectionIsSticky = false;
+
+    this.dispatchEvent(new SidebarInsight.InsightActivated(this.model, this.data.insightSetKey));
+  }
+
+  #renderHoverIcon(insightIsActive: boolean): LitHtml.TemplateResult {
+    // clang-format off
+    const containerClasses = LitHtml.Directives.classMap({
+      'insight-hover-icon': true,
+      active: insightIsActive,
+    });
+    return html`
+      <div class=${containerClasses} inert>
+        <devtools-button .data=${{
+          variant: Buttons.Button.Variant.ICON,
+          iconName: 'chevron-down',
+          size: Buttons.Button.Size.SMALL,
+        } as Buttons.Button.ButtonData}
+      ></devtools-button>
+      </div>
+
+    `;
+    // clang-format on
+  }
+
+  /**
+   * Ensure that if the user presses enter or space on a header, we treat it
+   * like a click and toggle the insight.
+   */
+  #handleHeaderKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      event.stopPropagation();
+      this.#dispatchInsightToggle();
+    }
+  }
+
+  /**
+   * Replaces the initial insight overlays with the ones provided.
+   *
+   * If `overlays` is null, reverts back to the initial overlays.
+   *
+   * This allows insights to provide an initial set of overlays,
+   * and later temporarily replace all of those insights with a different set.
+   * This enables the hover/click table interactions.
+   */
+  toggleTemporaryOverlays(
+      overlays: Overlays.Overlays.TimelineOverlay[]|null, options: Overlays.Overlays.TimelineOverlaySetOptions): void {
+    if (!this.#selected) {
+      return;
+    }
+
+    this.dispatchEvent(new SidebarInsight.InsightProvideOverlays(overlays ?? this.getInitialOverlays(), options));
+  }
+
+  getInitialOverlays(): Overlays.Overlays.TimelineOverlay[] {
+    if (this.#initialOverlays) {
+      return this.#initialOverlays;
+    }
+
+    this.#initialOverlays = this.createOverlays();
+    return this.#initialOverlays;
+  }
+
+  protected abstract createOverlays(): Overlays.Overlays.TimelineOverlay[];
+
+  protected abstract render(): void;
+
+  getEstimatedSavingsTime(): Trace.Types.Timing.MilliSeconds|null {
+    return null;
+  }
+
+  getEstimatedSavingsBytes(): number|null {
+    return null;
+  }
+
+  #getEstimatedSavingsString(): string|null {
+    const savingsTime = this.getEstimatedSavingsTime();
+    const savingsBytes = this.getEstimatedSavingsBytes();
+
+    let timeString, bytesString;
+    if (savingsTime) {
+      timeString = i18n.TimeUtilities.millisToString(savingsTime);
+    }
+    if (savingsBytes) {
+      bytesString = i18n.ByteUtilities.bytesToString(savingsBytes);
+    }
+
+    if (timeString && bytesString) {
+      return i18nString(UIStrings.estimatedSavingsTimingAndBytes, {
+        PH1: timeString,
+        PH2: bytesString,
+      });
+    }
+    if (timeString) {
+      return i18nString(UIStrings.estimatedSavings, {
+        PH1: timeString,
+      });
+    }
+    if (bytesString) {
+      return i18nString(UIStrings.estimatedSavings, {
+        PH1: bytesString,
+      });
+    }
+
+    return null;
+  }
+
+  protected renderWithContent(content: LitHtml.LitTemplate): void {
+    if (content === LitHtml.nothing || !this.#model) {
+      LitHtml.render(LitHtml.nothing, this.#shadowRoot, {host: this});
+      return;
+    }
+
+    const containerClasses = LitHtml.Directives.classMap({
+      insight: true,
+      closed: !this.#selected,
+    });
+    const estimatedSavingsString = this.#getEstimatedSavingsString();
+
+    // clang-format off
+    const output = html`
+      <div class=${containerClasses}>
+        <header @click=${this.#dispatchInsightToggle}
+          @keydown=${this.#handleHeaderKeyDown}
+          jslog=${VisualLogging.action(`timeline.toggle-insight.${this.internalName}`).track({click: true})}
+          tabIndex="0"
+          role="button"
+          aria-expanded=${this.#selected}
+          aria-label=${i18nString(UIStrings.viewDetails, {PH1: this.#model.title})}
+        >
+          ${this.#renderHoverIcon(this.#selected)}
+          <h3 class="insight-title">${this.#model?.title}</h3>
+          ${estimatedSavingsString ?
+            html`
+            <slot name="insight-savings" class="insight-savings">
+              ${estimatedSavingsString}
+            </slot>
+          </div>`
+          : LitHtml.nothing}
+        </header>
+        ${this.#selected ? html`
+          <div class="insight-body">
+            <div class="insight-description">${md(this.#model.description)}</div>
+            <div class="insight-content">${content}</div>
+          </div>`
+          : LitHtml.nothing
+        }
+      </div>
+    `;
+    // clang-format on
+
+    LitHtml.render(output, this.#shadowRoot, {host: this});
+
+    if (this.#selected) {
+      requestAnimationFrame(() => requestAnimationFrame(() => this.scrollIntoViewIfNeeded()));
+    }
+  }
+}