[MD settings] advanced toggle; add scrollWhenReady

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

Index: chrome/browser/resources/settings/settings_main/settings_main.js
diff --git a/chrome/browser/resources/settings/settings_main/settings_main.js b/chrome/browser/resources/settings/settings_main/settings_main.js
index b8a061845bc8925ee9705f08eeb277b6da89e888..8f25874e5fa64917299e1e87d140e17d24eb1327 100644
--- a/chrome/browser/resources/settings/settings_main/settings_main.js
+++ b/chrome/browser/resources/settings/settings_main/settings_main.js
@@ -9,6 +9,8 @@
 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_: {
@@ -63,10 +65,28 @@ Polymer({
     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
    */
@@ -83,7 +103,7 @@ Polymer({
         (this.isAdvancedMenuOpen_ && this.showAdvancedToggle_) ||
         newRoute.page == 'advanced';
 
-    this.$.pageContainer.style.height = isSubpage ? '100%' : '';
+    this.style.height = isSubpage ? '100%' : '';
   },
 
   /** @private */