Allow "bulk editing" of the CssStyleDeclaration objects in an ElementList as well

sdk/lib/html/dart2js/html_dart2js.dart

Index: sdk/lib/html/dart2js/html_dart2js.dart
diff --git a/sdk/lib/html/dart2js/html_dart2js.dart b/sdk/lib/html/dart2js/html_dart2js.dart
index 6bd9e6c6428990929562323e0eef3bbd4756ed95..f6ff83137dc77219a95926115588acf9fbd6d283 100644
--- a/sdk/lib/html/dart2js/html_dart2js.dart
+++ b/sdk/lib/html/dart2js/html_dart2js.dart
@@ -2634,7 +2634,8 @@ class CssRule extends Interceptor native "CSSRule" {
 
 
 @DomName('CSSStyleDeclaration')
-class CssStyleDeclaration extends Interceptor native "CSSStyleDeclaration,MSStyleCSSProperties,CSS2Properties" {
+ class CssStyleDeclaration  extends Interceptor with 
+    CssStyleDeclarationBase  native "CSSStyleDeclaration,MSStyleCSSProperties,CSS2Properties" {
   factory CssStyleDeclaration() => new CssStyleDeclaration.css('');
 
   factory CssStyleDeclaration.css(String css) {
@@ -2642,7 +2643,37 @@ class CssStyleDeclaration extends Interceptor native "CSSStyleDeclaration,MSStyl
     style.cssText = css;
     return style;
   }
+  
+  String getPropertyValue(String propertyName) {
+    var propValue = _getPropertyValue(propertyName);
+    return propValue != null ? propValue : '';
+  }
 
+  @DomName('CSSStyleDeclaration.setProperty')
+  void setProperty(String propertyName, String value, [String priority]) {
+    // try/catch for IE9 which throws on unsupported values.
+    try {
+      if (priority == null) {
+        priority = '';
+      }
+      JS('void', '#.setProperty(#, #, #)', this, propertyName, value, priority);
+      // Bug #2772, IE9 requires a poke to actually apply the value.
+      if (JS('bool', '!!#.setAttribute', this)) {
+        JS('void', '#.setAttribute(#, #)', this, propertyName, value);
+      }
+    } catch (e) {}
+  }
+  
+  /**
+   * Checks to see if CSS Transitions are supported.
+   */
+  static bool get supportsTransitions {
+    if (JS('bool', '"transition" in document.body.style')) {
+      return true;
+    }
+    var propertyName = '${Device.propertyPrefix}Transition';
+    return JS('bool', '# in document.body.style', propertyName);
+  }
 
   @DomName('CSSStyleDeclaration.cssText')
   @DocsEditable()
@@ -2677,37 +2708,35 @@ class CssStyleDeclaration extends Interceptor native "CSSStyleDeclaration,MSStyl
   @DocsEditable()
   String removeProperty(String propertyName) native;
 
+}
 
-  String getPropertyValue(String propertyName) {
-    var propValue = _getPropertyValue(propertyName);
-    return propValue != null ? propValue : '';
+class _CssStyleDeclarationSet extends Object with CssStyleDeclarationBase {
+  final Iterable<Element> _elementIterable;
+  Iterable<CssStyleDeclaration> _elementCssStyleDeclarationSetIterable;
+
+  _CssStyleDeclarationSet(this._elementIterable) {
+    _elementCssStyleDeclarationSetIterable = new List.from(
+        _elementIterable).map((e) => e.style);
   }
 
-  @DomName('CSSStyleDeclaration.setProperty')
+  String getPropertyValue(String propertyName) =>
+      _elementCssStyleDeclarationSetIterable.first.getPropertyValue(
+          propertyName);
+
   void setProperty(String propertyName, String value, [String priority]) {
-    // try/catch for IE9 which throws on unsupported values.
-    try {
-      if (priority == null) {
-        priority = '';
-      }
-      JS('void', '#.setProperty(#, #, #)', this, propertyName, value, priority);
-      // Bug #2772, IE9 requires a poke to actually apply the value.
-      if (JS('bool', '!!#.setAttribute', this)) {
-        JS('void', '#.setAttribute(#, #)', this, propertyName, value);
-      }
-    } catch (e) {}
+    _elementCssStyleDeclarationSetIterable.forEach((e) =>
+        e.setProperty(propertyName, value, priority));
   }
+  // Important note: CssStyleDeclarationSet does NOT implement every method
+  // available in CssStyleDeclaration. Some of the methods don't make so much
+  // sense in terms of having a resonable value to return when you're
+  // considering a list of Elements. You will need to manually add any of the
+  // items in the MEMBERS set if you want that functionality.
+}
 
-  /**
-   * Checks to see if CSS Transitions are supported.
-   */
-  static bool get supportsTransitions {
-    if (JS('bool', '"transition" in document.body.style')) {
-      return true;
-    }
-    var propertyName = '${Device.propertyPrefix}Transition';
-    return JS('bool', '# in document.body.style', propertyName);
-  }
+abstract class CssStyleDeclarationBase {
+  String getPropertyValue(String propertyName);  
+  void setProperty(String propertyName, String value, [String priority]);
 
   // TODO(jacobr): generate this list of properties using the existing script.
   /** Gets the value of "align-content" */
@@ -7989,6 +8018,18 @@ abstract class ElementList<T extends Element> extends ListBase<T> {
   /** Replace the classes with `value` for every element in this list. */
   set classes(Iterable<String> value);
 
+  /**
+   * Access the union of all [CssStyleDeclaration]s that are associated with an
+   * [ElementList].
+   *
+   * Grouping the style objects all together provides easy editing of specific
+   * properties of a collection of elements. Setting a specific property value
+   * will set that property in all [Element]s in the [ElementList]. Getting a
+   * specific property value will return the value of the property of the first
+   * element in the [ElementList].
+   */
+  CssStyleDeclarationBase get style;
+
   /** 
    * Access dimensions and position of the Elements in this list.
    * 
@@ -8083,6 +8124,9 @@ class _FrozenElementList<T extends Element> extends ListBase<T> implements Eleme
   Element get single => _nodeList.single;
 
   CssClassSet get classes => new _MultiElementCssClassSet(_elementList);
+  
+  CssStyleDeclarationBase get style => 
+      new _CssStyleDeclarationSet(_elementList);
 
   void set classes(Iterable<String> value) {
     _elementList.forEach((e) => e.classes = value);