Make Element.animate work in dart2js Chrome

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

 // Copyright (c) 2012, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
 part of $LIBRARYNAME;
 
 class _ChildrenElementList extends ListBase<Element>
     implements NodeListWrapper {
   // Raw Element.
   final Element _element;
@@ skipping 761 matching lines @@
   /** *Deprecated*: override [attached] instead. */
   @Experimental()
   @deprecated
   void enteredView() {}
 
   /** *Deprecated*: override [detached] instead. */
   @Experimental()
   @deprecated
   void leftView() {}
 
+$if DART2JS
+  /**
+   * Creates a new AnimationEffect object whose target element is the object
+   * on which the method is called, and calls the play() method of the
+   * AnimationTimeline object of the document timeline of the node document
+   * of the element, passing the newly created AnimationEffect as the argument
+   * to the method. Returns an AnimationPlayer for the effect.
+   *
+   * Examples
+   *
+   *       var animation = elem.animate([{"opacity": 75}, {"opacity": 0 }, 200);
+   *

[sra1, 2015/03/18 00:20:47]

1. Indent +4
2. Missing ]
3. Inconsistent space on second opacity.

[Alan Knight, 2015/03/18 20:09:20]

1. dartfmt says only +2
2. Done
3. Done

[sra1, 2015/03/19 02:20:46]

Markdown in this doc comment starts recognizing a block as sample code at +4 but
the 'var' line is +6 from 'Examples'. Make it +4

[Alan Knight, 2015/03/23 18:57:52]

Ah, I misunderstood. Done.

+   *       var animation = elem.animate([
+   *         {"transform": "translate(100px, -100%)"},
+   *         {"transform" : "translate(400px, 500px)"}
+   *       ], 1500);  
+   *
+   * The [frames] parameter is a List<Map>, where the
+   * map entries specify CSS animation effects. The
+   * [timing] paramter can be a double, representing the number of milliseconds
+   * for the transition, or a Map with fields corresponding to those
+   * of the [Timing] object.
+   *
+   * This is not yet supported in Dartium.
+  **/
+// TODO(alanknight): Correct above comment once it works in Dartium.
+  @Experimental
+  @SupportedBrowser(SupportedBrowser.CHROME, '36')
+  AnimationPlayer animate(List<Map<String, dynamic>> frames, [timing]) {
+    // If frames is an AnimationEffect, leave it alone?

[sra1, 2015/03/18 00:20:47]

Be more defensive. Fail if not a list or AnimationEffect.

[Alan Knight, 2015/03/18 20:09:20]

Oops. It must de facto be a List, that comment was old. It turns out
AnimationEffect is not constructable. Checked for a List and that the entries
are Maps.

+    var convertedFrames = frames;
+    if (convertedFrames is List) {
+      convertedFrames = frames.map(
+          (x) => convertDartToNative_Dictionary(x)).toList();

[sra1, 2015/03/18 00:20:47]

frames.map(convertDartToNative_Dictionary).toList()

[Alan Knight, 2015/03/18 20:09:20]

Oh yeah. Nice. Done.

+    }
+    var convertedTiming = timing;
+    if (convertedTiming is Map) {
+      convertedTiming = convertDartToNative_Dictionary(convertedTiming);
+    }
+    return _animate(convertedFrames, convertedTiming);

[sra1, 2015/03/18 00:20:47]

What if timing is null, does it work for both is null and is undefined? Probably
best to call _animate with one arg if timing == null.

[Alan Knight, 2015/03/18 20:09:20]

It seems to make no difference between 0, null, and undefined. Changed the way
it's called. Added test.

+  }
+
+  @DomName('Element.animate')
+  @JSName('animate')
+  @Experimental() // untriaged
+  AnimationPlayer _animate(Object effect, [timing]) native;
+$endif
   /**
    * Called by the DOM whenever an attribute on this has been changed.
    */
   void attributeChanged(String name, String oldValue, String newValue) {}
 
   // Hooks to support custom WebComponents.
 
 $if DART2JS
   @Creates('Null')  // Set from Dart code; does not instantiate a native type.
 $endif
@@ skipping 702 matching lines @@
   const ScrollAlignment._internal(this._value);
   toString() => 'ScrollAlignment.$_value';
 
   /// Attempt to align the element to the top of the scrollable area.
   static const TOP = const ScrollAlignment._internal('TOP');
   /// Attempt to center the element in the scrollable area.
   static const CENTER = const ScrollAlignment._internal('CENTER');
   /// Attempt to align the element to the bottom of the scrollable area.
   static const BOTTOM = const ScrollAlignment._internal('BOTTOM');
 }