MD Settings: Set overscroll before attempting to scroll to section

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 87 matching lines @@
     var currentRoute = settings.getCurrentRoute();
     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.boundScroll_ = function() {
+        if (!this.ignoreScroll_)
+          this.setOverscroll_(0);
+      }.bind(this);
       this.offsetParent.addEventListener('scroll', this.boundScroll_);
     }
   },
 
   /**
    * 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;
     if (!scroller)
       return;
     var overscroll = this.$.overscroll;
     var visibleBottom = scroller.scrollTop + scroller.clientHeight;
     var overscrollBottom = overscroll.offsetTop + overscroll.scrollHeight;
     // How much of the overscroll is visible (may be negative).
     var visibleOverscroll = overscroll.scrollHeight -
                             (overscrollBottom - visibleBottom);
     this.overscroll_ = Math.max(opt_minHeight || 0, visibleOverscroll);
   },
 
   /**
+   * 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
    */
   arrowState_: function(opened) {
     return opened ? 'settings:arrow-drop-up' : 'cr:arrow-drop-down';
   },
 
   /**
    * @return {boolean}
@@ skipping 58 matching lines @@
       this.showPages_ = {
         about: false,
         basic: settings.Route.BASIC.contains(currentRoute) ||
             !this.hasExpandedSection_,
         advanced: this.hasExpandedSection_ ?
             settings.Route.ADVANCED.contains(currentRoute) :
             this.advancedToggleExpanded_,
       };
     }
 
-    // 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.updateOverscrollForPage_();
+    }.bind(this));
+  },
 
-      this.setOverscroll_(this.overscrollHeight_());
-    }.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
    * area.
    * @return {number}
    * @private
    */
@@ skipping 89 matching lines @@
 
   /**
    * @param {(boolean|undefined)} visibility
    * @return {boolean} True unless visibility is false.
    * @private
    */
   showAdvancedSettings_: function(visibility) {
     return visibility !== false;
   },
 });