VideoPlayer: Show fullscreen-exit button when the player window is fullscreened.

BUG=488229
TEST=manually

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

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

4 files changed, 24 insertions, 0 deletions

diff --git a/ui/file_manager/video_player/css/media_controls.css b/ui/file_manager/video_player/css/media_controls.css
index 364a254..f43dfba 100644
--- a/ui/file_manager/video_player/css/media_controls.css
+++ b/ui/file_manager/video_player/css/media_controls.css
@@ -163,6 +163,12 @@ paper-slider.volume {
     url(../images/media/2x/media_fullscreen.png) 2x);
 }
 
+#video-player[fullscreen] .media-button.fullscreen {
+  background-image: -webkit-image-set(
+    url(../images/media/media_fullscreen_exit.png) 1x,
+    url(../images/media/2x/media_fullscreen_exit.png) 2x);
+}
+
 .playback-state-icon {
   -webkit-animation: none;
   background-position: center center;
diff --git a/ui/file_manager/video_player/images/media/2x/media_fullscreen_exit.png b/ui/file_manager/video_player/images/media/2x/media_fullscreen_exit.png
new file mode 100644
index 0000000..3960331
--- /dev/null
+++ b/ui/file_manager/video_player/images/media/2x/media_fullscreen_exit.png
diff --git a/ui/file_manager/video_player/images/media/media_fullscreen_exit.png b/ui/file_manager/video_player/images/media/media_fullscreen_exit.png
new file mode 100644
index 0000000..bb1c1ce
--- /dev/null
+++ b/ui/file_manager/video_player/images/media/media_fullscreen_exit.png
diff --git a/ui/file_manager/video_player/js/video_player.js b/ui/file_manager/video_player/js/video_player.js
index a9c3913..eaa6f31 100644
--- a/ui/file_manager/video_player/js/video_player.js
+++ b/ui/file_manager/video_player/js/video_player.js
@@ -26,6 +26,11 @@ function FullWindowVideoControls(
 
   this.updateStyle();
   window.addEventListener('resize', this.updateStyle.wrap(this));
+  var currentWindow = chrome.app.window.current();
+  currentWindow.onFullscreened.addListener(
+      this.onFullScreenChanged_.bind(this, true));
+  currentWindow.onRestored.addListener(
+      this.onFullScreenChanged_.bind(this, false));
   document.addEventListener('keydown', function(e) {
     switch (util.getKeyModifiers(e) + e.keyIdentifier) {
       // Handle debug shortcut keys.
@@ -163,6 +168,19 @@ FullWindowVideoControls.prototype.toggleFullScreen_ = function() {
 };
 
 /**
+ * Updates video control when the window is fullscreened or restored.
+ * @param {boolean} fullscreen True if the window gets fullscreened.
+ * @private
+ */
+FullWindowVideoControls.prototype.onFullScreenChanged_ = function(fullscreen) {
+  if (fullscreen) {
+    this.playerContainer_.setAttribute('fullscreen', '');
+  } else {
+    this.playerContainer_.removeAttribute('fullscreen');
+  }
+};
+
+/**
  * Media completion handler.
  */
 FullWindowVideoControls.prototype.onMediaComplete = function() {