Split benchmark into two different pages
authorjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 24 Dec 2015 01:31:47 +0000 (01:31 +0000)
committerjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 24 Dec 2015 01:31:47 +0000 (01:31 +0000)
https://bugs.webkit.org/show_bug.cgi?id=152458

Reviewed by Simon Fraser.

Address comments.

* Animometer/resources/debug-runner/benchmark-runner.js:
(BenchmarkRunner.prototype._runTestAndRecordResults): When the testing is complete the frame owning the
sampler goes away, and a later call to get the JSON data is no longer available. Process the data
right here, instead, and just reference it when displaying the results in ResultsDashboard.prototype._processData.
* Animometer/resources/extensions.js:
(Array.prototype.fill.Array.prototype.fill): Add a null check. Remove braces around single-line clause.
(Array.prototype.find.Array.prototype.find): Update the null check.
(ResultsDashboard.prototype._processData): Use the already-processed data.
* Animometer/resources/runner/animometer.css:
(.frame-container > iframe): Remove calc().

Move Array functions to extensions.js since that is included by the harness.
Add ES6 Array polyfills.

* Animometer/resources/algorithm.js:
(Array.prototype.swap): Moved to extensions.js.
* Animometer/resources/extensions.js:
(Array.prototype.swap):
(Array.prototype.fill): Added.
(Array.prototype.find): Added.

Adjust styles for iPad.

* Animometer/resources/runner/animometer.css:
(@media screen and (min-device-width: 768px)): Apply to iPad as well.
(@media screen and (max-device-width: 1024px)): Update width for iPads.

Adjustment styles for iOS.

* Animometer/developer.html: Different divs contain the iframe, so use a class instead and
update the style rules.
* Animometer/index.html:
* Animometer/resources/debug-runner/animometer.css: Remove extraneous rules.
(@media screen and (min-device-width: 1800px)): Move this up.
* Animometer/resources/runner/animometer.css: Add rules to accomodate iOS.

Get rid of prefixed flex properties for now.

* Animometer/resources/debug-runner/animometer.css:
* Animometer/resources/runner/animometer.css:

Update the structure of the harness. Remove the JSON-per-test but keep
the JSON of the whole test run. Use the full page in order to display
the graph.

* Animometer/developer.html: Update several of the JS file includes to UTF-8. Remove header and footer. Test results screen includes score,
average, and worst 5% statistics.
* Animometer/index.html: Make structure similar to developer.html.
* Animometer/resources/debug-runner/animometer.css: Remove most of the
button rules since they are superfluous. Move the progress bar to the
top, fixed. Update the results page rules.
* Animometer/resources/debug-runner/animometer.js: Remove most of the
additions to sectionsManager since they are no longer needed.
(setSectionHeader): Updates header of the section.
(window.suitesManager._updateStartButtonState): Update selector.
(showResults): Add keypress event for selecting different data for
copy/paste. Update how the results are populated. Include full test
JSON in a textarea, rather than requiring a button press.
(showTestGraph):
* Animometer/resources/debug-runner/tests.js: Update structure of Headers. Define different kinds of headers. Headers can control their
title, and the text used as the cell contents, including class name.
* Animometer/resources/extensions.js:
(ResultsTable): Update to include a flattened version of the headers,
used while populating table contents. Remove unneeded helper functions
for creating the table. Rename "show" to "add".
* Animometer/resources/runner/animometer.css: Update rules to
accommodate the new structure.
* Animometer/resources/runner/animometer.js:
(window.sectionsManager.setSectionScore): Helper function to set the
score and mean for a section.
(window.sectionsManager.populateTable): Helper function to set the table.
(window.benchmarkController.showResults): Refactor.
(window.benchmarkController.selectResults): Update selectors.
* Animometer/resources/runner/tests.js: Set Headers. Debug harness
extends it.

Update debug runner to have similar names to the basic runner. Include
that page's CSS and remove extraneous CSS rules.

Get rid of the statistics table #record.

* Animometer/developer.html: Rename #home to #intro. Rename .spacer to hr.
* Animometer/resources/debug-runner/animometer.css: Set to flexbox when selected.
* Animometer/resources/debug-runner/animometer.js: Remove recordTable.
(window.suitesManager._updateStartButtonState): Update selector to #intro.
(setupRunningSectionStyle): Deleted.

