chrome-devtools-frontend 1.0.1380117 → 1.0.1386602

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

@@ -26,6 +26,7 @@ import * as UI from '../../../ui/legacy/legacy.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';
+import {md} from '../utils/Helpers.js';
 
 import liveMetricsViewStyles from './liveMetricsView.css.js';
 import type {MetricCardData} from './MetricCard.js';
@@ -166,14 +167,10 @@ const UIStrings = {
    */
   percentDevices: '{PH1}% mobile, {PH2}% desktop',
   /**
-   * @description Text block explaining how to simulate different mobile and desktop devices. The placeholder at the end will be a link with the text "simulate different devices" translated separately.
-   * @example {simulate different devices} PH1
+   * @description Text block explaining how to simulate different mobile and desktop devices.
    */
-  useDeviceToolbar: 'Use the device toolbar to {PH1}.',
-  /**
-   * @description Text for a link that is inserted inside a larger text block that explains how to simulate different mobile and desktop devices.
-   */
-  simulateDifferentDevices: 'simulate different devices',
+  useDeviceToolbar:
+      'Use the [device toolbar](https://developer.chrome.com/docs/devtools/device-mode) and configure throttling to simulate real user environments and identify more performance issues.',
   /**
    * @description Text label for a checkbox that controls if the network cache is disabled.
    */
@@ -232,10 +229,6 @@ const UIStrings = {
    * @description Tooltip for a button that will remove everything from the currently selected log.
    */
   clearCurrentLog: 'Clear the current log',
-  /**
-   * @description Title for a section that contains more information about real user environments. This message is meant to prompt the user to understand the conditions experienced by real users.
-   */
-  realUserEnvironments: 'Real user environments',
   /**
    * @description Title for a page load phase that measures the time between when the page load starts and the time when the first byte of the initial document is downloaded.
    */
@@ -625,10 +618,6 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
   #renderRecordingSettings(): LitHtml.LitTemplate {
     const fieldEnabled = CrUXManager.CrUXManager.instance().getConfigSetting().get().enabled;
 
-    const deviceLinkEl = UI.XLink.XLink.create(
-        'https://developer.chrome.com/docs/devtools/device-mode', i18nString(UIStrings.simulateDifferentDevices));
-    const deviceMessage = i18n.i18n.getFormatLocalizedString(str_, UIStrings.useDeviceToolbar, {PH1: deviceLinkEl});
-
     const deviceRecEl = document.createElement('span');
     deviceRecEl.classList.add('environment-rec');
     deviceRecEl.textContent = this.#getDeviceRec() || i18nString(UIStrings.notEnoughData);
@@ -640,9 +629,8 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     // clang-format off
     return html`
       <h3 class="card-title">${i18nString(UIStrings.environmentSettings)}</h3>
-      <div class="device-toolbar-description">${deviceMessage}</div>
+      <div class="device-toolbar-description">${md(i18nString(UIStrings.useDeviceToolbar))}</div>
       ${fieldEnabled ? html`
-        <div class="environment-recs-title">${i18nString(UIStrings.realUserEnvironments)}</div>
         <ul class="environment-recs-list">
           <li>${i18n.i18n.getFormatLocalizedString(str_, UIStrings.device, {PH1: deviceRecEl})}</li>
           <li>${i18n.i18n.getFormatLocalizedString(str_, UIStrings.network, {PH1: networkRecEl})}</li>
@@ -872,8 +860,15 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
       PH1: dateEl,
     });
 
+    const warnings = this.#cruxPageResult?.warnings || [];
+
     return html`
-      <div class="field-data-message">${message}</div>
+      <div class="field-data-message">
+        <div>${message}</div>
+        ${warnings.map(warning => html`
+          <div class="field-data-warning">${warning}</div>
+        `)}
+      </div>
     `;
   }
 

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

@@ -7,16 +7,13 @@ import * as Root from '../../../core/root/root.js';
 import type * as Trace from '../../../models/trace/trace.js';
 import * as Adorners from '../../../ui/components/adorners/adorners.js';
 import * as UI from '../../../ui/legacy/legacy.js';
