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

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.
 
 /**
  * @fileoverview
  * 'settings-main' displays the selected settings page.
  */
 Polymer({
   is: 'settings-main',
@@ skipping 16 matching lines @@
       notify: true,
       observer: 'currentRouteChanged_',
     },
 
     /** @private */
     advancedToggleExpanded_: {
       type: Boolean,
       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,
 
     /**
      * Controls which main pages are displayed via dom-ifs.
      * @type {!{about: boolean, basic: boolean, advanced: boolean}}
      * @private
      */
     showPages_: {
       type: Object,
       value: function() {
@@ skipping 34 matching lines @@
     }.bind(this));
 
     doWhenReady(
         function() {
           var basicPage = this.$$('settings-basic-page');
           return !!basicPage && basicPage.scrollHeight > 0;
         }.bind(this),
         function() {
           this.resolver_.resolve();
         }.bind(this));
+
+    this.inSubpage_ = this.currentRoute.subpage.length > 0;

[Dan Beam, 2016/07/23 01:13:44]

so we don't need to call updatePagesShown_() here? because we're doing it from
currentRouteChanged_?

   },
 
   /**
    * @param {boolean} opened Whether the menu is expanded.
    * @return {string} Which icon to use.
    * @private
    */
   arrowState_: function(opened) {
     return opened ? 'settings:arrow-drop-up' : 'cr:arrow-drop-down';
   },
 
   /**
    * @param {boolean} showBasicPage
    * @param {boolean} inSubpage
    * @return {boolean}
    */
   showAdvancedToggle_: function(showBasicPage, inSubpage) {
     return showBasicPage && !inSubpage;
   },
 
   /**
    * @param {!SettingsRoute} newRoute
    * @private
    */
   currentRouteChanged_: function(newRoute) {
-    this.inSubpage_ = newRoute.subpage.length > 0;
-    this.style.height = this.inSubpage_ ? '100%' : '';
+    this.updatePagesShown_();
+  },
 
-    if (newRoute.page == 'about') {
-      this.showPages_ = {about: true, basic: false, advanced: false};
+  /** @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() {
+    if (this.currentRoute.page == 'about') {
+      this.showPages_ = {about: true, advanced: false, basic: false};
     } else {
       this.showPages_ = {
         about: false,
-        basic: newRoute.page == 'basic' || !this.inSubpage_,
-        advanced: newRoute.page == 'advanced' ||
+        basic: this.currentRoute.page == 'basic' || !this.inSubpage_,
+        advanced: this.currentRoute.page == 'advanced' ||
             (!this.inSubpage_ && this.advancedToggleExpanded_),
       };
 
       if (this.showPages_.advanced)
         this.advancedToggleExpanded_ = true;
     }
   },
 
   /** @private */
   toggleAdvancedPage_: function() {
@@ skipping 25 matching lines @@
     setTimeout(function() {
       settings.getSearchManager().search(
           query, assert(this.$$('settings-basic-page')));
     }.bind(this), 0);
     setTimeout(function() {
       settings.getSearchManager().search(
           query, assert(this.$$('settings-advanced-page')));
     }.bind(this), 0);
   },
 });