* Animometer/resources/runner/animometer.css:
(#test-container.selected): Change to flex-box only when visible.

Remove recordTable.
* Animometer/resources/debug-runner/benchmark-runner.js:
(BenchmarkRunner.prototype._runTestAndRecordResults):
* Animometer/resources/runner/tests.js:
* Animometer/tests/bouncing-particles/resources/bouncing-canvas-images.js:
* Animometer/tests/bouncing-particles/resources/bouncing-canvas-particles.js:
* Animometer/tests/bouncing-particles/resources/bouncing-canvas-shapes.js:
* Animometer/tests/bouncing-particles/resources/bouncing-css-images.js:
* Animometer/tests/bouncing-particles/resources/bouncing-css-shapes.js:
* Animometer/tests/bouncing-particles/resources/bouncing-particles.js:
* Animometer/tests/bouncing-particles/resources/bouncing-svg-images.js:
* Animometer/tests/bouncing-particles/resources/bouncing-svg-shapes.js:
* Animometer/tests/examples/resources/canvas-electrons.js:
* Animometer/tests/examples/resources/canvas-stars.js:
* Animometer/tests/misc/resources/compositing-transforms.js:
* Animometer/tests/resources/main.js:
* Animometer/tests/resources/stage.js:
(StageBenchmark): Remove _recordTable.
* Animometer/tests/simple/resources/simple-canvas-paths.js:
* Animometer/tests/simple/resources/simple-canvas.js:
* Animometer/tests/template/resources/template-canvas.js:
* Animometer/tests/template/resources/template-css.js:
* Animometer/tests/template/resources/template-svg.js:
* Animometer/tests/text/resources/layering-text.js:

* Animometer/resources/debug-runner/animometer.js:
(willStartFirstIteration): Fix selector, since results-table is used
in multiple places, so it cannot be an id.

Make it possible to select the scores, or the whole table data,
by cycling through different selections through key press of 's'.

* Animometer/resources/runner/animometer.js:
(window.benchmarkController.showResults): Attach a keypress handler
if it hasn't been added already.
(window.benchmarkController.selectResults):
* Animometer/resources/runner/tests.js: Cycle through different
ranges.

Fix a few fly-by errors.

* Animometer/resources/debug-runner/benchmark-runner.js:
(BenchmarkRunnerState.prototype.prepareCurrentTest): Update the frame relative path
since the files are now in the top directory instead of inside runner/.
(BenchmarkRunner.prototype._runTestAndRecordResults): Incorrect reference to function.
(BenchmarkRunner.prototype.step): Member variable is never used.

A little stylistic cleanup.

* Animometer/resources/debug-runner/benchmark-runner.js:
* Animometer/resources/extensions.js:
(window.DocumentExtension.createElement):
* Animometer/tests/resources/main.js:
(Benchmark.prototype.record):
* Animometer/tests/resources/stage.js:
(StageBenchmark.prototype.showResults): Reverse progress and message.
The message appears less frequently than the progress.
* Animometer/tests/simple/resources/simple-canvas.js:
(SimpleCanvasBenchmark): Remove unused options.

Add newer version of harness in a new page. Consolidate differences between the two
pages.

* Animometer/developer.html: Include runner/animometer.js. Rename the JS function
to run the benchmark to startBenchmark() instead of startTest(). Rename #running to
#test-container.
* Animometer/index.html: Added. Similarly calls startBenchmark() and has #test-container.
* Animometer/resources/debug-runner/animometer.css: Make the canvas 2:1 (1200px x 800px)
instead of 4:3.

Split out benchmarkRunnerClient and benchmarkController.

* Animometer/resources/debug-runner/animometer.js: Move needed functions out of
benchmarkRunnerClient, and leave the rest here to extend that object. Get rid of _resultsTable
and move populating the results table into benchmarkController. Rename _resultsDashboard
to results and make it accessible for other objects to use.
(willAddTestFrame): This is unnecessary. Remove.

(window.sectionsManager.showScore): Grab it from the results object instead of
benchmarkRunnerClient.
(window.sectionsManager.showSection): Deleted. Moved to runner/animometer.js.

(window.benchmarkController._runBenchmark): Deleted. Mostly moved into _startBenchmark.
(window.benchmarkController.startBenchmark): Refactor to call _startBenchmark.
(window.benchmarkController.showResults): Include most of benchmarkRunnerClient.didFinishLastIteration()
here.

* Animometer/resources/debug-runner/benchmark-runner.js:
(BenchmarkRunner.prototype._appendFrame): Remove unneeded call to willAddTestFrame.
* Animometer/resources/extensions.js:
(ResultsDashboard): Change the class to process the sampler data on-demand and hold onto that data
for later referencing.
(ResultsDashboard.prototype.toJSON): Deleted.
(ResultsDashboard.prototype._processData): Rename toJSON to _processData since it's not really
outputting JSON. Store the processed data into a member variable that can be referenced later.
(ResultsDashboard.prototype.get data): Process the data if it hasn't already.
(ResultsDashboard.prototype.get score): Process the data if it hasn't already, then return the
aggregate score.
(ResultsTable.prototype._showHeader): When outputting the results to a table, don't force the
need for an empty children array. This was to allow for a header row in the table that spanned
multiple columns. In the simpler harness, this is not needed.
(ResultsTable.prototype._showEmptyCells):
(ResultsTable.prototype._showTest): This hardcoded the columns. At least for the name and score,
which is the bare minimum needed for the simpler harness, key off of the header name provided.
* Animometer/resources/runner/animometer.css: Added. Use a similar 2:1 ratio. The score tables are
split into the data and the headers, and are also displayed RTL so that a later patch allows a
user to copy-paste the data easily.
* Animometer/resources/runner/animometer.js: Added. Use a simpler version of benchmarkRunnerClient.
The debug harness will extend these classes.
(window.benchmarkController._startBenchmark): Used by both harnesses.
(window.benchmarkController.startBenchmark): Set hard-coded options.
(window.benchmarkController.showResults): Includes most of benchmarkRunnerClient.didFinishLastIteration()
here.

Get rid of utilities.js. Move it all into extensions.js.

* Animometer/resources/extensions.js:
* Animometer/tests/resources/utilities.js: Removed.

* Animometer/tests/bouncing-particles/bouncing-canvas-images.html: Remove script link.
* Animometer/tests/bouncing-particles/bouncing-canvas-shapes.html: Ditto.
* Animometer/tests/bouncing-particles/bouncing-css-images.html: Ditto.
* Animometer/tests/bouncing-particles/bouncing-css-shapes.html: Ditto.
* Animometer/tests/bouncing-particles/bouncing-svg-images.html: Ditto.
* Animometer/tests/bouncing-particles/bouncing-svg-shapes.html: Ditto.
* Animometer/tests/examples/canvas-electrons.html: Ditto.
* Animometer/tests/examples/canvas-stars.html: Ditto.
* Animometer/tests/misc/compositing-transforms.html: Ditto.
* Animometer/tests/simple/simple-canvas-paths.html: Ditto.
* Animometer/tests/template/template-canvas.html: Ditto.
* Animometer/tests/template/template-css.html: Ditto.
* Animometer/tests/template/template-svg.html: Ditto.
* Animometer/tests/text/layering-text.html: Ditto.

Split tests.js into two. Add a new suite to runner/tests.js.

* Animometer/developer.html: Update the script order. Scripts from
debug-runner/ will always build on those from runner/, and have the
same name.
* Animometer/resources/debug-runner/tests.js: Move "complex examples"
suite into "miscellaneous tests".
(Suite): Deleted.
(Suite.prototype.prepare): Deleted.
(Suite.prototype.run): Deleted.
(suiteFromName): Deleted.
* Animometer/resources/runner/tests.js: Added. Take definitions and
functions needed by the test harness. Leave the test suites behind.
(Suite): Moved from debug script.
(Suite.prototype.prepare): Ditto.
(Suite.prototype.run): Ditto.
(suiteFromName): Ditto.
(testFromName): Ditto.

Move benchmark resources out into resources/debug-runner, and update URLs.

* Animometer/developer.html: Renamed from PerformanceTests/Animometer/runner/animometer.html.
* Animometer/resources/debug-runner/animometer.css: Renamed from PerformanceTests/Animometer/runner/resources/animometer.css.
* Animometer/resources/debug-runner/animometer.js: Renamed from PerformanceTests/Animometer/runner/resources/animometer.js.
* Animometer/resources/debug-runner/benchmark-runner.js: Renamed from PerformanceTests/Animometer/runner/resources/benchmark-runner.js.
* Animometer/resources/debug-runner/d3.min.js: Renamed from PerformanceTests/Animometer/runner/resources/d3.min.js.
* Animometer/resources/debug-runner/graph.js: Renamed from PerformanceTests/Animometer/runner/resources/graph.js.
* Animometer/resources/debug-runner/tests.js: Renamed from PerformanceTests/Animometer/runner/resources/tests.js.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@194407 268f45cc-cd09-0410-ab3c-d52691b4dbfc

50 files changed:
PerformanceTests/Animometer/developer.html [new file with mode: 0644]
PerformanceTests/Animometer/index.html [new file with mode: 0644]
PerformanceTests/Animometer/resources/algorithm.js
PerformanceTests/Animometer/resources/debug-runner/animometer.css [new file with mode: 0644]
PerformanceTests/Animometer/resources/debug-runner/animometer.js [moved from PerformanceTests/Animometer/runner/resources/animometer.js with 65% similarity]
PerformanceTests/Animometer/resources/debug-runner/benchmark-runner.js [moved from PerformanceTests/Animometer/runner/resources/benchmark-runner.js with 90% similarity]
PerformanceTests/Animometer/resources/debug-runner/d3.min.js [moved from PerformanceTests/Animometer/runner/resources/d3.min.js with 100% similarity]
PerformanceTests/Animometer/resources/debug-runner/graph.js [moved from PerformanceTests/Animometer/runner/resources/graph.js with 100% similarity]
PerformanceTests/Animometer/resources/debug-runner/tests.js [moved from PerformanceTests/Animometer/runner/resources/tests.js with 70% similarity]
PerformanceTests/Animometer/resources/extensions.js
PerformanceTests/Animometer/resources/runner/animometer.css [new file with mode: 0644]
PerformanceTests/Animometer/resources/runner/animometer.js [new file with mode: 0644]
PerformanceTests/Animometer/resources/runner/tests.js [new file with mode: 0644]
PerformanceTests/Animometer/runner/animometer.html [deleted file]
PerformanceTests/Animometer/runner/resources/animometer.css [deleted file]
PerformanceTests/Animometer/tests/bouncing-particles/bouncing-canvas-images.html
PerformanceTests/Animometer/tests/bouncing-particles/bouncing-canvas-shapes.html
PerformanceTests/Animometer/tests/bouncing-particles/bouncing-css-images.html
PerformanceTests/Animometer/tests/bouncing-particles/bouncing-css-shapes.html
PerformanceTests/Animometer/tests/bouncing-particles/bouncing-svg-images.html
PerformanceTests/Animometer/tests/bouncing-particles/bouncing-svg-shapes.html
PerformanceTests/Animometer/tests/bouncing-particles/resources/bouncing-canvas-images.js
PerformanceTests/Animometer/tests/bouncing-particles/resources/bouncing-canvas-particles.js
PerformanceTests/Animometer/tests/bouncing-particles/resources/bouncing-canvas-shapes.js
PerformanceTests/Animometer/tests/bouncing-particles/resources/bouncing-css-images.js
PerformanceTests/Animometer/tests/bouncing-particles/resources/bouncing-css-shapes.js
PerformanceTests/Animometer/tests/bouncing-particles/resources/bouncing-particles.js
PerformanceTests/Animometer/tests/bouncing-particles/resources/bouncing-svg-images.js
PerformanceTests/Animometer/tests/bouncing-particles/resources/bouncing-svg-shapes.js
PerformanceTests/Animometer/tests/examples/canvas-electrons.html
PerformanceTests/Animometer/tests/examples/canvas-stars.html
PerformanceTests/Animometer/tests/examples/resources/canvas-electrons.js
PerformanceTests/Animometer/tests/examples/resources/canvas-stars.js
PerformanceTests/Animometer/tests/misc/compositing-transforms.html
PerformanceTests/Animometer/tests/misc/resources/compositing-transforms.js
PerformanceTests/Animometer/tests/resources/main.js
PerformanceTests/Animometer/tests/resources/stage.js
PerformanceTests/Animometer/tests/resources/utilities.js [deleted file]
PerformanceTests/Animometer/tests/simple/resources/simple-canvas-paths.js
PerformanceTests/Animometer/tests/simple/resources/simple-canvas.js
PerformanceTests/Animometer/tests/simple/simple-canvas-paths.html
PerformanceTests/Animometer/tests/template/resources/template-canvas.js
PerformanceTests/Animometer/tests/template/resources/template-css.js
PerformanceTests/Animometer/tests/template/resources/template-svg.js
PerformanceTests/Animometer/tests/template/template-canvas.html
PerformanceTests/Animometer/tests/template/template-css.html
PerformanceTests/Animometer/tests/template/template-svg.html
PerformanceTests/Animometer/tests/text/layering-text.html
PerformanceTests/Animometer/tests/text/resources/layering-text.js
PerformanceTests/ChangeLog

diff --git a/PerformanceTests/Animometer/developer.html b/PerformanceTests/Animometer/developer.html
new file mode 100644 (file)
index 0000000..86de154
--- /dev/null
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, user-scalable=no">
+    <link rel="stylesheet" href="resources/runner/animometer.css">
+    <link rel="stylesheet" href="resources/debug-runner/animometer.css">
+    <script src="resources/strings.js"></script>
+    <script src="resources/sampler.js"></script>
+    <script src="resources/extensions.js" charset="utf-8"></script>
+
+    <script src="resources/runner/tests.js" charset="utf-8"></script>
+    <script src="resources/debug-runner/tests.js" charset="utf-8"></script>
+    <script src="resources/runner/animometer.js"></script>
+    <script src="resources/debug-runner/animometer.js"></script>
+
+    <script src="resources/debug-runner/benchmark-runner.js"></script>
+    <script src="resources/debug-runner/d3.min.js"></script>
+    <script src="resources/debug-runner/graph.js"></script>
+</head>
+<body>
+    <main>
+        <hr>
+        <section id="intro" class="selected">
+            <h1>Animometer</h1>
+            <div>
+                <div id="suites">
+                    <h2>Suites:</h2>
+                    <ul class="tree"></ul>
+                </div>
+                <div id="options">
+                    <h2>Options:</h2>
+                    <form name="benchmark-options">
+                    <ul>
+                    <li>
+                        <label>Test length: <input type="number" id="test-interval" value="10"> seconds each</label>
+                    </li>
+                    <li>
+                        <h3>Display:</h3>
+                        <ul>
+                            <li><label><input name="display" type="radio" value="minimal" checked> Minimal</label></li>
+                            <li><label><input name="display" type="radio" value="progress-bar" checked> Progress bar</label></li>
+                        </ul>
+                    </li>
+                    <li>
+                        <h3>Adjusting the test complexity:</h3>
+                        <ul>
+                            <li><label><input name="adjustment" type="radio" value="fixed"> Keep constant</label></li>
+                            <li><label><input name="adjustment" type="radio" value="fixed-after-warmup"> Keep constant after warmup to target FPS</label></li>
+                            <li><label><input name="adjustment" type="radio" value="adaptive" checked> Maintain target FPS</label></li>
+                        </ul>
+                    </li>
+                    <li>
+                        <label>Target frame rate: <input type="number" id="frame-rate" value="50"> FPS</label>
+                    </li>
+                    <li>
+                        <label><input type="checkbox" id="estimated-frame-rate" checked> Filter frame rate calculation</label>
+                    </li>
+                    </ul>
+                    </form>
+                </div>
+            </div>
+            <button onclick="benchmarkController.startBenchmark()">Start Test</button>
+        </section>
+        <section id="test-container">
+            <div id="running-test" class="frame-container"></div>
+            <div id="progress">
+                <div id="progress-completed"></div>
+            </div>
+        </section>
+        <section id="results">
+            <h1>Animometer score</h1>
+            <p class="score"></p>
+            <div id="results-tables">
+                <div>
+                    <table id="results-score"></table>
+                    <table id="results-data"></table>
+                </div>
+                <table id="results-header"></table>
+            </div>
+            <div id="results-json">
+                JSON:
+                <textarea rows=1 onclick="this.focus();this.select()" readonly></textarea>
+            </div>
+            <button onclick="benchmarkController.startBenchmark()">Test Again</button>
+            <p>'s': Select different data for copy/paste</p>
+        </section>
+        <section id="test-graph">
+            <header>
+                <button onclick="benchmarkController.showResults()">&lt; Results</button>
+                <h1>Graph:</h1>
+            </header>
+            <p class="score"></p>
+            <p class="mean"></p>
+            <div id="test-graph-data"></div>
+        </section>
+        <hr>
+    </main>
+</body>
+</html>
diff --git a/PerformanceTests/Animometer/index.html b/PerformanceTests/Animometer/index.html
new file mode 100644 (file)
index 0000000..0c301e3
--- /dev/null
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no">
+    <link rel="stylesheet" href="resources/runner/animometer.css">
+    <script src="resources/strings.js"></script>
+    <script src="resources/sampler.js"></script>
+    <script src="resources/extensions.js" charset="utf-8"></script>
+
+    <script src="resources/runner/tests.js"></script>
+    <script src="resources/runner/animometer.js"></script>
+
+    <script src="resources/debug-runner/benchmark-runner.js"></script>
+</head>
+<body>
+    <main>
+        <hr>
+        <section id="intro" class="selected">
+            <h1>Animometer</h1>
+            <p>Animometer is a graphics benchmark that measures a browser’s capability to animate complex scenes at a target frame rate.</p>
+            <button onclick="benchmarkController.startBenchmark()">Run benchmark</button>
+        </section>
+        <section id="test-container" class="frame-container">
+        </section>
+        <section id="results">
+            <h1>Animometer score</h1>
+            <p class="score"></p>
+            <div id="results-tables">
+                <table id="results-score"></table>
+                <table id="results-header"></table>
+            </div>
+            <button onclick="benchmarkController.startBenchmark()">Test Again</button>
+        </section>
+        <hr>
+    </main>
+</body>
+</html>
index 3d3971f..0ef21a9 100644 (file)
@@ -1,11 +1,3 @@
-Array.prototype.swap = function(i, j)
-{
-    var t = this[i];
-    this[i] = this[j];
-    this[j] = t;
-    return this;
-}
-
 function Heap(maxSize, compare)
 {
     this._maxSize = maxSize;
diff --git a/PerformanceTests/Animometer/resources/debug-runner/animometer.css b/PerformanceTests/Animometer/resources/debug-runner/animometer.css
new file mode 100644 (file)
index 0000000..b4f82be
--- /dev/null
@@ -0,0 +1,391 @@
+body {
+    background-color: rgb(96, 96, 96);
+    color: rgb(235, 235, 235);
+}
+
+h1 {
+    margin: 5vh 0;
+}
+
+button {
+    border: 2px solid rgb(235, 235, 235);
+    color: rgb(235, 235, 235);
+}
+
+button:disabled {
+    border-color: rgba(235, 235, 235, .5);
+    color: rgba(235, 235, 235, .5);
+}
+
+button:hover {
+    background-color: rgba(255, 255, 255, .1);
+    cursor: pointer;
+}
+
+button:active {
+    color: inherit;
+    background-color: rgba(255, 255, 255, .2);
+}
+
+@media screen and (min-device-width: 1800px) {
+    section {
+        width: 1600px;
+        height: 800px;
+    }
+}
+
+/* -------------------------------------------------------------------------- */
+/*                               Tree                                         */
+/* -------------------------------------------------------------------------- */
+
+.tree {
+    padding: 0;
+    list-style-type: none;
+}
+
+.tree .expand-button {
+    position: absolute;
+    clip: rect(0, 0, 0, 0);
+}
+
+.tree .expand-button ~ ul {
+    display: none;
+}
+
+.tree .expand-button:checked ~ ul {
+    display: block;
+}
+
+.tree ul {
+    list-style-type:none;
+}
+
+.tree li {
+    position: relative;
+    padding: 0 0 1em 1em;
+}
+
+.tree ul li {
+    list-style:none;
+    padding: 1em 0 0 0em;
+}
+
+.tree > li:last-child {
+    padding-bottom: 0;
+}
+
+.tree-label {
+  position: relative;
+  display: inline-block;
+}
+
+label.tree-label {
+    cursor: pointer;
+}
+
+.tree > li > label.tree-label:before {
+    position: relative;
+    z-index: 1;
+    float: left;
+    margin: 0 0 0 -2em;
+    width: 1em;
+    height: 1em;
+    content: '\25BA';
+    text-align: center;
+    line-height: 2.5em;
+    font-size: .5em;
+}
+
+.tree > li > :checked ~ label.tree-label:before {
+    content: '\25BC';
+}
+
+@media screen and (max-device-width: 414px) {
+    .tree {
+        padding-left: 1em;
+    }
+    .tree > li > label.tree-label:before {
+        font-size: 1em;
+        margin-left: -1.75em;
+        line-height: 1em;
+    }
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                 Intro Section                              */
+/* -------------------------------------------------------------------------- */
+
+#intro {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-content: center;
+
+    min-height: 600px;
+    height: auto;
+}
+
+#intro h2 {
+    margin-top: 0;
+    font-size: 1.2em;
+}
+
+#intro > div {
+    width: 100%;
+    margin: 2em 0;
+    flex-direction: row;
+    display: flex;
+    align-content: flex-start;
+}
+
+#suites {
+    padding-left: 15vw;
+    flex: 0 1 40%;
+}
+
+#options {
+    flex: 1 1 auto;
+}
+
+#intro input[type="number"] {
+    width: 50px;
+}
+#suites input[type="number"] {
+    display: none;
+    float: right;
+}
+
+#suites input[type="number"].selected {
+    display: inline;
+    margin: 0;
+}
+
+#suites ul ul {
+    font-size: .8em;
+    margin: 0;
+    padding: 0 0 0 1em;
+}
+
+#options ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+#options h3 {
+    font-size: 1em;
+    font-weight: inherit;
+    margin: 0 0 .3em 0;
+    padding: 0;
+}
+
+#options > form > ul > li {
+    padding: 0 0 1em 0;
+}
+
+#options ul ul {
+    padding: 0;
+}
+
+#options li {
+    padding: .1em 0;
+}
+
+@media screen and (min-device-width: 1800px) {
+    #intro {
+        min-height: 800px;
+    }
+}
+
+@media screen and (max-device-width: 414px) {
+    #intro {
+        min-height: 100%;
+    }
+
+    #intro > div {
+        flex-direction: column;
+    }
+
+    #suites,
+    #options {
+        padding: 0 5px;
+        margin: 0;
+        flex: 0 0 auto;
+    }
+}
+
+/* -------------------------------------------------------------------------- */
+/*                           Running Section                                  */
+/* -------------------------------------------------------------------------- */
+
+#test-container {
+    position: relative;
+}
+
+#running-test {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#progress {
+    display: none;
+}
+
+.display-progress-bar #progress {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 6px;
+    width: 100%;
+    background-color: rgb(128, 128, 128);
+}
+
+.display-progress-bar #progress-completed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 6px;
+    width: 0;
+    background-color: rgb(235, 96, 32);
+}
+
+@media screen and (min-device-width: 1800px) {
+    .frame-container > iframe {
+        width: 1600px;
+        height: 800px;
+    }
+}
+
+/* -------------------------------------------------------------------------- */
+/*                           Results Section                                  */
+/* -------------------------------------------------------------------------- */
+
+#results h1, #test-graph h1 {
+    font-size: 2em;
+}
+
+.score {
+    font-size: 3em;
+}
+
+.mean {
+    margin-top: 0;
+    margin-bottom: 1em;
+    font-size: 1.5em;
+    font-weight: 400;
+}
+
+#results-data .average {
+    padding-left: 1em;
+    text-align: right;
+}
+
+#results-data .stdev {
+    text-align: left;
+    padding-left: .25em;
+}
+
+#results-data button.small-button {
+    border: 1px solid rgba(235, 235, 235, .9);
+    color: rgba(235, 235, 235, .9);
+    border-radius: 2px;
+    padding: 1px 4px;
+    margin: 0 0 0 1em;
+    font-size: 9px;
+}
+
+#results-data button.small-button:active {
+    background-color: rgba(235, 235, 235, .2);
+    color: inherit;
+}
+
+#results-tables td.noisy-results {
+    color: rgb(255, 104, 104);
+}
+
+#results-tables div {
+    direction: ltr;
+    display: flex;
+    flex-direction: row;
+}
+
+#results-json {
+    margin-bottom: 3em;
+}
+
+#results-json textarea {
+    vertical-align: sub;
+}
+
+#test-graph {
+    flex: 1 0 calc(100% - 40px);
+}
+
+#test-graph h1 {
+    margin-bottom: 0;
+}
+
+#test-graph header {
+    position: relative;
+    width: 100%;
+}
+
+#test-graph header button {
+    position: absolute;
+    top: 1.5em;
+    left: 0;
+    border-width: 1px;
+    font-size: 1em;
+    padding: .5em 1em;
+}
+
+#test-graph-data {
+    flex: 1 1 auto;
+    align-self: stretch;
+}
+
+/* -------------------------------------------------------------------------- */
+/*                           Graph Section                                    */
+/* -------------------------------------------------------------------------- */
+
+#test-graph-data {
+    font: 10px sans-serif;
+    color: rgb(235, 235, 235);
+}
+
+#test-graph-data > svg {
+    fill: none;
+}
+
+.axis path,
+.axis line {
+    fill: none;
+    stroke: #999999;
+    shape-rendering: crispEdges;
+}
+
+.left-samples {
+    stroke: #7ADD49;
+    stroke-width: 1.5px;
+}
+
+.right-samples {
+    stroke: #FA4925;
+    stroke-width: 1.5px;
+}
+
+.sample-time {
+    stroke: #5493D6;
+}
+
+.left-mean {
+    stroke: #7ADD49;
+    opacity: .8;
+}
+
+.right-mean {
+    stroke: #FA4925;
+    opacity: .8;
+}
@@ -1,27 +1,7 @@
-window.benchmarkRunnerClient = {
-    iterationCount: 1,
+Utilities.extendObject(window.benchmarkRunnerClient, {
     testsCount: null,
     progressBar: null,
-    recordTable: null,
-    options: null,
-    score: 0,
-    _resultsDashboard: null,
-    _resultsTable: null,
-    
-    initialize: function(suites, options)
-    {
-        this.testsCount = this.iterationCount * suites.reduce(function (count, suite) { return count + suite.tests.length; }, 0);
-        this.options = options;
-    },
 
-    willAddTestFrame: function (frame)
-    {
-        var main = document.querySelector("main");
-        var style = getComputedStyle(main);
-        frame.style.left = main.offsetLeft + parseInt(style.borderLeftWidth) + parseInt(style.paddingLeft) + "px";
-        frame.style.top = main.offsetTop + parseInt(style.borderTopWidth) + parseInt(style.paddingTop) + "px";
-    },
-    
     didRunTest: function ()
     {
         this.progressBar.incRange();
@@ -29,115 +9,17 @@ window.benchmarkRunnerClient = {
     
     willStartFirstIteration: function ()
     {
-        this._resultsDashboard = new ResultsDashboard();
-        this._resultsTable = new ResultsTable(document.querySelector("section#results > data > table"), Headers);
-        
+        this.results = new ResultsDashboard();
         this.progressBar = new ProgressBar(document.getElementById("progress-completed"), this.testsCount);
-        this.recordTable = new ResultsTable(document.querySelector("section#running #record > table"), Headers);
-    },
-    
-    didRunSuites: function (suitesSamplers)
-    {
-        this._resultsDashboard.push(suitesSamplers);
-    },
-    
-    didFinishLastIteration: function ()
-    {
-        var json = this._resultsDashboard.toJSON(true, true);
-        this.score = json[Strings.json.score];
-        this._resultsTable.showIterations(json[Strings.json.results.iterations], this.options);
-        sectionsManager.showJSON("json", json[Strings.json.results.iterations][0]);
-        suitesManager.updateLocalStorageFromJSON(json[Strings.json.results.iterations][0]);
-        benchmarkController.showResults();
     }
-}
-
-window.sectionsManager =
-{
-    _sectionHeaderH1Element: function(sectionIdentifier)
-    {
-        return document.querySelector("#" + sectionIdentifier + " > header > h1");
-    },
-
-    _sectionDataElement: function(sectionIdentifier)
-    {
-        return document.querySelector("#" + sectionIdentifier + " > data");
-    },
-    
-    _sectionDataDivElement: function(sectionIdentifier)
-    {
-        return document.querySelector("#" + sectionIdentifier + " >  data > div");
-    },
-    
-    showScore: function(sectionIdentifier, title)
-    {
-        var element = this._sectionHeaderH1Element(sectionIdentifier);
-        element.textContent = title + ":";
-
-        var score = benchmarkRunnerClient.score.toFixed(2);
-        element.textContent += " [" + Strings.text.score + " = " + score + "]";
-    },
-    
-    showTestName: function(sectionIdentifier, title, testName)
-    {
-        var element = this._sectionHeaderH1Element(sectionIdentifier);
-        element.textContent = title + ":";
-
-        if (!testName.length)
-            return;
-            
-        element.textContent += " [" + Strings.text.testName + " = " + testName + "]";
-    },
-    
-    showJSON: function(sectionIdentifier, json)
-    {
-        var element = this._sectionDataDivElement(sectionIdentifier);
-        element.textContent = JSON.stringify(json, function(key, value) { 
-            if (typeof value == "number")
-                return value.toFixed(2);
-            return value;
-        }, 4);
-    },
-    
-    selectData: function(sectionIdentifier)
-    {
-        window.getSelection().removeAllRanges();
-        var element = this._sectionDataElement(sectionIdentifier);
-        var range = document.createRange();
-        range.selectNode(element);
-        window.getSelection().addRange(range);  
-    },
-    
-    selectDataContents: function(sectionIdentifier)
-    {
-        window.getSelection().removeAllRanges();
-        var element = this._sectionDataDivElement(sectionIdentifier);
-        var range = document.createRange();
-        range.selectNodeContents(element);
-        window.getSelection().addRange(range);
-    },
-        
-    showSection: function(sectionIdentifier, pushState)
-    {
-        var currentSectionElement = document.querySelector("section.selected");
-        console.assert(currentSectionElement);
-
-        var newSectionElement = document.getElementById(sectionIdentifier);
-        console.assert(newSectionElement);
+});
 
-        currentSectionElement.classList.remove("selected");
-        newSectionElement.classList.add("selected");
-
-        if (pushState)
-            history.pushState({section: sectionIdentifier}, document.title);
-    },
-
-    setupRunningSectionStyle: function(options)
+Utilities.extendObject(window.sectionsManager, {
+    setSectionHeader: function(sectionIdentifier, title)
     {
-        if (options["display"] != "statistics-table")
-            document.getElementById("record").style.display = "none";
+        document.querySelector("#" + sectionIdentifier + " h1").textContent = title;
     }
-}
+});
 
 window.optionsManager =
 {
@@ -242,7 +124,7 @@ window.suitesManager =
     _updateStartButtonState: function()
     {
         var suitesElements = this._suitesElements();
-        var startButton = document.querySelector("#home > footer > button");
+        var startButton = document.querySelector("#intro button");
         
         for (var i = 0; i < suitesElements.length; ++i) {
             var suiteElement = suitesElements[i];
@@ -417,8 +299,7 @@ window.suitesManager =
     }
 }
 
-window.benchmarkController =
-{
+Utilities.extendObject(window.benchmarkController, {
     initialize: function()
     {
         document.forms["benchmark-options"].addEventListener("change", benchmarkController.onFormChanged, true);
@@ -439,59 +320,43 @@ window.benchmarkController =
             suitesManager.updateDisplay();
         }
     },
-    
-    _runBenchmark: function(suites, options)
-    {
-        benchmarkRunnerClient.initialize(suites, options);
-        var frameContainer = document.querySelector("#running > #running-test");
-        var runner = new BenchmarkRunner(suites, frameContainer || document.body, benchmarkRunnerClient);
-        runner.runMultipleIterations();
-    },
 
-    startTest: function()
+    startBenchmark: function()
     {
         var options = optionsManager.updateLocalStorageFromUI();
         var suites = suitesManager.updateLocalStorageFromUI();
-        sectionsManager.setupRunningSectionStyle(options);
-        this._runBenchmark(suites, options);
-        sectionsManager.showSection("running");
+        this._startBenchmark(suites, options, "running-test");
     },
 
-    selectResults: function()
-    {
-        sectionsManager.selectData("results");
-    },
-    
     showResults: function()
     {
-        sectionsManager.showScore("results", Strings.text.results.results);
+        if (!this.addedKeyEvent) {
+            document.addEventListener("keypress", this.selectResults, false);
+            this.addedKeyEvent = true;
+        }
+
+        sectionsManager.setSectionScore("results", benchmarkRunnerClient.results.score.toFixed(2));
+        var data = benchmarkRunnerClient.results.data[Strings.json.results.iterations];
+        sectionsManager.populateTable("results-header", Headers.testName, data);
+        sectionsManager.populateTable("results-score", Headers.score, data);
+        sectionsManager.populateTable("results-data", Headers.details, data);
+        document.querySelector("#results-json textarea").textContent = JSON.stringify(benchmarkRunnerClient.results.data, function(key, value) {
+            if (typeof value == "number")
+                return value.toFixed(2);
+            return value;
+        });
         sectionsManager.showSection("results", true);
-    },
-    
-    showJSON: function()
-    {
-        sectionsManager.showScore("json", Strings.text.results.results);
-        sectionsManager.showSection("json", true);
-    },
 
-    showTestGraph: function(testName, axes, samples, samplingTimeOffset)
-    {
-        sectionsManager.showTestName("test-graph", Strings.text.results.graph, testName);
-        sectionsManager.showSection("test-graph", true);
-        graph("section#test-graph > data", new Insets(20, 50, 20, 50), axes, samples, samplingTimeOffset);
+        suitesManager.updateLocalStorageFromJSON(data[0]);
     },
 
-    showTestJSON: function(testName, json)
-    {
-        sectionsManager.showTestName("test-json", Strings.text.results.graph, testName);
-        sectionsManager.showJSON("test-json", json);
-        sectionsManager.showSection("test-json", true);
-    },
-    
-    selectJSON: function(sectionIdentifier)
+    showTestGraph: function(testName, score, mean, axes, samples, samplingTimeOffset)
     {
-        sectionsManager.selectDataContents(sectionIdentifier);
-    },
-}
+        sectionsManager.setSectionHeader("test-graph", testName);
+        sectionsManager.setSectionScore("test-graph", score, mean);
+        sectionsManager.showSection("test-graph", true);
+        graph("#test-graph-data", new Insets(10, 20, 30, 40), axes, samples, samplingTimeOffset);
+    }
+});
 
 window.addEventListener("load", benchmarkController.initialize);
@@ -9,18 +9,18 @@ function BenchmarkRunnerState(suites)
 BenchmarkRunnerState.prototype.currentSuite = function()
 {
     return this._suites[this._suiteIndex];
-}
+};
 
 BenchmarkRunnerState.prototype.currentTest = function()
 {
     var suite = this.currentSuite();
     return suite ? suite.tests[this._testIndex] : null;
-}
+};
 
 BenchmarkRunnerState.prototype.isFirstTest = function()
 {
     return !this._testIndex;
-}
+};
 
 BenchmarkRunnerState.prototype.next = function()
 {
@@ -36,7 +36,7 @@ BenchmarkRunnerState.prototype.next = function()
     } while (this._suiteIndex < this._suites.length && this._suites[this._suiteIndex].disabled);
 
     return this;
