chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

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

@@ -2,10 +2,33 @@
 // 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 Platform from '../../../core/platform/platform.js';
+import * as Protocol from '../../../generated/protocol.js';
 import type * as Trace from '../../../models/trace/trace.js';
 import * as ThemeSupport from '../../../ui/legacy/theme_support/theme_support.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
+const UIStrings = {
+  /**
+   *@description ms is the short form of milli-seconds and the placeholder is a decimal number.
+   * The shortest form or abbreviation of milliseconds should be used, as there is
+   * limited room in this UI.
+   *@example {2.14} PH1
+   */
+  fms: '{PH1}[ms]()',
+  /**
+   *@description s is short for seconds and the placeholder is a decimal number
+   * The shortest form or abbreviation of seconds should be used, as there is
+   * limited room in this UI.
+   *@example {2.14} PH1
+   */
+  fs: '{PH1}[s]()',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/Utils.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
 export enum NetworkCategory {
   DOC = 'Doc',
   CSS = 'CSS',
@@ -17,44 +40,42 @@ export enum NetworkCategory {
   OTHER = 'Other',
 }
 
-function syntheticNetworkRequestCategory(request: Trace.Types.Events.SyntheticNetworkRequest): NetworkCategory {
-  switch (request.args.data.mimeType) {
-    case 'text/html':
+export function networkResourceCategory(request: Trace.Types.Events.SyntheticNetworkRequest): NetworkCategory {
+  const {mimeType} = request.args.data;
+  switch (request.args.data.resourceType) {
+    case Protocol.Network.ResourceType.Document:
       return NetworkCategory.DOC;
-    case 'application/javascript':
-    case 'application/x-javascript':
-    case 'text/javascript':
-      return NetworkCategory.JS;
-    case 'text/css':
+    case Protocol.Network.ResourceType.Stylesheet:
       return NetworkCategory.CSS;
-    case 'image/gif':
-    case 'image/jpeg':
-    case 'image/png':
-    case 'image/svg+xml':
-    case 'image/webp':
-    case 'image/x-icon':
+    case Protocol.Network.ResourceType.Image:
       return NetworkCategory.IMG;
-    case 'audio/aac':
-    case 'audio/midi':
-    case 'audio/x-midi':
-    case 'audio/mpeg':
-    case 'audio/ogg':
-    case 'audio/wav':
-    case 'audio/webm':
+    case Protocol.Network.ResourceType.Media:
       return NetworkCategory.MEDIA;
-    case 'font/opentype':
-    case 'font/woff2':
-    case 'font/ttf':
-    case 'application/font-woff':
+    case Protocol.Network.ResourceType.Font:
       return NetworkCategory.FONT;
-    case 'application/wasm':
-      return NetworkCategory.WASM;
+    case Protocol.Network.ResourceType.Script:
+    case Protocol.Network.ResourceType.WebSocket:
+      return NetworkCategory.JS;
     default:
-      return NetworkCategory.OTHER;
+      // FWIW, all the other (current) resourceTypes are:
+      //     TextTrack, XHR, Fetch, Prefetch, EventSource, Manifest, SignedExchange, Ping, CSPViolationReport, Preflight, Other
+
+      // 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 :
+          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 :
+                                                                           // Ultimate fallback:
+                                                                           NetworkCategory.OTHER;
   }
 }
 
 export function colorForNetworkCategory(category: NetworkCategory): string {
+  // TODO: These should align with `baseResourceTypeColors` from `NetworkWaterfallColumn`.
   let cssVarName = '--app-color-system';
   switch (category) {
     case NetworkCategory.DOC:
@@ -87,7 +108,7 @@ export function colorForNetworkCategory(category: NetworkCategory): string {
 }
 
 export function colorForNetworkRequest(request: Trace.Types.Events.SyntheticNetworkRequest): string {
-  const category = syntheticNetworkRequestCategory(request);
+  const category = networkResourceCategory(request);
   return colorForNetworkCategory(category);
 }
 
@@ -136,3 +157,98 @@ export function renderMetricValue(
 
   return metricValueEl;
 }
+
+export type NumberWithUnitString = {
+  element: HTMLElement,
+  text: string,
+};
+
+/**
+ * These methods format numbers with units in a way that allows the unit portion to be styled specifically.
+ * They return a text string (the usual string resulting from formatting a number), and an HTMLSpanElement.
+ * The element contains the formatted number, with a nested span element for the unit portion: `.unit`.
+ *
+ * This formatting is locale-aware. This is accomplished by utilizing the fact that UIStrings passthru
+ * markdown link syntax: `[text that will be translated](not translated)`. The result
+ * is a translated string like this: `[t̂éx̂t́ t̂h́ât́ ŵíl̂ĺ b̂é t̂ŕâńŝĺât́êd́](not translated)`. This is used within
+ * insight components to localize markdown content. But here, we utilize it to parse a localized string.
+ *
+ * If the parsing fails, we fallback to i18n.TimeUtilities, and there will be no `.unit` element.
+ *
+ * As of this writing, our only locale where the unit comes before the number is `sw`, ex: `Sek {PH1}`.
+ *
+    new Intl.NumberFormat('sw', {
+      style: 'unit',
+      unit: 'millisecond',
+      unitDisplay: 'narrow'
+    }).format(10); // 'ms 10'
+ *
+ */
+export namespace NumberWithUnit {
+  export function parse(text: string): {firstPart: string, unitPart: string, lastPart: string}|null {
+    const startBracket = text.indexOf('[');
+    const endBracket = startBracket !== -1 && text.indexOf(']', startBracket);
+    const startParen = endBracket && text.indexOf('(', endBracket);
+    const endParen = startParen && text.indexOf(')', startParen);
+    if (!endParen || endParen === -1) {
+      return null;
+    }
+
+    const firstPart = text.substring(0, startBracket);
+    const unitPart = text.substring(startBracket + 1, endBracket);
+    const lastPart = text.substring(endParen + 1);  // skips `]()`
+    return {firstPart, unitPart, lastPart};
+  }
+
+  export function formatMicroSecondsAsSeconds(time: Platform.Timing.MicroSeconds): NumberWithUnitString {
+    const element = document.createElement('span');
+    element.classList.add('number-with-unit');
+    const milliseconds = Platform.Timing.microSecondsToMilliSeconds(time);
+    const seconds = Platform.Timing.milliSecondsToSeconds(milliseconds);
+    const text = i18nString(UIStrings.fs, {PH1: (seconds).toFixed(2)});
+
+    const result = parse(text);
+    if (!result) {
+      // Some sort of problem with parsing, so fallback to not marking up the unit.
+      element.textContent = i18n.TimeUtilities.formatMicroSecondsAsSeconds(time);
+      return {text, element};
+    }
+
+    const {firstPart, unitPart, lastPart} = result;
+    if (firstPart) {
+      element.append(firstPart);
+    }
+    element.createChild('span', 'unit').textContent = unitPart;
+    if (lastPart) {
+      element.append(lastPart);
+    }
+
+    return {text: element.textContent ?? '', element};
+  }
+
+  export function formatMicroSecondsAsMillisFixed(time: Platform.Timing.MicroSeconds, fractionDigits = 0):
+      NumberWithUnitString {
+    const element = document.createElement('span');
+    element.classList.add('number-with-unit');
+    const milliseconds = Platform.Timing.microSecondsToMilliSeconds(time);
+    const text = i18nString(UIStrings.fms, {PH1: (milliseconds).toFixed(fractionDigits)});
+
+    const result = parse(text);
+    if (!result) {
+      // Some sort of problem with parsing, so fallback to not marking up the unit.
+      element.textContent = i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(time);
+      return {text, element};
+    }
+
+    const {firstPart, unitPart, lastPart} = result;
+    if (firstPart) {
+      element.append(firstPart);
+    }
+    element.createChild('span', 'unit').textContent = unitPart;
+    if (lastPart) {
+      element.append(lastPart);
+    }
+
+    return {text: element.textContent ?? '', element};
+  }
+}

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

@@ -6,8 +6,6 @@ import * as Breadcrumbs from './Breadcrumbs.js';
 import * as BreadcrumbsUI from './BreadcrumbsUI.js';
 import * as CPUThrottlingSelector from './CPUThrottlingSelector.js';
 import * as DetailsView from './DetailsView.js';
-import * as EntryName from './EntryName.js';
-import * as EntryStyles from './EntryStyles.js';
 import * as FieldSettingsDialog from './FieldSettingsDialog.js';
 import * as InteractionBreakdown from './InteractionBreakdown.js';
 import * as LayoutShiftDetails from './LayoutShiftDetails.js';
@@ -16,6 +14,7 @@ import * as MetricCard from './MetricCard.js';
 import * as NetworkRequestDetails from './NetworkRequestDetails.js';
 import * as NetworkRequestTooltip from './NetworkRequestTooltip.js';
 import * as NetworkThrottlingSelector from './NetworkThrottlingSelector.js';
+import * as RelatedInsightChips from './RelatedInsightChips.js';
 import * as Sidebar from './Sidebar.js';
 import * as SidebarAnnotationsTab from './SidebarAnnotationsTab.js';
 import * as SidebarInsightsTab from './SidebarInsightsTab.js';
@@ -27,8 +26,6 @@ export {
   BreadcrumbsUI,
   CPUThrottlingSelector,
   DetailsView,
-  EntryName,
-  EntryStyles,
   FieldSettingsDialog,
   InteractionBreakdown,
   LayoutShiftDetails,
@@ -37,6 +34,7 @@ export {
   NetworkRequestDetails,
   NetworkRequestTooltip,
   NetworkThrottlingSelector,
+  RelatedInsightChips,
   Sidebar,
   SidebarAnnotationsTab,
   SidebarInsightsTab,

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

@@ -7,10 +7,12 @@ import * as Trace from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
-import {BaseInsight, EventReferenceClick, shouldRenderForCategory} from './Helpers.js';
-import * as SidebarInsight from './SidebarInsight.js';
+import {EventReferenceClick} from './EventRef.js';
+import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
 import {Category} from './types.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /** Title of an insight that provides details about why elements shift/move on the page. The causes for these shifts are referred to as culprits ("reasons"). */
   title: 'Layout shift culprits',
@@ -25,10 +27,14 @@ const UIStrings = {
    */
   worstLayoutShiftCluster: 'Worst layout shift cluster',
   /**
-   * @description Text indicating the worst layout shift cluster and its start time.
+   * @description Text indicating the worst layout shift cluster.
+   */
+  worstCluster: 'Worst cluster',
+  /**
+   * @description Text indicating a layout shift cluster and its start time.
    * @example {32 ms} PH1
    */
-  worstCluster: 'Worst cluster: Layout shift cluster @ {PH1}',
+  layoutShiftCluster: 'Layout shift cluster @ {PH1}',
   /**
    *@description Text indicating the biggest reasons for the layout shifts.
    */
@@ -45,12 +51,16 @@ const UIStrings = {
    * @description Text for a culprit type of Animation.
    */
   animation: 'Animation',
+  /**
+   * @description Text for a culprit type of Unsized images.
+   */
+  unsizedImages: 'Unsized Images',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/CLSCulprits.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class CLSCulprits extends BaseInsight {
-  static readonly litTagName = LitHtml.literal`devtools-performance-cls-culprits`;
+  static override readonly litTagName = LitHtml.literal`devtools-performance-cls-culprits`;
   override insightCategory: Category = Category.CLS;
   override internalName: string = 'cls-culprits';
   override userVisibleTitle: string = i18nString(UIStrings.title);
@@ -70,7 +80,7 @@ export class CLSCulprits extends BaseInsight {
     const range = Trace.Types.Timing.MicroSeconds(worstCluster.dur ?? 0);
     const max = Trace.Types.Timing.MicroSeconds(worstCluster.ts + range);
 
-    const label = LitHtml.html`<div>${i18nString(UIStrings.worstLayoutShiftCluster)}</div>`;
+    const label = html`<div>${i18nString(UIStrings.worstLayoutShiftCluster)}</div>`;
     return [{
       type: 'TIMESPAN_BREAKDOWN',
       sections: [
@@ -78,49 +88,49 @@ export class CLSCulprits extends BaseInsight {
       ],
       // This allows for the overlay to sit over the layout shift.
       entry: worstCluster.events[0],
+      renderLocation: 'ABOVE_EVENT',
     }];
   }
 
   /**
-   * getTopCulprits gets the top 3 shift root causes based on clusters.
+   * getTopCulprits gets the top 3 shift root causes based on worst cluster.
    */
   getTopCulprits(
-      clusters: Trace.Types.Events.SyntheticLayoutShiftCluster[],
+      cluster: Trace.Types.Events.SyntheticLayoutShiftCluster,
       culpritsByShift:
           Map<Trace.Types.Events.LayoutShift,
-              Trace.Insights.InsightRunners.CumulativeLayoutShift.LayoutShiftRootCausesData>|undefined): string[] {
-    if (!culpritsByShift) {
-      return [];
-    }
+              Trace.Insights.InsightRunners.CumulativeLayoutShift.LayoutShiftRootCausesData>): string[] {
     const MAX_TOP_CULPRITS = 3;
     const causes: Array<string> = [];
-    for (const cluster of clusters) {
+    if (causes.length === MAX_TOP_CULPRITS) {
+      return causes;
+    }
+    const shifts = cluster.events;
+    for (const shift of shifts) {
       if (causes.length === MAX_TOP_CULPRITS) {
         break;
       }
-      const shifts = cluster.events;
-      for (const shift of shifts) {
-        if (causes.length === MAX_TOP_CULPRITS) {
-          break;
-        }
-
-        const culprits = culpritsByShift.get(shift);
-        if (!culprits) {
-          continue;
-        }
-        const fontReq = culprits.fontRequests;
-        const iframes = culprits.iframeIds;
-        const animations = culprits.nonCompositedAnimations;
-
-        for (let i = 0; i < fontReq.length && causes.length < MAX_TOP_CULPRITS; i++) {
-          causes.push(i18nString(UIStrings.fontRequest));
-        }
-        for (let i = 0; i < iframes.length && causes.length < MAX_TOP_CULPRITS; i++) {
-          causes.push(i18nString(UIStrings.injectedIframe));
-        }
-        for (let i = 0; i < animations.length && causes.length < MAX_TOP_CULPRITS; i++) {
-          causes.push(i18nString(UIStrings.animation));
-        }
+
+      const culprits = culpritsByShift.get(shift);
+      if (!culprits) {
+        continue;
+      }
+      const fontReq = culprits.fontRequests;
+      const iframes = culprits.iframeIds;
+      const animations = culprits.nonCompositedAnimations;
+      const unsizedImages = culprits.unsizedImages;
+
+      for (let i = 0; i < fontReq.length && causes.length < MAX_TOP_CULPRITS; i++) {
+        causes.push(i18nString(UIStrings.fontRequest));
+      }
+      for (let i = 0; i < iframes.length && causes.length < MAX_TOP_CULPRITS; i++) {
+        causes.push(i18nString(UIStrings.injectedIframe));
+      }
+      for (let i = 0; i < animations.length && causes.length < MAX_TOP_CULPRITS; i++) {
+        causes.push(i18nString(UIStrings.animation));
+      }
+      for (let i = 0; i < unsizedImages.length && causes.length < MAX_TOP_CULPRITS; i++) {
+        causes.push(i18nString(UIStrings.unsizedImages));
       }
     }
     return causes.slice(0, MAX_TOP_CULPRITS);
@@ -137,46 +147,57 @@ export class CLSCulprits extends BaseInsight {
 
     // TODO(crbug.com/369102516): use Table for hover/click ux.
     // clang-format off
-    return LitHtml.html`
+    return html`
         <div class="insights">
-            <${SidebarInsight.SidebarInsight.litTagName} .data=${{
+            <devtools-performance-sidebar-insight .data=${{
               title: this.userVisibleTitle,
               description: this.description,
               internalName: this.internalName,
               expanded: this.isActive(),
-            } as SidebarInsight.InsightDetails}
+            }}
             @insighttoggleclick=${this.onSidebarClick}>
                 <div slot="insight-content" class="insight-section">
-                  <div class="devtools-link" @click=${() => this.#clickEvent(worstCluster)}>${i18nString(UIStrings.worstCluster, {PH1: clusterTs})}</div>
-                  <p>
-                    <h3>${i18nString(UIStrings.topCulprits)}</h3>
-                    ${culprits.map(culprit => {
-                      return LitHtml.html `
-                        <li>${culprit}</li>
-                      `;
-                    })}
-                  <p>
+                  <span class="worst-cluster">${i18nString(UIStrings.worstCluster)}: <button type="button" class="timeline-link" @click=${() => this.#clickEvent(worstCluster)}>${i18nString(UIStrings.layoutShiftCluster, {PH1: clusterTs})}</button></span>
+                    <p>${i18nString(UIStrings.topCulprits)}:</p>
+                        ${culprits.map(culprit => {
+                          return html `
+                            <li>${culprit}</li>
+                          `;
+                        })}
                 </div>
-            </${SidebarInsight.SidebarInsight}>
+            </devtools-performance-sidebar-insight>
         </div>`;
-    // clang-format on
+              // clang-format on
+  }
+
+  override getRelatedEvents(): Trace.Types.Events.Event[] {
+    const insight =
+        Trace.Insights.Common.getInsight('CumulativeLayoutShift', this.data.insights, this.data.insightSetKey);
+    return insight?.relatedEvents ?? [];
   }
 
   override render(): void {
     const insight =
         Trace.Insights.Common.getInsight('CumulativeLayoutShift', this.data.insights, this.data.insightSetKey);
-    const culpritsByShift = insight?.shifts;
-    const clusters = insight?.clusters ?? [];
-    const clustersByScore = clusters.toSorted((a, b) => b.clusterCumulativeScore - a.clusterCumulativeScore);
+    if (!insight) {
+      return;
+    }
+
+    const culpritsByShift = insight.shifts;
+    const clusters = insight.clusters ?? [];
+    if (!clusters.length || !insight.worstCluster) {
+      return;
+    }
+
+    const causes = this.getTopCulprits(insight.worstCluster, culpritsByShift);
 
-    const causes = this.getTopCulprits(clustersByScore, culpritsByShift);
     const hasCulprits = causes.length > 0;
 
     const matchesCategory = shouldRenderForCategory({
       activeCategory: this.data.activeCategory,
       insightCategory: this.insightCategory,
     });
-    const output = hasCulprits && matchesCategory ? this.#render(causes, clustersByScore[0]) : LitHtml.nothing;
+    const output = hasCulprits && matchesCategory ? this.#render(causes, insight.worstCluster) : LitHtml.nothing;
     LitHtml.render(output, this.shadow, {host: this});
   }
 }

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

@@ -2,21 +2,28 @@
 // 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 Trace from '../../../../models/trace/trace.js';
-import * as IconButton from '../../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
 import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
-import * as SidebarInsight from './SidebarInsight.js';
 import {Category} from './types.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Title of an insight that provides a breakdown for how long it took to download the main document.
    */
   title: 'Document request latency',
+  /**
+   *@description Description of an insight that provides a breakdown for how long it took to download the main document.
+   */
+  description:
+      'Your first network request is the most important.  Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.',
   /**
    * @description Text to tell the user that the document request does not have redirects.
    */
@@ -41,26 +48,51 @@ const UIStrings = {
    * @description Text to tell the user that text compression (like gzip) was not applied.
    */
   failedTextCompression: 'No compression applied',
+  /**
+   * @description Text for a label describing a network request event as having redirects.
+   */
+  redirectsLabel: 'Redirects',
+  /**
+   * @description Text for a label describing a network request event as taking too long to start delivery by the server.
+   */
+  serverResponseTimeLabel: 'Server response time',
+  /**
+   * @description Text for a label describing a network request event as taking longer to download because it wasn't compressed.
+   */
+  uncompressedDownload: 'Uncompressed download',
+  /**
+   *@description Text for a screen-reader label to tell the user that the icon represents a successful insight check
+   *@example {Server response time} PH1
+   */
+  successAriaLabel: 'Insight check passed: {PH1}',
+  /**
+   *@description Text for a screen-reader label to tell the user that the icon represents an unsuccessful insight check
+   *@example {Server response time} PH1
+   */
+  failedAriaLabel: 'Insight check failed: {PH1}',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/DocumentLatency.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class DocumentLatency extends BaseInsight {
-  static readonly litTagName = LitHtml.literal`devtools-performance-document-latency`;
+  static override readonly litTagName = LitHtml.literal`devtools-performance-document-latency`;
   override insightCategory: Category = Category.ALL;
   override internalName: string = 'document-latency';
   override userVisibleTitle: string = i18nString(UIStrings.title);
-  override description: string = '';
+  override description: string = i18nString(UIStrings.description);
 
   #check(didPass: boolean, good: string, bad: string): LitHtml.TemplateResult {
     const icon = didPass ? 'check-circle' : 'clear';
 
-    return LitHtml.html`
-      <${IconButton.Icon.Icon.litTagName}
+    const ariaLabel = didPass ? i18nString(UIStrings.successAriaLabel, {PH1: good}) :
+                                i18nString(UIStrings.failedAriaLabel, {PH1: bad});
+    return html`
+      <devtools-icon
+        aria-label=${ariaLabel}
         name=${icon}
         class=${didPass ? 'metric-value-good' : 'metric-value-bad'}
-      ></${IconButton.Icon.Icon.litTagName}>
+      ></devtools-icon>
       <span>${didPass ? good : bad}</span>
     `;
   }
@@ -71,11 +103,56 @@ export class DocumentLatency extends BaseInsight {
       return [];
     }
 
-    // TODO(crbug.com/352244434) add breakdown for server response time, queing, redirects, etc...
-    return [{
+    const overlays: Overlays.Overlays.TimelineOverlay[] = [];
+    const event = insight.data.documentRequest;
+    const redirectDurationMicro = Trace.Helpers.Timing.millisecondsToMicroseconds(insight.data.redirectDuration);
+
+    const sections = [];
+    if (insight.data.redirectDuration) {
+      const bounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(
+          event.ts,
+          (event.ts + redirectDurationMicro) as Trace.Types.Timing.MicroSeconds,
+      );
+      sections.push({bounds, label: i18nString(UIStrings.redirectsLabel), showDuration: true});
+      overlays.push({type: 'CANDY_STRIPED_TIME_RANGE', bounds, entry: event});
+    }
+    if (insight.data.serverResponseTooSlow) {
+      const serverResponseTimeMicro = Trace.Helpers.Timing.millisecondsToMicroseconds(insight.data.serverResponseTime);
+      // NOTE: NetworkRequestHandlers never makes a synthetic network request event if `timing` is missing.
+      const sendEnd = event.args.data.timing?.sendEnd ?? Trace.Types.Timing.MilliSeconds(0);
+      const sendEndMicro = Trace.Helpers.Timing.millisecondsToMicroseconds(sendEnd);
+      const bounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(
+          sendEndMicro,
+          (sendEndMicro + serverResponseTimeMicro) as Trace.Types.Timing.MicroSeconds,
+      );
+      sections.push({bounds, label: i18nString(UIStrings.serverResponseTimeLabel), showDuration: true});
+    }
+    if (insight.data.uncompressedResponseBytes) {
+      const bounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(
+          event.args.data.syntheticData.downloadStart,
+          (event.args.data.syntheticData.downloadStart + event.args.data.syntheticData.download) as
+              Trace.Types.Timing.MicroSeconds,
+      );
+      sections.push({bounds, label: i18nString(UIStrings.uncompressedDownload), showDuration: true});
+      overlays.push({type: 'CANDY_STRIPED_TIME_RANGE', bounds, entry: event});
+    }
+
+    if (sections.length) {
+      overlays.push({
+        type: 'TIMESPAN_BREAKDOWN',
+        sections,
+        entry: insight.data.documentRequest,
+        // Always render below because the document request is guaranteed to be
+        // the first request in the network track.
+        renderLocation: 'BELOW_EVENT',
+      });
+    }
+    overlays.push({
       type: 'ENTRY_SELECTED',
       entry: insight.data.documentRequest,
-    }];
+    });
+
+    return overlays;
   }
 
   #renderInsight(insight: Trace.Insights.Types.InsightResults['DocumentLatency']): LitHtml.LitTemplate {
@@ -84,15 +161,16 @@ export class DocumentLatency extends BaseInsight {
     }
 
     // clang-format off
-    return LitHtml.html`
+    return html`
     <div class="insights">
-      <${SidebarInsight.SidebarInsight.litTagName} .data=${{
+      <devtools-performance-sidebar-insight .data=${{
             title: this.userVisibleTitle,
             description: this.description,
             expanded: this.isActive(),
             internalName: this.internalName,
-            estimatedSavings: insight.metricSavings?.FCP,
-        } as SidebarInsight.InsightDetails}
+            estimatedSavingsTime: insight.metricSavings?.FCP,
+            estimatedSavingsBytes: insight.data.uncompressedResponseBytes,
+        }}
         @insighttoggleclick=${this.onSidebarClick}
       >
         <div slot="insight-content" class="insight-section">
@@ -111,18 +189,28 @@ export class DocumentLatency extends BaseInsight {
             </li>
           </ul>
         </div>
-      </${SidebarInsight.SidebarInsight}>
+      </devtools-performance-sidebar-insight>
     </div>`;
-    // clang-format on
+            // clang-format on
+  }
+
+  override getRelatedEvents(): Trace.Types.Events.Event[] {
+    const insight = Trace.Insights.Common.getInsight('DocumentLatency', this.data.insights, this.data.insightSetKey);
+    return insight?.relatedEvents ?? [];
   }
 
   override render(): void {
     const insight = Trace.Insights.Common.getInsight('DocumentLatency', this.data.insights, this.data.insightSetKey);
+    if (insight?.data === undefined) {
+      return;
+    }
     const matchesCategory = shouldRenderForCategory({
       activeCategory: this.data.activeCategory,
       insightCategory: this.insightCategory,
     });
-    const output = matchesCategory && insight?.data ? this.#renderInsight(insight) : LitHtml.nothing;
+    const hasFailure = insight?.data?.redirectDuration > 0 || insight?.data?.serverResponseTooSlow ||
+        insight.data.uncompressedResponseBytes > 0;
+    const output = (matchesCategory && hasFailure) ? this.#renderInsight(insight) : LitHtml.nothing;
     LitHtml.render(output, this.shadow, {host: this});
   }
 }