chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

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

@@ -5,28 +5,25 @@
 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 Platform from '../../../core/platform/platform.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
+import * as Helpers from '../../../models/trace/helpers/helpers.js';
 import * as Trace from '../../../models/trace/trace.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';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as TimelineUtils from '../utils/utils.js';
 
 import NetworkRequestDetailsStyles from './networkRequestDetails.css.js';
+import networkRequestTooltipStyles from './networkRequestTooltip.css.js';
+import {NetworkRequestTooltip} from './NetworkRequestTooltip.js';
 import {colorForNetworkRequest} from './Utils.js';
 
 const {html} = LitHtml;
 
-const MAX_URL_LENGTH = 80;
+const MAX_URL_LENGTH = 100;
 
 const UIStrings = {
-  /**
-   *@description Text that refers to updated priority of network request
-   */
-  initialPriority: 'Initial priority',
   /**
    *@description Text that refers to the network request method
    */
@@ -59,10 +56,6 @@ const UIStrings = {
    *@description Text to indicate to the user they are viewing an event representing a network request.
    */
   networkRequest: 'Network request',
-  /**
-   *@description Text for the duration of something
-   */
-  duration: 'Duration',
   /**
    *@description Text for the data source of a network request.
    */
@@ -92,21 +85,17 @@ const UIStrings = {
    */
   initiatedBy: 'Initiated by',
   /**
-   *@description Text that refers to the queueing and connecting time of a network request
-   */
-  queuingAndConnecting: 'Queuing and connecting',
-  /**
-   *@description Text that refers to the request sent and waiting time of a network request
+   *@description Text that refers to if the network request is blocking
    */
-  requestSentAndWaiting: 'Request sent and waiting',
+  blocking: 'Blocking',
   /**
-   *@description Text that refers to the content downloading time of a network request
+   *@description Text that refers to if the network request is in-body parser render blocking
    */
-  contentDownloading: 'Content downloading',
+  inBodyParserBlocking: 'In-body parser blocking',
   /**
-   *@description Text that refers to the waiting on main thread time of a network request
+   *@description Text that refers to if the network request is render blocking
    */
-  waitingOnMainThread: 'Waiting on main thread',
+  renderBlocking: 'Render blocking',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/NetworkRequestDetails.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -125,7 +114,7 @@ export class NetworkRequestDetails extends HTMLElement {
   }
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [NetworkRequestDetailsStyles];
+    this.#shadow.adoptedStyleSheets = [NetworkRequestDetailsStyles, networkRequestTooltipStyles];
   }
 
   async setData(
@@ -184,7 +173,7 @@ export class NetworkRequestDetails extends HTMLElement {
           return;
         }
         // Add a wrapper class here.
-        // The main reason is the `Reveal in Network panel` option is handled by the context menu provider, which will
+        // The main reason is the `Open in Network panel` option is handled by the context menu provider, which will
         // add this option for all supporting types. And there are a lot of context menu providers that support
         // `SDK.NetworkRequest.NetworkRequest`, for example `Override content` by PersistenceActions, but we so far just
         // want the one to reveal in network panel, so add a new class which will only be supported by Network panel.
@@ -198,15 +187,14 @@ export class NetworkRequestDetails extends HTMLElement {
       // clang-format off
       const urlElement = html`
         ${linkifiedURL}
-        <devtools-request-link-icon
-          .data=${{request: networkRequest} as RequestLinkIcon.RequestLinkIcon.RequestLinkIconData} >
+        <devtools-request-link-icon .data=${{request: networkRequest}}>
         </devtools-request-link-icon>
       `;
       // clang-format on
-      return this.#renderRow(i18n.i18n.lockedString('URL'), urlElement);
+      return html`<div class="network-request-details-row">${urlElement}</div>`;
     }
 
-    return this.#renderRow(i18n.i18n.lockedString('URL'), linkifiedURL);
+    return html`<div class="network-request-details-row">${linkifiedURL}</div>`;
   }
 
   #renderFromCache(): LitHtml.TemplateResult|null {
@@ -219,25 +207,6 @@ export class NetworkRequestDetails extends HTMLElement {
         i18nString(UIStrings.fromCache), cached ? i18nString(UIStrings.yes) : i18nString(UIStrings.no));
   }
 
-  #renderDuration(): LitHtml.TemplateResult|null {
-    if (!this.#networkRequest) {
-      return null;
-    }
-    const fullDuration = this.#networkRequest.dur;
-    if (!isFinite(fullDuration)) {
-      return null;
-    }
-    const durationValue = i18n.TimeUtilities.formatMicroSecondsTime(fullDuration);
-    const durationElement = html`
-      <div>
-        ${durationValue}
-        ${this.#renderTimings()}
-      </div>
-    `;
-
-    return this.#renderRow(i18nString(UIStrings.duration), durationElement);
-  }
-
   #renderEncodedDataLength(): LitHtml.TemplateResult|null {
     if (!this.#networkRequest) {
       return null;
@@ -254,8 +223,7 @@ export class NetworkRequestDetails extends HTMLElement {
       lengthText += i18nString(UIStrings.FromServiceWorker);
     }
     if (this.#networkRequest.args.data.encodedDataLength || !lengthText) {
-      lengthText =
-          `${Platform.NumberUtilities.bytesToString(this.#networkRequest.args.data.encodedDataLength)}${lengthText}`;
+      lengthText = `${i18n.ByteUtilities.bytesToString(this.#networkRequest.args.data.encodedDataLength)}${lengthText}`;
     }
     return this.#renderRow(i18nString(UIStrings.encodedData), lengthText);
   }
