| Index: tools/trace/trace.html
|
| diff --git a/tools/trace/trace.html b/tools/trace/trace.html
|
| deleted file mode 100644
|
| index e14bbaef686f5c81e5076c5b60cb1ed28ba47eb7..0000000000000000000000000000000000000000
|
| --- a/tools/trace/trace.html
|
| +++ /dev/null
|
| @@ -1,287 +0,0 @@
|
| -<html>
|
| -<head>
|
| -<title>
|
| -Trace Events
|
| -</title>
|
| -<style>
|
| -body {
|
| - font-family: "Courier New";
|
| - font-size: 9pt;
|
| -}
|
| -
|
| -#header {
|
| - position: absolute;
|
| - top: 0px;
|
| - left: 0px;
|
| - border-bottom: 1px dashed black;
|
| - background-color: #F0F0F0;
|
| - z-index: 3;
|
| -}
|
| -
|
| -#outer {
|
| - position: relative;
|
| - height: 200px;
|
| -}
|
| -
|
| -#time_scale {
|
| - height: 15px;
|
| - width: 100%;
|
| -}
|
| -
|
| -#tooltip {
|
| - position: absolute;
|
| - background-color: #FFFFCC;
|
| - display: none;
|
| - font-family: "Courier New";
|
| - font-size: 9pt;
|
| - padding: 5px;
|
| - border: 1px solid #CCCC88;
|
| - z-index: 3;
|
| -}
|
| -
|
| -#legend {
|
| - position: fixed;
|
| - left: 10px;
|
| - bottom: 10px;
|
| - padding: 5px;
|
| - border: 1px solid silver;
|
| - z-index: 10;
|
| - background-color: #f0f0f0;
|
| -}
|
| -
|
| -h2 {
|
| - margin: 5px;
|
| -}
|
| -
|
| -#instructions {
|
| - position: absolute;
|
| - top:
|
| - float: right;
|
| - display: none;
|
| -}
|
| -
|
| -li.time_tick {
|
| - background-color: #FFFFCC;
|
| - height: 15px;
|
| -}
|
| -
|
| -li {
|
| - background: pink;
|
| - position: absolute;
|
| - height: 10px;
|
| - list-style: none;
|
| - margin: 0px;
|
| - padding: 0px;
|
| - z-index: 2;
|
| -}
|
| -
|
| -li:hover {
|
| - border: 1px solid red;
|
| -}
|
| -
|
| -.url {
|
| - background-color: green;
|
| -}
|
| -
|
| -.http {
|
| - background-color: blue;
|
| -}
|
| -
|
| -.socket {
|
| - background-color: black;
|
| -}
|
| -
|
| -.v8 {
|
| - background-color: orange;
|
| -}
|
| -
|
| -</style>
|
| -
|
| -<script src='trace_data.js'></script>
|
| -<script>
|
| -var scale = 100000;
|
| -var row_height = 15;
|
| -var trace_initial_time = 0;
|
| -var trace_threads = {};
|
| -var heartbeats = [];
|
| -var trace_total_time = 0;
|
| -
|
| -function process_raw_events() {
|
| - trace_initial_time = raw_trace_events[0].usec_begin;
|
| - var stack = [];
|
| - var e;
|
| - for (var i in raw_trace_events) {
|
| - e = raw_trace_events[i];
|
| - var trace_events = trace_threads["e.tid"];
|
| - if (!trace_events) {
|
| - trace_events = [];
|
| - trace_threads["e.tid"] = trace_events;
|
| - }
|
| - if (e.name.indexOf("heartbeat.") == 0) {
|
| - heartbeats.push(e);
|
| - } else if (e.type == "BEGIN") {
|
| - trace_events.push(e);
|
| - stack.unshift(e);
|
| - } else if (e.type == "END") {
|
| - for (var s in stack) {
|
| - var begin = stack[s];
|
| - if ((begin.id == e.id) && (begin.name == e.name) &&
|
| - (begin.pid == e.pid) && (begin.tid == e.tid)) {
|
| - begin.usec_end = e.usec_begin;
|
| - begin.duration = begin.usec_end - begin.usec_begin;
|
| - stack.splice(s, 1);
|
| - break;
|
| - }
|
| - }
|
| - } else if (e.type == "INSTANT") {
|
| - trace_events.push(e);
|
| - e.duration = 0;
|
| - }
|
| - }
|
| - if (e.usec_end)
|
| - trace_total_time = e.usec_end - trace_initial_time;
|
| - else
|
| - trace_total_time = e.usec_begin - trace_initial_time;
|
| -}
|
| -
|
| -function compute_scale() {
|
| - var outer = document.getElementById("outer");
|
| - scale = Math.floor(trace_total_time / (outer.offsetWidth - (row_height * 2)));
|
| -};
|
| -
|
| -function show_details(tid, i, event) {
|
| - var trace_events = trace_threads["e.tid"];
|
| - var inner = trace_events[i].name + " " +
|
| - trace_events[i].duration / 1000 + "ms<br />" +
|
| - trace_events[i].id + "<br />" +
|
| - trace_events[i].extra + "<br />";
|
| - var tooltip = document.getElementById("tooltip");
|
| - tooltip.innerHTML = inner;
|
| - if (window.event)
|
| - event = window.event;
|
| - tooltip.style.top = event.pageY + 3;
|
| - tooltip.style.left = event.pageX + 3;
|
| - tooltip.style.display = "block";
|
| -};
|
| -
|
| -function generate_time_scale() {
|
| - var view_size = window.clientWidth;
|
| - var body_size = document.body.scrollWidth;
|
| - var inner = "";
|
| -
|
| - var step_ms = Math.floor(scale / 10); // ms per 100px
|
| - var pow10 = Math.pow(10, Math.floor(Math.log(step_ms) / Math.log(10)));
|
| - var round = .5 * pow10;
|
| - step_ms = round * (Math.floor(step_ms / round)); // round to a multiple of round
|
| - for (var i = step_ms; i < trace_total_time / 1000; i += step_ms) {
|
| - var x = Math.floor(i * 1000 / scale);
|
| - inner += "<li class='time_tick' style='left: " + x + "px'>" + i + "</li>";
|
| - }
|
| - var time_scale = document.getElementById("time_scale");
|
| - time_scale.innerHTML = inner;
|
| - time_scale.style.width = document.body.scrollWidth;
|
| -}
|
| -
|
| -function generate_subchart(trace_events, top) {
|
| - var inner = "";
|
| - var last_max_time = 0;
|
| - var last_max_x = 0;
|
| - for (var i in trace_events) {
|
| - var e = trace_events[i];
|
| - var start_time = e.usec_begin - trace_initial_time;
|
| - var left = row_height + Math.floor(start_time / scale);
|
| - var width = Math.floor(e.duration / scale);
|
| - if (width == 0)
|
| - width = 1;
|
| - if (start_time < last_max_time)
|
| - top += row_height;
|
| - var style = "top: " + top + "px; left: " + left + "px; width: " + width + "px;";
|
| - var js = 'javascript:show_details("' + e.tid + '", ' + i + ', event);';
|
| - var cls = e.name.split('.')[0];
|
| - inner += "<li class='" + cls + "' onmouseover='" + js + "' id='li-" + i + "' style='" + style + "'></li>\n";
|
| - last_max_time = start_time + e.duration;
|
| - last_max_x = left + width;
|
| - }
|
| - var subchart = document.createElement('div');
|
| - subchart.setAttribute("class", "subchart");
|
| - subchart.setAttribute("id", trace_events[0].tid);
|
| - subchart.innerHTML = inner;
|
| - subchart.style.height = top + row_height;
|
| - subchart.style.width = row_height + last_max_x;
|
| - var chart = document.getElementById("chart");
|
| - chart.appendChild(subchart);
|
| -
|
| - return top;
|
| -};
|
| -
|
| -function generate_chart() {
|
| - var chart = document.getElementById("chart");
|
| - chart.innerHTML = "";
|
| - var top = 60;
|
| - for (var t in trace_threads) {
|
| - top = generate_subchart(trace_threads[t], top);
|
| - }
|
| - generate_time_scale();
|
| -}
|
| -
|
| -function change_scale(event) {
|
| - if (!event)
|
| - event = window.event;
|
| - if (!event.shiftKey)
|
| - return;
|
| - var delta = 0;
|
| - if (event.wheelDelta) {
|
| - delta = event.wheelDelta / 120;
|
| - } else if (event.detail) {
|
| - delta = - event.detail / 3;
|
| - }
|
| - if (delta) {
|
| - var tooltip = document.getElementById("tooltip");
|
| - tooltip.style.display = "none";
|
| - var factor = 1.1;
|
| - if (delta < 0)
|
| - scale = Math.floor(scale * factor);
|
| - else
|
| - scale = Math.floor(scale / factor);
|
| - if (scale > 300000)
|
| - scale = 300000;
|
| - generate_chart();
|
| - if (event.preventDefault)
|
| - event.preventDefault();
|
| - }
|
| - event.returnValue = false;
|
| -};
|
| -
|
| -function initial_load() {
|
| - if (window.addEventListener)
|
| - window.addEventListener('DOMMouseScroll', change_scale, false);
|
| - window.onmousewheel = document.onmousewheel = change_scale;
|
| -
|
| - process_raw_events();
|
| - compute_scale();
|
| - generate_chart();
|
| -};
|
| -
|
| -</script>
|
| -</head>
|
| -<body onload='initial_load();'>
|
| -<div id="header">
|
| -<h2>Trace Events</h2>
|
| -<div id="instructions">
|
| -Use shift+mouse-wheel to zoom in and out.
|
| -</div>
|
| -<div id="time_scale"></div>
|
| -</div>
|
| -<div id="legend">
|
| -<span class="url"> </span> URL<br />
|
| -<span class="http"> </span> HTTP<br />
|
| -<span class="socket"> </span> Socket<br />
|
| -<span class="v8"> </span> V8<br />
|
| -</div>
|
| -<div id="chart">
|
| -<div id="outer">
|
| -</div>
|
| -</div>
|
| -<div id="tooltip" ondblclick="this.style.display = 'none';"></div>
|
| -</body>
|
| -</html>
|
|
|