fix ShadowDOM on browsers with non-native template

pkg/shadow_dom/lib/shadow_dom.debug.js

 if (!HTMLElement.prototype.createShadowRoot
     || window.__forceShadowDomPolyfill) {
 
 /*
  * Copyright 2013 The Polymer Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style
  * license that can be found in the LICENSE file.
  */
 (function() {
   // TODO(jmesserly): fix dart:html to use unprefixed name
@@ skipping 574 matching lines @@
       Array.prototype.splice.apply(previous, spliceArgs);
     });
   };
 
   function ObservedSet(callback) {
     this.arr = [];
     this.callback = callback;
     this.isObserved = true;
   }
 
+  // TODO(rafaelw): Consider surfacing a way to avoid observing prototype
+  // ancestors which are expected not to change (e.g. Element, Node...).
   var objProto = Object.getPrototypeOf({});
   var arrayProto = Object.getPrototypeOf([]);
   ObservedSet.prototype = {
     reset: function() {
       this.isObserved = !this.isObserved;
     },
 
     observe: function(obj) {
       if (!isObject(obj) || obj === objProto || obj === arrayProto)
         return;
@@ skipping 122 matching lines @@
     this.value = undefined;
     this.oldValue = undefined;
     this.oldValues = undefined;
     this.changeFlags = undefined;
     this.started = false;
   }
 
   CompoundPathObserver.prototype = createObject({
     __proto__: PathObserver.prototype,
 
+    // TODO(rafaelw): Consider special-casing when |object| is a PathObserver
+    // and path 'value' to avoid explicit observation.
     addPath: function(object, path) {
       if (this.started)
         throw Error('Cannot add more paths once started.');
 
       var path = path instanceof Path ? path : getPath(path);
       var value = path ? path.getValueFrom(object) : undefined;
 
       this.observed.push(object, path);
       this.values.push(value);
     },
@@ skipping 44 matching lines @@
         return;
 
       if (this.valueFn) {
         this.value = this.valueFn(this.values);
 
         if (areSameValue(this.value, this.oldValue))
           return false;
 
         this.reportArgs = [this.value, this.oldValue];
       } else {
-        this.reportArgs = [this.values, this.oldValues, this.changeFlags];
+        this.reportArgs = [this.values, this.oldValues, this.changeFlags,
+                           this.observed];
       }
 
       return true;
     },
 
     sync: function(hard) {
       if (hard) {
         this.getValues();
         if (this.valueFn)
           this.value = this.valueFn(this.values);
@@ skipping 1128 matching lines @@
   function enclosedBy(a, b) {
     if (a === b)
       return true;
     if (a instanceof wrappers.ShadowRoot) {
       var host = scope.getHostForShadowRoot(a);
       return enclosedBy(rootOfNode(host), b);
     }
     return false;
   }
 
-  function isMutationEvent(type) {
-    switch (type) {
-      case 'DOMAttrModified':
-      case 'DOMAttributeNameChanged':
-      case 'DOMCharacterDataModified':
-      case 'DOMElementNameChanged':
-      case 'DOMNodeInserted':
-      case 'DOMNodeInsertedIntoDocument':
-      case 'DOMNodeRemoved':
-      case 'DOMNodeRemovedFromDocument':
-      case 'DOMSubtreeModified':
-        return true;
-    }
-    return false;
+  var mutationEventsAreSilenced = 0;
+
+  function muteMutationEvents() {
+    mutationEventsAreSilenced++;
   }
 
+  function unmuteMutationEvents() {
+    mutationEventsAreSilenced--;
+  }
+
+  var OriginalMutationEvent = window.MutationEvent;
+
   function dispatchOriginalEvent(originalEvent) {
     // Make sure this event is only dispatched once.
     if (handledEventsTable.get(originalEvent))
       return;
     handledEventsTable.set(originalEvent, true);
 
     // Don't do rendering if this is a mutation event since rendering might
     // mutate the DOM which would fire more events and we would most likely
     // just iloop.
-    if (!isMutationEvent(originalEvent.type))
+    if (originalEvent instanceof OriginalMutationEvent) {
+      if (mutationEventsAreSilenced)
+        return;
+    } else {
       scope.renderAllPending();
+    }
 
     var target = wrap(originalEvent.target);
     var event = wrap(originalEvent);
     return dispatchEvent(event, target);
   }
 
   function dispatchEvent(event, originalWrapperTarget) {
     var eventPath = retarget(originalWrapperTarget);
 
     // For window load events the load event is dispatched at the window but
@@ skipping 108 matching lines @@
         else
           listener.handler.handleEvent(event);
 
         if (stopImmediatePropagationTable.get(event))
           return false;
 
       } catch (ex) {
         if (window.onerror)
           window.onerror(ex.message);
         else
-          console.error(ex);
+          console.error(ex, ex.stack);
       }
     }
 
     if (anyRemoved) {
       var copy = listeners.slice();
       listeners.length = 0;
       for (var i = 0; i < copy.length; i++) {
         if (!copy[i].removed)
           listeners.push(copy[i]);
       }
@@ skipping 368 matching lines @@
           wrapped: wrapped
         };
       }
     };
   }
 
   scope.adjustRelatedTarget = adjustRelatedTarget;
   scope.elementFromPoint = elementFromPoint;
   scope.getEventHandlerGetter = getEventHandlerGetter;
   scope.getEventHandlerSetter = getEventHandlerSetter;
+  scope.muteMutationEvents = muteMutationEvents;
+  scope.unmuteMutationEvents = unmuteMutationEvents;
   scope.wrapEventTargetMethods = wrapEventTargetMethods;
   scope.wrappers.CustomEvent = CustomEvent;
   scope.wrappers.Event = Event;
   scope.wrappers.EventTarget = EventTarget;
   scope.wrappers.FocusEvent = FocusEvent;
   scope.wrappers.MouseEvent = MouseEvent;
   scope.wrappers.MutationEvent = MutationEvent;
   scope.wrappers.UIEvent = UIEvent;
 
 })(this.ShadowDOMPolyfill);
