pdf: Remove dependency on web-animations-js via neon-animations

web-animations-js has some performance impact in wrapping native
`requestAnimationFrame`. In the case of PDF, none of the polyfilled
behavior is necessary as the animation effects are trivially
implemented through native `element.animate`.

R=dsinclair@chromium.org, hnakashima@chromium.org

Change-Id: I9ab09a91e697a491f0c57009293333053a79f618
Reviewed-on: https://chromium-review.googlesource.com/c/1322178Reviewed-by: dsinclair <dsinclair@chromium.org>
Reviewed-by: Henrique Nakashima <hnakashima@chromium.org>
Commit-Queue: dstockwell <dstockwell@chromium.org>
Cr-Commit-Position: refs/heads/master@{#606183}

chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.html

 <link rel="import" href="chrome://resources/html/polymer.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/slide-up-animation.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/transform-animation.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animation-runner-behavior.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/web-animations.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-progress/paper-progress.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">

chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.js

@@ -5,8 +5,6 @@
 Polymer({
   is: 'viewer-pdf-toolbar',
 
-  behaviors: [Polymer.NeonAnimationRunnerBehavior],
-
   properties: {
     /**
      * The current loading progress of the PDF document (0 - 100).
@@ -39,31 +37,6 @@ Polymer({
     opened: {type: Boolean, value: true},
 
     strings: Object,
-
-    animationConfig: {
-      value: function() {
-        return {
-          'entry': {
-            name: 'transform-animation',
-            node: this,
-            transformFrom: 'translateY(-100%)',
-            transformTo: 'translateY(0%)',
-            timing: {easing: 'cubic-bezier(0, 0, 0.2, 1)', duration: 250}
-          },
-          'exit': {
-            name: 'slide-up-animation',
-            node: this,
-            timing: {easing: 'cubic-bezier(0.4, 0, 1, 1)', duration: 250}
-          }
-        };
-      }
-    }
-  },
-
-  listeners: {'neon-animation-finish': '_onAnimationFinished'},
-
-  _onAnimationFinished: function() {
-    this.style.transform = this.opened ? 'none' : 'translateY(-100%)';
   },
 
   loadProgressChanged: function() {
@@ -87,8 +60,34 @@ Polymer({
 
   toggleVisibility: function() {
     this.opened = !this.opened;
-    this.cancelAnimation();
-    this.playAnimation(this.opened ? 'entry' : 'exit');
+
+    // We keep a handle on the animation in order to cancel the filling
+    // behavior of previous animations.
+    if (this.animation_) {
+      this.animation_.cancel();
+    }
+
+    if (this.opened) {
+      this.animation_ = this.animate(
+          {
+            transform: ['translateY(-100%)', 'translateY(0%)'],
+          },
+          {
+            easing: 'cubic-bezier(0, 0, 0.2, 1)',
+            duration: 250,
+            fill: 'forwards',
+          });
+    } else {
+      this.animation_ = this.animate(
+          {
+            transform: ['translateY(0%)', 'translateY(-100%)'],
+          },
+          {
+            easing: 'cubic-bezier(0.4, 0, 1, 1)',
+            duration: 250,
+            fill: 'forwards',
+          });
+    }
   },
 
   selectPageNumber: function() {

chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown/viewer-toolbar-dropdown.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/web-animations.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">

chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown/viewer-toolbar-dropdown.js

@@ -72,7 +72,6 @@ Polymer({
         this.updateMaxHeight();
       this.fire('dropdown-opened', this.metricsId);
     }
-    this.cancelAnimation_();
     this.playAnimation_(this.dropdownOpen);
   },
 
@@ -85,11 +84,6 @@ Polymer({
     this.maxHeightValid_ = true;
   },
 
-  cancelAnimation_: function() {
-    if (this._animation)
-      this._animation.cancel();
-  },
-
   /**
    * Start an animation on the dropdown.
    * @param {boolean} isEntry True to play entry animation, false to play
@@ -112,27 +106,35 @@ Polymer({
     if (maxHeight < 0)
       maxHeight = 0;
 
-    var fade = new KeyframeEffect(
-        this.$.dropdown, [{opacity: 0}, {opacity: 1}],
-        {duration: 150, easing: 'cubic-bezier(0, 0, 0.2, 1)'});
-    var slide = new KeyframeEffect(
-        this.$.dropdown,
+    this.$.dropdown.animate(
+        {
+          opacity: [0, 1],
+        },
+        {
+          duration: 150,
+          easing: 'cubic-bezier(0, 0, 0.2, 1)',
+        });
+    return this.$.dropdown.animate(
         [
           {height: '20px', transform: 'translateY(-10px)'},
-          {height: maxHeight + 'px', transform: 'translateY(0)'}
+          {height: maxHeight + 'px', transform: 'translateY(0)'},
         ],
-        {duration: 250, easing: 'cubic-bezier(0, 0, 0.2, 1)'});
-
-    return document.timeline.play(new GroupEffect([fade, slide]));
+        {
+          duration: 250,
+          easing: 'cubic-bezier(0, 0, 0.2, 1)',
+        });
   },
 
   animateExit_: function() {
     return this.$.dropdown.animate(
         [
           {transform: 'translateY(0)', opacity: 1},
-          {transform: 'translateY(-5px)', opacity: 0}
+          {transform: 'translateY(-5px)', opacity: 0},
         ],
-        {duration: 100, easing: 'cubic-bezier(0.4, 0, 1, 1)'});
+        {
+          duration: 100,
+          easing: 'cubic-bezier(0.4, 0, 1, 1)',
+        });
   }
 });