[MD settings] advanced toggle; add scrollWhenReady

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

Index: chrome/browser/resources/settings/settings_page/main_page_behavior.js
diff --git a/chrome/browser/resources/settings/settings_page/main_page_behavior.js b/chrome/browser/resources/settings/settings_page/main_page_behavior.js
index f1760c340f48d263b99b3c668c49c5165b03eab8..88c7678e78234bd12df200a4140e9fe3094cd623 100644
--- a/chrome/browser/resources/settings/settings_page/main_page_behavior.js
+++ b/chrome/browser/resources/settings/settings_page/main_page_behavior.js
@@ -22,6 +22,13 @@ var MainPageBehaviorImpl = {
   /** @type {?Element} The scrolling container. Elements must set this. */
   scroller: null,
 
+
+  /** @override */
+  attached: function() {
+    this.scroller = (this.parentNode.$ && this.parentNode.$.mainContainer) ||

[michaelpg, 2016/06/13 21:11:22]

This is a symptom of using this behavior for heterogeneous elements.
<settings-main> doesn't need this anyway, it owns the scrolling container.

[dschuyler, 2016/06/13 21:44:50]

Done.

+        (this.domHost && this.domHost.parentNode.$.mainContainer);
+  },
+
   /**
    * Hides or unhides the sections not being expanded.
    * @param {string} sectionName The section to keep visible.
@@ -212,7 +219,7 @@ var MainPageBehaviorImpl = {
     var card = section.$.card;
 
     // The card should start at the top of the page.
-    var targetTop = this.parentElement.getBoundingClientRect().top;
+    var targetTop = this.scroller.getBoundingClientRect().top;
 
     section.classList.add('expanding');
 
@@ -269,7 +276,7 @@ var MainPageBehaviorImpl = {
     this.style.margin = '';
     section.$.header.hidden = false;
 
-    var startingTop = this.parentElement.getBoundingClientRect().top;
+    var startingTop = this.scroller.getBoundingClientRect().top;
 
     var cardHeightStart = card.clientHeight;
     var cardWidthStart = card.clientWidth;
@@ -319,6 +326,20 @@ var MainPageBehaviorImpl = {
     });
     return promise;
   },
+
+  scrollWhenReady: function(containerCallback, elementCallback) {
+    // TODO(dschuyler): Determine whether this setTimeout can be removed.
+    // See also: https://github.com/Polymer/polymer/issues/3629
+    setTimeout(function pollForScrollHeight() {
+      var container = containerCallback();
+      if (!container || container.scrollHeight == 0) {
+        setTimeout(pollForScrollHeight.bind(this), 10);
+        return;
+      }
+
+      elementCallback().scrollIntoView();
+    }.bind(this));
+  },
 };
 
 
@@ -345,26 +366,15 @@ var RoutableBehaviorImpl = {
 
   /** @private */
   scrollToSection_: function() {
-    // TODO(dschuyler): Determine whether this setTimeout can be removed.
-    // See also: https://github.com/Polymer/polymer/issues/3629
-    setTimeout(function pollForScrollHeight() {
-      // If the current section changes while we are waiting for the page to be
-      // ready, scroll to the newest requested section.
-      var element = this.getSection_(this.currentRoute.section);
-      if (!element)
-        return;
-
-      var host = findAncestor(element, function(n) { return n.host; }).host;
-      if (host.scrollHeight == 0) {
-        setTimeout(pollForScrollHeight.bind(this), 100);
-        return;
-      }
-
-      // TODO(michaelpg): due to the workaround for crbug.com/617827 in
-      // settings_page_css.html, we have to use element.offsetTop instead of
-      // relying on element.scrollIntoView() so the margin is included.
-      host.scroller.scrollTop = element.offsetTop;
-    }.bind(this));
+    this.scrollWhenReady(
+        function() {
+          return this;
+        }.bind(this),
+        function() {
+          // If the current section changes while we are waiting for the page to
+          // be ready, scroll to the newest requested section.
+          return this.getSection_(this.currentRoute.section);
+        }.bind(this));
   },
 
   /** @private */
@@ -392,7 +402,8 @@ var RoutableBehaviorImpl = {
       var section = this.getSection_(newRoute.section);
       if (section)
         this.expandSection(section);
-    } else if (newRoute && newRoute.section) {
+    } else if (newRoute && newRoute.section &&
+        this.$$('[data-page=' + newRoute.page + ']')) {
       this.scrollToSection_();
     }
   },