InteractiveRunner.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<head>

<title>Speedometer 2.0 Interactive Runner</title>

<script src="../Speedometer/resources/benchmark-runner.js" defer></script>

<script src="resources/style-bench.js" defer></script>

<script src="resources/tests.js" defer></script>

<style>

iframe { border: 1px solid black; }

ol { list-style: none; margin: 0; padding: 0; }

ol ol { margin-left: 2em; list-position: outside; }

.running { text-decoration: underline; }

.ran { color: grey; }

nav { position: absolute; right: 10px; height: 600px; }

nav > ol { height: 100%; overflow-y: scroll; }

</style>

</head>

<body>

<script>

function formatTestName(suiteName, testName) {

    return suiteName + (testName ? '/' + testName : '');

function createUIForSuites(suites, onstep, onrun) {

    var control = document.createElement('nav');

    var ol = document.createElement('ol');

    var checkboxes = [];

    for (var suiteIndex = 0; suiteIndex < suites.length; suiteIndex++) {

        var suite = suites[suiteIndex];

        var li = document.createElement('li');

        var checkbox = document.createElement('input');

        checkbox.id = suite.name;

        checkbox.type = 'checkbox';

        checkbox.checked = !suite.disabled;

        checkbox.onchange = (function (suite, checkbox) { return function () { suite.disabled = !checkbox.checked; } })(suite, checkbox);

        checkbox.onchange();

        checkboxes.push(checkbox);

        li.appendChild(checkbox);

        var label = document.createElement('label');

        label.appendChild(document.createTextNode(formatTestName(suite.name)));

        li.appendChild(label);

        label.htmlFor = checkbox.id;

        var testList = document.createElement('ol');

        for (var testIndex = 0; testIndex < suite.tests.length; testIndex++) {

            var testItem = document.createElement('li');

            var test = suite.tests[testIndex];

            var anchor = document.createElement('a');

            anchor.id = suite.name + '-' + test.name;

            test.anchor = anchor;

            anchor.appendChild(document.createTextNode(formatTestName(suite.name, test.name)));

            testItem.appendChild(anchor);

            testList.appendChild(testItem);

        li.appendChild(testList);

        ol.appendChild(li);

    control.appendChild(ol);

    var button = document.createElement('button');

    button.textContent = 'Step';

    button.onclick = onstep;

    control.appendChild(button);

    var button = document.createElement('button');

    button.textContent = 'Run';

    button.id = 'runSuites';

    button.onclick = onrun;

    control.appendChild(button);

    var button = document.createElement('button');

    button.textContent = 'Select all';

    button.onclick = function () {

        for (var suiteIndex = 0; suiteIndex < suites.length; suiteIndex++) {

            suites[suiteIndex].disabled = false;

            checkboxes[suiteIndex].checked = true;

};

    control.appendChild(button);

    var button = document.createElement('button');

    button.textContent = 'Unselect all';

    button.onclick = function () {

        for (var suiteIndex = 0; suiteIndex < suites.length; suiteIndex++) {

            suites[suiteIndex].disabled = true;

            checkboxes[suiteIndex].checked = false;

};

    control.appendChild(button);

    return control;

var parseQueryString = (function (pairList) {

    var pairs = {};

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

        var keyValue = pairList[i].split('=', 2);

        if (keyValue.length == 1)

            pairs[keyValue[0]] = '';

        else

            pairs[keyValue[0]] = decodeURIComponent(keyValue[1].replace(/\+/g, ' '));

    return pairs;

})(window.location.search.substr(1).split('&'));

function disableAllSuitesExcept(suiteName) {

    Suites.forEach(function(element) {

        if (element.name !== suiteName)

            element.disabled = true;

});

function startTest() {

    var queryParam = parseQueryString['suite'];

    if (queryParam !== undefined)

        disableAllSuitesExcept(queryParam);

    var runner = new BenchmarkRunner(Suites, {

        willRunTest: function (suite, test) {

            test.anchor.classList.add('running');

},

        didRunTest: function (suite, test) {

            var classList = test.anchor.classList;

            classList.remove('running');

            classList.add('ran');

},

        didRunSuites: function (measuredValues) {

            var results = '';

            for (var suiteName in measuredValues.tests) {

                var suiteResults = measuredValues.tests[suiteName];

                for (var testName in suiteResults.tests) {

                    var testResults = suiteResults.tests[testName];

                    for (var subtestName in testResults.tests) {

                        results += suiteName + ' : ' + testName + ' : ' + subtestName

                            + ': ' + testResults.tests[subtestName] + ' ms\n';

                results += suiteName + ' : ' + suiteResults.total + ' ms\n';

            results += 'Arithmetic Mean : ' + measuredValues.mean  + ' ms\n';

            results += 'Geometric Mean : ' + measuredValues.geomean  + ' ms\n';

            results += 'Total : ' + measuredValues.total + ' ms\n';

            results += 'Score : ' + measuredValues.score + ' rpm\n';

            if (!results)

                return;

            var pre = document.createElement('pre');

            document.body.appendChild(pre);

            pre.textContent = results;

});

    var currentState = null;

    // Don't call step while step is already executing.

    document.body.appendChild(createUIForSuites(Suites,

        function () { runner.step(currentState).then(function (state) { currentState = state; }); },

        function () { runner.runAllSteps(currentState); currentState = null; }));

    if (parseQueryString['startAutomatically'] !== undefined)

        document.getElementById('runSuites').click();

window.addEventListener('load', startTest);

</script>

</body>

</html>