Tools/Scripts/webkitpy/thirdparty/webpagereplay/perftracker/app/templates/view_summary.html - Issue 18418010: Check in the thirdparty libs needed for webkitpy.

Side by Side Diff: Tools/Scripts/webkitpy/thirdparty/webpagereplay/perftracker/app/templates/view_summary.html

Issue 18418010: Check in the thirdparty libs needed for webkitpy. (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Created 7 years, 5 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch | Annotate | Revision Log

« no previous file with comments | « Tools/Scripts/webkitpy/thirdparty/webpagereplay/perftracker/app/templates/view_set.html ('k') | Tools/Scripts/webkitpy/thirdparty/webpagereplay/perftracker/extension/background.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <html>

	2 <head>

	3 <title>Chromium Perf Tracker</title>

	4 <link rel="stylesheet" href="styles/style.css">

	5 <script src="scripts/util.js"></script>

	6 <script src="jst/util.js" type="text/javascript"></script>

	7 <script src="jst/jsevalcontext.js" type="text/javascript"></script>

	8 <script src="jst/jstemplate.js" type="text/javascript"></script>

	9 <script type="text/javascript" src="https://www.google.com/jsapi"></script>

	10 </head>

	11

	12 <body onLoad="loadData()">

	13 <h1><div id="header">Chromium Page Tracker View Test Set</div></h1>

	14

	15 <script>

	16 function getArray(data, key) {

	17 var arr = [];

	18 for (var i = 0; i < data.results.length; i++) {

	19 arr.push(data.results[i][key]);

	20 }

	21 return arr;

	22 }

	23

	24 function loadData() {

	25 var url = "/json?type=summary";

	26 var set_id = location.queryString()["id"];

	27 if (set_id == undefined) {

	28 alert("missing summary id");

	29 return;

	30 }

	31 url += "&id=" + set_id;

	32

	33 new XHRGet(url, function(result) {

	34 data = JSON.parse(result);

	35 var context = new JsEvalContext(data);

	36 context.setVariable('num_connects_mode',

	37 getArray(data, 'num_connects').mode());

	38 context.setVariable('num_sessions_mode',

	39 getArray(data, 'num_sessions').mode());

	40 context.setVariable('num_requests_mode',

	41 getArray(data, 'num_requests').mode());

	42 context.setVariable('read_bytes_kb_mode',

	43 getArray(data, 'read_bytes_kb').mode());

	44 context.setVariable('write_bytes_kb_mode',

	45 getArray(data, 'write_bytes_kb').mode());

	46 var template = document.getElementById("template");

	47 jstProcess(context, template);

	48 drawChart(data.results);

	49 });

	50 }

	51

	52 // http://code.google.com/apis/visualization/documentation/gallery/linechart .html

	53 google.load('visualization', '1', {'packages':['corechart']});

	54

	55 function drawChart(results) {

	56 var graph_data = new google.visualization.DataTable();

	57 graph_data.addColumn('number', 'Load');

	58 graph_data.addColumn('number', 'DCL');

	59 graph_data.addColumn('number', 'Interactive');

	60 graph_data.addColumn('number', 'Paint');

	61 graph_data.addColumn('number', 'Last byte');

	62 graph_data.addColumn('number', 'First byte');

	63 for (var i = 0; i < results.length; ++i) {

	64 graph_data.addRow([results[i].total_time,

	65 results[i].dcl_time,

	66 results[i].doc_load_time,

	67 results[i].paint_time,

	68 results[i].last_byte_time,

	69 results[i].first_byte_time,

	70 ]);

	71 }

	72

	73 var chart_div = document.getElementById('chart_div');

	74 if (graph_data.getNumberOfRows()) {

	75 var chart = new google.visualization.LineChart(chart_div);

	76 chart.draw(graph_data, {displayAnnotations: true,

	77 hAxis: {

	78 title: "Iteration"

	79 },

	80 vAxis: {

	81 title: "ms"

	82 },

	83 });

	84 google.visualization.events.addListener(chart, 'onmouseover', function(e ) {

	85 var tr = document.getElementById('data').rows[e.row+1];

	86 var td = tr.cells[11-e.column];

	87 tr.style.backgroundColor = "#ffe87c";

	88 td.style.backgroundColor = "#fbb117";

	89 });

	90 google.visualization.events.addListener(chart, 'onmouseout', function(e) {

	91 var tr = document.getElementById('data').rows[e.row+1];

	92 var td = tr.cells[11-e.column];

	93 tr.style.backgroundColor = "";

	94 td.style.backgroundColor = "";

	95 });

	96

	97 } else {

	98 chart_div.innerHTML = "No data";

	99 }

	100 }

	101

	102 </script>

	103

	104 <div id="template">

	105 <div jsselect="obj">

	106 <div class="scorebox">

	107 <span jscontent="total_time"></span>ms

	108 </div>

	109 <table class="sortable">

	110 <tr><td>Id</td> <td jscontent="key"></td></tr>

	111 <tr><td>Set</td> <td><span jseval="$val = '/do_view_set?id=' + set"></span ><a jsvalues="href:$val" jscontent="set"></a></td>

	112 <tr><td>Date</td> <td jscontent="date"></td></tr>

	113 <tr><td>URL</td> <td jscontent="url"></td></tr>

	114 <tr><td># of Iterations</td> <td jscontent="iterations"></td></tr>

	115 <tr><td>Fetch Start</td><td jscontent="start_load_time"></td></tr>

	116 <tr><td>Root DNS Complete</td><td jscontent="dns_time"></td></tr>

	117 <tr><td>Root Connection Established</td><td jscontent="connect_time"></td> </tr>

	118 <tr><td>Root Doc First Byte Received</td><td jscontent="first_byte_time">< /td></tr>

	119 <tr><td>Root Doc Last Byte Received</td><td jscontent="last_byte_time"></t d></tr>

	120 <tr><td>First paint</td><td jscontent="paint_time"></td></tr>

	121 <tr><td>DOM readyState Interactive</td><td jscontent="doc_load_time"></td> </tr>

	122 <tr><td>DOMContentLoaded Event</td><td jscontent="dcl_time"></td></tr>

	123 <tr><td>Load Event</td><td jscontent="total_time"></td></tr>

	124 </table>

	125 </div>

	126

	127 <div id='chart_div' style='width: 700px; height: 240px;'></div>

	128

	129 <table class="sortable" id="data">

	130 <tr>

	131 <th>URL</th>

	132 <th>SPDY</th>

	133 <th>Start</th>

	134 <th>DNS</th>

	135 <th>Connect</th>

	136 <th>First Byte</th>

	137 <th>Last Byte</th>

	138 <th>Paint</th>

	139 <th>Interactive</th>

	140 <th>DCL</th>

	141 <th>Load</th>

	142 <th>Connects</th>

	143 <th>Sessions</th>

	144 <th>Requests</th>

	145 <th>Read KB</th>

	146 <th>Write KB</th>

	147 </tr>

	148 <tr jsselect="results">

	149 <td><span jscontent="url"></span></td>

	150 <td class="righttext" jscontent="using_spdy"></td>

	151 <td class="righttext" jscontent="start_load_time"></td>

	152 <td class="righttext" jscontent="dns_time"></td>

	153 <td class="righttext" jscontent="connect_time"></td>

	154 <td class="righttext" jscontent="first_byte_time"></td>

	155 <td class="righttext" jscontent="last_byte_time"></td>

	156 <td class="righttext" jscontent="paint_time"></td>

	157 <td class="righttext" jscontent="doc_load_time"></td>

	158 <td class="righttext" jscontent="dcl_time"></td>

	159 <td class="righttext" jscontent="total_time"></td>

	160 <td class="righttext" jscontent="num_connects" jsvalues=".style.color:nu m_connects == num_connects_mode ? 'black' : 'red'"></td>

	161 <td class="righttext" jscontent="num_sessions" jsvalues=".style.color:nu m_sessions == num_sessions_mode ? 'black' : 'red'"></td>

	162 <td class="righttext" jscontent="num_requests" jsvalues=".style.color:nu m_requests == num_requests_mode ? 'black' : 'red'"></td>

	163 <td class="righttext" jscontent="read_bytes_kb" jsvalues=".style.color:r ead_bytes_kb == read_bytes_kb_mode ? 'black' : 'red'"></td>

	164 <td class="righttext" jscontent="write_bytes_kb" jsvalues=".style.color: write_bytes_kb == write_bytes_kb_mode ? 'black' : 'red'"></td>

	165 </table>

	166 </div>

	167 <div id="footer">

	168 ©2011 Google - <a href="http://code.google.com/p/web-page-replay/wiki /ChromeBenchmarkMetrics">Metric definitions</a> \| <a href="http://code.google.co m/p/web-page-replay/wiki/ChromeBenchmark">Running the benchmark</a><br>

	169 Powered by <a href="http://code.google.com/p/web-page-replay/">Web Page Re play</a>

	170 </div>

	171 </body>

	172 </html>

OLD	NEW