[RPP] Add field data to LCP, FCP metric marker tooltips

Also add FCP to the CrUX request.

https://i.imgur.com/UpXzazI.png

Bug: 368135130
Change-Id: I11376cbdaab35fc6737060f40ab052041c8a0cd0
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6181300
Commit-Queue: Connor Clark <[email protected]>
Reviewed-by: Paul Irish <[email protected]>

Author: Connor Clark

front_end/models/crux-manager/CrUXManager.test.ts

@@ -155,6 +155,7 @@ describeWithMockConnection('CrUXManager', () => {
         {
           formFactor: 'DESKTOP',
           metrics: [
+            'first_contentful_paint',
             'largest_contentful_paint',
             'cumulative_layout_shift',
             'interaction_to_next_paint',
@@ -166,6 +167,7 @@ describeWithMockConnection('CrUXManager', () => {
         {
           formFactor: 'PHONE',
           metrics: [
+            'first_contentful_paint',
             'largest_contentful_paint',
             'cumulative_layout_shift',
             'interaction_to_next_paint',
@@ -176,6 +178,7 @@ describeWithMockConnection('CrUXManager', () => {
         },
         {
           metrics: [
+            'first_contentful_paint',
             'largest_contentful_paint',
             'cumulative_layout_shift',
             'interaction_to_next_paint',
@@ -187,6 +190,7 @@ describeWithMockConnection('CrUXManager', () => {
         {
           formFactor: 'DESKTOP',
           metrics: [
+            'first_contentful_paint',
             'largest_contentful_paint',
             'cumulative_layout_shift',
             'interaction_to_next_paint',
@@ -198,6 +202,7 @@ describeWithMockConnection('CrUXManager', () => {
         {
           formFactor: 'PHONE',
           metrics: [
+            'first_contentful_paint',
             'largest_contentful_paint',
             'cumulative_layout_shift',
             'interaction_to_next_paint',
@@ -208,6 +213,7 @@ describeWithMockConnection('CrUXManager', () => {
         },
         {
           metrics: [
+            'first_contentful_paint',
             'largest_contentful_paint',
             'cumulative_layout_shift',
             'interaction_to_next_paint',

front_end/models/crux-manager/CrUXManager.ts

@@ -103,6 +103,7 @@ export const DEVICE_SCOPE_LIST: DeviceScope[] = ['ALL', 'DESKTOP', 'PHONE'];
 
 const pageScopeList: PageScope[] = ['origin', 'url'];
 const metrics: MetricNames[] = [
+  'first_contentful_paint',
   'largest_contentful_paint',
   'cumulative_layout_shift',
   'interaction_to_next_paint',

front_end/panels/timeline/TimelineFlameChartView.test.ts

@@ -64,15 +64,15 @@ describeWithEnvironment('TimelineFlameChartView', function() {
   });
 
   it('Can search for events by name in the timeline', async function() {
-    const {parsedTrace} = await TraceLoader.traceEngine(this, 'lcp-images.json.gz');
+    const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'lcp-images.json.gz');
     // The timeline flamechart view will invoke the `select` method
     // of this delegate every time an event has matched on a search.
     const mockViewDelegate = new MockViewDelegate();
 
     const flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
     const searchableView = new UI.SearchableView.SearchableView(flameChartView, null);
     flameChartView.setSearchableView(searchableView);
-    flameChartView.setModel(parsedTrace);
+    flameChartView.setModel(parsedTrace, metadata);
 
     const searchQuery = 'Paint';
     const searchConfig =
@@ -103,15 +103,15 @@ describeWithEnvironment('TimelineFlameChartView', function() {
   });
 
   it('can search across both flame charts for events', async function() {
-    const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
     // The timeline flamechart view will invoke the `select` method
     // of this delegate every time an event has matched on a search.
     const mockViewDelegate = new MockViewDelegate();
 
     const flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
     const searchableView = new UI.SearchableView.SearchableView(flameChartView, null);
     flameChartView.setSearchableView(searchableView);
-    flameChartView.setModel(parsedTrace);
+    flameChartView.setModel(parsedTrace, metadata);
 
     const searchQuery = 'app.js';
     const searchConfig =
@@ -129,35 +129,35 @@ describeWithEnvironment('TimelineFlameChartView', function() {
   // This test is still failing after bumping up the timeout to 20 seconds. So
   // skip it while we work on a fix for the trace load speed.
   it.skip('[crbug.com/1492405] Shows the network track correctly', async function() {
-    const {parsedTrace} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
+    const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
     // The timeline flamechart view will invoke the `select` method
     // of this delegate every time an event has matched on a search.
     const mockViewDelegate = new MockViewDelegate();
 
     const flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
-    flameChartView.setModel(parsedTrace);
+    flameChartView.setModel(parsedTrace, metadata);
 
     assert.isTrue(flameChartView.isNetworkTrackShownForTests());
   });
 
   it('Does not show the network track when there is no network request', async function() {
-    const {parsedTrace} = await TraceLoader.traceEngine(this, 'basic.json.gz');
+    const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'basic.json.gz');
     // The timeline flamechart view will invoke the `select` method
     // of this delegate every time an event has matched on a search.
     const mockViewDelegate = new MockViewDelegate();
 
     const flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
-    flameChartView.setModel(parsedTrace);
+    flameChartView.setModel(parsedTrace, metadata);
 
     assert.isFalse(flameChartView.isNetworkTrackShownForTests());
   });
 
   it('Adds Hidden Descendants Arrow as a decoration when a Context Menu action is applied on a node', async function() {
-    const {parsedTrace} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
+    const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
     const mockViewDelegate = new MockViewDelegate();
 
     const flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
-    flameChartView.setModel(parsedTrace);
+    flameChartView.setModel(parsedTrace, metadata);
 
     // Find the main track to later collapse entries of
     const mainTrack = flameChartView.getMainFlameChart().timelineData()?.groups.find(group => {
@@ -194,11 +194,11 @@ describeWithEnvironment('TimelineFlameChartView', function() {
 
   it('Adds Hidden Descendants Arrow as a decoration when a Context Menu action is applied on a selected node with a key shortcut event',
      async function() {
-       const {parsedTrace} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
+       const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
        const mockViewDelegate = new MockViewDelegate();
 
        const flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
-       flameChartView.setModel(parsedTrace);
+       flameChartView.setModel(parsedTrace, metadata);
 
        // Find the main track to later collapse entries of
        const mainTrack = flameChartView.getMainFlameChart().timelineData()?.groups.find(group => {
@@ -238,11 +238,11 @@ describeWithEnvironment('TimelineFlameChartView', function() {
 
   it('Removes Hidden Descendants Arrow as a decoration when Reset Children action is applied on a node',
      async function() {
-       const {parsedTrace} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
+       const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
        const mockViewDelegate = new MockViewDelegate();
 
        const flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
-       flameChartView.setModel(parsedTrace);
+       flameChartView.setModel(parsedTrace, metadata);
        Timeline.ModificationsManager.ModificationsManager.activeManager();
 
        // Find the main track to later collapse entries of
@@ -292,16 +292,43 @@ describeWithEnvironment('TimelineFlameChartView', function() {
        assert.isUndefined(decorationsForEntry);
      });
 
+  it('renders metrics as marker overlays w/ tooltips', async function() {
+    const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'crux.json.gz');
+    const mockViewDelegate = new MockViewDelegate();
+
+    const flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
+    flameChartView.setModel(parsedTrace, metadata);
+
+    const tooltips =
+        [...flameChartView.element.querySelectorAll('.overlay-type-TIMINGS_MARKER .marker-title')].map(el => {
+          el?.dispatchEvent(new MouseEvent('mousemove', {
+            clientX: 0,
+            clientY: 0,
+          }));
+          return flameChartView.element.querySelector('.timeline-entry-tooltip-element')
+              ?.textContent?.replaceAll('\xa0', ' ');
+        });
+
+    assert.deepEqual(tooltips, [
+      '0 μsNav',
+      '43.98 msL',
+      '75.90 msFCP - Local939.00 msFCP - Field (URL)',
+      '75.90 msLCP - Local936.00 msLCP - Field (URL)',
+      '43.75 msDCL',
+    ]);
+  });
+
   describe('Context Menu', function() {
     let flameChartView: Timeline.TimelineFlameChartView.TimelineFlameChartView;
     let parsedTrace: Trace.Handlers.Types.ParsedTrace;
+    let metadata: Trace.Types.File.MetaData|null;
 
     this.beforeEach(async () => {
-      ({parsedTrace} = await TraceLoader.traceEngine(this, 'recursive-blocking-js.json.gz'));
+      ({parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'recursive-blocking-js.json.gz'));
       const mockViewDelegate = new MockViewDelegate();
 
       flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
-      flameChartView.setModel(parsedTrace);
+      flameChartView.setModel(parsedTrace, metadata);
       Timeline.ModificationsManager.ModificationsManager.activeManager();
     });
 
@@ -753,13 +780,14 @@ describeWithEnvironment('TimelineFlameChartView', function() {
   describe('Link between entries annotation in progress', function() {
     let flameChartView: Timeline.TimelineFlameChartView.TimelineFlameChartView;
     let parsedTrace: Trace.Handlers.Types.ParsedTrace;
+    let metadata: Trace.Types.File.MetaData|null;
 
     this.beforeEach(async () => {
-      ({parsedTrace} = await TraceLoader.traceEngine(this, 'recursive-blocking-js.json.gz'));
+      ({parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'recursive-blocking-js.json.gz'));
       const mockViewDelegate = new MockViewDelegate();
 
       flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
-      flameChartView.setModel(parsedTrace);
+      flameChartView.setModel(parsedTrace, metadata);
       Timeline.ModificationsManager.ModificationsManager.activeManager();
     });
 

front_end/panels/timeline/TimelineFlameChartView.ts

@@ -8,6 +8,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
+import type * as CrUXManager from '../../models/crux-manager/crux-manager.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
@@ -121,6 +122,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
   private selectedSearchResult?: PerfUI.FlameChart.DataProviderSearchResult;
   private searchRegex?: RegExp;
   #parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
+  #traceMetadata: Trace.Types.File.MetaData|null;
   #traceInsightSets: Trace.Insights.Types.TraceInsightSets|null = null;
   #eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap|null = null;
   #selectedGroupName: string|null = null;
@@ -141,7 +143,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
 
   #currentInsightOverlays: Array<Overlays.Overlays.TimelineOverlay> = [];
   #activeInsight: TimelineComponents.Sidebar.ActiveInsight|null = null;
-  #markers: Array<Overlays.Overlays.TimelineOverlay> = [];
+  #markers: Array<Overlays.Overlays.TimingsMarker> = [];
 
   #tooltipElement = document.createElement('div');
 
@@ -165,6 +167,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     this.delegate = delegate;
     this.eventListeners = [];
     this.#parsedTrace = null;
+    this.#traceMetadata = null;
 
     const flameChartsContainer = new UI.Widget.VBox();
     flameChartsContainer.element.classList.add('flame-charts-container');
@@ -521,6 +524,73 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     });
   }
 
+  #amendMarkerWithFieldData(parsedTrace: Trace.Handlers.Types.ParsedTrace): void {
+    const cruxFieldData = this.#traceMetadata?.cruxFieldData;
+    if (!cruxFieldData) {
+      return;
+    }
+
+    const getPageResult = (url: string, origin: string): CrUXManager.PageResult|undefined => {
+      return cruxFieldData.find(result => {
+        const key = (result['url-ALL'] || result['origin-ALL'])?.record.key;
+        return (key?.url && key.url === url) || (key?.origin && key.origin === origin);
+      });
+    };
+    const getMetricScore = (pageResult: CrUXManager.PageResult, name: CrUXManager.StandardMetricNames):
+        {value: number, pageScope: CrUXManager.PageScope}|null => {
+          let value = pageResult['url-ALL']?.record.metrics[name]?.percentiles?.p75;
+          if (typeof value === 'number') {
+            return {value, pageScope: 'url'};
+          }
+
+          value = pageResult['origin-ALL']?.record.metrics[name]?.percentiles?.p75;
+          if (typeof value === 'number') {
+            return {value, pageScope: 'origin'};
+          }
+
+          return null;
+        };
+
+    for (const marker of this.#markers) {
+      for (const event of marker.entries) {
+        const navigationId = event.args?.data?.navigationId;
+        if (!navigationId) {
+          continue;
+        }
+
+        let cruxMetricName: CrUXManager.StandardMetricNames;
+        if (event.name === Trace.Types.Events.Name.MARK_FCP) {
+          cruxMetricName = 'first_contentful_paint';
+        } else if (event.name === Trace.Types.Events.Name.MARK_LCP_CANDIDATE) {
+          cruxMetricName = 'largest_contentful_paint';
+        } else {
+          continue;
+        }
+
+        const nav = parsedTrace.Meta.navigationsByNavigationId.get(navigationId);
+        // TODO(paulirish): Trace.Types.Events.NavigationStart type should be fixed, not working as intended.
+        const url = nav?.args.data.documentLoaderURL as (string | undefined);
+        if (!nav || !url) {
+          continue;
+        }
+
+        const pageResult = getPageResult(url, new URL(url).origin);
+        if (!pageResult) {
+          continue;
+        }
+
+        const metricScoreResult = getMetricScore(pageResult, cruxMetricName);
+        if (!metricScoreResult) {
+          continue;
+        }
+
+        const tsMs = metricScoreResult.value as Trace.Types.Timing.MilliSeconds;
+        const ts = Trace.Helpers.Timing.millisecondsToMicroseconds(tsMs);
+        marker.entryToFieldResult.set(event, {ts, pageScope: metricScoreResult.pageScope});
+      }
+    }
+  }
+
   setMarkers(parsedTrace: Trace.Handlers.Types.ParsedTrace|null): void {
     if (!parsedTrace) {
       return;
@@ -555,11 +625,12 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
         }
       }
       if (!matchingOverlay) {
-        const overlay = {
+        const overlay: Overlays.Overlays.TimingsMarker = {
           type: 'TIMINGS_MARKER',
           entries: [marker],
+          entryToFieldResult: new Map(),
           adjustedTimestamp,
-        } as Overlays.Overlays.TimingsMarker;
+        };
         overlayByTs.set(marker.ts, overlay);
       }
     });
@@ -569,6 +640,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
       return;
     }
 
+    this.#amendMarkerWithFieldData(parsedTrace);
     this.bulkAddOverlays(this.#markers);
   }
 
@@ -1047,12 +1119,15 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     this.#updateDetailViews();
   }
 
-  setModel(newParsedTrace: Trace.Handlers.Types.ParsedTrace, isCpuProfile = false): void {
+  setModel(
+      newParsedTrace: Trace.Handlers.Types.ParsedTrace, traceMetadata: Trace.Types.File.MetaData|null,
+      isCpuProfile = false): void {
     if (newParsedTrace === this.#parsedTrace) {
       return;
     }
     this.#selectedGroupName = null;
     this.#parsedTrace = newParsedTrace;
+    this.#traceMetadata = traceMetadata;
     Common.EventTarget.removeEventListeners(this.eventListeners);
     this.#selectedEvents = null;
     this.mainDataProvider.setModel(newParsedTrace, isCpuProfile);

front_end/panels/timeline/TimelinePanel.ts

@@ -1916,6 +1916,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     }
     const {traceIndex} = this.#viewMode;
     const parsedTrace = this.#traceEngineModel.parsedTrace(traceIndex);
+    const metadata = this.#traceEngineModel.metadata(traceIndex);
     const syntheticEventsManager = this.#traceEngineModel.syntheticTraceEventsManager(traceIndex);
 
     if (!parsedTrace || !syntheticEventsManager) {
@@ -1951,7 +1952,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
     const isCpuProfile =
         this.#traceEngineModel.metadata(traceIndex)?.dataOrigin === Trace.Types.File.DataOrigin.CPU_PROFILE;
-    this.flameChart.setModel(parsedTrace, isCpuProfile);
+    this.flameChart.setModel(parsedTrace, metadata, isCpuProfile);
     this.flameChart.resizeToPreferredHeights();
     // Reset the visual selection as we've just swapped to a new trace.
     this.flameChart.setSelectionAndReveal(null);

front_end/panels/timeline/fixtures/traces/BUILD.gn

@@ -20,6 +20,7 @@ copy_to_gen("traces") {
     "cls-multiple-frames.json.gz",
     "cls-no-nav.json.gz",
     "cls-single-frame.json.gz",
+    "crux.json.gz",
     "dom-size-long.json.gz",
     "dom-size.json.gz",
     "enhanced-traces.json.gz",