Browser Plugin: Remove dependency on NPAPI

extensions/renderer/resources/web_view.js

 // 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.
 
 // This module implements Webview (<webview>) as a custom element that wraps a
 // BrowserPlugin object element. The object element is hidden within
 // the shadow DOM of the Webview element.
 
 var DocumentNatives = requireNative('document_natives');
 var GuestViewInternal =
@@ skipping 11 matching lines @@
 var WEB_VIEW_ATTRIBUTE_MINHEIGHT = 'minheight';
 var WEB_VIEW_ATTRIBUTE_MINWIDTH = 'minwidth';
 var AUTO_SIZE_ATTRIBUTES = [
   WEB_VIEW_ATTRIBUTE_AUTOSIZE,
   WEB_VIEW_ATTRIBUTE_MAXHEIGHT,
   WEB_VIEW_ATTRIBUTE_MAXWIDTH,
   WEB_VIEW_ATTRIBUTE_MINHEIGHT,
   WEB_VIEW_ATTRIBUTE_MINWIDTH
 ];
 
+var WEB_VIEW_ATTRIBUTE_ALLOWTRANSPARENCY = "allowtransparency";
 var WEB_VIEW_ATTRIBUTE_PARTITION = 'partition';
 
 var ERROR_MSG_ALREADY_NAVIGATED =
     'The object has already navigated, so its partition cannot be changed.';
 var ERROR_MSG_INVALID_PARTITION_ATTRIBUTE = 'Invalid partition attribute.';
 
