[tools] System-analyzer improvements

- Fix transition view selection and opening of subtrees
- Fix transition colors by storing an index on the uniqueType map
  in the timeline
- Do not reset the current list in the transition view when
  clicking on a map
- Support changing source positions in the source panel
- Highlight the current source position with a pulsing marker
- Fix kColors usage in timeline-track

Bug: v8:10644
Change-Id: I5130f18d9076cb37f9c3c8d585c9e47038ca411b
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2562386
Reviewed-by: Marja Hölttä <marja@chromium.org>
Commit-Queue: Camillo Bruni <cbruni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#71477}

tools/system-analyzer/index.mjs

@@ -59,7 +59,6 @@ class App {
     document.addEventListener(
         SelectTimeEvent.name, e => this.handleTimeRangeSelect(e));
     document.addEventListener(ToolTipEvent.name, e => this.handleToolTip(e));
-    window.addEventListener('scroll', e => console.log(e));
   }
 
   handleShowEntries(e) {

tools/system-analyzer/timeline.mjs

@@ -162,16 +162,24 @@ class Timeline {
     return minIndex;
   }
 
-  initializeTypes() {
+  _initializeTypes() {
     const types = new Map();
+    let index = 0;
     for (const entry of this.all) {
-      types.get(entry.type)?.push(entry) ?? types.set(entry.type, [entry])
+      let entries = types.get(entry.type);
+      if (entries != undefined) {
+        entries.push(entry)
+      } else {
+        entries = [entry];
+        entries.index = index++;
+        types.set(entry.type, entries)
+      }
     }
     return this._uniqueTypes = types;
   }
 
   get uniqueTypes() {
-    return this._uniqueTypes ?? this.initializeTypes();
+    return this._uniqueTypes ?? this._initializeTypes();
   }
 
   depthHistogram() {

tools/system-analyzer/view/map-panel.mjs

@@ -44,11 +44,13 @@ DOM.defineCustomElement('view/map-panel',
 
   set timeline(timeline) {
     this._timeline = timeline;
+    this.mapTransitionsPanel.timeline = timeline;
   }
 
-  set map(value) {
+  set map(map) {
-    this._map = value;
+    this._map = map;
-    this.mapTransitionsPanel.map = this._map;
+    this.mapTransitionsPanel.map = map;
+    this.mapDetailsPanel.map = map;
   }
 
   handleSearchBar(e) {

tools/system-analyzer/view/map-panel/map-transitions.mjs

@@ -1,17 +1,17 @@
 // Copyright 2020 the V8 project authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-import {FocusEvent, SelectionEvent, ToolTipEvent} from '../events.mjs';
+import {FocusEvent, ToolTipEvent} from '../events.mjs';
-import {CSSColor} from '../helper.mjs';
+import {kColors} from '../helper.mjs';
 import {DOM, V8CustomElement} from '../helper.mjs';
 
 DOM.defineCustomElement(
     './view/map-panel/map-transitions',
     (templateText) => class MapTransitions extends V8CustomElement {
+      _timeline;
       _map;
       _selectedMapLogEntries;
       _displayedMapsInTree;
-      currentMap = undefined;
       _toggleSubtreeHandler = this._handleToggleSubtree.bind(this);
       _selectMapHandler = this._handleSelectMap.bind(this);
       _mouseoverMapHandler = this._handleMouseoverMap.bind(this);
@@ -35,11 +35,15 @@ DOM.defineCustomElement(
         return this.$('#tooltipContents');
       }
 
-      set map(value) {
+      set map(map) {
-        this._map = value;
+        this._map = map;
         this._showMap();
       }
 
+      set timeline(timeline) {
+        this._timeline = timeline;
+      }
+
       set selectedMapLogEntries(list) {
         this._selectedMapLogEntries = list;
         this.update();
@@ -49,24 +53,9 @@ DOM.defineCustomElement(
         return this._selectedMapLogEntries;
       }
 
-      _typeToColor(type) {
+      _edgeToColor(edge) {
-        switch (type) {
+        const index = this._timeline.uniqueTypes.get(edge.type).index
-          case 'new':
+        return kColors[index % kColors.length];
-            return CSSColor.green;
-          case 'Normalize':
-            return CSSColor.violet;
-          case 'SlowToFast':
-            return CSSColor.orange;
-          case 'InitialMap':
-            return CSSColor.yellow;
-          case 'Transition':
-            return CSSColor.primaryColor;
-          case 'ReplaceDescriptors':
-            return CSSColor.red;
-          case 'LoadGlobalIC':
-            return CSSColor.green;
-        }
-        return CSSColor.secondaryColor;
       }
 
       _handleTransitionViewChange(e) {
@@ -79,14 +68,11 @@ DOM.defineCustomElement(
       }
 
       _selectMap(map) {
-        this.dispatchEvent(new SelectionEvent([map]));
+        this.dispatchEvent(new FocusEvent(map));
       }
 
       _showMap() {
-        if (this.currentMap === this._map) return;
+        // TODO: highlight current map
-        this.currentMap = this._map;
-        this.selectedMapLogEntries = [this._map];
-        this.update();
       }
 
       _update() {
@@ -138,7 +124,7 @@ DOM.defineCustomElement(
       _addTransitionEdge(map) {
         let classes = ['transitionEdge'];
         let edge = DOM.div(classes);
-        edge.style.backgroundColor = this._typeToColor(map.edge);
+        edge.style.backgroundColor = this._edgeToColor(map.edge);
         let labelNode = DOM.div('transitionLabel');
         labelNode.innerText = map.edge.toString();
         edge.appendChild(labelNode);
@@ -167,7 +153,7 @@ DOM.defineCustomElement(
 
       _addMapNode(map) {
         let node = DOM.div('map');
-        if (map.edge) node.style.backgroundColor = this._typeToColor(map.edge);
+        if (map.edge) node.style.backgroundColor = this._edgeToColor(map.edge);
         node.map = map;
         node.onclick = this._selectMapHandler
         node.onmouseover = this._mouseoverMapHandler

tools/system-analyzer/view/source-panel-template.html

@@ -15,7 +15,7 @@ found in the LICENSE file. -->
   }
 
   .scriptNode span {
-    counter-increment: sourceLineCounter 1111;
+    counter-increment: sourceLineCounter 1;
     text-indent: -3.5em;
     padding-left: 3.5em;
     display: block;
@@ -40,6 +40,25 @@ found in the LICENSE file. -->
 
   .marked {
     background-color: var(--secondary-color);
+    animation: pulse 3s ease-in-out infinite;
+  }
+
+  @keyframes pulse {
+    0% {
+      box-shadow: 0px 0px 0px 0px var(--secondary-color);
+    }
+    5% {
+      box-shadow: 0px 0px 0px 10px var(--secondary-color);
+    }
+    10% {
+      box-shadow: 0px 0px 0px 0px var(--secondary-color);
+    }
+    15% {
+      box-shadow: 0px 0px 0px 10px var(--secondary-color);
+    }
+    20% {
+      box-shadow: 0px 0px 0px 0px var(--secondary-color);
+    }
   }
 
   #script-dropdown {

tools/system-analyzer/view/source-panel.mjs

@@ -109,8 +109,11 @@ DOM.defineCustomElement('view/source-panel',
   }
 
   handleSourcePositionClick(e) {
-    this.selectLogEntries(e.target.sourcePosition.entries)
+    const sourcePosition = e.target.sourcePosition;
+    this.selectLogEntries(sourcePosition.entries);
+    this.dispatchEvent(new SelectionEvent([sourcePosition]));
   }
+
   handleSourcePositionMouseOver(e) {
     const entries = e.target.sourcePosition.entries;
     let list =

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

@@ -5,19 +5,7 @@
 import {kChunkHeight, kChunkWidth} from '../../log/map.mjs';
 import {MapLogEntry} from '../../log/map.mjs';
 import {FocusEvent, SelectionEvent, SelectTimeEvent, SynchronizeSelectionEvent, ToolTipEvent,} from '../events.mjs';
-import {CSSColor, DOM, V8CustomElement} from '../helper.mjs';
+import {CSSColor, DOM, kColors, V8CustomElement} from '../helper.mjs';
-
-const kColors = [
-  CSSColor.green,
-  CSSColor.violet,
-  CSSColor.orange,
-  CSSColor.yellow,
-  CSSColor.primaryColor,
-  CSSColor.red,
-  CSSColor.blue,
-  CSSColor.yellow,
-  CSSColor.secondaryColor,
-];
 
 DOM.defineCustomElement('view/timeline/timeline-track',
                         (templateText) =>