Merge pull request #89 from PolymerLabs/shady-prep

Fix tests under Shady Dom.

Author: kevinpschaaf

src/shady/flush.html

@@ -35,11 +35,7 @@
       return;
     }
     if (!node.__patched && patchImpl.canPatchNode(node)) {
-      Tree.Logical.saveChildNodes(node);
-      if (!Tree.Composed.hasParentNode(node)) {
-        Tree.Composed.saveParentNode(node);
-      }
-      Tree.Composed.saveChildNodes(node);
+      Tree.saveChildNodes(node);
       patchImpl.patch(node);
     }
   };
@@ -134,6 +130,17 @@
   ShadyDom.patchImpl = patchImpl;
 
   var createRootAndEnsurePatched = function(node, useV0) {
+    // TODO(sorvell): need to ensure ancestors are patched but this introduces
+    // a timing problem with gathering composed children.
+    // (1) currently the child list is crawled and patched when patching occurs
+    // (this needs to change)
+    // (2) we can only patch when an element has received its parsed children
+    // because we cannot detect them when inserted by parser.
+    // var ancestor = node;
+    // while (ancestor) {
+    //   ShadyDom.patch(ancestor);
+    //   ancestor = ancestor.parentNode || ancestor.host;
+    // }
     ShadyDom.patch(node);
     var root = new ShadyDom.ShadyRoot(node, useV0);
     ShadyDom.patch(root);

src/shady/patch.html

@@ -7,7 +7,6 @@
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
-<link rel="import" href="../utils/debounce.html">
 <link rel="import" href="utils.html">
 <link rel="import" href="array-splice.html">
 <link rel="import" href="tree.html">
@@ -16,7 +15,6 @@
 <!-- <link rel="import" href="lib/dom-api-distributed-nodes-observer.html"> -->
 <link rel="import" href="distributor.html">
 <link rel="import" href="patch.html">
-<link rel="import" href="flush.html">
 <script>
 
   (function() {
@@ -73,9 +71,9 @@
         //console.log('update from', this.host, 'root', distributionRoot.host, distributionRoot._clean);
         if (distributionRoot._clean) {
           distributionRoot._clean = false;
-          //console.log('triggered render on', distributionRoot.host);
-          distributionRoot.debounceRender()
-          ShadyDom.addDebouncer(distributionRoot.debounceRender());
+          ShadyDom.enqueue(function() {
+            distributionRoot.render();
+          });
         }
       },
 
@@ -101,19 +99,7 @@
         }
       },
 
-      // async render this root!
-      debounceRender: function() {
-        this._renderDebouncer = ShadyDom.debounce(this._renderDebouncer,
-          this.render, null, this);
-        return this._renderDebouncer;
-      },
-
       render: function() {
-        //console.log('render', this.host);
-        if (this._renderDebouncer) {
-          this._renderDebouncer.cancel();
-          this._renderDebouncer = null;
-        }
         if (!this._clean) {
           if (!this._skipUpdateInsertionPoints) {
             this.updateInsertionPoints();
@@ -314,6 +300,34 @@
 
     ShadyDom.ShadyRoot = ShadyRoot;
 
+    // render enqueuer
+    ShadyDom.enqueue = function(callback) {
+      if (!this.flush._scheduled) {
+        this.flush._scheduled = true;
+        Promise.resolve().then(() => { this.flush(); });
+      }
+      this.flush._list.push(callback);
+    }
+
+    var customElements = window.CustomElements;
+
+    // render flusher
+    ShadyDom.flush = function() {
+      var list = this.flush._list;
+      while (list.length) {
+        list.shift()();
+      }
+      if (customElements) {
+        customElements.takeRecords();
+      }
+      // continue flushing after elements are upgraded...
+      if (list.length) {
+        this.flush();
+      }
+    }
+
+    ShadyDom.flush._list = [];
+
   })();
 
 </script>

src/shady/shady.html

@@ -47,6 +47,14 @@
         copy[i] = a$[i];
       }
       return copy;
+    },
+
+    saveChildNodes: function(node) {
+      this.Logical.saveChildNodes(node);
+      if (!this.Composed.hasParentNode(node)) {
+        this.Composed.saveParentNode(node);
+      }
+      this.Composed.saveChildNodes(node);
     }
 
   };
@@ -274,6 +282,30 @@
 
   }
 
+  // for testing...
+  var descriptors = {};
+  function getNativeProperty(element, property) {
+    if (!descriptors[property]) {
+      descriptors[property] = Object.getOwnPropertyDescriptor(
+        HTMLElement.prototype, property) ||
+      Object.getOwnPropertyDescriptor(
+        Element.prototype, property) ||
+      Object.getOwnPropertyDescriptor(
+        Node.prototype, property);
+    }
+    return descriptors[property].get.call(element);
+  }
+
+  // for testing...
+  function assertNative(element, property, tracked) {
+    var native = getNativeProperty(element, property);
+    if (native != tracked && element.__patched) {
+      console.warn('tracked', tracked, 'native', native);
+    }
+    return tracked;
+  }
+
+
   // TODO(sorvell): composed tree manipulation is made available
   // (1) to maninpulate the composed tree, and (2) to track changes
   // to the tree for optional patching pluggability.
