Merge pull request #85 from jakemac53/DOMTokenList

patch DOMTokenList instead of using a wrapper

src/ShadowDOM/wrappers/DOMTokenList.js

@@ -7,50 +7,34 @@
  * 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
  */
-
+
+// NOTE: Set the 'ownerElement_' property on a DOMTokenList to make invalidation
+// happen. This is pretty hacky but we only have to do it in one place
+// (Element.js) currently so it seems like the least bad option.
 (function(scope) {
   'use strict';
 
-  var setWrapper = scope.setWrapper;
-  var unsafeUnwrap = scope.unsafeUnwrap;
-
   function invalidateClass(el) {
     scope.invalidateRendererBasedOnAttribute(el, 'class');
   }
 
-  function DOMTokenList(impl, ownerElement) {
-    setWrapper(impl, this);
-    this.ownerElement_ = ownerElement;
-  }
+  var oldAdd = DOMTokenList.prototype.add;
+  DOMTokenList.prototype.add = function() {
+    oldAdd.apply(this, arguments);
+    this.ownerElement_ && invalidateClass(this.ownerElement_);
+  };
+
+  var oldRemove = DOMTokenList.prototype.remove;
+  DOMTokenList.prototype.remove = function() {
+    oldRemove.apply(this, arguments);
+    this.ownerElement_ && invalidateClass(this.ownerElement_);
+  };
 
-  DOMTokenList.prototype = {
-    constructor: DOMTokenList,
-    get length() {
-      return unsafeUnwrap(this).length;
-    },
-    item: function(index) {
-      return unsafeUnwrap(this).item(index);
-    },
-    contains: function(token) {
-      return unsafeUnwrap(this).contains(token);
-    },
-    add: function() {
-      unsafeUnwrap(this).add.apply(unsafeUnwrap(this), arguments);
-      invalidateClass(this.ownerElement_);
-    },
-    remove: function() {
-      unsafeUnwrap(this).remove.apply(unsafeUnwrap(this), arguments);
-      invalidateClass(this.ownerElement_);
-    },
-    toggle: function(token) {
-      var rv = unsafeUnwrap(this).toggle.apply(unsafeUnwrap(this), arguments);
-      invalidateClass(this.ownerElement_);
-      return rv;
-    },
-    toString: function() {
-      return unsafeUnwrap(this).toString();
-    }
+  var oldToggle = DOMTokenList.prototype.toggle;
+  DOMTokenList.prototype.toggle = function(token) {
+    var rv = oldToggle.apply(this, arguments);
+    this.ownerElement_ && invalidateClass(this.ownerElement_);
+    return rv;
   };
 
-  scope.wrappers.DOMTokenList = DOMTokenList;
 })(window.ShadowDOMPolyfill);

src/ShadowDOM/wrappers/Element.js

@@ -14,7 +14,6 @@
   var ChildNodeInterface = scope.ChildNodeInterface;
   var GetElementsByInterface = scope.GetElementsByInterface;
   var Node = scope.wrappers.Node;
-  var DOMTokenList = scope.wrappers.DOMTokenList;
   var ParentNodeInterface = scope.ParentNodeInterface;
   var SelectorsInterface = scope.SelectorsInterface;
   var addWrapNodeListMethod = scope.addWrapNodeListMethod;
@@ -106,8 +105,9 @@
     get classList() {
       var list = classListTable.get(this);
       if (!list) {
-        classListTable.set(this,
-            list = new DOMTokenList(unsafeUnwrap(this).classList, this));
+        list = unsafeUnwrap(this).classList;
+        list.ownerElement_ = this;
+        classListTable.set(this, list);
       }
       return list;
     },

tests/ShadowDOM/js/DOMTokenList.js

@@ -58,7 +58,6 @@ suite('DOMTokenList', function() {
   test('contains', function() {
     var div = document.createElement('div');
     var classList = div.classList;
-    assert.isFalse(classList.contains());
     assert.isFalse(classList.contains('a'));
     div.className = 'a';
     assert.isTrue(classList.contains('a'));
@@ -110,4 +109,13 @@ suite('DOMTokenList', function() {
     div.className = 'b a';
     assert.equal(classList.toString(), 'b a');
   });
+
+  test('index', function() {
+    var div = document.createElement('div');
+    var classList = div.classList;
+    classList.add('a');
+    classList.add('b');
+    assert.equal(classList[0], 'a');
+    assert.equal(classList[1], 'b');
+  });
 });