[ui] Add panel for scroll jank tasks

Run a query when loading a plugin and allow-list it to show it in the
details panel.

R=hjd@google.com

Change-Id: I506396af171f0cbcb3c3993d1810097c547e8620
diff --git a/ui/src/frontend/details_panel.ts b/ui/src/frontend/details_panel.ts
index c87f4e0..7319297 100644
--- a/ui/src/frontend/details_panel.ts
+++ b/ui/src/frontend/details_panel.ts
@@ -193,6 +193,9 @@
   if (id.startsWith('slices_with_arg_value_')) {
     return `Arg: ${id.substr('slices_with_arg_value_'.length)}`;
   }
+  if (id === 'chrome_scroll_jank_long_tasks') {
+    return 'Scroll Jank: long tasks';
+  }
   return null;
 }
 
diff --git a/ui/src/tracks/chrome_scroll_jank/index.ts b/ui/src/tracks/chrome_scroll_jank/index.ts
index c13af8e..ea17d9d 100644
--- a/ui/src/tracks/chrome_scroll_jank/index.ts
+++ b/ui/src/tracks/chrome_scroll_jank/index.ts
@@ -14,7 +14,7 @@
 
 import {v4 as uuidv4} from 'uuid';
 
-import {AddTrackArgs} from '../../common/actions';
+import {Actions, AddTrackArgs} from '../../common/actions';
 import {Engine} from '../../common/engine';
 import {featureFlags} from '../../common/feature_flags';
 import {
@@ -22,6 +22,7 @@
 } from '../../common/plugin_api';
 import {NUM} from '../../common/query_result';
 import {InThreadTrackSortKey} from '../../common/state';
+import {globals} from '../../frontend/globals';
 import {
   NamedSliceTrack,
   NamedSliceTrackTypes,
@@ -52,11 +53,6 @@
 
   async initSqlTable(tableName: string) {
     await this.engine.query(`
-select RUN_METRIC(
-   'chrome/chrome_tasks_delaying_input_processing.sql',
-   'duration_causing_jank_ms',
-   /* duration_causing_jank_ms = */ '8');
-
 create view ${tableName} as
 select s2.ts, s2.dur, s2.id, 0 as depth, s1.full_name as name
 from chrome_tasks_delaying_input_processing s1
@@ -109,6 +105,32 @@
     trackGroup: getTrackGroupUuid(it.utid, it.upid),
   });
 
+  // Initialise the chrome_tasks_delaying_input_processing table. It will be
+  // used in the sql table above.
+  await engine.query(`
+select RUN_METRIC(
+   'chrome/chrome_tasks_delaying_input_processing.sql',
+   'duration_causing_jank_ms',
+   /* duration_causing_jank_ms = */ '8');`);
+
+
+  globals.dispatch(Actions.executeQuery({
+    queryId: 'chrome_scroll_jank_long_tasks',
+    query: `
+     select
+       s1.full_name,
+       s1.duration_ms,
+       s1.slice_id,
+       s1.thread_dur_ms,
+       s2.id,
+       s2.ts,
+       s2.dur,
+       s2.track_id
+     from chrome_tasks_delaying_input_processing s1
+     join slice s2 on s1.slice_id=s2.id
+     `,
+  }));
+
   return result;
 }