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

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

 // Copyright 2015 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
  * 'cr-settings-section' shows a paper material themed section with a header
  * which shows its page title.
  *
  * Example:
@@ skipping 55 matching lines @@
         };
       },
     },
   },
 
   listeners: {
     'expand-animation-complete': 'onExpandAnimationComplete_',
   },
 
   /** @private */
-  expanded_: false,
+  currentRouteChanged_: function(newRoute, oldRoute) {
+    var newExpanded = newRoute.section == this.section;
+    var oldExpanded = oldRoute && oldRoute.section == this.section;
 
-  /** @private */
-  currentRouteChanged_: function() {
-    var expanded = this.currentRoute.section == this.section;
+    var visible = newExpanded || this.currentRoute.section == '';
 
-    if (expanded != this.expanded_) {
-      this.expanded_ = expanded;
-      this.playAnimation(expanded ? 'expand' : 'collapse');
+    // 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;
+      }
+
+      return;
     }
 
-    var visible = expanded || this.currentRoute.section == '';
+    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));
+    }
+
     this.$.card.elevation = visible ? 1 : 0;
 
     // Remove 'hidden' class immediately, but defer adding it if we are invisble
     // until the animation is complete.
     if (visible)
       this.hidden = false;
   },
 
   /** @private */
   onExpandAnimationComplete_: function() {
     this.hidden = this.currentRoute.section != '' &&
                   this.currentRoute.section != this.section;
-  }
+  },
 });
 
 Polymer({
   is: 'expand-card-animation',
 
   behaviors: [
     Polymer.NeonAnimationBehavior
   ],
 
   configure: function(config) {
@@ skipping 35 matching lines @@
 
 Polymer({
   is: 'collapse-card-animation',
 
   behaviors: [
     Polymer.NeonAnimationBehavior
   ],
 
   configure: function(config) {
     var section = config.node;
+    var card = section.$.card;
     var oldRect = section.expandContainer.getBoundingClientRect();
 
     section.classList.remove('expanded');
     section.expandContainer.classList.remove('expanded');
 
-    // Get the placeholder coordinates before reflowing.
-    var newRect = section.$.placeholder.getBoundingClientRect();
+    console.log('collapse placeholder setting');
+    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));
     return this._effect;
   },
 
   complete: function(config) {
     config.node.classList.remove('neon-animating');
   }
 });