[RPP] Desaturate unrelated events when insight/search is active

This is added initially as an experiment, as there is a long tail of
improvements to make this UX treatment seamless.

Adds to FlameChart the ability to transform the colors used for drawing
based on a set of currently relevant events. The active insight and the
searching feature both utilize this now.

FlameChart now maintains a "color => grayscale color" mapping.
"getColorForEntry" is used to select a color that takes into account the
currently configured relevant events.

Appenders have their own custom drawing, and so are handled by passing
them a "tranformColor" callback, which plugs into FlameChart's logic for
determining if an event needed to be dimmed.

The active insight derives which events are relevant from the provided
overlays. Events associated with an overlay are relevant, as well as
events that fall within the time range of an overlay that defines a
range.

Drive-by change: the LCPPhases insight now produces an overlay for the
LCP request event, if any.

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

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

Author: Connor Clark

front_end/core/common/Color.ts

@@ -2152,6 +2152,16 @@ export class Legacy implements Color {
     return new Legacy(rgba, Format.RGBA);
   }
 
+  /**
+   * Returns a new color using the NTSC formula for making a RGB color grayscale.
+   * Note: this is ill-defined for colors with alpha, and alpha is not modified.
+   */
+  grayscale(): Legacy {
+    const [r, g, b, a] = this.#rgbaInternal;
+    const gray = r * 0.299 + g * 0.587 + b * 0.114;
+    return new Legacy([gray, gray, gray, a], Format.RGBA);
+  }
+
   setAlpha(alpha: number): Legacy {
     const rgba: Color4D = [...this.#rgbaInternal];
     rgba[3] = alpha;

front_end/core/host/UserMetrics.ts

@@ -1020,10 +1020,11 @@ export enum DevtoolsExperiments {
   'extension-storage-viewer' = 100,
   'floating-entry-points-for-ai-assistance' = 101,
   'timeline-experimental-insights' = 102,
+  'timeline-dim-unrelated-events' = 103,
   /* eslint-enable @typescript-eslint/naming-convention */
 
   // Increment this when new experiments are added.
-  MAX_VALUE = 103,
+  MAX_VALUE = 104,
 }
 
 export const enum CSSPropertyDocumentation {

front_end/core/root/Runtime.ts

@@ -300,6 +300,8 @@ export const enum ExperimentName {
   EXTENSION_STORAGE_VIEWER = 'extension-storage-viewer',
   FLOATING_ENTRY_POINTS_FOR_AI_ASSISTANCE = 'floating-entry-points-for-ai-assistance',
   TIMELINE_EXPERIMENTAL_INSIGHTS = 'timeline-experimental-insights',
+  TIMELINE_DIM_UNRELATED_EVENTS = 'timeline-dim-unrelated-events',
+  // when adding to this enum, you'll need to also add to REGISTERED_EXPERIMENTS in EnvironmentHelpers.ts
 }
 
 export interface AidaAvailability {

front_end/entrypoints/main/MainImpl.ts

@@ -413,6 +413,11 @@ export class MainImpl {
         'Performance panel: enable experimental performance insights',
     );
 
+    Root.Runtime.experiments.register(
+        Root.Runtime.ExperimentName.TIMELINE_DIM_UNRELATED_EVENTS,
+        'Performance panel: enable dimming unrelated events in performance insights and search results',
+    );
+
     Root.Runtime.experiments.enableExperimentsByDefault([
       'css-type-component-length-deprecate',
       Root.Runtime.ExperimentName.AUTOFILL_VIEW,

front_end/panels/timeline/LayoutShiftsTrackAppender.ts

@@ -175,12 +175,12 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
       // If the new CLS experience isn't on.. Continue to present that Shifts are 5ms long. (but now via drawOverrides)
       // TODO: Remove this when the experiment ships
       if (Trace.Types.Events.isLayoutShift(event)) {
-        return (context, x, y, _width, levelHeight, timeToPosition) => {
+        return (context, x, y, _width, levelHeight, timeToPosition, transformColor) => {
           const fakeDurMs = Trace.Helpers.Timing.microSecondsToMilliseconds(
               Trace.Types.Timing.MicroSeconds(event.ts + LAYOUT_SHIFT_SYNTHETIC_DURATION));
           const barEnd = timeToPosition(fakeDurMs);
           const barWidth = barEnd - x;
-          context.fillStyle = this.colorForEvent(event);
+          context.fillStyle = transformColor(this.colorForEvent(event));
           context.fillRect(x, y, barWidth - 0.5, levelHeight - 1);
           return {
             x,
@@ -202,7 +202,7 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
       // A LS score of ~0 will create a diamond of minimum size (exactly 0 should not happen in practice)
       const bufferScale = 1 - Math.min(score / 0.10, 1);
 
-      return (context, x, y, _width, levelHeight) => {
+      return (context, x, y, _width, levelHeight, _, transformColor) => {
         // levelHeight is 17px, so this math translates to a minimum diamond size of 5.6px tall.
         const maxBuffer = levelHeight / 3;
         const buffer = bufferScale * maxBuffer;
@@ -216,7 +216,7 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
         context.lineTo(x, y + levelHeight - buffer);
         context.lineTo(x - halfSize + buffer, y + halfSize);
         context.closePath();
-        context.fillStyle = this.colorForEvent(event);
+        context.fillStyle = transformColor(this.colorForEvent(event));
 
         context.fill();
         context.restore();
@@ -227,10 +227,10 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
       };
     }
     if (Trace.Types.Events.isSyntheticLayoutShiftCluster(event)) {
-      return (context, x, y, width, levelHeight) => {
+      return (context, x, y, width, levelHeight, _, transformColor) => {
         const barHeight = levelHeight * 0.2;
         const barY = y + (levelHeight - barHeight) / 2 + 0.5;
-        context.fillStyle = this.colorForEvent(event);
+        context.fillStyle = transformColor(this.colorForEvent(event));
         context.fillRect(x, barY, width - 0.5, barHeight - 1);
         return {x, width, z: -1};
       };

front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -644,7 +644,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
 
   search(
       visibleWindow: Trace.Types.Timing.TraceWindowMicroSeconds,
-      filter: TimelineModel.TimelineModelFilter.TimelineModelFilter): PerfUI.FlameChart.DataProviderSearchResult[] {
+      filter?: TimelineModel.TimelineModelFilter.TimelineModelFilter): PerfUI.FlameChart.DataProviderSearchResult[] {
     const results: PerfUI.FlameChart.DataProviderSearchResult[] = [];
     this.timelineData();
     for (let i = 0; i < this.entryData.length; ++i) {
@@ -665,7 +665,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       if (!Trace.Helpers.Timing.eventIsInBounds(entry, visibleWindow)) {
         continue;
       }
-      if (filter.accept(entry, this.parsedTrace || undefined)) {
+      if (!filter || filter.accept(entry, this.parsedTrace || undefined)) {
         const startTimeMilli = Trace.Helpers.Timing.microSecondsToMilliseconds(entry.ts);
         results.push({index: i, startTimeMilli, provider: 'main'});
       }

front_end/panels/timeline/TimelineFlameChartNetworkDataProvider.ts

@@ -488,7 +488,7 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
    */
   search(
       visibleWindow: Trace.Types.Timing.TraceWindowMicroSeconds,
-      filter: TimelineModel.TimelineModelFilter.TimelineModelFilter,
+      filter?: TimelineModel.TimelineModelFilter.TimelineModelFilter,
       ): PerfUI.FlameChart.DataProviderSearchResult[] {
     const results: PerfUI.FlameChart.DataProviderSearchResult[] = [];
     for (let i = 0; i < this.#events.length; i++) {
@@ -501,7 +501,7 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
         continue;
       }
 
-      if (filter.accept(entry, this.#parsedTrace ?? undefined)) {
+      if (!filter || filter.accept(entry, this.#parsedTrace ?? undefined)) {
         const startTimeMilli = Trace.Helpers.Timing.microSecondsToMilliseconds(entry.ts);
         results.push({startTimeMilli, index: i, provider: 'network'});
       }

front_end/panels/timeline/TimelineFlameChartView.ts

@@ -46,8 +46,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineFlameChartView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const MAX_HIGHLIGHTED_SEARCH_ELEMENTS: number = 200;
-
 export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.FlameChart.FlameChartDelegate,
                                                                       UI.SearchableView.Searchable {
   private readonly delegate: TimelineModeViewDelegate;
@@ -348,6 +346,56 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     return this.element;
   }
 
+  #dimInsightRelatedEvents(relatedEvents: Trace.Types.Events.Event[]): void {
+    // Dim all events except those related to the active insight.
+    const relevantMainEvents = relatedEvents.map(event => this.mainDataProvider.indexForEvent(event) ?? -1);
+    const relevantNetworkEvents = relatedEvents.map(event => this.networkDataProvider.indexForEvent(event) ?? -1);
+
+    // Further, overlays defining a trace bounds do not dim an event that falls within those bounds.
+    for (const overlay of this.#currentInsightOverlays) {
+      let bounds;
+      if (overlay.type === 'TIMESPAN_BREAKDOWN') {
+        const firstSection = overlay.sections.at(0);
+        const lastSection = overlay.sections.at(-1);
+        if (firstSection && lastSection) {
+          bounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(firstSection.bounds.min, lastSection.bounds.max);
+        }
+      } else if (overlay.type === 'TIME_RANGE') {
+        bounds = overlay.bounds;
+      }
+
+      if (!bounds) {
+        continue;
+      }
+
+      let provider, relevantEvents;
+
+      // Using a relevant event for the overlay, determine which provider this overlay is for.
+      const overlayEvent = Overlays.Overlays.entriesForOverlay(overlay).at(0);
+      if (overlayEvent) {
+        if (this.mainDataProvider.indexForEvent(overlayEvent) !== null) {
+          provider = this.mainDataProvider;
+          relevantEvents = relevantMainEvents;
+        } else if (this.networkDataProvider.indexForEvent(overlayEvent) !== null) {
+          provider = this.networkDataProvider;
+          relevantEvents = relevantNetworkEvents;
+        }
+      } else if (overlay.type === 'TIMESPAN_BREAKDOWN') {
+        // For this overlay type, if there is no associated event it is rendered on mainFlameChart.
+        provider = this.mainDataProvider;
+        relevantEvents = relevantMainEvents;
+      }
+
+      if (!provider || !relevantEvents) {
+        continue;
+      }
+
+      relevantEvents.push(...provider.search(bounds).map(r => r.index));
+    }
+    this.mainFlameChart.enableDimming(relevantMainEvents);
+    this.networkFlameChart.enableDimming(relevantNetworkEvents);
+  }
+
   setOverlays(overlays: Overlays.Overlays.TimelineOverlay[], options: Overlays.Overlays.TimelineOverlaySetOptions):
       void {
     this.bulkRemoveOverlays(this.#currentInsightOverlays);
@@ -374,6 +422,13 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
       this.#expandEntryTrack(entry);
     }
 
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DIM_UNRELATED_EVENTS)) {
+      // The insight's `relatedEvents` property likely already includes the events associated with
+      // and overlay, but just in case not, include both arrays. Duplicates are fine.
+      const relatedEvents = [...entries, ...this.#activeInsight?.relatedEvents || []];
+      this.#dimInsightRelatedEvents(relatedEvents);
+    }
+
     if (options.updateTraceWindow) {
       const overlaysBounds = Overlays.Overlays.traceWindowContainingOverlays(this.#currentInsightOverlays);
       // Trace window covering all overlays expanded by 100% so that the overlays cover 50% of the visible window.
@@ -430,6 +485,8 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
     this.bulkRemoveOverlays(this.#currentInsightOverlays);
 
     if (!this.#activeInsight) {
+      this.mainFlameChart.disableDimming();
+      this.networkFlameChart.disableDimming();
       return;
     }
 
@@ -1346,13 +1403,8 @@ export class TimelineFlameChartView extends UI.Widget.VBox implements PerfUI.Fla
 
     this.searchableView.updateSearchMatchesCount(this.searchResults.length);
 
-    // To avoid too many highlights when the search regex matches too many entries,
-    // for example, when user only types in "e" as the search query,
-    // We only highlight the search results when the number of matches is less than or equal to 200.
-    if (this.searchResults.length <= MAX_HIGHLIGHTED_SEARCH_ELEMENTS) {
-      this.mainFlameChart.highlightAllEntries(mainMatches.map(m => m.index));
-      this.networkFlameChart.highlightAllEntries(networkMatches.map(m => m.index));
-    }
+    this.mainFlameChart.highlightAllEntries(mainMatches.map(m => m.index));
+    this.networkFlameChart.highlightAllEntries(networkMatches.map(m => m.index));
     if (!shouldJump || !this.searchResults.length) {
       return;
     }

front_end/panels/timeline/TimelinePanel.ts

@@ -535,7 +535,6 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
     this.searchableViewInternal = new UI.SearchableView.SearchableView(this.flameChart, null);
     this.searchableViewInternal.setMinimumSize(0, 100);
-    this.searchableViewInternal.setMinimalSearchQuerySize(0);
     this.searchableViewInternal.element.classList.add('searchable-view');
     this.searchableViewInternal.show(this.timelinePane.element);
     this.flameChart.show(this.searchableViewInternal.element);
@@ -555,8 +554,8 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     // is not on the DOM. That only happens when the sidebar tabbed pane component is set to Annotations.
     // In that case, clicking on the insight chip will do nothing.
     this.#sideBar.element.addEventListener(TimelineInsights.SidebarInsight.InsightActivated.eventName, event => {
-      const {name, insightSetKey, overlays} = event;
-      this.#setActiveInsight({name, insightSetKey, overlays});
+      const {name, insightSetKey, overlays, relatedEvents} = event;
+      this.#setActiveInsight({name, insightSetKey, overlays, relatedEvents});
     });
 
     this.#sideBar.element.addEventListener(TimelineInsights.SidebarInsight.InsightProvideOverlays.eventName, event => {

front_end/panels/timeline/components/Sidebar.ts

@@ -16,6 +16,7 @@ export interface ActiveInsight {
   name: string;
   insightSetKey: string;
   overlays: Overlays.Overlays.TimelineOverlay[];
+  relatedEvents: Trace.Types.Events.Event[];
 }
 
 export class RemoveAnnotation extends Event {