PerformanceTests/Speedometer/resources/main.js

   1 window.benchmarkClient = {
   2     iterationCount: 20,
   3     testsCount: null,
   4     suitesCount: null,
   5     _timeValues: [],
   6     _finishedTestCount: 0,
   7     _progressCompleted: null,
   8     willAddTestFrame: function (frame) {
   9         var main = document.querySelector('main');
  10         var style = getComputedStyle(main);
  11         frame.style.left = main.offsetLeft + parseInt(style.borderLeftWidth) + parseInt(style.paddingLeft) + 'px';
  12         frame.style.top = main.offsetTop + parseInt(style.borderTopWidth) + parseInt(style.paddingTop) + 'px';
  13     },
  14     willRunTest: function (suite, test) {
  15         document.getElementById('info').textContent = suite.name + ' ( ' + this._finishedTestCount + ' / ' + this.testsCount + ' )';
  16     },
  17     didRunTest: function () {
  18         this._finishedTestCount++;
  19         this._progressCompleted.style.width = (this._finishedTestCount * 100 / this.testsCount) + '%';
  20     },
  21     didRunSuites: function (measuredValues) {
  22         this._timeValues.push(measuredValues.total);
  23     },
  24     willStartFirstIteration: function () {
  25         this._timeValues = [];
  26         this._finishedTestCount = 0;
  27         this._progressCompleted = document.getElementById('progress-completed');
  28         document.getElementById('logo-link').onclick = function (event) { event.preventDefault(); return false; }
  29     },
  30     didFinishLastIteration: function () {
  31         document.getElementById('logo-link').onclick = null;
  32
  33         var displayUnit = location.search == '?ms' || location.hash == '#ms' ? 'ms' : 'runs/min';
  34         var results = this._computeResults(this._timeValues, 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 (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 computerScore(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     var enabledSuites = Suites.filter(function (suite) { return !suite.disabled });
 154     var totalSubtestCount = enabledSuites.reduce(function (testsCount, suite) { return testsCount + suite.tests.length; }, 0);
 155     benchmarkClient.testsCount = benchmarkClient.iterationCount * totalSubtestCount;
 156     benchmarkClient.suitesCount = enabledSuites.length;
 157     var runner = new BenchmarkRunner(Suites, benchmarkClient);
 158     runner.runMultipleIterations(benchmarkClient.iterationCount);
 159 }
 160
 161 function computeScore(time) {
 162     return 60 * 1000 * benchmarkClient.suitesCount / time;
 163 }
 164
 165 function showSection(sectionIdentifier, pushState) {
 166     var currentSectionElement = document.querySelector('section.selected');
 167     console.assert(currentSectionElement);
 168
 169     var newSectionElement = document.getElementById(sectionIdentifier);
 170     console.assert(newSectionElement);
 171
 172     currentSectionElement.classList.remove('selected');
 173     newSectionElement.classList.add('selected');
 174
 175     if (pushState)
 176         history.pushState({section: sectionIdentifier}, document.title);
 177 }
 178
 179 function showHome() {
 180     showSection('home', true);
 181 }
 182
 183 function startTest() {
 184     showSection('running');
 185     startBenchmark();
 186 }
 187
 188 function showResultsSummary() {
 189     showSection('summarized-results', true);
 190 }
 191
 192 function showResultDetails() {
 193     showSection('detailed-results', true);
 194 }
 195
 196 function showAbout() {
 197     showSection('about', true);
 198 }
 199
 200 window.addEventListener('DOMContentLoaded', function () {
 201     if (benchmarkClient.prepareUI)
 202         benchmarkClient.prepareUI();
 203 });