MD Settings: fix collapse animation once and for all

chrome/browser/resources/settings/settings_main/settings_main.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.
 
 /**
  * @typedef {{about: boolean, basic: boolean, advanced: boolean}}
  */
 var MainPageVisibility;
 
 /**
@@ skipping 13 matching lines @@
       type: Object,
       notify: true,
     },
 
     /** @private */
     advancedToggleExpanded_: {
       type: Boolean,
       value: false,
     },
 
-    /** @private */
-    inSubpage_: Boolean,
+    /**
+     * True if a section is fully expanded to hide other sections beneath it.
+     * Not true otherwise (even while animating a section open/closed).
+     * @private
+     */
+    hasExpandedSection_: Boolean,
 
     /** @private */
     overscroll_: {
       type: Number,
       observer: 'overscrollChanged_',
     },
 
     /**
      * Controls which main pages are displayed via dom-ifs.
      * @private {!MainPageVisibility}
@@ skipping 39 matching lines @@
   },
 
   /** @override */
   attached: function() {
     document.addEventListener('toggle-advanced-page', function(e) {
       this.advancedToggleExpanded_ = e.detail;
       settings.navigateTo(this.advancedToggleExpanded_ ?
           settings.Route.ADVANCED : settings.Route.BASIC);
     }.bind(this));
 
+    var currentRoute = settings.getCurrentRoute();
+    this.hasExpandedSection_ = currentRoute && currentRoute.isSubpage();
   },
 
   /** @private */
   overscrollChanged_: function() {
     if (!this.overscroll_ && this.boundScroll_) {
       this.offsetParent.removeEventListener('scroll', this.boundScroll_);
       this.boundScroll_ = null;
     } else if (this.overscroll_ && !this.boundScroll_) {
       this.boundScroll_ = this.setOverscroll_.bind(this, 0);
       this.offsetParent.addEventListener('scroll', this.boundScroll_);
@@ skipping 26 matching lines @@
   arrowState_: function(opened) {
     return opened ? 'settings:arrow-drop-up' : 'cr:arrow-drop-down';
   },
 
   /**
    * @return {boolean}
    * @private
    */
   showAdvancedToggle_: function() {
     var inSearchMode = !!this.previousShowPages_;
-    return this.showPages_.basic && !this.inSubpage_ && !inSearchMode;
+    return !inSearchMode && this.showPages_.basic && !this.hasExpandedSection_;
   },
 
-  /** @protected */
+  /** @private */
   currentRouteChanged: function(newRoute) {
-    this.inSubpage_ = newRoute.isSubpage();
-    this.style.height = this.inSubpage_ ? '100%' : '';
+    // When the route changes from a sub-page to the main page, immediately
+    // update hasExpandedSection_ to unhide the other sections.
+    if (!newRoute.isSubpage())
+      this.hasExpandedSection_ = false;
 
-    if (settings.Route.ABOUT.contains(newRoute)) {
+    this.updatePagesShown_();
+  },
+
+  /** @private */
+  onSubpageExpand_: function() {
+    // The subpage finished expanding fully. Hide pages other than the current
+    // section's parent page.
+    this.hasExpandedSection_ = true;
+    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() {
+    var currentRoute = settings.getCurrentRoute();
+    if (settings.Route.ABOUT.contains(currentRoute)) {
       this.showPages_ = {about: true, basic: false, advanced: false};
     } else {
       this.showPages_ = {
         about: false,
-        basic: settings.Route.BASIC.contains(newRoute) || !this.inSubpage_,
-        advanced: settings.Route.ADVANCED.contains(newRoute) ||
-            (!this.inSubpage_ && this.advancedToggleExpanded_),
+        basic: settings.Route.BASIC.contains(currentRoute) ||
+            !this.hasExpandedSection_,
+        advanced: settings.Route.ADVANCED.contains(currentRoute) ||
+            (!this.hasExpandedSection_ && this.advancedToggleExpanded_),
       };
 
       if (this.showPages_.advanced) {
         assert(!this.pageVisibility ||
             this.pageVisibility.advancedSettings !== false);
         this.advancedToggleExpanded_ = true;
       }
     }
 
     // Wait for any other changes prior to calculating the overflow padding.
@@ skipping 118 matching lines @@
 
   /**
    * @param {(boolean|undefined)} visibility
    * @return {boolean} True unless visibility is false.
    * @private
    */
   showAdvancedSettings_: function(visibility) {
     return visibility !== false;
   },
 });