chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

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

@@ -93,7 +93,7 @@ describeWithMockConnection('MetricCard', () => {
 
     const localValueEl = getLocalMetricValue(view);
     assert.strictEqual(localValueEl.className, 'metric-value good');
-    assert.strictEqual(localValueEl.innerText, '100 ms');
+    assert.strictEqual(localValueEl.innerText, '0.10 s');
 
     const fieldValueEl = getFieldMetricValue(view);
     assert.strictEqual(fieldValueEl!.className, 'metric-value poor');
@@ -145,7 +145,7 @@ describeWithMockConnection('MetricCard', () => {
 
     const localValueEl = getLocalMetricValue(view);
     assert.strictEqual(localValueEl.className, 'metric-value poor');
-    assert.strictEqual(localValueEl.innerText, '2.00 s');
+    assert.strictEqual(localValueEl.innerText, '2000 ms');
 
     const fieldValueEl = getFieldMetricValue(view);
     assert.strictEqual(fieldValueEl!.className, 'metric-value good');
@@ -268,7 +268,7 @@ describeWithMockConnection('MetricCard', () => {
       assert.deepStrictEqual(histogramPercents, ['50%', '30%', '20%']);
 
       const fieldValueEl = getFieldMetricValue(view);
-      assert.strictEqual(fieldValueEl!.textContent, '200 ms');
+      assert.strictEqual(fieldValueEl!.textContent, '0.20 s');
     });
 
     it('should show empty values when crux is enabled but there is no field data', async () => {
@@ -309,7 +309,7 @@ describeWithMockConnection('MetricCard', () => {
 
       const compareText = getCompareText(view);
       assert.strictEqual(
-          compareText!.innerText, 'Your local LCP value of 100 ms is good, and is similar to your users’ experience.');
+          compareText!.innerText, 'Your local LCP value of 0.10 s is good, and is similar to your users’ experience.');
     });
 
     it('should show message when local is better', async () => {
@@ -327,7 +327,7 @@ describeWithMockConnection('MetricCard', () => {
       const compareText = getCompareText(view);
       assert.strictEqual(
           compareText!.innerText,
-          'Your local LCP value of 100 ms is good, but is significantly better than your users’ experience.');
+          'Your local LCP value of 0.10 s is good, but is significantly better than your users’ experience.');
     });
 
     it('should show message when local is worse', async () => {
@@ -362,7 +362,7 @@ describeWithMockConnection('MetricCard', () => {
 
       const compareText = getCompareText(view);
       assert.strictEqual(
-          compareText!.innerText, 'Your local LCP value of 10 ms is good, and is similar to your users’ experience.');
+          compareText!.innerText, 'Your local LCP value of 0.01 s is good, and is similar to your users’ experience.');
     });
 
     it('should show generic summary if field is missing', async () => {
@@ -409,7 +409,7 @@ describeWithMockConnection('MetricCard', () => {
       const compareText = getDetailedCompareText(view);
       assert.strictEqual(
           compareText!.textContent,
-          'Your local LCP value of 100 ms is good and is rated the same as 50% of real-user LCP experiences. Additionally, the field data 75th percentile LCP value of 1.00 s is good.',
+          'Your local LCP value of 0.10 s is good and is rated the same as 50% of real-user LCP experiences. Additionally, the field data 75th percentile LCP value of 1.00 s is good.',
       );
     });
 
@@ -428,7 +428,7 @@ describeWithMockConnection('MetricCard', () => {
       const compareText = getDetailedCompareText(view);
       assert.strictEqual(
           compareText!.textContent,
-          'Your local LCP value of 100 ms is good and is rated the same as 50% of real-user LCP experiences. However, the field data 75th percentile LCP value of 5.00 s is poor.',
+          'Your local LCP value of 0.10 s is good and is rated the same as 50% of real-user LCP experiences. However, the field data 75th percentile LCP value of 5.00 s is poor.',
       );
     });
 

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

@@ -136,7 +136,6 @@ export interface MetricCardData {
 }
 
 export class MetricCard extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-metric-card`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   constructor() {
@@ -281,11 +280,14 @@ export class MetricCard extends HTMLElement {
   #getFormatFn(): (value: number) => string {
     switch (this.#data.metric) {
       case 'LCP':
-        return v => i18n.TimeUtilities.millisToString(v);
+        return v => {
+          const micro = (v * 1000) as Platform.Timing.MicroSeconds;
+          return i18n.TimeUtilities.formatMicroSecondsAsSeconds(micro);
+        };
       case 'CLS':
         return v => v === 0 ? '0' : v.toFixed(2);
       case 'INP':
-        return v => i18n.TimeUtilities.millisToString(v);
+        return v => i18n.TimeUtilities.preciseMillisToString(v);
     }
   }
 
@@ -623,7 +625,7 @@ export class MetricCard extends HTMLElement {
         ${fieldEnabled ? html`<hr class="divider">` : nothing}
         ${this.#renderCompareString()}
         ${this.#renderEnvironmentRecommendations()}
-        <slot name="extra-info"><slot>
+        <slot name="extra-info"></slot>
       </div>
     `;
     LitHtml.render(output, this.#shadow, {host: this});

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

@@ -4,7 +4,7 @@
 
 import * as i18n from '../../../core/i18n/i18n.js';
 
-import {type MetricRating} from './Utils.js';
+import type {MetricRating} from './Utils.js';
 
 // This file is auto-generated by scripts/generate_metric_compare_strings.js.
 //

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

@@ -2,11 +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/request_link_icon/request_link_icon.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import * as Trace from '../../../models/trace/trace.js';
-import * as RequestLinkIcon from '../../../ui/components/request_link_icon/request_link_icon.js';
+import type * as RequestLinkIcon from '../../../ui/components/request_link_icon/request_link_icon.js';
 import * as PerfUI from '../../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as LegacyComponents from '../../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../../ui/legacy/legacy.js';
@@ -16,6 +18,8 @@ import * as TimelineUtils from '../utils/utils.js';
 import NetworkRequestDetailsStyles from './networkRequestDetails.css.js';
 import {colorForNetworkRequest} from './Utils.js';
 
+const {html} = LitHtml;
+
 const MAX_URL_LENGTH = 80;
 
 const UIStrings = {
@@ -108,7 +112,6 @@ const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/NetworkRequ
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class NetworkRequestDetails extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-performance-network-request-details`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #networkRequest: Trace.Types.Events.SyntheticNetworkRequest|null = null;
@@ -144,9 +147,9 @@ export class NetworkRequestDetails extends HTMLElement {
     const style = {
       backgroundColor: `${colorForNetworkRequest(this.#networkRequest)}`,
     };
-    return LitHtml.html`
+    return html`
       <div class="network-request-details-title">
-        <div style=${LitHtml.Directives.styleMap(style)}"></div>
+        <div style=${LitHtml.Directives.styleMap(style)}></div>
         ${i18nString(UIStrings.networkRequest)}
       </div>
     `;
@@ -156,7 +159,7 @@ export class NetworkRequestDetails extends HTMLElement {
     if (!value) {
       return null;
     }
-    return LitHtml.html`
+    return html`
       <div class="network-request-details-row"><div class="title">${title}</div><div class="value">${value}</div></div>
     `;
   }
@@ -193,11 +196,11 @@ export class NetworkRequestDetails extends HTMLElement {
       });
 
       // clang-format off
-      const urlElement = LitHtml.html`
+      const urlElement = html`
         ${linkifiedURL}
-        <${RequestLinkIcon.RequestLinkIcon.RequestLinkIcon.litTagName}
+        <devtools-request-link-icon
           .data=${{request: networkRequest} as RequestLinkIcon.RequestLinkIcon.RequestLinkIconData} >
-        </${RequestLinkIcon.RequestLinkIcon.RequestLinkIcon.litTagName}>
+        </devtools-request-link-icon>
       `;
       // clang-format on
       return this.#renderRow(i18n.i18n.lockedString('URL'), urlElement);
@@ -225,7 +228,7 @@ export class NetworkRequestDetails extends HTMLElement {
       return null;
     }
     const durationValue = i18n.TimeUtilities.formatMicroSecondsTime(fullDuration);
-    const durationElement = LitHtml.html`
+    const durationElement = html`
       <div>
         ${durationValue}
         ${this.#renderTimings()}
@@ -323,7 +326,7 @@ export class NetworkRequestDetails extends HTMLElement {
     // |
     // |----
     // |
-    return LitHtml.html`<span class="whisker-left"> <span class="horizontal"></span> </span>`;
+    return html`<span class="whisker-left"> <span class="horizontal"></span> </span>`;
   }
 
   #renderRightWhisker(): LitHtml.TemplateResult {
@@ -332,7 +335,7 @@ export class NetworkRequestDetails extends HTMLElement {
     //      |
     //  ----|
     //      |
-    return LitHtml.html`<span class="whisker-right"> <span class="horizontal"></span> </span>`;
+    return html`<span class="whisker-right"> <span class="horizontal"></span> </span>`;
   }
 
   #renderTimings(): LitHtml.TemplateResult|null {
@@ -355,7 +358,7 @@ export class NetworkRequestDetails extends HTMLElement {
       backgroundColor: color,
     };
 
-    return LitHtml.html`
+    return html`
       <div class="timings-row">
         ${this.#renderLeftWhisker()}
         ${i18nString(UIStrings.queuingAndConnecting)}
@@ -385,7 +388,7 @@ export class NetworkRequestDetails extends HTMLElement {
     }
     const networkData = this.#networkRequest.args.data;
     // clang-format off
-    const output = LitHtml.html`
+    const output = html`
       ${this.#renderTitle()}
       <div class="network-request-details-body">
         <div class="network-request-details-col">

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

@@ -2,16 +2,19 @@
 // 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 * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as Trace from '../../../models/trace/trace.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as PerfUI from '../../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import networkRequestTooltipStyles from './networkRequestTooltip.css.js';
 import {colorForNetworkRequest} from './Utils.js';
 
+const {html} = LitHtml;
+
 const MAX_URL_LENGTH = 30;
 
 const UIStrings = {
@@ -42,7 +45,6 @@ const UIStrings = {
 };
 
 export class NetworkRequestTooltip extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-performance-network-request-tooltip`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #networkRequest?: Trace.Types.Events.SyntheticNetworkRequest|null;
@@ -65,16 +67,16 @@ export class NetworkRequestTooltip extends HTMLElement {
       return null;
     }
     if (this.#networkRequest.args.data.priority === this.#networkRequest.args.data.initialPriority) {
-      return LitHtml.html`
+      return html`
         <div class="priority">${UIStrings.priority}: ${
           PerfUI.NetworkPriorities.uiLabelForNetworkPriority(this.#networkRequest.args.data.priority)}</div>
       `;
     }
-    return LitHtml.html`
+    return html`
       <div class="priority">
         ${UIStrings.priority}:
         ${PerfUI.NetworkPriorities.uiLabelForNetworkPriority(this.#networkRequest.args.data.initialPriority)}
-        <${IconButton.Icon.Icon.litTagName} name=${'arrow-forward'}></${IconButton.Icon.Icon.litTagName}>
+        <devtools-icon name=${'arrow-forward'}></devtools-icon>
         ${PerfUI.NetworkPriorities.uiLabelForNetworkPriority(this.#networkRequest.args.data.priority)}
       </div>
     `;
@@ -86,7 +88,7 @@ export class NetworkRequestTooltip extends HTMLElement {
     // |
     // |----
     // |
-    return LitHtml.html`<span class="whisker-left"> <span class="horizontal"></span> </span>`;
+    return html`<span class="whisker-left"> <span class="horizontal"></span> </span>`;
   }
 
   #renderRightWhisker(): LitHtml.TemplateResult {
@@ -95,7 +97,7 @@ export class NetworkRequestTooltip extends HTMLElement {
     //      |
     //  ----|
     //      |
-    return LitHtml.html`<span class="whisker-right"> <span class="horizontal"></span> </span>`;
+    return html`<span class="whisker-right"> <span class="horizontal"></span> </span>`;
   }
 
   #renderTimings(): LitHtml.TemplateResult|null {
@@ -118,7 +120,7 @@ export class NetworkRequestTooltip extends HTMLElement {
       backgroundColor: color,
     };
 
-    return LitHtml.html`
+    return html`
       <ul>
         <li>
           ${this.#renderLeftWhisker()}
@@ -150,7 +152,7 @@ export class NetworkRequestTooltip extends HTMLElement {
     }
     const networkData = this.#networkRequest.args.data;
     // clang-format off
-    const output = LitHtml.html`
+    const output = html`
       <div class="performance-card">
         <span class="url">${Platform.StringUtilities.trimMiddle(networkData.url, MAX_URL_LENGTH)}</span>
         <span class="time bold">${i18n.TimeUtilities.formatMicroSecondsTime(this.#networkRequest.dur)}</span>
@@ -158,7 +160,7 @@ export class NetworkRequestTooltip extends HTMLElement {
         <div class="divider"></div>
         ${this.#renderPriority()}
         ${Trace.Helpers.Network.isSyntheticNetworkRequestEventRenderBlocking(this.#networkRequest) ?
-          LitHtml.html`<div class="render-blocking"> ${UIStrings.renderBlocking} </div>` :  LitHtml.nothing
+          html`<div class="render-blocking"> ${UIStrings.renderBlocking} </div>` :  LitHtml.nothing
         }
         <div class="divider"></div>
 

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

@@ -4,7 +4,7 @@
 
 import * as Common from '../../../core/common/common.js';
 import * as SDK from '../../../core/sdk/sdk.js';
-import {renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
+import {getCleanTextContentFromElements, renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import type * as Menus from '../../../ui/components/menus/menus.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
@@ -82,6 +82,40 @@ describeWithEnvironment('NetworkThrottlingSelector', () => {
     assert.strictEqual(networkManager.networkConditions().i18nTitleKey, 'Fast 4G');
   });
 
+  it('correctly updates when a custom preset is selected', async () => {
+    const view = new Components.NetworkThrottlingSelector.NetworkThrottlingSelector();
+    renderElementIntoDOM(view);
+    await coordinator.done();
+    customNetworkSetting.set([
+      {
+        title: 'Custom item one',
+        download: 0,
+        upload: 0,
+        latency: 0,
+      },
+      {
+        title: 'Custom item two',
+        download: 0,
+        upload: 0,
+        latency: 0,
+
+      },
+    ]);
+    await coordinator.done();
+
+    assert.isOk(view.shadowRoot);
+    const items = view.shadowRoot.querySelectorAll('devtools-menu-item');
+    const itemsText = getCleanTextContentFromElements(view.shadowRoot, 'devtools-menu-item');
+    assert.deepEqual(
+        itemsText,
+        ['No throttling', 'Fast 4G', 'Slow 4G', '3G', 'Offline', 'Custom item one', 'Custom item two', 'Add…']);
+
+    items[6].click();
+    await coordinator.done();
+    assert.deepEqual(Array.from(items).filter(i => i.selected), [items[6]]);
+    assert.strictEqual(networkManager.networkConditions().title, 'Custom item two');
+  });
+
   it('reacts to changes when it is unmounted and then remounted', async () => {
     const view = new Components.NetworkThrottlingSelector.NetworkThrottlingSelector();
     // Change the conditions before the component is put into the DOM.
@@ -122,7 +156,6 @@ describeWithEnvironment('NetworkThrottlingSelector', () => {
 
     customNetworkSetting.set([{
       title: 'Custom item',
-      i18nTitleKey: 'Custom item',
       download: 0,
       upload: 0,
       latency: 0,

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

@@ -2,12 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/menus/menus.js';
+
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import * as Menus from '../../../ui/components/menus/menus.js';
+import type * as Menus from '../../../ui/components/menus/menus.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';
@@ -56,7 +58,6 @@ interface ConditionsGroup {
 }
 
 export class NetworkThrottlingSelector extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-network-throttling-selector`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #customNetworkConditionsSetting: Common.Settings.Setting<SDK.NetworkManager.Conditions[]>;
@@ -118,7 +119,10 @@ export class NetworkThrottlingSelector extends HTMLElement {
   }
 
   #onMenuItemSelected(event: Menus.SelectMenu.SelectMenuItemSelectedEvent): void {
-    const newConditions = this.#groups.flatMap(g => g.items).find(item => item.i18nTitleKey === event.itemValue);
+    const newConditions = this.#groups.flatMap(g => g.items).find(item => {
+      const keyForItem = this.#keyForNetworkConditions(item);
+      return keyForItem === event.itemValue;
+    });
     if (newConditions) {
       SDK.NetworkManager.MultitargetNetworkManager.instance().setNetworkConditions(newConditions);
     }
@@ -137,12 +141,23 @@ export class NetworkThrottlingSelector extends HTMLElement {
     void Common.Revealer.reveal(this.#customNetworkConditionsSetting);
   }
 
+  /**
+   * The key that uniquely identifies the condition setting. All the DevTools
+   * presets have the i18nKey, so we rely on that, but for custom user added
+   * ones we fallback to using the title (it wouldn't make sense for a user to
+   * add presets with the same title)
+   */
+  #keyForNetworkConditions(conditions: SDK.NetworkManager.Conditions): string {
+    return conditions.i18nTitleKey || this.#getConditionsTitle(conditions);
+  }
+
   #render = (): void => {
     const selectionTitle = this.#getConditionsTitle(this.#currentConditions);
+    const selectedConditionsKey = this.#keyForNetworkConditions(this.#currentConditions);
 
     // clang-format off
     const output = html`
-      <${Menus.SelectMenu.SelectMenu.litTagName}
+      <devtools-select-menu
         @selectmenuselected=${this.#onMenuItemSelected}
         .showDivider=${true}
         .showArrow=${true}
@@ -155,33 +170,35 @@ export class NetworkThrottlingSelector extends HTMLElement {
       >
         ${this.#groups.map(group => {
           return html`
-            <${Menus.Menu.MenuGroup.litTagName} .name=${group.name}>
+            <devtools-menu-group .name=${group.name}>
               ${group.items.map(conditions => {
+                const key = this.#keyForNetworkConditions(conditions);
                 const title = this.#getConditionsTitle(conditions);
                 const jslogContext = group.jslogContext || Platform.StringUtilities.toKebabCase(conditions.i18nTitleKey || title);
                 return html`
-                  <${Menus.Menu.MenuItem.litTagName}
-                    .value=${conditions.i18nTitleKey}
-                    .selected=${this.#currentConditions.i18nTitleKey === conditions.i18nTitleKey}
+                  <devtools-menu-item
+                    title=${title}
+                    .value=${key}
+                    .selected=${selectedConditionsKey === key}
                     jslog=${VisualLogging.item(jslogContext).track({click: true})}
                   >
                     ${title}
-                  </${Menus.Menu.MenuItem.litTagName}>
+                  </devtools-menu-item>
                 `;
               })}
               ${group.showCustomAddOption ? html`
-                <${Menus.Menu.MenuItem.litTagName}
+                <devtools-menu-item
                   .value=${1 /* This won't be displayed unless it has some value. */}
                   jslog=${VisualLogging.action('add').track({click: true})}
                   @click=${this.#onAddClick}
                 >
                   ${i18nString(UIStrings.add)}
-                </${Menus.Menu.MenuItem.litTagName}>
+                </devtools-menu-item>
               ` : nothing}
-            </${Menus.Menu.MenuGroup.litTagName}>
+            </devtools-menu-group>
           `;
         })}
-      </${Menus.SelectMenu.SelectMenu.litTagName}>
+      </devtools-select-menu>
     `;
     // clang-format on
     LitHtml.render(output, this.#shadow, {host: this});

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

@@ -0,0 +1,74 @@
+// 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 Trace from '../../../models/trace/trace.js';
+import {
+  dispatchClickEvent,
+  getCleanTextContentFromElements,
+  renderElementIntoDOM,
+} from '../../../testing/DOMHelpers.js';
+import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
+import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+
+import * as Components from './components.js';
+
+const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
+
+describeWithEnvironment('RelatedInsightChips', () => {
+  // Event doesn't matter, so let's keep this test quick and avoid parsing a trace.
+  const FAKE_EVENT = {} as unknown as Trace.Types.Events.Event;
+
+  it('renders nothing if the event has no insights', async () => {
+    const component = new Components.RelatedInsightChips.RelatedInsightChips();
+    renderElementIntoDOM(component);
+    component.activeEvent = FAKE_EVENT;
+    component.eventToRelatedInsightsMap = new Map();
+    await coordinator.done();
+    assert.isOk(component.shadowRoot);
+    assert.strictEqual(component.shadowRoot.childElementCount, 0);
+  });
+
+  it('renders a chip for each insight the given event is associated with', async () => {
+    const relatedInsight: Components.RelatedInsightChips.RelatedInsight = {
+      insightLabel: 'Some fake insight',
+      activateInsight: () => {},
+    };
+    const relatedMap: Components.RelatedInsightChips.EventToRelatedInsightsMap = new Map();
+    relatedMap.set(FAKE_EVENT, [relatedInsight]);
+
+    const component = new Components.RelatedInsightChips.RelatedInsightChips();
+    renderElementIntoDOM(component);
+    component.activeEvent = FAKE_EVENT;
+    component.eventToRelatedInsightsMap = relatedMap;
+    await coordinator.done();
+    assert.isOk(component.shadowRoot);
+
+    const chips = component.shadowRoot.querySelectorAll<HTMLElement>('li.insight-chip');
+    assert.lengthOf(chips, 1);
+    const text = getCleanTextContentFromElements(chips[0], 'button .insight-label');
+    assert.deepEqual(text, ['Some fake insight']);
+  });
+
+  it('calls the activateInsight function when the insight is clicked', async () => {
+    const activateStub = sinon.stub();
+    const relatedInsight: Components.RelatedInsightChips.RelatedInsight = {
+      insightLabel: 'Some fake insight',
+      activateInsight: () => activateStub(),
+    };
+    const relatedMap: Components.RelatedInsightChips.EventToRelatedInsightsMap = new Map();
+    relatedMap.set(FAKE_EVENT, [relatedInsight]);
+
+    const component = new Components.RelatedInsightChips.RelatedInsightChips();
+    renderElementIntoDOM(component);
+    component.activeEvent = FAKE_EVENT;
+    component.eventToRelatedInsightsMap = relatedMap;
+    await coordinator.done();
+    assert.isOk(component.shadowRoot);
+
+    const button = component.shadowRoot.querySelector('button');
+    assert.isOk(button);
+    dispatchClickEvent(button);
+    assert.isTrue(activateStub.called);
+  });
+});

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

@@ -0,0 +1,92 @@
+// 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 * as i18n from '../../../core/i18n/i18n.js';
+import type * 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 styles from './relatedInsightChips.css.js';
+
+const {html} = LitHtml;
+
+const UIStrings = {
+  /**
+   *@description prefix shown next to related insight chips
+   */
+  insightKeyword: 'Insight',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/RelatedInsightChips.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export interface RelatedInsight {
+  insightLabel: string;
+  activateInsight: () => void;
+}
+export type EventToRelatedInsightsMap = Map<Trace.Types.Events.Event, RelatedInsight[]>;
+
+export interface Data {
+  eventToRelatedInsightsMap: EventToRelatedInsightsMap;
+  activeEvent: Trace.Types.Events.Event|null;
+}
+export class RelatedInsightChips extends HTMLElement {
+  #shadow = this.attachShadow({mode: 'open'});
+
+  #boundRender = this.#render.bind(this);
+
+  #data: Data = {eventToRelatedInsightsMap: new Map(), activeEvent: null};
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [styles];
+    this.#render();
+  }
+
+  set activeEvent(event: Data['activeEvent']) {
+    if (event === this.#data.activeEvent) {
+      return;
+    }
+    this.#data.activeEvent = event;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  set eventToRelatedInsightsMap(map: Data['eventToRelatedInsightsMap']) {
+    this.#data.eventToRelatedInsightsMap = map;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  #insightClick(insight: RelatedInsight): (e: Event) => void {
+    return (event: Event) => {
+      event.preventDefault();
+      insight.activateInsight();
+    };
+  }
+
+  #render(): void {
+    const {activeEvent, eventToRelatedInsightsMap} = this.#data;
+    const relatedInsights = activeEvent ? eventToRelatedInsightsMap.get(activeEvent) ?? [] : [];
+    if (!activeEvent || eventToRelatedInsightsMap.size === 0 || relatedInsights.length === 0) {
+      LitHtml.render(html``, this.#shadow, {host: this});
+      return;
+    }
+
+    const insightChips = relatedInsights.map(insight => {
+      // clang-format off
+      return html`
+      <li class="insight-chip">
+        <button type="button" @click=${this.#insightClick(insight)}>
+          <span class="keyword">${i18nString(UIStrings.insightKeyword)}</span>
+          <span class="insight-label">${insight.insightLabel}</span>
+        </button>
+      </li>
+      `;
+      // clang-format on
+    });
+
+    // clang-format off
+    LitHtml.render(html`<ul>${insightChips}</ul>`, this.#shadow, {host: this});
+    // clang-format on
+  }
+}
+
+customElements.define('devtools-related-insight-chips', RelatedInsightChips);