Old and new about pages: simplify product logo animation code

Also removes class toggling hackery.

R=alancutter@chromium.org
BUG=643651
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
NOPRESUBMIT=true

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

chrome/browser/resources/help/help_content.css

@@ -15,14 +15,6 @@
   -webkit-margin-start: 10px;
 }
 
-@-webkit-keyframes spin {
-  to { transform: rotate(-10turn); }
-}
-
-#product-logo.spin {
-  -webkit-animation: spin 500ms cubic-bezier(1, 0, 0, 1) forwards;
-}
-
 #version-container {
   margin-top: 30px;
 }

chrome/browser/resources/help/help_page.js

@@ -197,10 +197,12 @@ cr.define('help', function() {
 
       var logo = $('product-logo');
       logo.onclick = function(e) {
-        logo.classList.remove('spin');
-        // Force a style recalc that cancels the animation specified by "spin".
-        getComputedStyle(logo).getPropertyValue('animation-name');
-        logo.classList.add('spin');
+        logo.animate({
+          transform: ['none', 'rotate(-10turn)'],
+        }, /** @type {!KeyframeEffectOptions} */({
+          duration: 500,
+          easing: 'cubic-bezier(1, 0, 0, 1)',
+        }));
       };
 
       // Attempt to update.

chrome/browser/resources/options/compiled_resources.gyp

@@ -43,11 +43,11 @@
           '../../../../ui/webui/resources/js/promise_resolver.js',
           '../../../../ui/webui/resources/js/util.js',
           '../../../../chrome/browser/resources/chromeos/keyboard/keyboard_utils.js',
-	  '../../../../ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
-	  '../settings/compiled_resources2.gyp:route',
-	  '../settings/people_page/compiled_resources2.gyp:lock_state_behavior',
-	  '../settings/people_page/compiled_resources2.gyp:password_prompt_dialog',
-	  '../settings/people_page/compiled_resources2.gyp:lock_screen',
+          '../../../../ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
+          '../settings/compiled_resources2.gyp:route',
+          '../settings/people_page/compiled_resources2.gyp:lock_state_behavior',
+          '../settings/people_page/compiled_resources2.gyp:password_prompt_dialog',
+          '../settings/people_page/compiled_resources2.gyp:lock_screen',
         ],
         # options_bundle is included as a complex dependency. Currently there is
         # no possibility to use gyp variable expansion to it, so we don't use
@@ -59,9 +59,10 @@
           '../../../../third_party/closure_compiler/externs/metrics_private.js',
           '../../../../third_party/closure_compiler/externs/networking_private.js',
           '../../../../third_party/closure_compiler/externs/chrome_send.js',
-	  '../../../../third_party/closure_compiler/externs/quick_unlock_private.js',
+          '../../../../third_party/closure_compiler/externs/quick_unlock_private.js',
+          '../../../../third_party/closure_compiler/externs/web_animations.js',
           '../../../../ui/webui/resources/cr_elements/network/cr_network_icon_externs.js',
-	],
+        ],
       },
       'includes': ['../../../../third_party/closure_compiler/compile_js.gypi'],
     }

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

@@ -35,14 +35,6 @@
         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;
       }

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

@@ -281,11 +281,12 @@ Polymer({
 
   /** @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');
+    this.$['product-logo'].animate({
+      transform: ['none', 'rotate(-10turn)'],
+    }, {
+      duration: 500,
+      easing: 'cubic-bezier(1, 0, 0, 1)',
+    });
   },
 
 <if expr="_google_chrome">

chrome/browser/resources/settings/about_page/compiled_resources2.gyp

@@ -15,6 +15,7 @@
         '../compiled_resources2.gyp:route',
         '../settings_page/compiled_resources2.gyp:main_page_behavior',
         '../settings_page/compiled_resources2.gyp:settings_animated_pages',
+        '<(EXTERNS_GYP):web_animations',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },