diff --git a/tools/system-analyzer/index.mjs b/tools/system-analyzer/index.mjs index 1def12407b..6ee56f2d7c 100644 --- a/tools/system-analyzer/index.mjs +++ b/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) { diff --git a/tools/system-analyzer/timeline.mjs b/tools/system-analyzer/timeline.mjs index 7f7828f72f..310c03f55f 100644 --- a/tools/system-analyzer/timeline.mjs +++ b/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() { diff --git a/tools/system-analyzer/view/map-panel.mjs b/tools/system-analyzer/view/map-panel.mjs index 589ff2f18d..93fc9ddc91 100644 --- a/tools/system-analyzer/view/map-panel.mjs +++ b/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) { - this._map = value; - this.mapTransitionsPanel.map = this._map; + set map(map) { + this._map = map; + this.mapTransitionsPanel.map = map; + this.mapDetailsPanel.map = map; } handleSearchBar(e) { diff --git a/tools/system-analyzer/view/map-panel/map-transitions.mjs b/tools/system-analyzer/view/map-panel/map-transitions.mjs index 4a40fa5e67..690efaea33 100644 --- a/tools/system-analyzer/view/map-panel/map-transitions.mjs +++ b/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 {CSSColor} from '../helper.mjs'; +import {FocusEvent, ToolTipEvent} from '../events.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) { - this._map = value; + set map(map) { + 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) { - switch (type) { - case 'new': - 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; + _edgeToColor(edge) { + const index = this._timeline.uniqueTypes.get(edge.type).index + return kColors[index % kColors.length]; } _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; - this.currentMap = this._map; - this.selectedMapLogEntries = [this._map]; - this.update(); + // TODO: highlight current map } _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 diff --git a/tools/system-analyzer/view/source-panel-template.html b/tools/system-analyzer/view/source-panel-template.html index e87f53599f..a6574072a5 100644 --- a/tools/system-analyzer/view/source-panel-template.html +++ b/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 { diff --git a/tools/system-analyzer/view/source-panel.mjs b/tools/system-analyzer/view/source-panel.mjs index 1feff22692..b4b6aabcad 100644 --- a/tools/system-analyzer/view/source-panel.mjs +++ b/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 = diff --git a/tools/system-analyzer/view/timeline/timeline-track.mjs b/tools/system-analyzer/view/timeline/timeline-track.mjs index 3383681671..a13b81c89c 100644 --- a/tools/system-analyzer/view/timeline/timeline-track.mjs +++ b/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'; - -const kColors = [ - CSSColor.green, - CSSColor.violet, - CSSColor.orange, - CSSColor.yellow, - CSSColor.primaryColor, - CSSColor.red, - CSSColor.blue, - CSSColor.yellow, - CSSColor.secondaryColor, -]; +import {CSSColor, DOM, kColors, V8CustomElement} from '../helper.mjs'; DOM.defineCustomElement('view/timeline/timeline-track', (templateText) =>