MD Settings: Set overscroll before attempting to scroll to section

chrome/browser/resources/settings/settings_page/main_page_behavior.js

 // Copyright 2016 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.
 
 /**
  * Calls |readyTest| repeatedly until it returns true, then calls
  * |readyCallback|.
  * @param {function():boolean} readyTest
  * @param {!Function} readyCallback
  */
@@ skipping 152 matching lines @@
 
     if (!section.canAnimateExpand()) {
       // Try to wait for the section to be created.
       return new Promise(function(resolve, reject) {
         setTimeout(resolve);
       });
     }
 
     // Save the scroller position before freezing it.
     this.origScrollTop_ = this.scroller.scrollTop;
-    this.toggleScrolling_(false);
+    this.fire('freeze-scroll', true);
 
     // Freeze the section's height so its card can be removed from the flow.
     section.setFrozen(true);
 
     this.currentAnimation_ = section.animateExpand(this.scroller);
 
     var finished;
     return this.currentAnimation_.finished.then(function() {
       // Hide other sections and scroll to the top of the subpage.
       this.classList.add('showing-subpage');
       this.toggleOtherSectionsHidden_(section.section, true);
       this.scroller.scrollTop = 0;
       section.setFrozen(false);
 
       // Notify that the page is fully expanded.
       this.fire('subpage-expand');
 
       finished = true;
     }.bind(this), function() {
       // The animation was canceled; restore the section and scroll position.
       section.setFrozen(false);
       this.scroller.scrollTop = this.origScrollTop_;
 
       finished = false;
     }.bind(this)).then(function() {
-      this.toggleScrolling_(true);
+      this.fire('freeze-scroll', false);
       this.currentAnimation_ = null;
     }.bind(this));
   },
 
   /**
    * Animates the card in |section|, collapsing it back into its section.
    * @param {!SettingsSectionElement} section
    * @return {!Promise} Resolved when the transition is finished or canceled.
    */
   collapseSection_: function(section) {
     assert(this.scroller);
     assert(section.classList.contains('expanded'));
 
     var canAnimateCollapse = section.canAnimateCollapse();
     if (canAnimateCollapse) {
-      this.toggleScrolling_(false);
+      this.fire('freeze-scroll', true);
       // Do the initial collapse setup, which takes the section out of the flow,
       // before showing everything.
       section.setUpAnimateCollapse(this.scroller);
     } else {
       section.classList.remove('expanded');
     }
 
     // Show everything.
     this.toggleOtherSectionsHidden_(section.section, false);
     this.classList.remove('showing-subpage');
@@ skipping 16 matching lines @@
         this.currentAnimation_ = section.animateCollapse(
             /** @type {!HTMLElement} */(this.scroller));
 
         this.currentAnimation_.finished.catch(function() {
           // The collapse was canceled, so the page is showing a subpage still.
           this.fire('subpage-expand');
         }.bind(this)).then(function() {
           // Clean up after the animation succeeds or cancels.
           section.setFrozen(false);
           section.classList.remove('collapsing');
-          this.toggleScrolling_(true);
+          this.fire('freeze-scroll', false);
           this.currentAnimation_ = null;
           resolve();
         }.bind(this));
       }.bind(this));
     }.bind(this));
   },
 
   /**
   /**
    * Hides or unhides the sections not being expanded.
@@ skipping 12 matching lines @@
    * Helper function to get a section from the local DOM.
    * @param {string} section Section name of the element to get.
    * @return {?SettingsSectionElement}
    */
   getSection: function(section) {
     if (!section)
       return null;
     return /** @type {?SettingsSectionElement} */(
         this.$$('settings-section[section="' + section + '"]'));
   },
-
-  /**
-   * 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.
-   * @param {boolean} enabled
-   * @private
-   */
-  toggleScrolling_: function(enabled) {
-    if (enabled) {
-      this.scroller.style.overflow = '';
-      this.scroller.style.width = '';
-    } else {
-      var scrollerWidth = this.scroller.clientWidth;
-      this.scroller.style.overflow = 'hidden';
-      var scrollbarWidth = this.scroller.clientWidth - scrollerWidth;
-      this.scroller.style.width = 'calc(100% - ' + scrollbarWidth + 'px)';
-    }
-  }
 };
 
 /** @polymerBehavior */
 var MainPageBehavior = [
   settings.RouteObserverBehavior,
   MainPageBehaviorImpl,
 ];