ff4833f14c
This CL creates a timeline track component to make the timeline view extensible as different data sources added. The timeline track component will take data source and display it with respect to time axis of timeline overview. Bug: v8:10644, v8:10735 Change-Id: I1c88dd2dc967be68e6235e517dcf8554a891eee4 Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2302053 Commit-Queue: Zeynep Cankara <zcankara@google.com> Reviewed-by: Camillo Bruni <cbruni@chromium.org> Cr-Commit-Position: refs/heads/master@{#69102}
78 lines
1.7 KiB
HTML
78 lines
1.7 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>
|
|
#timeline {
|
|
position: relative;
|
|
height: 300px;
|
|
overflow-y: hidden;
|
|
overflow-x: scroll;
|
|
user-select: none;
|
|
background-color: var(--timeline-background-color);
|
|
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
|
|
}
|
|
#timelineLabel {
|
|
transform: rotate(90deg);
|
|
transform-origin: left bottom 0;
|
|
position: absolute;
|
|
left: 0;
|
|
width: 250px;
|
|
text-align: center;
|
|
font-size: 10px;
|
|
opacity: 0.5;
|
|
}
|
|
#timelineChunks {
|
|
height: 250px;
|
|
position: absolute;
|
|
margin-right: 100px;
|
|
}
|
|
#timelineCanvas {
|
|
height: 250px;
|
|
position: relative;
|
|
overflow: visible;
|
|
pointer-events: none;
|
|
}
|
|
.chunk {
|
|
width: 6px;
|
|
border: 0px var(--timeline-background-color) solid;
|
|
border-width: 0 2px 0 2px;
|
|
position: absolute;
|
|
background-size: 100% 100%;
|
|
image-rendering: pixelated;
|
|
bottom: 0px;
|
|
}
|
|
.timestamp {
|
|
height: 250px;
|
|
width: 100px;
|
|
border-left: 1px var(--surface-color) dashed;
|
|
padding-left: 4px;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
font-size: 10px;
|
|
opacity: 0.5;
|
|
}
|
|
#timelineLegend {
|
|
position: relative;
|
|
float: right;
|
|
text-align: center;
|
|
}
|
|
.timeline {
|
|
background-color: var(--timeline-background-color);
|
|
}
|
|
</style>
|
|
<div class="timeline">
|
|
<div id="timelineLegend">
|
|
<p>Category</p>
|
|
<dl id="timelineLegendContent" style="float:right; padding:20px">
|
|
</dl>
|
|
</div>
|
|
<div id="timeline">
|
|
<div id="timelineLabel">Frequency</div>
|
|
<div id="timelineChunks"></div>
|
|
<canvas id="timelineCanvas"></canvas>
|
|
</div>
|
|
</div> |