Settings: avoid initiating a new toggle while toggling in progress.

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

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

@@ -113,6 +113,12 @@ Polymer({
     'subpage-expand': 'onSubpageExpanded_',
   },
 
+  /**
+   * Used to avoid handling a new toggle while currently toggling.
+   * @private {boolean}
+   */
+  advancedTogglingInProgress_: false,
+
   /** @override */
   attached: function() {
     this.currentRoute_ = settings.getCurrentRoute();
@@ -291,12 +297,21 @@ Polymer({
   },
 
   advancedToggleClicked_: function() {
+    if (this.advancedTogglingInProgress_)
+      return;
+
+    this.advancedTogglingInProgress_ = true;
     const toggle = this.$$('#toggleContainer');
     if (!this.advancedToggleExpanded) {
       this.advancedToggleExpanded = true;
       this.async(() => {
-        this.$$('#advancedPageTemplate').get().then(advancedPage => {
-          this.fire('scroll-to-top', toggle.offsetTop);
+        this.$$('#advancedPageTemplate').get().then(() => {
+          this.fire('scroll-to-top', {
+            top: toggle.offsetTop,
+            callback: () => {
+              this.advancedTogglingInProgress_ = false;
+            }
+          });
         });
       });
     } else {
@@ -304,6 +319,7 @@ Polymer({
         bottom: toggle.offsetTop + toggle.offsetHeight + 24,
         callback: () => {
           this.advancedToggleExpanded = false;
+          this.advancedTogglingInProgress_ = false;
         }
       });
     }

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

@@ -197,22 +197,24 @@ 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 scrollToTop = top => new Promise(resolve => {
+      this.$.container.scrollTo({top, behavior: 'smooth'});
       const onScroll = () => {
         this.debounce('scrollEnd', () => {
-          event.detail.callback();
           this.$.container.removeEventListener('scroll', onScroll);
+          resolve();
         }, 75);
       };
       this.$.container.addEventListener('scroll', onScroll);
     });
+    this.addEventListener('scroll-to-top', e => {
+      scrollToTop(e.detail.top).then(e.detail.callback);
+    });
+    this.addEventListener('scroll-to-bottom', e => {
+      scrollToTop(e.detail.bottom - this.$.container.clientHeight)
+          .then(e.detail.callback);
+    });
   },
 
   /** @override */