[MD settings] scroll to section from URL

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 26 matching lines @@
       this.scroller = document.body; // Used in unit tests.
   },
 
   /**
    * @param {!settings.Route} newRoute
    * @param {settings.Route} oldRoute
    */
   currentRouteChanged: function(newRoute, oldRoute) {
     // Allow the page to load before expanding the section. TODO(michaelpg):
     // Time this better when refactoring settings-animated-pages.
-    if (!oldRoute && newRoute.isSubpage())
+    if (!oldRoute && newRoute.isSubpage()) {
       setTimeout(this.tryTransitionToSection_.bind(this));
-    else
-      this.tryTransitionToSection_();
+    } else {
+      doWhenReady(

[michaelpg, 2016/08/24 22:01:59]

can we change doWhenReady to run the callback immediately if the test is
initially true?

otherwise we are adding a 10ms delay to every transition for no reason, which
makes testing harder and the order things happen more confusing

+        function() {
+          return this.scrollHeight > 0;
+        }.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 14 matching lines @@
         this.$$('settings-section.expanded'));
     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. TODO(michaelpg): This can look weird
         // because the collapse we just scheduled calculated its end target
         // based on the current scroll position. This bug existed before, and is
         // fixed in the next patch by making the card position: absolute.
         if (currentSection)
-          this.scrollToSection_();
+          currentSection.scrollIntoView();
       }
     } else if (currentSection) {
       // Expand the section into a subpage or scroll to it on the main page.
       if (currentRoute.isSubpage())
         promise = this.expandSection_(currentSection);
       else
-        this.scrollToSection_();
+        currentSection.scrollIntoView();
     }
 
     // When this animation ends, another may be necessary. Call this function
     // again after the promise resolves.
     if (promise)
       promise.then(this.tryTransitionToSection_.bind(this));
   },
 
   /**
    * If the current animation is inconsistent with the current route, stops the
@@ skipping 106 matching lines @@
    * @param {boolean} hidden Whether the sections should be hidden.
    * @private
    */
   toggleOtherSectionsHidden_: function(sectionName, hidden) {
     var sections = Polymer.dom(this.root).querySelectorAll(
         'settings-section');
     for (var section of sections)
       section.hidden = hidden && (section.section != sectionName);
   },
 
-  /** @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));
-  },
-
   /**
    * 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 + '"]'));
@@ skipping 17 matching lines @@
       this.scroller.style.width = 'calc(100% - ' + scrollbarWidth + 'px)';
     }
   }
 };
 
 /** @polymerBehavior */
 var MainPageBehavior = [
   settings.RouteObserverBehavior,
   MainPageBehaviorImpl,
 ];