Aggregate CSS manipulation functions in html lib.

tools/dom/templates/html/impl/impl_Element.darttemplate

Index: tools/dom/templates/html/impl/impl_Element.darttemplate
diff --git a/tools/dom/templates/html/impl/impl_Element.darttemplate b/tools/dom/templates/html/impl/impl_Element.darttemplate
index 3b3ca0b26dfd5e8516cdd8d37fc41303a0d3d918..f8e34051fec52a9e44d8e8299f53e40e2e6c3ac5 100644
--- a/tools/dom/templates/html/impl/impl_Element.darttemplate
+++ b/tools/dom/templates/html/impl/impl_Element.darttemplate
@@ -141,10 +141,14 @@ class _ChildrenElementList extends ListBase<Element> {
 // a better option given that we cannot quite force NodeList to be an
 // ElementList as there are valid cases where a NodeList JavaScript object
 // contains Node objects that are not Elements.
-class _FrozenElementList<T extends Element> extends ListBase<T> {
+/** 
+ * An immutable list containing HTML elements. This list contains some
+ * additional methods for ease of CSS manipulation on a group of elements.
+ */
+class HtmlList<T extends Element> extends ListBase<T> {

[Emily Fortuna, 2013/05/03 20:03:50]

Is this "T extends Element" correct? I'm confused because we're storing a
_nodeList of List<Node> and Node does not extend Element.... It affects whether
I need to filter the list in my "classes" methods.

[blois, 2013/05/03 20:13:37]

Can we make this HtmlList and have it just be an interface, then make
_FrozenElementList implement that?

I believe that <T extends Element> is correct.

   final List<Node> _nodeList;
 
-  _FrozenElementList._wrap(this._nodeList);
+  HtmlList._wrap(this._nodeList);
 
   int get length => _nodeList.length;
 
@@ -167,6 +171,86 @@ class _FrozenElementList<T extends Element> extends ListBase<T> {
   Element get last => _nodeList.last;
 
   Element get single => _nodeList.single;
+
+  /**
+   * The union of all CSS classes applied to the elements in this list.
+   *
+   * This set makes it easy to add, remove or toggle (add if not present, remove
+   * if present) the classes applied to a collection of elements.
+   *
+   *     htmlList.classes.add('selected');
+   *     htmlList.classes.toggle('isOnline');
+   *     htmlList.classes.remove('selected');
+   */
+  CssClassSet get classes => new _MultiElementCssClassSet(
+      _nodeList.where((e) => e is Element));
+
+  /** Replace the classes with `value` for every element in this list. */
+  void set classes(Iterable<String> value) {
+    _nodeList.where((e) => e is Element).forEach((e) { 
+        e.classes.clear();
+        e.classes.addAll(value); 
+      });
+  }
+}
+
+/**
+ * A set (union) of the CSS classes that are present in a set of elements.
+ * Implemented separately from _ElementCssClassSet for performance.
+ */
+class _MultiElementCssClassSet extends CssClassSet {
+  final Iterable<Element> _elementIterable;
+  Iterable<_ElementCssClassSet> _elementCssClassSetIterable;
+
+  _MultiElementCssClassSet(this._elementIterable) {
+    _elementCssClassSetIterable = new List.from(_elementIterable).map(
+        (e) => new _ElementCssClassSet(e));
+  }
+
+  Set<String> readClasses() {
+    var s = new LinkedHashSet<String>();
+    _elementCssClassSetIterable.forEach((e) => s.addAll(e.readClasses()));
+    return s;
+  }
+
+  void writeClasses(Set<String> s) {
+    var classes = new List.from(s).join(' ');
+    for (Element e in _elementIterable) {
+      e.$dom_className = classes;
+    }
+  }
+
+  /**
+   * Helper method used to modify the set of css classes on this element.
+   *
+   *   f - callback with:
+   *   s - a Set of all the css class name currently on this element.
+   *
+   *   After f returns, the modified set is written to the
+   *       className property of this element.
+   */
+  void modify( f(Set<String> s)) {
+    _elementCssClassSetIterable.forEach((e) => e.modify(f));
+  }
+
+  /**
+   * Adds the class [value] to the element if it is not on it, removes it if it
+   * is.
+   */
+  bool toggle(String value) => 
+      _modifyWithReturnValue((e) => e.toggle(value));
+  
+  /**
+   * Remove the class [value] from element, and return true on successful
+   * removal.
+   *
+   * This is the Dart equivalent of jQuery's
+   * [removeClass](http://api.jquery.com/removeClass/).
+   */
+  bool remove(Object value) => _modifyWithReturnValue((e) => e.remove(value));
+
+  bool _modifyWithReturnValue(f) => _elementCssClassSetIterable.fold(
+      false, (prevValue, element) => f(element) || prevValue);
 }
 
 class _ElementCssClassSet extends CssClassSet {
@@ -289,8 +373,8 @@ $(ANNOTATIONS)abstract class $CLASSNAME$EXTENDS$IMPLEMENTS$NATIVESPEC {
    *
    *     var items = element.query('.itemClassName');
    */
-  List<Element> queryAll(String selectors) =>
-    new _FrozenElementList._wrap($dom_querySelectorAll(selectors));
+  HtmlList<Element> queryAll(String selectors) =>
+    new HtmlList._wrap($dom_querySelectorAll(selectors));
 
   /**
    * The set of CSS classes applied to this element.