-}
+};
 
 BenchmarkRunnerState.prototype.prepareCurrentTest = function(runner, frame)
 {
@@ -46,9 +46,9 @@ BenchmarkRunnerState.prototype.prepareCurrentTest = function(runner, frame)
     frame.onload = function() {
         suite.prepare(runner, frame.contentWindow, frame.contentDocument).then(function(result) { promise.resolve(result); });
     }
-    frame.src = "../tests/" + test.url;
+    frame.src = "tests/" + test.url;
     return promise;
-}
+};
 
 function BenchmarkRunner(suites, frameContainer, client)
 {
@@ -71,20 +71,17 @@ BenchmarkRunner.prototype.waitForElement = function(selector)
 
     resolveIfReady();
     return promise;
-}
+};
 
 BenchmarkRunner.prototype._appendFrame = function()
 {
     var frame = document.createElement("iframe");
     frame.setAttribute("scrolling", "no");
 
-    if (this._client && this._client.willAddTestFrame)
-        this._client.willAddTestFrame(frame);
-
     this._frameContainer.insertBefore(frame, this._frameContainer.firstChild);
     this._frame = frame;
     return frame;
-}
+};
 
 BenchmarkRunner.prototype._removeFrame = function()
 {
@@ -92,7 +89,7 @@ BenchmarkRunner.prototype._removeFrame = function()
         this._frame.parentNode.removeChild(this._frame);
         this._frame = null;
     }
-}
+};
 
 BenchmarkRunner.prototype._runTestAndRecordResults = function(state)
 {
@@ -100,16 +97,15 @@ BenchmarkRunner.prototype._runTestAndRecordResults = function(state)
     var suite = state.currentSuite();
     var test = state.currentTest();
     
-    if (this._client && this._client.willRunTestTest)
+    if (this._client && this._client.willRunTest)
         this._client.willRunTest(suite, test);
 
     var contentWindow = this._frame.contentWindow;
     var self = this;
 
-    suite.run(contentWindow, test, this._client.options, this._client.recordTable, this._client.progressBar).then(function(sampler) {
-        var samplers = self._suitesSamplers[suite.name] || [];
-        
-        samplers[test.name] = sampler;
+    suite.run(contentWindow, test, this._client.options, this._client.progressBar).then(function(sampler) {
+        var samplers = self._suitesSamplers[suite.name] || {};
+        samplers[test.name] = sampler.toJSON(true, true);
         self._suitesSamplers[suite.name] = samplers;
 
         if (self._client && self._client.didRunTest)
@@ -122,7 +118,7 @@ BenchmarkRunner.prototype._runTestAndRecordResults = function(state)
     });
     
     return promise;
-}
+};
 
 BenchmarkRunner.prototype.step = function(state)
 {
@@ -140,14 +136,13 @@ BenchmarkRunner.prototype.step = function(state)
     }
 
     if (state.isFirstTest()) {
-        this._masuredValuesForCurrentSuite = {};
         this._appendFrame();
     }
 
     return state.prepareCurrentTest(this, this._frame).then(function(prepareReturnValue) {
         return this._runTestAndRecordResults(state);
     }.bind(this));
-}
+};
 
 BenchmarkRunner.prototype.runAllSteps = function(startingState)
 {
@@ -156,7 +151,7 @@ BenchmarkRunner.prototype.runAllSteps = function(startingState)
         if (nextState)
             nextCallee(nextState);
     });
