[tools][system-analyzer] Timeline track dblclick for selecting entries

Add functionality to emit an event upon double
clicking on an event type on the timeline track
selected entries panel.

Bug: v8:10644

Change-Id: I54d4397abfeab471f01c2b24bae4eb1ff705afcd
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2328787Reviewed-by: Camillo Bruni <cbruni@chromium.org>
Commit-Queue: Zeynep Cankara <zcankara@google.com>
Cr-Commit-Position: refs/heads/master@{#69222}

tools/system-analyzer/timeline/timeline-track.mjs

@@ -71,9 +71,9 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
       let unique = new Map();
       for (const entry of this.data.all) {
         if(!unique.has(entry.type)) {
-          unique.set(entry.type, 1);
+          unique.set(entry.type, [entry]);
         } else {
-          unique.set(entry.type, unique.get(entry.type) + 1);
+          unique.get(entry.type).push(entry);
         }
       }
       this.renderStatsWindow(unique);
@@ -84,20 +84,31 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
       this.removeAllChildren(timelineLegendContent);
       let fragment = document.createDocumentFragment();
       let colorIterator = 0;
-      unique.forEach((key, val) => {
+      unique.forEach((entries, type) => {
         let dt = document.createElement("dt");
-        dt.innerHTML = key;
-        dt.style.backgroundColor = transitionTypeToColor(val);
+        dt.innerHTML = entries.length;
+        dt.style.backgroundColor = transitionTypeToColor(type);
         dt.style.color = CSSColor.surfaceColor;
         fragment.appendChild(dt);
         let dd = document.createElement("dd");
-        dd.innerHTML = val;
+        dd.innerHTML = type;
+        dd.entries = entries;
+        dd.addEventListener('dblclick', e => this.handleEntryTypeDblClick(e));
         fragment.appendChild(dd);
         colorIterator += 1;
       });
       timelineLegendContent.appendChild(fragment);
     }
 
+    handleEntryTypeDblClick(e){
+      let selectedEvent = {
+        entries: e.target.entries
+      }
+      this.dispatchEvent(new CustomEvent(
+        'selectionevent', {bubbles: true, composed: true,
+         detail: selectedEvent}));
+    }
+
     // TODO(zcankara) Emit event and handle data in timeline track
     handleTimelineIndicatorMove(offset) {
       this.timeline.scrollLeft += offset;