Implementing full screen mode for video player in Chrome OS File Browser.

BUG=chromium-os:23978
TEST=

Review URL: https://chromiumcodereview.appspot.com/9298009

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@119668 0039d316-1c4b-4281-b951-d872f2087c98

6 files changed, 34 insertions, 16 deletions

diff --git a/chrome/browser/resources/file_manager/js/file_manager.js b/chrome/browser/resources/file_manager/js/file_manager.js
index f335cda..bbbf127 100644
--- a/chrome/browser/resources/file_manager/js/file_manager.js
+++ b/chrome/browser/resources/file_manager/js/file_manager.js
@@ -2257,6 +2257,7 @@ FileManager.prototype = {
     var galleryFrame = this.document_.createElement('iframe');
     galleryFrame.className = 'overlay-pane';
     galleryFrame.scrolling = 'no';
+    galleryFrame.setAttribute('webkitallowfullscreen', true);
 
     var selectedUrl;
     if (urls.length == 1) {
diff --git a/chrome/browser/resources/file_manager/js/image_editor/gallery.css b/chrome/browser/resources/file_manager/js/image_editor/gallery.css
index 4c78f29..b4f4444 100644
--- a/chrome/browser/resources/file_manager/js/image_editor/gallery.css
+++ b/chrome/browser/resources/file_manager/js/image_editor/gallery.css
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2011 The Chromium Authors. All rights reserved.
+ * Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
@@ -14,8 +14,10 @@ body {
 .gallery {
   background: black;
   position: absolute;
-  width: 100%;
-  height: 100%;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
   overflow: hidden;
 }
 
diff --git a/chrome/browser/resources/file_manager/js/image_editor/gallery.js b/chrome/browser/resources/file_manager/js/image_editor/gallery.js
index e6ede82..1b37be6 100644
--- a/chrome/browser/resources/file_manager/js/image_editor/gallery.js
+++ b/chrome/browser/resources/file_manager/js/image_editor/gallery.js
@@ -134,8 +134,8 @@ Gallery.prototype.initDom_ = function(shareActions) {
   this.mediaToolbar_.className = 'media-controls';
   this.toolbar_.appendChild(this.mediaToolbar_);
 
-  this.mediaControls_ =
-      new MediaControls(this.videoElement_, this.mediaToolbar_);
+  this.mediaControls_ = new MediaControls(this.videoElement_,
+      this.mediaToolbar_, this.toggleFullscreen_.bind(this));
 
   this.arrowBox_ = this.document_.createElement('div');
   this.arrowBox_.className = 'arrow-box';
@@ -379,7 +379,22 @@ Gallery.prototype.isRenaming_ = function() {
   return this.container_.hasAttribute('renaming');
 };
 
+Gallery.prototype.toggleFullscreen_ = function() {
+  if (this.document_.webkitIsFullScreen) {
+    this.document_.webkitCancelFullScreen();
+  } else {
+    this.document_.body.webkitRequestFullScreen();
+  }
+};
+
 Gallery.prototype.onClose_ = function() {
+  if (this.document_.webkitIsFullScreen) {
+    // Closing the Gallery iframe while in full screen will crash the tab.
+    this.document_.addEventListener(
+        'webkitfullscreenchange', this.onClose_.bind(this));
+    this.document_.webkitCancelFullScreen();
+    return;
+  }
   // TODO: handle write errors gracefully (suggest retry or saving elsewhere).
   this.saveChanges_(this.closeCallback_);
 };
diff --git a/chrome/browser/resources/file_manager/js/image_editor/gallery_demo.html b/chrome/browser/resources/file_manager/js/image_editor/gallery_demo.html
index 3ee2069..380a3c1 100644
--- a/chrome/browser/resources/file_manager/js/image_editor/gallery_demo.html
+++ b/chrome/browser/resources/file_manager/js/image_editor/gallery_demo.html
@@ -53,6 +53,7 @@
   <iframe class="gallery-frame"
           scrolling="no"
           src="gallery.html"
+          webkitallowfullscreen
           onload="loadGallery()"/>
   </iframe>
 
diff --git a/chrome/browser/resources/file_manager/js/image_editor/media_controls.css b/chrome/browser/resources/file_manager/js/image_editor/media_controls.css
index 0cb4273..8b11b01 100644
--- a/chrome/browser/resources/file_manager/js/image_editor/media_controls.css
+++ b/chrome/browser/resources/file_manager/js/image_editor/media_controls.css
@@ -202,7 +202,7 @@
   background-position: 4px 4px;
 }
 
-.media-controls .fullscreen.on {
+body:-webkit-full-screen .media-controls .fullscreen {
   background-image: url(../../images/mediaplayer_full_screen_exit.png);
   background-position: 4px 4px;
 }
diff --git a/chrome/browser/resources/file_manager/js/image_editor/media_controls.js b/chrome/browser/resources/file_manager/js/image_editor/media_controls.js
index 6140665..e3bc0f2 100644
--- a/chrome/browser/resources/file_manager/js/image_editor/media_controls.js
+++ b/chrome/browser/resources/file_manager/js/image_editor/media_controls.js
@@ -10,14 +10,15 @@
 /**
  * @param {HTMLMediaElement} mediaElement The media element to control.
  * @param {HTMLElement} containerElement The container for the controls.
+ * @param {function} fullScreenToggle Function to toggle the fullscreen mode.
  * @constructor
  */
-function MediaControls(mediaElement, containerElement) {
+function MediaControls(mediaElement, containerElement, fullScreenToggle) {
   this.media_ = mediaElement;
   this.container_ = containerElement;
   this.document_ = this.container_.ownerDocument;
 
-  this.setupPlaybackControls_();
+  this.setupPlaybackControls_(fullScreenToggle);
 
   this.setupMediaEvents_();
 }
@@ -97,8 +98,10 @@ MediaControls.PROGRESS_RANGE = 1000;
 
 /**
  * Create playback controls in DOM.
+ *
+ * @param {function} fullScreenToggle Function to toggle the fullscreen mode.
  */
-MediaControls.prototype.setupPlaybackControls_ = function() {
+MediaControls.prototype.setupPlaybackControls_ = function(fullScreenToggle) {
   this.playButton_ = this.createButton_(
       'play', this.onPlayButtonClick_.bind(this));
 
@@ -146,8 +149,9 @@ MediaControls.prototype.setupPlaybackControls_ = function() {
 
   this.volume_.setValue(this.media_.volume);
 
-  this.fullscreenButton_ = this.createButton_(
-      'fullscreen', this.onFullscreenButtonClick_.bind(this));
+  if (fullScreenToggle) {
+    this.fullscreenButton_ = this.createButton_('fullscreen', fullScreenToggle);
+  }
 };
 
 MediaControls.prototype.displayProgress_ = function(current, duration) {
@@ -278,11 +282,6 @@ MediaControls.prototype.onVolumeMouseDown_ = function () {
   }
 };
 
-MediaControls.prototype.onFullscreenButtonClick_ = function() {
-  this.fullscreenButton_.classList.toggle('on');
-  // TODO: invoke the actual full screen mode
-};
-
 /**
  * Attach media event handlers.
  */