v8/tools/system-analyzer/timeline-panel-template.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. -->

<style>
@import "./index.css";
#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;
}
#timelineOverview {
  width: 100%;
  height: 50px;
  position: relative;
  margin-top: -50px;
  margin-bottom: 10px;
  background-size: 100% 100%;
  border: 1px var(--surface-color) solid;
  border-width: 1px 0 1px 0;
  overflow: hidden;
}
#timelineOverviewIndicator {
  height: 100%;
  position: absolute;
  box-shadow: 0px 2px 20px -5px var(--surface-color) inset;
  top: 0px;
  cursor: ew-resize;
}
#timelineOverviewIndicator .leftMask,
#timelineOverviewIndicator .rightMask {
  background-color: rgba(200, 200, 200, 0.5);
  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 id="timeline">
    <div id="timelineLabel">Frequency</div>
    <div id="timelineChunks"></div>
    <canvas id="timelineCanvas"></canvas>
  </div>
  <div id="timelineOverview">
    <div id="timelineOverviewIndicator">
      <div class="leftMask"></div>
      <div class="rightMask"></div>
    </div>
  </div>
</div>