v8/tools/zone-stats/index.html
Camillo Bruni d121e8eee0 [tools] Add placeholder comment for analytics code
Drive-by-fix: Clean up html header tags a bit

Change-Id: Ib9d3e0a24497f393b1d45b7b6ab46af381252613
No-Try: True
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/3845076
Reviewed-by: Camillo Bruni <cbruni@chromium.org>
Reviewed-by: Victor Gomes <victorgomes@chromium.org>
Commit-Queue: Camillo Bruni <cbruni@chromium.org>
Cr-Commit-Position: refs/heads/main@{#82620}
2022-08-22 12:41:18 +00:00

94 lines
2.8 KiB
HTML

<!DOCTYPE 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. -->
<html lang="en">
<head>
<!-- This will be overwritten by the v8.dev/tools exporter -->
<!-- ANALYTICS_PLACEHOLDER -->
<meta charset="UTF-8">
<title>V8 Zone Statistics</title>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<script
src="https://www.gstatic.com/charts/loader.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.6/pako_inflate.js"
integrity1="sha256-N1z6ddQzX83fjw8v7uSNe7/MgOmMKdwFUv1+AJMDqNM="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/oboe.js/2.1.5/oboe-browser.js"
crossorigin="anonymous"></script>
<script src="helper.js"></script>
<script type="module" src="details-selection.js"></script>
<script type="module" src="global-timeline.js"></script>
<script type="module" src="trace-file-reader.js"></script>
<style>
body {
font-family: 'Roboto', sans-serif;
margin-left: 5%;
margin-right: 5%;
}
</style>
<script>
'use strict';
google.charts.load('current', {'packages':['line', 'corechart', 'bar']});
function $(id) { return document.querySelector(id); }
function removeAllChildren(node) {
while (node.firstChild) {
node.removeChild(node.firstChild);
}
}
let state = Object.create(null);
function globalDataChanged(e) {
state.data = e.detail;
// Emit one entry with the whole model for debugging purposes.
console.log(state.data);
state.selection = null;
$('#global-timeline').selection = state.selection;
$('#global-timeline').data = state.data;
$('#details-selection').data = state.data;
}
function globalSelectionChangedA(e) {
state.selection = e.detail;
console.log(state.selection);
$('#global-timeline').selection = state.selection;
}
</script>
</head>
<body>
<h1>V8 Zone memory usage statistics</h1>
<trace-file-reader onchange="globalDataChanged(event)"></trace-file-reader>
<details-selection id="details-selection" onchange="globalSelectionChangedA(event)"></details-selection>
<global-timeline id="global-timeline"></global-timeline>
<p>Visualize zone usage profile and statistics that have been gathered using</p>
<ul>
<li><code>--trace-zone-stats</code> on V8</li>
<li>
<a
href="https://www.chromium.org/developers/how-tos/trace-event-profiling-tool">Chrome's
tracing infrastructure</a> collecting data for the category
<code>v8.zone_stats</code>.
</li>
</ul>
<p>
Note that the visualizer needs to run on a web server due to HTML imports
requiring <a
href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>.
</p>
</body>
</html>