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);
 
-  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)
         )
       ]
     )

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;