| <!-- 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: calc(200px + 12px); |
| overflow-y: hidden; |
| overflow-x: scroll; |
| user-select: none; |
| } |
| |
| #timelineLabel { |
| transform: rotate(90deg); |
| transform-origin: left bottom 0; |
| position: absolute; |
| left: 0; |
| width: 200px; |
| text-align: center; |
| font-size: 10px; |
| opacity: 0.5; |
| } |
| |
| #timelineChunks { |
| height: 200px; |
| position: absolute; |
| margin-right: 100px; |
| } |
| |
| #timelineCanvas { |
| height: 200px; |
| position: relative; |
| overflow: visible; |
| pointer-events: none; |
| } |
| |
| .chunk { |
| width: 6px; |
| position: absolute; |
| background-size: 100% 100%; |
| image-rendering: pixelated; |
| bottom: 0px; |
| background-color: var(--on-surface-color); |
| cursor: pointer; |
| } |
| .chunk:hover { |
| border-radius: 2px 2px 0 0; |
| margin: 0 0 -2px -2px; |
| border: 2px var(--primary-color) solid; |
| } |
| |
| .timestamp { |
| height: 200px; |
| width: 100px; |
| border-left: 1px var(--on-surface-color) dashed; |
| padding-left: 4px; |
| position: absolute; |
| pointer-events: none; |
| font-size: 10px; |
| } |
| |
| #legend { |
| position: relative; |
| float: right; |
| width: 100%; |
| max-width: 280px; |
| padding-left: 20px; |
| padding-top: 10px; |
| border-collapse: collapse; |
| } |
| |
| th, |
| td { |
| width: 200px; |
| text-align: left; |
| padding-bottom: 3px; |
| } |
| |
| /* right align numbers */ |
| #legend td:nth-of-type(4n+3), |
| #legend td:nth-of-type(4n+4) { |
| text-align: right; |
| } |
| |
| .legendTypeColumn { |
| width: 100%; |
| } |
| |
| .timeline { |
| background-color: var(--timeline-background-color); |
| } |
| |
| #timeline .rightHandle, |
| #timeline .leftHandle { |
| background-color: rgba(200, 200, 200, 0.5); |
| height: 100%; |
| width: 5px; |
| position: absolute; |
| z-index: 3; |
| cursor: col-resize; |
| } |
| #timeline .leftHandle { |
| border-left: 1px solid var(--on-surface-color); |
| } |
| #timeline .rightHandle { |
| border-right: 1px solid var(--on-surface-color); |
| } |
| |
| #timeline .selection { |
| background-color: rgba(133, 68, 163, 0.5); |
| height: 100%; |
| position: absolute; |
| } |
| </style> |
| <table id="legend" class="typeStatsTable"> |
| <thead> |
| <tr> |
| <td></td> |
| <td>Type</td> |
| <td>Count</td> |
| <td>Percent</td> |
| </tr> |
| </thead> |
| <tbody id="legendContent"> |
| </tbody> |
| </table> |
| <div id="timeline"> |
| <div class="leftHandle"></div> |
| <div class="selection"></div> |
| <div class="rightHandle"></div> |
| <div id="timelineLabel">Frequency</div> |
| <div id="timelineChunks"></div> |
| <canvas id="timelineCanvas"></canvas> |
| </div> |