-}
+};
 
 BenchmarkRunner.prototype.runMultipleIterations = function()
 {
@@ -175,7 +170,7 @@ BenchmarkRunner.prototype.runMultipleIterations = function()
         self._client.willStartFirstIteration();
 
     self.runAllSteps();
-}
+};
 
 BenchmarkRunner.prototype._finalize = function()
 {
@@ -186,4 +181,4 @@ BenchmarkRunner.prototype._finalize = function()
 
     if (this._runNextIteration)
         this._runNextIteration();
-}
+};
@@ -1,63 +1,75 @@
-var Headers = [
-    {
-        text: Strings.text.testName,
-        width: 27,
-        children: []
-    },
-    {
-        text: Strings.text.score,
-        width: 7,
-        children: []
-    },
-    {
-        text: Strings.text.experiments.complexity,
-        width: 27,
-        children:
-        [
-            { text: Strings.text.measurements.average, width: 7, children: [] },
-            { text: Strings.text.measurements.concern, width: 7, children: [] },
-            { text: Strings.text.measurements.stdev, width: 7, children: [] },
-            { text: Strings.text.measurements.percent, width: 6, children: [] },
-        ]
-    },
-    {
-        text: Strings.text.experiments.frameRate,
-        width: 24,
-        children:
-        [
-            { text: Strings.text.measurements.average, width: 6, children: [] },
-            { text: Strings.text.measurements.concern, width: 6, children: [] },
-            { text: Strings.text.measurements.stdev, width: 6, children: [] },
-            { text: Strings.text.measurements.percent, width: 6, children: [] },
-        ]
-    },
-    {
-        text: Strings.text.samples,
-        width: 15,
-        children:
-        [
-            { text: Strings.text.results.graph, width: 8, children: [] },
-            { text: Strings.text.results.json, width: 7, children: [] },
-        ]
-    }
-];
+Utilities.extendObject(Headers, {
+    details: [
+        {
+            title: Strings.text.results.graph
+        },
+        {
+            title: Strings.text.experiments.complexity,
+            children:
+            [
+                {
+                    text: function(data) {
+                        return data[Strings.json.experiments.complexity][Strings.json.measurements.average].toFixed(2);
+                    },
+                    className: "average"
+                },
+                {
+                    text: function(data) {
+                        return [
+                            "± ",
+                            data[Strings.json.experiments.complexity][Strings.json.measurements.percent].toFixed(2),
+                            "%"
+                        ].join("");
+                    },
+                    className: function(data) {
+                        var className = "stdev";
 
-var Suite = function(name, tests) {
-    this.name = name;
-    this.tests = tests;
-};
-Suite.prototype.prepare = function(runner, contentWindow, contentDocument)
-{
-    return runner.waitForElement("#stage").then(function (element) {
-        return element;
-    });
-};
-Suite.prototype.run = function(contentWindow, test, options, recordTable, progressBar)
-{
-    return contentWindow.runBenchmark(this, test, options, recordTable, progressBar);
-};
+                        if (data[Strings.json.experiments.complexity][Strings.json.measurements.percent] >= 10)
+                            className += " noisy-results";
+                        return className;
+                    }
+                }
+            ]
+        },
+        {
+            title: Strings.text.experiments.frameRate,
+            children:
+            [
+                {
+                    text: function(data) {
+                        return data[Strings.json.experiments.frameRate][Strings.json.measurements.average].toFixed(2);
+                    },
+                    className: function(data, options) {
+                        var className = "average";
+                        if (Math.abs(data[Strings.json.experiments.frameRate][Strings.json.measurements.average] - options["frame-rate"]) >= 2)
+                            className += " noisy-results";
+                        return className;
+                    }
+                },
+                {
+                    text: function(data) {
+                        var frameRateData = data[Strings.json.experiments.frameRate];
+                        return [
+                            "± ",
+                            frameRateData[Strings.json.measurements.percent].toFixed(2),
+                            "%"
+                        ].join("");
+                    },
+                    className: function(data) {
+                        var className = "stdev";
 
-var Suites = [];
+                        if (data[Strings.json.experiments.frameRate][Strings.json.measurements.percent] >= 10)
+                            className += " noisy-results";
+                        return className;
+                    }
+                }
+            ]
+        },
+    ]
+})
+
+///////////
+// Suites
 
 Suites.push(new Suite("HTML suite",
     [
@@ -223,9 +235,13 @@ Suites.push(new Suite("Basic canvas path suite",
     ]
 ));
 
-Suites.push(new Suite("Complex examples",
+Suites.push(new Suite("Miscellaneous Tests",
     [
         {
+            url: "misc/compositing-transforms.html?particleWidth=50&particleHeight=50&filters=yes&imageSrc=../resources/yin-yang.svg",
+            name: "Composited Transforms"
+        },
+        {
             url: "examples/canvas-electrons.html",
             name: "canvas electrons"
         },
@@ -235,22 +251,3 @@ Suites.push(new Suite("Complex examples",
         },
     ]
 ));
-
-Suites.push(new Suite("Miscellaneous Tests",
-    [
-        {
-            url: "misc/compositing-transforms.html?particleWidth=50&particleHeight=50&filters=yes&imageSrc=../resources/yin-yang.svg",
-            name: "Composited Transforms"
-        },
-    ]
-));
-
-function suiteFromName(name)
-{
-    return Suites.find(function(suite) { return suite.name == name; });
-}
-
-function testFromName(suite, name)
-{
-    return suite.tests.find(function(test) { return test.name == name; });
-}
index 566dc8d..738ab44 100644 (file)
@@ -1,3 +1,53 @@
+Array.prototype.swap = function(i, j)
+{
+    var t = this[i];
+    this[i] = this[j];
+    this[j] = t;
+    return this;
+}
+
+if (!Array.prototype.fill) {
+    Array.prototype.fill = function(value) {
+        if (this == null)
+            throw new TypeError('Array.prototype.fill called on null or undefined');
+
+        var object = Object(this);
+        var len = parseInt(object.length, 10);
+        var start = arguments[1];
+        var relativeStart = parseInt(start, 10) || 0;
+        var k = relativeStart < 0 ? Math.max(len + relativeStart, 0) : Math.min(relativeStart, len);
+        var end = arguments[2];
+        var relativeEnd = end === undefined ? len : (parseInt(end) || 0) ;
+        var final = relativeEnd < 0 ? Math.max(len + relativeEnd, 0) : Math.min(relativeEnd, len);
+
+        for (; k < final; k++)
+            object[k] = value;
+
+        return object;
+    };
+}
+
+if (!Array.prototype.find) {
+    Array.prototype.find = function(predicate) {
+        if (this == null)
+            throw new TypeError('Array.prototype.find called on null or undefined');
+        if (typeof predicate !== 'function')
+            throw new TypeError('predicate must be a function');
+
+        var list = Object(this);
+        var length = list.length >>> 0;
+        var thisArg = arguments[1];
+        var value;
+
+        for (var i = 0; i < length; i++) {
+            value = list[i];
+            if (predicate.call(thisArg, value, i, list))
+                return value;
+        }
+        return undefined;
+    };
+}
+
 function Point(x, y)
 {
     this.x = x;
@@ -134,7 +184,7 @@ SimplePromise.prototype.resolve = function (value)
 
 window.DocumentExtension =
 {
-    createElement : function(name, attrs, parentElement)
+    createElement: function(name, attrs, parentElement)
     {
         var element = document.createElement(name);
 
@@ -191,6 +241,7 @@ ProgressBar.prototype =
 function ResultsDashboard()
 {
     this._iterationsSamplers = [];
+    this._processedData = undefined;
 }
 
 ResultsDashboard.prototype =
@@ -200,7 +251,7 @@ ResultsDashboard.prototype =
         this._iterationsSamplers.push(suitesSamplers);        
     },
     
-    toJSON: function(statistics, graph)
+    _processData: function(statistics, graph)
     {
         var iterationsResults = [];
         var iterationsScores = [];
@@ -211,14 +262,13 @@ ResultsDashboard.prototype =
         
             for (var suiteName in iterationSamplers) {
                 var suite = suiteFromName(suiteName);
-                var suiteSamplers = iterationSamplers[suiteName];
+                var suiteSamplerData = iterationSamplers[suiteName];
 
                 var testsResults = {};
                 var testsScores = [];
                 
-                for (var testName in suiteSamplers) {
-                    var sampler = suiteSamplers[testName];
-                    testsResults[testName] = sampler.toJSON(statistics, graph);
+                for (var testName in suiteSamplerData) {
+                    testsResults[testName] = suiteSamplerData[testName];
                     testsScores.push(testsResults[testName][Strings.json.score]);
                 }
 
@@ -234,10 +284,22 @@ ResultsDashboard.prototype =
             iterationsScores.push(iterationsResults[index][Strings.json.score]);
         });
 
-        var json = {};
-        json[Strings.json.score] = Statistics.sampleMean(iterationsScores.length, iterationsScores.reduce(function(a, b) { return a * b; }));
-        json[Strings.json.results.iterations] = iterationsResults;
-        return json;
+        this._processedData = {};
+        this._processedData[Strings.json.score] = Statistics.sampleMean(iterationsScores.length, iterationsScores.reduce(function(a, b) { return a * b; }));
+        this._processedData[Strings.json.results.iterations] = iterationsResults;
+    },
+
+    get data()
+    {
+        if (this._processedData)
+            return this._processedData;
+        this._processData(true, true);
+        return this._processedData;
+    },
+
+    get score()
+    {
+        return this.data[Strings.json.score];
     }
 }
 
@@ -245,6 +307,15 @@ function ResultsTable(element, headers)
 {
     this.element = element;
     this._headers = headers;
+
+    this._flattenedHeaders = [];
+    this._headers.forEach(function(header) {
+        if (header.children)
+            this._flattenedHeaders = this._flattenedHeaders.concat(header.children);
+        else
+            this._flattenedHeaders.push(header);
+    }, this);
+
     this.clear();
 }
 
@@ -255,112 +326,49 @@ ResultsTable.prototype =
         this.element.innerHTML = "";
     },
 
-    _showHeaderRow: function(row, queue, headers, message)
-    {
-        headers.forEach(function (header) {
-            var th = DocumentExtension.createElement("th", {}, row);
-            th.textContent = header.text;
-            if (typeof message != "undefined" && message.length) {
-                th.innerHTML += "<br>" + '[' + message +']';
-                message = "";
-            }
-            if ("width" in header)
-                th.width = header.width + "%";
-            queue.push({element: th, headers: header.children });
-        });
-    },
-
-    _showHeader: function(message)
+    _addHeader: function()
     {
         var thead = DocumentExtension.createElement("thead", {}, this.element);
         var row = DocumentExtension.createElement("tr", {}, thead);
 
-        var queue = [];
-        this._showHeaderRow(row, queue, this._headers, message);
-
-        while (queue.length) {
-            var row = null;
-            var entries = [];
-
-            for (var i = 0, len = queue.length; i < len; ++i) {
-                var entry = queue.shift();
-
-                if (!entry.headers.length) {
-                    entries.push(entry.element);
-                    continue;
-                }
-
-                if (!row)
-                    row = DocumentExtension.createElement("tr", {}, thead);
-
-                this._showHeaderRow(row, queue, entry.headers, "");
-                entry.element.colSpan = entry.headers.length;
-            }
-
-            if (row) {
-                entries.forEach(function(entry) {
-                    ++entry.rowSpan;
-                });
-            }
-        }
-    },
-    
-    _showEmptyCell: function(row, className)
-    {
-        return DocumentExtension.createElement("td", { class: className }, row);
-    },
-
-    _showText: function(row, text, className)
-    {
-        var td = DocumentExtension.createElement("td", { class: className }, row);
-        td.textContent = text;
+        this._headers.forEach(function (header) {
+            var th = DocumentExtension.createElement("th", {}, row);
+            if (header.title != Strings.text.results.graph)
+                th.textContent = header.title;
+            if (header.children)
+                th.colSpan = header.children.length;
+        });
     },
 
-    _showFixedNumber: function(row, value, digits, className)
-    {
-        var td = DocumentExtension.createElement("td", { class: className }, row);
-        td.textContent = value.toFixed(digits || 2);
-    },
-    
-    _showGraph: function(row, testName, testResults)
+    _addGraphButton: function(td, testName, testResults)
     {
         var data = testResults[Strings.json.samples];
-        if (!data) {
-            this._showEmptyCell(row, "");
+        if (!data)
             return;
-        }
         
-        var td = DocumentExtension.createElement("td", {}, row);
         var button = DocumentExtension.createElement("button", { class: "small-button" }, td);
 
         button.addEventListener("click", function() {
             var samples = data[Strings.json.graph.points];
             var samplingTimeOffset = data[Strings.json.graph.samplingTimeOffset];
             var axes = [Strings.text.experiments.complexity, Strings.text.experiments.frameRate];
-            benchmarkController.showTestGraph(testName, axes, samples, samplingTimeOffset);
+            var score = testResults[Strings.json.score].toFixed(2);
+            var complexity = testResults[Strings.json.experiments.complexity];
+            var mean = [
+                "mean: ",
+                complexity[Strings.json.measurements.average].toFixed(2),
+                " ± ",
+                complexity[Strings.json.measurements.stdev].toFixed(2),
+                " (",
+                complexity[Strings.json.measurements.percent].toFixed(2),
+                "%), worst 5%: ",
+                complexity[Strings.json.measurements.concern].toFixed(2)].join("");
+            benchmarkController.showTestGraph(testName, score, mean, axes, samples, samplingTimeOffset);
         });
             
         button.textContent = Strings.text.results.graph + "...";
     },
 
-    _showJSON: function(row, testName, testResults)
-    {
-        var data = testResults[Strings.json.samples];
-        if (!data) {
-            this._showEmptyCell(row, "");
-            return;
-        }
-
-        var td = DocumentExtension.createElement("td", {}, row);
-        var button = DocumentExtension.createElement("button", { class: "small-button" }, td);
-
-        button.addEventListener("click", function() {
-            benchmarkController.showTestJSON(testName, testResults);
-        });
-            
-        button.textContent = Strings.text.results.json + "...";
-    },
-    
     _isNoisyMeasurement: function(jsonExperiment, data, measurement, options)
     {
         const percentThreshold = 10;
@@ -375,99 +383,128 @@ ResultsTable.prototype =
         return false;
     },
 
-    _isNoisyTest: function(testResults, options)
-    {
-        for (var index = 0; index < 2; ++index) {
-            var jsonExperiment = !index ? Strings.json.experiments.complexity : Strings.json.experiments.frameRate;
-            var data = testResults[jsonExperiment];
-            for (var measurement in data) {
-                if (this._isNoisyMeasurement(jsonExperiment, data, measurement, options))
-                    return true;
-            }
-        }
-        return false;
-    },
-
-    _showEmptyCells: function(row, headers)
-    {
-        for (var index = 0; index < headers.length; ++index) {
-            if (!headers[index].children.length)
-                this._showEmptyCell(row, "suites-separator");
-            else
-                this._showEmptyCells(row, headers[index].children);
-        }
-    },
-
-    _showEmptyRow: function()
+    _addEmptyRow: function()
     {
         var row = DocumentExtension.createElement("tr", {}, this.element);
-        this._showEmptyCells(row, this._headers);
+        this._flattenedHeaders.forEach(function (header) {
+            return DocumentExtension.createElement("td", { class: "suites-separator" }, row);
+        });
     },
 
-    _showTest: function(testName, testResults, options)
+    _addTest: function(testName, testResults, options)
     {
         var row = DocumentExtension.createElement("tr", {}, this.element);
-        var className = this._isNoisyTest(testResults, options) ? "noisy-results" : "";
-        
-        for (var index = 0; index < this._headers.length; ++index) {
-
-            switch (index) {
-            case 0:
-                this._showText(row, testName, className);
-                break;
-
-            case 1:
-                var data = testResults[Strings.json.score];
-                this._showFixedNumber(row, data, 2);
-                break;
-
-            case 2:
-            case 3:
-                var jsonExperiment = index == 2 ? Strings.json.experiments.complexity : Strings.json.experiments.frameRate;
-                var data = testResults[jsonExperiment];
-                for (var measurement in data)
-                    this._showFixedNumber(row, data[measurement], 2, this._isNoisyMeasurement(jsonExperiment, data, measurement, options) ? className : "");
-                break;
-                
-            case 4:
-                this._showGraph(row, testName, testResults);
-                this._showJSON(row, testName, testResults);
-                break;
+
+        var isNoisy = false;
+        [Strings.json.experiments.complexity, Strings.json.experiments.frameRate].forEach(function (experiment) {
+            var data = testResults[experiment];
+            for (var measurement in data) {
+                if (this._isNoisyMeasurement(experiment, data, measurement, options))
+                    isNoisy = true;
             }
-        }
+        }, this);
+
+        this._flattenedHeaders.forEach(function (header) {
+            var className = "";
+            if (header.className) {
+                if (typeof header.className == "function")
+                    className = header.className(testResults, options);
+                else
+                    className = header.className;
+            }
+
+            if (header.title == Strings.text.testName) {
+                var titleClassName = className;
+                if (isNoisy)
+                    titleClassName += " noisy-results";
+                var td = DocumentExtension.createElement("td", { class: titleClassName }, row);
+                td.textContent = testName;
+                return;
+            }
+
+            var td = DocumentExtension.createElement("td", { class: className }, row);
+            if (header.title == Strings.text.results.graph) {
+                this._addGraphButton(td, testName, testResults);
+            } else if (!("text" in header)) {
+                td.textContent = testResults[header.title];
+            } else if (typeof header.text == "string") {
+                var data = testResults[header.text];
+                if (typeof data == "number")
+                    data = data.toFixed(2);
+                td.textContent = data;
+            } else {
+                td.textContent = header.text(testResults, testName);
+            }
+        }, this);
     },
 
-    _showSuite: function(suiteName, suiteResults, options)
+    _addSuite: function(suiteName, suiteResults, options)
     {
         for (var testName in suiteResults[Strings.json.results.tests]) {
-            this._showTest(testName, suiteResults[Strings.json.results.tests][testName], options);
+            var testResults = suiteResults[Strings.json.results.tests][testName];
+            this._addTest(testName, testResults, options);
         }
     },
     
-    _showIteration : function(iterationResults, options)
+    _addIteration: function(iterationResult, options)
     {
-        for (var suiteName in iterationResults[Strings.json.results.suites]) {
-            if (suiteName != Object.keys(iterationResults[Strings.json.results.suites])[0])
-                this._showEmptyRow();
-            this._showSuite(suiteName, iterationResults[Strings.json.results.suites][suiteName], options);
+        for (var suiteName in iterationResult[Strings.json.results.suites]) {
+            this._addEmptyRow();
+            this._addSuite(suiteName, iterationResult[Strings.json.results.suites][suiteName], options);
         }
     },
-    
-    showRecord: function(testName, message, testResults, options)
-    {
-        this.clear();
-        this._showHeader(message);
-        this._showTest(testName, testResults, options);
-    },
 
     showIterations: function(iterationsResults, options)
     {
         this.clear();
-        this._showHeader("");
+        this._addHeader();
         
-        iterationsResults.forEach(function(iterationResults) {
-            this._showIteration(iterationResults, options);
+        iterationsResults.forEach(function(iterationResult) {
+            this._addIteration(iterationResult, options);
         }, this);
     }
 }
 
+window.Utilities =
+{
+    _parse: function(str, sep)
+    {
+        var output = {};
+        str.split(sep).forEach(function(part) {
+            var item = part.split("=");
+            var value = decodeURIComponent(item[1]);
+            if (value[0] == "'" )
+                output[item[0]] = value.substr(1, value.length - 2);
+            else
+                output[item[0]] = value;
+          });
+        return output;
+    },
+
+    parseParameters: function()
+    {
+        return this._parse(window.location.search.substr(1), "&");
+    },
+
+    parseArguments: function(str)
+    {
+        return this._parse(str, " ");
+    },
+
+    extendObject: function(obj1, obj2)
+    {
+        for (var attrname in obj2)
+            obj1[attrname] = obj2[attrname];
+        return obj1;
+    },
+
+    copyObject: function(obj)
+    {
+        return this.extendObject({}, obj);
+    },
+
+    mergeObjects: function(obj1, obj2)
+    {
+        return this.extendObject(this.copyObject(obj1), obj2);
+    }
+}
diff --git a/PerformanceTests/Animometer/resources/runner/animometer.css b/PerformanceTests/Animometer/resources/runner/animometer.css
new file mode 100644 (file)
index 0000000..ed44282
--- /dev/null
@@ -0,0 +1,242 @@
+/* Outer harness */
+html,body {
+    height: 100%;
+    margin: 0px;
+    padding: 0px;
+}
+
+body {
+    background-color: rgb(241, 241, 241);
+    color: rgb(96, 96, 96);
+    font-family: -apple-system, "Helvetica Neue", Helvetica, Verdana, sans-serif;
+}
+
+main {
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-flow: column;
+}
+
+hr {
+    flex: 1 0 20px;
+    width: 1px;
+    border: 0;
+    margin: 0;
+}
+
+section {
+    box-sizing: border-box;
+    width: 100%;
+    display: none;
+}
+
+section.selected {
+    display: initial;
+}
+
+h1 {
+    font-size: 3em;
+    text-align: center;
+    font-weight: 600;
+    margin: 10vh 0;
+    flex: 0 1 1em;
+}
+
+button {
+    flex: 0 0 auto;
+    display: block;
+    font-size: 1.5em;
+    margin-bottom: 10vh;
+    border: 2px solid rgb(96, 96, 96);
+    color: rgb(96, 96, 96);
+    background: transparent;
+    border-radius: 10px;
+    padding: .5em 2em;
+}
+
+button:hover {
+    background-color: rgba(0, 0, 0, .1);
+    cursor: pointer;
+}
+
+button:active {
+    color: inherit;
+    background-color: rgba(0, 0, 0, .2);
+}
+
+
+@media screen and (min-device-width: 768px) {
+    section {
+        padding: 0 20px;
+    }
+
+    section.selected {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        flex-flow: column;
+    }
+}
+
+@media screen and (max-device-width: 414px) {
+    h1 {
+        font-size: 2.5em;
+    }
+
+    hr {
+        flex: 0 0 0;
+    }
+
+    section {
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        align-self: stretch;
+        padding: 0 5px;
+    }
+}
+
+/* Intro section */
+#intro.selected {
+    flex: 1 0 auto;
+}
+
+#intro p {
+    flex: 1 1 auto;
+    padding: 0 0 10vh 0;
+    font-size: 2em;
+}
+
+@media screen and (min-device-width: 768px) {
+    #intro p {
+        max-width: 800px;
+        margin: 0;
+    }
+}
+
+@media screen and (max-device-width: 414px) {
+    #intro.selected {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        flex-flow: column;
+    }
+
+    #intro p {
+        padding-left: 20px;
+        padding-right: 20px;
+        font-size: 1.5em;
+    }
+}
+
+/* Running test section */
+#test-container.selected {
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+}
+
+.frame-container > iframe {
+    width: 1200px;
+    height: 600px;
+    border: 0;
+    margin: 0 auto;
+}
+
+@media screen and (min-device-width: 1800px) {
+    .frame-container > iframe {
+        width: 1600px;
+        height: 800px;
+    }
+}
+
+@media screen and (max-device-width: 414px) {
+    #test-container {
+        padding: 0;
+    }
+
+    .frame-container {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .frame-container > iframe {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+@media screen and (max-device-width: 1024px) {
+    .frame-container > iframe {
+        width: 900px;
+    }
+}
+
+/* Results section */
+#results {
+    text-align: center;
+}
+
+#results.selected {
+    flex: 1 0 auto;
+}
+
+.score {
+    font-size: 5em;
+    font-weight: bold;
+    margin: 0;
+}
+
+#results-tables {
+    direction: rtl;
+
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+
+    margin: 3em 0;
+}
+
+#results table {
+    direction: ltr;
+    border-spacing: 0;
+}
+
+#results th {
+    padding: .5em 0;
+}
+
+#results tr td {
+    padding: .25em 0;
+}
+
+#results-header td, #results-header th {
+    text-align: left;
+}
+#results-header tr td {
+    padding-right: 1em;
+}
+#results-score td, #results-score th {
+    text-align: right;
+}
+
+@media screen and (max-device-width: 414px) {
+    #results.selected {
+        padding: 0 20px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        flex-flow: column;
+    }
+
+    .score {
+        font-size: 3em;
+    }
+}
diff --git a/PerformanceTests/Animometer/resources/runner/animometer.js b/PerformanceTests/Animometer/resources/runner/animometer.js
new file mode 100644 (file)
index 0000000..0498135
--- /dev/null
@@ -0,0 +1,123 @@
+window.benchmarkRunnerClient = {
+    iterationCount: 1,
+    options: null,
+    results: null,
+
+    initialize: function(suites, options)
+    {
+        this.testsCount = this.iterationCount * suites.reduce(function (count, suite) { return count + suite.tests.length; }, 0);
+        this.options = options;
+    },
+
+    willStartFirstIteration: function()
+    {
+        this.results = new ResultsDashboard();
+    },
+
+    didRunSuites: function(suitesSamplers)
+    {
+        this.results.push(suitesSamplers);
+    },
+
+    didFinishLastIteration: function()
+    {
+        benchmarkController.showResults();
+    }
+};
+
+window.sectionsManager =
+{
+    showSection: function(sectionIdentifier, pushState)
+    {
+        var currentSectionElement = document.querySelector("section.selected");
+        console.assert(currentSectionElement);
+
+        var newSectionElement = document.getElementById(sectionIdentifier);
+        console.assert(newSectionElement);
+
+        currentSectionElement.classList.remove("selected");
+        newSectionElement.classList.add("selected");
+
+        if (pushState)
+            history.pushState({section: sectionIdentifier}, document.title);
+    },
+
+    setSectionScore: function(sectionIdentifier, score, mean)
+    {
+        document.querySelector("#" + sectionIdentifier + " .score").textContent = score;
+        if (mean)
+            document.querySelector("#" + sectionIdentifier + " .mean").innerHTML = mean;
+    },
+
+    populateTable: function(tableIdentifier, headers, data)
+    {
+        var table = new ResultsTable(document.getElementById(tableIdentifier), headers);
+        table.showIterations(data, benchmarkRunnerClient.options);
+    }
+};
+
+window.benchmarkController = {
+    _startBenchmark: function(suites, options, frameContainerID)
+    {
+        benchmarkRunnerClient.initialize(suites, options);
+        var frameContainer = document.getElementById(frameContainerID);
+        var runner = new BenchmarkRunner(suites, frameContainer, benchmarkRunnerClient);
+        runner.runMultipleIterations();
+
+        sectionsManager.showSection("test-container");
+    },
+
+    startBenchmark: function()
+    {
+        var options = {
+            "test-interval": 10,
+            "display": "minimal",
+            "adjustment": "adaptive",
+            "frame-rate": 50,
+            "estimated-frame-rate": true
+        };
+        this._startBenchmark(Suites, options, "test-container");
+    },
+
+    showResults: function()
+    {
+        if (!this.addedKeyEvent) {
+            document.addEventListener("keypress", this.selectResults, false);
+            this.addedKeyEvent = true;
+        }
+
+        sectionsManager.setSectionScore("results", benchmarkRunnerClient.results.score.toFixed(2));
+        var data = benchmarkRunnerClient.results.data[Strings.json.results.iterations];
+        sectionsManager.populateTable("results-header", Headers.testName, data);
+        sectionsManager.populateTable("results-score", Headers.score, data);
+        sectionsManager.showSection("results", true);
+    },
+
+    selectResults: function(event)
+    {
+        if (event.charCode != 115) // 's'
+            return;
+
+        event.target.selectRange = ((event.target.selectRange || 0) + 1) % 3;
+
+        var selection = window.getSelection();
+        selection.removeAllRanges();
+        var range = document.createRange();
+        switch (event.target.selectRange) {
+            case 0: {
+                range.setStart(document.querySelector("#results .score"), 0);
+                range.setEndAfter(document.querySelector("#results-score > tr:last-of-type"), 0);
+                break;
+            }
+            case 1: {
+                range.selectNodeContents(document.querySelector("#results .score"));
+                break;
+            }
+            case 2: {
+                range.selectNode(document.getElementById("results-score"));
+                break;
+            }
+        }
+        selection.addRange(range);
+    }
+};
diff --git a/PerformanceTests/Animometer/resources/runner/tests.js b/PerformanceTests/Animometer/resources/runner/tests.js
new file mode 100644 (file)
index 0000000..149067a
--- /dev/null
@@ -0,0 +1,36 @@
+var Headers = {
+    testName: [{ title: Strings.text.testName }],
+    score: [{ title: Strings.text.score, text: Strings.json.score }]
+};
+
+var Suite = function(name, tests) {
+    this.name = name;
+    this.tests = tests;
+};
+Suite.prototype.prepare = function(runner, contentWindow, contentDocument)
+{
+    return runner.waitForElement("#stage").then(function (element) {
+        return element;
+    });
+};
+Suite.prototype.run = function(contentWindow, test, options, progressBar)
+{
+    return contentWindow.runBenchmark(this, test, options, progressBar);
+};
+
+var Suites = [];
+
+Suites.push(new Suite("Animometer",
+    [
+    ]
+));
+
+function suiteFromName(name)
+{
+    return Suites.find(function(suite) { return suite.name == name; });
+}
+
+function testFromName(suite, name)
+{
+    return suite.tests.find(function(test) { return test.name == name; });
+}
diff --git a/PerformanceTests/Animometer/runner/animometer.html b/PerformanceTests/Animometer/runner/animometer.html
deleted file mode 100644 (file)
index b66e63b..0000000
+++ /dev/null
@@ -1,125 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta name="viewport" content="width=device-width, user-scalable=no">
-    <link rel="stylesheet" href="resources/animometer.css">
-    <script src="../resources/strings.js"></script>
-    <script src="../resources/sampler.js"></script>
-    <script src="../resources/extensions.js"></script>
-    <script src="resources/tests.js"></script>
-    <script src="resources/benchmark-runner.js"></script>
-    <script src="resources/animometer.js" defer></script>
-    <script src="resources/d3.min.js"></script>
-    <script src="resources/graph.js"></script>
-</head>
-<body>
-    <main>
-    <div class="spacer"></div>
-
-    <section id="home" class="selected">
-        <header>
-            <h1>Animometer</h1>
-        </header>
-        <div id="suites">
-            <h2>Suites:</h2>
-            <ul class="tree"></ul>
-        </div>
-        <div id="options">
-            <h2>Options:</h2>
-            <form name="benchmark-options">
-            <ul>
-            <li>
-                <label>Test length: <input type="number" id="test-interval" value="10"> seconds each</label>
-            </li>
-            <li>
-                <h3>Display:</h3>
-                <ul>
-                    <li><label><input name="display" type="radio" value="minimal" checked> Minimal</label></li>
-                    <li><label><input name="display" type="radio" value="progress-bar" checked> Progress bar</label></li>
-                    <li><label><input name="display" type="radio" value="statistics-table"> Statistics table</label></li>
-                </ul>
-            </li>
-            <li>
-                <h3>Adjusting the test complexity:</h3>
-                <ul>
-                    <li><label><input name="adjustment" type="radio" value="fixed"> Keep constant</label></li>
-                    <li><label><input name="adjustment" type="radio" value="fixed-after-warmup"> Keep constant after warmup to target FPS</label></li>
-                    <li><label><input name="adjustment" type="radio" value="adaptive" checked> Maintain target FPS</label></li>
-                </ul>
-            </li>
-            <li>
-                <label>Target frame rate: <input type="number" id="frame-rate" value="50"> FPS</label>
-            </li>
-            <li>
-                <label><input type="checkbox" id="estimated-frame-rate" checked> Filter frame rate calculation</label>
-            </li>
-            </ul>
-            </form>
-        </div>
-        <footer>
-            <button class="large-button" onclick="benchmarkController.startTest()">Start Test</button>
-        </footer>
-    </section>
-    <section id="running">
-        <div id="running-test"></div>
-        <div id="progress">
-            <div id="progress-completed"></div>
-        </div>
-        <div id="record">
-            <table class="results-table"></table>
-        </div>
-    </section>
-    <section id="results">
-        <header>
-            <h1>Results:</h1>
-        </header>
-        <data>
-            <table class="results-table"></table>
-        </data>
-        <footer>
-            <button class="large-button" onclick="benchmarkController.selectResults()">Select</button>
-            <button class="large-button" onclick="benchmarkController.showJSON()">JSON</button>
-            <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>
-        </footer>
-    </section>
-    <section id="json">
-        <header>
-            <h1>JSON:</h1>
-        </header>
-        <data>
-            <div class="results-json" contentEditable="true"></div>
-        </data>
-        <footer>
-            <button class="large-button" onclick="benchmarkController.selectJSON('json')">Select</button>
-            <button class="large-button" onclick="benchmarkController.showResults()">Results</button>
-            <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>
-        </footer>
-    </section>
-    <section id="test-json">
-        <header>
-            <h1>JSON:</h1>
-        </header>
-        <data>
-            <div class="results-json" contentEditable="true"></div>
-        </data>
-        <footer>
-            <button class="large-button" onclick="benchmarkController.selectJSON('test-json')">Select</button>
-            <button class="large-button" onclick="benchmarkController.showResults()">Results</button>
-            <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>
-        </footer>
-    </section>
-    <section id="test-graph">
-        <header>
-            <h1>Graph:</h1>
-        </header>
-        <data></data>
-        <footer>
-            <button class="large-button" onclick="benchmarkController.showResults()">Results</button>
-            <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>
-        </footer>
-    </section>
-
-    <div class="spacer"></div>
-    </main>
-</body>
-</html>
diff --git a/PerformanceTests/Animometer/runner/resources/animometer.css b/PerformanceTests/Animometer/runner/resources/animometer.css
deleted file mode 100644 (file)
index 94b76b8..0000000
+++ /dev/null
@@ -1,599 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/*                                HTML and Body                               */
-/* -------------------------------------------------------------------------- */
-html,body {
-    height: 100%;
-    margin: 0px;
-    padding: 0px;
-}
-
-body {
-    background-color: rgb(96, 96, 96);
-    color: rgb(235, 235, 235);
-    font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
-}
-
-/* -------------------------------------------------------------------------- */
-/*                              Buttons                                       */
-/* -------------------------------------------------------------------------- */
-
-button {
-    -webkit-appearance: none;
-    -webkit-user-select: none;
-    background-color: transparent;
-}
-
-button.large-button {
-    border: 3px solid rgb(235, 235, 235);
-    border-radius: 10px;
-    min-width: 200px;
-    padding: .5em 2em;
-    margin: 0 1em;
-    font-size: 25px;
-    color: rgb(235, 235, 235);
-}
-
-button.large-button:active {
-    background-color: rgb(235, 235, 235);
-    color: rgb(46, 51, 55);
-    border-color: rgb(235, 235, 235) !important;
-}
-
-button.large-button:disabled {
-    background-color: rgb(96, 96, 96);
-    color: rgb(128, 128, 128);
-}
-
-button.small-button {
-    border: 1px solid DarkCyan;
-    border-radius: 2px;
-    padding: 1px 4px;
-    margin: 0 4px;
-    font-size: 9px;
-    color: black;
-}
-
-button.small-button:active {
-    background-color: DarkCyan;
-    color: rgb(46, 51, 55);
-    border-color: DarkCyan !important;
-}
-
-@media screen and (max-device-width: 414px) {
-    button.large-button {
-        margin: 1em 0;
-    }
-}
-
-/* -------------------------------------------------------------------------- */
-/*                               Tree                                         */
-/* -------------------------------------------------------------------------- */
-
-.tree {
-    padding: 0;
-    list-style-type: none;
-}
-
-.tree .expand-button {
-    position: absolute;
-    clip: rect(0, 0, 0, 0);
-}
-
-.tree .expand-button ~ ul {
-    display: none;
-}
-
-.tree .expand-button:checked ~ ul {
-    display: block;
-}
-
-.tree ul {
-    list-style-type:none;
-}
-
-.tree li {
-    position: relative;
-    padding: 0 0 1em 1em;
-}
-
-.tree ul li {
-    list-style:none;
-    padding: 1em 0 0 0em;
-}
-
-.tree > li:last-child {
-    padding-bottom: 0;
-}
-
-.tree-label {
-  position: relative;
-  display: inline-block;
-}
-
-label.tree-label {
-    cursor: pointer;
-}
-
-.tree > li > label.tree-label:before {
-    position: relative;
-    z-index: 1;
-    float: left;
-    margin: 0 0 0 -2em;
-    width: 1em;
-    height: 1em;
-    content: '\25BA';
-    text-align: center;
-    line-height: 2.5em;
-    font-size: .5em;
-}
-
-.tree > li > :checked ~ label.tree-label:before {
-    content: '\25BC';
-}
-
-@media screen and (max-device-width: 414px) {
-    .tree {
-        padding-left: 1em;
-    }
-    .tree > li > label.tree-label:before {
-        font-size: 1em;
-        margin-left: -1.75em;
-        line-height: 1em;
-    }
-}
-
-/* -------------------------------------------------------------------------- */
-/*                              Results Table                                 */
-/* -------------------------------------------------------------------------- */
-
-table.results-table {
-    width: 100%;
-    border: 2px solid DarkCyan;
-    border-collapse: collapse;
-}
-
-.results-table th,
-.results-table td {
-    font-size: 11px;
-    padding: 3px 4px 2px 4px;
-}
-
-.results-table th {
-    background: DarkCyan;
-    border-left: 1px solid LightCyan;
-    border-right: 1px solid LightCyan;
-    border-top: 1px solid LightCyan;
-}
-
-.results-table td {
-    background: white;
-    border-bottom: none;
-    border-left: none;
-    border-right: 1px solid DarkCyan;
-    border-top: 1px solid DarkCyan;
-    color: black;
-}
-
-.results-table td.noisy-results {
-    color: red;
-}
-
-.results-table td.suites-separator {
-    background-color: yellow;
-}
-/* -------------------------------------------------------------------------- */
-/*                              Results JSON                                  */
-/* -------------------------------------------------------------------------- */
-
-div.results-json {
-    width: 100%;
-    background-color: rgb(128, 128, 128);
-    color: rgb(235, 235, 235);
-    white-space: pre;
-    font-size: 12px;
-}
-
-/* -------------------------------------------------------------------------- */
-/*                                 Main Layout                                */
-/* -------------------------------------------------------------------------- */
-
-main {
-    width: 100%;
-    height: 100%;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-
-    -ms-flex-align: center;
-    -webkit-align-items: center;
-    -webkit-box-align: center;
-    align-items: center;
-
-    -webkit-justify-content: flex-start;
-    -ms-flex-pack: flex-start;
-    justify-content: flex-start;
-
-    -webkit-flex-flow: column;
-    flex-flow: column;
-}
-
-.spacer {
-    -webkit-flex: 1 0 20px;
-    -ms-flex: 1 0 20px;
-    flex: 1 0 20px;
-    width: 10px;
-}
-
-section {
-    width: 800px;
-    height: 600px;
-    display: none;
-    padding: 10px;
-}
-
-#home {
-    min-height: 600px;
-    height: auto;
-}
-
-.display-progress-bar section,
-.display-statistics-table section {
-    border: 6px solid rgb(235, 235, 235);
-    border-radius: 20px;
-}
-
-section.selected {
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-}
-
-section > header,
-section > footer {
-    margin: 10px;
-    padding: 10px;
-    -webkit-flex: 0 1 100%;
-    -ms-flex: 0 1 100%;
-    flex: 0 1 100%;
-    max-height: 15%;
-}
-
-section > footer {
-    text-align: center;
-    clear: both;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    -ms-flex-align: center;
-    -webkit-align-items: center;
-    -webkit-box-align: center;
-    align-items: center;
-    -webkit-justify-content: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-}
-
-@media screen and (min-device-width: 1800px) {
-    section {
-        width: 1600px;
-        height: 800px;
-    }
-
-    #home {
-        min-height: 800px;
-    }
-}
-
-@media screen and (max-device-width: 414px) {
-    .spacer {
-        -webkit-flex: 0 0 0;
-        -ms-flex: 0 0 0;
-        flex: 0 0 0;
-    }
-
-    section {
-        box-sizing: border-box;
-        width: 100%;
-        height: 100%;
-        align-self: stretch;
-        padding: 0 5px;
-    }
-
-    #home {
-        min-height: 100%;
-    }
-
-    .display-progress-bar section,
-    .display-statistics-table section {
-        border: 0;
-    }
-
-    section > footer {
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-        max-height: initial;
-    }
-}
-
-/* -------------------------------------------------------------------------- */
-/*                                 Home Section                               */
-/* -------------------------------------------------------------------------- */
-
-#home {
-    -webkit-flex-direction: row;
-    -ms-flex-direction: row;
-    flex-direction: row;
-    -webkit-flex-wrap: wrap;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    -webkit-align-content: center;
-    -ms-flex-line-pack: center;
-    align-content: flex-start;
-}
-
-#home h2 {
-    font-size: 1.2em;
-}
-
-#suites,
-#options {
-    padding: 10px;
-    margin: 10px;
-}
-
-#suites {
-    padding-left: 40px;
-    -webkit-flex: 0 1 40%;
-    -ms-flex: 0 1 40%;
-    flex: 0 1 40%;
-}
-
-#options {
-    -webkit-flex: 1 1 auto;
-    -ms-flex: 1 1 auto;
-    flex: 1 1 auto;
-}
-
-#home > header > h1 {
-    margin: 0 auto;
-    width: 70%;
-    text-align: center;
-}
-
-#home input[type="number"] {
-    width: 50px;
-}
-#suites input[type="number"] {
-    display: none;
-    float: right;
-}
-
-#suites input[type="number"].selected {
-    display: inline;
-    margin: 0;
-}
-
-#suites ul ul {
-    font-size: .8em;
-    margin: 0;
-    padding: 0 0 0 1em;
-}
-
-#options ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-#options h3 {
-    font-size: 1em;
-    font-weight: inherit;
-    margin: 0 0 .3em 0;
-    padding: 0;
-}
-
-#options > form > ul > li {
-    padding: 0 0 1em 0;
-}
-
-#options ul ul {
-    padding: 0;
-}
-
-#options li {
-    padding: .1em 0;
-}
-
-@media screen and (max-device-width: 414px) {
-    #suites,
-    #options {
-        padding: 0 5px;
-        margin: 0;
-    }
-    #suites {
-        -webkit-flex: 0 1 100%;
-        -ms-flex: 0 1 100%;
-        flex: 0 1 100%;
-    }
-}
-
-/* -------------------------------------------------------------------------- */
-/*                           Running Section                                  */
-/* -------------------------------------------------------------------------- */
-
-#running {
-    position: relative;
-    -ms-flex-align: center;
-    -webkit-align-items: center;
-    -webkit-box-align: center;
-    align-items: center;
-    -webkit-justify-content: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-}
-
-#running-test {
-    width: 100%;
-    height: 100%;
-}
-
-#running-test > iframe {
-    width: 800px;
-    height: 600px;
-    border: 0px none;
-    overflow: hidden;
-}
-
-#progress, #record {
-    display: none;
-}
-
-.display-progress-bar #progress,
-.display-statistics-table #progress {
-    display: block;
-    position: absolute;
-    bottom: -6px;
-    left: 60px;
-    right: 60px;
-    height: 6px;
-    background-color: rgb(128, 128, 128);
-    border-left: 6px solid rgb(46, 51, 55);
-    border-right: 6px solid rgb(46, 51, 55);
-}
-
-.display-progress-bar #progress-completed,
-.display-statistics-table #progress-completed {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 6px;
-    width: 0;
-    background-color: rgb(235, 235, 235);
-}
-
-.display-progress-bar #record,
-.display-statistics-table #record {
-    display: block;
-    position: absolute;
-    bottom: -95px;
-    left: 0px;
-    right: 0px;
-    padding: 16px;
-}
-
-@media screen and (min-device-width: 1800px) {
-    #running-test > iframe {
-        width: 1600px;
-        height: 800px;
-    }
-}
-
-@media screen and (max-device-width: 414px) {
-    #running {
-        padding: 0;
-    }
-
-    #running-test {
-        overflow: hidden;
-    }
-
-    #running-test > iframe {
-        width: calc(100%);
-        height: calc(100%);
-    }
-}
-/* -------------------------------------------------------------------------- */
-/*                           Results Section                                  */
-/* -------------------------------------------------------------------------- */
-
-section#results,
-section#json,
-section#test-json,
-section#test-graph {
-    -webkit-flex-direction: row;
-    -ms-flex-direction: row;
-    flex-direction: row;
-    -webkit-flex-wrap: wrap;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    -webkit-justify-content: space-between;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    -webkit-align-content: space-between;
-    -ms-flex-line-pack: justify;
-    align-content: space-between;
-    -webkit-align-items: flex-start;
-    -ms-flex-align: start;
-    align-items: flex-start;
-}
-
-section#results > data,
-section#json > data,
-section#test-json > data,
-section#test-graph > data {
-    overflow-y: scroll;
-    height: 70%;
-    -webkit-flex: 0 1 100%;
-    -ms-flex: 0 1 100%;
-    flex: 0 1 100%;
-    -webkit-align-self: stretch;
-    -ms-flex-item-align: stretch;
-    align-self: stretch;
-}
-
-/* -------------------------------------------------------------------------- */
-/*                           Graph Section                                    */
-/* -------------------------------------------------------------------------- */
-
-section#test-graph > data {
-    font: 10px sans-serif;
-    color: rgb(235, 235, 235);
-}
-
-section#test-graph > data > svg {
-    fill: none;
-}
-
-.axis path,
-.axis line {
-    fill: none;
-    stroke: #999999;
-    shape-rendering: crispEdges;
-}
-
-.left-samples {
-    stroke: #7ADD49;
-    stroke-width: 1.5px;
-}
-
-.right-samples {
-    stroke: #FA4925;
-    stroke-width: 1.5px;
-}
-
-.sample-time {
-    stroke: #5493D6;
-}
-
-.left-mean {
-    stroke: #7ADD49;
-    opacity: .8;
-}
-
-.right-mean {
-    stroke: #FA4925;
-    opacity: .8;
-}
-
-/* -------------------------------------------------------------------------- */
-/*                           JSON Section                                  */
-/* -------------------------------------------------------------------------- */
-
-section#json > data,
-section#test-json > data {
-    border: 1px solid rgb(235, 235, 235);
-    box-sizing: border-box;
-}
index 45baf4d..ad806db 100644 (file)
@@ -13,7 +13,6 @@
     <script src="../../resources/sampler.js"></script>
     <script src="../../resources/extensions.js"></script>
     <script src="../resources/math.js"></script>
