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> |