| Index: Tools/Scripts/webkitpy/thirdparty/webpagereplay/perftracker/app/templates/view_summary.html
|
| diff --git a/Tools/Scripts/webkitpy/thirdparty/webpagereplay/perftracker/app/templates/view_summary.html b/Tools/Scripts/webkitpy/thirdparty/webpagereplay/perftracker/app/templates/view_summary.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..825c4755293f0cf29c2a756748f43436c59374e9
|
| --- /dev/null
|
| +++ b/Tools/Scripts/webkitpy/thirdparty/webpagereplay/perftracker/app/templates/view_summary.html
|
| @@ -0,0 +1,172 @@
|
| +<html>
|
| + <head>
|
| + <title>Chromium Perf Tracker</title>
|
| + <link rel="stylesheet" href="styles/style.css">
|
| + <script src="scripts/util.js"></script>
|
| + <script src="jst/util.js" type="text/javascript"></script>
|
| + <script src="jst/jsevalcontext.js" type="text/javascript"></script>
|
| + <script src="jst/jstemplate.js" type="text/javascript"></script>
|
| + <script type="text/javascript" src="https://www.google.com/jsapi"></script>
|
| + </head>
|
| +
|
| + <body onLoad="loadData()">
|
| + <h1><div id="header">Chromium Page Tracker View Test Set</div></h1>
|
| +
|
| + <script>
|
| + function getArray(data, key) {
|
| + var arr = [];
|
| + for (var i = 0; i < data.results.length; i++) {
|
| + arr.push(data.results[i][key]);
|
| + }
|
| + return arr;
|
| + }
|
| +
|
| + function loadData() {
|
| + var url = "/json?type=summary";
|
| + var set_id = location.queryString()["id"];
|
| + if (set_id == undefined) {
|
| + alert("missing summary id");
|
| + return;
|
| + }
|
| + url += "&id=" + set_id;
|
| +
|
| + new XHRGet(url, function(result) {
|
| + data = JSON.parse(result);
|
| + var context = new JsEvalContext(data);
|
| + context.setVariable('num_connects_mode',
|
| + getArray(data, 'num_connects').mode());
|
| + context.setVariable('num_sessions_mode',
|
| + getArray(data, 'num_sessions').mode());
|
| + context.setVariable('num_requests_mode',
|
| + getArray(data, 'num_requests').mode());
|
| + context.setVariable('read_bytes_kb_mode',
|
| + getArray(data, 'read_bytes_kb').mode());
|
| + context.setVariable('write_bytes_kb_mode',
|
| + getArray(data, 'write_bytes_kb').mode());
|
| + var template = document.getElementById("template");
|
| + jstProcess(context, template);
|
| + drawChart(data.results);
|
| + });
|
| + }
|
| +
|
| + // http://code.google.com/apis/visualization/documentation/gallery/linechart.html
|
| + google.load('visualization', '1', {'packages':['corechart']});
|
| +
|
| + function drawChart(results) {
|
| + var graph_data = new google.visualization.DataTable();
|
| + graph_data.addColumn('number', 'Load');
|
| + graph_data.addColumn('number', 'DCL');
|
| + graph_data.addColumn('number', 'Interactive');
|
| + graph_data.addColumn('number', 'Paint');
|
| + graph_data.addColumn('number', 'Last byte');
|
| + graph_data.addColumn('number', 'First byte');
|
| + for (var i = 0; i < results.length; ++i) {
|
| + graph_data.addRow([results[i].total_time,
|
| + results[i].dcl_time,
|
| + results[i].doc_load_time,
|
| + results[i].paint_time,
|
| + results[i].last_byte_time,
|
| + results[i].first_byte_time,
|
| + ]);
|
| + }
|
| +
|
| + var chart_div = document.getElementById('chart_div');
|
| + if (graph_data.getNumberOfRows()) {
|
| + var chart = new google.visualization.LineChart(chart_div);
|
| + chart.draw(graph_data, {displayAnnotations: true,
|
| + hAxis: {
|
| + title: "Iteration"
|
| + },
|
| + vAxis: {
|
| + title: "ms"
|
| + },
|
| + });
|
| + google.visualization.events.addListener(chart, 'onmouseover', function(e) {
|
| + var tr = document.getElementById('data').rows[e.row+1];
|
| + var td = tr.cells[11-e.column];
|
| + tr.style.backgroundColor = "#ffe87c";
|
| + td.style.backgroundColor = "#fbb117";
|
| + });
|
| + google.visualization.events.addListener(chart, 'onmouseout', function(e) {
|
| + var tr = document.getElementById('data').rows[e.row+1];
|
| + var td = tr.cells[11-e.column];
|
| + tr.style.backgroundColor = "";
|
| + td.style.backgroundColor = "";
|
| + });
|
| +
|
| + } else {
|
| + chart_div.innerHTML = "No data";
|
| + }
|
| + }
|
| +
|
| + </script>
|
| +
|
| + <div id="template">
|
| + <div jsselect="obj">
|
| + <div class="scorebox">
|
| + <span jscontent="total_time"></span>ms
|
| + </div>
|
| + <table class="sortable">
|
| + <tr><td>Id</td> <td jscontent="key"></td></tr>
|
| + <tr><td>Set</td> <td><span jseval="$val = '/do_view_set?id=' + set"></span><a jsvalues="href:$val" jscontent="set"></a></td>
|
| + <tr><td>Date</td> <td jscontent="date"></td></tr>
|
| + <tr><td>URL</td> <td jscontent="url"></td></tr>
|
| + <tr><td># of Iterations</td> <td jscontent="iterations"></td></tr>
|
| + <tr><td>Fetch Start</td><td jscontent="start_load_time"></td></tr>
|
| + <tr><td>Root DNS Complete</td><td jscontent="dns_time"></td></tr>
|
| + <tr><td>Root Connection Established</td><td jscontent="connect_time"></td></tr>
|
| + <tr><td>Root Doc First Byte Received</td><td jscontent="first_byte_time"></td></tr>
|
| + <tr><td>Root Doc Last Byte Received</td><td jscontent="last_byte_time"></td></tr>
|
| + <tr><td>First paint</td><td jscontent="paint_time"></td></tr>
|
| + <tr><td>DOM readyState Interactive</td><td jscontent="doc_load_time"></td></tr>
|
| + <tr><td>DOMContentLoaded Event</td><td jscontent="dcl_time"></td></tr>
|
| + <tr><td>Load Event</td><td jscontent="total_time"></td></tr>
|
| + </table>
|
| + </div>
|
| +
|
| + <div id='chart_div' style='width: 700px; height: 240px;'></div>
|
| +
|
| + <table class="sortable" id="data">
|
| + <tr>
|
| + <th>URL</th>
|
| + <th>SPDY</th>
|
| + <th>Start</th>
|
| + <th>DNS</th>
|
| + <th>Connect</th>
|
| + <th>First Byte</th>
|
| + <th>Last Byte</th>
|
| + <th>Paint</th>
|
| + <th>Interactive</th>
|
| + <th>DCL</th>
|
| + <th>Load</th>
|
| + <th>Connects</th>
|
| + <th>Sessions</th>
|
| + <th>Requests</th>
|
| + <th>Read KB</th>
|
| + <th>Write KB</th>
|
| + </tr>
|
| + <tr jsselect="results">
|
| + <td><span jscontent="url"></span></td>
|
| + <td class="righttext" jscontent="using_spdy"></td>
|
| + <td class="righttext" jscontent="start_load_time"></td>
|
| + <td class="righttext" jscontent="dns_time"></td>
|
| + <td class="righttext" jscontent="connect_time"></td>
|
| + <td class="righttext" jscontent="first_byte_time"></td>
|
| + <td class="righttext" jscontent="last_byte_time"></td>
|
| + <td class="righttext" jscontent="paint_time"></td>
|
| + <td class="righttext" jscontent="doc_load_time"></td>
|
| + <td class="righttext" jscontent="dcl_time"></td>
|
| + <td class="righttext" jscontent="total_time"></td>
|
| + <td class="righttext" jscontent="num_connects" jsvalues=".style.color:num_connects == num_connects_mode ? 'black' : 'red'"></td>
|
| + <td class="righttext" jscontent="num_sessions" jsvalues=".style.color:num_sessions == num_sessions_mode ? 'black' : 'red'"></td>
|
| + <td class="righttext" jscontent="num_requests" jsvalues=".style.color:num_requests == num_requests_mode ? 'black' : 'red'"></td>
|
| + <td class="righttext" jscontent="read_bytes_kb" jsvalues=".style.color:read_bytes_kb == read_bytes_kb_mode ? 'black' : 'red'"></td>
|
| + <td class="righttext" jscontent="write_bytes_kb" jsvalues=".style.color:write_bytes_kb == write_bytes_kb_mode ? 'black' : 'red'"></td>
|
| + </table>
|
| + </div>
|
| + <div id="footer">
|
| + ©2011 Google - <a href="http://code.google.com/p/web-page-replay/wiki/ChromeBenchmarkMetrics">Metric definitions</a> | <a href="http://code.google.com/p/web-page-replay/wiki/ChromeBenchmark">Running the benchmark</a><br>
|
| + Powered by <a href="http://code.google.com/p/web-page-replay/">Web Page Replay</a>
|
| + </div>
|
| + </body>
|
| +</html>
|
|
|