Move the casting icon to media controls.

This patch moves the icon from the header to media controls.

TEST=Tested manually.
BUG=415426

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

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

ui/file_manager/video_player/css/header.css

@@ -21,9 +21,9 @@
   color: white;
   flex-grow: 1;
   font-size: 16px;
-  height: 16px;
+  line-height: 45px;
   overflow: hidden;
-  padding: 15px;
+  padding-left: 15px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -69,38 +69,6 @@
   width: 32px;
 }
 
-#video-player > .header > button.cast-button {
-  background-image: -webkit-image-set(
-      url(../images/100/cast_off.png) 1x,
-      url(../images/200/cast_off.png) 2x);
-}
-
-#video-player[casting] > .header > button.cast-button {
-  background-image: -webkit-image-set(
-      url(../images/100/cast_on.png) 1x,
-      url(../images/200/cast_on.png) 2x);
-}
-
-#video-player > .header > button.cast-button:hover {
-  background-image: -webkit-image-set(
-      url(../images/100/cast_off_hover.png) 1x,
-      url(../images/200/cast_off_hover.png) 2x);
-}
-
-#video-player[casting] > .header > button.cast-button:hover {
-  background-image: -webkit-image-set(
-      url(../images/100/cast_on_hover.png) 1x,
-      url(../images/200/cast_on_hover.png) 2x);
-}
-
-#video-player > .header > button.cast-button {
-  display: none;
-}
-
-#video-player[cast-available][castable] > .header > button.cast-button {
-  display: block;
-}
-
 #video-player > .header > button.minimize-button {
   background-image: -webkit-image-set(
       url(chrome://resources/images/apps/topbar_button_minimize.png) 1x,

ui/file_manager/video_player/css/media_controls.css

@@ -4,11 +4,13 @@
 
 .media-button {
   height: 28px;
+  margin: 0 5px;
   position: relative;
   width: 26px;
 }
 
 .media-button > div {
+  background: center center;
   height: 100%;
   opacity: 0;
   pointer-events: none;
@@ -186,11 +188,6 @@
 
 /* Play/pause button. */
 
-.media-button.play {
-  margin-left: -7px;
-  margin-right: -7px;
-}
-
 .media-button.play > .default.normal {
   background-image: -webkit-image-set(
     url('../images/media/media_play.png') 1x,
@@ -304,7 +301,7 @@
 .time-controls > .time {
   cursor: default;
   height: 100%;
-  margin-left: 15px;
+  margin-left: 10px;
   position: relative;
 }
 
@@ -342,7 +339,6 @@
 /* Sound button */
 
 .media-button.sound {
-  margin-left: -4px;
   width: 31px;
 }
 
@@ -432,8 +428,6 @@
 
 .custom-slider.volume {
   height: 100%;
-  margin-left: -4px;
-  margin-right: -4px;
   position: relative;
   width: 60px;
 }
@@ -478,24 +472,59 @@
   font-size: 15px;
   height: 30px;
   opacity: 0.8;
-  padding-left: 15px;
-  padding-right: 15px;
   pointer-events: auto;
 }
 
-.video-controls .time-controls,
-.video-controls .volume-controls {
-  margin-left: 15px;
+/* Cast button. */
+
+.media-button.cast > .default.normal {
+  background-image: -webkit-image-set(
+    url('../images/media/media_chromecast.png') 1x,
+    url('../images/media/2x/media_chromecast.png') 2x);
 }
 
-/* Fullscreen button. */
-/* There is no final decision whether we need a separate icon when toggled. */
+.media-button.cast > .default.hover {
+  background-image: -webkit-image-set(
+    url('../images/media/media_chromecast_hover.png') 1x,
+    url('../images/media/2x/media_chromecast_hover.png') 2x);
+}
+
+.media-button.cast > .default.active {
+  background-image: -webkit-image-set(
+    url('../images/media/media_chromecast_down.png') 1x,
+    url('../images/media/2x/media_chromecast_down.png') 2x);
+}
+
+#video-player[casting] .media-button.cast > .default.normal {
+  background-image: -webkit-image-set(
+    url('../images/media/media_chromecast_casting.png') 1x,
+    url('../images/media/2x/media_chromecast_casting.png') 2x);
+}
 
-.media-button.fullscreen {
-  margin-left: 9px;  /* 15px visible margin - 6px whitespace in the icon. */
-  margin-right: -6px;
+#video-player[casting] .media-button.cast > .default.hover {
+  background-image: -webkit-image-set(
+    url('../images/media/media_chromecast_casting_hover.png') 1x,
+    url('../images/media/2x/media_chromecast_casting_hover.png') 2x);
+}
+
+#video-player[casting] .media-button.cast > .default.active {
+  background-image: -webkit-image-set(
+    url('../images/media/media_chromecast_casting_down.png') 1x,
+    url('../images/media/2x/media_chromecast_casting_down.png') 2x);
+}
+
+.media-button.cast {
+  display: none;
 }
 
+#video-player[cast-available][castable] .media-button.cast {
+  display: block;
+}
+
+
+/* Fullscreen button. */
+/* There is no final decision whether we need a separate icon when toggled. */
+
 .media-button.fullscreen > .normal {
   background-image: -webkit-image-set(
     url('../images/media/media_fullscreen.png') 1x,

ui/file_manager/video_player/js/media_controls.js

@@ -972,6 +972,13 @@ function VideoControls(containerElement, onMediaError, stringFunction,
   this.initTimeControls(true /* show seek mark */);
   this.initVolumeControls();
 
+  // Create the cast button.
+  this.castButton_ = this.createButton('cast menubutton');
+  this.castButton_.setAttribute('menu', '#cast-menu');
+  this.castButton_.setAttribute(
+      'label', this.stringFunction_('VIDEO_PLAYER_PLAY_ON'));
+  cr.ui.decorate(this.castButton_, cr.ui.MenuButton);
+
   if (opt_fullScreenToggle) {
     this.fullscreenButton_ =
         this.createButton('fullscreen', opt_fullScreenToggle);

ui/file_manager/video_player/js/video_player.js

@@ -217,15 +217,6 @@ VideoPlayer.prototype.prepare = function(videos) {
       }.wrap(null));
   closeButton.addEventListener('mousedown', preventDefault);
 
-  var castButton = document.querySelector('.cast-button');
-  cr.ui.decorate(castButton, cr.ui.MenuButton);
-  castButton.addEventListener(
-      'click',
-      function(event) {
-        event.stopPropagation();
-      }.wrap(null));
-  castButton.addEventListener('mousedown', preventDefault);
-
   var menu = document.querySelector('#cast-menu');
   cr.ui.decorate(menu, cr.ui.Menu);
 

ui/file_manager/video_player/video_player.html

@@ -37,9 +37,6 @@
     </div>
     <div id="header-container" class="header tool">
       <div id="title">&nbsp;</div>
-      <button class="cast-button menubutton hidden tool"
-              menu="#cast-menu"
-              i18n-values="aria-label:VIDEO_PLAYER_PLAY_ON"></button>
       <button class="minimize-button tool" tabindex="-1"></button>
       <button class="maximize-button tool" tabindex="-1"></button>
       <button class="close-button tool" tabindex="-1"></button>