Move settings-section animations into setting-section, make better

chrome/browser/resources/settings/settings_main/settings_main.js

Index: chrome/browser/resources/settings/settings_main/settings_main.js
diff --git a/chrome/browser/resources/settings/settings_main/settings_main.js b/chrome/browser/resources/settings/settings_main/settings_main.js
index 3fd909a7b4cea708944036d56deb48b72edf93d0..6ed00c8f97e3e92b6f26a1ff5f203a21955736a8 100644
--- a/chrome/browser/resources/settings/settings_main/settings_main.js
+++ b/chrome/browser/resources/settings/settings_main/settings_main.js
@@ -34,7 +34,12 @@ Polymer({
       value: false,
     },
 
-    /** @private */
+    /**
+     * True if a section is expanded to show a subpage. Initialized using
+     * currentRoute. Toggles based on expand/collapse events so effects can
+     * be deferred until transitions complete.
+     * @private
+     */
     inSubpage_: Boolean,
 
     /** @private */
@@ -96,6 +101,8 @@ Polymer({
         function() {
           this.resolver_.resolve();
         }.bind(this));
+
+    this.inSubpage_ = this.currentRoute.subpage.length > 0;
   },
 
   /**
@@ -112,21 +119,41 @@ Polymer({
    * @private
    */
   currentRouteChanged_: function(newRoute) {
-    this.inSubpage_ = newRoute.subpage.length > 0;
-    this.showAboutPage_ = newRoute.page == 'about';
+    this.updatePagesShown_();
+  },
+
+  /** @private */
+  subpageExpanded_: function() {
+    this.inSubpage_ = true;
+    // Hide pages other than the current section's parent page.
+    this.updatePagesShown_();
+  },
+
+  /** @private */
+  subpageCollapsing_: function() {
+    this.inSubpage_ = false;
+    // Unhide pages before collapsing the full-height section.
+    this.updatePagesShown_();
+  },
+
+  /**
+   * Updates the hidden state of the about, basic and advanced pages, based on
+   * the current route and the Advanced toggle state.
+   * @private
+   */
+  updatePagesShown_: function() {
+    this.showAboutPage_ = this.currentRoute.page == 'about';
     if (this.showAboutPage_) {
       this.showBasicPage_ = this.showAdvancedPage_ = false;
-    } else if (newRoute.page == 'basic') {
+    } else if (this.currentRoute.page == 'basic') {
       this.showBasicPage_ = true;
       this.showAdvancedPage_ = !this.inSubpage_ && this.advancedToggleExpanded_;
-    } else if (newRoute.page == 'advanced') {
+    } else if (this.currentRoute.page == 'advanced') {
       this.showBasicPage_ = !this.inSubpage_;
       this.showAdvancedPage_ = this.advancedToggleExpanded_ = true;
     } else {
-      assertNotReached('Invalid page ' + newRoute.page);
+      assertNotReached('Invalid page ' + this.currentRoute.page);
     }
-
-    this.style.height = this.inSubpage_ ? '100%' : '';
   },
 
   /** @private */