chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

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

@@ -3,18 +3,27 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
+import * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
+import * as CrUXManager from '../../../models/crux-manager/crux-manager.js';
 import * as Trace from '../../../models/trace/trace.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as Lit from '../../../ui/lit/lit.js';
+import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
+import {md} from '../utils/Helpers.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';
-import {NumberWithUnit, type NumberWithUnitString} from './Utils.js';
+import stylesRaw from './sidebarSingleInsightSet.css.js';
+import {determineCompareRating, NumberWithUnit} from './Utils.js';
 
-const {html} = LitHtml.StaticHtml;
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const styles = new CSSStyleSheet();
+styles.replaceSync(stylesRaw.cssContent);
+
+const {html} = Lit.StaticHtml;
 
 const UIStrings = {
   /**
@@ -24,11 +33,44 @@ const UIStrings = {
    *@example {poor} PH3
    */
   metricScore: '{PH1}: {PH2} {PH3} score',
+  /**
+   *@description title used for a metric value to tell the user that the data is unavailable
+   *@example {INP} PH1
+   */
+  metricScoreUnavailable: '{PH1}: unavailable',
   /**
    * @description Summary text for an expandable dropdown that contains all insights in a passing state.
    * @example {4} PH1
    */
   passedInsights: 'Passed insights ({PH1})',
+  /**
+   * @description Label denoting that metrics were observed in the field, from real use data (CrUX). Also denotes if from URL or Origin dataset.
+   * @example {URL} PH1
+   */
+  fieldScoreLabel: 'Field ({PH1})',
+  /**
+   * @description Label for an option that selects the page's specific URL as opposed to it's entire origin/domain.
+   */
+  urlOption: 'URL',
+  /**
+   * @description Label for an option that selects the page's entire origin/domain as opposed to it's specific URL.
+   */
+  originOption: 'Origin',
+  /**
+   * @description Title for button that closes a warning popup.
+   */
+  dismissTitle: 'Dismiss',
+  /**
+   * @description Title shown in a warning dialog when field metrics (collected from real users) is worse than the locally observed metrics.
+   */
+  fieldMismatchTitle: 'Field & local metrics mismatch',
+  /**
+   * @description Text shown in a warning dialog when field metrics (collected from real users) is worse than the locally observed metrics.
+   * Asks user to use features such as throttling and device emulation.
+   */
+  fieldMismatchNotice:
+      'There are many reasons why local and field metrics [may not match](https://web.dev/articles/lab-and-field-data-differences). ' +
+      'Adjust [throttling settings and device emulation](https://developer.chrome.com/docs/devtools/device-mode) to analyze traces more similar to the average user\'s environment.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/SidebarSingleInsightSet.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -38,6 +80,8 @@ export interface SidebarSingleInsightSetData {
   insightSetKey: Trace.Types.Events.NavigationId|null;
   activeCategory: Trace.Insights.Types.InsightCategory;
   activeInsight: ActiveInsight|null;
+  parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
+  traceMetadata: Trace.Types.File.MetaData|null;
 }
 
 /**
@@ -47,11 +91,11 @@ export interface SidebarSingleInsightSetData {
  * users. */
 const EXPERIMENTAL_INSIGHTS: ReadonlySet<string> = new Set([
   'FontDisplay',
-  'DOMSize',
+  'LongCriticalNetworkTree',
 ]);
 
