MD Settings: Fix scrolling bugs and hacks caused by undefined load behavior

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 30 matching lines @@
     /** @private */
     overscroll_: {
       type: Number,
       observer: 'overscrollChanged_',
     },
 
     /**
      * Controls which main pages are displayed via dom-ifs.
      * @private {!MainPageVisibility}
      */
-    showPages_: {
-      type: Object,
-      value: function() {
-        return {about: false, basic: false, advanced: false};
-      },
-    },
+    showPages_: Object,
 
     /**
      * The main pages that were displayed before search was initiated. When
      * |null| it indicates that currently the page is displaying its normal
      * contents, instead of displaying search results.
      * @private {?MainPageVisibility}
      */
     previousShowPages_: {
       type: Object,
       value: null,
@@ skipping 33 matching lines @@
     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_);
+      // Do not react immediately to scroll events since the overscroll was
+      // just set; we may be trying to scroll somewhere first.
+      setTimeout(function() {

[michaelpg, 2016/08/19 04:40:45]

I wish I didn't have to do this, but when we route to a section we would set the
overscroll (adding this handler), then the MainPageBehavior tries to scroll
(triggering this handler) and the overscroll gets reset to 0.

[dschuyler, 2016/08/23 02:09:50]

would afterNextRender help any better?

[michaelpg, 2016/09/29 01:12:48]

Ended up not needing this.

+        this.offsetParent.addEventListener('scroll', this.boundScroll_);
+      }.bind(this));
     }
   },
 
   /**
    * Sets the overscroll padding. Never forces a scroll, i.e., always leaves
    * any currently visible overflow as-is.
    * @param {number=} opt_minHeight The minimum overscroll height needed.
    */
   setOverscroll_: function(opt_minHeight) {
     var scroller = this.offsetParent;
@@ skipping 43 matching lines @@
     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 oldShowPages = this.showPages_;
+
     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(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.
-    setTimeout(function() {
-      // Ensure any dom-if reflects the current properties.
-      Polymer.dom.flush();
-
-      this.setOverscroll_(this.overscrollHeight_());
-    }.bind(this));
+    // Initialize the overscroll after rendering a page.
+    if (!oldShowPages)
+      setTimeout(this.updateOverscroll_.bind(this));
+    else
+      this.updateOverscroll_();
   },
 
   /**
+   * Sets the overscroll synchronously and asynchronously, to avoid
+   * preventing or conflicting with other DOM changes.
+   * @private
+   */
+  updateOverscroll_: function() {
+    // Update the overscroll padding so pages can scroll to section.
+    this.setOverscroll_(this.overscrollHeight_());
+
+    // Wait for any other changes to page height, then calculate the overflow
+    // padding again.
+    this.async(function() {
+      this.setOverscroll_(this.overscrollHeight_());
+    });
+  },
+
+  /**
    * 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
    */
   overscrollHeight_: function() {
     var route = settings.getCurrentRoute();
     if (!route.section || route.isSubpage() || this.showPages_.about)
@@ skipping 99 matching lines @@
 
   /**
    * @param {(boolean|undefined)} visibility
    * @return {boolean} True unless visibility is false.
    * @private
    */
   showAdvancedSettings_: function(visibility) {
     return visibility !== false;
   },
 });