-/** @type {Array.<string>} */
-var WEB_VIEW_ATTRIBUTES = [
-    'allowtransparency',
-];
-
 /** @class representing state of storage partition. */
 function Partition() {
   this.validPartitionId = true;
   this.persistStorage = false;
   this.storagePartitionId = '';
 };
 
 Partition.prototype.toAttribute = function() {
   if (!this.validPartitionId) {
     return '';
@@ skipping 68 matching lines @@
 }
 
 /**
  * @private
  */
 WebViewInternal.prototype.createBrowserPluginNode = function() {
   // We create BrowserPlugin as a custom element in order to observe changes
   // to attributes synchronously.
   var browserPluginNode = new WebViewInternal.BrowserPlugin();
   privates(browserPluginNode).internal = this;
-
-  $Array.forEach(WEB_VIEW_ATTRIBUTES, function(attributeName) {
-    // Only copy attributes that have been assigned values, rather than copying
-    // a series of undefined attributes to BrowserPlugin.
-    if (this.webviewNode.hasAttribute(attributeName)) {
-      browserPluginNode.setAttribute(
-        attributeName, this.webviewNode.getAttribute(attributeName));
-    } else if (this.webviewNode[attributeName]){
-      // Reading property using has/getAttribute does not work on
-      // document.DOMContentLoaded event (but works on
-      // window.DOMContentLoaded event).
-      // So copy from property if copying from attribute fails.
-      browserPluginNode.setAttribute(
-        attributeName, this.webviewNode[attributeName]);
-    }
-  }, this);
-
   return browserPluginNode;
 };
 
 WebViewInternal.prototype.getGuestInstanceId = function() {
   return this.guestInstanceId;
 };
 
 /**
  * Resets some state upon reattaching <webview> element to the DOM.
  */
@@ skipping 30 matching lines @@
   if (!this.webviewNode.hasAttribute('tabIndex')) {
     // <webview> needs a tabIndex in order to be focusable.
     // TODO(fsamuel): It would be nice to avoid exposing a tabIndex attribute
     // to allow <webview> to be focusable.
     // See http://crbug.com/231664.
     this.webviewNode.setAttribute('tabIndex', -1);
   }
   var self = this;
   this.webviewNode.addEventListener('focus', function(e) {
     // Focus the BrowserPlugin when the <webview> takes focus.
-    self.browserPluginNode.focus();
-  });
+    this.browserPluginNode.focus();
+  }.bind(this));
   this.webviewNode.addEventListener('blur', function(e) {
     // Blur the BrowserPlugin when the <webview> loses focus.
-    self.browserPluginNode.blur();
-  });
+    this.browserPluginNode.blur();
+  }.bind(this));
 };
 
 /**
  * @private
  */
 WebViewInternal.prototype.back = function() {
   return this.go(-1);
 };
 
 /**
@@ skipping 108 matching lines @@
  * @private
  */
 WebViewInternal.prototype.insertCSS = function(var_args) {
   this.validateExecuteCodeCall();
   var args = $Array.concat([this.guestInstanceId, this.src],
                            $Array.slice(arguments));
   $Function.apply(WebView.insertCSS, null, args);
 };
 
 WebViewInternal.prototype.setupAutoSizeProperties = function() {
-  var self = this;
   $Array.forEach(AUTO_SIZE_ATTRIBUTES, function(attributeName) {
     this[attributeName] = this.webviewNode.getAttribute(attributeName);
     Object.defineProperty(this.webviewNode, attributeName, {
       get: function() {
-        return self[attributeName];
-      },
+        return this[attributeName];
+      }.bind(this),
       set: function(value) {
-        self.webviewNode.setAttribute(attributeName, value);
-      },
+        this.webviewNode.setAttribute(attributeName, value);
+      }.bind(this),
       enumerable: true
     });
-  }, this);
+  }.bind(this), this);
 };
 
 /**
  * @private
  */
 WebViewInternal.prototype.setupWebviewNodeProperties = function() {
   var ERROR_MSG_CONTENTWINDOW_NOT_AVAILABLE = '<webview>: ' +
     'contentWindow is not available at this time. It will become available ' +
         'when the page has finished loading.';
 
   this.setupAutoSizeProperties();
-  var self = this;
-  var browserPluginNode = this.browserPluginNode;
-  // Expose getters and setters for the attributes.
-  $Array.forEach(WEB_VIEW_ATTRIBUTES, function(attributeName) {
-    Object.defineProperty(this.webviewNode, attributeName, {
-      get: function() {
-        if (browserPluginNode.hasOwnProperty(attributeName)) {
-          return browserPluginNode[attributeName];
-        } else {
-          return browserPluginNode.getAttribute(attributeName);
-        }
-      },
-      set: function(value) {
-        if (browserPluginNode.hasOwnProperty(attributeName)) {
-          // Give the BrowserPlugin first stab at the attribute so that it can
-          // throw an exception if there is a problem. This attribute will then
-          // be propagated back to the <webview>.
-          browserPluginNode[attributeName] = value;
-        } else {
-          browserPluginNode.setAttribute(attributeName, value);
-        }
-      },
-      enumerable: true
-    });
-  }, this);
 
-  // <webview> src does not quite behave the same as BrowserPlugin src, and so
-  // we don't simply keep the two in sync.
-  this.src = this.webviewNode.getAttribute('src');
-  Object.defineProperty(this.webviewNode, 'src', {
+  Object.defineProperty(this.webviewNode,
+                        WEB_VIEW_ATTRIBUTE_ALLOWTRANSPARENCY, {
     get: function() {
-      return self.src;
-    },
+      return this.allowtransparency;
+    }.bind(this),
     set: function(value) {
-      self.webviewNode.setAttribute('src', value);
-    },
-    // No setter.
-    enumerable: true
-  });
-
-  Object.defineProperty(this.webviewNode, 'name', {
-    get: function() {
-      return self.name;
-    },
-    set: function(value) {
-      self.webviewNode.setAttribute('name', value);
-    },
-    enumerable: true
-  });
-
-  Object.defineProperty(this.webviewNode, 'partition', {
-    get: function() {
-      return self.partition.toAttribute();
-    },
-    set: function(value) {
-      var result = self.partition.fromAttribute(value, self.hasNavigated());
-      if (result.error) {
-        throw result.error;
-      }
-      self.webviewNode.setAttribute('partition', value);
-    },
+      this.webviewNode.setAttribute(WEB_VIEW_ATTRIBUTE_ALLOWTRANSPARENCY,
+                                    value);
+    }.bind(this),
     enumerable: true
   });
 
   // We cannot use {writable: true} property descriptor because we want a
   // dynamic getter value.
   Object.defineProperty(this.webviewNode, 'contentWindow', {
     get: function() {
       if (this.contentWindow) {
         return this.contentWindow;
       }
       window.console.error(ERROR_MSG_CONTENTWINDOW_NOT_AVAILABLE);
     }.bind(this),
     // No setter.
     enumerable: true
+  });
+
+  Object.defineProperty(this.webviewNode, 'name', {
+    get: function() {
+      return this.name;
+    }.bind(this),
+    set: function(value) {
+      this.webviewNode.setAttribute('name', value);
+    }.bind(this),
+    enumerable: true
+  });
+
+  Object.defineProperty(this.webviewNode, 'partition', {
+    get: function() {
+      return this.partition.toAttribute();
+    }.bind(this),
+    set: function(value) {
+      var result = this.partition.fromAttribute(value, this.hasNavigated());
+      if (result.error) {
+        throw result.error;
+      }
+      this.webviewNode.setAttribute('partition', value);
+    }.bind(this),
+    enumerable: true
+  });
+
+  this.src = this.webviewNode.getAttribute('src');
+  Object.defineProperty(this.webviewNode, 'src', {
+    get: function() {
+      return this.src;
+    }.bind(this),
+    set: function(value) {
+      this.webviewNode.setAttribute('src', value);
+    }.bind(this),
+    // No setter.
+    enumerable: true
   });
 };
 
 /**
  * @private
  */
 WebViewInternal.prototype.setupWebviewNodeAttributes = function() {
   this.setupWebViewSrcAttributeMutationObserver();
 };
 
