tools/trace/trace.html

   1 <html>
   2 <head>
   3 <title>
   4 Trace Events
   5 </title>
   6 <style>
   7 body {
   8   font-family: "Courier New";
   9   font-size: 9pt;
  10 }
  11
  12 #header {
  13   position: absolute;
  14   top: 0px;
  15   left: 0px;
  16   border-bottom: 1px dashed black;
  17   background-color: #F0F0F0;
  18   z-index: 3;
  19 }
  20
  21 #outer {
  22   position: relative;
  23   height: 200px;
  24 }
  25
  26 #time_scale {
  27   height: 15px;
  28   width: 100%;
  29 }
  30
  31 #tooltip {
  32   position: absolute;
  33   background-color: #FFFFCC;
  34   display: none;
  35   font-family: "Courier New";
  36   font-size: 9pt;
  37   padding: 5px;
  38   border: 1px solid #CCCC88;
  39   z-index: 3;
  40 }
  41
  42 #legend {
  43   position: fixed;
  44   left: 10px;
  45   bottom: 10px;
  46   padding: 5px;
  47   border: 1px solid silver;
  48   z-index: 10;
  49   background-color: #f0f0f0;
  50 }
  51
  52 h2 {
  53   margin: 5px;
  54 }
  55
  56 #instructions {
  57   position: absolute;
  58   top:
  59   float: right;
  60   display: none;
  61 }
  62
  63 li.time_tick {
  64   background-color: #FFFFCC;
  65   height: 15px;
  66 }
  67
  68 li {
  69   background: pink;
  70   position: absolute;
  71   height: 10px;
  72   list-style: none;
  73   margin: 0px;
  74   padding: 0px;
  75   z-index: 2;
  76 }
  77
  78 li:hover {
  79   border: 1px solid red;
  80 }
  81
  82 .url {
  83   background-color: green;
  84 }
  85
  86 .http {
  87   background-color: blue;
  88 }
  89
  90 .socket {
  91   background-color: black;
  92 }
  93
  94 .v8 {
  95   background-color: orange;
  96 }
  97
  98 </style>
  99
 100 <script src='trace_data.js'></script>
 101 <script>
 102 var scale = 100000;
 103 var row_height = 15;
 104 var trace_initial_time = 0;
 105 var trace_threads = {};
 106 var heartbeats = [];
 107 var trace_total_time = 0;
 108
 109 function process_raw_events() {
 110   trace_initial_time = raw_trace_events[0].usec_begin;
 111   var stack = [];
 112   var e;
 113   for (var i in raw_trace_events) {
 114     e = raw_trace_events[i];
 115     var trace_events = trace_threads["e.tid"];
 116     if (!trace_events) {
 117       trace_events = [];
 118       trace_threads["e.tid"] = trace_events;
 119     }
 120     if (e.name.indexOf("heartbeat.") == 0) {
 121       heartbeats.push(e);
 122     } else if (e.type == "BEGIN") {
 123       trace_events.push(e);
 124       stack.unshift(e);
 125     } else if (e.type == "END") {
 126       for (var s in stack) {
 127         var begin = stack[s];
 128         if ((begin.id == e.id) && (begin.name == e.name) &&
 129             (begin.pid == e.pid) && (begin.tid == e.tid)) {
 130           begin.usec_end = e.usec_begin;
 131           begin.duration = begin.usec_end - begin.usec_begin;
 132           stack.splice(s, 1);
 133           break;
 134         }
 135       }
 136     } else if (e.type == "INSTANT") {
 137       trace_events.push(e);
 138       e.duration = 0;
 139     }
 140   }
 141   if (e.usec_end)
 142     trace_total_time = e.usec_end - trace_initial_time;
 143   else
 144     trace_total_time = e.usec_begin - trace_initial_time;
 145 }
 146
 147 function compute_scale() {
 148   var outer = document.getElementById("outer");
 149   scale = Math.floor(trace_total_time / (outer.offsetWidth - (row_height * 2)));
 150 };
 151
 152 function show_details(tid, i, event) {
 153   var trace_events = trace_threads["e.tid"];
 154   var inner = trace_events[i].name + " " +
 155               trace_events[i].duration / 1000 + "ms<br />" +
 156               trace_events[i].id  + "<br />" +
 157               trace_events[i].extra  + "<br />";
 158   var tooltip = document.getElementById("tooltip");
 159   tooltip.innerHTML = inner;
 160   if (window.event)
 161     event = window.event;
 162   tooltip.style.top = event.pageY + 3;
 163   tooltip.style.left = event.pageX + 3;
 164   tooltip.style.display = "block";
 165 };
 166
 167 function generate_time_scale() {
 168   var view_size = window.clientWidth;
 169   var body_size = document.body.scrollWidth;
 170   var inner = "";
 171
 172   var step_ms = Math.floor(scale / 10); // ms per 100px
 173   var pow10 = Math.pow(10, Math.floor(Math.log(step_ms) / Math.log(10)));
 174   var round = .5 * pow10;
 175   step_ms = round * (Math.floor(step_ms / round)); // round to a multiple of round
 176   for (var i = step_ms; i < trace_total_time / 1000; i += step_ms) {
 177     var x = Math.floor(i * 1000 / scale);
 178     inner += "<li class='time_tick' style='left: " + x + "px'>" + i + "</li>";
 179   }
 180   var time_scale = document.getElementById("time_scale");
 181   time_scale.innerHTML = inner;
 182   time_scale.style.width = document.body.scrollWidth;
 183 }
 184
 185 function generate_subchart(trace_events, top) {
 186   var inner = "";
 187   var last_max_time = 0;
 188   var last_max_x = 0;
 189   for (var i in trace_events) {
 190     var e = trace_events[i];
 191     var start_time = e.usec_begin - trace_initial_time;
 192     var left = row_height + Math.floor(start_time / scale);
 193     var width = Math.floor(e.duration / scale);
 194     if (width == 0)
 195       width = 1;
 196     if (start_time < last_max_time)
 197       top += row_height;
 198     var style = "top: " + top + "px; left: " + left + "px; width: " + width + "px;";
 199     var js = 'javascript:show_details("' + e.tid + '", ' + i + ', event);';
 200     var cls = e.name.split('.')[0];
 201     inner += "<li class='" + cls + "' onmouseover='" + js + "' id='li-" + i + "' style='" + style + "'></li>\n";
 202     last_max_time = start_time + e.duration;
 203     last_max_x = left + width;
 204   }
 205   var subchart = document.createElement('div');
 206   subchart.setAttribute("class", "subchart");
 207   subchart.setAttribute("id", trace_events[0].tid);
 208   subchart.innerHTML = inner;
 209   subchart.style.height = top + row_height;
 210   subchart.style.width = row_height + last_max_x;
 211   var chart = document.getElementById("chart");
 212   chart.appendChild(subchart);
 213
 214   return top;
 215 };
 216
 217 function generate_chart() {
 218   var chart = document.getElementById("chart");
 219   chart.innerHTML = "";
 220   var top = 60;
 221   for (var t in trace_threads) {
 222     top = generate_subchart(trace_threads[t], top);
 223   }
 224   generate_time_scale();
 225 }
 226
 227 function change_scale(event) {
 228   if (!event)
 229     event = window.event;
 230   if (!event.shiftKey)
 231     return;
 232   var delta = 0;
 233   if (event.wheelDelta) {
 234     delta = event.wheelDelta / 120;
 235   } else if (event.detail) {
 236     delta = - event.detail / 3;
 237   }
 238   if (delta) {
 239     var tooltip = document.getElementById("tooltip");
 240     tooltip.style.display = "none";
 241     var factor = 1.1;
 242     if (delta < 0)
 243       scale = Math.floor(scale * factor);
 244     else
 245       scale = Math.floor(scale / factor);
 246     if (scale > 300000)
 247       scale = 300000;
 248     generate_chart();
 249     if (event.preventDefault)
 250       event.preventDefault();
 251   }
 252   event.returnValue = false;
 253 };
 254
 255 function initial_load() {
 256   if (window.addEventListener)
 257     window.addEventListener('DOMMouseScroll', change_scale, false);
 258   window.onmousewheel = document.onmousewheel = change_scale;
 259
 260   process_raw_events();
 261   compute_scale();
 262   generate_chart();
 263 };
 264
 265 </script>
 266 </head>
 267 <body onload='initial_load();'>
 268 <div id="header">
 269 <h2>Trace Events</h2>
 270 <div id="instructions">
 271 Use shift+mouse-wheel to zoom in and out.
 272 </div>
 273 <div id="time_scale"></div>
 274 </div>
 275 <div id="legend">
 276 <span class="url">&nbsp;</span> URL<br />
 277 <span class="http">&nbsp;</span> HTTP<br />
 278 <span class="socket">&nbsp;</span> Socket<br />
 279 <span class="v8">&nbsp;</span> V8<br />
 280 </div>
 281 <div id="chart">
 282 <div id="outer">
 283 </div>
 284 </div>
 285 <div id="tooltip" ondblclick="this.style.display = 'none';"></div>
 286 </body>
 287 </html>