| OLD | NEW |
|---|
| (Empty) | |
| 1 <head> |
| 2 <title>Page Benchmark Options</title> |
| 3 <script src="jst/util.js" type="text/javascript"></script> |
| 4 <script src="jst/jsevalcontext.js" type="text/javascript"></script> |
| 5 <script src="jst/jstemplate.js" type="text/javascript"></script> |
| 6 <script src="jst/jstemplate_example.js" type="text/javascript"></script> |
| 7 |
| 8 <style> |
| 9 body { |
| 10 font-size: 84%; |
| 11 font-family: Arial, Helvetica, sans-serif; |
| 12 padding: 0.75em; |
| 13 margin: 0; |
| 14 min-width: 45em; |
| 15 } |
| 16 |
| 17 h1 { |
| 18 font-size: 110%; |
| 19 font-weight: bold; |
| 20 color: #4a8ee6; |
| 21 letter-spacing: -1px; |
| 22 padding: 0; |
| 23 margin: 0; |
| 24 } |
| 25 |
| 26 div#header { |
| 27 padding: 0.75em 1em; |
| 28 padding-top: 0.6em; |
| 29 padding-left: 10; |
| 30 margin-bottom: 0.75em; |
| 31 position: relative; |
| 32 overflow: hidden; |
| 33 background: #5296de; |
| 34 -webkit-background-size: 100%; |
| 35 border: 1px solid #3a75bd; |
| 36 -webkit-border-radius: 6px; |
| 37 color: white; |
| 38 text-shadow: 0 0 2px black; |
| 39 } |
| 40 div#header h1 { |
| 41 padding-left: 37px; |
| 42 margin: 0; |
| 43 display: inline; |
| 44 color: white; |
| 45 } |
| 46 div#header p { |
| 47 font-size: 84%; |
| 48 font-style: italic; |
| 49 padding: 0; |
| 50 margin: 0; |
| 51 color: white; |
| 52 padding-left: 0.4em; |
| 53 display: inline; |
| 54 } |
| 55 |
| 56 table.list { |
| 57 font-size: 84%; |
| 58 table-layout: fixed; |
| 59 } |
| 60 |
| 61 table.list:not([class*='filtered']) tr:nth-child(odd) td:not([class*='filtered']
) { |
| 62 background: #eff3ff; |
| 63 } |
| 64 |
| 65 table.list th { |
| 66 padding: 0 0.5em; |
| 67 vertical-align: top; |
| 68 font-weight: bold; |
| 69 color: #315d94; |
| 70 color: black; |
| 71 white-space: nowrap; |
| 72 text-align: center; |
| 73 } |
| 74 |
| 75 .avg { |
| 76 font-weight: bold; |
| 77 text-align: center; |
| 78 } |
| 79 |
| 80 .data { |
| 81 text-align: left; |
| 82 white-space: nowrap; |
| 83 } |
| 84 |
| 85 .bggraph { |
| 86 background-color: #faa; |
| 87 white-space: nowrap; |
| 88 } |
| 89 </style> |
| 90 |
| 91 <script> |
| 92 |
| 93 var max_sample = 0; |
| 94 |
| 95 Array.max = function(array) { |
| 96 return Math.max.apply( Math, array ); |
| 97 } |
| 98 |
| 99 Array.min = function(array) { |
| 100 return Math.min.apply( Math, array ); |
| 101 }; |
| 102 |
| 103 // Compute the average of an array |
| 104 Array.avg = function(array) { |
| 105 var count = array.length; |
| 106 var sum = 0; |
| 107 for (var i = 0; i < count; i++) { |
| 108 sum += array[i]; |
| 109 } |
| 110 return (sum / count).toFixed(1); |
| 111 } |
| 112 |
| 113 // Compute the standard deviation of an array |
| 114 Array.stddev = function(array) { |
| 115 var count = array.length; |
| 116 var mean = Array.avg(array); |
| 117 var variance = 0; |
| 118 for (var i = 0; i < count; i++) { |
| 119 var deviation = mean - array[i]; |
| 120 variance = variance + deviation * deviation; |
| 121 } |
| 122 variance = variance / count; |
| 123 return Math.sqrt(variance).toFixed(2); |
| 124 } |
| 125 |
| 126 // Computes min/max/mean/stddev, etc all up front. |
| 127 function computeResults(data) { |
| 128 for (var i = 0; i < data.data.length; i++) { |
| 129 var obj = data.data[i]; |
| 130 obj.mean = Array.avg(data.data[i].results); |
| 131 obj.stddev = Array.stddev(data.data[i].results); |
| 132 obj.min = Array.min(data.data[i].results); |
| 133 obj.max = Array.max(data.data[i].results); |
| 134 } |
| 135 |
| 136 // Find the biggest sample for our bar graph. |
| 137 max_sample = 0; |
| 138 for (var i = 0; i < data.data.length; i++) { |
| 139 if (data.data[i].max > max_sample) { |
| 140 max_sample = data.data[i].max; |
| 141 } |
| 142 } |
| 143 } |
| 144 |
| 145 function jsinit() { |
| 146 // Run the template to show results |
| 147 var data = window.opener.results; |
| 148 computeResults(data); |
| 149 |
| 150 var context = new JsEvalContext(data); |
| 151 context.setVariable('$width', 0); |
| 152 context.setVariable('$samples', 0); |
| 153 var template = document.getElementById("t"); |
| 154 jstProcess(context, template); |
| 155 |
| 156 // Set the options |
| 157 var extension = window.opener; |
| 158 document.getElementById("iterations").value = extension.iterations; |
| 159 document.getElementById("clearconns").checked = extension.clearConnections; |
| 160 document.getElementById("clearcache").checked = extension.clearCache; |
| 161 } |
| 162 |
| 163 function getWidth(mean, max_width) { |
| 164 return Math.floor(max_width * (mean / max_sample)); |
| 165 } |
| 166 |
| 167 // Apply configuration back to our extension |
| 168 function config() { |
| 169 var extension = window.opener; |
| 170 var iterations = parseInt(document.getElementById("iterations").value); |
| 171 var clearConnections = document.getElementById("clearconns").checked; |
| 172 var clearCache = document.getElementById("clearcache").checked; |
| 173 if (iterations > 0) { |
| 174 extension.iterations = iterations; |
| 175 extension.clearConnections = clearConnections; |
| 176 extension.clearCache = clearCache; |
| 177 } |
| 178 } |
| 179 |
| 180 // Clear the results |
| 181 function clearResults() { |
| 182 window.opener.results.data = new Array(); |
| 183 jsinit(); |
| 184 } |
| 185 </script> |
| 186 |
| 187 </head> |
| 188 |
| 189 <body onload="jsinit()"> |
| 190 |
| 191 <h1><div id="header">Page Benchmark Results</div></h1> |
| 192 |
| 193 <h1>Configuration</h1> |
| 194 |
| 195 <span>Iterations</span> |
| 196 <input id="iterations" type=text style="text-align:right"> |
| 197 <input type="button" value="Clear Results" onclick="clearResults();"> |
| 198 Clear Connections?<input id="clearconns" type="checkbox"> |
| 199 Clear Cache?<input id="clearcache" type="checkbox"> |
| 200 <input type="button" value="OK" onclick="config();"> |
| 201 <p> |
| 202 |
| 203 <h1>Results</h1> |
| 204 |
| 205 <table class="list" width="100%"> |
| 206 <tr> |
| 207 <th width=30%>url</th> |
| 208 <th width=50>avg</th> |
| 209 <th width=50>stddev</th> |
| 210 <th width=50>min</th> |
| 211 <th width=50>max</th> |
| 212 <th samples</th> |
| 213 </tr> |
| 214 |
| 215 <tr id="t" jsselect="data"> |
| 216 <td class="url" jseval="$width = getWidth($this.mean, 600)"><div jsvalues=".st
yle.width:$width" class="bggraph"><a jsvalues="href:$this.url" jscontent="url"><
/a></div></td> |
| 217 <td class="avg" jscontent="mean"></td> |
| 218 <td class="avg" jscontent="stddev"></td> |
| 219 <td class="avg" jscontent="min"></td> |
| 220 <td class="avg" jscontent="max"></td> |
| 221 <td class="data"><span jsselect="results"><span jscontent="$this"></span>,</sp
an> </td> |
| 222 </tr> |
| 223 </table> |
| 224 |
| 225 <script> |
| 226 </script> |
| 227 |
| 228 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