-    <script src="../resources/utilities.js"></script>    
     <script src="../resources/main.js"></script>
     <script src="../resources/stage.js"></script>  
     <script src="resources/bouncing-particles.js"></script>
index 7255873..d1d7c06 100644 (file)
@@ -7,7 +7,6 @@
     <script src="../../resources/sampler.js"></script>
     <script src="../../resources/extensions.js"></script>
     <script src="../resources/math.js"></script>
-    <script src="../resources/utilities.js"></script>    
     <script src="../resources/main.js"></script>
     <script src="../resources/stage.js"></script>  
     <script src="resources/bouncing-particles.js"></script>
index dfb5ba6..961bcfc 100644 (file)
@@ -12,7 +12,6 @@
     <script src="../../resources/sampler.js"></script>
     <script src="../../resources/extensions.js"></script>
     <script src="../resources/math.js"></script>
-    <script src="../resources/utilities.js"></script>    
     <script src="../resources/main.js"></script>
     <script src="../resources/stage.js"></script>  
     <script src="resources/bouncing-particles.js"></script>
index 0cfc6fa..4eab1c2 100644 (file)
@@ -23,7 +23,6 @@
     <script src="../../resources/sampler.js"></script>
     <script src="../../resources/extensions.js"></script>
     <script src="../resources/math.js"></script>
