Settings Rewrite: Fix subpage animations for direct URLs to subpages.

Previously, if a user navigated to a subpage directly via URL, i.e.
chrome://settings/searchEngines, and then tried to close that subpage,
the animation would not work correctly.

This patch fixes that issue.

BUG=535013

Review URL: https://codereview.chromium.org/1372713002

Cr-Commit-Position: refs/heads/master@{#351189}

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

@@ -6,10 +6,6 @@
  * @fileoverview
  * Styles used for animating settings subpages.
  */
-neon-animated-pages ::content > * {
+neon-animated-pages ::content > .iron-selected {
   position: static;
 }
-
-neon-animated-pages ::content > .neon-animating {
-  position: absolute;
-}

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

@@ -13,8 +13,7 @@
 <dom-module id="cr-settings-animated-pages">
   <link rel="import" type="css" href="settings_animated_pages.css">
   <template>
-    <neon-animated-pages id="animatedPages" attr-for-selected="id"
-        selected="main">
+    <neon-animated-pages id="animatedPages" attr-for-selected="id">
       <content select="*"></content>
     </neon-animated-pages>
   </template>

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

@@ -58,10 +58,10 @@ Polymer({
     var newRouteIsSubpage = newRoute && newRoute.section == this.section;
     var oldRouteIsSubpage = oldRoute && oldRoute.section == this.section;
 
-    // If two routes are at the same level, or if either the new or old route is
-    // not a subpage, fade in and out.
     if (!newRouteIsSubpage || !oldRouteIsSubpage ||
         newRoute.subpage.length == oldRoute.subpage.length) {
+      // If two routes are at the same level, or if either the new or old route
+      // is not a subpage, fade in and out.
       this.$.animatedPages.exitAnimation = 'fade-out-animation';
       this.$.animatedPages.entryAnimation = 'fade-in-animation';
     } else {
@@ -75,14 +75,8 @@ Polymer({
       }
     }
 
-    if (newRouteIsSubpage) {
-      // TODO(tommycli): Support paths where the final component carries
-      // data rather than referring to a specific subpage.
-      // E.g. internet > internet/known-networks > internet/detail/wifi1_guid
-      this.$.animatedPages.selected = newRoute.subpage.slice(-1)[0];
-    } else {
-      this.$.animatedPages.selected = '';
-    }
+    this.$.animatedPages.selected =
+        newRouteIsSubpage ? newRoute.subpage.slice(-1)[0] : '';
   },
 
   /**

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

@@ -73,18 +73,36 @@ Polymer({
   },
 
   /** @private */
-  expanded_: false,
+  currentRouteChanged_: function(newRoute, oldRoute) {
+    var newExpanded = newRoute.section == this.section;
+    var oldExpanded = oldRoute && oldRoute.section == this.section;
+
+    var visible = newExpanded || this.currentRoute.section == '';
+
+    // If the user navigates directly to a subpage, skip all the animations.
+    if (!oldRoute) {
+      if (newExpanded) {
+        // If we navigate directly to a subpage, skip animations.
+        this.classList.add('expanded');
+        this.expandContainer.classList.add('expanded');
+      } else if (!visible) {
+        this.hidden = true;
+        this.$.card.elevation = 0;
+      }
 
-  /** @private */
-  currentRouteChanged_: function() {
-    var expanded = this.currentRoute.section == this.section;
+      return;
+    }
 
-    if (expanded != this.expanded_) {
-      this.expanded_ = expanded;
-      this.playAnimation(expanded ? 'expand' : 'collapse');
+    if (newExpanded && !oldExpanded) {
+      this.playAnimation('expand');
+    } else if (oldExpanded && !newExpanded) {
+      // For contraction, we defer the animation to allow
+      // settings-animated-pages to reflow the new page correctly.
+      this.async(function() {
+        this.playAnimation('collapse');
+      }.bind(this));
     }
 
-    var visible = expanded || this.currentRoute.section == '';
     this.$.card.elevation = visible ? 1 : 0;
 
     // Remove 'hidden' class immediately, but defer adding it if we are invisble
@@ -97,7 +115,7 @@ Polymer({
   onExpandAnimationComplete_: function() {
     this.hidden = this.currentRoute.section != '' &&
                   this.currentRoute.section != this.section;
-  }
+  },
 });
 
 Polymer({
@@ -158,12 +176,12 @@ Polymer({
     section.classList.remove('expanded');
     section.expandContainer.classList.remove('expanded');
 
-    // Get the placeholder coordinates before reflowing.
-    var newRect = section.$.placeholder.getBoundingClientRect();
+    var card = section.$.card;
+    var newRect = card.getBoundingClientRect();
 
     section.classList.add('neon-animating');
 
-    this._effect = new KeyframeEffect(section.$.card, [
+    this._effect = new KeyframeEffect(card, [
       {'top': oldRect.top + 'px', 'height': oldRect.height + 'px'},
       {'top': newRect.top + 'px', 'height': newRect.height + 'px'},
     ], this.timingFromConfig(config));