MD Settings: Set overscroll before attempting to scroll to section

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 d43bfeff5db81abd5da5735420209a2adf4446bc..cb8a708e5748a2321cd63a71633d30648b595258 100644
--- a/chrome/browser/resources/settings/settings_main/settings_main.js
+++ b/chrome/browser/resources/settings/settings_main/settings_main.js
@@ -105,7 +105,10 @@ Polymer({
       this.offsetParent.removeEventListener('scroll', this.boundScroll_);
       this.boundScroll_ = null;
     } else if (this.overscroll_ && !this.boundScroll_) {
-      this.boundScroll_ = this.setOverscroll_.bind(this, 0);
+      this.boundScroll_ = function() {
+        if (!this.ignoreScroll_)
+          this.setOverscroll_(0);
+      }.bind(this);
       this.offsetParent.addEventListener('scroll', this.boundScroll_);
     }
   },
@@ -114,6 +117,7 @@ Polymer({
    * 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.
+   * @private
    */
   setOverscroll_: function(opt_minHeight) {
     var scroller = this.offsetParent;
@@ -129,6 +133,32 @@ Polymer({
   },
 
   /**
+   * Enables or disables user scrolling, via overscroll: hidden. Room for the
+   * hidden scrollbar is added to prevent the page width from changing back and
+   * forth. Also freezes the overscroll height.
+   * @param {!Event} e
+   * @param {boolean} detail True to freeze, false to unfreeze.

[Dan Beam, 2016/09/29 03:04:20]

why can't we just name this "freeze" instead of "detail"?

[michaelpg, 2016/09/29 03:10:50]

I can if you want. My rationale: "detail" is what the function is actually
invoked with, so it's a common convention. IOW, because onFoo_ handlers called
by Polymer feel more like "overriding" to me so renaming parameters seems weird.

+   * @private
+   */
+  onFreezeScroll_: function(e, detail) {
+    if (detail) {
+      // Update the overscroll and ignore scroll events.
+      this.setOverscroll_(this.overscrollHeight_());
+      this.ignoreScroll_ = true;
+
+      // Prevent scrolling the container.
+      var scrollerWidth = this.offsetParent.clientWidth;
+      this.offsetParent.style.overflow = 'hidden';
+      var scrollbarWidth = this.offsetParent.clientWidth - scrollerWidth;
+      this.offsetParent.style.width = 'calc(100% - ' + scrollbarWidth + 'px)';
+    } else {
+      this.ignoreScroll_ = false;
+      this.offsetParent.style.overflow = '';
+      this.offsetParent.style.width = '';
+    }
+  },
+
+  /**
    * @param {boolean} opened Whether the menu is expanded.
    * @return {string} Which icon to use.
    * @private
@@ -207,16 +237,33 @@ Polymer({
       };
     }
 
-    // Wait for any other changes prior to calculating the overflow padding.
+    // Calculate and set the overflow padding.
+    this.updateOverscrollForPage_();
+
+    // Wait for any other changes, then calculate the overflow padding again.
     setTimeout(function() {
       // Ensure any dom-if reflects the current properties.
       Polymer.dom.flush();
-
-      this.setOverscroll_(this.overscrollHeight_());
+      this.updateOverscrollForPage_();
     }.bind(this));
   },
 
   /**
+   * Calculates the necessary overscroll and sets the overscroll to that value
+   * (at minimum). For the About page, this just zeroes the overscroll.
+   * @private
+   */
+  updateOverscrollForPage_: function() {
+    if (this.showPages_.about) {
+      // Set overscroll directly to remove any existing overscroll that
+      // setOverscroll_ would otherwise preserve.
+      this.overscroll_ = 0;
+      return;
+    }
+    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