@@ skipping 1091 matching lines @@
 // Copyright 2013 The Polymer Authors. All rights reserved.
 // Use of this source code is goverened by a BSD-style
 // license that can be found in the LICENSE file.
 
 (function(scope) {
   'use strict';
 
   var HTMLElement = scope.wrappers.HTMLElement;
   var getInnerHTML = scope.getInnerHTML;
   var mixin = scope.mixin;
+  var muteMutationEvents = scope.muteMutationEvents;
   var registerWrapper = scope.registerWrapper;
   var setInnerHTML = scope.setInnerHTML;
+  var unmuteMutationEvents = scope.unmuteMutationEvents;
   var unwrap = scope.unwrap;
   var wrap = scope.wrap;
 
   var contentTable = new WeakMap();
   var templateContentsOwnerTable = new WeakMap();
 
   // http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html#dfn-template-contents-owner
   function getTemplateContentsOwner(doc) {
     if (!doc.defaultView)
       return doc;
     var d = templateContentsOwnerTable.get(doc);
     if (!d) {
       // TODO(arv): This should either be a Document or HTMLDocument depending
       // on doc.
       d = doc.implementation.createHTMLDocument('');
       while (d.lastChild) {
         d.removeChild(d.lastChild);
       }
       templateContentsOwnerTable.set(doc, d);
     }
     return d;
   }
 
   function extractContent(templateElement) {
     // templateElement is not a wrapper here.
     var doc = getTemplateContentsOwner(templateElement.ownerDocument);
     var df = unwrap(doc.createDocumentFragment());
     var child;
+    muteMutationEvents();
     while (child = templateElement.firstChild) {
       df.appendChild(child);
     }
+    unmuteMutationEvents();
     return df;
   }
 
   var OriginalHTMLTemplateElement = window.HTMLTemplateElement;
 
   function HTMLTemplateElement(node) {
     HTMLElement.call(this, node);
     if (!OriginalHTMLTemplateElement) {
       var content = extractContent(node);
       contentTable.set(this, wrap(content));
@@ skipping 153 matching lines @@
   'use strict';
 
   var Element = scope.wrappers.Element;
   var HTMLContentElement = scope.wrappers.HTMLContentElement;
   var HTMLShadowElement = scope.wrappers.HTMLShadowElement;
   var Node = scope.wrappers.Node;
   var ShadowRoot = scope.wrappers.ShadowRoot;
   var assert = scope.assert;
   var getHostForShadowRoot = scope.getHostForShadowRoot;
   var mixin = scope.mixin;
+  var muteMutationEvents = scope.muteMutationEvents;
   var oneOf = scope.oneOf;
+  var unmuteMutationEvents = scope.unmuteMutationEvents;
   var unwrap = scope.unwrap;
   var wrap = scope.wrap;
 
   /**
    * Updates the fields of a wrapper to a snapshot of the logical DOM as needed.
    * Up means parentNode
    * Sideways means previous and next sibling.
    * @param {!Node} wrapper
    */
   function updateWrapperUpAndSideways(wrapper) {
@@ skipping 290 matching lines @@
           // has been added.
           added.set(newChildWrapper, true);
 
           newChildRenderNode.sync(added);
         }
 
         lastIndex += addedCount;
       }
 
       for (var i = lastIndex; i < newChildren.length; i++) {
-        newChildren[i++].sync(added);
+        newChildren[i].sync(added);
       }
     }
   };
 
   function ShadowRenderer(host) {
     this.host = host;
     this.dirty = false;
     this.invalidateAttributes();
     this.associateNode(host);
   }
@@ skipping 12 matching lines @@
       var shadowRoot = host.shadowRoot;
 
       this.associateNode(host);
       var topMostRenderer = !renderNode;
       var renderNode = opt_renderNode || new RenderNode(host);
 
       for (var node = shadowRoot.firstChild; node; node = node.nextSibling) {
         this.renderNode(shadowRoot, renderNode, node, false);
       }
 
-      if (topMostRenderer)
+      if (topMostRenderer) {
+        //muteMutationEvents();
         renderNode.sync();
+        //unmuteMutationEvents();
+      }
 
       this.dirty = false;
     },
 
     invalidate: function() {
       if (!this.dirty) {
         this.dirty = true;
         pendingDirtyRenderers.push(this);
         if (renderTimer)
           return;
@@ skipping 989 matching lines @@
     var unwrapIfNeeded = ShadowDOMPolyfill.unwrapIfNeeded;
     function getTag(obj) {
       // TODO(jmesserly): do we still need these?
       if (obj instanceof NodeList) return 'NodeList';
       if (obj instanceof ShadowRoot) return 'ShadowRoot';
       if (window.MutationRecord && (obj instanceof MutationRecord))
           return 'MutationRecord';
       if (window.MutationObserver && (obj instanceof MutationObserver))
           return 'MutationObserver';
 
+      // TODO(jmesserly): this prevents incorrect interaction between ShadowDOM
+      // and dart:html's <template> polyfill. Essentially, ShadowDOM is
+      // polyfilling native template, but our Dart polyfill fails to detect this
+      // because the unwrapped node is an HTMLUnknownElement, leading it to
+      // think the node has no content.
+      if (obj instanceof HTMLTemplateElement) return 'HTMLTemplateElement';
+
       var unwrapped = unwrapIfNeeded(obj);
       if (obj !== unwrapped) {
         // Fix up class names for Firefox.
         // For some of them (like HTMLFormElement and HTMLInputElement),
         // the "constructor" property of the unwrapped nodes points at the
         // same constructor as the wrapper.
         var ctor = obj.constructor
         if (ctor === unwrapped.constructor) {
           var name = ctor._ShadowDOMPolyfill$cacheTag_;
           if (!name) {
@@ skipping 531 matching lines @@
       css.push(cssRules[i].cssText);
     }
     return css.join('\n\n');
   }
 
   // exports
   scope.ShadowCSS.shimShadowDOMStyling2 = shimShadowDOMStyling2;
 })(window.Platform);
 
 }