Scroll Details panel to show all frame presentation delays.

Previously, only the max jank interval was shown in the table. This
is in response to this comment:

https://android-review.git.corp.google.com/c/platform/external/perfetto/+/2701133/comment/cef279a3_2e8f9047/

Bug: b/278844325
Change-Id: I5b8622a302cbeba175a304b7fae500e544dee27c

ui/src/tracks/chrome_scroll_jank/scroll_details_panel.ts

@@ -85,7 +85,7 @@ export class ScrollDetailsPanel extends
   loaded = false;
   data: Data|undefined;
   metrics: Metrics = {};
-  maxJankSlices: JankSliceDetails[] = [];
+  orderedJankSlices: JankSliceDetails[] = [];
 
   static create(args: NewBottomTabArgs): ScrollDetailsPanel {
     return new ScrollDetailsPanel(args);
@@ -134,7 +134,7 @@ export class ScrollDetailsPanel extends
   private async loadMetrics() {
     await this.loadInputEventCount();
     await this.loadFrameStats();
-    await this.loadMaxDelay();
+    await this.loadDelayData();
   }
 
   private async loadInputEventCount() {
@@ -188,47 +188,39 @@ export class ScrollDetailsPanel extends
     }
   }
 
-  private async loadMaxDelay() {
+  private async loadDelayData() {
     if (exists(this.data)) {
       const queryResult = await this.engine.query(`
-        WITH max_delay_tbl AS (
-          SELECT
-            MAX(dur) AS max_dur
-          FROM chrome_janky_frame_presentation_intervals s
-          WHERE s.ts >= ${this.data.ts}
-            AND s.ts + s.dur <= ${this.data.ts + this.data.dur}
-        )
         SELECT
           IFNULL(sub_cause_of_jank, IFNULL(cause_of_jank, 'Unknown')) AS cause,
           IFNULL(event_latency_id, 0) AS eventLatencyId,
-          IFNULL(MAX(dur), 0) AS maxDelayDur,
-          IFNULL(delayed_frame_count, 0) AS maxDelayVsync
+          IFNULL(dur, 0) AS delayDur,
+          IFNULL(delayed_frame_count, 0) AS delayVsync
         FROM chrome_janky_frame_presentation_intervals s
         WHERE s.ts >= ${this.data.ts}
           AND s.ts + s.dur <= ${this.data.ts + this.data.dur}
-          AND dur IN (SELECT max_dur FROM max_delay_tbl)
-        GROUP BY eventLatencyId, cause;
+        ORDER by delayDur DESC;
       `);
 
       const iter = queryResult.iter({
         cause: STR,
         eventLatencyId: NUM,
-        maxDelayDur: LONG,
-        maxDelayVsync: NUM,
+        delayDur: LONG,
+        delayVsync: NUM,
       });
 
       for (; iter.valid(); iter.next()) {
-        if (iter.maxDelayDur <= 0) {
+        if (iter.delayDur <= 0) {
           break;
         }
         const jankSlices =
             await getScrollJankSlices(this.engine, iter.eventLatencyId);
 
-        this.maxJankSlices.push({
+        this.orderedJankSlices.push({
           cause: iter.cause,
           jankSlice: jankSlices[0],
-          delayDur: iter.maxDelayDur,
-          delayVsync: iter.maxDelayVsync,
+          delayDur: iter.delayDur,
+          delayVsync: iter.delayVsync,
         });
       }
     }
@@ -251,22 +243,21 @@ export class ScrollDetailsPanel extends
     return dictToTreeNodes(metrics);
   }
 
-  private getMaxDelayTable(): m.Child {
-    if (this.maxJankSlices.length > 0) {
+  private getDelayTable(): m.Child {
+    if (this.orderedJankSlices.length > 0) {
       interface DelayData {
         jankLink: m.Child;
         dur: m.Child;
         delayedVSyncs: number;
       }
-      ;
 
       const columns: ColumnDescriptor<DelayData>[] = [
         widgetColumn<DelayData>('Cause', (x) => x.jankLink),
         widgetColumn<DelayData>('Duration', (x) => x.dur),
         numberColumn<DelayData>('Delayed Vsyncs', (x) => x.delayedVSyncs),
       ];
       const data: DelayData[] = [];
-      for (const jankSlice of this.maxJankSlices) {
+      for (const jankSlice of this.orderedJankSlices) {
         data.push({
           jankLink: getSliceForTrack(
               jankSlice.jankSlice, ScrollJankV3Track.kind, jankSlice.cause),
@@ -336,8 +327,8 @@ export class ScrollDetailsPanel extends
               m(Tree, this.renderMetricsDictionary())),
             m(
                 Section,
-                {title: 'Max Frame Presentation Delay'},
-                this.getMaxDelayTable(),
+                {title: 'Frame Presentation Delays'},
+                this.getDelayTable(),
                 )),
           m(
               GridLayoutColumn,