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 */
-    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,
 
     /**
      * Controls which main pages are displayed via dom-ifs.
      * @type {!{about: boolean, basic: boolean, advanced: boolean}}
      * @private
      */
     showPages_: {
       type: Object,
       value: function() {
         return {about: false, basic: false, advanced: false};
@@ skipping 15 matching lines @@
     /**
      * Dictionary defining page visibility.
      * @type {!GuestModePageVisibility}
      */
     pageVisibility: {
       type: Object,
       value: function() { return {}; },
     },
   },
 
+  listeners: {
+    // Used to control overscroll behavior while animating sections.

[michaelpg, 2016/08/04 07:07:36]

Dave, these events let transitions actually start at the right place. Otherwise,
an animation would start, the page would immediately change height (and scroll),
and the animation would be offset.

Do you have any better ideas for handling this scenario?

+    'overscroll-recalc': 'onOverscrollRecalc_',
+    'overscroll-suppress': 'onOverscrollSuppress_',
+  },
+
   /** @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));
+
+    this.hasExpandedSection_ =
+        this.currentRoute && this.currentRoute.subpage.length > 0;
+  },
+
+  /** @private Enables overscroll calculating and recalculates it. */
+  onOverscrollRecalc_: function() {
+    this.overscrollSuppressed_ = false;
+    this.$.overscroll.style.paddingBottom = this.overscrollHeight_() + 'px';

[dschuyler, 2016/08/04 18:36:51]

The overscroll calculation changed in a CL yesterday.
Consider pulling new code. It's now using a property
to set the overscroll height.

[Dan Beam, 2016/08/05 00:47:06]

yep, this it out of date

+  },
+
+  /** @private Disables overscroll calculating. */
+  onOverscrollSuppress_: function() {
+    this.overscrollSuppressed_ = true;
   },
 
   /**
    * @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
+   * @param {boolean} hasExpandedSection
    * @return {boolean}
    * @private
    */
-  showAdvancedToggle_: function(showBasicPage, inSubpage) {
-    return showBasicPage && !inSubpage;
+  showAdvancedToggle_: function(showBasicPage, hasExpandedSection) {
+    return showBasicPage && !hasExpandedSection;
+  },
+
+  /** @private */
+  currentRouteChanged_: function(newRoute) {
+    // When the route changes from a sub-page to the main page, immediately
+    // update hasExpandedSection_ to unhide the other sections.
+    if (newRoute.subpage.length == 0)
+      this.hasExpandedSection_ = false;
+
+    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
    */
-  currentRouteChanged_: function(newRoute) {
-    this.inSubpage_ = newRoute.subpage.length > 0;
-    this.style.height = this.inSubpage_ ? '100%' : '';
-
-    if (settings.Route.ABOUT.contains(newRoute)) {
+  updatePagesShown_: function() {
+    if (settings.Route.ABOUT.contains(this.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(this.currentRoute) ||
+            !this.hasExpandedSection_,
+        advanced: settings.Route.ADVANCED.contains(this.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.
     setTimeout(function() {
       // Ensure any dom-if reflects the current properties.
       Polymer.dom.flush();
 
-      this.$.overscroll.style.paddingBottom = this.overscrollHeight_() + 'px';
+      if (!this.overscrollSuppressed_)
+        this.$.overscroll.style.paddingBottom = this.overscrollHeight_() + 'px';
     }.bind(this));
   },
 
   /**
    * Return the height that the overscroll padding should be set to.
    * This is used to determine how much padding to apply to the end of the
    * content so that the last element may align with the top of the content
    * area.
    * @return {number}
    * @private
@@ skipping 71 matching lines @@
 
   /**
    * @param {(boolean|undefined)} visibility
    * @return {boolean} True unless visibility is false.
    * @private
    */
   showAdvancedSettings_: function(visibility) {
     return visibility !== false;
   },
 });