<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[169540] trunk/PerformanceTests</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/169540">169540</a></dd>
<dt>Author</dt> <dd>rniwa@webkit.org</dd>
<dt>Date</dt> <dd>2014-06-02 12:57:39 -0700 (Mon, 02 Jun 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Rename DoYouEvenBench 0.17 to Speedometer 1.0 and add a new look.
https://bugs.webkit.org/show_bug.cgi?id=133455
Reviewed by Timothy Hatcher.
Renamed the benchmark to Speedometer and added the new look designed by Timothy Hatcher.
Also changed the unit of measurements from milliseconds to runs-per-minute averaged over the number
of the benchmark suites (7 for 1.0). You can divide 420000 by the old benchmark score (in milliseconds)
to get the new value for the set of tests that are enabled by default in 1.0. You can continue to see
results in milliseconds on Full.html#ms.
* DoYouEvenBench/Full.html: Added a bunch of sections and the description of the benchmark.
* DoYouEvenBench/resources/benchmark-report.js: Remove the newly added content when ran inside a DRT or
WTR so that run-perf-tests wouldn't error.
* DoYouEvenBench/resources/benchmark-runner.js:
(BenchmarkRunner.prototype._appendFrame): Call a newly added willAddTestFrame callback when it exists.
* DoYouEvenBench/resources/gauge.png: Added.
* DoYouEvenBench/resources/gauge@2x.png: Added.
* DoYouEvenBench/resources/logo.png: Added.
* DoYouEvenBench/resources/logo@2x.png: Added.
* DoYouEvenBench/resources/main.css: Replaced the style.
* DoYouEvenBench/resources/main.js:
(window.benchmarkClient.willAddTestFrame): Place the iframe right where #testContainer is shown.
(window.benchmarkClient.willRunTest): Show the name of the suite (e.g. EmberJS-TodoMVC) to run next.
(window.benchmarkClient.didRunSuites):
(window.benchmarkClient.willStartFirstIteration): Initialize _timeValues and _finishedTestCount now that
we have an UI to run the benchmark multiple times without reloading the page.
(window.benchmarkClient.didFinishLastIteration): Split into smaller pieces.
(window.benchmarkClient._computeResults): Computes the mean and the statistics for the given time values,
and also format them in a human readable form.
(window.benchmarkClient._computeResults.totalTimeInDisplayUnit): Converts ms to runs/min.
(window.benchmarkClient._computeResults.sigFigFromPercentDelta): Given a percentage error (e.g. 1%),
returns the number of significant digits required for the mean.
(window.benchmarkClient._computeResults.toSigFigPrecision): Calls toPrecision with the specified precision
constrained to be at least the number of non-decimal digits and at most 6.
(window.benchmarkClient._addDetailedResultsRow): Renamed from _addResult. It now takes the table to which
to add a row and the iteration number.
(window.benchmarkClient._updateGaugeNeedle): Added. Controls the angle of the speed indicator.
(window.benchmarkClient._populateDetailedResults): Added.
(window.benchmarkClient.prepareUI): Added. It adds an event listener to show a specified section when
the push state of the document changes, and shows a warning sign when the view port size is too small.
We do this inside a callback to avoid running it inside DRT / WTR.
(startBenchmark):
(showSection): Added.
(startTest): Added.
(showResultsSummary): Added.
(showResultDetails): Added.
(showAbout): Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkPerformanceTestsChangeLog">trunk/PerformanceTests/ChangeLog</a></li>
<li><a href="#trunkPerformanceTestsDoYouEvenBenchFullhtml">trunk/PerformanceTests/DoYouEvenBench/Full.html</a></li>
<li><a href="#trunkPerformanceTestsDoYouEvenBenchresourcesbenchmarkreportjs">trunk/PerformanceTests/DoYouEvenBench/resources/benchmark-report.js</a></li>
<li><a href="#trunkPerformanceTestsDoYouEvenBenchresourcesbenchmarkrunnerjs">trunk/PerformanceTests/DoYouEvenBench/resources/benchmark-runner.js</a></li>
<li><a href="#trunkPerformanceTestsDoYouEvenBenchresourcesmaincss">trunk/PerformanceTests/DoYouEvenBench/resources/main.css</a></li>
<li><a href="#trunkPerformanceTestsDoYouEvenBenchresourcesmainjs">trunk/PerformanceTests/DoYouEvenBench/resources/main.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkPerformanceTestsDoYouEvenBenchresourcesgaugepng">trunk/PerformanceTests/DoYouEvenBench/resources/gauge.png</a></li>
<li><a href="#trunkPerformanceTestsDoYouEvenBenchresourcesgauge2xpng">trunk/PerformanceTests/DoYouEvenBench/resources/gauge@2x.png</a></li>
<li><a href="#trunkPerformanceTestsDoYouEvenBenchresourceslogopng">trunk/PerformanceTests/DoYouEvenBench/resources/logo.png</a></li>
<li><a href="#trunkPerformanceTestsDoYouEvenBenchresourceslogo2xpng">trunk/PerformanceTests/DoYouEvenBench/resources/logo@2x.png</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkPerformanceTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/ChangeLog (169539 => 169540)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/ChangeLog 2014-06-02 19:57:18 UTC (rev 169539)
+++ trunk/PerformanceTests/ChangeLog 2014-06-02 19:57:39 UTC (rev 169540)
</span><span class="lines">@@ -1,3 +1,58 @@
</span><ins>+2014-06-02 Ryosuke Niwa <rniwa@webkit.org>
+
+ Rename DoYouEvenBench 0.17 to Speedometer 1.0 and add a new look.
+ https://bugs.webkit.org/show_bug.cgi?id=133455
+
+ Reviewed by Timothy Hatcher.
+
+ Renamed the benchmark to Speedometer and added the new look designed by Timothy Hatcher.
+
+ Also changed the unit of measurements from milliseconds to runs-per-minute averaged over the number
+ of the benchmark suites (7 for 1.0). You can divide 420000 by the old benchmark score (in milliseconds)
+ to get the new value for the set of tests that are enabled by default in 1.0. You can continue to see
+ results in milliseconds on Full.html#ms.
+
+ * DoYouEvenBench/Full.html: Added a bunch of sections and the description of the benchmark.
+
+ * DoYouEvenBench/resources/benchmark-report.js: Remove the newly added content when ran inside a DRT or
+ WTR so that run-perf-tests wouldn't error.
+ * DoYouEvenBench/resources/benchmark-runner.js:
+ (BenchmarkRunner.prototype._appendFrame): Call a newly added willAddTestFrame callback when it exists.
+
+ * DoYouEvenBench/resources/gauge.png: Added.
+ * DoYouEvenBench/resources/gauge@2x.png: Added.
+ * DoYouEvenBench/resources/logo.png: Added.
+ * DoYouEvenBench/resources/logo@2x.png: Added.
+ * DoYouEvenBench/resources/main.css: Replaced the style.
+
+ * DoYouEvenBench/resources/main.js:
+ (window.benchmarkClient.willAddTestFrame): Place the iframe right where #testContainer is shown.
+ (window.benchmarkClient.willRunTest): Show the name of the suite (e.g. EmberJS-TodoMVC) to run next.
+ (window.benchmarkClient.didRunSuites):
+ (window.benchmarkClient.willStartFirstIteration): Initialize _timeValues and _finishedTestCount now that
+ we have an UI to run the benchmark multiple times without reloading the page.
+ (window.benchmarkClient.didFinishLastIteration): Split into smaller pieces.
+ (window.benchmarkClient._computeResults): Computes the mean and the statistics for the given time values,
+ and also format them in a human readable form.
+ (window.benchmarkClient._computeResults.totalTimeInDisplayUnit): Converts ms to runs/min.
+ (window.benchmarkClient._computeResults.sigFigFromPercentDelta): Given a percentage error (e.g. 1%),
+ returns the number of significant digits required for the mean.
+ (window.benchmarkClient._computeResults.toSigFigPrecision): Calls toPrecision with the specified precision
+ constrained to be at least the number of non-decimal digits and at most 6.
+ (window.benchmarkClient._addDetailedResultsRow): Renamed from _addResult. It now takes the table to which
+ to add a row and the iteration number.
+ (window.benchmarkClient._updateGaugeNeedle): Added. Controls the angle of the speed indicator.
+ (window.benchmarkClient._populateDetailedResults): Added.
+ (window.benchmarkClient.prepareUI): Added. It adds an event listener to show a specified section when
+ the push state of the document changes, and shows a warning sign when the view port size is too small.
+ We do this inside a callback to avoid running it inside DRT / WTR.
+ (startBenchmark):
+ (showSection): Added.
+ (startTest): Added.
+ (showResultsSummary): Added.
+ (showResultDetails): Added.
+ (showAbout): Added.
+
</ins><span class="cx"> 2014-06-01 Ryosuke Niwa <rniwa@webkit.org>
</span><span class="cx">
</span><span class="cx"> DYEBench: Move test states into benchmarkClient and remove the closure
</span></span></pre></div>
<a id="trunkPerformanceTestsDoYouEvenBenchFullhtml"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/DoYouEvenBench/Full.html (169539 => 169540)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/DoYouEvenBench/Full.html 2014-06-02 19:57:18 UTC (rev 169539)
+++ trunk/PerformanceTests/DoYouEvenBench/Full.html 2014-06-02 19:57:39 UTC (rev 169540)
</span><span class="lines">@@ -2,7 +2,7 @@
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><span class="cx"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</span><del>- <title>DoYouEvenBench v0.17</title>
</del><ins>+ <title>Speedometer 1.0</title>
</ins><span class="cx"> <link rel="stylesheet" href="resources/main.css">
</span><span class="cx"> <script src="resources/main.js" defer></script>
</span><span class="cx"> <script src="resources/benchmark-runner.js" defer></script>
</span><span class="lines">@@ -11,5 +11,90 @@
</span><span class="cx"> <script src="resources/tests.js" defer></script>
</span><span class="cx"> </head>
</span><span class="cx"> <body>
</span><ins>+<main>
+ <a id="logo-link" href="javascript:showHome()"><img id="logo" src="resources/logo.png"></a>
+
+ <section id="home" class="selected">
+ <p>
+ Speedometer is a browser benchmark that measures the responsiveness of Web applications.
+ It uses demo web applications to simulate user actions such as adding to-do items.
+ </p>
+ <p id="screen-size-warning"><strong>
+ Your browser window is too small. For most accurate results, please make the view port size at least 850px by 650px.<br>
+ It's currently <span id="screen-size"></span>.
+ </strong></p>
+ <div class="buttons">
+ <button onclick="startTest()">Start Test</button>
+ </div>
+ <p class="show-about"><a href="javascript:showAbout()">About Speedometer</a></p>
+ </section>
+
+ <section id="running">
+ <div id="testContainer"></div>
+ <div id="progress"><div id="progress-completed"></div></div>
+ <div id="info"></div>
+ </section>
+
+ <section id="summarized-results">
+ <h1>Runs / Minute</h1>
+ <div class="gauge"><div class="window"><div class="needle"></div></div></div>
+ <hr>
+ <div id="result-number"></div>
+ <div id="confidence-number"></div>
+ <div class="buttons">
+ <button onclick="startTest()">Test Again</button>
+ <button class="show-details" onclick="showResultDetails()">Details</button>
+ </div>
+ </section>
+
+ <section id="detailed-results">
+ <h1>Detailed Results</h1>
+ <table class="results-table"></table>
+ <table class="results-table"></table>
+ <div class="arithmetic-mean"><label>Arithmetic Mean:</label><span id="results-with-statistics"></span></div>
+ <div class="buttons">
+ <button onclick="startTest()">Test Again</button>
+ <button id="show-summary" onclick="showResultsSummary()">Summary</button>
+ </div>
+ <p class="show-about"><a href="javascript:showAbout()">About Speedometer</a></p>
+ </section>
+
+ <section id="about">
+ <h1>About Speedometer</h1>
+
+ <p>Speedometer measures simulated user interactions in web applications.</p>
+
+ <p>
+ The current benchmark uses TodoMVC to simulate user actions for adding, completing, and removing to-do items.
+ Speedometer repeats the same actions using DOM APIs &mdash;
+ a core set of web platform APIs used extensively in web applications &mdash;
+ as well as six popular JavaScript frameworks: Ember.js, Backbone.js, jQuery, AngularJS, React, and Flight.
+ Many of these frameworks are used on the most popular websites in the world, such as Facebook and Twitter.
+ The performance of these types of operations depends on the speed of the DOM APIs, the JavaScript engine,
+ CSS style resolution, layout, and other technologies.
+ </p>
+
+ <p>
+ Although user-driven actions like mouse movements and keyboard input cannot be accurately emulated in JavaScript,
+ Speedometer does its best to faithfully replay a typical workload within the demo applications.
+ To make the run time long enough to measure with the limited precision,
+ we synchronously execute a large number of the operations, such as adding one hundred to-do items.
+ </p>
+
+ <p>
+ Some browser engines use an optimization strategy of doing some work asynchronously to reduce the run time of synchronous operations.
+ While returning control back to JavaScript execution as soon as possible is worth pursuing,
+ a holistic, accurate measurement of web application performance involves measuring
+ when these related, asynchronous computations actually complete.
+ Thus, Speedometer measures the time browser spends executing those asynchronous tasks in Speedometer,
+ estimated as the time between when a zero-second delay timer is scheduled and when it is fired.</p>
+
+ <p class="note">
+ <strong>Note:</strong> Speedometer is not meant to compare the performance of different JavaScript frameworks.
+ The mechanism we use to simulate user actions is different for each framework,
+ and we’re forcing frameworks to do more work synchronously than needed in some cases to ensure run time can be measured.
+ </p>
+ </section>
+</main>
</ins><span class="cx"> </body>
</span><span class="cx"> </html>
</span></span></pre></div>
<a id="trunkPerformanceTestsDoYouEvenBenchresourcesbenchmarkreportjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/DoYouEvenBench/resources/benchmark-report.js (169539 => 169540)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/DoYouEvenBench/resources/benchmark-report.js 2014-06-02 19:57:18 UTC (rev 169539)
+++ trunk/PerformanceTests/DoYouEvenBench/resources/benchmark-report.js 2014-06-02 19:57:39 UTC (rev 169540)
</span><span class="lines">@@ -18,6 +18,11 @@
</span><span class="cx"> var createTest;
</span><span class="cx"> var valuesByIteration = new Array;
</span><span class="cx">
</span><ins>+ window.onload = function () {
+ document.body.removeChild(document.querySelector('main'));
+ startBenchmark();
+ }
+
</ins><span class="cx"> window.benchmarkClient = {
</span><span class="cx"> iterationCount: 5, // Use 4 different instances of DRT/WTR to run 5 iterations.
</span><span class="cx"> willStartFirstIteration: function (iterationCount) {
</span></span></pre></div>
<a id="trunkPerformanceTestsDoYouEvenBenchresourcesbenchmarkrunnerjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/DoYouEvenBench/resources/benchmark-runner.js (169539 => 169540)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/DoYouEvenBench/resources/benchmark-runner.js 2014-06-02 19:57:18 UTC (rev 169539)
+++ trunk/PerformanceTests/DoYouEvenBench/resources/benchmark-runner.js 2014-06-02 19:57:39 UTC (rev 169540)
</span><span class="lines">@@ -83,6 +83,9 @@
</span><span class="cx"> frame.style.top = '0px';
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ if (this._client && this._client.willAddTestFrame)
+ this._client.willAddTestFrame(frame);
+
</ins><span class="cx"> document.body.insertBefore(frame, document.body.firstChild);
</span><span class="cx"> this._frame = frame;
</span><span class="cx"> return frame;
</span></span></pre></div>
<a id="trunkPerformanceTestsDoYouEvenBenchresourcesgaugepng"></a>
<div class="binary"><h4>Added: trunk/PerformanceTests/DoYouEvenBench/resources/gauge.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/PerformanceTests/DoYouEvenBench/resources/gauge.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkPerformanceTestsDoYouEvenBenchresourcesgauge2xpng"></a>
<div class="binary"><h4>Added: trunk/PerformanceTests/DoYouEvenBench/resources/gauge@2x.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/PerformanceTests/DoYouEvenBench/resources/gauge@2x.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkPerformanceTestsDoYouEvenBenchresourceslogopng"></a>
<div class="binary"><h4>Added: trunk/PerformanceTests/DoYouEvenBench/resources/logo.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/PerformanceTests/DoYouEvenBench/resources/logo.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkPerformanceTestsDoYouEvenBenchresourceslogo2xpng"></a>
<div class="binary"><h4>Added: trunk/PerformanceTests/DoYouEvenBench/resources/logo@2x.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/PerformanceTests/DoYouEvenBench/resources/logo@2x.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkPerformanceTestsDoYouEvenBenchresourcesmaincss"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/DoYouEvenBench/resources/main.css (169539 => 169540)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/DoYouEvenBench/resources/main.css 2014-06-02 19:57:18 UTC (rev 169539)
+++ trunk/PerformanceTests/DoYouEvenBench/resources/main.css 2014-06-02 19:57:39 UTC (rev 169540)
</span><span class="lines">@@ -1,7 +1,285 @@
</span><del>-caption { margin: 0; padding: 0; font-family: sans-serif; font-size: 1em; font-weight: bold; white-space: nowrap; }
-#progressContainer { padding: 605px 0 10px 0; width: 800px; }
-#progressContainer div { background-color: #ccc; width: 0; height: 5px; overflow: hidden; }
-table { font-family: sans-serif; }
-table, td, th { border: solid 1px #ccc; border-collapse: collapse; padding: 5px; }
-th { text-align: right; }
-td { text-align: left; }
</del><ins>+body {
+ background-color: rgb(46, 51, 55);
+ color: rgb(235, 235, 235);
+ font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
+}
+
+::selection {
+ color: rgb(46, 51, 55);
+ background-color: rgb(235, 235, 235);
+}
+
+h1,
+button {
+ font-family: "Futura-Medium", Futura, "Helvetica Neue", Helvetica, Verdana, sans-serif;
+}
+
+code {
+ font-family: Menlo, Monaco, monospace;
+ font-size: smaller;
+}
+
+button {
+ cursor: pointer;
+}
+
+hr {
+ border: 1px solid rgb(235, 235, 235);
+ width: 50%;
+ margin: 40px auto;
+}
+
+img {
+ -webkit-user-select: none;
+ -webkit-user-drag: none;
+}
+
+main {
+ display: block;
+ position: absolute;
+ width: 800px;
+ height: 600px;
+ top: 50%;
+ left: 50%;
+ margin-top: -321px;
+ margin-left: -421px;
+ padding: 15px;
+ border: 6px solid rgb(235, 235, 235);
+ border-radius: 20px;
+}
+
+#logo {
+ position: absolute;
+ left: -70px;
+ top: 115px;
+ width: 75px;
+ height: 406px;
+}
+
+h1 {
+ margin-top: 30px;
+ font-size: 40px;
+ font-weight: normal;
+ color: rgb(235, 235, 235);
+ text-align: center;
+}
+
+p {
+ font-size: 16px;
+ line-height: 21px;
+}
+
+a {
+ color: inherit;
+}
+
+.buttons {
+ margin-top: 30px;
+ text-align: center;
+}
+
+button {
+ -webkit-appearance: none;
+ border: 3px solid rgb(235, 235, 235);
+ border-radius: 10px;
+ min-width: 200px;
+ padding: 5px 20px;
+ margin: 0 40px;
+ font-size: 25px;
+ color: rgb(235, 235, 235);
+ background-color: transparent;
+
+ -webkit-user-select: none;
+}
+
+button:active {
+ background-color: rgb(235, 235, 235);
+ color: rgb(46, 51, 55);
+ border-color: rgb(235, 235, 235) !important;
+}
+
+button:focus {
+ outline: none;
+ border-color: rgb(232, 79, 79);
+}
+
+section {
+ display: none;
+}
+
+section > p {
+ margin: 10px 20px;
+}
+
+section.selected {
+ display: block;
+}
+
+#testContainer {
+ position: absolute;
+ top: 15px;
+ left: 15px;
+ width: 800px;
+ height: 600px;
+}
+
+section#home > p {
+ margin: 0 auto;
+ width: 70%;
+ text-align: center;
+}
+
+section#home > p:first-child {
+ margin-top: 160px;
+ text-align: center;
+}
+
+section#home > .show-about {
+ margin-top: 100px;
+}
+
+section#home > .buttons {
+ margin-top: 80px;
+}
+
+section#running > #progress {
+ 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);
+}
+
+section#running #progress-completed {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 6px;
+ width: 0;
+ background-color: rgb(235, 235, 235);
+}
+
+section#running > #info {
+ position: absolute;
+ bottom: -25px;
+ left: 60px;
+ right: 60px;
+ height: 12px;
+ color: rgb(128, 128, 128);
+ text-align: center;
+ font-size: 12px;
+}
+
+section#summarized-results > #result-number,
+section#summarized-results > #confidence-number {
+ font-family: "Futura-CondensedMedium", Futura, "Helvetica Neue", Helvetica, Verdana, sans-serif;
+}
+
+section#summarized-results > #result-number {
+ text-align: center;
+ font-size: 145px;
+ line-height: 145px;
+}
+
+section#summarized-results > #confidence-number {
+ text-align: center;
+ font-size: 36px;
+ line-height: 36px;
+ color: rgb(128, 128, 128);
+}
+
+section#detailed-results > table {
+ float: left;
+ width: 50%;
+}
+
+section#detailed-results > .arithmetic-mean {
+ clear: both;
+ padding-top: 32px;
+ text-align: center;
+}
+
+section#detailed-results > .arithmetic-mean > label {
+ font-weight: bold;
+ margin-right: 10px;
+ color: rgb(128, 128, 128);
+}
+
+section#detailed-results > .show-about {
+ margin-top: 30px;
+ text-align: center;
+}
+
+section#about h1 {
+ margin-top: 20px;
+ font-size: 30px;
+}
+
+section#about .note {
+ color: rgb(128, 128, 128);
+}
+
+table {
+ border-spacing: 0;
+ border-collapse: collapse;
+}
+
+th,
+td {
+ padding: 5px;
+}
+
+th {
+ text-align: right;
+ color: rgb(128, 128, 128);
+}
+
+.gauge {
+ position: relative;
+ width: 738px;
+ height: 78px;
+ background-image: url(gauge.png);
+ background-size: 100% 100%;
+ background-repat: no-repeat;
+ margin: 0 auto;
+}
+
+.gauge > .window {
+ position: absolute;
+ left: 0;
+ top: 33px;
+ bottom: 0;
+ right: 0;
+ overflow: hidden;
+}
+
+.gauge > .window > .needle {
+ position: absolute;
+ left: 363px;
+ bottom: -88px;
+ width: 4px;
+ height: 400px;
+ background-color: rgb(247, 148, 29);
+
+ -webkit-transform: rotate(-70deg);
+ -webkit-transform-origin: 2px 400px;
+
+ -moz-transform: rotate(-70deg);
+ -moz-transform-origin: 2px 400px;
+
+ transform: rotate(-70deg);
+ transform-origin: 2px 400px;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx), (min-resolution: 192dpi) {
+ #logo {
+ content: url(logo@2x.png); /* FIXME: This does not work in Firefox. */
+ }
+
+ .gauge {
+ background-image: url(gauge@2x.png);
+ }
+}
</ins></span></pre></div>
<a id="trunkPerformanceTestsDoYouEvenBenchresourcesmainjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/DoYouEvenBench/resources/main.js (169539 => 169540)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/DoYouEvenBench/resources/main.js 2014-06-02 19:57:18 UTC (rev 169539)
+++ trunk/PerformanceTests/DoYouEvenBench/resources/main.js 2014-06-02 19:57:39 UTC (rev 169540)
</span><span class="lines">@@ -1,57 +1,151 @@
</span><span class="cx"> window.benchmarkClient = {
</span><span class="cx"> iterationCount: 20,
</span><ins>+ testsCount: null,
+ suitesCount: null,
</ins><span class="cx"> _timeValues: [],
</span><span class="cx"> _finishedTestCount: 0,
</span><del>- _iterationNumber: 0,
- _progress: null,
</del><span class="cx"> _progressCompleted: null,
</span><del>- _resultContainer: null,
- willRunTest: function () { },
</del><ins>+ 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';
+ },
+ willRunTest: function (suite, test) {
+ document.getElementById('info').textContent = suite.name + ' ( ' + this._finishedTestCount + ' / ' + this.testsCount + ' )';
+ },
</ins><span class="cx"> didRunTest: function () {
</span><span class="cx"> this._finishedTestCount++;
</span><span class="cx"> this._progressCompleted.style.width = (this._finishedTestCount * 100 / this.testsCount) + '%';
</span><span class="cx"> },
</span><span class="cx"> didRunSuites: function (measuredValues) {
</span><span class="cx"> this._timeValues.push(measuredValues.total);
</span><del>- this._iterationNumber++;
- this._addResult('Iteration ' + this._iterationNumber, measuredValues.total.toFixed(2) + ' ms');
</del><span class="cx"> },
</span><span class="cx"> willStartFirstIteration: function () {
</span><del>- // We don't use the real progress element as some implementations animate it.
- this._progress = document.createElement('div');
- this._progress.appendChild(document.createElement('div'));
- this._progress.id = 'progressContainer';
- document.body.appendChild(this._progress);
- this._progressCompleted = this._progress.firstChild;
</del><ins>+ this._timeValues = [];
+ this._finishedTestCount = 0;
+ this._progressCompleted = document.getElementById('progress-completed');
+ document.getElementById('logo-link').onclick = function (event) { event.preventDefault(); return false; }
+ },
+ didFinishLastIteration: function () {
+ document.getElementById('logo-link').onclick = null;
</ins><span class="cx">
</span><del>- this._resultContainer = document.createElement('table');
- var caption = document.createElement('caption');
- caption.textContent = document.title;
- this._resultContainer.appendChild(caption);
- document.body.appendChild(this._resultContainer);
</del><ins>+ var displayUnit = location.search == '?ms' || location.hash == '#ms' ? 'ms' : 'runs/min';
+ var results = this._computeResults(this._timeValues, displayUnit);
+
+ this._updateGaugeNeedle(results.mean);
+ document.getElementById('result-number').textContent = results.formattedMean;
+ if (results.formattedDelta)
+ document.getElementById('confidence-number').textContent = '\u00b1 ' + results.formattedDelta;
+
+ this._populateDetailedResults(results.formattedValues);
+ document.getElementById('results-with-statistics').textContent = results.formattedMeanAndDelta;
+
+ if (displayUnit == 'ms') {
+ document.getElementById('show-summary').style.display = 'none';
+ showResultDetails();
+ } else
+ showResultsSummary();
</ins><span class="cx"> },
</span><del>- didFinishLastIteration: function () {
- var values = this._timeValues;
</del><ins>+ _computeResults: function (timeValues, displayUnit) {
+ var suitesCount = this.suitesCount;
+ function totalTimeInDisplayUnit(time) {
+ if (displayUnit == 'ms')
+ return time;
+ return 60 * 1000 * suitesCount / time;
+ }
+
+ function sigFigFromPercentDelta(percentDelta) {
+ return Math.ceil(-Math.log(percentDelta)/Math.log(10)) + 3;
+ }
+
+ function toSigFigPrecision(number, sigFig) {
+ var nonDecimalDigitCount = number < 1 ? 0 : (Math.floor(Math.log(number)/Math.log(10)) + 1);
+ return number.toPrecision(Math.max(nonDecimalDigitCount, Math.min(6, sigFig)));
+ }
+
+ var values = timeValues.map(totalTimeInDisplayUnit);
</ins><span class="cx"> var sum = values.reduce(function (a, b) { return a + b; }, 0);
</span><span class="cx"> var arithmeticMean = sum / values.length;
</span><del>- var meanLabel = arithmeticMean.toFixed(2) + ' ms';
</del><ins>+ var meanSigFig = 4;
+ var formattedDelta;
+ var formattedPercentDelta;
</ins><span class="cx"> if (window.Statistics) {
</span><span class="cx"> var delta = Statistics.confidenceIntervalDelta(0.95, values.length, sum, Statistics.squareSum(values));
</span><del>- var precentDelta = delta * 100 / arithmeticMean;
- meanLabel += ' \xb1 ' + delta.toFixed(2) + ' ms (' + precentDelta.toFixed(2) + '%)';
</del><ins>+ if (!isNaN(delta)) {
+ var percentDelta = delta * 100 / arithmeticMean;
+ meanSigFig = sigFigFromPercentDelta(percentDelta);
+ formattedDelta = toSigFigPrecision(delta, 2);
+ formattedPercentDelta = toSigFigPrecision(percentDelta, 2) + '%';
+ }
</ins><span class="cx"> }
</span><del>- this._addResult('Arithmetic Mean', meanLabel);
- this._progress.parentNode.removeChild(this._progress);
</del><ins>+
+ var formattedMean = toSigFigPrecision(arithmeticMean, Math.max(meanSigFig, 3));
+
+ return {
+ formattedValues: timeValues.map(function (time) {
+ return toSigFigPrecision(totalTimeInDisplayUnit(time), 4) + ' ' + displayUnit;
+ }),
+ mean: arithmeticMean,
+ formattedMean: formattedMean,
+ formattedDelta: formattedDelta,
+ formattedMeanAndDelta: formattedMean + (formattedDelta ? ' \xb1 ' + formattedDelta + ' (' + formattedPercentDelta + ')' : ''),
+ };
</ins><span class="cx"> },
</span><del>- _addResult: function (title, value) {
</del><ins>+ _addDetailedResultsRow: function (table, iterationNumber, value) {
</ins><span class="cx"> var row = document.createElement('tr');
</span><span class="cx"> var th = document.createElement('th');
</span><del>- th.textContent = title;
</del><ins>+ th.textContent = 'Iteration ' + (iterationNumber + 1);
</ins><span class="cx"> var td = document.createElement('td');
</span><span class="cx"> td.textContent = value;
</span><span class="cx"> row.appendChild(th);
</span><span class="cx"> row.appendChild(td);
</span><del>- this._resultContainer.appendChild(row);
</del><ins>+ table.appendChild(row);
+ },
+ _updateGaugeNeedle: function (rpm) {
+ var needleAngle = Math.max(0, Math.min(rpm, 140)) - 70;
+ var needleRotationValue = 'rotate(' + needleAngle + 'deg)';
+
+ var gaugeNeedleElement = document.querySelector('#summarized-results > .gauge .needle');
+ gaugeNeedleElement.style.setProperty('-webkit-transform', needleRotationValue);
+ gaugeNeedleElement.style.setProperty('-moz-transform', needleRotationValue);
+ gaugeNeedleElement.style.setProperty('-ms-transform', needleRotationValue);
+ gaugeNeedleElement.style.setProperty('transform', needleRotationValue);
+ },
+ _populateDetailedResults: function (formattedValues) {
+ var resultsTables = document.querySelectorAll('.results-table');
+ var i = 0;
+ resultsTables[0].innerHTML = '';
+ for (; i < Math.ceil(formattedValues.length / 2); i++)
+ this._addDetailedResultsRow(resultsTables[0], i, formattedValues[i]);
+ resultsTables[1].innerHTML = '';
+ for (; i < formattedValues.length; i++)
+ this._addDetailedResultsRow(resultsTables[1], i, formattedValues[i]);
+ },
+ prepareUI: function () {
+ window.addEventListener('popstate', function (event) {
+ if (event.state) {
+ var sectionToShow = event.state.section;
+ if (sectionToShow) {
+ var sections = document.querySelectorAll('main > section');
+ for (var i = 0; i < sections.length; i++) {
+ if (sections[i].id === sectionToShow)
+ return showSection(sectionToShow, false);
+ }
+ }
+ }
+ return showSection('home', false);
+ }, false);
+
+ function updateScreenSize() {
+ // FIXME: Detect when the window size changes during the test.
+ var screenIsTooSmall = window.innerWidth < 850 || window.innerHeight < 650;
+ document.getElementById('screen-size').textContent = window.innerWidth + 'px by ' + window.innerHeight + 'px';
+ document.getElementById('screen-size-warning').style.display = screenIsTooSmall ? null : 'none';
+ }
+
+ window.addEventListener('resize', updateScreenSize);
+ updateScreenSize();
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -59,8 +153,47 @@
</span><span class="cx"> var enabledSuites = Suites.filter(function (suite) { return !suite.disabled });
</span><span class="cx"> var totalSubtestCount = enabledSuites.reduce(function (testsCount, suite) { return testsCount + suite.tests.length; }, 0);
</span><span class="cx"> benchmarkClient.testsCount = benchmarkClient.iterationCount * totalSubtestCount;
</span><ins>+ benchmarkClient.suitesCount = enabledSuites.length;
</ins><span class="cx"> var runner = new BenchmarkRunner(Suites, benchmarkClient);
</span><span class="cx"> runner.runMultipleIterations(benchmarkClient.iterationCount);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-window.onload = startBenchmark;
</del><ins>+function showSection(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);
+}
+
+function showHome() {
+ showSection('home', true);
+}
+
+function startTest() {
+ showSection('running');
+ startBenchmark();
+}
+
+function showResultsSummary() {
+ showSection('summarized-results', true);
+}
+
+function showResultDetails() {
+ showSection('detailed-results', true);
+}
+
+function showAbout() {
+ showSection('about', true);
+}
+
+window.addEventListener('DOMContentLoaded', function () {
+ if (benchmarkClient.prepareUI)
+ benchmarkClient.prepareUI();
+});
</ins></span></pre>
</div>
</div>
</body>
</html>