MD Settings: Shorten page fade transitions

Expanding or collapsing a section takes 350ms, but fading the new content
in and the old content out takes 500ms. This is a contributing factor to
the overlap seen when closing a section, as the old section is still
visible when the collapse animation has completed.

Shortening the fade duration to match the expand/collapse animation makes
that overlap much less likely to occur. It also makes the animations
appear snappier, IMO -- if the page is still fading after expanding, it
looks slugging.

This re-implements the fade animations, rather than programmatically
changing the neon-animated-pages' transition durations for the
existing fade-in-animation/fade-out-animation. The latter is not possible
due to https://github.com/PolymerElements/neon-animation/issues/209.

R=dbeam@chromium.org
BUG=716680
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

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

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

@@ -12,5 +12,14 @@
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
+    {
+      'target_name': 'fade_animations',
+      'dependencies': [
+        'animation',
+        '<(DEPTH)/third_party/polymer/v1_0/components-chromium/neon-animation/compiled_resources2.gyp:neon-animation-behavior-extracted',
+        '<(EXTERNS_GYP):web_animations',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
   ],
 }

chrome/browser/resources/settings/animation/fade_animations.html

+<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animation-behavior.html">
+<link rel="import" href="animation.html">
+<script src="fade_animations.js"></script>

chrome/browser/resources/settings/animation/fade_animations.js

+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview Defines fade animations similar to Polymer's fade-in-animation
+ * and fade-out-animation, but with Settings-specific timings.
+ */
+Polymer({
+  is: 'settings-fade-in-animation',
+
+  behaviors: [Polymer.NeonAnimationBehavior],
+
+  configure: function(config) {
+    var node = config.node;
+    this._effect = new KeyframeEffect(
+        node,
+        [
+          {'opacity': '0'},
+          {'opacity': '1'},
+        ],
+        /** @type {!KeyframeEffectOptions} */ ({
+          duration: settings.animation.Timing.DURATION,
+          easing: settings.animation.Timing.EASING,
+          fill: 'both',
+        }));
+    return this._effect;
+  }
+});
+
+Polymer({
+  is: 'settings-fade-out-animation',
+
+  behaviors: [Polymer.NeonAnimationBehavior],
+
+  configure: function(config) {
+    var node = config.node;
+    this._effect = new KeyframeEffect(
+        node,
+        [
+          {'opacity': '1'},
+          {'opacity': '0'},
+        ],
+        /** @type {!KeyframeEffectOptions} */ ({
+          duration: settings.animation.Timing.DURATION,
+          easing: settings.animation.Timing.EASING,
+          fill: 'both',
+        }));
+    return this._effect;
+  }
+});

chrome/browser/resources/settings/settings_page/settings_animated_pages.html

@@ -3,8 +3,6 @@
 <link rel="import" href="chrome://resources/html/cr/ui.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-in-animation.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-out-animation.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/slide-from-left-animation.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/slide-from-right-animation.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/slide-left-animation.html">
@@ -12,6 +10,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animated-pages.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animation-runner-behavior.html">
+<link rel="import" href="../animation/fade_animations.html">
 <link rel="import" href="../route.html">
 
 <dom-module id="settings-animated-pages">

chrome/browser/resources/settings/settings_page/settings_animated_pages.js

@@ -121,8 +121,8 @@ Polymer({
     if (newRoute.section == this.section && newRoute.isSubpage()) {
       this.switchToSubpage_(newRoute, oldRoute);
     } else {
-      this.$.animatedPages.exitAnimation = 'fade-out-animation';
-      this.$.animatedPages.entryAnimation = 'fade-in-animation';
+      this.$.animatedPages.exitAnimation = 'settings-fade-out-animation';
+      this.$.animatedPages.entryAnimation = 'settings-fade-in-animation';
       this.$.animatedPages.selected = 'default';
     }
   },
@@ -154,8 +154,8 @@ Polymer({
         this.$.animatedPages.entryAnimation = 'slide-from-left-animation';
       } else {
         // The old route is not a subpage or is at the same level, so just fade.
-        this.$.animatedPages.exitAnimation = 'fade-out-animation';
-        this.$.animatedPages.entryAnimation = 'fade-in-animation';
+        this.$.animatedPages.exitAnimation = 'settings-fade-out-animation';
+        this.$.animatedPages.entryAnimation = 'settings-fade-in-animation';
 
         if (!oldRoute.isSubpage()) {
           // Set the height the expand animation should start at before

chrome/browser/resources/settings/settings_resources.grd

@@ -96,6 +96,12 @@
       <structure name="IDR_SETTINGS_ANIMATION_ANIMATION_JS"
                  file="animation/animation.js"
                  type="chrome_html" />
+      <structure name="IDR_SETTINGS_ANIMATION_FADE_ANIMATIONS_HTML"
+                 file="animation/fade_animations.html"
+                 type="chrome_html" />
+      <structure name="IDR_SETTINGS_ANIMATION_FADE_ANIMATIONS_JS"
+                 file="animation/fade_animations.js"
+                 type="chrome_html" />
       <structure name="IDR_SETTINGS_CR_SETTINGS_ANIMATED_PAGES_HTML"
                  file="settings_page/settings_animated_pages.html"
                  type="chrome_html" />