1<!-- Copyright 2020 the V8 project authors. All rights reserved.
2Use of this source code is governed by a BSD-style license that can be
3found in the LICENSE file. -->
4
5<head>
6  <link href="./index.css" rel="stylesheet">
7</head>
8<style>
9  :host {
10    --view-height: 200px;
11    --data-height: 200px;
12    --text-scale: scale(1, 1);
13  }
14
15  #timeline {
16    position: relative;
17    height: calc(var(--view-height) + 12px);
18    overflow-y: hidden;
19    overflow-x: scroll;
20    user-select: none;
21  }
22
23  .dataSized {
24    min-height: var(--data-height);
25  }
26
27  #timelineSamples, #timelineChunks,
28  #timelineMarkers, #timelineAnnotations, #hitPanel {
29    top: 0px;
30    position: absolute;
31    margin-right: 100px;
32  }
33  #timelineMarkers, #timelineAnnotations,
34  .noPointerEvents, .noPointerEvents * {
35    pointer-events: none;
36  }
37
38  #toolTipTarget {
39    position: absolute;
40  }
41
42  .title {
43    position: relative;
44    float: left;
45    width: 20px;
46    writing-mode: vertical-rl;
47    text-orientation: mixed;
48    margin: 20px 0 0 -10px;
49    padding: 5px 5px 0px 5px;
50    overflow: hidden;
51    border-radius: 7px;
52    font-weight: 400;
53  }
54
55  .panelCloserInput:checked ~ h3 {
56    display: inherit;
57    flex: 1;
58    writing-mode: unset;
59    text-orientation: unset;
60    background-color: var(--border-color);
61    border-radius: 0px;
62    padding: 5px;
63    margin: 0 -10px 0 20px;
64  }
65
66  .timelineLegend {
67    position: relative;
68    float: right;
69    height: calc(var(--view-height) + 12px);
70    overflow-y: scroll;
71    margin-right: -10px;
72    padding: 0 2px 0 2px;
73    width: 400px;
74    border-left: 1px solid var(--border-color);
75  }
76
77  #legendTable {
78    width: 100%;
79    border-collapse: collapse;
80  }
81
82  thead {
83    border-top: 1px solid var(--border-color);
84    border-bottom: 1px solid var(--border-color);
85  }
86
87  th,
88  td {
89    padding: 1px 3px 2px 3px;
90  }
91
92  #legendTable td {
93    padding-top: 3px;
94    text-align: right;
95  }
96  /* Center colors */
97  #legendTable .color {
98    text-align: center;
99  }
100  /* Left align text*/
101  #legendTable .text {
102    text-align: left;
103    width: 100%;
104    max-width: 200px;
105    overflow: hidden;
106    text-overflow: ellipsis;
107  }
108
109  .timeline {
110    background-color: var(--timeline-background-color);
111  }
112
113  #selection {
114    display: none;
115    top: 0px;
116    left: 0px;
117    position: absolute;
118  }
119
120  #rightHandle,
121  #leftHandle {
122    background-color: rgba(200, 200, 200, 0.5);
123    height: 100%;
124    width: 5px;
125    position: absolute;
126    z-index: 3;
127    cursor: col-resize;
128  }
129  #leftHandle {
130    border-left: 1px solid var(--on-surface-color);
131  }
132  #rightHandle {
133    border-right: 1px solid var(--on-surface-color);
134    margin-left: -5px;
135  }
136  #selectionForeground{
137    z-index: 2;
138    cursor: grab;
139    height: 100%;
140    position: absolute;
141  }
142  #selectionForeground:active {
143    cursor: grabbing;
144  }
145  #selectionBackground {
146    background-color: rgba(133, 68, 163, 0.5);
147    height: 100%;
148    position: absolute;
149  }
150
151  .content {
152    display: flex;
153    position: relative;
154  }
155  .panelCloserLabel {
156    position: absolute;
157    top: 5px;
158    left: 0px;
159  }
160  .title {
161    flex: initial;
162  }
163  #timeline {
164    flex: 1;
165  }
166  .legend {
167    flex: initial;
168  }
169  .colorbox.empty {
170    opacity: 0.5;
171  }
172</style>
173<style>
174  /* SVG styles */
175  .txt {
176    font: 8px var(--code-font);
177    transform: var(--txt-scale);
178  }
179  .annotationLabel {
180    fill: var(--on-surface-color);
181    font-size: 9px;
182  }
183  .annotationPoint {
184    fill: var(--on-background-color);
185    stroke-width: 1;
186  }
187  .strokeBG {
188    stroke: var(--on-background-color);
189    stroke-width: 2;
190    fill: none;
191  }
192  .markerLine {
193    stroke: var(--on-background-color);
194    stroke-dasharray: 2 2;
195  }
196  .markerText {
197    fill: var(--on-surface-color);
198    dominant-baseline: hanging;
199    font-size: 9px;
200  }
201  .flame, .f {
202    stroke-width: 0;
203  }
204  .flameSelected, .fs {
205    fill: var(--on-background-color);
206    fill-opacity: 0.1;
207    stroke: var(--on-background-color);
208    stroke-opacity: 0.8;
209    stroke-width: 1;
210    vector-effect: non-scaling-stroke;
211  }
212  svg {
213    shape-rendering: optimizeSpeed;
214  }
215</style>
216
217<div class="content">
218  <input type="checkbox" id="closer" class="panelCloserInput">
219  <label class="panelCloserLabel" for="closer">▼</label>
220  <h3 class="title" id="title"></h3>
221
222  <div id="timeline">
223    <div id="selection" class="dataSized">
224      <div id="leftHandle"></div>
225      <div id="selectionForeground"></div>
226      <div id="selectionBackground"></div>
227      <div id="rightHandle"></div>
228    </div>
229    <svg id="timelineChunks" xmlns="http://www.w3.org/2000/svg" class="dataSized">
230      <g id="scalableContent"></g>
231    </svg>
232    <svg id="timelineAnnotations" xmlns="http://www.w3.org/2000/svg" class="dataSized noPointerEvents"></svg>
233    <svg id="timelineMarkers" xmlns="http://www.w3.org/2000/svg" class="dataSized noPointerEvents"></svg>
234    <div id="toolTipTarget"></div>
235    <!-- Use a div element covering all complex items to prevent slow hit test-->
236    <div id="hitPanel" class="dataSized"></div>
237  </div>
238
239  <div class="timelineLegend">
240    <table id="legendTable">
241      <thead>
242        <tr>
243          <td></td>
244          <td class="text">Type</td>
245          <td>Count</td>
246          <td></td>
247        </tr>
248      </thead>
249      <tbody></tbody>
250    </table>
251  </div>
252</div>
253