[RPP] Bring back DCL and L markers

https://screenshot.googleplex.com/6zv3Yrvgtz3Sf2f

Bug:384980553
Change-Id: If078e81d37a047f2375df3dc87714ee87531ae4a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6107674
Commit-Queue: Adriana Ixba <[email protected]>
Reviewed-by: Adam Raine <[email protected]>

Author: Adriana Ixba

front_end/panels/timeline/TimelineFlameChartView.ts

@@ -57,14 +57,20 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
  * This defines the order these markers will be rendered if they are at the
  * same timestamp. The smaller number will be shown first - e.g. so if NavigationStart, MarkFCP,
  * MarkLCPCandidate have the same timestamp, visually we
- * will render [Nav][FCP][LCP] everytime.
+ * will render [Nav][FCP][DCL][LCP] everytime.
  */
 export const SORT_ORDER_PAGE_LOAD_MARKERS: Readonly<Record<string, number>> = {
   [Trace.Types.Events.Name.NAVIGATION_START]: 0,
-  [Trace.Types.Events.Name.MARK_FCP]: 1,
-  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE]: 2,
+  [Trace.Types.Events.Name.MARK_LOAD]: 1,
+  [Trace.Types.Events.Name.MARK_FCP]: 2,
+  [Trace.Types.Events.Name.MARK_DOM_CONTENT]: 3,
+  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE]: 4,
 };
 
+// Threshold to match up overlay markers that are off by a tiny amount so they aren't rendered
+// on top of each other.
+const TIMESTAMP_THRESHOLD_MS = Trace.Types.Timing.MicroSeconds(10);
+
 export class TimelineFlameChartView extends
     Common.ObjectWrapper.eventMixin<TimelineTreeView.EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
         implements PerfUI.FlameChart.FlameChartDelegate, UI.SearchableView.Searchable {
@@ -466,33 +472,42 @@ export class TimelineFlameChartView extends
     // Clear out any markers.
     this.bulkRemoveOverlays(this.#markers);
     const markerEvents = parsedTrace.PageLoadMetrics.allMarkerEvents;
-    // Set markers for Navigations, LCP, FCP.
+    // Set markers for Navigations, LCP, FCP, DCL, L.
     const markers = markerEvents.filter(
         event => event.name === Trace.Types.Events.Name.NAVIGATION_START ||
             event.name === Trace.Types.Events.Name.MARK_LCP_CANDIDATE ||
-            event.name === Trace.Types.Events.Name.MARK_FCP);
+            event.name === Trace.Types.Events.Name.MARK_FCP ||
+            event.name === Trace.Types.Events.Name.MARK_DOM_CONTENT ||
+            event.name === Trace.Types.Events.Name.MARK_LOAD);
 
     this.#sortMarkersForPreferredVisualOrder(markers);
-    const markerOverlays: Overlays.Overlays.TimingsMarker[] = [];
-    markers.forEach((marker, i) => {
+    const overlayByTs = new Map<Trace.Types.Timing.MicroSeconds, Overlays.Overlays.TimingsMarker>();
+    markers.forEach(marker => {
       const adjustedTimestamp = Trace.Helpers.Timing.timeStampForEventAdjustedByClosestNavigation(
           marker,
           parsedTrace.Meta.traceBounds,
           parsedTrace.Meta.navigationsByNavigationId,
           parsedTrace.Meta.navigationsByFrameId,
       );
       // If any of the markers overlap in timing, lets put them on the same marker.
-      if (i > 0 && marker.ts === markerOverlays[markerOverlays.length - 1].entries[0].ts) {
-        markerOverlays[markerOverlays.length - 1].entries.push(marker);
-        return;
+      let matchingOverlay = false;
+      for (const [ts, overlay] of overlayByTs.entries()) {
+        if (Math.abs(marker.ts - ts) <= TIMESTAMP_THRESHOLD_MS) {
+          overlay.entries.push(marker);
+          matchingOverlay = true;
+          break;
+        }
+      }
+      if (!matchingOverlay) {
+        const overlay = {
+          type: 'TIMINGS_MARKER',
+          entries: [marker],
+          adjustedTimestamp,
+        } as Overlays.Overlays.TimingsMarker;
+        overlayByTs.set(marker.ts, overlay);
       }
-      const overlay = {
-        type: 'TIMINGS_MARKER',
-        entries: [marker],
-        adjustedTimestamp,
-      } as Overlays.Overlays.TimingsMarker;
-      markerOverlays.push(overlay);
     });
+    const markerOverlays: Overlays.Overlays.TimingsMarker[] = [...overlayByTs.values()];
     this.#markers = markerOverlays;
     if (this.#markers.length === 0) {
       return;

front_end/panels/timeline/TimelineUIUtils.ts

@@ -2403,11 +2403,11 @@ export class TimelineUIUtils {
         tall = true;
         break;
       case Trace.Types.Events.Name.MARK_DOM_CONTENT:
-        color = '#0867CB';
+        color = 'var(--color-text-disabled)';
         tall = true;
         break;
       case Trace.Types.Events.Name.MARK_LOAD:
-        color = '#B31412';
+        color = 'var(--color-text-disabled)';
         tall = true;
         break;
       case Trace.Types.Events.Name.MARK_FIRST_PAINT:

front_end/panels/timeline/utils/EntryStyles.ts

@@ -1131,5 +1131,13 @@ export function markerDetailsForEvent(event: Trace.Types.Events.Event): {
     color = 'var(--color-text-primary)';
     title = Trace.Handlers.ModelHandlers.PageLoadMetrics.MetricName.NAV;
   }
+  if (Trace.Types.Events.isMarkDOMContent(event)) {
+    color = 'var(--color-text-disabled)';
+    title = Trace.Handlers.ModelHandlers.PageLoadMetrics.MetricName.DCL;
+  }
+  if (Trace.Types.Events.isMarkLoad(event)) {
+    color = 'var(--color-text-disabled)';
+    title = Trace.Handlers.ModelHandlers.PageLoadMetrics.MetricName.L;
+  }
   return {color, title};
 }

test/interactions/panels/performance/timeline/revealing-insights_test.ts

@@ -32,18 +32,22 @@ describe('Performance panel insights', () => {
       return await header.evaluate(elem => elem.getAttribute('aria-expanded') === 'true');
     });
 
-    // Clicking the insight should create an overlay. For the LCP request insight there are 5:
+    // Clicking the insight should create an overlay. For the LCP request insight there are 7:
     // 1. Candy stripe.
     // 2. Red outline on the event.
     // 3. "LCP loaded 33ms after..." timespan.
     // 4. Navigation Timings Marker
     // 5. FCP Timings Marker & LCP Timings Marker
+    // 7. DCL Timings Marker
+    // 8. L Timings Marker
     const overlays = await $$('.overlay-item', flameChart);
-    assert.lengthOf(overlays, 5);
+    assert.lengthOf(overlays, 7);
     const jsLogContexts = await Promise.all(overlays.map(async overlay => {
       return await overlay.evaluate(elem => elem.getAttribute('jslog') ?? '');
     }));
     assert.deepEqual(jsLogContexts, [
+      'Item; context: timeline.overlays.timings-marker',
+      'Item; context: timeline.overlays.timings-marker',
       'Item; context: timeline.overlays.timings-marker',
       'Item; context: timeline.overlays.timings-marker',
       'Item; context: timeline.overlays.entry-outline-error',