-    <script src="../resources/utilities.js"></script>    
     <script src="../resources/main.js"></script>
     <script src="../resources/stage.js"></script>  
     <script src="resources/bouncing-particles.js"></script>
index 5a8ce43..52dc155 100644 (file)
@@ -7,7 +7,6 @@
     <script src="../../resources/sampler.js"></script>
     <script src="../../resources/extensions.js"></script>
     <script src="../resources/math.js"></script>
-    <script src="../resources/utilities.js"></script>    
     <script src="../resources/main.js"></script>
     <script src="../resources/stage.js"></script>  
     <script src="resources/bouncing-particles.js"></script>
index 55b8edb..d579b71 100644 (file)
@@ -7,7 +7,6 @@
     <script src="../../resources/sampler.js"></script>
     <script src="../../resources/extensions.js"></script>
     <script src="../resources/math.js"></script>
-    <script src="../resources/utilities.js"></script>    
     <script src="../resources/main.js"></script>
     <script src="../resources/stage.js"></script>  
     <script src="resources/bouncing-particles.js"></script>
index 258ccd7..28a7811 100644 (file)
@@ -32,9 +32,9 @@ BouncingCanvasImagesStage.prototype.createParticle = function()
     return new BouncingCanvasImage(this);
 }
 
-function BouncingCanvasImagesBenchmark(suite, test, options, recordTable, progressBar)
+function BouncingCanvasImagesBenchmark(suite, test, options, progressBar)
 {
-    BouncingCanvasParticlesBenchmark.call(this, suite, test, options, recordTable, progressBar);
+    BouncingCanvasParticlesBenchmark.call(this, suite, test, options, progressBar);
 }
 
 BouncingCanvasImagesBenchmark.prototype = Object.create(BouncingCanvasParticlesBenchmark.prototype);
@@ -45,7 +45,7 @@ BouncingCanvasImagesBenchmark.prototype.createStage = function(element)
     return new BouncingCanvasImagesStage(element, this._options);
 }
 
-window.benchmarkClient.create = function(suite, test, options, recordTable, progressBar)
+window.benchmarkClient.create = function(suite, test, options, progressBar)
 {
-    return new BouncingCanvasImagesBenchmark(suite, test, options, recordTable, progressBar);
+    return new BouncingCanvasImagesBenchmark(suite, test, options, progressBar);
 }
index 4cf7cd5..0b40da2 100644 (file)
@@ -91,9 +91,9 @@ BouncingCanvasParticlesAnimator.prototype.animate = function()
     return BouncingParticlesAnimator.prototype.animate.call(this);
 }
 
-function BouncingCanvasParticlesBenchmark(suite, test, options, recordTable, progressBar)
+function BouncingCanvasParticlesBenchmark(suite, test, options, progressBar)
 {
-    StageBenchmark.call(this, suite, test, options, recordTable, progressBar);
+    StageBenchmark.call(this, suite, test, options, progressBar);
 }
 
 BouncingCanvasParticlesBenchmark.prototype = Object.create(StageBenchmark.prototype);
index f22a757..be4a1d9 100644 (file)
@@ -71,9 +71,9 @@ BouncingCanvasShapesStage.prototype.createParticle = function()
     return new BouncingCanvasShape(this);
 }
 
-function BouncingCanvasShapesBenchmark(suite, test, options, recordTable, progressBar)
+function BouncingCanvasShapesBenchmark(suite, test, options, progressBar)
 {
-    BouncingCanvasParticlesBenchmark.call(this, suite, test, options, recordTable, progressBar);
+    BouncingCanvasParticlesBenchmark.call(this, suite, test, options, progressBar);
 }
 
 BouncingCanvasShapesBenchmark.prototype = Object.create(BouncingCanvasParticlesBenchmark.prototype);
@@ -84,7 +84,7 @@ BouncingCanvasShapesBenchmark.prototype.createStage = function(element)
     return new BouncingCanvasShapesStage(element, this._options);
 }
 
-window.benchmarkClient.create = function(suite, test, options, recordTable, progressBar)
+window.benchmarkClient.create = function(suite, test, options, progressBar)
 {
-    return new BouncingCanvasShapesBenchmark(suite, test, options, recordTable, progressBar);
+    return new BouncingCanvasShapesBenchmark(suite, test, options, progressBar);
 }
index 96f0e59..0d3ae24 100644 (file)
@@ -44,9 +44,9 @@ BouncingCssImagesStage.prototype.particleWillBeRemoved = function(particle)
     particle.element.remove();
 }
 
-function BouncingCssImagesBenchmark(suite, test, options, recordTable, progressBar)
+function BouncingCssImagesBenchmark(suite, test, options, progressBar)
 {
-    BouncingParticlesBenchmark.call(this, suite, test, options, recordTable, progressBar);
+    BouncingParticlesBenchmark.call(this, suite, test, options, progressBar);
 }
 
 BouncingCssImagesBenchmark.prototype = Object.create(BouncingParticlesBenchmark.prototype);
@@ -57,7 +57,7 @@ BouncingCssImagesBenchmark.prototype.createStage = function(element)
     return new BouncingCssImagesStage(element, this._options);
 }
 
-window.benchmarkClient.create = function(suite, test, options, recordTable, progressBar)
+window.benchmarkClient.create = function(suite, test, options, progressBar)
 {
-    return new BouncingCssImagesBenchmark(suite, test, options, recordTable, progressBar);
+    return new BouncingCssImagesBenchmark(suite, test, options, progressBar);
 }
index 6edaed8..6f94335 100644 (file)
@@ -62,9 +62,9 @@ BouncingCssShapesStage.prototype.particleWillBeRemoved = function(particle)
     particle.element.remove();
 }
 
-function BouncingCssShapesBenchmark(suite, test, options, recordTable, progressBar)
+function BouncingCssShapesBenchmark(suite, test, options, progressBar)
 {
-    BouncingParticlesBenchmark.call(this, suite, test, options, recordTable, progressBar);
+    BouncingParticlesBenchmark.call(this, suite, test, options, progressBar);
 }
 
 BouncingCssShapesBenchmark.prototype = Object.create(BouncingParticlesBenchmark.prototype);
@@ -75,7 +75,7 @@ BouncingCssShapesBenchmark.prototype.createStage = function(element)
     return new BouncingCssShapesStage(element, this._options);
 }
 
-window.benchmarkClient.create = function(suite, test, options, recordTable, progressBar)
+window.benchmarkClient.create = function(suite, test, options, progressBar)
 {
-    return new BouncingCssShapesBenchmark(suite, test, options, recordTable, progressBar);
+    return new BouncingCssShapesBenchmark(suite, test, options, progressBar);
 }
index d0f94ca..a0f7bfd 100644 (file)
@@ -124,9 +124,9 @@ BouncingParticlesStage.prototype.tune = function(count)
     return this._particles.length;
 }
 
-function BouncingParticlesBenchmark(suite, test, options, recordTable, progressBar)
+function BouncingParticlesBenchmark(suite, test, options, progressBar)
 {
-    StageBenchmark.call(this, suite, test, options, recordTable, progressBar);
+    StageBenchmark.call(this, suite, test, options, progressBar);
 }
 
 BouncingParticlesBenchmark.prototype = Object.create(StageBenchmark.prototype);
index c68bce0..435f2ce 100644 (file)
@@ -26,9 +26,9 @@ BouncingSvgImagesStage.prototype.createParticle = function()
     return new BouncingSvgImage(this);
 }
 
-function BouncingSvgImagesBenchmark(suite, test, options, recordTable, progressBar)
+function BouncingSvgImagesBenchmark(suite, test, options, progressBar)
 {
-    BouncingParticlesBenchmark.call(this, suite, test, options, recordTable, progressBar);
+    BouncingParticlesBenchmark.call(this, suite, test, options, progressBar);
 }
 
 BouncingSvgImagesBenchmark.prototype = Object.create(BouncingParticlesBenchmark.prototype);
