Implement querySelector etc

shadowdom.js

@@ -21,6 +21,7 @@
     'wrappers/EventTarget.js',
     'wrappers/NodeList.js',
     'wrappers/Node.js',
+    'querySelector.js',
     'wrappers/node-interfaces.js',
     'wrappers/CharacterData.js',
     'wrappers/Element.js',

src/ShadowRenderer.js

@@ -225,10 +225,6 @@
     }
   }
 
-  var matchesSelector = oneOf(document.documentElement,
-      ['matchesSelector', 'msMatchesSelector', 'mozMatchesSelector',
-      'webkitMatchesSelector']);
-
   /**
    * @param {Element} node
    * @oaram {Element} point The insertion point element.
@@ -255,7 +251,7 @@
       return false;
 
     try {
-      return node[matchesSelector](select);
+      return node.matches(select);
     } catch (ex) {
       // Invalid selector.
       return false;

src/querySelector.js

@@ -0,0 +1,70 @@
+// Copyright 2013 The Toolkitchen 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(scope) {
+  'use strict';
+
+  function findOne(node, selector) {
+    var m, el = node.firstElementChild;
+    while (el) {
+      if (el.matches(selector))
+        return el;
+      m = findOne(el, selector);
+      if (m)
+        return m;
+      el = el.nextElementSibling;
+    }
+    return null;
+  }
+
+  function findAll(node, selector, results) {
+    var el = node.firstElementChild;
+    while (el) {
+      if (el.matches(selector))
+        results[results.length++] = el;
+      findAll(el, selector, results);
+      el = el.nextElementSibling;
+    }
+    return results;
+  }
+
+  // find and findAll will only match Simple Selectors,
+  // Structural Pseudo Classes are not guarenteed to be correct
+  // http://www.w3.org/TR/css3-selectors/#simple-selectors
+
+  var SelectorsInterface = {
+    querySelector: function(selector) {
+      return findOne(this, selector);
+    },
+    querySelectorAll: function(selector) {
+      return findAll(this, selector, new NodeList())
+    }
+  };
+
+  var GetElementsByInterface = {
+    getElementsByTagName: function(tagName) {
+      // TODO(arv): Check tagName?
+      return this.querySelectorAll(tagName);
+    },
+    getElementsByClassName: function(className) {
+      // TODO(arv): Check className?
+      return this.querySelectorAll('.' + className);
+    },
+    getElementsByTagNameNS: function(ns, tagName) {
+      // TODO(arv): Check tagName?
+      var result = new NodeList;
+      var els = this.getElementsByTagName(tagName);
+      for (var i = 0, j = 0; i < els.length; i++) {
+        if (els[i].namespace === ns)
+          result[j++] = els[i];
+      }
+      result.length = j;
+      return result;
+    }
+  };
+
+  scope.GetElementsByInterface = GetElementsByInterface;
+  scope.SelectorsInterface = SelectorsInterface;
+
+})(this.ShadowDOMPolyfill);

src/wrappers/Document.js

@@ -5,7 +5,9 @@
 (function(scope) {
   'use strict';
 
+  var GetElementsByInterface = scope.GetElementsByInterface;
   var ParentNodeInterface = scope.ParentNodeInterface;
+  var SelectorsInterface = scope.SelectorsInterface;
   var Node = scope.wrappers.Node;
   var defineWrapGetter = scope.defineWrapGetter;
   var mixin = scope.mixin;
@@ -32,17 +34,66 @@
   defineWrapGetter(Document, 'body');
   defineWrapGetter(Document, 'head');
 
+  // document cannot be overridden so we override a bunch of its methods
+  // directly on the instance.
+
+  function wrapMethod(name) {
+    var original = document[name];
+    Document.prototype[name] = function() {
+      return wrap(original.apply(this.impl, arguments));
+    };
+  }
+
+  [
+    'getElementById',
+    'createElement',
+    'createElementNS',
+    'createTextNode',
+    'createDocumentFragment',
+    'createEvent',
+    'createEventNS',
+  ].forEach(wrapMethod);
+
+  var originalAdoptNode = document.adoptNode;
+  Document.prototype.adoptNode = function(node) {
+    originalAdoptNode.call(this.impl, unwrap(node));
+    return node;
+  };
+
   // We also override some of the methods on document.body and document.head
   // for convenience.
-  forwardMethodsToWrapper([window.HTMLBodyElement, window.HTMLHeadElement],
-      [
-        'appendChild',
-        'insertBefore',
-        'replaceChild',
-        'removeChild'
-      ]);
+  forwardMethodsToWrapper([
+    window.HTMLBodyElement,
+    window.HTMLDocument || window.Document,  // Gecko adds these to HTMLDocument
+    window.HTMLHeadElement,
+  ], [
+    'appendChild',
+    'getElementsByClassName',
+    'getElementsByTagName',
+    'getElementsByTagNameNS',
+    'insertBefore',
+    'querySelector',
+    'querySelectorAll',
+    'removeChild',
+    'replaceChild',
+  ]);
 
+  forwardMethodsToWrapper([
+    window.HTMLDocument || window.Document,  // Gecko adds these to HTMLDocument
+  ], [
+    'adoptNode',
+    'createDocumentFragment',
+    'createElement',
+    'createElementNS',
+    'createEvent',
+    'createEventNS',
+    'createTextNode',
+    'getElementById',
+  ]);
+
+  mixin(Document.prototype, GetElementsByInterface);
   mixin(Document.prototype, ParentNodeInterface);
+  mixin(Document.prototype, SelectorsInterface);
 
   mixin(Document.prototype, {
     get implementation() {
@@ -55,15 +106,6 @@
       return implementation;
     }
   });
-
-  var originalAdoptNode = document.adoptNode;
-  Document.prototype.adoptNode = function(node) {
-    originalAdoptNode.call(this.impl, unwrap(node));
-    return node;
-  };
-  Object.getPrototypeOf(document).adoptNode = function(node) {
-    return wrap(this).adoptNode(node);
-  };
 
   registerWrapper(OriginalDocument, Document,
       document.implementation.createHTMLDocument(''));
@@ -73,53 +115,10 @@
   if (window.HTMLDocument)
     registerWrapper(window.HTMLDocument, Document);
 
-  function wrapMethod(name) {
-    var proto = Object.getPrototypeOf(document);
-    var original = proto[name];
-    proto[name] = function() {
-      return wrap(original.apply(this, arguments));
-    };
-    Document.prototype[name] = function() {
-      return wrap(original.apply(this.impl, arguments));
-    };
-  }
-
-  // document cannot be overridden so we override a bunch of its methods
-  // directly on the instance
-
-  [
-    'getElementById',
-    'querySelector',
-    'createElement',
-    'createElementNS',
-    'createTextNode',
-    'createDocumentFragment',
-    'createEvent',
-    'createEventNS',
-  ].forEach(wrapMethod);
-
-  function wrapNodeListMethod(name) {
-    var proto = Object.getPrototypeOf(document);
-    var original = proto[name];
-    proto[name] = function() {
-      return wrapNodeList(original.apply(this, arguments));
-    };
-    Document.prototype[name] = function() {
-      return wrapNodeList(original.apply(this.impl, arguments));
-    };
-  }
-
-  [
-    'getElementsByTagName',
-    'getElementsByTagNameNS',
-    'getElementsByClassName',
-    'querySelectorAll'
-  ].forEach(wrapNodeListMethod);
-
   wrapEventTargetMethods([
-    window.HTMLDocument || window.Document,  // Gecko adds these to HTMLDocument
     window.HTMLBodyElement,
-    window.HTMLHeadElement
+    window.HTMLDocument || window.Document,  // Gecko adds these to HTMLDocument
+    window.HTMLHeadElement,
   ]);
 
   function DOMImplementation(impl) {

src/wrappers/Element.js

@@ -6,6 +6,7 @@
   'use strict';
 
   var ChildNodeInterface = scope.ChildNodeInterface;
+  var GetElementsByInterface = scope.GetElementsByInterface;
   var Node = scope.wrappers.Node;
   var ParentNodeInterface = scope.ParentNodeInterface;
   var SelectorsInterface = scope.SelectorsInterface;
@@ -17,6 +18,12 @@
   var shadowRootTable = new SideTable();
   var OriginalElement = window.Element;
 
+  var originalMatches =
+      OriginalElement.prototype.matches ||
+      OriginalElement.prototype.mozMatchesSelector ||
+      OriginalElement.prototype.msMatchesSelector ||
+      OriginalElement.prototype.webkitMatchesSelector;
+
   function Element(node) {
     Node.call(this, node);
   }
@@ -43,21 +50,18 @@
       // the rendering content[select] or if it effects the value of a content
       // select.
       this.invalidateShadowRenderer();
+    },
+
+    matches: function(selector) {
+      return originalMatches.call(this.impl, selector);
     }
   });
 
   mixin(Element.prototype, ChildNodeInterface);
+  mixin(Element.prototype, GetElementsByInterface);
   mixin(Element.prototype, ParentNodeInterface);
   mixin(Element.prototype, SelectorsInterface);
 
-  [
-    'getElementsByTagName',
-    'getElementsByTagNameNS',
-    'getElementsByClassName'
-  ].forEach(function(name) {
-    addWrapNodeListMethod(Element, name);
-  });
-
   registerWrapper(OriginalElement, Element);
 
   scope.wrappers.Element = Element;

src/wrappers/generic.js

@@ -5,6 +5,7 @@
 (function(scope) {
   'use strict';
 
+  var GetElementsByInterface = scope.GetElementsByInterface;
   var ParentNodeInterface = scope.ParentNodeInterface;
   var SelectorsInterface = scope.SelectorsInterface;
   var mixin = scope.mixin;
@@ -13,6 +14,7 @@
   var DocumentFragment = registerObject(document.createDocumentFragment());
   mixin(DocumentFragment.prototype, ParentNodeInterface);
   mixin(DocumentFragment.prototype, SelectorsInterface);
+  mixin(DocumentFragment.prototype, GetElementsByInterface);
 
   var Text = registerObject(document.createTextNode(''));
   var Comment = registerObject(document.createComment(''));
@@ -21,4 +23,4 @@
   scope.wrappers.DocumentFragment = DocumentFragment;
   scope.wrappers.Text = Text;
 
-})(this.ShadowDOMPolyfill);
+})(this.ShadowDOMPolyfill);

src/wrappers/node-interfaces.js

@@ -66,17 +66,7 @@
     }
   };
 
-  var SelectorsInterface = {
-    querySelector: function(s) {
-      return wrap(this.impl.querySelector(s));
-    },
-    querySelectorAll: function(s) {
-      return wrapNodeList(this.impl.querySelectorAll(s));
-    }
-  };
-
   scope.ChildNodeInterface = ChildNodeInterface;
   scope.ParentNodeInterface = ParentNodeInterface;
-  scope.SelectorsInterface = SelectorsInterface;
 
 })(this.ShadowDOMPolyfill);