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>
  h2 {
  background-color: #BB86FC;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  color: black;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
.timeline-panel {
    background-color: #232323;
    padding: 20px 20px  20px 20px ;
    margin: auto;
}
#timeline-panel {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    background-color: #121212;
    padding: 10px 10px  10px 10px ;
    margin: auto;
}
#timeline {
  position: relative;
  height: 300px;
  overflow-y: hidden;
  overflow-x: scroll;
  user-select: none;
  background-color: whitesmoke;
}
#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 white 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 black 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 black solid;
  border-width: 1px 0 1px 0;
  overflow: hidden;
}
#timelineOverviewIndicator {
  height: 100%;
  position: absolute;
  box-shadow: 0px 2px 20px -5px black 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="timeline-panel">
  <section id="timeline-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>
  </section>
</div>