WebUI cr-toast: clear timeout before showing

Bug: 819996
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I8a9fff7afcc4fa17f742bcad6bb102a8f6271881
Reviewed-on: https://chromium-review.googlesource.com/963694
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#543893}

chrome/test/data/webui/cr_elements/cr_elements_browsertest.js

@@ -301,6 +301,10 @@ CrElementsToastTest.prototype = {
   ]),
 };
 
+TEST_F('CrElementsToastTest', 'All', function() {
+  mocha.run();
+});
+
 /**
  * @constructor
  * @extends {CrElementsBrowserTest}

chrome/test/data/webui/cr_elements/cr_toast_test.js

@@ -4,11 +4,18 @@
 
 suite('cr-toast', function() {
   let toast;
+  let mockTimer;
 
   setup(function() {
     PolymerTest.clearBody();
     toast = document.createElement('cr-toast');
     document.body.appendChild(toast);
+    mockTimer = new MockTimer();
+    mockTimer.install();
+  });
+
+  teardown(function() {
+    mockTimer.uninstall();
   });
 
   test('simple show/hide', function() {
@@ -21,10 +28,7 @@ suite('cr-toast', function() {
     assertFalse(toast.open);
   });
 
-  test('auto hide', function() {
-    const mockTimer = new MockTimer();
-    mockTimer.install();
-
+  test('auto hide with show()', function() {
     const duration = 100;
     toast.duration = duration;
 
@@ -33,18 +37,95 @@ suite('cr-toast', function() {
 
     mockTimer.tick(duration);
     assertFalse(toast.open);
+  });
 
-    // Check that multiple shows reset the timeout.
+  test('auto hide with (open = true)', function() {
+    const duration = 100;
+    toast.duration = duration;
+
+    toast.open = true;
+
+    mockTimer.tick(duration);
+    assertFalse(toast.open);
+  });
+
+  test('show() clears auto-hide', function() {
+    const duration = 70;
+    toast.duration = duration;
+    toast.open = true;
+    mockTimer.tick(duration - 1);
     toast.show();
+
+    // Auto-hide is cleared and toast should remain open.
+    mockTimer.tick(1);
+    assertTrue(toast.open);
+
+    // When duration passes, new auto-hide should close toast.
+    mockTimer.tick(duration - 2);
+    assertTrue(toast.open);
+    mockTimer.tick(1);
+    mockTimer.tick(duration);
+    assertFalse(toast.open);
+  });
+
+  test('(open = true) does not clear auto-hide', function() {
+    const duration = 70;
+    toast.duration = duration;
+    toast.open = true;
     mockTimer.tick(duration - 1);
+    toast.open = true;
+    mockTimer.tick(1);
+    assertFalse(toast.open);
+  });
+
+  test('clearing duration clears timeout', function() {
+    const nonZeroDuration = 30;
+    toast.duration = nonZeroDuration;
+    toast.open = true;
+    assertTrue(toast.open);
+
+    const zeroDuration = 0;
+    toast.duration = zeroDuration;
+    mockTimer.tick(nonZeroDuration);
     assertTrue(toast.open);
+  });
 
+  test('setting a duration starts new auto-hide', function() {
+    toast.duration = 0;
     toast.show();
+
+    const nonZeroDuration = 50;
+    toast.duration = nonZeroDuration;
+    mockTimer.tick(nonZeroDuration - 1);
+    assertTrue(toast.open);
+
     mockTimer.tick(1);
-    // |duration| has passed, the next line would fail if the timeout wasn't
-    // reset.
+    assertFalse(toast.open);
+  });
+
+  test('setting duration clears auto-hide', function() {
+    const oldDuration = 30;
+    toast.duration = oldDuration;
+    toast.open = true;
+
+    mockTimer.tick(oldDuration - 1);
     assertTrue(toast.open);
 
-    mockTimer.uninstall();
+    const newDuration = 50;
+    toast.duration = newDuration;
+    mockTimer.tick(newDuration - 1);
+    assertTrue(toast.open);
+
+    mockTimer.tick(1);
+    assertFalse(toast.open);
+  });
+
+  test('setting duration using show(duration)', function() {
+    const duration = 100;
+    toast.show(duration);
+    assertTrue(toast.open);
+
+    mockTimer.tick(duration);
+    assertFalse(toast.open);
   });
 });

ui/webui/resources/cr_elements/cr_toast/cr_toast.js

@@ -20,24 +20,63 @@ Polymer({
     },
   },
 
+  observers: ['resetAutoHide_(duration, open)'],
+
   /** @private {number|null} */
   hideTimeoutId_: null,
 
-  show: function() {
-    this.open = true;
+  /**
+   * Cancels existing auto-hide, and sets up new auto-hide.
+   * @private
+   */
+  resetAutoHide_: function() {
+    if (this.hideTimeoutId_ != null) {
+      window.clearTimeout(this.hideTimeoutId_);
+      this.hideTimeoutId_ = null;
+    }
+
+    if (this.open && this.duration != 0) {
+      this.hideTimeoutId_ = window.setTimeout(() => {
+        this.open = false;
+      }, this.duration);
+    }
+  },
 
-    if (!this.duration)
-      return;
+  /**
+   * Shows the toast and auto-hides after |this.duration| milliseconds has
+   * passed. If the toast is currently being shown, any preexisting auto-hide
+   * is cancelled and replaced with a new auto-hide.
+   *
+   * If |this.duration| is set to 0, the toast will remain open indefinitely.
+   * The caller is responsible for hiding the toast.
+   *
+   * When |duration| is passed in the non-negative number, |this.duration|
+   * is updated to that value.
+   * @param {number=} duration
+   */
+  show: function(duration) {
+    // |this.resetAutoHide_| is called whenever |this.duration| or |this.open|
+    // is changed. If neither is changed, we will still need to reset auto-hide.
+    let shouldResetAutoHide = true;
 
-    if (this.hideTimeoutId_ != null)
-      window.clearTimeout(this.hideTimeoutId_);
+    if (typeof(duration) != 'undefined' && duration >= 0 &&
+        this.duration != duration) {
+      this.duration = duration;
+      shouldResetAutoHide = false;
+    }
 
-    this.hideTimeoutId_ = window.setTimeout(() => {
-      this.hide();
-      this.hideTimeoutId_ = null;
-    }, this.duration);
+    if (!this.open) {
+      this.open = true;
+      shouldResetAutoHide = false;
+    }
+
+    if (shouldResetAutoHide)
+      this.resetAutoHide_();
   },
 
+  /**
+   * Hides the toast.
+   */
   hide: function() {
     this.open = false;
   },