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 ca9cbdec0f48197bec82fb3720bc21a6ccad1ecb..26394093758dab7a1adc1bce9bfba083e279017e 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 950b584dc58a928cbc7a62d1678be506a9d25f5e..11eee7060425f04c3182d33b9db0a690f9040ae9 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>
     
index 86138ffaa0e938bd1f08dff68848eefb3664eeb6..28272af6d19603ee2b1a8cef57385b102ffa37c8 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 323b828d72069070ae84bdc84c236d5cd986899d..03b51ba0351ae9f66a42552fb4eb9f6a5662c781 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 1005d84fdce51970cedf0cfea4042b9224ba54fa..050b191a42d2f38b5329317b507709949ec27fab 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.