@@ -494,25 +526,12 @@
     insertBefore: function(parentNode, newChild, refChild) {
       this.saveChildNodes(parentNode);
       // remove from current location.
-      if (this.hasParentNode(newChild)) {
-        var oldParent = this.getParentNode(newChild);
-        if (oldParent) {
-          this._removeChild(oldParent, newChild);
-        }
-      }
       this._addChild(parentNode, newChild, refChild);
       return nativeInsertBefore.call(parentNode, newChild, refChild || null);
     },
 
     appendChild: function(parentNode, newChild) {
       this.saveChildNodes(parentNode);
-      // remove from current location.
-      if (this.hasParentNode(newChild)) {
-        var oldParent = this.getParentNode(newChild);
-        if (oldParent) {
-          this._removeChild(oldParent, newChild);
-        }
-      }
       this._addChild(parentNode, newChild);
       return nativeAppendChild.call(parentNode, newChild);
     },
@@ -527,10 +546,18 @@
     },
 
     _addChild: function(parentNode, newChild, refChild) {
-      if (newChild.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+      var isFrag = (newChild.nodeType === Node.DOCUMENT_FRAGMENT_NODE);
+      var oldParent = this.getParentNode(newChild);
+      if (oldParent) {
+        this._removeChild(oldParent, newChild);
+      }
+      if (isFrag) {
         var c$ = this.getChildNodes(newChild);
-        for (var j=0; j < c$.length; j++) {
-          this.recordInsertBefore(c$[j], parentNode, refChild);
+        for (var i=0; i < c$.length; i++) {
+          var c = c$[i];
+          // unlink document fragment children
+          this._removeChild(newChild, c);
+          this.recordInsertBefore(c, parentNode, refChild);
         }
       } else {
         this.recordInsertBefore(newChild, parentNode, refChild);
@@ -545,5 +572,7 @@
 
   ShadyDom.Tree = Tree;
 
+  ShadyDom.getNativeProperty = getNativeProperty;
+
 })();
 </script>

src/shady/tree.html

@@ -19,10 +19,7 @@
     ShadyDom.force = (location.search.indexOf('forceShadyDom=true') >= 0);
   }
 
-  // BREAKME(sorvell): dependency on polymer.
-  ShadyDom.inUse = ShadyDom.force || 
-    (Polymer.shadowDomV0 && !Element.prototype.createShadowRoot) || 
-    (!Polymer.shadowDomV0 && !Element.prototype.attachShadow);
+  ShadyDom.inUse = ShadyDom.force ||  !Element.prototype.attachShadow;
 
   var p = Element.prototype;
   var matches = p.matches || p.matchesSelector ||

src/shady/utils.html

@@ -75,8 +75,7 @@
     detached: function() {
       if (!this.parentNode ||
           (this.parentNode.nodeType == Node.DOCUMENT_FRAGMENT_NODE &&
-           (!Polymer.Settings.hasShadow ||
-            !(this.parentNode instanceof ShadowRoot)))) {
+           !this.parentNode.host)) {
         this._teardownInstance();
       }
     },

src/templatizer/dom-if.html

@@ -743,6 +743,8 @@
       }
       var beforeRow = this._instances[idx + 1];
       var beforeNode = beforeRow && !beforeRow.isPlaceholder ? beforeRow.children[0] : this;
+      // TODO(sorvell): remove when fragment patching is auto-magic.
+      ShadyDom.patch(inst.root);
       this.parentNode.insertBefore(inst.root, beforeNode);
       this._instances[idx] = inst;
       return inst;

src/templatizer/dom-repeat.html

@@ -221,8 +221,10 @@
             'propChanged2(prop)'
           ]);
           this.registeredCount++;
-          this.registeredThis = this;
+          this.registeredProps = [this.prop1, this.prop2, this.prop3, this.prop4];
+          this.registeredBehaviors = this.behaviors;
         },
+        prop1: true,
         ready: function() {
           this.ensureAttributes({
             attr: true
@@ -237,12 +239,14 @@
       };
 
       Polymer.registerBehavior2 ={
+        prop2: true,
         registered: function() {
           this.registeredCount++;
         }
       };
 
       Polymer.registerBehavior3 ={
+        prop3: true,
         registered: function() {
           this.registeredCount++;
         }
@@ -254,6 +258,7 @@
           Polymer.registerBehavior2,
           Polymer.registerBehavior3
         ],
+        prop4: true,
 
         registered: function() {
           this.registeredCount++;
@@ -348,7 +353,9 @@
   test('called once for each behavior with access to element prototype', function() {
     var el = fixture('registered');
     assert.equal(el.registeredCount, 4);
-    assert.equal(el.registeredThis, Object.getPrototypeOf(el));
+    assert.equal(el.registeredBehaviors.length, 3);
+    assert.equal(el.registeredBehaviors, el.behaviors);
+    assert.deepEqual(el.registeredProps, [true, true, true, true]);
   });
 
 });