diff --git a/src/Observer.js b/src/Observer.js index 893f7db..5ece796 100644 --- a/src/Observer.js +++ b/src/Observer.js @@ -110,7 +110,7 @@ function inserted(element) { // TODO(sjmiles): when logging, do work on all custom elements so we can // track behavior even when callbacks not defined //console.log('inserted: ', element.localName); - if (element.enteredDocumentCallback || (element.__upgraded__ && logFlags.dom)) { + if (element.enteredViewCallback || (element.__upgraded__ && logFlags.dom)) { logFlags.dom && console.group('inserted:', element.localName); if (inDocument(element)) { element.__inserted = (element.__inserted || 0) + 1; @@ -122,9 +122,9 @@ function inserted(element) { if (element.__inserted > 1) { logFlags.dom && console.warn('inserted:', element.localName, 'insert/remove count:', element.__inserted) - } else if (element.enteredDocumentCallback) { + } else if (element.enteredViewCallback) { logFlags.dom && console.log('inserted:', element.localName); - element.enteredDocumentCallback(); + element.enteredViewCallback(); } } logFlags.dom && console.groupEnd(); @@ -141,7 +141,7 @@ function removedNode(node) { function removed(element) { // TODO(sjmiles): temporary: do work on all custom elements so we can track // behavior even when callbacks not defined - if (element.leftDocumentCallback || (element.__upgraded__ && logFlags.dom)) { + if (element.leftViewCallback || (element.__upgraded__ && logFlags.dom)) { logFlags.dom && console.log('removed:', element.localName); if (!inDocument(element)) { element.__inserted = (element.__inserted || 0) - 1; @@ -153,8 +153,8 @@ function removed(element) { if (element.__inserted < 0) { logFlags.dom && console.warn('removed:', element.localName, 'insert/remove count:', element.__inserted) - } else if (element.leftDocumentCallback) { - element.leftDocumentCallback(); + } else if (element.leftViewCallback) { + element.leftViewCallback(); } } } @@ -241,8 +241,6 @@ function handler(mutations) { logFlags.dom && console.groupEnd(); }; -var observer = new MutationObserver(handler); - function takeRecords() { // TODO(sjmiles): ask Raf why we have to call handler ourselves handler(observer.takeRecords()); @@ -250,7 +248,14 @@ function takeRecords() { var forEach = Array.prototype.forEach.call.bind(Array.prototype.forEach); +var observer = new MutationObserver(handler); + function observe(inRoot) { + // TODO(sorvell): delay creation of mutation observer to help with +// IE flakiness + if (!observer) { + observer = new MutationObserver(handler); + } observer.observe(inRoot, {childList: true, subtree: true}); } diff --git a/test/js/customElements.js b/test/js/customElements.js index 111aed9..68a4498 100644 --- a/test/js/customElements.js +++ b/test/js/customElements.js @@ -102,7 +102,7 @@ var XBarBarPrototype = Object.create(XBarPrototype); var XBarBar = document.register('x-barbar', { prototype: XBarBarPrototype, - extends: 'x-bar' + extends: 'button' }); var xbarbar = new XBarBar(); work.appendChild(xbarbar).textContent = 'x-barbar'; @@ -113,7 +113,7 @@ var XBarBarBarPrototype = Object.create(XBarBarPrototype); var XBarBarBar = document.register('x-barbarbar', { prototype: XBarBarBarPrototype, - extends: 'x-barbar' + extends: 'button' }); var xbarbarbar = new XBarBarBar(); work.appendChild(xbarbarbar).textContent = 'x-barbarbar'; @@ -139,8 +139,7 @@ this.style.fontSize = '32pt'; }; var XBooBoo = document.register('x-booboo', { - prototype: XBooBooPrototype, - extends: 'x-boo' + prototype: XBooBooPrototype }); var xbooboo = new XBooBoo(); assert.equal(xbooboo.style.fontStyle, 'italic'); @@ -148,16 +147,16 @@ }); - test('document.register [created|enteredDocument|leftDocument]Callbacks in prototype', function(done) { + test('document.register [created|enteredView|leftView]Callbacks in prototype', function(done) { var ready, inserted, removed; var XBooPrototype = Object.create(HTMLElement.prototype); XBooPrototype.createdCallback = function() { ready = true; } - XBooPrototype.enteredDocumentCallback = function() { + XBooPrototype.enteredViewCallback = function() { inserted = true; } - XBooPrototype.leftDocumentCallback = function() { + XBooPrototype.leftViewCallback = function() { removed = true; } var XBoo = document.register('x-boo-ir', { @@ -169,45 +168,36 @@ assert(!removed, 'removed must be false [XBoo]'); work.appendChild(xboo); CustomElements.takeRecords(); - setTimeout(function() { - assert(inserted, 'inserted must be true [XBoo]'); - work.removeChild(xboo); - CustomElements.takeRecords(); - setTimeout(function() { - assert(removed, 'removed must be true [XBoo]'); - // - ready = inserted = removed = false; - var XBooBooPrototype = Object.create(XBooPrototype); - XBooBooPrototype.createdCallback = function() { - XBoo.prototype.createdCallback.call(this); - }; - XBooBooPrototype.enteredDocumentCallback = function() { - XBoo.prototype.enteredDocumentCallback.call(this); - }; - XBooBooPrototype.leftDocumentCallback = function() { - XBoo.prototype.leftDocumentCallback.call(this); - }; - var XBooBoo = document.register('x-booboo-ir', { - prototype: XBooBooPrototype, - extends: 'x-boo-ir' - }); - var xbooboo = new XBooBoo(); - assert(ready, 'ready must be true [XBooBoo]'); - assert(!inserted, 'inserted must be false [XBooBoo]'); - assert(!removed, 'removed must be false [XBooBoo]'); - work.appendChild(xbooboo); - CustomElements.takeRecords(); - //setTimeout(function() { - assert(inserted, 'inserted must be true [XBooBoo]'); - work.removeChild(xbooboo); - CustomElements.takeRecords(); - //setTimeout(function() { - assert(removed, 'removed must be true [XBooBoo]'); - done(); - //}, 1); - //}, 1); - }, 1); - }, 1); + assert(inserted, 'inserted must be true [XBoo]'); + work.removeChild(xboo); + CustomElements.takeRecords(); + assert(removed, 'removed must be true [XBoo]'); + // + ready = inserted = removed = false; + var XBooBooPrototype = Object.create(XBooPrototype); + XBooBooPrototype.createdCallback = function() { + XBoo.prototype.createdCallback.call(this); + }; + XBooBooPrototype.enteredViewCallback = function() { + XBoo.prototype.enteredViewCallback.call(this); + }; + XBooBooPrototype.leftViewCallback = function() { + XBoo.prototype.leftViewCallback.call(this); + }; + var XBooBoo = document.register('x-booboo-ir', { + prototype: XBooBooPrototype + }); + var xbooboo = new XBooBoo(); + assert(ready, 'ready must be true [XBooBoo]'); + assert(!inserted, 'inserted must be false [XBooBoo]'); + assert(!removed, 'removed must be false [XBooBoo]'); + work.appendChild(xbooboo); + CustomElements.takeRecords(); + assert(inserted, 'inserted must be true [XBooBoo]'); + work.removeChild(xbooboo); + CustomElements.takeRecords(); + assert(removed, 'removed must be true [XBooBoo]'); + done(); }); test('document.register attributeChangedCallback in prototype', function(done) { @@ -236,11 +226,10 @@ }); var xboo = new XBoo(); work.appendChild(xboo); - setTimeout(function() { - var xboo2 = xboo.cloneNode(true); - assert(xboo2.__ready__, 'clone createdCallback must be called'); - done(); - }, 0); + CustomElements.takeRecords(); + var xboo2 = xboo.cloneNode(true); + assert(xboo2.__ready__, 'clone createdCallback must be called'); + done(); }); }); diff --git a/test/js/upgrade.js b/test/js/upgrade.js index 04d30ee..fecaa0b 100644 --- a/test/js/upgrade.js +++ b/test/js/upgrade.js @@ -84,7 +84,7 @@ suite('upgradeElements', function() { var XSpecialInputProto = Object.create(XInput.prototype); XSpecialInputProto.xSpecialInput = 'xSpecialInput'; var XSpecialInput = document.register('x-special-input', { - extends: 'x-input', + extends: 'input', prototype: XSpecialInputProto }); work.innerHTML = '';