Hotword Audio Verification App: UI Polishes

Adds hi-res assets.
Adds new error asset.
Removes audio history step.
Updates audio history 'learn more' link.

BUG=390086

Review URL: https://codereview.chromium.org/695703002

Cr-Commit-Position: refs/heads/master@{#302407}

chrome/browser/resources/component_extension_resources.grd

@@ -64,19 +64,24 @@
         <include name="IDR_HOTWORD_AUDIO_VERIFICATION_MAIN_JS" file="hotword_audio_verification/main.js" type="BINDATA" />
         <include name="IDR_HOTWORD_AUDIO_VERIFICATION_FLOW_JS" file="hotword_audio_verification/flow.js" type="BINDATA" />
         <include name="IDR_HOTWORD_ONLY_STEP_HTML" file="hotword_audio_verification/steps/hotword_only_step.html" flattenhtml="true" type="BINDATA" />
-        <include name="IDR_AUDIO_HISTORY_STEP_HTML" file="hotword_audio_verification/steps/audio_history_step.html" flattenhtml="true" type="BINDATA" />
         <include name="IDR_HOTWORD_AUDIO_HISTORY_STEP_HTML" file="hotword_audio_verification/steps/hotword_audio_history_step.html" flattenhtml="true" type="BINDATA" />
         <include name="IDR_SPEECH_TRAINING_STEP_HTML" file="hotword_audio_verification/steps/speech_training_step.html" flattenhtml="true" type="BINDATA" />
         <include name="IDR_FINISHED_STEP_HTML" file="hotword_audio_verification/steps/finished_step.html" flattenhtml="true" type="BINDATA" />
         <include name="IDR_HOTWORD_AUDIO_VERIFICATION_STYLE_CSS" file="hotword_audio_verification/style.css" type="BINDATA" />
-        <include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_CLOSE" file="hotword_audio_verification/images/bt-close-1x.png" type="BINDATA" />
-        <include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_HEADER" file="hotword_audio_verification/images/header-optin-1x.png" type="BINDATA" />
-        <include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_CHECK_BLUE" file="hotword_audio_verification/images/ic-check-blue-1x.png" type="BINDATA" />
-        <include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_CHECK_GRAY" file="hotword_audio_verification/images/ic-check-gray-1x.png" type="BINDATA" />
-        <include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_ERROR" file="hotword_audio_verification/images/ic-error-1x.png" type="BINDATA" />
-        <include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_MIC" file="hotword_audio_verification/images/mic-1x.png" type="BINDATA" />
-        <include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_LOADER" file="hotword_audio_verification/images/placeholder-loader-1x.png" type="BINDATA" />
-        <include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_LOADER_ERROR" file="hotword_audio_verification/images/placeholder-loader-error-1x.png" type="BINDATA" />
+        <include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_CLOSE_1X" file="hotword_audio_verification/images/bt-close-1x.png" type="BINDATA" />
+        <include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_CLOSE_2X" file="hotword_audio_verification/images/bt-close-2x.png" type="BINDATA" />
+        <include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_HEADER_1X" file="hotword_audio_verification/images/header-optin-1x.png" type="BINDATA" />
+        <include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_HEADER_2X" file="hotword_audio_verification/images/header-optin-2x.png" type="BINDATA" />
+        <include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_CHECK_BLUE_1X" file="hotword_audio_verification/images/ic-check-blue-1x.png" type="BINDATA" />
+        <include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_CHECK_BLUE_2X" file="hotword_audio_verification/images/ic-check-blue-2x.png" type="BINDATA" />
+        <include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_CHECK_GRAY_1X" file="hotword_audio_verification/images/ic-check-gray-1x.png" type="BINDATA" />
+        <include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_CHECK_GRAY_2X" file="hotword_audio_verification/images/ic-check-gray-2x.png" type="BINDATA" />
+        <include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_ERROR_1X" file="hotword_audio_verification/images/ic-error-1x.png" type="BINDATA" />
+        <include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_ERROR_2X" file="hotword_audio_verification/images/ic-error-2x.png" type="BINDATA" />
+        <include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_MIC_1X" file="hotword_audio_verification/images/mic-1x.png" type="BINDATA" />
+        <include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_MIC_2X" file="hotword_audio_verification/images/mic-2x.png" type="BINDATA" />
+        <include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_LOADER_1X" file="hotword_audio_verification/images/placeholder-loader-1x.png" type="BINDATA" />
+        <include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_LOADER_2X" file="hotword_audio_verification/images/placeholder-loader-2x.png" type="BINDATA" />
 
         <!-- Hotword Helper extension -->
         <include name="IDR_HOTWORD_HELPER_AUDIO_CLIENT_JS" file="hotword_helper/audio_client.js" type="BINDATA" />

chrome/browser/resources/hotword_audio_verification/flow.js

@@ -7,7 +7,6 @@
   // Correspond to steps in the hotword opt-in flow.
   /** @const */ var HOTWORD_AUDIO_HISTORY = 'hotword-audio-history-container';
   /** @const */ var HOTWORD_ONLY_START = 'hotword-only-container';
-  /** @const */ var AUDIO_HISTORY_START = 'audio-history-container';
   /** @const */ var SPEECH_TRAINING = 'speech-training-container';
   /** @const */ var FINISHED = 'finished-container';
 
@@ -18,9 +17,6 @@
    * @const
    */
   var FLOWS = [
-    // TODO(kcarattini): Remove the first flow, since we will not be
-    // managing the Audio History Setting in Chrome anymore.
-    [AUDIO_HISTORY_START],
     [HOTWORD_ONLY_START, FINISHED],
     [HOTWORD_AUDIO_HISTORY, SPEECH_TRAINING, FINISHED],
     [SPEECH_TRAINING, FINISHED]

chrome/browser/resources/hotword_audio_verification/main.html

@@ -13,7 +13,6 @@
     <div id="steps">
       <!-- TODO(kcarattini): Localize the strings in the following files. -->
       <include src="steps/hotword_only_step.html">
-      <include src="steps/audio_history_step.html">
       <include src="steps/hotword_audio_history_step.html">
       <include src="steps/speech_training_step.html">
       <include src="steps/finished_step.html">

chrome/browser/resources/hotword_audio_verification/steps/audio_history_step.html

-<div id="audio-history-container" hidden>
-  <div class="container">
-    <div class="header">
-      <span class="close"></span>
-      <div class="header-text">
-        <h1>Enable Audio History</h1>
-      </div>
-    </div>
-    <div class="content">
-      <div class="col-3">
-        <h4>To make this happen, you agree that</h4>
-        When you use voice activation commands, such as "Ok Google" or
-        touching a microphone icon, a recording of the next thing you say,
-        plus a few seconds before, may be used and stored by Google and
-        associated with your Google Account to help recognize your voice and
-        improve speech recognition.
-        <br>
-        <a is="action-link">LEARN MORE</a>
-      </div>
-    </div>
-    <div class="buttonbar">
-      <button id="ah-agree-button" class="primary">I AGREE</button>
-      <button id="ah-cancel-button" >NO THANKS</button>
-    </div>
-  </div>
-</div>

chrome/browser/resources/hotword_audio_verification/steps/hotword_audio_history_step.html

@@ -17,7 +17,7 @@
         improve speech recognition.
         <br>
         <br>
-        <a href="https://support.google.com/websearch/answer/6030020"
+        <a href="https://support.google.com/websearch?p=chromebook_audiohistory"
             target="_blank">LEARN MORE</a>
       </div>
     </div>

chrome/browser/resources/hotword_audio_verification/style.css

@@ -43,7 +43,10 @@ div.container {
 }
 
 div.header {
-  background: url(../images/header-optin-1x.png) no-repeat;
+  background: -webkit-image-set(
+      url(../images/header-optin-1x.png) 1x,
+      url(../images/header-optin-2x.png) 2x)
+      no-repeat;
   height: 240px;
   vertical-align: bottom;
 }
@@ -69,7 +72,9 @@ div.content {
 }
 
 .close {
-  background: url(../images/bt-close-1x.png);
+  background: -webkit-image-set(
+      url(../images/bt-close-1x.png) 1x,
+      url(../images/bt-close-2x.png) 2x);
   float: right;
   height: 60px;
   width: 60px;
@@ -188,23 +193,38 @@ button.primary {
 
 .train.listening .icon {
   -webkit-animation: rotate 2s linear infinite;
-  background: url(../images/placeholder-loader-1x.png) no-repeat;
+  background: -webkit-image-set(
+      url(../images/placeholder-loader-1x.png) 1x,
+      url(../images/placeholder-loader-2x.png) 2x)
+      no-repeat;
 }
 
 .train.not-started .icon {
-  background: url(../images/ic-check-gray-1x.png) no-repeat;
+  background: -webkit-image-set(
+      url(../images/ic-check-gray-1x.png) 1x,
+      url(../images/ic-check-gray-2x.png) 2x)
+      no-repeat;
 }
 
 .train.recorded .icon {
-  background: url(../images/ic-check-blue-1x.png) no-repeat;
+  background: -webkit-image-set(
+      url(../images/ic-check-blue-1x.png) 1x,
+      url(../images/ic-check-blue-2x.png) 2x)
+      no-repeat;
 }
 
 .train.error .icon {
-  background: url(../images/placeholder-loader-error-1x.png) no-repeat;
+  background: -webkit-image-set(
+      url(../images/ic-error-1x.png) 1x,
+      url(../images/ic-error-2x.png) 2x)
+      no-repeat;
 }
 
 .mic {
-  background: url(../images/mic-1x.png) no-repeat;
+  background: -webkit-image-set(
+      url(../images/mic-1x.png) 1x,
+      url(../images/mic-2x.png) 2x)
+      no-repeat;
   height: 80px;
   left: 666px;
   position: absolute;
@@ -219,7 +239,10 @@ button.primary {
 }
 
 .check .icon {
-  background: url(../images/ic-check-blue-1x.png) no-repeat;
+  background: -webkit-image-set(
+      url(../images/ic-check-blue-1x.png) 1x,
+      url(../images/ic-check-blue-2x.png) 2x)
+      no-repeat;
   display: inline-block;
   height: 24px;
   margin-right: 16px;