From 07261e4b8ef797b9916ced21b718390fe2a79c61 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Thu, 13 Aug 2015 15:31:29 -0700
Subject: [PATCH] Add `Polymer.dom().notifyObservers` method to 'kick'
 observers, for example, when attributes change under Shadow DOM.

---
 src/lib/dom-api-mutation-content.html |   4 +-
 src/lib/dom-api-mutation.html         |  18 +++-
 src/lib/dom-api.html                  |  62 ++++---------
 src/mini/shady.html                   |  34 ++++---
 test/smoke/observeReNodes.html        |  29 +++++-
 test/smoke/observeReNodes2.html       | 126 ++++++++++++++++++++++++++
 6 files changed, 203 insertions(+), 70 deletions(-)
 create mode 100644 test/smoke/observeReNodes2.html

diff --git a/src/lib/dom-api-mutation-content.html b/src/lib/dom-api-mutation-content.html
index bf13de0130..b603d91ca8 100644
--- a/src/lib/dom-api-mutation-content.html
+++ b/src/lib/dom-api-mutation-content.html
@@ -30,7 +30,7 @@
         return h;
       },
 
-      notifyIfNeeded: function() {
+      notify: function() {
         if (this._hasListeners()) {
           this._scheduleNotify();
         }
@@ -82,7 +82,7 @@
           var host = root && root.host;
           if (host) {
             this._observer = Polymer.dom(host).observeNodes(
-              this.notifyIfNeeded.bind(this));
+              this.notify.bind(this));
           }
         },
 
diff --git a/src/lib/dom-api-mutation.html b/src/lib/dom-api-mutation.html
index 5d0f6dc47c..1d3b16fd8f 100644
--- a/src/lib/dom-api-mutation.html
+++ b/src/lib/dom-api-mutation.html
@@ -14,6 +14,7 @@
 
     var DomApi = Polymer.DomApi.ctor;
     var Settings = Polymer.Settings;