-type InsightNameToComponentMapping =
-    Record<string, typeof Insights.BaseInsightComponent.BaseInsightComponent<Trace.Insights.Types.InsightModel<{}>>>;
+type InsightNameToComponentMapping = Record<
+    string, typeof Insights.BaseInsightComponent.BaseInsightComponent<Trace.Insights.Types.InsightModel<{}, {}>>>;
 
 /**
  * Every insight (INCLUDING experimental ones).
@@ -67,9 +111,11 @@ const INSIGHT_NAME_TO_COMPONENT: InsightNameToComponentMapping = {
   InteractionToNextPaint: Insights.InteractionToNextPaint.InteractionToNextPaint,
   LCPDiscovery: Insights.LCPDiscovery.LCPDiscovery,
   LCPPhases: Insights.LCPPhases.LCPPhases,
+  LongCriticalNetworkTree: Insights.LongCriticalNetworkTree.LongCriticalNetworkTree,
   RenderBlocking: Insights.RenderBlocking.RenderBlocking,
   SlowCSSSelector: Insights.SlowCSSSelector.SlowCSSSelector,
   ThirdParties: Insights.ThirdParties.ThirdParties,
+  ForcedReflow: Insights.ForcedReflow.ForcedReflow,
   Viewport: Insights.Viewport.Viewport,
 };
 
@@ -82,8 +128,12 @@ export class SidebarSingleInsightSet extends HTMLElement {
     insightSetKey: null,
     activeCategory: Trace.Insights.Types.InsightCategory.ALL,
     activeInsight: null,
+    parsedTrace: null,
+    traceMetadata: null,
   };
 
+  #dismissedFieldMismatchNotice = false;
+
   set data(data: SidebarSingleInsightSetData) {
     this.#data = data;
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#renderBound);
@@ -104,12 +154,34 @@ export class SidebarSingleInsightSet extends HTMLElement {
     this.dispatchEvent(new Insights.EventRef.EventReferenceClick(traceEvent));
   }
 
-  #renderMetricValue(
-      label: 'LCP'|'CLS'|'INP', value: string|NumberWithUnitString,
-      classification: Trace.Handlers.ModelHandlers.PageLoadMetrics.ScoreClassification,
-      eventToSelectOnClick: Trace.Types.Events.Event|null): LitHtml.LitTemplate {
-    const valueText = typeof value === 'string' ? value : value.text;
-    const valueDisplay = typeof value === 'string' ? value : value.element;
+  #renderMetricValue(metric: 'LCP'|'CLS'|'INP', value: number|null, relevantEvent: Trace.Types.Events.Event|null):
+      Lit.LitTemplate {
+    let valueText: string;
+    let valueDisplay: HTMLElement|string;
+    let classification;
+    if (value === null) {
+      valueText = valueDisplay = '-';
+      classification = Trace.Handlers.ModelHandlers.PageLoadMetrics.ScoreClassification.UNCLASSIFIED;
+    } else if (metric === 'LCP') {
+      const micros = value as Trace.Types.Timing.Micro;
+      const {text, element} = NumberWithUnit.formatMicroSecondsAsSeconds(micros);
+      valueText = text;
+      valueDisplay = element;
+      classification =
+          Trace.Handlers.ModelHandlers.PageLoadMetrics.scoreClassificationForLargestContentfulPaint(micros);
+    } else if (metric === 'CLS') {
+      valueText = valueDisplay = value ? value.toFixed(2) : '0';
+      classification = Trace.Handlers.ModelHandlers.LayoutShifts.scoreClassificationForLayoutShift(value);
+    } else if (metric === 'INP') {
+      const micros = value as Trace.Types.Timing.Micro;
+      const {text, element} = NumberWithUnit.formatMicroSecondsAsMillisFixed(micros);
+      valueText = text;
+      valueDisplay = element;
+      classification =
+          Trace.Handlers.ModelHandlers.UserInteractions.scoreClassificationForInteractionToNextPaint(micros);
+    } else {
+      Platform.TypeScriptUtilities.assertNever(metric, `Unexpected metric ${metric}`);
+    }
 
     // NOTE: it is deliberate to use the same value for the title and
     // aria-label; the aria-label is used to give more context to
@@ -117,65 +189,182 @@ export class SidebarSingleInsightSet extends HTMLElement {
     // the red/orange/green classification is, or those who are unable to
     // easily distinguish the visual colour differences.
     // clang-format off
-    const title = i18nString(UIStrings.metricScore, {PH1: label, PH2: valueText, PH3: classification});
+    const title = value !== null ?
+      i18nString(UIStrings.metricScore, {PH1: metric, PH2: valueText, PH3: classification}) :
+      i18nString(UIStrings.metricScoreUnavailable, {PH1: metric});
 
-    return this.#metricIsVisible(label) ? html`
+    return this.#metricIsVisible(metric) ? html`
       <button class="metric"
-        @click=${eventToSelectOnClick ? this.#onClickMetric.bind(this, eventToSelectOnClick) : null}
+        @click=${relevantEvent ? this.#onClickMetric.bind(this, relevantEvent) : null}
         title=${title}
         aria-label=${title}
       >
         <div class="metric-value metric-value-${classification}">${valueDisplay}</div>
-        <div class="metric-label">${label}</div>
       </button>
-    ` : LitHtml.nothing;
+    ` : Lit.nothing;
     // clang-format on
   }
 
-  #renderMetrics(insightSetKey: string): LitHtml.TemplateResult {
+  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+  #getLocalMetrics(insightSetKey: string) {
     const lcp = Trace.Insights.Common.getLCP(this.#data.insights, insightSetKey);
     const cls = Trace.Insights.Common.getCLS(this.#data.insights, insightSetKey);
     const inp = Trace.Insights.Common.getINP(this.#data.insights, insightSetKey);
 
+    return {lcp, cls, inp};
+  }
+
+  #getFieldMetrics(insightSetKey: string): Omit<Trace.Insights.Common.CrUXFieldMetricResults, 'fcp'>|null {
+    const insightSet = this.#data.insights?.get(insightSetKey);
+    if (!insightSet) {
+      return null;
+    }
+
+    const fieldMetricsResults = Trace.Insights.Common.getFieldMetricsForInsightSet(
+        insightSet, this.#data.traceMetadata, CrUXManager.CrUXManager.instance().getSelectedScope());
+    if (!fieldMetricsResults) {
+      return null;
+    }
+
+    return fieldMetricsResults;
+  }
+
+  /**
+   * Returns true if LCP or INP are worse in the field than what was observed locally.
+   *
+   * CLS is ignored because the guidance of applying throttling or device emulation doesn't
+   * correlate as much with observing a more average user experience.
+   */
+  #isFieldWorseThanLocal(local: {lcp?: Trace.Types.Timing.Milli, inp?: Trace.Types.Timing.Milli}, field: {
+    lcp?: Trace.Types.Timing.Milli,
+    inp?: Trace.Types.Timing.Milli,
+  }): boolean {
+    if (local.lcp !== undefined && field.lcp !== undefined) {
+      if (determineCompareRating('LCP', local.lcp, field.lcp) === 'better') {
+        return true;
+      }
+    }
+
+    if (local.inp !== undefined && field.inp !== undefined) {
+      if (determineCompareRating('LCP', local.inp, field.inp) === 'better') {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  #dismissFieldMismatchNotice(): void {
+    this.#dismissedFieldMismatchNotice = true;
+    this.#render();
+  }
+
+  #renderMetrics(insightSetKey: string): Lit.TemplateResult {
+    const local = this.#getLocalMetrics(insightSetKey);
+    const field = this.#getFieldMetrics(insightSetKey);
+
+    const lcpEl = this.#renderMetricValue('LCP', local.lcp?.value ?? null, local.lcp?.event ?? null);
+    const inpEl = this.#renderMetricValue('INP', local.inp?.value ?? null, local.inp?.event ?? null);
+    const clsEl = this.#renderMetricValue('CLS', local.cls.value ?? null, local.cls?.worstClusterEvent ?? null);
+
+    const localMetricsTemplateResult = html`
+      <div class="metrics-row">
+        <span>${lcpEl}</span>
+        <span>${inpEl}</span>
+        <span>${clsEl}</span>
+        <span class="row-label">Local</span>
+      </div>
+      <span class="row-border"></span>
+    `;
+
+    let fieldMetricsTemplateResult;
+    if (field) {
+      const {lcp, inp, cls} = field;
+
+      const lcpEl = this.#renderMetricValue('LCP', lcp?.value ?? null, null);
+      const inpEl = this.#renderMetricValue('INP', inp?.value ?? null, null);
+      const clsEl = this.#renderMetricValue('CLS', cls?.value ?? null, null);
+
+      let scope = i18nString(UIStrings.originOption);
+      if (lcp?.pageScope === 'url' || inp?.pageScope === 'url') {
+        scope = i18nString(UIStrings.urlOption);
+      }
+
+      // clang-format off
+      fieldMetricsTemplateResult = html`
+        <div class="metrics-row">
+          <span>${lcpEl}</span>
+          <span>${inpEl}</span>
+          <span>${clsEl}</span>
+          <span class="row-label">${i18nString(UIStrings.fieldScoreLabel, {PH1: scope})}</span>
+        </div>
+        <span class="row-border"></span>
+      `;
+      // clang-format on
+    }
+
+    const localValues = {
+      lcp: local.lcp?.value !== undefined ? Trace.Helpers.Timing.microToMilli(local.lcp.value) : undefined,
+      inp: local.inp?.value !== undefined ? Trace.Helpers.Timing.microToMilli(local.inp.value) : undefined,
+    };
+    const fieldValues = field && {
+      lcp: field.lcp?.value !== undefined ? Trace.Helpers.Timing.microToMilli(field.lcp.value) : undefined,
+      inp: field.inp?.value !== undefined ? Trace.Helpers.Timing.microToMilli(field.inp.value) : undefined,
+    };
+
+    let fieldIsDifferentEl;
+    if (!this.#dismissedFieldMismatchNotice && fieldValues && this.#isFieldWorseThanLocal(localValues, fieldValues)) {
+      // clang-format off
+      fieldIsDifferentEl = html`
+        <div class="field-mismatch-notice" jslog=${VisualLogging.section('timeline.insights.field-mismatch')}>
+          <h3>${i18nString(UIStrings.fieldMismatchTitle)}</h3>
+          <devtools-button
+            title=${i18nString(UIStrings.dismissTitle)}
+            .iconName=${'cross'}
+            .variant=${Buttons.Button.Variant.ICON}
+            .jslogContext=${'timeline.insights.dismiss-field-mismatch'}
+            @click=${this.#dismissFieldMismatchNotice}
+          ></devtools-button>
+          <div class="field-mismatch-notice__body">${md(i18nString(UIStrings.fieldMismatchNotice))}</div>
+        </div>
+      `;
+      // clang-format on
+    }
+
+    const classes = {metrics: true, 'metrics--field': Boolean(fieldMetricsTemplateResult)};
+    const metricsTableEl = html`<div class=${Lit.Directives.classMap(classes)}>
+      <div class="metrics-row">
+        <span class="metric-label">LCP</span>
+        <span class="metric-label">INP</span>
+        <span class="metric-label">CLS</span>
+        <span class="row-label"></span>
+      </div>
+      ${localMetricsTemplateResult}
+      ${fieldMetricsTemplateResult}
+    </div>`;
+
     return html`
-    <div class="metrics-row">
-    ${
-        lcp ? this.#renderMetricValue(
-                  'LCP', NumberWithUnit.formatMicroSecondsAsSeconds(lcp.value),
-                  Trace.Handlers.ModelHandlers.PageLoadMetrics.scoreClassificationForLargestContentfulPaint(lcp.value),
-                  lcp.event ?? null) :
-              LitHtml.nothing}
-    ${
-        inp ? this.#renderMetricValue(
-                  'INP', NumberWithUnit.formatMicroSecondsAsMillisFixed(inp.value),
-                  Trace.Handlers.ModelHandlers.UserInteractions.scoreClassificationForInteractionToNextPaint(inp.value),
-                  inp.event) :
-              LitHtml.nothing}
-    ${
-        this.#renderMetricValue(
-            'CLS', cls.value ? cls.value.toFixed(2) : '0',
-            Trace.Handlers.ModelHandlers.LayoutShifts.scoreClassificationForLayoutShift(cls.value),
-            cls.worstShiftEvent)}
-    </div>
+      ${metricsTableEl}
+      ${fieldIsDifferentEl}
     `;
   }
 
   #renderInsights(
       insightSets: Trace.Insights.Types.TraceInsightSets|null,
       insightSetKey: string,
-      ): LitHtml.LitTemplate {
+      ): Lit.LitTemplate {
     const includeExperimental = Root.Runtime.experiments.isEnabled(
         Root.Runtime.ExperimentName.TIMELINE_EXPERIMENTAL_INSIGHTS,
     );
 
     const insightSet = insightSets?.get(insightSetKey);
     if (!insightSet) {
-      return LitHtml.nothing;
+      return Lit.nothing;
     }
 
     const models = insightSet.model;
-    const shownInsights: LitHtml.TemplateResult[] = [];
-    const passedInsights: LitHtml.TemplateResult[] = [];
+    const shownInsights: Lit.TemplateResult[] = [];
+    const passedInsights: Lit.TemplateResult[] = [];
     for (const [name, model] of Object.entries(models)) {
       const componentClass = INSIGHT_NAME_TO_COMPONENT[name as keyof Trace.Insights.Types.InsightModels];
       if (!componentClass) {
@@ -198,14 +387,15 @@ export class SidebarSingleInsightSet extends HTMLElement {
           .model=${model}
           .bounds=${insightSet.bounds}
           .insightSetKey=${insightSetKey}
+          .parsedTrace=${this.#data.parsedTrace}>
         </${componentClass.litTagName}>
       </div>`;
       // clang-format on
 
-      if (model.shouldShow) {
-        shownInsights.push(component);
-      } else {
+      if (model.state === 'pass') {
         passedInsights.push(component);
+      } else {
+        shownInsights.push(component);
       }
     }
 
@@ -219,7 +409,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
           })}</summary>
           ${passedInsights}
         </details>
-      ` : LitHtml.nothing}
+      ` : Lit.nothing}
     `;
     // clang-format on
   }
@@ -230,12 +420,12 @@ export class SidebarSingleInsightSet extends HTMLElement {
       insightSetKey,
     } = this.#data;
     if (!insights || !insightSetKey) {
-      LitHtml.render(html``, this.#shadow, {host: this});
+      Lit.render(html``, this.#shadow, {host: this});
       return;
     }
 
     // clang-format off
-    LitHtml.render(html`
+    Lit.render(html`
       <div class="navigation">
         ${this.#renderMetrics(insightSetKey)}
         ${this.#renderInsights(insights, insightSetKey)}

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

@@ -16,12 +16,13 @@ describeWithMockConnection('TimelineSummary', () => {
       {title: 'Rendering', value: 0, color: 'black'},
     ];
 
-    const summary = new TimelineComponents.TimelineSummary.TimelineSummary();
+    const summary = new TimelineComponents.TimelineSummary.CategorySummary();
     summary.data = {
       rangeStart: 0,
       rangeEnd: 110,
       total: 110,
       categories,
+      selectedEvents: [],
     };
 
     categories.push({title: 'Total', value: 110, color: 'yellow'});
@@ -44,12 +45,13 @@ describeWithMockConnection('TimelineSummary', () => {
   it('no categories should just render Total', async function() {
     const categories: TimelineComponents.TimelineSummary.CategoryData[] = [];
 
-    const summary = new TimelineComponents.TimelineSummary.TimelineSummary();
+    const summary = new TimelineComponents.TimelineSummary.CategorySummary();
     summary.data = {
       rangeStart: 0,
       rangeEnd: 110,
       total: 110,
       categories,
+      selectedEvents: [],
     };
 
     categories.push({title: 'Total', value: 110, color: 'grey'});

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

@@ -3,11 +3,13 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import type * as Trace from '../../../models/trace/trace.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+import * as Lit from '../../../ui/lit/lit.js';
 
 import timelineSummaryStyles from './timelineSummary.css.js';
 
-const {render, html} = LitHtml;
+const {render, html} = Lit;
 
 const UIStrings = {
   /**
@@ -35,19 +37,18 @@ export interface SummaryTableData {
   rangeStart: number;
   rangeEnd: number;
   categories: CategoryData[];
+  selectedEvents: Trace.Types.Events.Event[];
 }
 
-export class TimelineSummary extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+export class CategorySummary extends HTMLElement {
+  readonly #shadow =
+      UI.UIUtils.createShadowRootWithCoreStyles(this, {cssFile: timelineSummaryStyles, delegatesFocus: undefined});
+
   #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;
@@ -59,43 +60,46 @@ export class TimelineSummary extends HTMLElement {
   #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 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>
+          </div>
+          </div>
+
         </div>`;
     // clang-format on
     render(output, this.#shadow, {host: this});
   }
 }
 
-customElements.define('devtools-performance-timeline-summary', TimelineSummary);
+customElements.define('devtools-performance-timeline-summary', CategorySummary);
 
 declare global {
   interface HTMLElementTagNameMap {
-    'devtools-performance-timeline-summary': TimelineSummary;
+    'devtools-performance-timeline-summary': CategorySummary;
   }
 }

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

@@ -14,14 +14,14 @@ describeWithEnvironment('Utils', () => {
     const {NumberWithUnit} = Utils;
 
     it('renders number with unit (formatMicroSecondsAsSeconds)', () => {
-      const result = NumberWithUnit.formatMicroSecondsAsSeconds(100_000 as Trace.Types.Timing.MicroSeconds);
+      const result = NumberWithUnit.formatMicroSecondsAsSeconds(100_000 as Trace.Types.Timing.Micro);
       assert.strictEqual(result.text, '0.10s');
       assert.strictEqual(result.element.textContent, '0.10s');
       assert.strictEqual(result.element.querySelector('.unit')?.textContent, 's');
     });
 
     it('renders number with unit (formatMicroSecondsAsMillisFixed)', () => {
-      const result = NumberWithUnit.formatMicroSecondsAsMillisFixed(100_000 as Trace.Types.Timing.MicroSeconds);
+      const result = NumberWithUnit.formatMicroSecondsAsMillisFixed(100_000 as Trace.Types.Timing.Micro);
       assert.strictEqual(result.text, '100ms');
       assert.strictEqual(result.element.textContent, '100ms');
       assert.strictEqual(result.element.querySelector('.unit')?.textContent, 'ms');

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

@@ -9,6 +9,8 @@ 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';
 
+import type {CompareRating} from './MetricCompareStrings.js';
+
 const UIStrings = {
   /**
    *@description ms is the short form of milli-seconds and the placeholder is a decimal number.
@@ -62,7 +64,8 @@ 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.endsWith('/css')                                   ? NetworkCategory.CSS :
+      return mimeType === undefined                                      ? NetworkCategory.OTHER :
+          mimeType.endsWith('/css')                                      ? NetworkCategory.CSS :
           mimeType.endsWith('javascript')                                ? NetworkCategory.JS :
           mimeType.startsWith('image/')                                  ? NetworkCategory.IMG :
           mimeType.startsWith('audio/') || mimeType.startsWith('video/') ? NetworkCategory.MEDIA :
@@ -158,10 +161,10 @@ export function renderMetricValue(
   return metricValueEl;
 }
 
-export type NumberWithUnitString = {
-  element: HTMLElement,
-  text: string,
-};
+export interface NumberWithUnitString {
+  element: HTMLElement;
+  text: string;
+}
 
 /**
  * These methods format numbers with units in a way that allows the unit portion to be styled specifically.
@@ -252,3 +255,47 @@ export namespace NumberWithUnit {
     return {text: element.textContent ?? '', element};
   }
 }
+
+/**
+ * Returns if the local value is better/worse/similar compared to field.
+ */
+export function determineCompareRating(
+    metric: 'LCP'|'CLS'|'INP', localValue: Trace.Types.Timing.Milli|number,
+    fieldValue: Trace.Types.Timing.Milli|number): CompareRating|undefined {
+  let thresholds: MetricThresholds;
+  let compareThreshold: number;
+  switch (metric) {
+    case 'LCP':
+      thresholds = LCP_THRESHOLDS;
+      compareThreshold = 1000;
+      break;
+    case 'CLS':
+      thresholds = CLS_THRESHOLDS;
+      compareThreshold = 0.1;
+      break;
+    case 'INP':
+      thresholds = INP_THRESHOLDS;
+      compareThreshold = 200;
+      break;
+    default:
+      Platform.assertNever(metric, `Unknown metric: ${metric}`);
+  }
+
+  const localRating = rateMetric(localValue, thresholds);
+  const fieldRating = rateMetric(fieldValue, thresholds);
+
+  // It's not worth highlighting a significant difference when both #s
+  // are rated "good"
+  if (localRating === 'good' && fieldRating === 'good') {
+    return 'similar';
+  }
+
+  if (localValue - fieldValue > compareThreshold) {
+    return 'worse';
+  }
+  if (fieldValue - localValue > compareThreshold) {
+    return 'better';
+  }
+
+  return 'similar';
+}