[webui][ntp] Add listening text to voice search overlay

Bug: 1042534
Change-Id: I90ebfa07d025bc668593aa8df08c8cbbe4ddb8a6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2031755
Commit-Queue: Tibor Goldschwendt <tiborg@chromium.org>
Reviewed-by: Moe Ahmadi <mahmadi@chromium.org>
Cr-Commit-Position: refs/heads/master@{#739138}

chrome/browser/resources/new_tab_page/voice_search_overlay.html

 <style>
   :host {
     --receiving-audio-color: var(--google-red-refresh-500);
+    --speak-shown-duration: 2s;
+  }
+
+  .display-stack {
+    display: grid;
+  }
+
+  .display-stack > * {
+    grid-column-start: 1;
+    grid-row-start: 1;
   }
 
   #dialog {
@@ -58,18 +68,11 @@
 
   #texts {
     color: var(--ntp-secondary-text-color);
-    display: grid;
     flex-grow: 1;
     font-size: 32px;
     text-align: start;
   }
 
-  #texts > *,
-  #micContainer > * {
-    grid-column-start: 1;
-    grid-row-start: 1;
-  }
-
   *[text] {
     transition-delay: 200ms;
     transition-duration: 500ms;
@@ -91,6 +94,20 @@
     visibility: visible;
   }
 
+  *[text='speak'][visible] #speak {
+    opacity: 0;
+    transition: opacity 0ms var(--speak-shown-duration);
+  }
+
+  *[text='speak'] #listening {
+    opacity: 0;
+  }
+
+  *[text='speak'][visible] #listening {
+    opacity: 1;
+    transition: opacity 750ms ease-out var(--speak-shown-duration);
+  }
+
   #finalResult {
     color: var(--ntp-primary-text-color);
   }
@@ -112,7 +129,6 @@
     --mic-button-size: 165px;
     --mic-container-size: 300px;
     align-items: center;
-    display: grid;
     flex-shrink: 0;
     height: var(--mic-container-size);
     justify-items: center;
@@ -174,14 +190,16 @@
 </style>
 <dialog id="dialog" on-close="onOverlayClose_" on-click="onOverlayClick_">
   <button id="closeButton" tabindex="0" title="$i18n{close}">×</button>
-  <!-- TODO(crbug.com/1042534): Add Listening state. -->
   <div id="content">
     <iron-selector id="texts" selected="[[getText_(state_)]]"
         attr-for-selected="text" fallback-selection="none" aria-live="polite"
-        selected-attribute="visible">
+        selected-attribute="visible" class="display-stack">
       <div text="none"></div>
       <div text="waiting">$i18n{waiting}</div>
-      <div text="speak">$i18n{speak}</div>
+      <div text="speak" class="display-stack">
+        <div id="speak">$i18n{speak}</div>
+        <div id="listening">$i18n{listening}</div>
+      </div>
       <div text="result">
         <span id="finalResult">[[finalResult_]]</span>
         <span>[[interimResult_]]</span>
@@ -213,7 +231,7 @@
         </iron-pages>
       </div>
     </iron-selector>
-    <div id="micContainer" class$="[[getMicClass_(state_)]]">
+    <div id="micContainer" class$="[[getMicClass_(state_)]] display-stack">
       <div id="micVolume"
           style="--mic-volume-level: [[micVolumeLevel_]];
                 --mic-volume-duration: [[micVolumeDuration_]]ms;">

chrome/browser/ui/webui/new_tab_page/new_tab_page_ui.cc

@@ -92,6 +92,7 @@ content::WebUIDataSource* CreateNewTabPageUiHtmlSource(Profile* profile) {
       {"details", IDS_NEW_TAB_VOICE_DETAILS},
       {"languageError", IDS_NEW_TAB_VOICE_LANGUAGE_ERROR},
       {"learnMore", IDS_LEARN_MORE},
+      {"listening", IDS_NEW_TAB_VOICE_LISTENING},
       {"networkError", IDS_NEW_TAB_VOICE_NETWORK_ERROR},
       {"noTranslation", IDS_NEW_TAB_VOICE_NO_TRANSLATION},
       {"noVoice", IDS_NEW_TAB_VOICE_NO_VOICE},

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

@@ -66,7 +66,10 @@ suite('NewTabPageVoiceSearchOverlayTest', () => {
     // Assert.
     assertTrue(isVisible(
         voiceSearchOverlay.shadowRoot.querySelector('#texts *[text=waiting]')));
-    assertEquals(voiceSearchOverlay.$.micContainer.className, '');
+    assertFalse(
+        voiceSearchOverlay.$.micContainer.classList.contains('listening'));
+    assertFalse(
+        voiceSearchOverlay.$.micContainer.classList.contains('receiving'));
     assertStyle(voiceSearchOverlay.$.micVolume, '--mic-volume-level', '0');
   });
 
@@ -156,7 +159,10 @@ suite('NewTabPageVoiceSearchOverlayTest', () => {
     // Assert.
     const href = await testProxy.whenCalled('navigate');
     assertEquals(href, `${googleBaseUrl}/search?q=hello+world&gs_ivs=1`);
-    assertEquals(voiceSearchOverlay.$.micContainer.className, '');
+    assertFalse(
+        voiceSearchOverlay.$.micContainer.classList.contains('listening'));
+    assertFalse(
+        voiceSearchOverlay.$.micContainer.classList.contains('receiving'));
     assertStyle(voiceSearchOverlay.$.micVolume, '--mic-volume-level', '0');
   });
 
@@ -169,7 +175,10 @@ suite('NewTabPageVoiceSearchOverlayTest', () => {
         voiceSearchOverlay.shadowRoot.querySelector('#texts *[text=error]')));
     assertTrue(isVisible(
         voiceSearchOverlay.shadowRoot.querySelector('#errors *[error="2"]')));
-    assertEquals(voiceSearchOverlay.$.micContainer.className, '');
+    assertFalse(
+        voiceSearchOverlay.$.micContainer.classList.contains('listening'));
+    assertFalse(
+        voiceSearchOverlay.$.micContainer.classList.contains('receiving'));
     assertStyle(voiceSearchOverlay.$.micVolume, '--mic-volume-level', '0');
   });