AuroraMiddleware/v8
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

[tools] System-Analyzer: Remove timeline overview

Browse Source 
This has been broken ever since we added multiple timeline-tracks.

Drive-by-fix: Rename selectionMouseMove to selectTimeRange.

Bug: v8:10644
Change-Id: Icff06a2d636a4a7302ac406f99e1012be4c7f25f
No-Try: true
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2463240
Auto-Submit: Camillo Bruni <cbruni@chromium.org>
Reviewed-by: Sathya Gunasekaran  <gsathya@chromium.org>
Commit-Queue: Camillo Bruni <cbruni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#70443}
This commit is contained in:
Camillo Bruni 2020-10-10 20:11:48 +02:00 committed by Commit Bot
parent 58d56eb792
commit 2061656704
2 changed files with 6 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
tools/system-analyzer/timeline-panel-template.html
View File

@ -5,53 +5,9 @@ found in the LICENSE file. -->
<head>
<link href="./index.css" rel="stylesheet">
</head>
<style>
#timelineOverview {
width: 100%;
height: 50px;
position: relative;
margin-top: -50px;
margin-bottom: 10px;
background-size: 100% 100%;
border: 1px var(--primary-color) solid;
border-width: 1px 0 1px 0;
overflow: hidden;
}
#timelineOverviewIndicator {
height: 100%;
position: absolute;
box-shadow: 0px 2px 20px -5px var(--primary-color) inset;
top: 0px;
cursor: ew-resize;
}
#timelineOverviewIndicator .leftMask,
#timelineOverviewIndicator .rightMask {
background-color: rgba(240, 230, 230, 0.3);
width: 10000px;
height: 100%;
position: absolute;
top: 0px;
}
#timelineOverviewIndicator .leftMask {
right: 100%;
}
#timelineOverviewIndicator .rightMask {
left: 100%;
}
</style>
<div class="panel">
<h2>Timeline Panel</h2>
<div>
<slot></slot>
</div>
<div id="timelineOverview">
<div id="timelineOverviewIndicator">
<div class="leftMask"></div>
<div class="rightMask"></div>
</div>
</div>
</div>

54
tools/system-analyzer/timeline-panel.mjs
View File

@ -8,47 +8,29 @@ import './timeline/timeline-track.mjs';
defineCustomElement('timeline-panel', (templateText) =>
class TimelinePanel extends V8CustomElement {
#timeSelection = { start: 0, end: Infinity };
constructor() {
super(templateText);
this.timelineOverview.addEventListener(
'mousemove', e => this.handleTimelineIndicatorMove(e));
this.addEventListener(
'scrolltrack', e => this.handleTrackScroll(e));
this.addEventListener(
SynchronizeSelectionEvent.name, e => this.handleMouseMoveSelection(e));
this.backgroundCanvas = document.createElement('canvas');
this.isLocked = false;
}
get timelineOverview() {
return this.$('#timelineOverview');
}
get timelineOverviewIndicator() {
return this.$('#timelineOverviewIndicator');
}
//TODO(zcankara) Remove dependency to timelineCanvas here
get timelineCanvas() {
return this.timelineTracks[0].timelineCanvas;
}
//TODO(zcankara) Remove dependency to timeline here
get timeline() {
return this.timelineTracks[0].timeline;
}
set nofChunks(count) {
for (const track of this.timelineTracks) {
track.nofChunks = count;
}
}
get nofChunks() {
return this.timelineTracks[0].nofChunks;
}
get timelineTracks() {
return this.$("slot").assignedNodes().filter(
track => track.nodeType === Node.ELEMENT_NODE);
node => node.nodeType === Node.ELEMENT_NODE);
}
handleTrackScroll(event) {
//TODO(zcankara) add forEachTrack helper method
for (const track of this.timelineTracks) {
@ -57,37 +39,13 @@ defineCustomElement('timeline-panel', (templateText) =>
}
handleMouseMoveSelection(event) {
this.selectionMouseMove(event.start, event.end);
this.selectTimeRange(event.start, event.end);
}
selectionMouseMove(start, end) {
selectTimeRange(start, end) {
for (const track of this.timelineTracks) {
track.startTime = start;
track.endTime = end;
}
}
handleTimelineIndicatorMove(event) {
if (event.buttons == 0) return;
let timelineTotalWidth = this.timelineCanvas.offsetWidth;
let factor = this.timelineOverview.offsetWidth / timelineTotalWidth;
for (const track of this.timelineTracks) {
track.timelineIndicatorMove(event.movementX / factor);
}
this.updateOverviewWindow();
}
updateOverviewWindow() {
let indicator = this.timelineOverviewIndicator;
let totalIndicatorWidth =
this.timelineOverview.offsetWidth;
let div = this.timeline;
let timelineTotalWidth = this.timelineCanvas.offsetWidth;
let factor = totalIndicatorWidth / timelineTotalWidth;
let width = div.offsetWidth * factor;
let left = div.scrollLeft * factor;
indicator.style.width = width + 'px';
indicator.style.left = left + 'px';
}
});