Make Drawer in components2 work

sky/sdk/lib/framework/components2/drawer.dart

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'animated_component.dart';
 import '../animation/animated_value.dart';
 import '../animation/curves.dart';
 import '../fn2.dart';
+import '../rendering/box.dart';
 import '../theme/colors.dart';
+import 'animated_component.dart';
 import 'dart:math' as math;
 import 'dart:sky' as sky;
 import 'material.dart';
+import 'package:vector_math/vector_math.dart';
 
 const double _kWidth = 304.0;
 const double _kMinFlingVelocity = 0.4;
 const double _kBaseSettleDurationMS = 246.0;
 const double _kMaxSettleDurationMS = 600.0;
 const Curve _kAnimationCurve = parabolicRise;
 
 typedef void DrawerStatusChangeHandler (bool showing);
 
 class DrawerController {
@@ skipping 60 matching lines @@
     double targetPosition = direction < 0.0 ? -_kWidth : 0.0;
     double distance = (targetPosition - position.value).abs();
     double duration = distance / velocityX;
 
     if (distance > 0)
       position.animateTo(targetPosition, duration, curve: linear);
   }
 }
 
 class Drawer extends AnimatedComponent {
-  // TODO(abarth): We need a better way to become a container for absolutely
-  // positioned elements.
-  static final Style _style = new Style('''
-    transform: translateX(0);''');
-
-  static final Style _maskStyle = new Style('''
-    background-color: black;
-    will-change: opacity;'''
-  );
-
-  static final Style _contentStyle = new Style('''
-    background-color: ${Grey[50]};
-    will-change: transform;
-    width: ${_kWidth}px;'''
-  );
-
   List<UINode> children;
   int level;
   DrawerController controller;
 
   double _position;
 
   Drawer({
     Object key,
     this.controller,
     this.children,
     this.level: 0
   }) : super(key: key) {
     animateField(controller.position, #_position);
   }
 
   UINode build() {
-    String maskInlineStyle = 'opacity: ${(_position / _kWidth + 1) * 0.5}';
-    String contentInlineStyle = 'transform: translateX(${_position}px)';
+    Matrix4 transform = new Matrix4.identity();
+    transform.translate(_position);
+
+    int maskColor = ((_position / _kWidth + 1) * 0xFF).floor() << 24;
 
     var mask = new EventListenerNode(
       new Container(
-        style: _maskStyle,
-        inlineStyle: maskInlineStyle
+        desiredSize: new sky.Size.infinite(),
+        decoration: new BoxDecoration(backgroundColor: maskColor)

[Hixie, 2015/06/03 21:39:56]

this will need fixing with the new api for color

       ),
       onGestureTap: controller.handleMaskTap,
       onGestureFlingStart: controller.handleFlingStart
     );
 
     Material content = new Material(
       content: new Container(
-        style: _contentStyle,
-        inlineStyle: contentInlineStyle,
-        children: children
+        decoration: new BoxDecoration(backgroundColor: 0xFFFFFFFF),
+        desiredSize: new sky.Size(_kWidth, double.INFINITY),

[Hixie, 2015/06/03 21:39:56]

sky.Size.onlyWidth?

+        transform: transform,
+        child: new BlockContainer(children: children)
       ),
       level: level);
 
     return new EventListenerNode(
-      new FillStackContainer(
-        style: _style,
+      new StackContainer(
         children: [ mask, content ]
       ),
       onPointerDown: controller.handlePointerDown,
       onPointerMove: controller.handlePointerMove,
       onPointerUp: controller.handlePointerUp,
       onPointerCancel: controller.handlePointerCancel
     );
   }
 }