@@ skipping 47 matching lines @@
       'min': {
         'width': parseInt(this.minwidth || 0),
         'height': parseInt(this.minheight || 0)
       },
       'max': {
         'width': parseInt(this.maxwidth || 0),
         'height': parseInt(this.maxheight || 0)
       }
     });
     return;
+  } else if (name == WEB_VIEW_ATTRIBUTE_ALLOWTRANSPARENCY) {
+    // We treat null attribute (attribute removed) and the empty string as
+    // one case.
+    oldValue = oldValue || '';
+    newValue = newValue || '';
+
+    if (oldValue === newValue) {
+      return;
+    }
+    this.allowtransparency = newValue != '';
+
+    if (!this.guestInstanceId) {
+      return;
+    }
+
+    WebView.setAllowTransparency(this.guestInstanceId, this.allowtransparency);
+    return;
   } else if (name == 'name') {
     // We treat null attribute (attribute removed) and the empty string as
     // one case.
     oldValue = oldValue || '';
     newValue = newValue || '';
 
     if (oldValue === newValue) {
       return;
     }
     this.name = newValue;
@@ skipping 28 matching lines @@
     var result = {};
     this.parseSrcAttribute(result);
 
     if (result.error) {
       throw result.error;
     }
   } else if (name == 'partition') {
     // Note that throwing error here won't synchronously propagate.
     this.partition.fromAttribute(newValue, this.hasNavigated());
   }
-
-  // No <webview> -> <object> mutation propagation for these attributes.
-  if (name == 'src' || name == 'partition') {
-    return;
-  }
-
-  if (this.browserPluginNode.hasOwnProperty(name)) {
-    this.browserPluginNode[name] = newValue;
-  } else {
-    this.browserPluginNode.setAttribute(name, newValue);
-  }
 };
 
 /**
  * @private
  */
 WebViewInternal.prototype.handleBrowserPluginAttributeMutation =
     function(name, oldValue, newValue) {
   if (name == 'internalinstanceid' && !oldValue && !!newValue) {
     this.browserPluginNode.removeAttribute('internalinstanceid');
     this.internalInstanceId = parseInt(newValue);
@@ skipping 14 matching lines @@
             params,
             function(w) {
               this.contentWindow = w;
             }.bind(this)
         );
       }.bind(this), 0);
     }
 
     return;
   }
