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 62a76e1a425eae45f5ceeeba7fde9f381c50c372..8ca37be59b2236007fb7ea410752939300cec8dc 100644
--- a/chrome/browser/resources/settings/settings_main/settings_main.js
+++ b/chrome/browser/resources/settings/settings_main/settings_main.js
@@ -34,8 +34,12 @@ Polymer({
       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.
@@ -71,6 +75,12 @@ Polymer({
     },
   },
 
+  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) {
@@ -78,6 +88,20 @@ Polymer({
       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;
   },
 
   /**
@@ -91,29 +115,47 @@ Polymer({
 
   /**
    * @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) {
@@ -128,7 +170,8 @@ Polymer({
       // 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));
   },