Commit the change meant to be included in the previous commit.
[WebKit-https.git] / PerformanceTests / Speedometer / resources / main.js
1 window.benchmarkClient = {
2     displayUnit: 'runs/min',
3     iterationCount: 10,
4     testsCount: null,
5     suitesCount: null,
6     _timeValues: [],
7     _finishedTestCount: 0,
8     _progressCompleted: null,
9     willAddTestFrame: function (frame) {
10         var main = document.querySelector('main');
11         var style = getComputedStyle(main);
12         frame.style.left = main.offsetLeft + parseInt(style.borderLeftWidth) + parseInt(style.paddingLeft) + 'px';
13         frame.style.top = main.offsetTop + parseInt(style.borderTopWidth) + parseInt(style.paddingTop) + 'px';
14     },
15     willRunTest: function (suite, test) {
16         document.getElementById('info').textContent = suite.name + ' ( ' + this._finishedTestCount + ' / ' + this.testsCount + ' )';
17     },
18     didRunTest: function () {
19         this._finishedTestCount++;
20         this._progressCompleted.style.width = (this._finishedTestCount * 100 / this.testsCount) + '%';
21     },
22     didRunSuites: function (measuredValues) {
23         this._timeValues.push(measuredValues.total);
24     },
25     willStartFirstIteration: function () {
26         this._timeValues = [];
27         this._finishedTestCount = 0;
28         this._progressCompleted = document.getElementById('progress-completed');
29         document.getElementById('logo-link').onclick = function (event) { event.preventDefault(); return false; }
30     },
31     didFinishLastIteration: function () {
32         document.getElementById('logo-link').onclick = null;
33
34         var results = this._computeResults(this._timeValues, this.displayUnit);
35
36         this._updateGaugeNeedle(results.mean);
37         document.getElementById('result-number').textContent = results.formattedMean;
38         if (results.formattedDelta)
39             document.getElementById('confidence-number').textContent = '\u00b1 ' + results.formattedDelta;
40
41         this._populateDetailedResults(results.formattedValues);
42         document.getElementById('results-with-statistics').textContent = results.formattedMeanAndDelta;
43
44         if (this.displayUnit == 'ms') {
45             document.getElementById('show-summary').style.display = 'none';
46             showResultDetails();
47         } else
48             showResultsSummary();
49     },
50     _computeResults: function (timeValues, displayUnit) {
51         var suitesCount = this.suitesCount;
52         function totalTimeInDisplayUnit(time) {
53             if (displayUnit == 'ms')
54                 return time;
55             return computeScore(time);
56         }
57
58         function sigFigFromPercentDelta(percentDelta) {
59             return Math.ceil(-Math.log(percentDelta)/Math.log(10)) + 3;
60         }
61
62         function toSigFigPrecision(number, sigFig) {
63             var nonDecimalDigitCount = number < 1 ? 0 : (Math.floor(Math.log(number)/Math.log(10)) + 1);
64             return number.toPrecision(Math.max(nonDecimalDigitCount, Math.min(6, sigFig)));
65         }
66
67         var values = timeValues.map(totalTimeInDisplayUnit);
68         var sum = values.reduce(function (a, b) { return a + b; }, 0);
69         var arithmeticMean = sum / values.length;
70         var meanSigFig = 4;
71         var formattedDelta;
72         var formattedPercentDelta;
73         if (window.Statistics) {
74             var delta = Statistics.confidenceIntervalDelta(0.95, values.length, sum, Statistics.squareSum(values));
75             if (!isNaN(delta)) {
76                 var percentDelta = delta * 100 / arithmeticMean;
77                 meanSigFig = sigFigFromPercentDelta(percentDelta);
78                 formattedDelta = toSigFigPrecision(delta, 2);
79                 formattedPercentDelta = toSigFigPrecision(percentDelta, 2) + '%';
80             }
81         }
82
83         var formattedMean = toSigFigPrecision(arithmeticMean, Math.max(meanSigFig, 3));
84
85         return {
86             formattedValues: timeValues.map(function (time) {
87                 return toSigFigPrecision(totalTimeInDisplayUnit(time), 4) + ' ' + displayUnit;
88             }),
89             mean: arithmeticMean,
90             formattedMean: formattedMean,
91             formattedDelta: formattedDelta,
92             formattedMeanAndDelta: formattedMean + (formattedDelta ? ' \xb1 ' + formattedDelta + ' (' + formattedPercentDelta + ')' : ''),
93         };
94     },
95     _addDetailedResultsRow: function (table, iterationNumber, value) {
96         var row = document.createElement('tr');
97         var th = document.createElement('th');
98         th.textContent = 'Iteration ' + (iterationNumber + 1);
99         var td = document.createElement('td');
100         td.textContent = value;
101         row.appendChild(th);
102         row.appendChild(td);
103         table.appendChild(row);
104     },
105     _updateGaugeNeedle: function (rpm) {
106         var needleAngle = Math.max(0, Math.min(rpm, 140)) - 70;
107         var needleRotationValue = 'rotate(' + needleAngle + 'deg)';
108
109         var gaugeNeedleElement = document.querySelector('#summarized-results > .gauge .needle');
110         gaugeNeedleElement.style.setProperty('-webkit-transform', needleRotationValue);
111         gaugeNeedleElement.style.setProperty('-moz-transform', needleRotationValue);
112         gaugeNeedleElement.style.setProperty('-ms-transform', needleRotationValue);
113         gaugeNeedleElement.style.setProperty('transform', needleRotationValue);
114     },
115     _populateDetailedResults: function (formattedValues) {
116         var resultsTables = document.querySelectorAll('.results-table');
117         var i = 0;
118         resultsTables[0].innerHTML = '';
119         for (; i < Math.ceil(formattedValues.length / 2); i++)
120             this._addDetailedResultsRow(resultsTables[0], i, formattedValues[i]);
121         resultsTables[1].innerHTML = '';
122         for (; i < formattedValues.length; i++)
123             this._addDetailedResultsRow(resultsTables[1], i, formattedValues[i]);
124     },
125     prepareUI: function () {
126         window.addEventListener('popstate', function (event) {
127             if (event.state) {
128                 var sectionToShow = event.state.section;
129                 if (sectionToShow) {
130                     var sections = document.querySelectorAll('main > section');
131                     for (var i = 0; i < sections.length; i++) {
132                         if (sections[i].id === sectionToShow)
133                             return showSection(sectionToShow, false);
134                     }
135                 }
136             }
137             return showSection('home', false);
138         }, false);
139
140         function updateScreenSize() {
141             // FIXME: Detect when the window size changes during the test.
142             var screenIsTooSmall = window.innerWidth < 850 || window.innerHeight < 650;
143             document.getElementById('screen-size').textContent = window.innerWidth + 'px by ' + window.innerHeight + 'px';
144             document.getElementById('screen-size-warning').style.display = screenIsTooSmall ? null : 'none';
145         }
146
147         window.addEventListener('resize', updateScreenSize);
148         updateScreenSize();
149     }
150 }
151
152 function startBenchmark() {
153     if (location.search.length > 1) {
154         var parts = location.search.substring(1).split('&');
155         for (var i = 0; i < parts.length; i++) {
156             var keyValue = parts[i].split('=');
157             var key = keyValue[0];
158             var value = keyValue[1];
159             switch (key) {
160             case 'unit':
161                 if (value == 'ms')
162                     benchmarkClient.displayUnit = 'ms';
163                 else
164                     console.error('Invalid unit: ' + value);
165                 break;
166             case 'iterationCount':
167                 var parsedValue = parseInt(value);
168                 if (!isNaN(parsedValue))
169                     benchmarkClient.iterationCount = parsedValue;
170                 else
171                     console.error('Invalid iteration count: ' + value);
172                 break;
173             }
174         }
175     }
176
177     var enabledSuites = Suites.filter(function (suite) { return !suite.disabled });
178     var totalSubtestCount = enabledSuites.reduce(function (testsCount, suite) { return testsCount + suite.tests.length; }, 0);
179     benchmarkClient.testsCount = benchmarkClient.iterationCount * totalSubtestCount;
180     benchmarkClient.suitesCount = enabledSuites.length;
181     var runner = new BenchmarkRunner(Suites, benchmarkClient);
182     runner.runMultipleIterations(benchmarkClient.iterationCount);
183 }
184
185 function computeScore(time) {
186     return 60 * 1000 * benchmarkClient.suitesCount / time;
187 }
188
189 function showSection(sectionIdentifier, pushState) {
190     var currentSectionElement = document.querySelector('section.selected');
191     console.assert(currentSectionElement);
192
193     var newSectionElement = document.getElementById(sectionIdentifier);
194     console.assert(newSectionElement);
195
196     currentSectionElement.classList.remove('selected');
197     newSectionElement.classList.add('selected');
198
199     if (pushState)
200         history.pushState({section: sectionIdentifier}, document.title);
201 }
202
203 function showHome() {
204     showSection('home', true);
205 }
206
207 function startTest() {
208     showSection('running');
209     startBenchmark();
210 }
211
212 function showResultsSummary() {
213     showSection('summarized-results', true);
214 }
215
216 function showResultDetails() {
217     showSection('detailed-results', true);
218 }
219
220 function showAbout() {
221     showSection('about', true);
222 }
223
224 window.addEventListener('DOMContentLoaded', function () {
225     if (benchmarkClient.prepareUI)
226         benchmarkClient.prepareUI();
227 });