-
-  // This observer monitors mutations to attributes of the BrowserPlugin and
-  // updates the <webview> attributes accordingly.
-  // |newValue| is null if the attribute |name| has been removed.
-  if (newValue != null) {
-    // Update the <webview> attribute to match the BrowserPlugin attribute.
-    // Note: Calling setAttribute on <webview> will trigger its mutation
-    // observer which will then propagate that attribute to BrowserPlugin. In
-    // cases where we permit assigning a BrowserPlugin attribute the same value
-    // again (such as navigation when crashed), this could end up in an infinite
-    // loop. Thus, we avoid this loop by only updating the <webview> attribute
-    // if the BrowserPlugin attributes differs from it.
-    if (newValue != this.webviewNode.getAttribute(name)) {
-      this.webviewNode.setAttribute(name, newValue);
-    }
-  } else {
-    // If an attribute is removed from the BrowserPlugin, then remove it
-    // from the <webview> as well.
-    this.webviewNode.removeAttribute(name);
-  }
 };
 
 WebViewInternal.prototype.onSizeChanged = function(webViewEvent) {
   var newWidth = webViewEvent.newWidth;
   var newHeight = webViewEvent.newHeight;
 
   var node = this.webviewNode;
 
   var width = node.offsetWidth;
   var height = node.offsetHeight;
@@ skipping 100 matching lines @@
   return this.guestInstanceId != undefined;
 };
 
 WebViewInternal.prototype.allocateInstanceId = function() {
   var storagePartitionId =
       this.webviewNode.getAttribute(WEB_VIEW_ATTRIBUTE_PARTITION) ||
       this.webviewNode[WEB_VIEW_ATTRIBUTE_PARTITION];
   var params = {
     'storagePartitionId': storagePartitionId,
   };
-  var self = this;
   GuestViewInternal.createGuest(
       'webview',
       params,
       function(guestInstanceId) {
-        // TODO(lazyboy): Make sure this.autoNavigate_ stuff correctly updated
-        // |self.src| at this point.
-        self.attachWindow(guestInstanceId, false);
-      });
+        this.attachWindow(guestInstanceId, false);
+      }.bind(this)
+  );
 };
 
 WebViewInternal.prototype.onFrameNameChanged = function(name) {
   this.name = name || '';
   if (this.name === '') {
     this.webviewNode.removeAttribute('name');
   } else {
     this.webviewNode.setAttribute('name', this.name);
   }
 };
@@ skipping 11 matching lines @@
  * an event handler.
  */
 WebViewInternal.prototype.setupEventProperty = function(eventName) {
   var propertyName = 'on' + eventName.toLowerCase();
   Object.defineProperty(this.webviewNode, propertyName, {
     get: function() {
       return this.on[propertyName];
     }.bind(this),
     set: function(value) {
       if (this.on[propertyName])
-        this.webviewNode.removeEventListener(eventName, self.on[propertyName]);
+        this.webviewNode.removeEventListener(eventName, this.on[propertyName]);
       this.on[propertyName] = value;
       if (value)
         this.webviewNode.addEventListener(eventName, value);
     }.bind(this),
     enumerable: true
   });
 };
 
 // Updates state upon loadcommit.
 WebViewInternal.prototype.onLoadCommit = function(
@@ skipping 66 matching lines @@
 
 WebViewInternal.prototype.getZoom = function(callback) {
   if (!this.guestInstanceId) {
     return;
   }
   WebView.getZoom(this.guestInstanceId, callback);
 };
 
 WebViewInternal.prototype.buildAttachParams = function(isNewWindow) {
   var params = {
+    'allowtransparency': this.allowtransparency || false,
     'autosize': this.webviewNode.hasAttribute(WEB_VIEW_ATTRIBUTE_AUTOSIZE),
     'instanceId': this.viewInstanceId,
     'maxheight': parseInt(this.maxheight || 0),
     'maxwidth': parseInt(this.maxwidth || 0),
     'minheight': parseInt(this.minheight || 0),
     'minwidth': parseInt(this.minwidth || 0),
     'name': this.name,
     // We don't need to navigate new window from here.
     'src': isNewWindow ? undefined : this.src,
     // If we have a partition from the opener, that will also be already
@@ skipping 180 matching lines @@
 
 /**
  * Implemented when the experimental API is available.
  * @private
  */
 WebViewInternal.prototype.setupExperimentalContextMenus = function() {
 };
 
 exports.WebView = WebView;
 exports.WebViewInternal = WebViewInternal;