@@ -39,7 +39,7 @@ BouncingSvgImagesBenchmark.prototype.createStage = function(element)
     return new BouncingSvgImagesStage(element, this._options);
 }
 
-window.benchmarkClient.create = function(suite, test, options, recordTable, progressBar)
+window.benchmarkClient.create = function(suite, test, options, progressBar)
 {
-    return new BouncingSvgImagesBenchmark(suite, test, options, recordTable, progressBar);
+    return new BouncingSvgImagesBenchmark(suite, test, options, progressBar);
 }
index 76dc9ee..d02801a 100644 (file)
@@ -85,9 +85,9 @@ BouncingSvgShapesStage.prototype.particleWillBeRemoved = function(particle)
     this._ensureDefsIsCreated().removeChild(gradient);
 }
 
-function BouncingSvgShapesBenchmark(suite, test, options, recordTable, progressBar)
+function BouncingSvgShapesBenchmark(suite, test, options, progressBar)
 {
-    BouncingParticlesBenchmark.call(this, suite, test, options, recordTable, progressBar);
+    BouncingParticlesBenchmark.call(this, suite, test, options, progressBar);
 }
 
 BouncingSvgShapesBenchmark.prototype = Object.create(BouncingParticlesBenchmark.prototype);
@@ -98,7 +98,7 @@ BouncingSvgShapesBenchmark.prototype.createStage = function(element)
     return new BouncingSvgShapesStage(element, this._options);
 }
 
-window.benchmarkClient.create = function(suite, test, options, recordTable, progressBar)
+window.benchmarkClient.create = function(suite, test, options, progressBar)
 {
-    return new BouncingSvgShapesBenchmark(suite, test, options, recordTable, progressBar);
+    return new BouncingSvgShapesBenchmark(suite, test, options, progressBar);
 }
index cc87891..0909732 100644 (file)
@@ -7,7 +7,6 @@
     <script src="../../resources/sampler.js"></script>
     <script src="../../resources/extensions.js"></script>
     <script src="../resources/math.js"></script>
-    <script src="../resources/utilities.js"></script>    
     <script src="../resources/main.js"></script>
     <script src="../resources/stage.js"></script>
     <script src="resources/canvas-electrons.js"></script>
index 382748a..52ad8f8 100644 (file)
@@ -7,7 +7,6 @@
     <script src="../../resources/sampler.js"></script>
     <script src="../../resources/extensions.js"></script>
     <script src="../resources/math.js"></script>
-    <script src="../resources/utilities.js"></script>    
     <script src="../resources/main.js"></script>
     <script src="../resources/stage.js"></script>
     <script src="resources/canvas-stars.js"></script>
index 4e93204..8de5840 100644 (file)
@@ -104,9 +104,9 @@ CanvasElectronsAnimator.prototype.animate = function()
     return StageAnimator.prototype.animate.call(this);
 }
 
-function CanvasElectronsBenchmark(suite, test, options, recordTable, progressBar)
+function CanvasElectronsBenchmark(suite, test, options, progressBar)
 {
-    StageBenchmark.call(this, suite, test, options, recordTable, progressBar);
+    StageBenchmark.call(this, suite, test, options, progressBar);
 }
 
 CanvasElectronsBenchmark.prototype = Object.create(StageBenchmark.prototype);
@@ -124,9 +124,9 @@ CanvasElectronsBenchmark.prototype.createAnimator = function()
     return new CanvasElectronsAnimator(this, this._options);
 }
 
-window.benchmarkClient.create = function(suite, test, options, recordTable, progressBar)
+window.benchmarkClient.create = function(suite, test, options, progressBar)
 {
     // This function is called from the test harness which starts the
     // test by creating your benchmark object.
-    return new CanvasElectronsBenchmark(suite, test, options, recordTable, progressBar);
+    return new CanvasElectronsBenchmark(suite, test, options, progressBar);
 }
index fbdbb4f..d37c2a2 100644 (file)
@@ -101,9 +101,9 @@ CanvasStarsAnimator.prototype.animate = function()
    return StageAnimator.prototype.animate.call(this);
 }
 
-function CanvasStarsBenchmark(suite, test, options, recordTable, progressBar)
+function CanvasStarsBenchmark(suite, test, options, progressBar)
 {
-   StageBenchmark.call(this, suite, test, options, recordTable, progressBar);
+   StageBenchmark.call(this, suite, test, options, progressBar);
 }
 
 CanvasStarsBenchmark.prototype = Object.create(StageBenchmark.prototype);
@@ -121,9 +121,9 @@ CanvasStarsBenchmark.prototype.createAnimator = function()
    return new CanvasStarsAnimator(this, this._options);
 }
 
-window.benchmarkClient.create = function(suite, test, options, recordTable, progressBar)
+window.benchmarkClient.create = function(suite, test, options, progressBar)
 {
    // This function is called from the test harness which starts the
    // test by creating your benchmark object.
-   return new CanvasStarsBenchmark(suite, test, options, recordTable, progressBar);
+   return new CanvasStarsBenchmark(suite, test, options, progressBar);
 }
\ No newline at end of file
index d0fff52..debf582 100644 (file)
@@ -14,7 +14,6 @@
     <script src="../../resources/sampler.js"></script>
     <script src="../../resources/extensions.js"></script>
     <script src="../resources/math.js"></script>
-    <script src="../resources/utilities.js"></script>    
     <script src="../resources/main.js"></script>
     <script src="../resources/stage.js"></script>  
     <script src="../bouncing-particles/resources/bouncing-particles.js"></script>
index 9be99ec..6249fd6 100644 (file)
@@ -48,9 +48,9 @@ CompositingTransformsStage.prototype.particleWillBeRemoved = function(particle)
     particle.element.remove();
 }
 
-function CompositedTransformsBenchmark(suite, test, options, recordTable, progressBar)
+function CompositedTransformsBenchmark(suite, test, options, progressBar)
 {
-    BouncingParticlesBenchmark.call(this, suite, test, options, recordTable, progressBar);
+    BouncingParticlesBenchmark.call(this, suite, test, options, progressBar);
 }
 
 CompositedTransformsBenchmark.prototype = Object.create(BouncingParticlesBenchmark.prototype);
@@ -61,7 +61,7 @@ CompositedTransformsBenchmark.prototype.createStage = function(element)
     return new CompositingTransformsStage(element, this._options);
 }
 
-window.benchmarkClient.create = function(suite, test, options, recordTable, progressBar)
+window.benchmarkClient.create = function(suite, test, options, progressBar)
 {
-    return new CompositedTransformsBenchmark(suite, test, options, recordTable, progressBar);
+    return new CompositedTransformsBenchmark(suite, test, options, progressBar);
 }
index bc39541..4913a2e 100644 (file)
@@ -195,7 +195,7 @@ Benchmark.prototype =
         if (stage != BenchmarkState.stages.FINISHED && currentTimeOffset < this._recordTimeOffset + this._recordInterval)
             return;
 
-        this.showResults(this._state.currentMessage(), this._state.currentProgress());
+        this.showResults(this._state.currentProgress(), this._state.currentMessage());
         this._recordTimeOffset = currentTimeOffset;
     },
     
@@ -228,11 +228,11 @@ window.addEventListener("load", function()
 });
 
 // This function is called from the suite controller run-callback when running the benchmark runner.
-window.runBenchmark = function(suite, test, options, recordTable, progressBar)
+window.runBenchmark = function(suite, test, options, progressBar)
 {
     var benchmarkOptions = { complexity: test.complexity };
     benchmarkOptions = Utilities.mergeObjects(benchmarkOptions, options);
     benchmarkOptions = Utilities.mergeObjects(benchmarkOptions, Utilities.parseParameters());
-    window.benchmark = window.benchmarkClient.create(suite, test, benchmarkOptions, recordTable, progressBar);
+    window.benchmark = window.benchmarkClient.create(suite, test, benchmarkOptions, progressBar);
     return window.benchmark.run();
 }
index adb3230..7b0b114 100644 (file)
@@ -128,7 +128,7 @@ StageAnimator.prototype.animate = function()
     return true;
 }
 
-function StageBenchmark(suite, test, options, recordTable, progressBar)
+function StageBenchmark(suite, test, options, progressBar)
 {
     Benchmark.call(this, options);
     
@@ -140,7 +140,6 @@ function StageBenchmark(suite, test, options, recordTable, progressBar)
     this._animator = this.createAnimator();
     this._suite = suite;
     this._test = test;
-    this._recordTable = recordTable;
     this._progressBar = progressBar;
 }
 
@@ -167,13 +166,10 @@ StageBenchmark.prototype.clear = function()
     return this._stage.clear();
 }
 
-StageBenchmark.prototype.showResults = function(message, progress)
+StageBenchmark.prototype.showResults = function(progress, message)
 {
-    if (!this._recordTable || !this._progressBar || !this._test)
+    if (!this._progressBar || !this._test)
         return;
 
-    if (this._options["display"] == "statistics-table")
-        this._recordTable.showRecord(this._test.name, message, this._sampler.toJSON(true, false), this._options);
-
     this._progressBar.setPos(progress);
 }
diff --git a/PerformanceTests/Animometer/tests/resources/utilities.js b/PerformanceTests/Animometer/tests/resources/utilities.js
deleted file mode 100644 (file)
index a6c7649..0000000
+++ /dev/null
@@ -1,43 +0,0 @@
-window.Utilities =
-{
-    _parse: function(str, sep)
-    {
-        var output = {};
-        str.split(sep).forEach(function(part) {
-            var item = part.split("=");
-            var value = decodeURIComponent(item[1]);
-            if (value[0] == "'" )
-                output[item[0]] = value.substr(1, value.length - 2);
-            else
-                output[item[0]] = value;                
-          });
-        return output;
-    },
-    
-    parseParameters: function()
-    {
-        return this._parse(window.location.search.substr(1), "&");
-    },
-    
-    parseArguments: function(str)
-    {
-        return this._parse(str, " ");
-    },
-    
-    extendObject: function(obj1, obj2)
-    {
-        for (var attrname in obj2)
-            obj1[attrname] = obj2[attrname];
-        return obj1;
-    },
-    
-    copyObject: function(obj)
-    {
-        return this.extendObject({}, obj);
-    },
-    
-    mergeObjects: function(obj1, obj2)
-    {
-        return this.extendObject(this.copyObject(obj1), obj2);
-    }
-}
index 37215ea..1dad205 100644 (file)
@@ -244,8 +244,8 @@ CanvasLineDashStage.prototype.animate = function() {
 
 // === BENCHMARK ===
 
-function CanvasPathBenchmark(suite, test, options, recordTable, progressBar) {
-    SimpleCanvasBenchmark.call(this, suite, test, options, recordTable, progressBar);
+function CanvasPathBenchmark(suite, test, options, progressBar) {
+    SimpleCanvasBenchmark.call(this, suite, test, options, progressBar);
 }
 CanvasPathBenchmark.prototype = Object.create(SimpleCanvasBenchmark.prototype);
 CanvasPathBenchmark.prototype.constructor = CanvasPathBenchmark;
@@ -290,6 +290,6 @@ CanvasPathBenchmark.prototype.createStage = function(element)
     }
 }
 
-window.benchmarkClient.create = function(suite, test, options, recordTable, progressBar) {
-    return new CanvasPathBenchmark(suite, test, options, recordTable, progressBar);
+window.benchmarkClient.create = function(suite, test, options, progressBar) {
+    return new CanvasPathBenchmark(suite, test, options, progressBar);
 }
index adeef18..55f4a86 100644 (file)
@@ -51,11 +51,8 @@ SimpleCanvasAnimator.prototype.animate = function()
 }
 
 
-function SimpleCanvasBenchmark(suite, test, options, recordTable, progressBar) {
-    options["gain"] = 6;
-    options["addLimit"] = 100;
-    options["removeLimit"] = 1000;
-    StageBenchmark.call(this, suite, test, options, recordTable, progressBar);
+function SimpleCanvasBenchmark(suite, test, options, progressBar) {
+    StageBenchmark.call(this, suite, test, options, progressBar);
 }
 SimpleCanvasBenchmark.prototype = Object.create(StageBenchmark.prototype);
 SimpleCanvasBenchmark.prototype.constructor = SimpleCanvasBenchmark;
index 64d7109..0d597fb 100644 (file)
@@ -7,7 +7,6 @@
     <script src="../../resources/sampler.js"></script>
     <script src="../../resources/extensions.js"></script>
     <script src="../resources/math.js"></script>
-    <script src="../resources/utilities.js"></script>
     <script src="../resources/main.js"></script>
     <script src="../resources/stage.js"></script>
     <script src="resources/simple-canvas.js"></script>
index c6a600d..3c889ee 100644 (file)
@@ -76,9 +76,9 @@ TemplateCanvasAnimator.prototype.animate = function()
     return StageAnimator.prototype.animate.call(this);
 }
 
-function TemplateCanvasBenchmark(suite, test, options, recordTable, progressBar)
+function TemplateCanvasBenchmark(suite, test, options, progressBar)
 {
-    StageBenchmark.call(this, suite, test, options, recordTable, progressBar);
+    StageBenchmark.call(this, suite, test, options, progressBar);
 }
 
 TemplateCanvasBenchmark.prototype = Object.create(StageBenchmark.prototype);
@@ -96,9 +96,9 @@ TemplateCanvasBenchmark.prototype.createAnimator = function()
     return new TemplateCanvasAnimator(this, this._options);
 }
 
-window.benchmarkClient.create = function(suite, test, options, recordTable, progressBar)
+window.benchmarkClient.create = function(suite, test, options, progressBar)
 {
     // This function is called from the test harness which starts the
     // test by creating your benchmark object.
-    return new TemplateCanvasBenchmark(suite, test, options, recordTable, progressBar);
+    return new TemplateCanvasBenchmark(suite, test, options, progressBar);
 }
index 11ce961..2e3c955 100644 (file)
@@ -32,9 +32,9 @@ TemplateCssStage.prototype.animate = function(timeDelta)
     // Loop through all your objects and ask them to animate.
 }
 
-function TemplateCssBenchmark(suite, test, options, recordTable, progressBar)
+function TemplateCssBenchmark(suite, test, options, progressBar)
 {
-    StageBenchmark.call(this, suite, test, options, recordTable, progressBar);
+    StageBenchmark.call(this, suite, test, options, progressBar);
 }
 
 TemplateCssBenchmark.prototype = Object.create(StageBenchmark.prototype);
@@ -47,9 +47,9 @@ TemplateCssBenchmark.prototype.createStage = function(element)
     return new TemplateCssStage(element, this._options);
 }
 
-window.benchmarkClient.create = function(suite, test, options, recordTable, progressBar)
+window.benchmarkClient.create = function(suite, test, options, progressBar)
 {
     // This function is called from the test harness which starts the
     // test by creating your benchmark object.
-    return new TemplateCssBenchmark(suite, test, options, recordTable, progressBar);
+    return new TemplateCssBenchmark(suite, test, options, progressBar);
 }
index 48a84fa..a88add7 100644 (file)
@@ -32,9 +32,9 @@ TemplateSvgStage.prototype.animate = function(timeDelta)
     // TODO: Loop through all your objects and ask them to animate.
 }
 
-function TemplateSvgBenchmark(suite, test, options, recordTable, progressBar)
+function TemplateSvgBenchmark(suite, test, options, progressBar)
 {
-    StageBenchmark.call(this, suite, test, options, recordTable, progressBar);
+    StageBenchmark.call(this, suite, test, options, progressBar);
 }
 
 TemplateSvgBenchmark.prototype = Object.create(StageBenchmark.prototype);
@@ -47,9 +47,9 @@ TemplateSvgBenchmark.prototype.createStage = function(element)
     return new TemplateSvgStage(element, this._options);
 }
 
-window.benchmarkClient.create = function(suite, test, options, recordTable, progressBar)
+window.benchmarkClient.create = function(suite, test, options, progressBar)
 {
     // This function is called from the test harness which starts the
     // test by creating your benchmark object.
-    return new TemplateSvgBenchmark(suite, test, options, recordTable, progressBar);
+    return new TemplateSvgBenchmark(suite, test, options, progressBar);
 }
index 6ce5dab..c17d7f9 100644 (file)
@@ -7,7 +7,6 @@
     <script src="../../resources/sampler.js"></script>
     <script src="../../resources/extensions.js"></script>
     <script src="../resources/math.js"></script>
-    <script src="../resources/utilities.js"></script>    
     <script src="../resources/main.js"></script>
     <script src="../resources/stage.js"></script>
     <script src="resources/template-canvas.js"></script>
