v8/tools/system-analyzer/timeline-panel-template.html
Zeynep Cankara b67c3f5386 [tools][system-analyzer] TimelineOverviewIndicator bug fix
This CL deletes the image on the timeline overview which
only reflects the last uploaded timeline-track data
and updates the timelineOverviewIndicator on mousemove and
chunk zoom events.

Bug: v8:10644

Change-Id: Ib0a43083d2461cc343a0c946cfddaf4fdc514687
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2413257
Reviewed-by: Camillo Bruni <cbruni@chromium.org>
Commit-Queue: Zeynep Cankara <zcankara@google.com>
Cr-Commit-Position: refs/heads/master@{#69936}
2020-09-16 10:04:09 +00:00

59 lines
1.3 KiB
HTML

<!-- 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. -->
<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>
<h3>Timeline</h3>
<div>
<slot></slot>
</div>
<div id="timelineOverview">
<div id="timelineOverviewIndicator">
<div class="leftMask"></div>
<div class="rightMask"></div>
</div>
</div>
</div>