Added the onResize and onContentResize events to GuestViewEvents.

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

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

3 files changed, 47 insertions, 10 deletions

diff --git a/extensions/renderer/resources/guest_view/guest_view.js b/extensions/renderer/resources/guest_view/guest_view.js
index 8ff4f3c..616cc3f 100644
--- a/extensions/renderer/resources/guest_view/guest_view.js
+++ b/extensions/renderer/resources/guest_view/guest_view.js
@@ -5,16 +5,13 @@
 // This module implements a wrapper for a guestview that manages its
 // creation, attaching, and destruction.
 
+var CreateEvent = require('guestViewEvents').CreateEvent;
 var EventBindings = require('event_bindings');
 var GuestViewInternal =
     require('binding').Binding.create('guestViewInternal').generate();
 var GuestViewInternalNatives = requireNative('guest_view_internal');
 
 // Events.
-var CreateEvent = function(name) {
-  var eventOpts = {supportsListeners: true, supportsFilters: true};
-  return new EventBindings.Event(name, undefined, eventOpts);
-};
 var ResizeEvent = CreateEvent('guestViewInternal.onResize');
 
 // Possible states.
@@ -30,7 +27,7 @@ var ERROR_MSG_NOT_ATTACHED = 'The guest is not attached.';
 var ERROR_MSG_NOT_CREATED = 'The guest has not been created.';
 
 // Properties.
-var PROPERTY_ON_RESIZE = 'onResize';
+var PROPERTY_ON_RESIZE = 'onresize';
 
 // Contains and hides the internal implementation details of |GuestView|,
 // including maintaining its state and enforcing the proper usage of its API
@@ -55,7 +52,7 @@ function GuestViewImpl(guestView, viewType, guestInstanceId) {
 
 // Sets up the onResize property on the GuestView.
 GuestViewImpl.prototype.setupOnResize = function() {
-  Object.defineProperty(this.guestView, PROPERTY_ON_RESIZE, {
+  $Object.defineProperty(this.guestView, PROPERTY_ON_RESIZE, {
     get: function() {
       return this[PROPERTY_ON_RESIZE];
     }.bind(this),
@@ -69,7 +66,7 @@ GuestViewImpl.prototype.setupOnResize = function() {
     if (!this[PROPERTY_ON_RESIZE]) {
       return;
     }
-    this[PROPERTY_ON_RESIZE](e.oldWidth, e.oldHeight, e.newWidth, e.newHeight);
+    this[PROPERTY_ON_RESIZE](e);
   }.bind(this);
 };
 
diff --git a/extensions/renderer/resources/guest_view/guest_view_container.js b/extensions/renderer/resources/guest_view/guest_view_container.js
index 95bb1de..bf01222 100644
--- a/extensions/renderer/resources/guest_view/guest_view_container.js
+++ b/extensions/renderer/resources/guest_view/guest_view_container.js
@@ -14,10 +14,12 @@ function GuestViewContainer(element, viewType) {
   privates(element).internal = this;
   this.element = element;
   this.elementAttached = false;
-  this.guest = new GuestView(viewType);
   this.viewInstanceId = IdGenerator.GetNextId();
   this.viewType = viewType;
 
+  this.setupGuestProperty();
+  this.guest = new GuestView(viewType);
+
   privates(this).browserPluginElement = this.createBrowserPluginElement();
   this.setupFocusPropagation();
 
@@ -53,6 +55,32 @@ GuestViewContainer.registerElement =
     registerGuestViewElement(guestViewContainerType);
     window.removeEventListener(event.type, listener, useCapture);
   }, useCapture);
+    };
+
+// Create the 'guest' property to track new GuestViews and always listen for
+// their resizes.
+GuestViewContainer.prototype.setupGuestProperty = function() {
+  Object.defineProperty(this, 'guest', {
+    get: function() {
+      return privates(this).guest;
+    }.bind(this),
+    set: function(value) {
+      privates(this).guest = value;
+      if (!value) {
+        return;
+      }
+      privates(this).guest.onresize = function(e) {
+        // Dispatch the 'contentresize' event.
+        var contentResizeEvent = new Event('contentresize', { bubbles: true });
+        contentResizeEvent.oldWidth = e.oldWidth;
+        contentResizeEvent.oldHeight = e.oldHeight;
+        contentResizeEvent.newWidth = e.newWidth;
+        contentResizeEvent.newHeight = e.newHeight;
+        this.dispatchEvent(contentResizeEvent);
+      }.bind(this);
+    }.bind(this),
+    enumerable: true
+  });
 };
 
 GuestViewContainer.prototype.createBrowserPluginElement = function() {
@@ -114,10 +142,17 @@ GuestViewContainer.prototype.handleBrowserPluginAttributeMutation =
 
 GuestViewContainer.prototype.onElementResize = function(oldWidth, oldHeight,
                                                         newWidth, newHeight) {
+  // Dispatch the 'resize' event.
+  var resizeEvent = new Event('resize', { bubbles: true });
+  resizeEvent.oldWidth = oldWidth;
+  resizeEvent.oldHeight = oldHeight;
+  resizeEvent.newWidth = newWidth;
+  resizeEvent.newHeight = newHeight;
+  this.dispatchEvent(resizeEvent);
+
   if (!this.guest.getId())
     return;
-  this.guest.setSize(
-      {normal: {width: newWidth, height: newHeight}});
+  this.guest.setSize({normal: {width: newWidth, height: newHeight}});
 };
 
 GuestViewContainer.prototype.buildParams = function() {
diff --git a/extensions/renderer/resources/guest_view/guest_view_events.js b/extensions/renderer/resources/guest_view/guest_view_events.js
index 415d0c4..caed8c8 100644
--- a/extensions/renderer/resources/guest_view/guest_view_events.js
+++ b/extensions/renderer/resources/guest_view/guest_view_events.js
@@ -15,6 +15,11 @@ function GuestViewEvents(view) {
   this.view = view;
   this.on = {};
 
+  // |setupEventProperty| is normally called automatically, but these events are
+  // are registered here because they are dispatched from GuestViewContainer
+  // instead of in response to extension events.
+  this.setupEventProperty('contentresize');
+  this.setupEventProperty('resize');
   this.setupEvents();
 }