Commit 20616567 authored by Camillo Bruni's avatar Camillo Bruni Committed by Commit Bot

[tools] System-Analyzer: Remove timeline overview

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: 's avatarSathya Gunasekaran  <gsathya@chromium.org>
Commit-Queue: Camillo Bruni <cbruni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#70443}
parent 58d56eb7
...@@ -5,53 +5,9 @@ found in the LICENSE file. --> ...@@ -5,53 +5,9 @@ found in the LICENSE file. -->
<head> <head>
<link href="./index.css" rel="stylesheet"> <link href="./index.css" rel="stylesheet">
</head> </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"> <div class="panel">
<h2>Timeline Panel</h2> <h2>Timeline Panel</h2>
<div> <div>
<slot></slot> <slot></slot>
</div> </div>
<div id="timelineOverview">
<div id="timelineOverviewIndicator">
<div class="leftMask"></div>
<div class="rightMask"></div>
</div>
</div>
</div> </div>
...@@ -8,47 +8,29 @@ import './timeline/timeline-track.mjs'; ...@@ -8,47 +8,29 @@ import './timeline/timeline-track.mjs';
defineCustomElement('timeline-panel', (templateText) => defineCustomElement('timeline-panel', (templateText) =>
class TimelinePanel extends V8CustomElement { class TimelinePanel extends V8CustomElement {
#timeSelection = { start: 0, end: Infinity };
constructor() { constructor() {
super(templateText); super(templateText);
this.timelineOverview.addEventListener(
'mousemove', e => this.handleTimelineIndicatorMove(e));
this.addEventListener( this.addEventListener(
'scrolltrack', e => this.handleTrackScroll(e)); 'scrolltrack', e => this.handleTrackScroll(e));
this.addEventListener( this.addEventListener(
SynchronizeSelectionEvent.name, e => this.handleMouseMoveSelection(e)); 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) { set nofChunks(count) {
for (const track of this.timelineTracks) { for (const track of this.timelineTracks) {
track.nofChunks = count; track.nofChunks = count;
} }
} }
get nofChunks() { get nofChunks() {
return this.timelineTracks[0].nofChunks; return this.timelineTracks[0].nofChunks;
} }
get timelineTracks() { get timelineTracks() {
return this.$("slot").assignedNodes().filter( return this.$("slot").assignedNodes().filter(
track => track.nodeType === Node.ELEMENT_NODE); node => node.nodeType === Node.ELEMENT_NODE);
} }
handleTrackScroll(event) { handleTrackScroll(event) {
//TODO(zcankara) add forEachTrack helper method //TODO(zcankara) add forEachTrack helper method
for (const track of this.timelineTracks) { for (const track of this.timelineTracks) {
...@@ -57,37 +39,13 @@ defineCustomElement('timeline-panel', (templateText) => ...@@ -57,37 +39,13 @@ defineCustomElement('timeline-panel', (templateText) =>
} }
handleMouseMoveSelection(event) { 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) { for (const track of this.timelineTracks) {
track.startTime = start; track.startTime = start;
track.endTime = end; 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';
}
}); });
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment