| OLD | NEW |
| (Empty) |
| 1 <html> | |
| 2 <head> | |
| 3 <style> | |
| 4 body { | |
| 5 font-family: sans-serif; | |
| 6 } | |
| 7 div#output { | |
| 8 cursor: pointer; | |
| 9 } | |
| 10 div#switcher { | |
| 11 cursor: pointer; | |
| 12 } | |
| 13 div#switcher a { | |
| 14 border-top: 1px solid black; | |
| 15 border-left: 1px solid black; | |
| 16 padding-left: 0.5em; | |
| 17 padding-right: 0.5em; | |
| 18 } | |
| 19 canvas.plot { | |
| 20 border: 1px solid black; | |
| 21 } | |
| 22 div.plot-coordinates { | |
| 23 font-family: monospace; | |
| 24 } | |
| 25 iframe { | |
| 26 display: none; | |
| 27 width: 100%; | |
| 28 height: 100%; | |
| 29 border: none; | |
| 30 } | |
| 31 div.selector { | |
| 32 border: solid 1px black; | |
| 33 cursor: pointer; | |
| 34 padding-left: 0.3em; | |
| 35 background-color: white; | |
| 36 } | |
| 37 div.selector:hover { | |
| 38 background-color: rgb(200,200,250); | |
| 39 } | |
| 40 div.selected { | |
| 41 border-left: none; | |
| 42 } | |
| 43 div#selectors { | |
| 44 width: 80px; | |
| 45 display: none; | |
| 46 } | |
| 47 </style> | |
| 48 <script src="js/common.js"></script> | |
| 49 <script src="js/plotter.js"></script> | |
| 50 <script src="config.js"></script> | |
| 51 <script> | |
| 52 document.title = Config.title; | |
| 53 | |
| 54 var params = ParseParams(); | |
| 55 if (!('history' in params)) { | |
| 56 params.history = 150; | |
| 57 // make this option somewhat user discoverable :-/ | |
| 58 window.location.href = MakeURL(params); | |
| 59 } | |
| 60 | |
| 61 var did_position_details = false; | |
| 62 | |
| 63 function units_for_trace() { | |
| 64 if ('trace' in params && params.trace.indexOf('vm-') == 0) { | |
| 65 return 'bytes' | |
| 66 } else if ('trace' in params && params.trace.indexOf('ws-') == 0) { | |
| 67 return 'bytes' | |
| 68 } else if ('trace' in params && params.trace.indexOf('io-op') == 0) { | |
| 69 return 'times' | |
| 70 } else if ('trace' in params && params.trace.indexOf('io-byte') == 0) { | |
| 71 return 'KB' | |
| 72 } else { | |
| 73 return 'msec' | |
| 74 } | |
| 75 } | |
| 76 | |
| 77 function go_to(trace) { | |
| 78 params.trace = trace; | |
| 79 if (params.trace == '') | |
| 80 delete params.trace; | |
| 81 window.location.href = MakeURL(params); | |
| 82 } | |
| 83 | |
| 84 function get_url() { | |
| 85 new_url = window.location.href; | |
| 86 new_url = new_url.replace(/50/, "150"); | |
| 87 new_url = new_url.replace(/\&lookout/, ""); | |
| 88 return new_url; | |
| 89 } | |
| 90 | |
| 91 | |
| 92 function on_clicked_plot(prev_cl, cl, value, fuzz, e) { | |
| 93 if ('lookout' in params) { | |
| 94 window.open(get_url()); | |
| 95 return; | |
| 96 } | |
| 97 var view_url = | |
| 98 '../../dashboard/changelog.html?url=trunk/src&range=' + | |
| 99 prev_cl + ':' + cl | |
| 100 document.getElementById('view-change'). | |
| 101 setAttribute('src', view_url); | |
| 102 | |
| 103 document.getElementById('view-pages'). | |
| 104 setAttribute('src', 'details.html?cl=' + cl); | |
| 105 | |
| 106 if (!did_position_details) { | |
| 107 position_details(); | |
| 108 did_position_details = true; | |
| 109 } | |
| 110 } | |
| 111 | |
| 112 function received_summary(data) { | |
| 113 var xvals = []; | |
| 114 var yvals = []; | |
| 115 var ydevs = []; | |
| 116 var yrefs = []; | |
| 117 | |
| 118 var rows = data.split('\n'); | |
| 119 var max_rows = rows.length; | |
| 120 if (max_rows > params.history) | |
| 121 max_rows = params.history | |
| 122 var index = 0; | |
| 123 for (var i = 0; i < max_rows; ++i) { | |
| 124 // ignore ill-formatted data | |
| 125 if (rows[i].match(/[\d\.]+ [\d\.]+ [\d\.]+/) == null) | |
| 126 continue; | |
| 127 var cols = rows[i].split(' '); | |
| 128 xvals[index] = parseFloat(cols[0]); | |
| 129 yvals[index] = parseFloat(cols[1]); | |
| 130 if (cols.length == 3) { | |
| 131 ydevs[index] = 0; | |
| 132 yrefs[index] = parseFloat(cols[2]); | |
| 133 } else { | |
| 134 ydevs[index] = parseFloat(cols[2]); | |
| 135 yrefs[index] = parseFloat(cols[3]); | |
| 136 } | |
| 137 index++; | |
| 138 } | |
| 139 xvals.reverse(); | |
| 140 yvals.reverse(); | |
| 141 ydevs.reverse(); | |
| 142 yrefs.reverse(); | |
| 143 | |
| 144 var output = document.getElementById("output"); | |
| 145 | |
| 146 // make this a global so it persists | |
| 147 plotter = new Plotter(xvals, yvals, ydevs, output, true); | |
| 148 plotter.units = units_for_trace() | |
| 149 plotter.addAlternateData(yrefs, "rgba(230,80,150,0.5)"); | |
| 150 plotter.onclick = on_clicked_plot; | |
| 151 plotter.plot(); | |
| 152 } | |
| 153 | |
| 154 function fetch_summary() { | |
| 155 if ('trace' in params) | |
| 156 file = "summary-" + params.trace + ".dat" | |
| 157 else | |
| 158 file = "summary.dat" | |
| 159 Fetch(file, received_summary); | |
| 160 } | |
| 161 | |
| 162 function position_details() { | |
| 163 var output = document.getElementById("output"); | |
| 164 | |
| 165 var win_height = window.innerHeight; | |
| 166 | |
| 167 var details = document.getElementById("views"); | |
| 168 | |
| 169 var views = document.getElementById("views"); | |
| 170 var selectors = document.getElementById("selectors"); | |
| 171 selectors.style.display = "block"; | |
| 172 | |
| 173 var views_width = output.offsetWidth - selectors.offsetWidth; | |
| 174 | |
| 175 views.style.border = "1px solid black"; | |
| 176 views.style.width = views_width + "px"; | |
| 177 views.style.height = (win_height - output.offsetHeight - output.offsetTop - 30
) + "px"; | |
| 178 | |
| 179 selectors.style.position = "absolute"; | |
| 180 selectors.style.left = (views.offsetLeft + views_width + 1) + "px"; | |
| 181 selectors.style.top = views.offsetTop + "px"; | |
| 182 | |
| 183 change_view("view-change"); | |
| 184 } | |
| 185 | |
| 186 function change_view(target) { | |
| 187 if (target == "view-change") { | |
| 188 document.getElementById("view-pages").style.display = "none"; | |
| 189 document.getElementById("view-change").style.display = "block"; | |
| 190 } else { | |
| 191 document.getElementById("view-change").style.display = "none"; | |
| 192 document.getElementById("view-pages").style.display = "block"; | |
| 193 } | |
| 194 } | |
| 195 | |
| 196 function init() { | |
| 197 fetch_summary(); | |
| 198 } | |
| 199 | |
| 200 window.addEventListener("load", init, false); | |
| 201 </script> | |
| 202 </head> | |
| 203 <body> | |
| 204 <p> | |
| 205 <div id="header_lookout" align="center"> | |
| 206 <font style='color: #0066FF; font-family: Arial, serif;font-size: 16pt; font-w
eight: bold;'> | |
| 207 <script> | |
| 208 document.write("<a target=\"_blank\" href=\""); | |
| 209 document.write(get_url()); | |
| 210 document.write("\">"); | |
| 211 document.write(Config.title); | |
| 212 document.write("</a>"); | |
| 213 </script> | |
| 214 </font> | |
| 215 </div> | |
| 216 <div id="header_text"> | |
| 217 Builds generated by a <a href="http://buildbot.chromium.org/">Chromium build sla
ve</a> | |
| 218 are run through the <b> | |
| 219 <script> | |
| 220 document.write(Config.title); | |
| 221 </script> | |
| 222 </b>and the results of that test are charted here. | |
| 223 </div> | |
| 224 </p> | |
| 225 <p style="font-size: 0.75em; font-style: italic; color: rgb(100,100,100)"> | |
| 226 <div id="explain"> | |
| 227 <script> | |
| 228 if ('trace' in params && params.trace == 'vm-peak-renderer') { | |
| 229 document.write( | |
| 230 "The vertical axis is the peak vm usage for the renderer process, and " + | |
| 231 "the horizontal axis is the change-list for the build being tested. The " + | |
| 232 "pink trace shows the results for the reference build.") | |
| 233 } else if ('trace' in params && params.trace == 'vm-peak-browser') { | |
| 234 document.write( | |
| 235 "The vertical axis is the peak vm usage for the browser process, and " + | |
| 236 "the horizontal axis is the change-list for the build being tested. The " + | |
| 237 "pink trace shows the results for the reference build.") | |
| 238 } else if ('trace' in params && params.trace == 'ws-peak-renderer') { | |
| 239 document.write( | |
| 240 "The vertical axis is the peak memory working-set usage for the renderer " + | |
| 241 "process, and the horizontal axis is the change-list for the build being " + | |
| 242 "tested. The pink trace shows the results for the reference build.") | |
| 243 } else if ('trace' in params && params.trace == 'ws-peak-browser') { | |
| 244 document.write( | |
| 245 "The vertical axis is the peak memory working-set usage for the browser " + | |
| 246 "process, and the horizontal axis is the change-list for the build being " + | |
| 247 "tested. The pink trace shows the results for the reference build.") | |
| 248 } else if ('trace' in params && params.trace == 'io-op-browser') { | |
| 249 document.write( | |
| 250 "This is an experimental page to track IO performance.") | |
| 251 } else if ('trace' in params && params.trace == 'io-byte-browser') { | |
| 252 document.write( | |
| 253 "This is an experimental page to track IO performance.") | |
| 254 } else { | |
| 255 document.write( | |
| 256 "The vertical axis is the time in milliseconds for the build to complete " + | |
| 257 "the test, and the horizontal axis is the change-list for the build " + | |
| 258 "being tested. Vertical error bars correspond to standard deviation. " + | |
| 259 "The pink trace shows the results for the reference build.") | |
| 260 } | |
| 261 </script> | |
| 262 </div> | |
| 263 </p> | |
| 264 <div id="switcher"> | |
| 265 <a onclick="go_to('')">page-load-time</a> | |
| 266 <a onclick="go_to('vm-peak-browser')">vm-peak-browser</a> | |
| 267 <a onclick="go_to('vm-peak-renderer')">vm-peak-renderer</a> | |
| 268 <a onclick="go_to('ws-peak-browser')">ws-peak-browser</a> | |
| 269 <a onclick="go_to('ws-peak-renderer')">ws-peak-renderer</a> | |
| 270 <a onclick="go_to('io-op-browser')">io-op-browser</a> | |
| 271 <a onclick="go_to('io-byte-browser')">io-byte-browser</a> | |
| 272 </div> | |
| 273 <div id="output"></div> | |
| 274 <div id="details"> | |
| 275 <div id="views"> | |
| 276 <iframe id="view-change"></iframe> | |
| 277 <iframe id="view-pages"></iframe> | |
| 278 </div> | |
| 279 <div id="selectors"> | |
| 280 <div class="selector" onclick="change_view('view-change')">CL</div> | |
| 281 <div style="border-top: none" class="selector" onclick="change_view('view-pa
ges')">Pages</div> | |
| 282 </div> | |
| 283 </div> | |
| 284 <pre id="log"></pre> | |
| 285 | |
| 286 <script> | |
| 287 if ('lookout' in params) { | |
| 288 switcher.style.display = "none"; | |
| 289 details.style.display = "none"; | |
| 290 header_text.style.display = "none"; | |
| 291 explain.style.display = "none"; | |
| 292 selection.style.display = "none"; | |
| 293 } else { | |
| 294 document.getElementById("header_lookout").style.display = "none"; | |
| 295 } | |
| 296 </script> | |
| 297 </body> | |
| 298 </html> | |
| OLD | NEW |