Video Player: Restyle Files.app Cast Selection Menu

See the issue (http://crbug.com/407392#5) for the image of restyled design.

BUG=407392
TEST=manually tested

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

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

chrome/app/chromeos_strings.grdp

@@ -942,6 +942,9 @@ Press any key to continue exploring.
   <message name="IDS_VIDEO_PLAYER_PLAYING_ON" desc="Message is shown ahead of the name of the current chromecast which plays the video now. For example, if this message is 'Playing on' and the Chromecast name is 'Foocast', 'Playing on Foocast' is shown.">
     Playing on
   </message>
+  <message name="IDS_VIDEO_PLAYER_PLAY_ON" desc="Message is shown above the list of cast devices. The user will select one of them to play the current video on selected device.">
+    Play on
+  </message>
 
 <!-- Imageburn Strings -->
   <message name="IDS_CHECKING_FOR_UPDATES" desc="Notification for checking for update">

chrome/browser/chromeos/extensions/file_manager/private_api_strings.cc

@@ -521,6 +521,7 @@ bool FileBrowserPrivateGetStringsFunction::RunSync() {
   SET_STRING("VIDEO_PLAYER_PLAY_THIS_COMPUTER",
              IDS_VIDEO_PLAYER_PLAY_THIS_COMPUTER);
   SET_STRING("VIDEO_PLAYER_PLAYING_ON", IDS_VIDEO_PLAYER_PLAYING_ON);
+  SET_STRING("VIDEO_PLAYER_PLAY_ON", IDS_VIDEO_PLAYER_PLAY_ON);
 #undef SET_STRING
 
   dict->SetBoolean("PDF_VIEW_ENABLED",

ui/file_manager/video_player/css/cast_menu.css

@@ -3,14 +3,21 @@
  * found in the LICENSE file. */
 
 .cast-menu {
-  border: 1px solid #7f7f7f;
+  background: #222;
+  border: 0;
   border-radius: 1px;
   min-width: 120px;
-  padding: 0;
+  padding: 0 15px 15px;
   position: absolute;
   z-index: 1000;
 }
 
+.cast-menu:before {
+  color: #fff;
+  content: attr(playon-text);
+  line-height: 42px;
+}
+
 .cast-menu.hidden {
   display: none;
 }
@@ -18,7 +25,7 @@
 .cast-menu > :not(hr) {
   -webkit-padding-end: 14px;
   -webkit-padding-start: 19px;
-  background-color: #fff;
+  background-color: #e6e6e6;
   font-size: 12px;
   padding-bottom: 5px;
   padding-top: 5px;
@@ -30,6 +37,22 @@
   -webkit-padding-start: 0;
 }
 
+.cast-menu > [selected]:not(hr) {
+  background-color: #888;
+  color: #fff;
+}
+
+.cast-menu > [selected]:not(hr):active {
+  background-color: #888;
+  color: #fff;
+}
+
+.cast-menu > [checked]:hover:before,
+.cast-menu > [checked]:active:before {
+  content: url('../../../webui/resources/images/checkbox_white.png');
+}
+
 .cast-menu > :not(hr):hover {
-  background-color: #eee;
+  background-color: #555;
+  color: #fff;
 }

ui/file_manager/video_player/js/video_player.js

@@ -252,6 +252,10 @@ VideoPlayer.prototype.prepare = function(videos) {
   else
     videoPlayerElement.removeAttribute('multiple');
 
+  document.querySelector('#cast-menu').setAttribute(
+      'playon-text',
+      loadTimeData.getString('VIDEO_PLAYER_PLAY_ON'));
+
   document.addEventListener('keydown', reloadVideo);
   document.addEventListener('click', reloadVideo);
 };