MD Settings: restore super important about page functionality

R=hcarmona@chromium.org
BUG=643651
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2324523002
Cr-Commit-Position: refs/heads/master@{#417153}

chrome/browser/resources/settings/about_page/about_page.html

@@ -35,6 +35,14 @@
         margin-top: auto;
       }
 
+      @-webkit-keyframes spin {
+        to { transform: rotate(-10turn); }
+      }
+
+      #product-logo.spin {
+        -webkit-animation: spin 500ms cubic-bezier(1, 0, 0, 1) forwards;
+      }
+
       img {
         -webkit-margin-end: 10px;
       }
@@ -70,7 +78,7 @@
         <settings-animated-pages id="pages" section="about">
           <neon-animatable route-path="default">
             <div class="settings-box">
-              <img id="product-logo"
+              <img id="product-logo" on-tap="onProductLogoTap_"
                   srcset="chrome://theme/current-channel-logo@1x 1x,
                           chrome://theme/current-channel-logo@2x 2x" alt="">
               <span class="product-title">$i18n{aboutProductTitle}</span>

chrome/browser/resources/settings/about_page/about_page.js

@@ -279,6 +279,15 @@ Polymer({
   },
 </if>
 
+  /** @private */
+  onProductLogoTap_: function() {
+    var logo = this.$['product-logo'];
+    logo.classList.remove('spin');
+    // Force a style recalc that cancels the animation specified by "spin".
+    getComputedStyle(logo).getPropertyValue('animation-name');
+    logo.classList.add('spin');
+  },
+
 <if expr="_google_chrome">
   /** @private */
   onReportIssueTap_: function() {