blob: 924abadda87dea995bc97c298ec35a64303a1080 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>zen trace viewer</title>
<link rel="stylesheet" href="trace.css">
</head>
<body>
<noscript>This viewer requires JavaScript.</noscript>
<div class="header">
<nav class="tabs">
<button class="tab active" data-tab="timeline">Timeline</button>
<button class="tab" data-tab="stats">Stats</button>
<button class="tab" data-tab="memory">Memory</button>
<button class="tab" data-tab="logs">Logs</button>
<button class="tab" data-tab="csv">CSV</button>
<button class="tab" data-tab="counters">Counters</button>
<button class="tab" data-tab="session">Session</button>
</nav>
<div class="header-title">zen trace viewer</div>
<div class="header-file" id="hdr-file"></div>
<div class="header-stats" id="hdr-stats"></div>
<button id="theme-toggle" class="header-btn" type="button" title="Toggle dark/light mode">Theme</button>
</div>
<div class="layout">
<aside class="sidebar">
<div class="sidebar-section">
<div class="sidebar-label">Search scopes</div>
<input id="search-input" type="text" placeholder="filter scopes..." autocomplete="off" spellcheck="false">
<div id="search-results" class="search-results"></div>
</div>
<div class="sidebar-section" id="regions-panel" hidden>
<div class="sidebar-label">Regions <button id="regions-toggle-all" class="sidebar-action">deselect all</button></div>
<div id="regions-list" class="regions-list"></div>
</div>
<div class="sidebar-section" id="threads-panel">
<div class="sidebar-label">Threads <button id="threads-toggle-all" class="sidebar-action">deselect all</button></div>
<div id="threads-list" class="threads-list"></div>
</div>
</aside>
<main class="content">
<section class="view view-timeline" data-view="timeline">
<div class="timeline-toolbar">
<div id="viewport-info" class="viewport-info"></div>
<label class="toolbar-toggle" title="Show or hide bookmark markers">
<input type="checkbox" id="bookmarks-toggle" checked>
<span>Bookmarks</span>
</label>
<label class="toolbar-toggle" title="Disable LOD to always fetch full-resolution scopes (slower but useful for validating LOD correctness)">
<input type="checkbox" id="lod-toggle" checked>
<span>LOD</span>
</label>
<label class="toolbar-toggle" title="Compact rows: thinner swimlanes, hides in-bar labels (shortcut: c)">
<input type="checkbox" id="compact-toggle">
<span>Compact</span>
</label>
<button id="zoom-reset" class="btn">Reset view</button>
</div>
<div class="timeline-frame">
<canvas id="timeline-canvas"></canvas>
<div id="tooltip" class="tooltip" hidden></div>
</div>
<div id="selection-panel" class="selection-panel">
<div class="selection-hint">Click a scope to see details. Drag to pan, wheel to zoom.</div>
</div>
</section>
<section class="view view-stats" data-view="stats" hidden>
<table class="stats-table">
<thead>
<tr>
<th data-sort="name">Scope</th>
<th data-sort="count" class="num">Count</th>
<th data-sort="min_us" class="num">Min (ms)</th>
<th data-sort="mean_us" class="num">Mean (ms)</th>
<th data-sort="max_us" class="num">Max (ms)</th>
<th data-sort="stdev_us" class="num">σ (ms)</th>
</tr>
</thead>
<tbody id="stats-tbody"></tbody>
</table>
</section>
<section class="view view-memory" data-view="memory" hidden>
<div id="memory-content"></div>
</section>
<section class="view view-logs" data-view="logs" hidden>
<div id="logs-content"></div>
</section>
<section class="view view-csv" data-view="csv" hidden>
<div id="csv-content"></div>
</section>
<section class="view view-counters" data-view="counters" hidden>
<div id="counters-content"></div>
</section>
<section class="view view-session" data-view="session" hidden>
<div id="session-content" class="session-content"></div>
</section>
</main>
</div>
<div id="loading" class="loading">Loading trace…</div>
<script type="module" src="trace.js"></script>
</body>
</html>
|