index 2aa80db..1b9b0fb 100644 (file)
@@ -7,7 +7,6 @@
     <script src="../../resources/sampler.js"></script>
     <script src="../../resources/extensions.js"></script>
     <script src="../resources/math.js"></script>
-    <script src="../resources/utilities.js"></script>    
     <script src="../resources/main.js"></script>
     <script src="../resources/stage.js"></script>
     <script src="resources/template-css.js"></script>
index b9c8fce..a81f808 100644 (file)
@@ -7,7 +7,6 @@
     <script src="../../resources/sampler.js"></script>
     <script src="../../resources/extensions.js"></script>
     <script src="../resources/math.js"></script>
-    <script src="../resources/utilities.js"></script>    
     <script src="../resources/main.js"></script>
     <script src="../resources/stage.js"></script>
     <script src="resources/template-svg.js"></script>
index d51f303..32da2ac 100644 (file)
@@ -24,7 +24,6 @@
     <script src="../../resources/sampler.js"></script>
     <script src="../../resources/extensions.js"></script>
     <script src="../resources/math.js"></script>
-    <script src="../resources/utilities.js"></script>    
     <script src="../resources/main.js"></script>
     <script src="../resources/stage.js"></script>  
     <script src="resources/layering-text.js"></script>
index f5f2af4..e2b7ba9 100644 (file)
@@ -236,9 +236,9 @@ LayeringTextStage.prototype.tune = function(count)
     return this._textElements.length;
 }
 
-function LayeringTextBenchmark(suite, test, options, recordTable, progressBar)
+function LayeringTextBenchmark(suite, test, options, progressBar)
 {
-    StageBenchmark.call(this, suite, test, options, recordTable, progressBar);
+    StageBenchmark.call(this, suite, test, options, progressBar);
 }
 
 LayeringTextBenchmark.prototype = Object.create(StageBenchmark.prototype);
@@ -249,7 +249,7 @@ LayeringTextBenchmark.prototype.createStage = function(element)
     return new LayeringTextStage(element, this._options);
 }
 
-window.benchmarkClient.create = function(suite, test, options, recordTable, progressBar)
+window.benchmarkClient.create = function(suite, test, options, progressBar)
 {
-    return new LayeringTextBenchmark(suite, test, options, recordTable, progressBar);
+    return new LayeringTextBenchmark(suite, test, options, progressBar);
 }
index fa97bf2..30ba79a 100644 (file)
@@ -1,3 +1,265 @@
+2015-12-23  Jon Lee  <jonlee@apple.com>
+
+        Split benchmark into two different pages
+        https://bugs.webkit.org/show_bug.cgi?id=152458
+
+        Reviewed by Simon Fraser.
+
+        Address comments.
+
+        * Animometer/resources/debug-runner/benchmark-runner.js:
+        (BenchmarkRunner.prototype._runTestAndRecordResults): When the testing is complete the frame owning the
+        sampler goes away, and a later call to get the JSON data is no longer available. Process the data
+        right here, instead, and just reference it when displaying the results in ResultsDashboard.prototype._processData.
+        * Animometer/resources/extensions.js:
+        (Array.prototype.fill.Array.prototype.fill): Add a null check. Remove braces around single-line clause.
+        (Array.prototype.find.Array.prototype.find): Update the null check.
+        (ResultsDashboard.prototype._processData): Use the already-processed data.
+        * Animometer/resources/runner/animometer.css:
+        (.frame-container > iframe): Remove calc().
+
+        Move Array functions to extensions.js since that is included by the harness.
+        Add ES6 Array polyfills.
+
+        * Animometer/resources/algorithm.js:
+        (Array.prototype.swap): Moved to extensions.js.
+        * Animometer/resources/extensions.js:
+        (Array.prototype.swap):
+        (Array.prototype.fill): Added.
+        (Array.prototype.find): Added.
+
+        Adjust styles for iPad.
+
+        * Animometer/resources/runner/animometer.css:
+        (@media screen and (min-device-width: 768px)): Apply to iPad as well.
+        (@media screen and (max-device-width: 1024px)): Update width for iPads.
+
+        Adjustment styles for iOS.
+
+        * Animometer/developer.html: Different divs contain the iframe, so use a class instead and
+        update the style rules.
+        * Animometer/index.html:
+        * Animometer/resources/debug-runner/animometer.css: Remove extraneous rules.
+        (@media screen and (min-device-width: 1800px)): Move this up.
+        * Animometer/resources/runner/animometer.css: Add rules to accomodate iOS.
+
+        Get rid of prefixed flex properties for now.
+
+        * Animometer/resources/debug-runner/animometer.css:
+        * Animometer/resources/runner/animometer.css:
+
+        Update the structure of the harness. Remove the JSON-per-test but keep
+        the JSON of the whole test run. Use the full page in order to display
+        the graph.
+
+        * Animometer/developer.html: Update several of the JS file includes to UTF-8. Remove header and footer. Test results screen includes score,
+        average, and worst 5% statistics.
+        * Animometer/index.html: Make structure similar to developer.html.
+        * Animometer/resources/debug-runner/animometer.css: Remove most of the
+        button rules since they are superfluous. Move the progress bar to the
+        top, fixed. Update the results page rules.
+        * Animometer/resources/debug-runner/animometer.js: Remove most of the
+        additions to sectionsManager since they are no longer needed.
+        (setSectionHeader): Updates header of the section.
+        (window.suitesManager._updateStartButtonState): Update selector.
+        (showResults): Add keypress event for selecting different data for
+        copy/paste. Update how the results are populated. Include full test
+        JSON in a textarea, rather than requiring a button press.
+        (showTestGraph):
+        * Animometer/resources/debug-runner/tests.js: Update structure of Headers. Define different kinds of headers. Headers can control their
+        title, and the text used as the cell contents, including class name.
+        * Animometer/resources/extensions.js:
+        (ResultsTable): Update to include a flattened version of the headers,
+        used while populating table contents. Remove unneeded helper functions
+        for creating the table. Rename "show" to "add".
+        * Animometer/resources/runner/animometer.css: Update rules to
+        accommodate the new structure.
+        * Animometer/resources/runner/animometer.js:
+        (window.sectionsManager.setSectionScore): Helper function to set the
+        score and mean for a section.
+        (window.sectionsManager.populateTable): Helper function to set the table.
+        (window.benchmarkController.showResults): Refactor.
+        (window.benchmarkController.selectResults): Update selectors.
+        * Animometer/resources/runner/tests.js: Set Headers. Debug harness
+        extends it.
+
+        Update debug runner to have similar names to the basic runner. Include
+        that page's CSS and remove extraneous CSS rules.
+
+        Get rid of the statistics table #record.
+
+        * Animometer/developer.html: Rename #home to #intro. Rename .spacer to hr.
+        * Animometer/resources/debug-runner/animometer.css: Set to flexbox when selected.
+        * Animometer/resources/debug-runner/animometer.js: Remove recordTable.
+        (window.suitesManager._updateStartButtonState): Update selector to #intro.
+        (setupRunningSectionStyle): Deleted.
+
+        * Animometer/resources/runner/animometer.css:
+        (#test-container.selected): Change to flex-box only when visible.
+
+        Remove recordTable.
+        * Animometer/resources/debug-runner/benchmark-runner.js:
+        (BenchmarkRunner.prototype._runTestAndRecordResults):
+        * Animometer/resources/runner/tests.js:
+        * Animometer/tests/bouncing-particles/resources/bouncing-canvas-images.js:
+        * Animometer/tests/bouncing-particles/resources/bouncing-canvas-particles.js:
+        * Animometer/tests/bouncing-particles/resources/bouncing-canvas-shapes.js:
+        * Animometer/tests/bouncing-particles/resources/bouncing-css-images.js:
+        * Animometer/tests/bouncing-particles/resources/bouncing-css-shapes.js:
+        * Animometer/tests/bouncing-particles/resources/bouncing-particles.js:
+        * Animometer/tests/bouncing-particles/resources/bouncing-svg-images.js:
+        * Animometer/tests/bouncing-particles/resources/bouncing-svg-shapes.js:
+        * Animometer/tests/examples/resources/canvas-electrons.js:
+        * Animometer/tests/examples/resources/canvas-stars.js:
+        * Animometer/tests/misc/resources/compositing-transforms.js:
+        * Animometer/tests/resources/main.js:
+        * Animometer/tests/resources/stage.js:
+        (StageBenchmark): Remove _recordTable.
+        * Animometer/tests/simple/resources/simple-canvas-paths.js:
+        * Animometer/tests/simple/resources/simple-canvas.js:
+        * Animometer/tests/template/resources/template-canvas.js:
+        * Animometer/tests/template/resources/template-css.js:
+        * Animometer/tests/template/resources/template-svg.js:
+        * Animometer/tests/text/resources/layering-text.js:
+
+        * Animometer/resources/debug-runner/animometer.js:
+        (willStartFirstIteration): Fix selector, since results-table is used
+        in multiple places, so it cannot be an id.
+
+        Make it possible to select the scores, or the whole table data,
+        by cycling through different selections through key press of 's'.
+
+        * Animometer/resources/runner/animometer.js:
+        (window.benchmarkController.showResults): Attach a keypress handler
+        if it hasn't been added already.
+        (window.benchmarkController.selectResults):
+        * Animometer/resources/runner/tests.js: Cycle through different
+        ranges.
+
+        Fix a few fly-by errors.
+
+        * Animometer/resources/debug-runner/benchmark-runner.js:
+        (BenchmarkRunnerState.prototype.prepareCurrentTest): Update the frame relative path
+        since the files are now in the top directory instead of inside runner/.
+        (BenchmarkRunner.prototype._runTestAndRecordResults): Incorrect reference to function.
+        (BenchmarkRunner.prototype.step): Member variable is never used.
+
+        A little stylistic cleanup.
+
+        * Animometer/resources/debug-runner/benchmark-runner.js:
+        * Animometer/resources/extensions.js:
+        (window.DocumentExtension.createElement):
+        * Animometer/tests/resources/main.js:
+        (Benchmark.prototype.record):
+        * Animometer/tests/resources/stage.js:
+        (StageBenchmark.prototype.showResults): Reverse progress and message.
+        The message appears less frequently than the progress.
+        * Animometer/tests/simple/resources/simple-canvas.js:
+        (SimpleCanvasBenchmark): Remove unused options.
+
+        Add newer version of harness in a new page. Consolidate differences between the two
+        pages.
+
+        * Animometer/developer.html: Include runner/animometer.js. Rename the JS function
+        to run the benchmark to startBenchmark() instead of startTest(). Rename #running to
+        #test-container.
+        * Animometer/index.html: Added. Similarly calls startBenchmark() and has #test-container.
+        * Animometer/resources/debug-runner/animometer.css: Make the canvas 2:1 (1200px x 800px)
+        instead of 4:3.
+
+        Split out benchmarkRunnerClient and benchmarkController.
+
+        * Animometer/resources/debug-runner/animometer.js: Move needed functions out of
+        benchmarkRunnerClient, and leave the rest here to extend that object. Get rid of _resultsTable
+        and move populating the results table into benchmarkController. Rename _resultsDashboard
+        to results and make it accessible for other objects to use.
+        (willAddTestFrame): This is unnecessary. Remove.
+
+        (window.sectionsManager.showScore): Grab it from the results object instead of
+        benchmarkRunnerClient.
+        (window.sectionsManager.showSection): Deleted. Moved to runner/animometer.js.
+
+        (window.benchmarkController._runBenchmark): Deleted. Mostly moved into _startBenchmark.
+        (window.benchmarkController.startBenchmark): Refactor to call _startBenchmark.
+        (window.benchmarkController.showResults): Include most of benchmarkRunnerClient.didFinishLastIteration()
+        here.
+
+        * Animometer/resources/debug-runner/benchmark-runner.js:
+        (BenchmarkRunner.prototype._appendFrame): Remove unneeded call to willAddTestFrame.
+        * Animometer/resources/extensions.js:
+        (ResultsDashboard): Change the class to process the sampler data on-demand and hold onto that data
+        for later referencing.
+        (ResultsDashboard.prototype.toJSON): Deleted.
+        (ResultsDashboard.prototype._processData): Rename toJSON to _processData since it's not really
+        outputting JSON. Store the processed data into a member variable that can be referenced later.
+        (ResultsDashboard.prototype.get data): Process the data if it hasn't already.
+        (ResultsDashboard.prototype.get score): Process the data if it hasn't already, then return the
+        aggregate score.
+        (ResultsTable.prototype._showHeader): When outputting the results to a table, don't force the
+        need for an empty children array. This was to allow for a header row in the table that spanned
+        multiple columns. In the simpler harness, this is not needed.
+        (ResultsTable.prototype._showEmptyCells):
+        (ResultsTable.prototype._showTest): This hardcoded the columns. At least for the name and score,
+        which is the bare minimum needed for the simpler harness, key off of the header name provided.
+        * Animometer/resources/runner/animometer.css: Added. Use a similar 2:1 ratio. The score tables are
+        split into the data and the headers, and are also displayed RTL so that a later patch allows a
+        user to copy-paste the data easily.
+        * Animometer/resources/runner/animometer.js: Added. Use a simpler version of benchmarkRunnerClient.
+        The debug harness will extend these classes.
+        (window.benchmarkController._startBenchmark): Used by both harnesses.
+        (window.benchmarkController.startBenchmark): Set hard-coded options.
+        (window.benchmarkController.showResults): Includes most of benchmarkRunnerClient.didFinishLastIteration()
+        here.
+
+        Get rid of utilities.js. Move it all into extensions.js.
+
+        * Animometer/resources/extensions.js:
+        * Animometer/tests/resources/utilities.js: Removed.
+
+        * Animometer/tests/bouncing-particles/bouncing-canvas-images.html: Remove script link.
+        * Animometer/tests/bouncing-particles/bouncing-canvas-shapes.html: Ditto.
+        * Animometer/tests/bouncing-particles/bouncing-css-images.html: Ditto.
+        * Animometer/tests/bouncing-particles/bouncing-css-shapes.html: Ditto.
+        * Animometer/tests/bouncing-particles/bouncing-svg-images.html: Ditto.
+        * Animometer/tests/bouncing-particles/bouncing-svg-shapes.html: Ditto.
+        * Animometer/tests/examples/canvas-electrons.html: Ditto.
+        * Animometer/tests/examples/canvas-stars.html: Ditto.
+        * Animometer/tests/misc/compositing-transforms.html: Ditto.
+        * Animometer/tests/simple/simple-canvas-paths.html: Ditto.
+        * Animometer/tests/template/template-canvas.html: Ditto.
+        * Animometer/tests/template/template-css.html: Ditto.
+        * Animometer/tests/template/template-svg.html: Ditto.
+        * Animometer/tests/text/layering-text.html: Ditto.
+
+        Split tests.js into two. Add a new suite to runner/tests.js.
+
+        * Animometer/developer.html: Update the script order. Scripts from
+        debug-runner/ will always build on those from runner/, and have the
+        same name.
+        * Animometer/resources/debug-runner/tests.js: Move "complex examples"
+        suite into "miscellaneous tests".
+        (Suite): Deleted.
+        (Suite.prototype.prepare): Deleted.
+        (Suite.prototype.run): Deleted.
+        (suiteFromName): Deleted.
+        * Animometer/resources/runner/tests.js: Added. Take definitions and
+        functions needed by the test harness. Leave the test suites behind.
+        (Suite): Moved from debug script.
+        (Suite.prototype.prepare): Ditto.
+        (Suite.prototype.run): Ditto.
+        (suiteFromName): Ditto.
+        (testFromName): Ditto.
+
+        Move benchmark resources out into resources/debug-runner, and update URLs.
+
+        * Animometer/developer.html: Renamed from PerformanceTests/Animometer/runner/animometer.html.
+        * Animometer/resources/debug-runner/animometer.css: Renamed from PerformanceTests/Animometer/runner/resources/animometer.css.
+        * Animometer/resources/debug-runner/animometer.js: Renamed from PerformanceTests/Animometer/runner/resources/animometer.js.
+        * Animometer/resources/debug-runner/benchmark-runner.js: Renamed from PerformanceTests/Animometer/runner/resources/benchmark-runner.js.
+        * Animometer/resources/debug-runner/d3.min.js: Renamed from PerformanceTests/Animometer/runner/resources/d3.min.js.
+        * Animometer/resources/debug-runner/graph.js: Renamed from PerformanceTests/Animometer/runner/resources/graph.js.
+        * Animometer/resources/debug-runner/tests.js: Renamed from PerformanceTests/Animometer/runner/resources/tests.js.
+
 2015-12-11  Jon Lee  <jonlee@apple.com>
 
         Improve Animometer on iOS