Browser tag shim

chrome/renderer/resources/extensions/browser_tag.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.
+
+// Shim that simulates a <browser> tag via Mutation Observers and the trick
+// documented at http://ajaxian.com/archives/web-ninja-interview-erik-arvidsson
+// to subclass HTML elements.
+//
+// The actual tag is implemented via the browser plugin. The internals of this
+// are hidden via Shadow DOM.
+
+var BROWSER_TAG_ATTRIBUTES = ['src', 'width', 'height'];
+
+// Handle <browser> tags already in the document.
+window.addEventListener('DOMContentLoaded', function() {
+  var browserNodes = document.body.getElementsByTagName('browser');
+  for (var i = 0, browserNode; browserNode = browserNodes[i]; i++) {
+    BrowserTag.decorate(browserNode);
+  }
+});
+
+// Handle <browser> tags added later.
+var observer = new WebKitMutationObserver(function(mutations) {
+  mutations.forEach(function(mutation) {
+    for (var i = 0, addedNode; addedNode = mutation.addedNodes[i]; i++) {
+      if (addedNode.tagName == 'BROWSER') {
+        BrowserTag.decorate(addedNode);
+      }
+    }
+  });
+});
+observer.observe(document, {subtree: true, childList: true});
+
+/**
+ * @constructor
+ */
+function BrowserTag() {
+  BrowserTag.decorate_(document.createElement('browser'));
+}
+
+/**
+ * @param {Node} node
+ */
+BrowserTag.decorate = function(node) {
+  // Make sure we don't decorate twice.
+  if (node instanceof BrowserTag) {
+    return;
+  }
+  node.__proto__ = BrowserTag.prototype;
+  node.decorate_();
+}
+
+BrowserTag.prototype.__proto__ = HTMLElement.prototype;
+
+/**
+ * @private
+ */
+BrowserTag.prototype.decorate_ = function() {
+  this.shadowRoot_ = new WebKitShadowRoot(this);

[dglazkov, 2012/06/21 16:22:07]

Is it ok for these members to be enumerable? They seem like a UA implementation
detail. 

[Mihai Parparita -not on Chrome, 2012/06/25 20:29:43]

Switched to using Object.defineProperty so that they're not enumerable.

+
+  this.objectNode_ = document.createElement('object');
+  // Force compositing, since the plugin only works for accelerated pages.
+  this.objectNode_.style.webkitTransform = 'translateZ(0)';

[Fady Samuel, 2012/06/21 23:14:46]

This should be unnecessary. We just landed a patch to force compositing on
guests, and pepper takes care of the magic in the embedder.

[Mihai Parparita -not on Chrome, 2012/06/25 20:29:43]

Removed.

+  this.objectNode_.setAttribute('type', 'application/browser-plugin');
+  BROWSER_TAG_ATTRIBUTES.forEach(this.copyAttribute_, this);
+  this.shadowRoot_.appendChild(this.objectNode_);
+
+  var handleMutation = this.handleMutation_.bind(this);
+  this.observer_ = new WebKitMutationObserver(function(mutations) {
+        mutations.forEach(handleMutation);
+      });
+  this.observer_.observe(
+      this,
+      {attributes: true, attributeFilter: BROWSER_TAG_ATTRIBUTES});
+}
+
+/**
+ * @private
+ */
+BrowserTag.prototype.handleMutation_ = function(mutation) {
+  switch (mutation.attributeName) {
+    case 'src':
+      this.objectNode_.postMessage(this.getAttribute('src'));
+      break;
+    default:
+      this.copyAttribute_(mutation.attributeName);
+      break;
+  }
+};
+
+/**
+ * @private
+ */
+BrowserTag.prototype.copyAttribute_ = function(attributeName) {
+  this.objectNode_.setAttribute(
+      attributeName, this.getAttribute(attributeName));
+};