[MD settings] advanced toggle; add scrollWhenReady

chrome/browser/resources/settings/settings_main/settings_main.js

 // Copyright 2015 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.
 
 /**
  * @fileoverview
  * 'settings-main' displays the selected settings page.
  */
 Polymer({
   is: 'settings-main',
 
+  behaviors: [RoutableBehavior],

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

This should not be a RoutableBehavior, which controls expanding and collapsing
settings-sections and scrolling to settings-sections. (It's not the best name.
It includes MainPageBehavior, which is also not a great name: the "main pages"
are basic, advanced, and about, not <settings-main> (which we never call a
"page").)

If you just want common "scrollWhenReady" behavior, you should do that
separately or factor it out of MainPageBehavior. Looks like it can just be
static, btw.

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

Done.

+
   properties: {
     /** @private */
     isAdvancedMenuOpen_: {
       type: Boolean,
       value: false,
     },
 
     /**
      * Preferences state.
      */
@@ skipping 34 matching lines @@
     showAboutPage_: {
       type: Boolean,
       value: false,
     },
   },
 
   attached: function() {
     document.addEventListener('toggle-advanced-page', function(e) {
       this.showAdvancedPage_ = e.detail;
       this.isAdvancedMenuOpen_ = e.detail;
+      if (this.showAdvancedPage_) {
+        this.scrollWhenReady(
+            function() {
+              return this.shadowRoot.querySelector('settings-advanced-page');
+            }.bind(this),
+            function() {
+              return this.shadowRoot.querySelector('#toggleContainer');
+            }.bind(this));
+      }
     }.bind(this));
   },
 
   /**
+   * @param {boolean} opened Whether the menu is expanded.
+   * @return {string} Which icon to use.
+   * @private
+   * */
+  arrowState_: function(opened) {
+    return opened ? 'settings:arrow-drop-up' : 'cr:arrow-drop-down';
+  },
+
+  /**
    * @param {!SettingsRoute} newRoute
    * @private
    */
   currentRouteChanged_: function(newRoute) {
     var isSubpage = !!newRoute.subpage.length;
 
     this.showAboutPage_ = newRoute.page == 'about';
 
     this.showAdvancedToggle_ = !this.showAboutPage_ && !isSubpage;
 
     this.showBasicPage_ = this.showAdvancedToggle_ || newRoute.page == 'basic';
 
     this.showAdvancedPage_ =
         (this.isAdvancedMenuOpen_ && this.showAdvancedToggle_) ||
         newRoute.page == 'advanced';
 
-    this.$.pageContainer.style.height = isSubpage ? '100%' : '';
+    this.style.height = isSubpage ? '100%' : '';
   },
 
   /** @private */
   toggleAdvancedPage_: function() {
     this.fire('toggle-advanced-page', !this.isAdvancedMenuOpen_);
   },
 });