[webui][ntp] Restart voice search when clicking retry link

Also, do the same if clicking mic button in retry state.

Bug: 1042534
Change-Id: I00b846fda24d263bd0c9493fd865fc3300541482
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2036384Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Commit-Queue: Tibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#738220}

chrome/browser/resources/new_tab_page/voice_search_overlay.html

@@ -183,7 +183,10 @@
           <a link="details" target="_blank" href="[[helpUrl_]]"><!--
             -->$i18n{details}
           </a>
-          <a link="try-again" href="#">$i18n{tryAgain}</a>
+          <a link="try-again" id="retryLink" href="#"
+              on-click="onRetryClick_"><!--
+            -->$i18n{tryAgain}
+          </a>
         </iron-pages>
       </div>
     </iron-pages>
@@ -194,7 +197,7 @@
         <div id="micVolumeCutout">
         </div>
       </div>
-      <cr-button id="micButton">
+      <cr-button id="micButton" on-click="onRetryClick_">
         <div id="micIcon"></div>
       </cr-button>
     </div>

chrome/browser/resources/new_tab_page/voice_search_overlay.js

@@ -223,6 +223,11 @@ class VoiceSearchOverlayElement extends PolymerElement {
   connectedCallback() {
     super.connectedCallback();
     this.$.dialog.showModal();
+    this.start();
+  }
+
+  /** @private */
+  start() {
     this.voiceRecognition_.start();
     this.state_ = State.STARTED;
     this.resetIdleTimer_();
@@ -239,6 +244,19 @@ class VoiceSearchOverlayElement extends PolymerElement {
     this.$.dialog.close();
   }
 
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  onRetryClick_(e) {
+    if (this.state_ !== State.ERROR_RECEIVED ||
+        this.error_ !== Error.NO_MATCH) {
+      return;
+    }
+    e.stopPropagation();
+    this.start();
+  }
+
   /** @private */
   resetIdleTimer_() {
     BrowserProxy.getInstance().clearTimeout(this.timerId_);
@@ -257,6 +275,7 @@ class VoiceSearchOverlayElement extends PolymerElement {
       this.onFinalResult_();
       return;
     }
+    this.voiceRecognition_.abort();
     this.onError_(Error.NO_MATCH);
   }
 

chrome/test/data/webui/new_tab_page/voice_search_overlay_test.js

@@ -280,4 +280,40 @@ suite('NewTabPageVoiceSearchOverlayTest', () => {
     // Assert.
     assertFalse(voiceSearchOverlay.$.dialog.open);
   });
+
+  test('on idle timeout stops voice search', async () => {
+    // Arrange.
+    const [callback, _] = await testProxy.whenCalled('setTimeout');
+
+    // Act.
+    callback();
+
+    // Assert.
+    assertTrue(mockSpeechRecognition.abortCalled);
+  });
+
+  const retryTestParams = [
+    {
+      name: 'retry link',
+      element: 'retryLink',
+    },
+    {
+      name: 'mic button',
+      element: 'micButton',
+    }
+  ];
+
+  retryTestParams.forEach(param => {
+    test(`${param.name} click starts voice search if in retry state`, () => {
+      // Arrange.
+      mockSpeechRecognition.onnomatch();
+      mockSpeechRecognition.startCalled = false;
+
+      // Act.
+      voiceSearchOverlay.shadowRoot.querySelector(`#${param.element}`).click();
+
+      // Assert.
+      assertTrue(mockSpeechRecognition.startCalled);
+    });
+  });
 });