Hotword Audio Verification App: UI Polishes

chrome/browser/resources/hotword_audio_verification/style.css

Index: chrome/browser/resources/hotword_audio_verification/style.css
diff --git a/chrome/browser/resources/hotword_audio_verification/style.css b/chrome/browser/resources/hotword_audio_verification/style.css
index 2153cffe93ca94f8145fcb08d6a0087a2b5bb953..d16ba317426984fbd407f15b2e98bc674c51f3ce 100644
--- a/chrome/browser/resources/hotword_audio_verification/style.css
+++ b/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,

[Dan Beam, 2014/10/31 23:31:20]

nit: remove quotes (like it was before)

[kcarattini, 2014/11/03 00:06:18]

Done.

+      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;