Settings: scroll to the advanced settings after expansion

Bug: 624849
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I83171f753c73b50e7d674e3f588cd5eb6e3f01d7
Reviewed-on: https://chromium-review.googlesource.com/1089643
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#568231}

chrome/browser/resources/settings/basic_page/basic_page.html

@@ -219,8 +219,9 @@
           inSearchMode, hasExpandedSection_)]]">
         <div id="toggleSpacer"></div>
         <h2 id="toggleContainer">
-          <paper-button id="advancedToggle" active="{{advancedToggleExpanded}}"
-              aria-active-attribute="aria-expanded" toggles>
+          <paper-button id="advancedToggle"
+              aria-active-attribute="aria-expanded"
+              on-click="advancedToggleClicked_">
             <span>$i18n{advancedPageTitle}</span>
             <iron-icon icon="[[getArrowIcon_(advancedToggleExpanded)]]">
             </iron-icon>

chrome/browser/resources/settings/basic_page/basic_page.js

@@ -49,6 +49,7 @@ Polymer({
 
     advancedToggleExpanded: {
       type: Boolean,
+      value: false,
       notify: true,
       observer: 'advancedToggleExpandedChanged_',
     },
@@ -261,6 +262,25 @@ Polymer({
     }
   },
 
+  advancedToggleClicked_: function() {
+    const toggle = this.$$('#toggleContainer');
+    if (!this.advancedToggleExpanded) {
+      this.advancedToggleExpanded = true;
+      this.async(() => {
+        this.$$('#advancedPageTemplate').get().then(advancedPage => {
+          this.fire('scroll-to-top', toggle.offsetTop);
+        });
+      });
+    } else {
+      this.fire('scroll-to-bottom', {
+        bottom: toggle.offsetTop + toggle.offsetHeight + 24,
+        callback: () => {
+          this.advancedToggleExpanded = false;
+        }
+      });
+    }
+  },
+
   /**
    * @param {boolean} inSearchMode
    * @param {boolean} hasExpandedSection

chrome/browser/resources/settings/settings_ui/settings_ui.js

@@ -169,6 +169,22 @@ Polymer({
     // Preload bold Roboto so it doesn't load and flicker the first time used.
     document.fonts.load('bold 12px Roboto');
     settings.setGlobalScrollTarget(this.$.container);
+    this.addEventListener('scroll-to-top', event => {
+      this.$.container.scrollTo({top: event.detail, behavior: 'smooth'});
+    });
+    this.addEventListener('scroll-to-bottom', event => {
+      this.$.container.scrollTo({
+        top: event.detail.bottom - this.$.container.clientHeight,
+        behavior: 'smooth'
+      });
+      const onScroll = () => {
+        this.debounce('scrollEnd', () => {
+          event.detail.callback();
+          this.$.container.removeEventListener('scroll', onScroll);
+        }, 75);
+      };
+      this.$.container.addEventListener('scroll', onScroll);
+    });
   },
 
   /** @override */

chrome/test/data/webui/settings/settings_main_test.js

@@ -270,6 +270,8 @@ cr.define('settings_main_page', function() {
           .then(function() {
             const whenHidden =
                 test_util.whenAttributeIs(advancedPage, 'hidden', '');
+            test_util.eventToPromise('scroll-to-bottom', basicPage)
+                .then(event => event.detail.callback());
 
             const advancedToggle =
                 getToggleContainer().querySelector('#advancedToggle');