11cb0ef41Sopenharmony_ci<!-- Copyright 2020 the V8 project authors. All rights reserved.
21cb0ef41Sopenharmony_ciUse of this source code is governed by a BSD-style license that can be
31cb0ef41Sopenharmony_cifound in the LICENSE file. -->
41cb0ef41Sopenharmony_ci
51cb0ef41Sopenharmony_ci<head>
61cb0ef41Sopenharmony_ci  <link href="./index.css" rel="stylesheet">
71cb0ef41Sopenharmony_ci</head>
81cb0ef41Sopenharmony_ci<style>
91cb0ef41Sopenharmony_ci  :host {
101cb0ef41Sopenharmony_ci    --view-height: 200px;
111cb0ef41Sopenharmony_ci    --data-height: 200px;
121cb0ef41Sopenharmony_ci    --text-scale: scale(1, 1);
131cb0ef41Sopenharmony_ci  }
141cb0ef41Sopenharmony_ci
151cb0ef41Sopenharmony_ci  #timeline {
161cb0ef41Sopenharmony_ci    position: relative;
171cb0ef41Sopenharmony_ci    height: calc(var(--view-height) + 12px);
181cb0ef41Sopenharmony_ci    overflow-y: hidden;
191cb0ef41Sopenharmony_ci    overflow-x: scroll;
201cb0ef41Sopenharmony_ci    user-select: none;
211cb0ef41Sopenharmony_ci  }
221cb0ef41Sopenharmony_ci
231cb0ef41Sopenharmony_ci  .dataSized {
241cb0ef41Sopenharmony_ci    min-height: var(--data-height);
251cb0ef41Sopenharmony_ci  }
261cb0ef41Sopenharmony_ci
271cb0ef41Sopenharmony_ci  #timelineSamples, #timelineChunks,
281cb0ef41Sopenharmony_ci  #timelineMarkers, #timelineAnnotations, #hitPanel {
291cb0ef41Sopenharmony_ci    top: 0px;
301cb0ef41Sopenharmony_ci    position: absolute;
311cb0ef41Sopenharmony_ci    margin-right: 100px;
321cb0ef41Sopenharmony_ci  }
331cb0ef41Sopenharmony_ci  #timelineMarkers, #timelineAnnotations,
341cb0ef41Sopenharmony_ci  .noPointerEvents, .noPointerEvents * {
351cb0ef41Sopenharmony_ci    pointer-events: none;
361cb0ef41Sopenharmony_ci  }
371cb0ef41Sopenharmony_ci
381cb0ef41Sopenharmony_ci  #toolTipTarget {
391cb0ef41Sopenharmony_ci    position: absolute;
401cb0ef41Sopenharmony_ci  }
411cb0ef41Sopenharmony_ci
421cb0ef41Sopenharmony_ci  .title {
431cb0ef41Sopenharmony_ci    position: relative;
441cb0ef41Sopenharmony_ci    float: left;
451cb0ef41Sopenharmony_ci    width: 20px;
461cb0ef41Sopenharmony_ci    writing-mode: vertical-rl;
471cb0ef41Sopenharmony_ci    text-orientation: mixed;
481cb0ef41Sopenharmony_ci    margin: 20px 0 0 -10px;
491cb0ef41Sopenharmony_ci    padding: 5px 5px 0px 5px;
501cb0ef41Sopenharmony_ci    overflow: hidden;
511cb0ef41Sopenharmony_ci    border-radius: 7px;
521cb0ef41Sopenharmony_ci    font-weight: 400;
531cb0ef41Sopenharmony_ci  }
541cb0ef41Sopenharmony_ci
551cb0ef41Sopenharmony_ci  .panelCloserInput:checked ~ h3 {
561cb0ef41Sopenharmony_ci    display: inherit;
571cb0ef41Sopenharmony_ci    flex: 1;
581cb0ef41Sopenharmony_ci    writing-mode: unset;
591cb0ef41Sopenharmony_ci    text-orientation: unset;
601cb0ef41Sopenharmony_ci    background-color: var(--border-color);
611cb0ef41Sopenharmony_ci    border-radius: 0px;
621cb0ef41Sopenharmony_ci    padding: 5px;
631cb0ef41Sopenharmony_ci    margin: 0 -10px 0 20px;
641cb0ef41Sopenharmony_ci  }
651cb0ef41Sopenharmony_ci
661cb0ef41Sopenharmony_ci  .timelineLegend {
671cb0ef41Sopenharmony_ci    position: relative;
681cb0ef41Sopenharmony_ci    float: right;
691cb0ef41Sopenharmony_ci    height: calc(var(--view-height) + 12px);
701cb0ef41Sopenharmony_ci    overflow-y: scroll;
711cb0ef41Sopenharmony_ci    margin-right: -10px;
721cb0ef41Sopenharmony_ci    padding: 0 2px 0 2px;
731cb0ef41Sopenharmony_ci    width: 400px;
741cb0ef41Sopenharmony_ci    border-left: 1px solid var(--border-color);
751cb0ef41Sopenharmony_ci  }
761cb0ef41Sopenharmony_ci
771cb0ef41Sopenharmony_ci  #legendTable {
781cb0ef41Sopenharmony_ci    width: 100%;
791cb0ef41Sopenharmony_ci    border-collapse: collapse;
801cb0ef41Sopenharmony_ci  }
811cb0ef41Sopenharmony_ci
821cb0ef41Sopenharmony_ci  thead {
831cb0ef41Sopenharmony_ci    border-top: 1px solid var(--border-color);
841cb0ef41Sopenharmony_ci    border-bottom: 1px solid var(--border-color);
851cb0ef41Sopenharmony_ci  }
861cb0ef41Sopenharmony_ci
871cb0ef41Sopenharmony_ci  th,
881cb0ef41Sopenharmony_ci  td {
891cb0ef41Sopenharmony_ci    padding: 1px 3px 2px 3px;
901cb0ef41Sopenharmony_ci  }
911cb0ef41Sopenharmony_ci
921cb0ef41Sopenharmony_ci  #legendTable td {
931cb0ef41Sopenharmony_ci    padding-top: 3px;
941cb0ef41Sopenharmony_ci    text-align: right;
951cb0ef41Sopenharmony_ci  }
961cb0ef41Sopenharmony_ci  /* Center colors */
971cb0ef41Sopenharmony_ci  #legendTable .color {
981cb0ef41Sopenharmony_ci    text-align: center;
991cb0ef41Sopenharmony_ci  }
1001cb0ef41Sopenharmony_ci  /* Left align text*/
1011cb0ef41Sopenharmony_ci  #legendTable .text {
1021cb0ef41Sopenharmony_ci    text-align: left;
1031cb0ef41Sopenharmony_ci    width: 100%;
1041cb0ef41Sopenharmony_ci    max-width: 200px;
1051cb0ef41Sopenharmony_ci    overflow: hidden;
1061cb0ef41Sopenharmony_ci    text-overflow: ellipsis;
1071cb0ef41Sopenharmony_ci  }
1081cb0ef41Sopenharmony_ci
1091cb0ef41Sopenharmony_ci  .timeline {
1101cb0ef41Sopenharmony_ci    background-color: var(--timeline-background-color);
1111cb0ef41Sopenharmony_ci  }
1121cb0ef41Sopenharmony_ci
1131cb0ef41Sopenharmony_ci  #selection {
1141cb0ef41Sopenharmony_ci    display: none;
1151cb0ef41Sopenharmony_ci    top: 0px;
1161cb0ef41Sopenharmony_ci    left: 0px;
1171cb0ef41Sopenharmony_ci    position: absolute;
1181cb0ef41Sopenharmony_ci  }
1191cb0ef41Sopenharmony_ci
1201cb0ef41Sopenharmony_ci  #rightHandle,
1211cb0ef41Sopenharmony_ci  #leftHandle {
1221cb0ef41Sopenharmony_ci    background-color: rgba(200, 200, 200, 0.5);
1231cb0ef41Sopenharmony_ci    height: 100%;
1241cb0ef41Sopenharmony_ci    width: 5px;
1251cb0ef41Sopenharmony_ci    position: absolute;
1261cb0ef41Sopenharmony_ci    z-index: 3;
1271cb0ef41Sopenharmony_ci    cursor: col-resize;
1281cb0ef41Sopenharmony_ci  }
1291cb0ef41Sopenharmony_ci  #leftHandle {
1301cb0ef41Sopenharmony_ci    border-left: 1px solid var(--on-surface-color);
1311cb0ef41Sopenharmony_ci  }
1321cb0ef41Sopenharmony_ci  #rightHandle {
1331cb0ef41Sopenharmony_ci    border-right: 1px solid var(--on-surface-color);
1341cb0ef41Sopenharmony_ci    margin-left: -5px;
1351cb0ef41Sopenharmony_ci  }
1361cb0ef41Sopenharmony_ci  #selectionForeground{
1371cb0ef41Sopenharmony_ci    z-index: 2;
1381cb0ef41Sopenharmony_ci    cursor: grab;
1391cb0ef41Sopenharmony_ci    height: 100%;
1401cb0ef41Sopenharmony_ci    position: absolute;
1411cb0ef41Sopenharmony_ci  }
1421cb0ef41Sopenharmony_ci  #selectionForeground:active {
1431cb0ef41Sopenharmony_ci    cursor: grabbing;
1441cb0ef41Sopenharmony_ci  }
1451cb0ef41Sopenharmony_ci  #selectionBackground {
1461cb0ef41Sopenharmony_ci    background-color: rgba(133, 68, 163, 0.5);
1471cb0ef41Sopenharmony_ci    height: 100%;
1481cb0ef41Sopenharmony_ci    position: absolute;
1491cb0ef41Sopenharmony_ci  }
1501cb0ef41Sopenharmony_ci
1511cb0ef41Sopenharmony_ci  .content {
1521cb0ef41Sopenharmony_ci    display: flex;
1531cb0ef41Sopenharmony_ci    position: relative;
1541cb0ef41Sopenharmony_ci  }
1551cb0ef41Sopenharmony_ci  .panelCloserLabel {
1561cb0ef41Sopenharmony_ci    position: absolute;
1571cb0ef41Sopenharmony_ci    top: 5px;
1581cb0ef41Sopenharmony_ci    left: 0px;
1591cb0ef41Sopenharmony_ci  }
1601cb0ef41Sopenharmony_ci  .title {
1611cb0ef41Sopenharmony_ci    flex: initial;
1621cb0ef41Sopenharmony_ci  }
1631cb0ef41Sopenharmony_ci  #timeline {
1641cb0ef41Sopenharmony_ci    flex: 1;
1651cb0ef41Sopenharmony_ci  }
1661cb0ef41Sopenharmony_ci  .legend {
1671cb0ef41Sopenharmony_ci    flex: initial;
1681cb0ef41Sopenharmony_ci  }
1691cb0ef41Sopenharmony_ci  .colorbox.empty {
1701cb0ef41Sopenharmony_ci    opacity: 0.5;
1711cb0ef41Sopenharmony_ci  }
1721cb0ef41Sopenharmony_ci</style>
1731cb0ef41Sopenharmony_ci<style>
1741cb0ef41Sopenharmony_ci  /* SVG styles */
1751cb0ef41Sopenharmony_ci  .txt {
1761cb0ef41Sopenharmony_ci    font: 8px var(--code-font);
1771cb0ef41Sopenharmony_ci    transform: var(--txt-scale);
1781cb0ef41Sopenharmony_ci  }
1791cb0ef41Sopenharmony_ci  .annotationLabel {
1801cb0ef41Sopenharmony_ci    fill: var(--on-surface-color);
1811cb0ef41Sopenharmony_ci    font-size: 9px;
1821cb0ef41Sopenharmony_ci  }
1831cb0ef41Sopenharmony_ci  .annotationPoint {
1841cb0ef41Sopenharmony_ci    fill: var(--on-background-color);
1851cb0ef41Sopenharmony_ci    stroke-width: 1;
1861cb0ef41Sopenharmony_ci  }
1871cb0ef41Sopenharmony_ci  .strokeBG {
1881cb0ef41Sopenharmony_ci    stroke: var(--on-background-color);
1891cb0ef41Sopenharmony_ci    stroke-width: 2;
1901cb0ef41Sopenharmony_ci    fill: none;
1911cb0ef41Sopenharmony_ci  }
1921cb0ef41Sopenharmony_ci  .markerLine {
1931cb0ef41Sopenharmony_ci    stroke: var(--on-background-color);
1941cb0ef41Sopenharmony_ci    stroke-dasharray: 2 2;
1951cb0ef41Sopenharmony_ci  }
1961cb0ef41Sopenharmony_ci  .markerText {
1971cb0ef41Sopenharmony_ci    fill: var(--on-surface-color);
1981cb0ef41Sopenharmony_ci    dominant-baseline: hanging;
1991cb0ef41Sopenharmony_ci    font-size: 9px;
2001cb0ef41Sopenharmony_ci  }
2011cb0ef41Sopenharmony_ci  .flame, .f {
2021cb0ef41Sopenharmony_ci    stroke-width: 0;
2031cb0ef41Sopenharmony_ci  }
2041cb0ef41Sopenharmony_ci  .flameSelected, .fs {
2051cb0ef41Sopenharmony_ci    fill: var(--on-background-color);
2061cb0ef41Sopenharmony_ci    fill-opacity: 0.1;
2071cb0ef41Sopenharmony_ci    stroke: var(--on-background-color);
2081cb0ef41Sopenharmony_ci    stroke-opacity: 0.8;
2091cb0ef41Sopenharmony_ci    stroke-width: 1;
2101cb0ef41Sopenharmony_ci    vector-effect: non-scaling-stroke;
2111cb0ef41Sopenharmony_ci  }
2121cb0ef41Sopenharmony_ci  svg {
2131cb0ef41Sopenharmony_ci    shape-rendering: optimizeSpeed;
2141cb0ef41Sopenharmony_ci  }
2151cb0ef41Sopenharmony_ci</style>
2161cb0ef41Sopenharmony_ci
2171cb0ef41Sopenharmony_ci<div class="content">
2181cb0ef41Sopenharmony_ci  <input type="checkbox" id="closer" class="panelCloserInput">
2191cb0ef41Sopenharmony_ci  <label class="panelCloserLabel" for="closer">▼</label>
2201cb0ef41Sopenharmony_ci  <h3 class="title" id="title"></h3>
2211cb0ef41Sopenharmony_ci
2221cb0ef41Sopenharmony_ci  <div id="timeline">
2231cb0ef41Sopenharmony_ci    <div id="selection" class="dataSized">
2241cb0ef41Sopenharmony_ci      <div id="leftHandle"></div>
2251cb0ef41Sopenharmony_ci      <div id="selectionForeground"></div>
2261cb0ef41Sopenharmony_ci      <div id="selectionBackground"></div>
2271cb0ef41Sopenharmony_ci      <div id="rightHandle"></div>
2281cb0ef41Sopenharmony_ci    </div>
2291cb0ef41Sopenharmony_ci    <svg id="timelineChunks" xmlns="http://www.w3.org/2000/svg" class="dataSized">
2301cb0ef41Sopenharmony_ci      <g id="scalableContent"></g>
2311cb0ef41Sopenharmony_ci    </svg>
2321cb0ef41Sopenharmony_ci    <svg id="timelineAnnotations" xmlns="http://www.w3.org/2000/svg" class="dataSized noPointerEvents"></svg>
2331cb0ef41Sopenharmony_ci    <svg id="timelineMarkers" xmlns="http://www.w3.org/2000/svg" class="dataSized noPointerEvents"></svg>
2341cb0ef41Sopenharmony_ci    <div id="toolTipTarget"></div>
2351cb0ef41Sopenharmony_ci    <!-- Use a div element covering all complex items to prevent slow hit test-->
2361cb0ef41Sopenharmony_ci    <div id="hitPanel" class="dataSized"></div>
2371cb0ef41Sopenharmony_ci  </div>
2381cb0ef41Sopenharmony_ci
2391cb0ef41Sopenharmony_ci  <div class="timelineLegend">
2401cb0ef41Sopenharmony_ci    <table id="legendTable">
2411cb0ef41Sopenharmony_ci      <thead>
2421cb0ef41Sopenharmony_ci        <tr>
2431cb0ef41Sopenharmony_ci          <td></td>
2441cb0ef41Sopenharmony_ci          <td class="text">Type</td>
2451cb0ef41Sopenharmony_ci          <td>Count</td>
2461cb0ef41Sopenharmony_ci          <td></td>
2471cb0ef41Sopenharmony_ci        </tr>
2481cb0ef41Sopenharmony_ci      </thead>
2491cb0ef41Sopenharmony_ci      <tbody></tbody>
2501cb0ef41Sopenharmony_ci    </table>
2511cb0ef41Sopenharmony_ci  </div>
2521cb0ef41Sopenharmony_ci</div>
253