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

Ensure that sky Nodes are in the document when didMount() is fired. Refactor FixedHeightScrollable to inspect heights rather than having the passed in

BUG=
R=abarth@chromium.org

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

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);
 
+  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);
+
+    setState(() {
+      _height = scrollRect.height;
+      _itemHeight = itemRect.height;
+    });
+  }
+
   Node render() {
-    int drawCount = (height / itemHeight).round() + 1;
-    double alignmentDelta = -_scrollOffset % itemHeight;
+    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;
+        alignmentDelta -= _itemHeight;
       }
 
       double drawStart = _scrollOffset + alignmentDelta;
-    int itemNumber = (drawStart / itemHeight).floor();
+      itemNumber = (drawStart / _itemHeight).floor();
 
-    var transformStyle =
+      transformStyle =
           'transform: translateY(${(alignmentDelta).toStringAsFixed(2)}px)';
-
-    var items = renderItems(itemNumber, drawCount);
+    }
 
     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)
         )
       ]
     )

examples/stocks-fn/stocklist.dart

@@ -7,7 +7,7 @@ class Stocklist extends FixedHeightScrollable {
   Stocklist({
     Object key,
     this.stocks
-  }) : super(key: key, itemHeight: 80.0, height: 800.0, minOffset: 0.0);
+  }) : super(key: key, minOffset: 0.0);
 
   List<Node> renderItems(int start, int count) {
     var items = [];

examples/stocks-fn/stockrow.dart

@@ -6,7 +6,6 @@ class StockRow extends MaterialComponent {
 
   static Style _style = new Style('''
     transform: translateX(0);
-    max-height: 48px;
     display: flex;
     align-items: center;
     border-bottom: 1px solid #F4F4F4;