sandbox/performance/index.html

	index.html revision 58b14190ecbc18fd1d440268edfa0eb7561fc91f
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>YUI Performance Tool</title>
    <link rel="stylesheet" href="assets/performance.css">
</head>
<body>

<h1>YUI Performance Tool</h1>

<p>
    <select id="suites"></select>
    <button id="start">Start Tests</button>
    <button id="stop" disabled="disabled">Stop Tests</button>
    <button id="snap" disabled="disabled">Result Snapshot (JSON)</button>
</p>

<p>
    <input type="radio" id="reportDetail" name="report" checked="checked" value="detail">
    <label for="reportDetail">Detailed Report</label>

    <input type="radio" id="reportComparison" name="report" value="comparison">
    <label for="reportComparison">Comparison Report</label>
</p>

<div id="results"></div>

<p class="firefox hidden">
    <strong>Firefox users:</strong> For accurate results, disable Firebug.
</p>

<p class="ie hidden">
    <strong>IE users:</strong> Due to limitations in the resolution of the
    Windows timer APIs that IE uses, times in IE have an error range of ±15ms.
</p>

<div id="snapshot" class="hidden">
    <h2><label for="result-snapshot">Result Snapshot</label></h2>
    <textarea id="result-snapshot" cols="5" rows="50"></textarea>
</div>

<script src="/build/yui/yui-min.js"></script>
<script src="js/sandbox.js"></script>
<script src="js/performance.js"></script>
<script src="js/performance-report.js"></script>
<script src="js/reports/performance-report-comparison.js"></script>
<script src="tests/perf-component.js"></script>
<script src="tests/perf-instantiation.js"></script>
<script src="tests/perf-loops-native.js"></script>
<script src="tests/perf-loops-yui3.js"></script>
<script>
var Y = YUI().use('event-base', 'history', 'json-stringify', 'node-base',
    'performance', 'performance-report-comparison', 'perf-component', 'perf-instantiation',
    'perf-loops-native', 'perf-loops-yui3', function (Y) {

    var SRC_UI = 'ui',

        Performance = Y.Performance,

        history = new Y.History(),
        perf    = new Performance(),
        report,

        reportComparison = Y.one('#reportComparison'),
        reportDetail     = Y.one('#reportDetail'),

        snap   = Y.one('#snap'),
        start  = Y.one('#start'),
        stop   = Y.one('#stop'),
        suites = Y.one('#suites');

    function setReportType(type, src) {
        perf.stop();

        if (report) {
            report.destroy();
        }

        Y.one('#results').purge(true).set('innerHTML', '');

        if (type === 'comparison') {
            report = new Y.PerformanceReport.Comparison({performance: perf});

            if (src !== SRC_UI) {
                reportComparison.setAttribute('checked', true);
            }
        } else {
            report = new Y.PerformanceReport({performance: perf});

            if (src !== SRC_UI) {
                reportDetail.setAttribute('checked', true);
            }
        }

        if (src !== Y.History.SRC_HASH) {
            history.add('report', type);
        }

        report.render('#results');
    }

    if (Y.UA.gecko) {
        Y.all('.firefox').removeClass('hidden');
    } else if (Y.UA.ie) {
        Y.all('.ie').removeClass('hidden');
    }

    // Populate the test list.
    Y.Object.each(Performance.getTestSuites(), function (suite, name) {
        suites.append(Y.Node.create('<option/>').append(name));
    });

    // Set the selected suite.
    suites.set('value', history.get('suite'));

    // Set the selected report type.
    setReportType(history.get('report'), Y.History.SRC_HASH);

    // Handle history changes.
    history.on('reportChange', function (e) {
        setReportType(e.newVal, e.src);
    });

    history.on('reportRemove', function (e) {
        setReportType(null, e.src);
    });

    history.on('suiteChange', function (e) {
        perf.stop();

        if (e.src === Y.History.SRC_HASH) {
            suites.set('value', e.newVal);
        }
    });

    history.on('suiteRemove', function (e) {
        perf.stop();

        if (e.src === Y.History.SRC_HASH) {
            suites.set('selectedIndex', 0);
        }
    });

    // Handle report type selection changes.
    reportComparison.on('click', function () {
        setReportType('comparison', SRC_UI);
    });

    reportDetail.on('click', function () {
        setReportType('detail', SRC_UI);
    });

    // Handle module selection changes.
    suites.on('change', function () {
        history.add('suite', this.get('value') || null);
    });

    // Handle Start clicks.
    start.on('click', function () {
        perf.start(suites.get('value'));
    });

    // Handle Stop clicks.
    stop.on('click', function () {
        perf.stop();
    });

    // Handle snapshot clicks.
    snap.on('click', function () {
        Y.one('#result-snapshot').set('value', Y.JSON.stringify(perf.get('results'), null, 2));
        Y.one('#snapshot').toggleClass('hidden');
    });

    // Handle test start.
    perf.on('start', function () {
        Y.all([snap, start]).set('disabled', true);
        stop.set('disabled', false);
        Y.one('#snapshot').addClass('hidden');
    });

    // Handle test stop/finish.
    perf.on('end', function () {
        Y.all([snap, start]).set('disabled', false);
        stop.set('disabled', true);
    });
});
</script>

</body>
</html>