OLD | NEW |
---|---|
(Empty) | |
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | |
2 // Use of this source code is governed by a BSD-style license that can be | |
3 // found in the LICENSE file. | |
4 | |
5 // Shim that simulates a <browser> tag via Mutation Observers and the trick | |
6 // documented at http://ajaxian.com/archives/web-ninja-interview-erik-arvidsson | |
7 // to subclass HTML elements. | |
8 // | |
9 // The actual tag is implemented via the browser plugin. The internals of this | |
10 // are hidden via Shadow DOM. | |
11 | |
12 var BROWSER_TAG_ATTRIBUTES = ['src', 'width', 'height']; | |
arv (Not doing code reviews)
2012/06/25 21:02:24
You might want to wrap all of this code in a closu
Mihai Parparita -not on Chrome
2012/06/26 00:58:24
The extension module system does this already: htt
| |
13 | |
14 // Handle <browser> tags already in the document. | |
15 window.addEventListener('DOMContentLoaded', function() { | |
16 var browserNodes = document.body.getElementsByTagName('browser'); | |
arv (Not doing code reviews)
2012/06/25 21:02:24
querySelectorAll is better here. getElementsByTagN
Mihai Parparita -not on Chrome
2012/06/26 00:58:24
Done.
| |
17 for (var i = 0, browserNode; browserNode = browserNodes[i]; i++) { | |
18 BrowserTag.decorate(browserNode); | |
19 } | |
20 }); | |
21 | |
22 // Handle <browser> tags added later. | |
23 var observer = new WebKitMutationObserver(function(mutations) { | |
24 mutations.forEach(function(mutation) { | |
25 for (var i = 0, addedNode; addedNode = mutation.addedNodes[i]; i++) { | |
26 if (addedNode.tagName == 'BROWSER') { | |
27 BrowserTag.decorate(addedNode); | |
28 } | |
29 } | |
30 }); | |
31 }); | |
32 observer.observe(document, {subtree: true, childList: true}); | |
33 | |
34 /** | |
35 * @constructor | |
36 */ | |
37 function BrowserTag() { | |
38 return BrowserTag.decorate(document.createElement('browser')); | |
39 } | |
40 | |
41 /** | |
42 * @param {Node} node | |
43 */ | |
44 BrowserTag.decorate = function(node) { | |
45 // Make sure we don't decorate twice. | |
46 if (node instanceof BrowserTag) { | |
47 return; | |
48 } | |
49 node.__proto__ = BrowserTag.prototype; | |
50 node.decorate_(); | |
51 } | |
52 | |
53 BrowserTag.prototype.__proto__ = HTMLElement.prototype; | |
54 | |
55 var decorate = function() { | |
arv (Not doing code reviews)
2012/06/25 21:02:24
function decorate() {
| |
56 this.shadowRoot_ = new WebKitShadowRoot(this); | |
57 | |
58 this.objectNode_ = document.createElement('object'); | |
arv (Not doing code reviews)
2012/06/25 21:02:24
How about making objectNode_ non enumerable?
Mayb
Mihai Parparita -not on Chrome
2012/06/26 00:58:24
I decided that making BrowserTag into an HTML elem
| |
59 this.objectNode_.setAttribute('type', 'application/browser-plugin'); | |
arv (Not doing code reviews)
2012/06/25 21:02:24
.type = ...
Mihai Parparita -not on Chrome
2012/06/26 00:58:24
Done.
| |
60 BROWSER_TAG_ATTRIBUTES.forEach(this.copyAttribute_, this); | |
61 this.shadowRoot_.appendChild(this.objectNode_); | |
62 | |
63 var handleMutation = this.handleMutation_.bind(this); | |
64 this.observer_ = new WebKitMutationObserver(function(mutations) { | |
65 mutations.forEach(handleMutation); | |
arv (Not doing code reviews)
2012/06/25 21:02:24
-4 indent
Mihai Parparita -not on Chrome
2012/06/26 00:58:24
Done.
| |
66 }); | |
67 this.observer_.observe( | |
68 this, | |
69 {attributes: true, attributeFilter: BROWSER_TAG_ATTRIBUTES}); | |
70 }; | |
71 Object.defineProperty(BrowserTag.prototype, 'decorate_', {value: decorate}); | |
arv (Not doing code reviews)
2012/06/25 21:02:24
I feel like we could probably make this truly tran
| |
72 | |
73 var handleMutation = function() { | |
arv (Not doing code reviews)
2012/06/25 21:02:24
function handleMutation() {
| |
74 switch (mutation.attributeName) { | |
75 case 'src': | |
76 this.objectNode_.postMessage(this.getAttribute('src')); | |
arv (Not doing code reviews)
2012/06/25 21:02:24
You should also add accessors for src, width and h
Mihai Parparita -not on Chrome
2012/06/26 00:58:24
Done.
| |
77 break; | |
78 default: | |
79 this.copyAttribute_(mutation.attributeName); | |
80 break; | |
81 } | |
82 }; | |
83 Object.defineProperty( | |
84 BrowserTag.prototype, 'handleMutation_', {value: handleMutation}); | |
85 | |
86 var copyAttribute = function(attributeName) { | |
87 this.objectNode_.setAttribute( | |
88 attributeName, this.getAttribute(attributeName)); | |
89 } | |
90 Object.defineProperty( | |
91 BrowserTag.prototype, 'copyAttribute_', {value: copyAttribute}); | |
OLD | NEW |