Merge pull request #417 from webcomponents/fix-416

kevinpschaaf · kevinpschaaf · commit 8d83a2d80039 · 2015-10-16T14:16:25.000-07:00
Fixes #416
diff --git a/src/CustomElements/observe.js b/src/CustomElements/observe.js
@@ -53,14 +53,23 @@ function addedSubtree(node, isAttached) {
 }
 
 // On platforms without MutationObserver, mutations may not be
-// reliable and therefore attached/detached are not reliable.
-// To make these callbacks less likely to fail, we defer all inserts and removes
+// reliable and therefore attached/detached are not reliable. We think this 
+// occurs sometimes under heavy DOM operation load, but it is not easy to
+// reproduce.
+// To make these callbacks less likely to fail in this scenario, 
+// we *optionally* defer all inserts and removes
 // to give a chance for elements to be attached into dom.
-// This ensures attachedCallback fires for elements that are created and
+// This helps ensure attachedCallback fires for elements that are created and
 // immediately added to dom.
-var hasPolyfillMutations = (!window.MutationObserver ||
-    (window.MutationObserver === window.JsMutationObserver));
-scope.hasPolyfillMutations = hasPolyfillMutations;
+// This change can significantly alter the performance characteristics
+// of attaching elements and therefore we only enable it if the user has 
+// explicitly provided the `throttle-attached` flag.
+var hasThrottledAttached = (window.MutationObserver._isPolyfilled && 
+    flags['throttle-attached']);
+// bc
+scope.hasPolyfillMutations = hasThrottledAttached;
+// exposed for testing
+scope.hasThrottledAttached = hasThrottledAttached;
 
 var isPendingMutations = false;
 var pendingMutations = [];
@@ -82,7 +91,7 @@ function takeMutations() {
 }
 
 function attached(element) {
-  if (hasPolyfillMutations) {
+  if (hasThrottledAttached) {
     deferMutation(function() {
       _attached(element);
     });
@@ -118,7 +127,7 @@ function detachedNode(node) {
 }
 
 function detached(element) {
-  if (hasPolyfillMutations) {
+  if (hasThrottledAttached) {
     deferMutation(function() {
       _detached(element);
     });
diff --git a/src/MutationObserver/MutationObserver.js b/src/MutationObserver/MutationObserver.js
@@ -10,6 +10,11 @@
 
 (function(global) {
 
+  // Don't allow this object to be redefined.
+  if (global.JsMutationObserver) {
+    return;
+  }
+
   var registrationsTable = new WeakMap();
 
   var setImmediate;
@@ -561,8 +566,10 @@
 
   global.JsMutationObserver = JsMutationObserver;
 
-  if (!global.MutationObserver)
+  if (!global.MutationObserver) {
     global.MutationObserver = JsMutationObserver;
-
+    // Explicltly mark MO as polyfilled for user reference.
+    JsMutationObserver._isPolyfilled = true;
+  }
 
 })(self);
diff --git a/tests/CustomElements/html/throttled-attached.html b/tests/CustomElements/html/throttled-attached.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<!--
+    @license
+    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+    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
+-->
+<html>
+  <head>
+    <title>Custom Elements: throttle attached</title>
+    <script src="../../tools/htmltest.js"></script>
+    <script src="../../tools/chai/chai.js"></script>
+    <script src="../../../src/CustomElements/CustomElements.js?wc-throttle-attached"></script>
+  </head>
+  <body>
+    <script>
+      addEventListener('WebComponentsReady', function() {
+        chai.assert.equal(MutationObserver.__isPolyfilled, CustomElements.hasThrottledAttached);
+        done();
+      });
+    </script>
+  </body>
+</html>