@@ -295,6 +263,26 @@ export class NetworkRequestDetails extends HTMLElement {
     return null;
   }
 
+  #renderBlockingRow(): LitHtml.TemplateResult|null {
+    if (!this.#networkRequest || !Helpers.Network.isSyntheticNetworkRequestEventRenderBlocking(this.#networkRequest)) {
+      return null;
+    }
+
+    let renderBlockingText;
+    switch (this.#networkRequest.args.data.renderBlocking) {
+      case 'blocking':
+        renderBlockingText = UIStrings.renderBlocking;
+        break;
+      case 'in_body_parser_blocking':
+        renderBlockingText = UIStrings.inBodyParserBlocking;
+        break;
+      default:
+        // Shouldn't fall to this block, if so, this network request is not render blocking, so return null.
+        return null;
+    }
+    return this.#renderRow(i18nString(UIStrings.blocking), renderBlockingText);
+  }
+
   async #renderPreviewElement(): Promise<LitHtml.TemplateResult|null> {
     if (!this.#networkRequest) {
       return null;
@@ -320,94 +308,35 @@ export class NetworkRequestDetails extends HTMLElement {
     return null;
   }
 
-  #renderLeftWhisker(): LitHtml.TemplateResult {
-    // So the outside span will be a transparent rectangle with a left border.
-    // The inside span is just a rectangle with background color, and it is vertical centered.
-    // |
-    // |----
-    // |
-    return html`<span class="whisker-left"> <span class="horizontal"></span> </span>`;
-  }
-
-  #renderRightWhisker(): LitHtml.TemplateResult {
-    // So the outside span will be a transparent rectangle with a right border.
-    // The inside span is just a rectangle with background color, and it is vertical centered.
-    //      |
-    //  ----|
-    //      |
-    return html`<span class="whisker-right"> <span class="horizontal"></span> </span>`;
-  }
-
-  #renderTimings(): LitHtml.TemplateResult|null {
-    if (!this.#networkRequest) {
-      return null;
-    }
-    const syntheticData = this.#networkRequest.args.data.syntheticData;
-    const queueing = (syntheticData.sendStartTime - this.#networkRequest.ts) as Trace.Types.Timing.MicroSeconds;
-    const requestPlusWaiting =
-        (syntheticData.downloadStart - syntheticData.sendStartTime) as Trace.Types.Timing.MicroSeconds;
-    const download = (syntheticData.finishTime - syntheticData.downloadStart) as Trace.Types.Timing.MicroSeconds;
-    const waitingOnMainThread = (this.#networkRequest.ts + this.#networkRequest.dur - syntheticData.finishTime) as
-        Trace.Types.Timing.MicroSeconds;
-
-    const color = colorForNetworkRequest(this.#networkRequest);
-    const styleForWaiting = {
-      backgroundColor: `color-mix(in srgb, ${color}, hsla(0, 100%, 100%, 0.8))`,
-    };
-    const styleForDownloading = {
-      backgroundColor: color,
-    };
-
-    return html`
-      <div class="timings-row">
-        ${this.#renderLeftWhisker()}
-        ${i18nString(UIStrings.queuingAndConnecting)}
-        <span class="time">${i18n.TimeUtilities.formatMicroSecondsTime(queueing)}</span>
-      </div>
-      <div class="timings-row">
-        <span class="indicator" style=${LitHtml.Directives.styleMap(styleForWaiting)}></span>
-        ${i18nString(UIStrings.requestSentAndWaiting)}
-        <span class="time">${i18n.TimeUtilities.formatMicroSecondsTime(requestPlusWaiting)}</span>
-      </div>
-      <div class="timings-row">
-        <span class="indicator" style=${LitHtml.Directives.styleMap(styleForDownloading)}></span>
-        ${i18nString(UIStrings.contentDownloading)}
-        <span class="time">${i18n.TimeUtilities.formatMicroSecondsTime(download)}</span>
-      </div>
-      <div class="timings-row">
-        ${this.#renderRightWhisker()}
-        ${i18nString(UIStrings.waitingOnMainThread)}
-        <span class="time">${i18n.TimeUtilities.formatMicroSecondsTime(waitingOnMainThread)}</span>
-      </div>
-    `;
-  }
-
   async #render(): Promise<void> {
     if (!this.#networkRequest) {
       return;
     }
     const networkData = this.#networkRequest.args.data;
+
     // clang-format off
     const output = html`
       ${this.#renderTitle()}
-      <div class="network-request-details-body">
+      ${this.#renderURL()}
+      <div class="network-request-details-cols">
         <div class="network-request-details-col">
-          ${this.#renderURL()}
           ${this.#renderRow(i18nString(UIStrings.requestMethod), networkData.requestMethod)}
-          ${this.#renderRow(i18nString(UIStrings.initialPriority), PerfUI.NetworkPriorities.uiLabelForNetworkPriority(networkData.initialPriority))}
-          ${this.#renderRow(i18nString(UIStrings.priority), PerfUI.NetworkPriorities.uiLabelForNetworkPriority(networkData.priority))}
+          ${this.#renderRow(i18nString(UIStrings.priority), NetworkRequestTooltip.renderPriorityValue(this.#networkRequest))}
           ${this.#renderRow(i18nString(UIStrings.mimeType), networkData.mimeType)}
           ${this.#renderEncodedDataLength()}
-          ${this.#renderRow(i18nString(UIStrings.decodedBody), Platform.NumberUtilities.bytesToString(this.#networkRequest.args.data.decodedBodyLength))}
-          ${this.#renderInitiatedBy()}
-          ${await this.#renderPreviewElement()}
+          ${this.#renderRow(i18nString(UIStrings.decodedBody), i18n.ByteUtilities.bytesToString(this.#networkRequest.args.data.decodedBodyLength))}
+          ${this.#renderBlockingRow()}
+          ${this.#renderFromCache()}
         </div>
         <div class="network-request-details-col">
-          ${this.#renderFromCache()}
-          ${this.#renderDuration()}
+          <div class="timing-rows">
+            ${NetworkRequestTooltip.renderTimings(this.#networkRequest)}
+          </div>
         </div>
       </div>
-    `;
+      ${this.#renderInitiatedBy()}
+      ${await this.#renderPreviewElement()}
+    `; // The last items are outside the 2 column layout because InitiatedBy can be very wide
     // clang-format on
     LitHtml.render(output, this.#shadow, {host: this});
   }

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

@@ -11,17 +11,21 @@ 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';
+import {colorForNetworkRequest, networkResourceCategory} from './Utils.js';
 
 const {html} = LitHtml;
 
-const MAX_URL_LENGTH = 30;
+const MAX_URL_LENGTH = 60;
 
 const UIStrings = {
   /**
    *@description Text that refers to the priority of network request
    */
   priority: 'Priority',
+  /**
+   *@description Text for the duration of a network request
+   */
+  duration: 'Duration',
   /**
    *@description Text that refers to the queueing and connecting time of a network request
    */
@@ -43,6 +47,8 @@ const UIStrings = {
    */
   renderBlocking: 'Render blocking',
 };
+const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/NetworkRequestTooltip.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class NetworkRequestTooltip extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
@@ -62,57 +68,25 @@ export class NetworkRequestTooltip extends HTMLElement {
     this.#render();
   }
 
-  #renderPriority(): LitHtml.TemplateResult|null {
-    if (!this.#networkRequest) {
-      return null;
+  static renderPriorityValue(networkRequest: Trace.Types.Events.SyntheticNetworkRequest): LitHtml.TemplateResult {
+    if (networkRequest.args.data.priority === networkRequest.args.data.initialPriority) {
+      return html`${PerfUI.NetworkPriorities.uiLabelForNetworkPriority(networkRequest.args.data.priority)}`;
     }
-    if (this.#networkRequest.args.data.priority === this.#networkRequest.args.data.initialPriority) {
-      return html`
-        <div class="priority">${UIStrings.priority}: ${
-          PerfUI.NetworkPriorities.uiLabelForNetworkPriority(this.#networkRequest.args.data.priority)}</div>
-      `;
-    }
-    return html`
-      <div class="priority">
-        ${UIStrings.priority}:
-        ${PerfUI.NetworkPriorities.uiLabelForNetworkPriority(this.#networkRequest.args.data.initialPriority)}
-        <devtools-icon name=${'arrow-forward'}></devtools-icon>
-        ${PerfUI.NetworkPriorities.uiLabelForNetworkPriority(this.#networkRequest.args.data.priority)}
-      </div>
-    `;
-  }
-
-  #renderLeftWhisker(): LitHtml.TemplateResult {
-    // So the outside span will be a transparent rectangle with a left border.
-    // The inside span is just a rectangle with background color, and it is vertical centered.
-    // |
-    // |----
-    // |
-    return html`<span class="whisker-left"> <span class="horizontal"></span> </span>`;
-  }
-
-  #renderRightWhisker(): LitHtml.TemplateResult {
-    // So the outside span will be a transparent rectangle with a right border.
-    // The inside span is just a rectangle with background color, and it is vertical centered.
-    //      |
-    //  ----|
-    //      |
-    return html`<span class="whisker-right"> <span class="horizontal"></span> </span>`;
+    return html`${PerfUI.NetworkPriorities.uiLabelForNetworkPriority(networkRequest.args.data.initialPriority)}
+        <devtools-icon name=${'arrow-forward'} class="priority"></devtools-icon>
+        ${PerfUI.NetworkPriorities.uiLabelForNetworkPriority(networkRequest.args.data.priority)}`;
   }
 
-  #renderTimings(): LitHtml.TemplateResult|null {
-    if (!this.#networkRequest) {
-      return null;
-    }
-    const syntheticData = this.#networkRequest.args.data.syntheticData;
-    const queueing = (syntheticData.sendStartTime - this.#networkRequest.ts) as Trace.Types.Timing.MicroSeconds;
+  static renderTimings(networkRequest: Trace.Types.Events.SyntheticNetworkRequest): LitHtml.TemplateResult|null {
+    const syntheticData = networkRequest.args.data.syntheticData;
+    const queueing = (syntheticData.sendStartTime - networkRequest.ts) as Trace.Types.Timing.MicroSeconds;
     const requestPlusWaiting =
         (syntheticData.downloadStart - syntheticData.sendStartTime) as Trace.Types.Timing.MicroSeconds;
     const download = (syntheticData.finishTime - syntheticData.downloadStart) as Trace.Types.Timing.MicroSeconds;
-    const waitingOnMainThread = (this.#networkRequest.ts + this.#networkRequest.dur - syntheticData.finishTime) as
-        Trace.Types.Timing.MicroSeconds;
+    const waitingOnMainThread =
+        (networkRequest.ts + networkRequest.dur - syntheticData.finishTime) as Trace.Types.Timing.MicroSeconds;
 
-    const color = colorForNetworkRequest(this.#networkRequest);
+    const color = colorForNetworkRequest(networkRequest);
     const styleForWaiting = {
       backgroundColor: `color-mix(in srgb, ${color}, hsla(0, 100%, 100%, 0.8))`,
     };
@@ -120,29 +94,40 @@ export class NetworkRequestTooltip extends HTMLElement {
       backgroundColor: color,
     };
 
+    // The outside spans are transparent with a border on the outside edge.
+    // The inside spans are 1px tall rectangles, vertically centered, with background color.
+    //                   |
+    //                   |----
+    //   whisker-left->  |  ^ horizontal
+    const leftWhisker = html`<span class="whisker-left"> <span class="horizontal"></span> </span>`;
+    const rightWhisker = html`<span class="whisker-right"> <span class="horizontal"></span> </span>`;
+
     return html`
-      <ul>
-        <li>
-          ${this.#renderLeftWhisker()}
-          ${UIStrings.queuingAndConnecting}
-          <span class="time">${i18n.TimeUtilities.formatMicroSecondsTime(queueing)}</span>
-        </li>
-        <li>
-          <span class="indicator" style=${LitHtml.Directives.styleMap(styleForWaiting)}></span>
-          ${UIStrings.requestSentAndWaiting}
-          <span class="time">${i18n.TimeUtilities.formatMicroSecondsTime(requestPlusWaiting)}</span>
-        </li>
-        <li>
-          <span class="indicator" style=${LitHtml.Directives.styleMap(styleForDownloading)}></span>
-          ${UIStrings.contentDownloading}
-          <span class="time">${i18n.TimeUtilities.formatMicroSecondsTime(download)}</span>
-        </li>
-        <li>
-          ${this.#renderRightWhisker()}
-          ${UIStrings.waitingOnMainThread}
-          <span class="time">${i18n.TimeUtilities.formatMicroSecondsTime(waitingOnMainThread)}</span>
-        </li>
-      </ul>
+      <div class="timings-row timings-row--duration">
+        <span class="indicator"></span>
+        ${i18nString(UIStrings.duration)}
+         <span class="time">${i18n.TimeUtilities.formatMicroSecondsTime(networkRequest.dur)}</span>
+      </div>
+      <div class="timings-row">
+        ${leftWhisker}
+        ${i18nString(UIStrings.queuingAndConnecting)}
+        <span class="time">${i18n.TimeUtilities.formatMicroSecondsTime(queueing)}</span>
+      </div>
+      <div class="timings-row">
+        <span class="indicator" style=${LitHtml.Directives.styleMap(styleForWaiting)}></span>
+        ${i18nString(UIStrings.requestSentAndWaiting)}
+        <span class="time">${i18n.TimeUtilities.formatMicroSecondsTime(requestPlusWaiting)}</span>
+      </div>
+      <div class="timings-row">
+        <span class="indicator" style=${LitHtml.Directives.styleMap(styleForDownloading)}></span>
+        ${i18nString(UIStrings.contentDownloading)}
+        <span class="time">${i18n.TimeUtilities.formatMicroSecondsTime(download)}</span>
+      </div>
+      <div class="timings-row">
+        ${rightWhisker}
+        ${i18nString(UIStrings.waitingOnMainThread)}
+        <span class="time">${i18n.TimeUtilities.formatMicroSecondsTime(waitingOnMainThread)}</span>
+      </div>
     `;
   }
 
@@ -150,21 +135,26 @@ export class NetworkRequestTooltip extends HTMLElement {
     if (!this.#networkRequest) {
       return;
     }
-    const networkData = this.#networkRequest.args.data;
+    const chipStyle = {
+      backgroundColor: `${colorForNetworkRequest(this.#networkRequest)}`,
+    };
+    const url = new URL(this.#networkRequest.args.data.url);
+
     // clang-format off
     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>
+        <div class="url">${Platform.StringUtilities.trimMiddle(url.href.replace(url.origin, ''), MAX_URL_LENGTH)}</div>
+        <div class="url url--host">${url.origin.replace('https://', '')}</div>
 
         <div class="divider"></div>
-        ${this.#renderPriority()}
+        <div class="network-category"><span class="network-category-chip" style=${LitHtml.Directives.styleMap(chipStyle)}></span>${networkResourceCategory(this.#networkRequest)}</div>
+        <div class="priority-row">${i18nString(UIStrings.priority)}: ${NetworkRequestTooltip.renderPriorityValue(this.#networkRequest)}</div>
         ${Trace.Helpers.Network.isSyntheticNetworkRequestEventRenderBlocking(this.#networkRequest) ?
-          html`<div class="render-blocking"> ${UIStrings.renderBlocking} </div>` :  LitHtml.nothing
+          html`<div class="render-blocking"> ${i18nString(UIStrings.renderBlocking)} </div>` :  LitHtml.nothing
         }
         <div class="divider"></div>
 
-        ${this.#renderTimings()}
+        ${NetworkRequestTooltip.renderTimings(this.#networkRequest)}
       </div>
     `;
     // clang-format on

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

@@ -16,6 +16,7 @@ export interface ActiveInsight {
   name: string;
   insightSetKey: string;
   overlays: Overlays.Overlays.TimelineOverlay[];
+  relatedEvents: Trace.Types.Events.Event[];
 }
 
 export class RemoveAnnotation extends Event {
@@ -65,7 +66,7 @@ export class SidebarWidget extends UI.Widget.VBox {
    * SplitWidget tracks its state in its own setting.
    */
   #userHasOpenedSidebarOnce =
-      Common.Settings.Settings.instance().createSetting<boolean>('timeline-user-has-opened-siderbar-once', false);
+      Common.Settings.Settings.instance().createSetting<boolean>('timeline-user-has-opened-sidebar-once', false);
 
   userHasOpenedSidebarOnce(): boolean {
     return this.#userHasOpenedSidebarOnce.get();

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

@@ -8,13 +8,11 @@ import * as Platform from '../../../core/platform/platform.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as TraceBounds from '../../../services/trace_bounds/trace_bounds.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
-import type * as Settings from '../../../ui/components/settings/settings.js';
 import * as ThemeSupport from '../../../ui/legacy/theme_support/theme_support.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
+import * as Utils from '../utils/utils.js';
 
-import {nameForEntry} from './EntryName.js';
 import {RemoveAnnotation, RevealAnnotation} from './Sidebar.js';
 import sidebarAnnotationsTabStyles from './sidebarAnnotationsTab.css.js';
 
@@ -195,7 +193,7 @@ export class SidebarAnnotationsTab extends HTMLElement {
 
   #renderEntryToIdentifier(annotation: Trace.Types.File.EntriesLinkAnnotation): LitHtml.LitTemplate {
     if (annotation.entryTo) {
-      const entryToName = nameForEntry(annotation.entryTo);
+      const entryToName = Utils.EntryName.nameForEntry(annotation.entryTo);
       const toBackgroundColor = this.#annotationEntryToColorMap.get(annotation.entryTo) ?? '';
       const toTextColor = findTextColorForContrast(toBackgroundColor);
       const styleForToAnnotationIdentifier = {
@@ -226,7 +224,7 @@ export class SidebarAnnotationsTab extends HTMLElement {
   #renderAnnotationIdentifier(annotation: Trace.Types.File.Annotation): LitHtml.LitTemplate {
     switch (annotation.type) {
       case 'ENTRY_LABEL': {
-        const entryName = nameForEntry(annotation.entry);
+        const entryName = Utils.EntryName.nameForEntry(annotation.entry);
         const backgroundColor = this.#annotationEntryToColorMap.get(annotation.entry) ?? '';
         const color = findTextColorForContrast(backgroundColor);
         const styleForAnnotationIdentifier = {
@@ -255,7 +253,7 @@ export class SidebarAnnotationsTab extends HTMLElement {
         `;
       }
       case 'ENTRIES_LINK': {
-        const entryFromName = nameForEntry(annotation.entryFrom);
+        const entryFromName = Utils.EntryName.nameForEntry(annotation.entryFrom);
         const fromBackgroundColor = this.#annotationEntryToColorMap.get(annotation.entryFrom) ?? '';
         const fromTextColor = findTextColorForContrast(fromBackgroundColor);
         const styleForFromAnnotationIdentifier = {
@@ -273,12 +271,12 @@ export class SidebarAnnotationsTab extends HTMLElement {
               color: 'var(--icon-default)',
               width: '18px',
               height: '18px',
-            } as IconButton.Icon.IconData}>
+            }}>
             </devtools-icon>
             ${this.#renderEntryToIdentifier(annotation)}
           </div>
       `;
-        // clang-format on
+            // clang-format on
       }
       default:
         Platform.assertNever(annotation, 'Unsupported annotation type');
@@ -365,7 +363,7 @@ export class SidebarAnnotationsTab extends HTMLElement {
                           color: 'var(--icon-default)',
                           width: '20px',
                           height: '20px',
-                        } as IconButton.Icon.IconData}
+                        }}
                       ></devtools-icon>
                     </button>
                   </div>`;
@@ -373,7 +371,7 @@ export class SidebarAnnotationsTab extends HTMLElement {
               <setting-checkbox class="visibility-setting" .data=${{
                 setting: this.#annotationsHiddenSetting,
                 textOverride: 'Hide annotations',
-              } as Settings.SettingCheckbox.SettingCheckboxData}>
+              }}>
               </setting-checkbox>`
       }
       </span>`,
@@ -393,7 +391,7 @@ declare global {
 function detailedAriaDescriptionForAnnotation(annotation: Trace.Types.File.Annotation): string {
   switch (annotation.type) {
     case 'ENTRY_LABEL': {
-      const name = nameForEntry(annotation.entry);
+      const name = Utils.EntryName.nameForEntry(annotation.entry);
       return i18nString(UIStrings.entryLabelDescriptionLabel, {
         PH1: name,
         PH2: annotation.label,
@@ -412,8 +410,8 @@ function detailedAriaDescriptionForAnnotation(annotation: Trace.Types.File.Annot
         // Only label it if it is completed.
         return '';
       }
-      const nameFrom = nameForEntry(annotation.entryFrom);
-      const nameTo = nameForEntry(annotation.entryTo);
+      const nameFrom = Utils.EntryName.nameForEntry(annotation.entryFrom);
+      const nameTo = Utils.EntryName.nameForEntry(annotation.entryTo);
       return i18nString(UIStrings.entryLinkDescriptionLabel, {
         PH1: nameFrom,
         PH2: nameTo,

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

@@ -132,6 +132,52 @@ export class SidebarInsightsTab extends HTMLElement {
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(FEEDBACK_URL);
   }
 
+  #onZoomClick(event: Event, id: string): void {
+    event.stopPropagation();
+    const data = this.#insights?.get(id);
+    if (!data) {
+      return;
+    }
+    this.dispatchEvent(new Insights.SidebarInsight.InsightSetZoom(data.bounds));
+  }
+
+  #renderZoomButton(insightSetToggled: boolean): LitHtml.TemplateResult {
+    const classes = LitHtml.Directives.classMap({
+      'zoom-icon': true,
+      active: insightSetToggled,
+    });
+
+    // clang-format off
+    return html`
+    <div class=${classes}>
+        <devtools-button .data=${{
+          variant: Buttons.Button.Variant.ICON,
+          iconName: 'center-focus-weak',
+          size: Buttons.Button.Size.SMALL,
+        } as Buttons.Button.ButtonData}
+      ></devtools-button></div>`;
+    // clang-format on
+  }
+
+  #renderDropdownIcon(insightSetToggled: boolean): LitHtml.TemplateResult {
+    const containerClasses = LitHtml.Directives.classMap({
+      'dropdown-icon': true,
+      active: insightSetToggled,
+    });
+
+    // clang-format off
+    return html`
+      <div class=${containerClasses}>
+        <devtools-button .data=${{
+          variant: Buttons.Button.Variant.ICON,
+          iconName: 'chevron-right',
+          size: Buttons.Button.Size.SMALL,
+        } as Buttons.Button.ButtonData}
+      ></devtools-button></div>
+    `;
+    // clang-format on
+  }
+
   #render(): void {
     if (!this.#parsedTrace || !this.#insights) {
       LitHtml.render(LitHtml.nothing, this.#shadow, {host: this});
@@ -168,8 +214,11 @@ export class SidebarInsightsTab extends HTMLElement {
                 @click=${() => this.#insightSetToggled(id)}
                 @mouseenter=${() => this.#insightSetHovered(id)}
                 @mouseleave=${() => this.#insightSetUnhovered()}
-                title=${url.href}
-                >${labels[index]}</summary>
+                title=${url.href}>
+                ${this.#renderDropdownIcon(id === this.#insightSetKey)}
+                <span>${labels[index]}</span>
+                <span class='zoom-button' @click=${(event: Event) => this.#onZoomClick(event, id)}>${this.#renderZoomButton(id === this.#insightSetKey)}</span>
+              </summary>
               ${contents}
             </details>`;
           }