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

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
- */
-function doWhenReady(readyTest, readyCallback) {
-  // TODO(dschuyler): Determine whether this hack can be removed.
-  // See also: https://github.com/Polymer/polymer/issues/3629
-  var intervalId = setInterval(function() {
-    if (readyTest()) {
-      clearInterval(intervalId);
-      readyCallback();
-    }
-  }, 10);
-}
-
-/**
  * Responds to route changes by expanding, collapsing, or scrolling to sections
  * on the page. Expanded sections take up the full height of the container. At
  * most one section should be expanded at any given time.
  * @polymerBehavior MainPageBehavior
  */
 var MainPageBehaviorImpl = {
   /** @type {?HTMLElement} The scrolling container. */
   scroller: null,
 
   /** @override */
   attached: function() {
     if (this.domHost && this.domHost.parentNode.tagName == 'PAPER-HEADER-PANEL')
       this.scroller = this.domHost.parentNode.scroller;
     else
       this.scroller = document.body; // Used in unit tests.
   },
 
   /**
    * @param {!settings.Route} newRoute
    * @param {settings.Route} oldRoute
    */
   currentRouteChanged: function(newRoute, oldRoute) {
-    if (oldRoute || !newRoute.section) {
+    // Allow the page to load before expanding the section.
+    if (!oldRoute)
+      setTimeout(this.tryTransitionToSection_.bind(this));
+    else
       this.tryTransitionToSection_();
-      return;
-    }
-
-    // Wait for the page to really be ready before expanding or scrolling to the
-    // section. TODO(michaelpg): Remove this workaround with a global workaround
-    // for crbug.com/638074.
-    doWhenReady(function() {
-      if (newRoute != settings.getCurrentRoute())
-        return;
-      var section = this.getSection(newRoute.section);
-      return section && (!newRoute.isSubpage() || section.canAnimateExpand());
-    }.bind(this), this.tryTransitionToSection_.bind(this));
   },
 
   /**
    * If possible, transitions to the current route's section (by expanding or
    * scrolling to it). If another transition is running, finishes or cancels
    * that one, then schedules this function again. This ensures the current
    * section is quickly shown, without getting the page into a broken state --
    * if currentRoute changes in between calls, just transition to the new route.
    * @private
    */
@@ skipping 15 matching lines @@
     if (expandedSection) {
       // If the section shouldn't be expanded, collapse it.
       if (!currentRoute.isSubpage() || expandedSection != currentSection) {
         promise = this.collapseSection_(expandedSection);
         // Scroll to the collapsed section.
         if (currentSection)
           this.scrollToSection_();
       }
     } else if (currentSection) {
       // Expand the section into a subpage or scroll to it on the main page.
+      if (!currentSection.clientHeight) {
+        setTimeout(this.tryTransitionToSection_.bind(this));
+        return;
+      }
       if (currentRoute.isSubpage())
         promise = this.expandSection_(currentSection);
       else
         this.scrollToSection_();
     }
 
     // When this animation ends, another may be necessary. Call this function
     // again after the promise resolves.
     if (promise)
       promise.then(this.tryTransitionToSection_.bind(this));
@@ skipping 101 matching lines @@
     if (!canAnimateCollapse) {
       // Finish by restoring the section into the page.
       section.setFrozen(false);
       return Promise.resolve();
     }
 
     // Play the actual collapse animation.
     return new Promise(function(resolve, reject) {
       // Wait for the other sections to show up so we can scroll properly.
       setTimeout(function() {
-        var newSection = settings.getCurrentRoute().section &&
-            this.getSection(settings.getCurrentRoute().section);
+        var currentRoute = settings.getCurrentRoute();
+        var newSection =
+            currentRoute.section && this.getSection(currentRoute.section);
 
-        // Scroll to the section if indicated by the route. TODO(michaelpg): Is
-        // this the right behavior, or should we return to the previous scroll
-        // position?
+        // Scroll to the new section if it's on this page. If the route has no
+        // section (e.g., a root page), return to the original position.
         if (newSection)
           newSection.scrollIntoView();
-        else
+        else if (!currentRoute.section)
           this.scroller.scrollTop = this.origScrollTop_;
 
         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.currentAnimation_ = null;
           resolve();
         }.bind(this));
       }.bind(this));
     }.bind(this));
   },
 
   /** @private */
   scrollToSection_: function() {
-    doWhenReady(
-        function() {
-          return this.scrollHeight > 0;
-        }.bind(this),
-        function() {
-          // If the current section changes while we are waiting for the page to
-          // be ready, scroll to the newest requested section.
-          var section = this.getSection(settings.getCurrentRoute().section);
-          if (section)
-            section.scrollIntoView();
-        }.bind(this));
+    assert(this.scrollHeight > 0);
+    var section = this.getSection(settings.getCurrentRoute().section);
+    assert(section);
+    section.scrollIntoView();
   },
 
   /**
   /**
    * Hides or unhides the sections not being expanded.
    * @param {string} sectionName The section to keep visible.
    * @param {boolean} hidden Whether the sections should be hidden.
    * @private
    */
   toggleOtherSectionsHidden_: function(sectionName, hidden) {
@@ skipping 33 matching lines @@
       this.scroller.style.width = 'calc(100% - ' + scrollbarWidth + 'px)';
     }
   }
 };
 
 /** @polymerBehavior */
 var MainPageBehavior = [
   settings.RouteObserverBehavior,
   MainPageBehaviorImpl,
 ];