RPP: Fix incorrect candystriping placement

If an interaction started exceeding 200ms after processingEnd, the
candystripe decoration was incorrectly drawn.

This simplifies our logic and correctly draws the decoration.

Bug: 410531484
Change-Id: Ie499bfb7641a130db802c11f4c35db53335b20e8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6685592
Auto-Submit: Paul Irish <paulirish@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>

Author: paulirish

front_end/panels/timeline/InteractionsTrackAppender.ts

@@ -115,11 +115,11 @@ export class InteractionsTrackAppender implements TrackAppender {
     decorationsForEvent.push(
         {
           type: PerfUI.FlameChart.FlameChartDecorationType.CANDY,
+          // Where the striping starts is hard. The problem is the whole interaction, isolating the part of it *responsible* for
+          // making the interaction 200ms is hard and our decoration won't do it perfectly. To simplify we just flag all the overage.
+          // AKA the first 200ms of the interaction aren't flagged. A downside is we often flag a lot of render delay.
+          // It'd be fair to shift the candystriping segment earlier in the interaction... Let's see what the feedback is like.
           startAtTime: Trace.Handlers.ModelHandlers.UserInteractions.LONG_INTERACTION_THRESHOLD,
-          // Interaction events have whiskers, so we do not want to candy stripe
-          // the entire duration. The box represents processing duration, so we only
-          // candystripe up to the end of processing.
-          endAtTime: entry.processingEnd,
         },
         {
           type: PerfUI.FlameChart.FlameChartDecorationType.WARNING_TRIANGLE,

front_end/panels/timeline/track_appenders/InteractionsTrackAppender.test.ts

@@ -108,7 +108,6 @@ describeWithEnvironment('InteractionsTrackAppender', function() {
       {
         type: PerfUI.FlameChart.FlameChartDecorationType.CANDY,
         startAtTime: Trace.Types.Timing.Micro(200_000),
-        endAtTime: longInteraction.processingEnd,
       },
       {
         type: PerfUI.FlameChart.FlameChartDecorationType.WARNING_TRIANGLE,

front_end/ui/legacy/components/perf_ui/FlameChart.ts

@@ -2377,11 +2377,8 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
             // Draw a rectangle over the event, starting at the X value of the
             // event's start time + the startDuration of the candy striping.
             const barXStart = this.timeToPositionClipped(entryStartTime + candyStripeStartTime);
-
-            // If a custom end time was passed in, that is when we stop striping, else we stripe until the very end of the entry.
-            const stripingEndTime = decoration.endAtTime ? Trace.Helpers.Timing.microToMilli(decoration.endAtTime) :
-                                                           entryStartTime + duration;
-            const barXEnd = this.timeToPositionClipped(stripingEndTime);
+            // We stripe until the very end of the entry.
+            const barXEnd = this.timeToPositionClipped(entryStartTime + duration);
             this.#drawEventRect(context, timelineData, entryIndex, {
               startX: barXStart,
               width: barXEnd - barXStart,
@@ -4103,12 +4100,9 @@ export const enum FlameChartDecorationType {
  **/
 export type FlameChartDecoration = {
   type: FlameChartDecorationType.CANDY,
-  // We often only want to highlight problem parts of events, so this time sets
-  // the minimum time at which the candystriping will start. If you want to
-  // candystripe the entire event, set this to 0.
+  /** Relative to entry's ts. We often only want to highlight problem parts of events, so this time sets the minimum
+   * time at which the candystriping will start. If you want to candystripe the entire event, set this to 0. */
   startAtTime: Trace.Types.Timing.Micro,
-  // Optionally set the end time for the striping. If this is not provided, the entire entry will be striped.
-  endAtTime?: Trace.Types.Timing.Micro,
 }|{
   type: FlameChartDecorationType.WARNING_TRIANGLE,
   customStartTime?: Trace.Types.Timing.Micro,