-import type * as Overlays from '../overlays/overlays.js';
 
 import {SidebarAnnotationsTab} from './SidebarAnnotationsTab.js';
 import {SidebarInsightsTab} from './SidebarInsightsTab.js';
 
 export interface ActiveInsight {
-  name: string;
+  model: Trace.Insights.Types.InsightModel<{}>;
   insightSetKey: string;
-  overlays: Overlays.Overlays.TimelineOverlay[];
-  relatedEvents: Trace.Types.Events.Event[];
 }
 
 export class RemoveAnnotation extends Event {

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

@@ -127,7 +127,7 @@ describeWithEnvironment('SidebarAnnotationsTab', () => {
     assert.isNotNull(component.shadowRoot);
 
     const label = component.shadowRoot.querySelector<HTMLElement>('.annotation-identifier');
-    assert.strictEqual(label?.innerText, 'private-aggregation-test.js (shared-sto…');
+    assert.strictEqual(label?.innerText, 'private-aggregation-test.js (shared-storage-demo-content-producer.web.app)');
   });
 
   it('dispatches RemoveAnnotation Events when delete annotation button is clicked', async function() {

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

@@ -43,7 +43,7 @@ export class SidebarInsightsTab extends HTMLElement {
   #parsedTrace: Trace.Handlers.Types.ParsedTrace|null = null;
   #insights: Trace.Insights.Types.TraceInsightSets|null = null;
   #activeInsight: ActiveInsight|null = null;
-  #selectedCategory = Insights.Types.Category.ALL;
+  #selectedCategory = Trace.Insights.Types.InsightCategory.ALL;
   /**
    * When a trace has sets of insights, we show an accordion with each
    * set within. A set can be specific to a single navigation, or include the

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

@@ -3,43 +3,24 @@
 // found in the LICENSE file.
 
 import * as Root from '../../../core/root/root.js';
+import * as Trace from '../../../models/trace/trace.js';
 import {getCleanTextContentFromElements, renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {TraceLoader} from '../../../testing/TraceLoader.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as Components from './components.js';
-import * as InsightComponents from './insights/insights.js';
+import type * as InsightComponents from './insights/insights.js';
+
+type BaseInsightComponent =
+    InsightComponents.BaseInsightComponent.BaseInsightComponent<Trace.Insights.Types.InsightModel<{}>>;
 
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 function getUserVisibleInsights(component: Components.SidebarSingleInsightSet.SidebarSingleInsightSet):
-    InsightComponents.SidebarInsight.SidebarInsight[] {
+    BaseInsightComponent[] {
   assert.isOk(component.shadowRoot);
-  const insightWrappers = [...component.shadowRoot.querySelectorAll<HTMLDivElement>('[data-single-insight-wrapper]')];
-
-  // We have to jump through some hoops here => each insight is rendered in its
-  // own component, but within it they all use the
-  // devtools-performance-sidebar-insight component to render the header +
-  // body.
-  // So we first have to find the specific insight component (e.g.
-  // devtools-performance-render-blocking), then look inside its shadow dom for
-  // the devtools-performance-sidebar-insight component.
-  // If you are here debugging something, I highly recommend loading up
-  // DevTools and inspecting the DOM in the Insights sidebar. It will be much
-  // easier!
-  const userVisibleInsightComponents =
-      insightWrappers
-          .map(div => {
-            const component = div.querySelector('[data-insight-name]');
-            assert.instanceOf(component, HTMLElement);
-            const insightComponent =
-                component.shadowRoot?.querySelector<InsightComponents.SidebarInsight.SidebarInsight>(
-                    'devtools-performance-sidebar-insight');
-            return insightComponent ?? null;
-          })
-          .filter(x => x !== null);
-  return userVisibleInsightComponents;
+  return [...component.shadowRoot.querySelectorAll<BaseInsightComponent>('[data-insight-name]')];
 }
 
 describeWithEnvironment('SidebarSingleInsightSet', () => {
@@ -59,7 +40,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       parsedTrace,
       insights,
       insightSetKey: navigationId,
-      activeCategory: InsightComponents.Types.Category.ALL,
+      activeCategory: Trace.Insights.Types.InsightCategory.ALL,
       activeInsight: null,
     };
     await coordinator.done();
@@ -86,7 +67,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       parsedTrace,
       insights,
       insightSetKey: firstNavigation,
-      activeCategory: InsightComponents.Types.Category.ALL,
+      activeCategory: Trace.Insights.Types.InsightCategory.ALL,
       activeInsight: null,
     };
     await coordinator.done();
@@ -98,6 +79,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       'LCP by phase',
       'LCP request discovery',
       'Layout shift culprits',
+      'Improve image delivery',
       'Third parties',
     ]);
   });
@@ -115,7 +97,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       parsedTrace,
       insights,
       insightSetKey: firstNavigation,
-      activeCategory: InsightComponents.Types.Category.ALL,
+      activeCategory: Trace.Insights.Types.InsightCategory.ALL,
       activeInsight: null,
     };
     await coordinator.done();
@@ -127,6 +109,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       'LCP by phase',
       'LCP request discovery',
       'Layout shift culprits',
+      'Improve image delivery',
       'Font display',
       'Third parties',
     ]);
@@ -142,26 +125,29 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
     const navigationId = '8463DF94CD61B265B664E7F768183DE3';
     assert.isTrue(insights.has(navigationId));
 
+    const model = insights.get(navigationId)?.model.LCPPhases;
+    if (!model) {
+      throw new Error('missing LCPPhases model');
+    }
+
     const component = new Components.SidebarSingleInsightSet.SidebarSingleInsightSet();
     renderElementIntoDOM(component);
     component.data = {
       parsedTrace,
       insights,
       insightSetKey: navigationId,
-      activeCategory: InsightComponents.Types.Category.ALL,
+      activeCategory: Trace.Insights.Types.InsightCategory.ALL,
       activeInsight: {
-        name: 'lcp-by-phase',
+        model,
         insightSetKey: navigationId,
-        overlays: [],
-        relatedEvents: [],
       },
     };
     await coordinator.done();
 
     const expandedInsight = getUserVisibleInsights(component).find(insight => {
-      return 'insightExpanded' in insight.dataset;
+      return insight.selected;
     });
     assert.isOk(expandedInsight);
-    assert.strictEqual(expandedInsight.dataset.insightTitle, 'LCP by phase');
+    assert.strictEqual(expandedInsight.model?.title, 'LCP by phase');
   });
 });

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

@@ -8,6 +8,7 @@ import * as Trace from '../../../models/trace/trace.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
+import {shouldRenderForCategory} from './insights/Helpers.js';
 import * as Insights from './insights/insights.js';
 import type {ActiveInsight} from './Sidebar.js';
 import styles from './sidebarSingleInsightSet.css.js';
@@ -31,7 +32,7 @@ export interface SidebarSingleInsightSetData {
   parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
   insights: Trace.Insights.Types.TraceInsightSets|null;
   insightSetKey: Trace.Types.Events.NavigationId|null;
-  activeCategory: Insights.Types.Category;
+  activeCategory: Trace.Insights.Types.InsightCategory;
   activeInsight: ActiveInsight|null;
 }
 
@@ -55,6 +56,7 @@ const INSIGHT_NAME_TO_COMPONENT = {
   LCPDiscovery: Insights.LCPDiscovery.LCPDiscovery,
   CLSCulprits: Insights.CLSCulprits.CLSCulprits,
   RenderBlocking: Insights.RenderBlocking.RenderBlocking,
+  ImageDelivery: Insights.ImageDelivery.ImageDelivery,
   DocumentLatency: Insights.DocumentLatency.DocumentLatency,
   FontDisplay: Insights.FontDisplay.FontDisplay,
   Viewport: Insights.Viewport.Viewport,
@@ -70,7 +72,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
     parsedTrace: null,
     insights: null,
     insightSetKey: null,
-    activeCategory: Insights.Types.Category.ALL,
+    activeCategory: Trace.Insights.Types.InsightCategory.ALL,
     activeInsight: null,
   };
 
@@ -84,7 +86,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
   }
 
   #metricIsVisible(label: 'LCP'|'CLS'|'INP'): boolean {
-    if (this.#data.activeCategory === Insights.Types.Category.ALL) {
+    if (this.#data.activeCategory === Trace.Insights.Types.InsightCategory.ALL) {
       return true;
     }
     return label === this.#data.activeCategory;
@@ -197,14 +199,14 @@ export class SidebarSingleInsightSet extends HTMLElement {
       insightSets: Trace.Insights.Types.TraceInsightSets|null,
       parsedTrace: Trace.Handlers.Types.ParsedTrace|null,
       insightSetKey: string,
-      ): LitHtml.TemplateResult {
+      ): LitHtml.LitTemplate {
     const includeExperimental = Root.Runtime.experiments.isEnabled(
         Root.Runtime.ExperimentName.TIMELINE_EXPERIMENTAL_INSIGHTS,
     );
 
     const models = insightSets?.get(insightSetKey)?.model;
     if (!models) {
-      return html``;
+      return LitHtml.nothing;
     }
 
     const components: LitHtml.TemplateResult[] = [];
@@ -213,14 +215,19 @@ export class SidebarSingleInsightSet extends HTMLElement {
         continue;
       }
 
+      const model = models[name as keyof typeof models];
+      if (!model || !model.shouldShow ||
+          !shouldRenderForCategory({activeCategory: this.#data.activeCategory, insightCategory: model.category})) {
+        continue;
+      }
+
       // clang-format off
-      const component = html`<div data-single-insight-wrapper>
+      const component = html`<div>
         <${componentClass.litTagName}
-          .model=${models[name as keyof typeof models]}
+          .selected=${this.#data.activeInsight?.model === model}
+          .model=${model}
           .parsedTrace=${parsedTrace}
           .insightSetKey=${insightSetKey}
-          .activeInsight=${this.#data.activeInsight}
-          .activeCategory=${this.#data.activeCategory}>
         </${componentClass.litTagName}>
       </div>`;
       // clang-format on

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

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

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

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

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