[MD settings] advanced toggle; add scrollWhenReady

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.
 
 // Fast out, slow in.
 var EASING_FUNCTION = 'cubic-bezier(0.4, 0, 0.2, 1)';
 var EXPAND_DURATION = 350;
 
 /**
  * Provides animations to expand and collapse individual sections in a page.
  * Expanded sections take up the full height of the container. At most one
  * section should be expanded at any given time.
  * @polymerBehavior Polymer.MainPageBehavior
  */
 var MainPageBehaviorImpl = {
   /**
    * @type {string} Selector to get the sections. Derived elements
    *     must override.
    */
   sectionSelector: '',
 
   /** @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.
    * @param {boolean} hidden Whether the sections should be hidden.
    * @private
    */
   toggleOtherSectionsHidden_: function(sectionName, hidden) {
     var sections = Polymer.dom(this.root).querySelectorAll(
         this.sectionSelector + ':not([section=' + sectionName + '])');
     for (var section of sections)
@@ skipping 170 matching lines @@
   /**
    * Expands the card in |section| to fill the page.
    * @param {!SettingsSectionElement} section
    * @return {!Promise}
    * @private
    */
   playExpandSection_: function(section) {
     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');
 
     // Expand the card, using minHeight. (The card must span the container's
     // client height, so it must be at least 100% in case the card is too short.
     // If the card is already taller than the container's client height, we
     // don't want to shrink the card to 100% or the content will overflow, so
     // we can't use height, and animating height wouldn't look right anyway.)
     var keyframes = [{
       top: card.style.top,
@@ skipping 36 matching lines @@
    * @param {!SettingsSectionElement} section
    * @return {!Promise}
    * @private
    */
   playCollapseSection_: function(section) {
     var card = section.$.card;
 
     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;
 
     section.classList.add('collapsing');
     section.classList.remove('expanding', 'expanded');
 
     // If we navigated here directly, we don't know the original height of the
     // section, so we skip the animation.
     // TODO(michaelpg): remove this condition once sliding is implemented.
@@ skipping 29 matching lines @@
       duration: EXPAND_DURATION
     });
 
     card.style.width = cardWidthStart + 'px';
     var promise = this.animateElement('section', card, keyframes, options);
     promise.then(function() {
       card.style.width = '';
     });
     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));
+  },
 };
 
 
 /** @polymerBehavior */
 var MainPageBehavior = [
   TransitionBehavior,
   MainPageBehaviorImpl
 ];
 
 
 /**
  * TODO(michaelpg): integrate slide animations.
  * @polymerBehavior RoutableBehavior
  */
 var RoutableBehaviorImpl = {
   properties: {
     /** Contains the current route. */
     currentRoute: {
       type: Object,
       notify: true,
       observer: 'currentRouteChanged_',
     },
   },
 
   /** @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 */
   currentRouteChanged_: function(newRoute, oldRoute) {
     var newRouteIsSubpage = newRoute && newRoute.subpage.length;
     var oldRouteIsSubpage = oldRoute && oldRoute.subpage.length;
 
     if (!oldRoute && newRouteIsSubpage) {
       // Allow the page to load before expanding the section. TODO(michaelpg):
       // Time this better when refactoring settings-animated-pages.
       setTimeout(function() {
         var section = this.getSection_(newRoute.section);
         if (section)
           this.expandSection(section);
       }.bind(this));
       return;
     }
 
     if (!newRouteIsSubpage && oldRouteIsSubpage) {
       var section = this.getSection_(oldRoute.section);
       if (section)
         this.collapseSection(section);
     } else if (newRouteIsSubpage &&
                (!oldRouteIsSubpage || newRoute.section != oldRoute.section)) {
       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_();
     }
   },
 
   /**
    * Helper function to get a section from the local DOM.
    * @param {string} section Section name of the element to get.
    * @return {?SettingsSectionElement}
    * @private
    */
   getSection_: function(section) {
     return /** @type {?SettingsSectionElement} */(
         this.$$('[section=' + section + ']'));
   },
 };
 
 
 /** @polymerBehavior */
 var RoutableBehavior = [
   MainPageBehavior,
   RoutableBehaviorImpl
 ];