Video Player: Show a checkmark on the currently playing device in cast menu

This patch adds a checkmark which is at the left of the currenly playing device on the cast menu.

BUG=none
TEST=manually tested

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

Cr-Commit-Position: refs/heads/master@{#288325}
git-svn-id: svn://svn.chromium.org/chrome/trunk/src@288325 0039d316-1c4b-4281-b951-d872f2087c98

ui/file_manager/video_player/css/cast_menu.css

@@ -16,12 +16,20 @@
 }
 
 .cast-menu > :not(hr) {
+  -webkit-padding-end: 14px;
+  -webkit-padding-start: 19px;
   background-color: #fff;
   font-size: 12px;
-  padding: 5px 10px; /* top&bottom, left&right */
+  padding-bottom: 5px;
+  padding-top: 5px;
   text-overflow: ellipsis;
 }
 
+.cast-menu > [checked]:not(hr) {
+  /* A checkmark has 19 px width. */
+  -webkit-padding-start: 0;
+}
+
 .cast-menu > :not(hr):hover {
   background-color: #eee;
 }

ui/file_manager/video_player/js/video_player.js

@@ -484,6 +484,7 @@ VideoPlayer.prototype.onCastSelected_ = function(cast) {
     return;
 
   this.currentCast_ = cast || null;
+  this.updateCheckOnCastMenu_();
   this.reloadCurrentVideo();
 };
 
@@ -516,19 +517,47 @@ VideoPlayer.prototype.setCastList = function(casts) {
 
   var item = new cr.ui.MenuItem();
   item.label = loadTimeData.getString('VIDEO_PLAYER_PLAY_THIS_COMPUTER');
+  item.castLabel = '';
   item.addEventListener('activate', this.onCastSelected_.wrap(this, null));
   menu.appendChild(item);
 
   for (var i = 0; i < casts.length; i++) {
     var item = new cr.ui.MenuItem();
     item.label = casts[i].friendlyName;
+    item.castLabel = casts[i].label;
     item.addEventListener('activate',
                           this.onCastSelected_.wrap(this, casts[i]));
     menu.appendChild(item);
   }
+  this.updateCheckOnCastMenu_();
   button.classList.remove('hidden');
 };
 
+/**
+ * Updates the check status of the cast menu items.
+ * @private
+ */
+VideoPlayer.prototype.updateCheckOnCastMenu_ = function() {
+  var menu = document.querySelector('#cast-menu');
+  var menuItems = menu.menuItems;
+  for (var i = 0; i < menuItems.length; i++) {
+    var item = menuItems[i];
+    if (this.currentCast_ === null) {
+      // Playing on this computer.
+      if (item.castLabel === '')
+        item.checked = true;
+      else
+        item.checked = false;
+    } else {
+      // Playing on cast device.
+      if (item.castLabel === this.currentCast_.label)
+        item.checked = true;
+      else
+        item.checked = false;
+    }
+  }
+};
+
 /**
  * Called when the current cast is disappear from the cast list.
  * @private