Make splash animations abort on scroll.

I also fixed the transform hack in material-element to clean
up after itself.

I also discovered that our namedSetter implementation did not
handle null (it crashed) while doing this.  I fixed that
and tested my fix.

This runs great on a Nexus 5, but poorly on an Nexus 10.

R=abarth@chromium.org
BUG=

Review URL: https://codereview.chromium.org/956753002

engine/bindings/scripts/templates/interface_cpp.template

@@ -49,7 +49,7 @@ static void namedPropertySetter(Dart_NativeArguments args)
         String name = DartConverter<String>::FromArguments(args, 1, exception);
         if (exception)
             goto fail;
-        String value = DartConverter<String>::FromArguments(args, 2, exception);
+        String value = DartConverter<String>::FromArgumentsWithNullCheck(args, 2, exception);
         if (exception)
             goto fail;
         {{named_property_setter.cpp_value}};

framework/material-element.sky

@@ -11,20 +11,52 @@ import "dart:sky";
 HTMLStyleElement _kStyleElement;
 
 class MaterialElement extends SkyElement {
+  Set<SkyInkSplash> _activeSplashes = new Set();
+  bool _didAddTransformHack = false;
+
   MaterialElement() {
     addEventListener('pointerdown', _handlePointerDown);
+    addEventListener('gesturescrollstart', _handleScrollStart);
   }
 
-  void _handlePointerDown(PointerEvent event) {
+  void addTransformHack() {
+    if (_didAddTransformHack)
+      return;
+    if (style['transform'] != null)
+      return;
+    _didAddTransformHack = true;
     // We set the transform here to become a container for absolutely positioned
     // elements. We should either have a better way of becoming such a container
     // or we should make every RenderBlock be such a container.
     style['transform'] = 'translateX(0)';
+  }
+
+  void removeTransformHack() {
+    if (!_didAddTransformHack)
+      return;
+    style.removeProperty('transform');
+    _didAddTransformHack = false;
+  }
 
+  void _handlePointerDown(PointerEvent event) {
+    addTransformHack();
     ClientRect rect = getBoundingClientRect();
     SkyInkSplash splash = new SkyInkSplash();
     shadowRoot.prependChild(splash);
-    splash.start(event.x, event.y, rect);
+    splash.start(event.x, event.y, rect).then(_handleSplashComplete);
+    _activeSplashes.add(splash);
+  }
+
+  void _handleSplashComplete(SkyInkSplash splash) {
+    _activeSplashes.remove(splash);
+    if (_activeSplashes.isEmpty)
+      removeTransformHack();
+  }
+
+  void _handleScrollStart(GestureEvent event) {
+    for (SkyInkSplash splash in _activeSplashes) {
+      splash.cancel();
+    }
   }
 }
 </script>

framework/sky-ink-splash.sky

@@ -36,6 +36,7 @@ import "animation/curves.dart";
 import "animation/timer.dart";
 import "dart:math" as math;
 import "dart:sky";
+import "dart:async";
 
 const double _kSplashSize = 400.0;
 const double _kSplashDuration = 500.0;
@@ -46,6 +47,7 @@ class SkyInkSplash extends SkyElement implements AnimationDelegate {
   Element _splash;
   double _offsetX;
   double _offsetY;
+  Completer<SkyInkSplash> _completer = new Completer();
 
   SkyInkSplash() {
     _animation = new AnimationController(this);
@@ -55,7 +57,7 @@ class SkyInkSplash extends SkyElement implements AnimationDelegate {
     _splash = shadowRoot.getElementById('splash');
   }
 
-  void start(double x, double y, ClientRect rect) {
+  Future start(double x, double y, ClientRect rect) {
     _offsetX = x - rect.left;
     _offsetY = y - rect.top;
     _animation.start(
@@ -63,11 +65,23 @@ class SkyInkSplash extends SkyElement implements AnimationDelegate {
       end: _kSplashSize,
       duration: _kSplashDuration,
       curve: easeOut);
+    return _completer.future;
+  }
+
+  void _done() {
+    remove();
+    _completer.complete(this);
+  }
+
+  void cancel() {
+    // TODO(eseidel): Should fade away instead of stopping immediately.
+    _animation.stop();
+    _done();
   }
 
   void updateAnimation(double p) {
     if (p == _kSplashSize) {
-      remove();
+      _done();
       return;
     }
     _splash.style['top'] = '${_offsetY - p/2}px';

tests/styles/inline-style-crash-expected.txt

+CONSOLE: unittest-suite-wait-for-done
+CONSOLE: PASS: should not crash when setting style to null
+CONSOLE: 
+CONSOLE: All 1 tests passed.
+CONSOLE: unittest-suite-success
+DONE

tests/styles/inline-style-crash.sky

+<html>
+<foo />
+<script>
+import "../resources/third_party/unittest/unittest.dart";
+import "../resources/unit.dart";
+
+import "dart:sky";
+
+void main() {
+  initUnit();
+
+  test('should not crash when setting style to null', () {
+    var foo = document.querySelector('foo');
+    expect(foo.style['color'], isNull);
+    foo.style["color"] = null; // This used to crash.
+    expect(foo.style['color'], isNull);
+    foo.style["color"] = "blue";
+    expect(foo.style['color'], equals("rgb(0, 0, 255)"));
+    foo.style["color"] = null;
+    expect(foo.style['color'], isNull);
+    foo.style["color"] = "blue";
+    expect(foo.style['color'], equals("rgb(0, 0, 255)"));
+    foo.style.removeProperty("color");
+    expect(foo.style['color'], isNull);
+  });
+}
+</script>
+</html>