Refined the ARES-6 experience
authorjond@apple.com <jond@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 6 Mar 2017 21:14:31 +0000 (21:14 +0000)
committerjond@apple.com <jond@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 6 Mar 2017 21:14:31 +0000 (21:14 +0000)
https://bugs.webkit.org/show_bug.cgi?id=169205

Reviewed by Saam Barati.

* ARES-6/about.html: Copied from PerformanceTests/ARES-6/index.html.
* ARES-6/driver.js:
(Driver.prototype.start):
(Driver.prototype._updateIterations):
(Driver):
* ARES-6/index.html:
* ARES-6/stats.js:
(Stats.prototype.toString.span.span):
* ARES-6/styles.css:
(body):
(.swoop):
(p):
(.logo):
(.start):
(.test):
(.test:nth-child(odd)):
(.overall):
(.about h2):
(.button):
(.button:hover):
(.button.return:before):
(@keyframes fade-in):
(@keyframes scale-in):
(@keyframes flicker-in):
(@keyframes wipe-in):
(.flip): Deleted.
(.testing, .about): Deleted.
(.testing): Deleted.
(.about): Deleted.
(#about:target): Deleted.

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

PerformanceTests/ARES-6/about.html [new file with mode: 0644]
PerformanceTests/ARES-6/driver.js
PerformanceTests/ARES-6/index.html
PerformanceTests/ARES-6/stats.js
PerformanceTests/ARES-6/styles.css
PerformanceTests/ChangeLog

diff --git a/PerformanceTests/ARES-6/about.html b/PerformanceTests/ARES-6/about.html
new file mode 100644 (file)
index 0000000..608b9b9
--- /dev/null
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="styles.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
+</head>
+<body>
+    
+    <div class="swoop">&nbsp;</div>
+    
+    <header>
+        <h1 class="logo"><img src="ARES-6.svg" title="ARES-6" alt="ARES-6"></h1>
+    </header>
+
+    <main class="about">
+    
+        <h2>About the Tests</h2>
+        
+        <p>ARES-6 measures the execution time of JavaScript&#8217;s newest features, including symbols, for-of, arrow functions, Map/Set/WeakMap, let/const, classes, proxies, string interpolation, destructuring, default arguments, spread, tail calls, and generators.</p>
+
+        <p>Air is an ES2015 port of the <a href="https://webkit.org/blog/5852/introducing-the-b3-jit-compiler/">WebKit B3 JIT</a>&#8217;s <a href="https://trac.webkit.org/changeset/201783"><code>Air::allocateStack</code> phase</a>. This code is a heavy user of Map, Set, classes, spread, and for-of. The benchmark runs <code>allocateStack</code> on hot function bodies from other popular JavaScript benchmarks: <code>executeIteration</code> from <a href="https://developers.google.com/octane/">Octane</a>/Gameboy, <code>gaussianBlur</code> from <a href="http://krakenbenchmark.mozilla.org">Kraken</a>, and <code>scanIdentifier</code> from Octane/Typescript. Because metacircularity, the benchmark also runs <code>allocateStack</code> on the largest hot function in Air. <a href="https://trac.webkit.org/browser/trunk/PerformanceTests/ARES-6/Air?rev=211697">Browse the source.</a></p>
+
+        <p>Basic is an <a href="https://trac.webkit.org/changeset/202446">ES2015 implementation</a> of the <a href="http://www.ecma-international.org/publications/files/ECMA-ST-WITHDRAWN/ECMA-55,%201st%20Edition,%20January%201978.pdf">ECMA-55 BASIC standard</a>. BASIC was an interactive language from the start, so our implementation uses generator functions for the entire interpreter. When the BASIC program says <code>INPUT</code>, our interpreter says <code>yield</code>. This allows users of the interpreter to easily integrate it into a runloop. Basic also uses classes, Map, and WeakMap. The benchmark runs a handful of simple programs, the most complex of which finds prime numbers. <a href="https://trac.webkit.org/browser/trunk/PerformanceTests/ARES-6/Basic?rev=211697&order=name">Browse the source.</a></p>
+        
+        <p>ARES-6 rewards browsers that start up quickly and run smoothly. It's not enough to just measure the total running time of a workload. Browsers may perform differently for the same workload depending on how many times it has run. Garbage collection runs periodically, making some iterations take longer than others. Code that runs repeatedly gets optimized by the browser, so the first iteration of any workload is more expensive than the rest. ARES-6 runs these benchmarks for 200 iterations and reports the execution time of the first iteration, the average of the worst 2% iterations, and the overall geometric mean. Each of these values is given an equal weight when computing the ovarall time. ARES-6 equally rewards fast start-up, low jank, and sophisticated adaptive optimizations for long-running code.</p>
+        
+        <p>Each ARES-6 sample has 200 iterations of Air and 200 iterations of Basic. ARES-6 runs 10 samples, and reports the average with 95% confidence intervals. Each sample runs in a fresh <code>iframe</code> to simulate some of the effects of page navigation.</p>
+
+        <p>We like making JavaScript run faster, but we didn&#8217;t have any ES2015 code to optimize. ARES-6 is a collection of sample ES2015 code written by the WebKit JavaScript team, which we used to bootstrap our ES2015 optimization efforts.</p>
+        
+        <p><a href="index.html" class="button return">Return to Testing</a></p>
+
+    </main>
+            
+</body>
+</html>
index ca9cbde..2639409 100644 (file)
@@ -69,7 +69,7 @@ class Driver {
         for (let [benchmark, results] of this._benchmarks)
             results.reset();
         this._isRunning = true;
-        this._numIterations = numIterations;
+        this._startIterations = this._numIterations = numIterations;
         this._iterator = null;
         this._iterate();
     }
@@ -193,7 +193,9 @@ class Driver {
     
     _updateIterations()
     {
-        if (isInBrowser)
-            this._statusCell.innerHTML = "Running... " + (this._numIterations + 1) + " to go";
+        if (isInBrowser) {
+            this._statusCell.innerHTML = "Running Tests... " + ( this._startIterations - this._numIterations ) + "/" + this._startIterations;
+        }
+        
     }
 }
index 950b584..11eee70 100644 (file)
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <link rel="stylesheet" href="styles.css">    
+    <link rel="stylesheet" href="styles.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
 </head>
 <body>
     <script>
@@ -16,6 +17,8 @@
     <script src="results.js"></script>
     <script src="stats.js"></script>
     
+    <div class="swoop">&nbsp;</div>
+    
     <header>
         <h1 class="logo"><img src="ARES-6.svg" title="ARES-6" alt="ARES-6"></h1>
         <button id="trigger" class="start">
 
     <main>
     
-    <p>ARES-6 measures the execution time of JavaScript's newest features. <a href="#about">Read more details &#9658;</a></p>
+    <p>ARES-6 measures the execution time of JavaScript's newest features. <a href="about.html">Read more details&hellip;</a></p>
 
-    <div id="about" class="flip">
-    <div class="testing">
-            
     <div class="overall">
         <h2>Overall</h2>
         <div class="score">
             <span id="Geomean">
-                <span class="value">&#10074;&#10074;.&#10074;&#10074;</span><span class="units">ms</span>
+                <span class="value">&#8709;</span><span class="units">ms</span>
             </span>
         </div>
     </div>    
             <div class="score">
                 <label>First Iteration</label>
                 <span id="AirFirstIteration">
-                    <span class="value">&#10074;&#10074;.&#10074;&#10074;</span><span class="units">ms</span>
+                    <span class="value">&#8709;</span><span class="units">ms</span>
                 </span>
             </div>
  
             <div class="score">
                 <label>Worst 2%</label>
                 <span id="AirAverageWorstCase">
-                    <span class="value">&#10074;&#10074;.&#10074;&#10074;</span><span class="units">ms</span>
+                    <span class="value">&#8709;</span><span class="units">ms</span>
                 </span>
             </div>
 
             <div class="score">
                 <label>Average</label>
                 <span id="AirSteadyState">
-                    <span class="value">&#10074;&#10074;.&#10074;&#10074;</span><span class="units">ms</span>
+                    <span class="value">&#8709;</span><span class="units">ms</span>
                 </span>
             </div>
             
             <div class="score">
                 <label>First Iteration</label>
                 <span id="BasicFirstIteration">
-                    <span class="value">&#10074;&#10074;.&#10074;&#10074;</span><span class="units">ms</span>                    
+                    <span class="value">&#8709;</span><span class="units">ms</span>                    
                 </span>
             </div>
  
             <div class="score">
                 <label>Worst 2%</label>
                 <span id="BasicAverageWorstCase">
-                    <span class="value">&#10074;&#10074;.&#10074;&#10074;</span><span class="units">ms</span>                    
+                    <span class="value">&#8709;</span><span class="units">ms</span>                    
                 </span>
             </div>
 
             <div class="score">
                 <label>Average</label>
                 <span id="BasicSteadyState">
-                    <span class="value">&#10074;&#10074;.&#10074;&#10074;</span><span class="units">ms</span>                    
+                    <span class="value">&#8709;</span><span class="units">ms</span>                    
                 </span>
             </div>
             
         </div>
         
     </div>
-    </div>
-    
-    <div class="about">
-        <h2>About</h2>
-        
-        <p>ARES-6 measures the execution time of JavaScript&#8217;s newest features, including symbols, for-of, arrow functions, Map/Set/WeakMap, let/const, classes, proxies, string interpolation, destructuring, default arguments, spread, tail calls, and generators.</p>
-
-        <p>Air is an ES2015 port of the <a href="https://webkit.org/blog/5852/introducing-the-b3-jit-compiler/">WebKit B3 JIT</a>&#8217;s <a href="https://trac.webkit.org/changeset/201783"><code>Air::allocateStack</code> phase</a>. This code is a heavy user of Map, Set, classes, spread, and for-of. The benchmark runs <code>allocateStack</code> on hot function bodies from other popular JavaScript benchmarks: <code>executeIteration</code> from <a href="https://developers.google.com/octane/">Octane</a>/Gameboy, <code>gaussianBlur</code> from <a href="http://krakenbenchmark.mozilla.org">Kraken</a>, and <code>scanIdentifier</code> from Octane/Typescript. Because metacircularity, the benchmark also runs <code>allocateStack</code> on the largest hot function in Air. <a href="https://trac.webkit.org/browser/trunk/PerformanceTests/ARES-6/Air?rev=211697">Browse the source.</a></p>
-
-        <p>Basic is an <a href="https://trac.webkit.org/changeset/202446">ES2015 implementation</a> of the <a href="http://www.ecma-international.org/publications/files/ECMA-ST-WITHDRAWN/ECMA-55,%201st%20Edition,%20January%201978.pdf">ECMA-55 BASIC standard</a>. BASIC was an interactive language from the start, so our implementation uses generator functions for the entire interpreter. When the BASIC program says <code>INPUT</code>, our interpreter says <code>yield</code>. This allows users of the interpreter to easily integrate it into a runloop. Basic also uses classes, Map, and WeakMap. The benchmark runs a handful of simple programs, the most complex of which finds prime numbers. <a href="https://trac.webkit.org/browser/trunk/PerformanceTests/ARES-6/Basic?rev=211697&order=name">Browse the source.</a></p>
-        
-        <p>ARES-6 rewards browsers that start up quickly and run smoothly. It's not enough to just measure the total running time of a workload. Browsers may perform differently for the same workload depending on how many times it has run. Garbage collection runs periodically, making some iterations take longer than others. Code that runs repeatedly gets optimized by the browser, so the first iteration of any workload is more expensive than the rest. ARES-6 runs these benchmarks for 200 iterations and reports the execution time of the first iteration, the average of the worst 2% iterations, and the overall geometric mean. Each of these values is given an equal weight when computing the ovarall time. ARES-6 equally rewards fast start-up, low jank, and sophisticated adaptive optimizations for long-running code.</p>
-        
-        <p>Each ARES-6 sample has 200 iterations of Air and 200 iterations of Basic. ARES-6 runs 10 samples, and reports the average with 95% confidence intervals. Each sample runs in a fresh <code>iframe</code> to simulate some of the effects of page navigation.</p>
-
-        <p>We like making JavaScript run faster, but we didn&#8217;t have any ES2015 code to optimize. ARES-6 is a collection of sample ES2015 code written by the WebKit JavaScript team, which we used to bootstrap our ES2015 optimization efforts.</p>
-        
-        <p><a href="#">&#9700; Return to Testing</a></p>
-    </div>
-
-    </div>
     </main>
     
     <iframe id="magic" frameBorder=0></iframe>
index 86138ff..28272af 100644 (file)
@@ -92,8 +92,8 @@ class Stats {
         
         if (!result.n) {
             if (isInBrowser)
-                return `<span class="value">\&#10074;\&#10074;.\&#10074;\&#10074;</span><span class="units">ms</span>`;
-            return `${this._prefix}--.--ms`;
+                return `<span class="value">\&#8709;</span><span class="units">ms</span>`;
+            return `${this._prefix}\&#x2b14;ms`;
         }
         
         if (result.mean != result.mean)
index 323b828..03b51ba 100644 (file)
@@ -6,8 +6,7 @@ html {
 
 body {
     margin: 0;
-    background: #2C2C3C url('swoop.svg') no-repeat;
-    background-size: 50vw;
+    background-color: #2C2C3C;
     width: 100%;
     font-size: 1.6rem;
     font-weight: 400;
@@ -15,7 +14,19 @@ body {
     color: #9B9B9B;
     box-sizing: border-box;
     padding: 6vw 9vw;
-    perspective: 1000px;
+}
+
+.swoop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-image: url('swoop.svg');
+    background-repeat: no-repeat;
+    background-size: 50vw;
+    width: 0;
+    animation: wipe-in 1s ease-in 0 forwards;
 }
 
 header,
@@ -35,14 +46,6 @@ p a:hover {
     text-decoration: underline;
 }
 
-.flip {
-       transition: 0.6s;
-       transform-style: preserve-3d;
-
-       position: relative;
-    display: flex;
-}
-
 header {
     display: flex;
     flex-wrap: wrap;
@@ -61,6 +64,8 @@ p {
     color: #ffffff;
     font-size: 1.8rem;
     margin-bottom: 3rem;
+    opacity: 0;
+    animation: fade-in 1s ease-in 200ms forwards;
 }
 
 .about h2 {
@@ -74,6 +79,9 @@ p {
     overflow: hidden;
     margin: 1px 1rem 1px 0;
     font-size: 0;
+
+    opacity: 0;
+    animation: scale-in 1100ms ease-out 0 forwards;
 }
 
 .start {
@@ -87,6 +95,10 @@ p {
     font-weight: 600;
     text-transform: uppercase;
     color: #E7B135;
+
+    opacity: 0;
+    animation: flicker-in 500ms ease-out 1s forwards;
+
 }
 
 .start.ready {
@@ -101,7 +113,7 @@ p {
 
 .start:after {
     content: '';
-    display: block;  
+    display: block;
     position: absolute;
     right: 0;
     top: 0;
@@ -129,6 +141,11 @@ p {
     border-bottom: 1px solid #979797;
     margin-right: 1rem;
     margin-bottom: 3rem;
+    opacity: 0;
+    animation: fade-in 1s ease-out 700ms forwards;
+}
+.test:nth-child(odd) {
+    animation-delay: 900ms;
 }
 
 .overall h2,
@@ -139,7 +156,7 @@ p {
 .test .indicator {
     color: #E7B135;
     opacity: 0;
-    
+
     position: absolute;
     left: -1.2rem;
 }
@@ -178,7 +195,7 @@ p {
 .score .units {
     font-size: 4rem;
     font-weight: 600;
-    
+
 }
 
 .score .margin {
@@ -191,6 +208,8 @@ p {
 
 .overall {
     margin-bottom: 3rem;
+    opacity: 0;
+    animation: fade-in 1s ease-out 500ms forwards;
 }
 
 .overall .score  {
@@ -201,33 +220,69 @@ p {
     top: 0.5rem;
 }
 
-.testing, .about {
-    background-color: #2C2C3C;
-       -webkit-backface-visibility: hidden;
+.about h2 {
+    margin-top: 3rem;
+    opacity: 0;
+    animation: fade-in 1s ease-out 500ms forwards;
+}
 
-       position: absolute;
-       top: 0;
-       left: 0;
+.button {
+    display: inline-block;
+    position: relative;
+    border: 5px solid #E7B135;
+    padding: 1rem 3rem;
+    text-transform: uppercase;
+    font-weight: bold;
+    transition: background 0.2s ease-out, color 0.2s ease-out;
 }
 
-.testing {
-    width: 100%;
-       z-index: 2;
-       transform: rotateY(0deg);
-    padding-bottom: 10rem;
+.button:hover {
+    background-color: #E7B135;
+    color: #2C2C3C;
+    text-decoration: none;
 }
 
-.about {
-       transform: rotateY(180deg);
+.button.return:before {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 0;
+    border-top: 2rem solid #E7B135;
+    border-right: 2rem solid transparent;
+    border-bottom: 0 solid transparent;
+    border-left: 0 solid transparent;
 }
 
-#about:target {
-       transform: rotateY(180deg);
-    
+@keyframes fade-in {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes scale-in {
+  0%   { opacity: 0; transform: scale(0.8); }
+  100% { opacity: 1; transform: scale(1); }
+}
+
+@keyframes flicker-in {
+  0%   { opacity: 0; }
+  30%  { opacity: 0.3; }
+  40%  { opacity: 0; }
+  50%  { opacity: 0.1; }
+  60%  { opacity: 0; }
+  70%  { opacity: 0.4; }
+  80%  { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes wipe-in {
+  0%   { width: 0; }
+  100%  { width: 100vw; }
 }
 
 @media only screen and (max-width: 784px) {
-    
     .logo {
         width: 100%;
         margin-bottom: 1rem;
@@ -236,10 +291,10 @@ p {
     .start {
         width: 100%;
     }
-    
+
     .test {
         flex: none;
-        
+
         width: 100%;
     }
 }
\ No newline at end of file
index 1005d84..050b191 100644 (file)
@@ -1,3 +1,41 @@
+2017-03-06  Jon Davis  <jond@apple.com>
+
+        Refined the ARES-6 experience
+        https://bugs.webkit.org/show_bug.cgi?id=169205
+
+        Reviewed by Saam Barati.
+
+        * ARES-6/about.html: Copied from PerformanceTests/ARES-6/index.html.
+        * ARES-6/driver.js:
+        (Driver.prototype.start):
+        (Driver.prototype._updateIterations):
+        (Driver):
+        * ARES-6/index.html:
+        * ARES-6/stats.js:
+        (Stats.prototype.toString.span.span):
+        * ARES-6/styles.css:
+        (body):
+        (.swoop):
+        (p):
+        (.logo):
+        (.start):
+        (.test):
+        (.test:nth-child(odd)):
+        (.overall):
+        (.about h2):
+        (.button):
+        (.button:hover):
+        (.button.return:before):
+        (@keyframes fade-in):
+        (@keyframes scale-in):
+        (@keyframes flicker-in):
+        (@keyframes wipe-in):
+        (.flip): Deleted.
+        (.testing, .about): Deleted.
+        (.testing): Deleted.
+        (.about): Deleted.
+        (#about:target): Deleted.
+
 2017-03-06  Jeremy Jones  <jeremyj@apple.com>
 
         StandardCanPlayThrough.html does not work on iOS.