[tools] Add deopt support for system-analyzer

Drive-by-fix:
- fix legend formatting
- Fix color from type retrieval
- Partially fix file location parsing in Processor

Bug: v8:10644
Change-Id: I8d9ecc4923c9772de66da74e9440b293fcecc5e2
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2465831
Commit-Queue: Camillo Bruni <cbruni@chromium.org>
Reviewed-by: Sathya Gunasekaran  <gsathya@chromium.org>
Cr-Commit-Position: refs/heads/master@{#70608}

tools/system-analyzer/helper.mjs

@@ -104,6 +104,18 @@ class CSSColor {
 
 }
 
+const kColors = [
+  CSSColor.green,
+  CSSColor.violet,
+  CSSColor.orange,
+  CSSColor.yellow,
+  CSSColor.primaryColor,
+  CSSColor.red,
+  CSSColor.blue,
+  CSSColor.yellow,
+  CSSColor.secondaryColor,
+];
+
 function typeToColor(type) {
   switch (type) {
     case 'new':
@@ -136,8 +148,6 @@ function typeToColor(type) {
   return CSSColor.secondaryColor;
 }
 
-
-
 function div(classes) {
   let node = document.createElement('div');
   if (classes !== void 0) {
@@ -191,5 +201,5 @@ class V8CustomElement extends HTMLElement {
 
 export {
   defineCustomElement, V8CustomElement, removeAllChildren,
-  $, div, typeToColor, CSSColor
+  $, div, kColors, typeToColor, CSSColor
 };

tools/system-analyzer/index.css

@@ -124,6 +124,7 @@ button {
   width: 10px;
   height: 10px;
   border: 1px var(--background-color) solid;
+  border-radius: 50%;
 }
 
 .primary {

tools/system-analyzer/index.html

@@ -79,8 +79,8 @@ found in the LICENSE file. -->
     import { App } from './index.mjs';
 
     globalThis.app = new App("#log-file-reader", "#map-panel",
-       "#timeline-panel", "#ic-panel", "#map-track", "#ic-track",
-       "#source-panel");
+      "#timeline-panel", "#ic-panel", "#map-track", "#ic-track", "#deopt-track",
+      "#source-panel");
   </script>
 </head>
 
@@ -93,6 +93,7 @@ found in the LICENSE file. -->
     <timeline-panel id="timeline-panel">
       <timeline-track id="map-track"></timeline-track>
       <timeline-track id="ic-track"></timeline-track>
+      <timeline-track id="deopt-track"></timeline-track>
     </timeline-panel>
     <map-panel id="map-panel"></map-panel>
     <ic-panel id="ic-panel" onchange="app.handleSelectIc(event)"></ic-panel>

tools/system-analyzer/index.mjs

@@ -22,7 +22,7 @@ class App {
   _view;
   _navigation;
   constructor(fileReaderId, mapPanelId, timelinePanelId,
-    icPanelId, mapTrackId, icTrackId, sourcePanelId) {
+    icPanelId, mapTrackId, icTrackId, deoptTrackId, sourcePanelId) {
     this._view = {
       logFileReader: $(fileReaderId),
       icPanel: $(icPanelId),
@@ -30,6 +30,7 @@ class App {
       timelinePanel: $(timelinePanelId),
       mapTrack: $(mapTrackId),
       icTrack: $(icTrackId),
+      deoptTrack: $(deoptTrackId),
       sourcePanel: $(sourcePanelId)
     };
     this._state = new State();
@@ -92,23 +93,13 @@ class App {
     }
   }
   selectTimeRange(start, end) {
-<<<<<<< HEAD
     this._state.timeSelection.start = start;
     this._state.timeSelection.end = end;
     this._state.icTimeline.selectTimeRange(start, end);
     this._state.mapTimeline.selectTimeRange(start, end);
-    this._view.mapPanel.selectedMapLogEntrys =
+    this._view.mapPanel.selectedMapLogEntries =
       this._state.mapTimeline.selection;
-    this._view.icPanel.selectedLogEntrys = this._state.icTimeline.selection;
-=======
-    this.#state.timeSelection.start = start;
-    this.#state.timeSelection.end = end;
-    this.#state.icTimeline.selectTimeRange(start, end);
-    this.#state.mapTimeline.selectTimeRange(start, end);
-    this.#view.mapPanel.selectedMapLogEntries =
-      this.#state.mapTimeline.selection;
-    this.#view.icPanel.selectedLogEntries = this.#state.icTimeline.selection;
->>>>>>> af96ca3c188229645eb0675363ae34180de206b3
+    this._view.icPanel.selectedLogEntries = this._state.icTimeline.selection;
   }
   selectMapLogEntry(entry) {
     this._state.map = entry;
@@ -116,13 +107,8 @@ class App {
     this._view.mapPanel.map = entry;
   }
   selectICLogEntry(entry) {
-<<<<<<< HEAD
     this._state.ic = entry;
-    this._view.icPanel.selectedLogEntrys = [entry];
-=======
-    this.#state.ic = entry;
-    this.#view.icPanel.selectedLogEntries = [entry];
->>>>>>> af96ca3c188229645eb0675363ae34180de206b3
+    this._view.icPanel.selectedLogEntries = [entry];
   }
   selectSourcePosition(sourcePositions) {
     if (!sourcePositions.script) return;
@@ -155,7 +141,7 @@ class App {
     const processor = this.handleLoadTextProcessor(fileData.chunk);
     const mapTimeline = processor.mapTimeline;
     const icTimeline = processor.icTimeline;
-    //TODO(zcankara) Make sure only one instance of src event map ic id match
+    const deoptTimeline = processor.deoptTimeline;
     // Load map log events timeline.
     this._state.mapTimeline = mapTimeline;
     // Transitions must be set before timeline for stats panel.
@@ -167,6 +153,7 @@ class App {
     this._state.icTimeline = icTimeline;
     this._view.icPanel.timeline = icTimeline;
     this._view.icTrack.data = icTimeline;
+    this._view.deoptTrack.data = deoptTimeline;
     this._view.sourcePanel.data = processor.scripts
     this.fileLoaded = true;
   }

tools/system-analyzer/log/deopt.mjs

+// 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 { LogEntry } from './log.mjs';
+
+export class DeoptLogEntry extends LogEntry {
+  constructor(type, time) {
+    super(type, time);
+  }
+}

tools/system-analyzer/processor.mjs

@@ -4,6 +4,7 @@
 
 import { MapLogEntry, Edge } from "./log/map.mjs";
 import { IcLogEntry } from "./log/ic.mjs";
+import { DeoptLogEntry } from "./log/deopt.mjs";
 import { Timeline } from "./timeline.mjs";
 import { LogReader, parseString, parseVarArgs } from "../logreader.mjs";
 import { Profile } from "../profile.mjs";
@@ -14,6 +15,7 @@ export class Processor extends LogReader {
   _profile = new Profile();
   _mapTimeline = new Timeline();
   _icTimeline = new Timeline();
+  _deoptTimeline = new Timeline();
   _formatPCRegexp = /(.*):[0-9]+:[0-9]+$/;
   MAJOR_VERSION = 7;
   MINOR_VERSION = 6;
@@ -32,6 +34,13 @@ export class Processor extends LogReader {
         ],
         processor: this.processCodeCreation
       },
+      'code-deopt': {
+        parsers: [
+          parseInt, parseInt, parseInt, parseInt, parseInt, parseString,
+          parseString, parseString
+        ],
+        processor: this.processCodeDeopt
+      },
       'v8-version': {
         parsers: [
           parseInt, parseInt,
@@ -180,6 +189,10 @@ export class Processor extends LogReader {
     }
   }
 
+  processCodeDeopt(timestamp, codeSize, instructionStart, inliningId,
+                   scriptOffset, deoptKind, deoptLocation, deoptReason) {
+    this._deoptTimeline.push(new DeoptLogEntry(deoptKind, timestamp));
+  }
 
   processV8Version(majorVersion, minorVersion) {
     if (
@@ -254,10 +267,12 @@ export class Processor extends LogReader {
   }
 
   processFileName(filePositionLine) {
-    if (!(/\s/.test(filePositionLine))) return;
+    if (!filePositionLine.includes(' ')) return;
+    // Try to handle urls with file positions: https://foo.bar.com/:17:330"
     filePositionLine = filePositionLine.split(' ');
-    let file = filePositionLine[1].split(':')[0];
-    return file;
+    let parts = filePositionLine[1].split(':');
+    if (parts[0].length <= 5) return parts[0] + ':' + parts[1]
+    return parts[1];
   }
 
   processMap(type, time, from, to, pc, line, column, reason, name) {
@@ -329,6 +344,10 @@ export class Processor extends LogReader {
     return this._mapTimeline;
   }
 
+  get deoptTimeline() {
+    return this._deoptTimeline;
+  }
+
   get scripts() {
     return this._profile.scripts_.filter(script => script !== undefined);
   }

tools/system-analyzer/timeline/timeline-track-template.html

@@ -81,6 +81,10 @@ found in the LICENSE file. -->
     text-align: right;
   }
 
+  .legendTypeColumn {
+    width: 100%;
+  }
+
   .timeline {
     background-color: var(--timeline-background-color);
   }
@@ -107,7 +111,7 @@ found in the LICENSE file. -->
     <thead>
       <tr>
         <td></td>
-        <td>Type</td>
+        <td class="legendTypeColumn">Type</td>
         <td>Count</td>
         <td>Percent</td>
       </tr>

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

@@ -4,7 +4,7 @@
 
 import {
   defineCustomElement, V8CustomElement,
-  typeToColor, CSSColor
+  kColors, CSSColor
 } from '../helper.mjs';
 import { kChunkWidth, kChunkHeight } from "../log/map.mjs";
 import {
@@ -25,6 +25,7 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
     _isSelected = false;
     _timeStartOffset;
     _mouseDownTime;
+    _typeToColor;
     constructor() {
       super(templateText);
       this.timeline.addEventListener("scroll",
@@ -44,6 +45,7 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
       this._isSelected = true;
       this._mouseDownTime = this.positionToTime(e.clientX);
     }
+
     handleTimeSelectionMouseMove(e) {
       if (!this._isSelected) return;
       let mouseMoveTime = this.positionToTime(e.clientX);
@@ -60,21 +62,23 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
         Math.min(startTime, endTime),
         Math.max(startTime, endTime)));
     }
+
     handleTimeSelectionMouseUp(e) {
       this._isSelected = false;
       this.dispatchEvent(new SelectTimeEvent(this._timeSelection.start,
         this._timeSelection.end));
     }
+
     isOnLeftHandle(posX) {
       return (Math.abs(this.leftHandlePosX - posX)
         <= TimelineTrack.SELECTION_OFFSET);
     }
+
     isOnRightHandle(posX) {
       return (Math.abs(this.rightHandlePosX - posX)
         <= TimelineTrack.SELECTION_OFFSET);
     }
 
-
     set startTime(value) {
       console.assert(
         value <= this._timeSelection.end,
@@ -82,6 +86,7 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
       this._timeSelection.start = value;
       this.updateSelection();
     }
+
     set endTime(value) {
       console.assert(
         value > this._timeSelection.start,
@@ -104,6 +109,7 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
       let leftHandlePosX = this.leftHandle.getBoundingClientRect().x;
       return leftHandlePosX;
     }
+
     get rightHandlePosX() {
       let rightHandlePosX = this.rightHandle.getBoundingClientRect().x;
       return rightHandlePosX;
@@ -130,9 +136,11 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
     get leftHandle() {
       return this.$('.leftHandle');
     }
+
     get rightHandle() {
       return this.$('.rightHandle');
     }
+
     get selection() {
       return this.$('.selection');
     }
@@ -158,11 +166,20 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
     }
     set data(value) {
       this._timeline = value;
+      this._resetTypeToColorCache();
       this.updateChunks();
       this.updateTimeline();
       this.renderLegend();
     }
 
+    _resetTypeToColorCache() {
+      this._typeToColor = new Map();
+      let lastIndex = 0;
+      for (const type of this.data.uniqueTypes.keys()) {
+        this._typeToColor.set(type, kColors[lastIndex++]);
+      }
+    }
+
     get data() {
       return this._timeline;
     }
@@ -172,19 +189,24 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
       this.updateChunks();
       this.updateTimeline();
     }
+
     get nofChunks() {
       return this._nofChunks;
     }
+
     updateChunks() {
       this._chunks = this.data.chunks(this.nofChunks);
     }
+
     get chunks() {
       return this._chunks;
     }
+
     set selectedEntry(value) {
       this._selectedEntry = value;
       if (value.edge) this.redraw();
     }
+
     get selectedEntry() {
       return this._selectedEntry;
     }
@@ -193,6 +215,10 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
       this.timeline.scrollLeft = offset;
     }
 
+    typeToColor(type) {
+      return this._typeToColor.get(type);
+    }
+
     renderLegend() {
       let timelineLegend = this.timelineLegend;
       let timelineLegendContent = this.timelineLegendContent;
@@ -203,7 +229,7 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
         row.entries = entries;
         row.classList.add('clickable');
         row.addEventListener('dblclick', e => this.handleEntryTypeDblClick(e));
-        let color = typeToColor(type);
+        let color = this.typeToColor(type);
         if (color !== null) {
           let div = this.div(["colorbox"]);
           div.style.backgroundColor = color;
@@ -221,6 +247,7 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
       });
       // Add Total row.
       let row = this.tr();
+      row.appendChild(this.td(""));
       row.appendChild(this.td("All"));
       row.appendChild(this.td(this.data.all.length));
       row.appendChild(this.td("100%"));
@@ -274,14 +301,14 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
       let type, count;
       if (true) {
         chunk.getBreakdown(map => map.type).forEach(([type, count]) => {
-          ctx.fillStyle = typeToColor(type);
+          ctx.fillStyle = this.typeToColor(type);
           let height = count / total * kHeight;
           ctx.fillRect(0, y, kWidth, y + height);
           y += height;
         });
       } else {
         chunk.items.forEach(map => {
-          ctx.fillStyle = typeToColor(map.type);
+          ctx.fillStyle = this.typeToColor(map.type);
           let y = chunk.yOffset(map);
           ctx.fillRect(0, y, kWidth, y + 1);
         });
@@ -380,7 +407,7 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
     }
 
     setEdgeStyle(edge, ctx) {
-      let color = typeToColor(edge.type);
+      let color = this.typeToColor(edge.type);
       ctx.strokeStyle = color;
       ctx.fillStyle = color;
     }
@@ -478,7 +505,7 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
         ctx.lineTo(centerX + offsetX, centerY - labelOffset);
         ctx.stroke();
         ctx.textAlign = 'left';
-        ctx.fillStyle = typeToColor(edge.type);
+        ctx.fillStyle = this.typeToColor(edge.type);
         ctx.fillText(
           edge.toString(), centerX + offsetX + 2, centerY - labelOffset);
       }