<webview>: Implement fullscreen permission for html5 element.requestFullscreen()

We do it in two stages, first a DOM element requests fullscreen inside <webview>,
this fires a permissionrequest to the embedder of <webview> to decide
whether to allow/deny the request. The element goes fullscreen within
the <webview>'s bounds at this point.
The embedder can:
a) allow the request: in this case we perform the second stage, where the
<webview> element in the embedder enters fullscreen (provided that
the embedder has permission to enter fullscreen).
b) deny the request: in this case, <webview> exits fullscreen mode.

Note that b) will cause a flicker and blink interface is required to avoid that.
That is tracked on http://crbug.com/466854.

BUG=141198
Test=
Load a chrome app with a <webview> in it, make the <webview> point to
some site that has html5 fullscreen request, e.g. youtube.com.

Add an event listener in the chrome app so that it allows <webview> fullscreen, e.g.

<webview>.addEventListener('permissionrequest', function(e) {
  if (e.permission === 'fullscreen') e.request.allow();
});

Now perform necessary action to request fullscreen from the <webview>, for the
youtube case, this would be fullscreening the video player.

Check that the element enters fullscreen mode.

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

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

3 files changed, 54 insertions, 3 deletions

diff --git a/extensions/renderer/resources/guest_view/web_view/web_view.js b/extensions/renderer/resources/guest_view/web_view/web_view.js
index a69736b..c061c83 100644
--- a/extensions/renderer/resources/guest_view/web_view/web_view.js
+++ b/extensions/renderer/resources/guest_view/web_view/web_view.js
@@ -9,6 +9,7 @@
 var DocumentNatives = requireNative('document_natives');
 var GuestView = require('guestView').GuestView;
 var GuestViewContainer = require('guestViewContainer').GuestViewContainer;
+var GuestViewInternalNatives = requireNative('guest_view_internal');
 var WebViewConstants = require('webViewConstants').WebViewConstants;
 var WebViewEvents = require('webViewEvents').WebViewEvents;
 var WebViewInternal = require('webViewInternal').WebViewInternal;
@@ -216,6 +217,13 @@ WebViewImpl.prototype.executeCode = function(func, args) {
   return true;
 }
 
+// Requests the <webview> element wihtin the embedder to enter fullscreen.
+WebViewImpl.prototype.makeElementFullscreen = function() {
+  GuestViewInternalNatives.RunWithGesture(function() {
+    this.element.webkitRequestFullScreen();
+  }.bind(this));
+};
+
 // Implemented when the ChromeWebView API is available.
 WebViewImpl.prototype.maybeSetupContextMenus = function() {};
 
diff --git a/extensions/renderer/resources/guest_view/web_view/web_view_action_requests.js b/extensions/renderer/resources/guest_view/web_view/web_view_action_requests.js
index 21cc7b1..211cdba 100644
--- a/extensions/renderer/resources/guest_view/web_view/web_view_action_requests.js
+++ b/extensions/renderer/resources/guest_view/web_view/web_view_action_requests.js
@@ -14,7 +14,8 @@ var PERMISSION_TYPES = ['media',
                         'pointerLock',
                         'download',
                         'loadplugin',
-                        'filesystem'];
+                        'filesystem',
+                        'fullscreen'];
 
 // -----------------------------------------------------------------------------
 // WebViewActionRequest object.
@@ -250,11 +251,38 @@ PermissionRequest.prototype.WARNING_MSG_REQUEST_BLOCKED =
 
 // -----------------------------------------------------------------------------
 
+// FullscreenPermissionRequest object.
+
+// Represents a fullscreen permission request.
+function FullscreenPermissionRequest(webViewImpl, event, webViewEvent) {
+  PermissionRequest.call(this, webViewImpl, event, webViewEvent);
+}
+
+FullscreenPermissionRequest.prototype.__proto__ = PermissionRequest.prototype;
+
+FullscreenPermissionRequest.prototype.getInterfaceObject = function() {
+  return {
+    allow: function() {
+      this.validateCall();
+      WebViewInternal.setPermission(
+          this.guestInstanceId, this.requestId, 'allow');
+      // Now make the <webview> element go fullscreen.
+      this.webViewImpl.makeElementFullscreen();
+    }.bind(this),
+    deny: function() {
+      this.validateCall();
+      WebViewInternal.setPermission(
+          this.guestInstanceId, this.requestId, 'deny');
+    }.bind(this)
+  };
+};
+
 var WebViewActionRequests = {
   WebViewActionRequest: WebViewActionRequest,
   Dialog: Dialog,
   NewWindow: NewWindow,
-  PermissionRequest: PermissionRequest
+  PermissionRequest: PermissionRequest,
+  FullscreenPermissionRequest: FullscreenPermissionRequest
 };
 
 exports.WebViewActionRequests = WebViewActionRequests;
diff --git a/extensions/renderer/resources/guest_view/web_view/web_view_events.js b/extensions/renderer/resources/guest_view/web_view/web_view_events.js
index bae210e..22cea250 100644
--- a/extensions/renderer/resources/guest_view/web_view/web_view_events.js
+++ b/extensions/renderer/resources/guest_view/web_view/web_view_events.js
@@ -55,6 +55,12 @@ WebViewEvents.EVENTS = {
     evt: CreateEvent('webViewInternal.onExit'),
     fields: ['processId', 'reason']
   },
+  'exitfullscreen': {
+    evt: CreateEvent('webViewInternal.onExitFullscreen'),
+    fields: ['url'],
+    handler: 'handleFullscreenExitEvent',
+    internal: true
+  },
   'findupdate': {
     evt: CreateEvent('webViewInternal.onFindReply'),
     fields: [
@@ -219,6 +225,10 @@ WebViewEvents.prototype.handleFrameNameChangedEvent = function(event) {
   this.view.onFrameNameChanged(event.name);
 };
 
+WebViewEvents.prototype.handleFullscreenExitEvent = function(event, eventName) {
+  document.webkitCancelFullScreen();
+};
+
 WebViewEvents.prototype.handleLoadAbortEvent = function(event, eventName) {
   var showWarningMessage = function(reason) {
     var WARNING_MSG_LOAD_ABORTED = '<webview>: ' +
@@ -249,7 +259,12 @@ WebViewEvents.prototype.handleNewWindowEvent = function(event, eventName) {
 
 WebViewEvents.prototype.handlePermissionEvent = function(event, eventName) {
   var webViewEvent = this.makeDomEvent(event, eventName);
-  new WebViewActionRequests.PermissionRequest(this.view, event, webViewEvent);
+  if (event.permission === 'fullscreen') {
+    new WebViewActionRequests.FullscreenPermissionRequest(
+        this.view, event, webViewEvent);
+  } else {
+    new WebViewActionRequests.PermissionRequest(this.view, event, webViewEvent);
+  }
 };
 
 WebViewEvents.prototype.handleSizeChangedEvent = function(event, eventName) {