+    var hasDomApi = Polymer.DomApi.hasDomApi;
 
     DomApi.Mutation = function(domApi) {
       this.domApi = domApi;
@@ -100,7 +101,7 @@
 
       _observeContentElements: function(elements) {
         for (var i=0, h, n; (i < elements.length) && (n=elements[i]); i++) {
-          if (n.localName === 'content') {
+          if (this._isContent(n)) {
             n.__observeNodesMap = n.__observeNodesMap || new WeakMap();
             if (n.__observeNodesMap.get(this) === undefined) {
               h = Polymer.dom(n).observeNodes(
@@ -113,7 +114,7 @@
 
       _unobserveContentElements: function(elements) {
         for (var i=0, n, h; (i < elements.length) && (n=elements[i]); i++) {
-          if (n.localName === 'content') {
+          if (this._isContent(n)) {
             h = n.__observeNodesMap.get(this);
             if (h) {
               Polymer.dom(n).unobserveNodes(h);
@@ -122,6 +123,10 @@
         }
       },
 
+      _isContent: function(node) {
+        return (node.localName === 'content');
+      },
+
       _callListeners: function(info) {
         var o$ = this._listeners;
         for (var i=0, o; (i < o$.length) && (o=o$[i]); i++) {
@@ -151,10 +156,13 @@
             this._debouncer.context = this;
             Polymer.dom.addDebouncer(this._debouncer);
             this._preflush = this._flush.bind(this);
-            Polymer.dom.addPreflush(this._preflush);
+           
+          }
+          if (!this._hasListeners()) {
+             Polymer.dom.addPreflush(this._preflush);
+             // note: doing this > 1x is a no-op
+             this._observer.observe(this.node, {childList: true});
           }
-          // note: doing this > 1x is a no-op
-          this._observer.observe(this.node, {childList: true});
         },
 
         _cleanupObserver: function() {
diff --git a/src/lib/dom-api.html b/src/lib/dom-api.html
index 906ca167dc..91b8e92db2 100644
--- a/src/lib/dom-api.html
+++ b/src/lib/dom-api.html
@@ -538,7 +538,10 @@
         if (this.observer) {
           this.observer.removeListener(handle);
         }
-      }
+      },
+
+      // abstract, intended as public 'kick' mehanism
+      notifyObservers: function() {} 
 
     };
 
@@ -744,58 +747,25 @@
 
       DomApi.prototype._distributeParent = function() {};
 
-      DomApi.prototype.observeChildren = function(callback) {
-        if (!this._mo) {
-          this._mo = new MutationObserver(this._notifyObservers.bind(this));
-          this._mo.observe(this.node, {childList: true});
-          // make sure to notify initial state...
-          this._mutationDebouncer = Polymer.Debounce(this._mutationDebouncer, 
-            function() {
-              this._notifyObservers([{
-                target: this.node, 
-                addedNodes: this.childNodes.slice()
-              }]);
-            }
-          );
-          this._mutationDebouncer.context = this;
-          Polymer.dom.addDebouncer(this._mutationDebouncer);
-        }
-        return this._observers.push(callback);
-      };
-
-      DomApi.prototype._notifyObservers = function(mxns) {
-        var info = {
-          target: this.node,
-          addedNodes: [],
-          removedNodes: []
-        };
-        mxns.forEach(function(m) {
-          if (m.addedNodes) {
-            for (var i=0; i < m.addedNodes.length; i++) {
-              info.addedNodes.push(m.addedNodes[i]);
+      DomApi.prototype.notifyObservers = function() {
+        if (this.node.shadowRoot) {
+          var ip$ = this.node.shadowRoot.querySelectorAll('content');
+          for (var i=0, c; (i<ip$.length) && (c=ip$[i]); i++) {
+            this._notifyContent(c);
+            if (c.parentNode.shadowRoot) {
+              factory(c.parentNode).notifyObservers();
             }
           }
-          if (m.removedNodes) {
-            for (var i=0; i < m.removedNodes.length; i++) {
-              info.removedNodes.push(m.removedNodes[i]);
-            }
-          }
-        });
-        if (info.addedNodes.length || info.removedNodes.length) {
-          var o$ = this._observers;
-          for (var i=0, o; (i < o$.length) && (o=o$[i]); i++) {
-            o.call(null, info);
-          }
         }
-      };
+      }
 
-      DomApi.prototype.flush = function() {
-        if (this._mo) {
-          this._notifyObservers(this._mo.takeRecords());
+      DomApi.prototype._notifyContent = function(content) {
+        if (hasDomApi(content) && factory(content).observer) {
+          factory(content).observer.notify();
         }
-        Polymer.dom.flush();
       }
 
+
       var nativeForwards = ['appendChild', 'insertBefore', 
         'removeChild', 'replaceChild'];
 
diff --git a/src/mini/shady.html b/src/mini/shady.html
index 1529229346..7c04f299fc 100644
--- a/src/mini/shady.html
+++ b/src/mini/shady.html
@@ -154,15 +154,6 @@
             // NOTE: send a signal to insertion points that we have distributed
             // which informs effective children observers
             notifyContentObservers(this.shadyRoot);
-            for (var i=0, c; i < this.shadyRoot._insertionPoints.length; i++) {
-              c = this.shadyRoot._insertionPoints[i];
-              if (hasDomApi(c)) {
-                var dc = Polymer.dom(c);
-                if (dc.observer) {
-                  dc.observer.notifyIfNeeded();
-                }
-              }
-            }
           } else {
             if (!this.shadyRoot._hasDistributed) {
               this.textContent = '';
@@ -179,11 +170,10 @@
           }
           // NOTE: send a signal to any Polymer.dom node observers
           // to report the initial set of childNodes
-          var hasDistributed = this.shadyRoot._hasDistributed;
-          this.shadyRoot._hasDistributed = true;
-          if (!hasDistributed && hasDomApi(this) && Polymer.dom(this).observer) {
-            Polymer.dom(this).observer.addAllNodes();
+          if (!this.shadyRoot._hasDistributed) {
+            notifyInitialDistribution(this);
           }
+          this.shadyRoot._hasDistributed = true;
         }
       },
 
@@ -478,6 +468,24 @@
       }
     }
 
+    function notifyContentObservers(root) {
+      for (var i=0, c; i < root._insertionPoints.length; i++) {
+        c = root._insertionPoints[i];
+        if (hasDomApi(c)) {
+          var dc = Polymer.dom(c);
+          if (dc.observer) {
+            dc.observer.notify();
+          }
+        }
+      }
+    }
+
+    function notifyInitialDistribution(host) {
+      if (hasDomApi(host) && Polymer.dom(host).observer) {
+        Polymer.dom(host).observer.addAllNodes();
+      }
+    }
+
     var needsUpgrade = window.CustomElements && !CustomElements.useNative;
 
     function upgradeLightChildren(children) {
diff --git a/test/smoke/observeReNodes.html b/test/smoke/observeReNodes.html
index 336d04d9ab..119f998adf 100644
--- a/test/smoke/observeReNodes.html
+++ b/test/smoke/observeReNodes.html
@@ -21,7 +21,12 @@
       Polymer({
         is:'test-inner',
         ready: function() {
-          Polymer.dom(this).observeNodes(function(info) {
+          this.observe();
+        },
+
+        observe: function() {
+          console.warn('observeNodes', this.localName);
+          this._childObserver = Polymer.dom(this).observeNodes(function(info) {
             info.addedNodes.forEach(function(n) {
               if (n.nodeType === Node.ELEMENT_NODE) {
                 console.log('added:', n.localName, n.textContent);
@@ -33,6 +38,11 @@
               }
             });
           });
+        },
+
+        unobserve: function() {
+          console.warn('unobserveNodes', this.localName);
+          Polymer.dom(this).unobserveNodes(this._childObserver);
         }
       });
     </script>
@@ -68,8 +78,8 @@
 
 
   Polymer.dom.flush();
-  
-  // setTimeout(function() {
+
+  function test() {
     console.group('test dynamic');
     var d = makeNode('dynamic!');
     Polymer.dom.flush();
@@ -91,7 +101,18 @@
     Polymer.dom(content).removeChild(Polymer.dom(content).lastChild);
     Polymer.dom.flush();
     console.groupEnd('test dynamic');
-  // }, 1000);
+  }
+  test();
+  content.$.inner.unobserve();
+  test();
+  content.$.inner.observe();
+  test();
+  content.$.inner.unobserve();
+  test();
+  content.$.inner.observe();
+  test();
+  
+
   </script>
 
 </body>
diff --git a/test/smoke/observeReNodes2.html b/test/smoke/observeReNodes2.html
new file mode 100644
index 0000000000..e9477e1fc2
--- /dev/null
+++ b/test/smoke/observeReNodes2.html
@@ -0,0 +1,126 @@
+<!doctype html>
+<html>
+<head>
+
+  <title>observeReNodes</title>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../polymer.html">
+
+</head>
+<body>
+
+  <dom-module id='test-inner'>
+    <template>
+      ~<content id="c" select=".a"></content>~
+    </template>
+    <script>
+      Polymer({
+        is:'test-inner',
+        ready: function() {
+          this.observe();
+        },
+
+        observe: function() {
+          this._childObserver = Polymer.dom(this).observeNodes(function(info) {
+            info.addedNodes.forEach(function(n) {
+              if (n.nodeType === Node.ELEMENT_NODE) {
+                console.log('added:', n.localName, n.textContent);
+              }
+            });
+            info.removedNodes.forEach(function(n) {
+              if (n.nodeType === Node.ELEMENT_NODE) {
+                console.log('removed:', n.localName, n.textContent);
+              }
+            });
+          });
+          this._contentObserver = Polymer.dom(this.$.c).observeNodes(function(info) {
+            info.addedNodes.forEach(function(n) {
+              if (n.nodeType === Node.ELEMENT_NODE) {
+                console.log('%c content added:', 'color: blue;', n.localName, n.textContent);
+              }
+            });
+            info.removedNodes.forEach(function(n) {
+              if (n.nodeType === Node.ELEMENT_NODE) {
+                console.log('%c content removed:', 'color: blue;', n.localName, n.textContent);
+              }
+            });
+          }, true);
+        },
+
+        unobserve: function() {
+          Polymer.dom(this).unobserveNodes(this._childObserver);
+          Polymer.dom(this).unobserveNodes(this._contentObserver);
+        }
+      });
+    </script>
+  </dom-module>
+
+  <dom-module id='test-content'>
+    <template>
+      <test-inner id="inner">[<content id="ip" select=".b"></content>]</test-inner>
+    </template>
+    <script>
+    (function() {
+      Polymer({
+        is:'test-content'
+      });
+    })();
+    </script>
+  </dom-module>
+
+  <test-content id="content">
+    <div class="a b">content A</div>
+    <div class="a b">content B</div>
+  </test-content>
+
+  <br><br>
+
+  <script>
+  
+  function makeNode(text) {
+    var d = document.createElement('div');
+    d.textContent = text;;
+    return d;
+  }
+
+
+  Polymer.dom.flush();
+  
+  // setTimeout(function() {
+    console.group('test dynamic');
+    var d = makeNode('dynamic!');
+    Polymer.dom.flush();
+    Polymer.dom(content).appendChild(d);
+    Polymer.dom.flush();
+    Polymer.dom(content).removeChild(d);
+    Polymer.dom.flush();
+    d = makeNode('1');
+    Polymer.dom(d).classList.add('b');
+    Polymer.dom(content).appendChild(d);
+    Polymer.dom.flush();
+    Polymer.dom(d).classList.add('a');
+    Polymer.dom(Polymer.dom(d).parentNode).notifyObservers();
+    Polymer.dom(content.$.inner).appendChild(makeNode('2'));
+    Polymer.dom.flush();
+    d = makeNode('-1');
+    Polymer.dom(d).classList.add('b');
+    Polymer.dom(d).classList.add('a');
+    Polymer.dom(content).insertBefore(d, Polymer.dom(content).firstChild);
+    Polymer.dom.flush();
+    Polymer.dom(content.$.inner).insertBefore(makeNode('-2'), Polymer.dom(content.$.inner).firstChild);
+    Polymer.dom.flush();
+    Polymer.dom(content.$.inner).removeChild(Polymer.dom(content.$.inner).firstChild);
+    Polymer.dom(content.$.inner).removeChild(Polymer.dom(content.$.inner).lastChild);
+    Polymer.dom(content).removeChild(Polymer.dom(content).firstChild);
+    Polymer.dom(content).removeChild(Polymer.dom(content).lastChild);
+    Polymer.dom.flush();
+    console.groupEnd('test dynamic');
+  // }, 1000);
+  </script>
+
+</body>
+</html>