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.

[Aaron Boodman, 2012/07/02 20:52:35]

Is the plan to actually implement a <browser> tag at some point? Just curious.

[Mihai Parparita -not on Chrome, 2012/07/02 22:05:14]

Perhaps, but I don't think Apple would be too receptive to WebKit changes for
new tags that 1) are not standardized 2) are exposed to apps only. Perhaps if we
can get an agreement with Mozilla on the <browser> API it'd be worth fighting
that battle?

[Aaron Boodman, 2012/07/02 23:04:37]

I don't think so. I wondered if you were considering alternate approaches such
as adding hooks to the parser to allow these kind of tags to be implemented. But
I think way you have it makes most sense.

+//
+// 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'];

[Aaron Boodman, 2012/07/02 20:52:35]

I can't remember, but I think that these names might be exposed in the pages
that this script runs in, which isn't what you want.

[Mihai Parparita -not on Chrome, 2012/07/02 22:05:14]

The module system wrap everything in an anonymous function:
http://code.google.com/searchframe#OAMlx_jo-ck/src/chrome/renderer/module_sys...

[Aaron Boodman, 2012/07/02 23:04:37]

Cool.

+
+// Handle <browser> tags already in the document.
+window.addEventListener('DOMContentLoaded', function() {
+  var browserNodes = document.body.querySelectorAll('browser');
+  for (var i = 0, browserNode; browserNode = browserNodes[i]; i++) {
+    new BrowserTag(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') {
+        new BrowserTag(addedNode);
+      }
+    }
+  });
+});
+observer.observe(document, {subtree: true, childList: true});
+
+/**
+ * @constructor
+ */
+function BrowserTag(node) {
+  this.node_ = node;
+  this.shadowRoot_ = new WebKitShadowRoot(node);

[arv (Not doing code reviews), 2012/07/02 21:04:28]

No need to make this a property

[Mihai Parparita -not on Chrome, 2012/07/02 22:05:14]

Done. The observer didn't need to be a property either.

+
+  this.objectNode_ = document.createElement('object');
+  this.objectNode_.type = 'application/browser-plugin';
+  BROWSER_TAG_ATTRIBUTES.forEach(this.copyAttribute_, this);
+  this.shadowRoot_.appendChild(this.objectNode_);
+
+  // Map attribute modifications on the <browser> tag to changes on the
+  // underlying <object> node.
+  var handleMutation = this.handleMutation_.bind(this);
+  this.observer_ = new WebKitMutationObserver(function(mutations) {
+    mutations.forEach(handleMutation);
+  });
+  this.observer_.observe(
+      this.node_,
+      {attributes: true, attributeFilter: BROWSER_TAG_ATTRIBUTES});
+
+  // Expose getters and setters for the attributes.
+  BROWSER_TAG_ATTRIBUTES.forEach(function(attributeName) {
+    Object.defineProperty(this.node_, attributeName, {
+      get: function() {
+        var value = node.getAttribute(attributeName);
+        var numericValue = parseInt(value, 10);
+        return isNaN(numericValue) ? value : numericValue;
+      },
+      set: function(value) {
+        node.setAttribute(attributeName, value);
+      },
+      enumerable: true
+    });
+  }, this);
+};
+
+/**
+ * @private
+ */
+BrowserTag.prototype.handleMutation_ = function(mutation) {
+  switch (mutation.attributeName) {
+    case 'src':
+      this.objectNode_.postMessage(this.node_.getAttribute('src'));
+      break;
+    default:
+      this.copyAttribute_(mutation.attributeName);
+      break;
+  }
+};
+
+/**
+ * @private
+ */
+BrowserTag.prototype.copyAttribute_ = function(attributeName) {
+  this.objectNode_.setAttribute(
+      attributeName, this.node_.getAttribute(attributeName));
+}

[arv (Not doing code reviews), 2012/07/02 21:04:28]

missing semicolon

[Mihai Parparita -not on Chrome, 2012/07/02 22:05:14]

Done.