Ensure that sky Nodes are in the document when didMount() is fired. Refactor FixedHeightScrollable …

sky/examples/fn/widgets/fixedheightscrollable.dart

Index: sky/examples/fn/widgets/fixedheightscrollable.dart
diff --git a/sky/examples/fn/widgets/fixedheightscrollable.dart b/sky/examples/fn/widgets/fixedheightscrollable.dart
index 83733ea7c0b6cfe2716d7ba1ce1ef341bd3a1959..ea08322f93a271780fc187921682cc54e103675a 100644
--- a/sky/examples/fn/widgets/fixedheightscrollable.dart
+++ b/sky/examples/fn/widgets/fixedheightscrollable.dart
@@ -2,9 +2,13 @@ part of widgets;
 
 abstract class FixedHeightScrollable extends Component {
 
+  // TODO(rafaelw): This component really shouldn't have an opinion
+  // about how it is sized. The owning component should decide whether
+  // it's explicitly sized or flexible or whatever...
   static Style _style = new Style('''
     overflow: hidden;
     position: relative;
+    flex: 1;
     will-change: transform;'''
   );
 
@@ -13,40 +17,55 @@ abstract class FixedHeightScrollable extends Component {
     will-change: transform;'''
   );
 
-  double itemHeight;
-  double height;
   double minOffset;
   double maxOffset;
 
   double _scrollOffset = 0.0;
   FlingCurve _flingCurve;
   int _flingAnimationId;
+  double _height = 0.0;
+  double _itemHeight;
 
   FixedHeightScrollable({
     Object key,
-    this.itemHeight,
-    this.height,
     this.minOffset,
     this.maxOffset
   }) : super(key: key) {}
 
-
   List<Node> renderItems(int start, int count);
 
-  Node render() {
-    int drawCount = (height / itemHeight).round() + 1;
-    double alignmentDelta = -_scrollOffset % itemHeight;
-    if (alignmentDelta != 0.0) {
-      alignmentDelta -= itemHeight;
-    }
+  void didMount() {
+    var root = getRoot();
+    var item = root.firstChild.firstChild;
+    sky.ClientRect scrollRect = root.getBoundingClientRect();
+    sky.ClientRect itemRect = item.getBoundingClientRect();
+    assert(scrollRect.height > 0);
+    assert(itemRect.height > 0);
 
-    double drawStart = _scrollOffset + alignmentDelta;
-    int itemNumber = (drawStart / itemHeight).floor();
-
-    var transformStyle =
-        'transform: translateY(${(alignmentDelta).toStringAsFixed(2)}px)';
+    setState(() {
+      _height = scrollRect.height;
+      _itemHeight = itemRect.height;
+    });
+  }
 
-    var items = renderItems(itemNumber, drawCount);
+  Node render() {
+    var itemNumber = 0;
+    var drawCount = 1;
+    var transformStyle = '';
+
+    if (_height > 0.0) {
+      drawCount = (_height / _itemHeight).round() + 1;
+      double alignmentDelta = -_scrollOffset % _itemHeight;
+      if (alignmentDelta != 0.0) {
+        alignmentDelta -= _itemHeight;
+      }
+
+      double drawStart = _scrollOffset + alignmentDelta;
+      itemNumber = (drawStart / _itemHeight).floor();
+
+      transformStyle =
+          'transform: translateY(${(alignmentDelta).toStringAsFixed(2)}px)';
+    }
 
     return new Container(
       style: _style,
@@ -54,7 +73,7 @@ abstract class FixedHeightScrollable extends Component {
         new Container(
           style: _scrollAreaStyle,
           inlineStyle: transformStyle,
-          children: items
+          children: renderItems(itemNumber, drawCount)
         )
       ]
     )