Example showing alternate async measurement solution

client/view/PagedViews.dart

Index: client/view/PagedViews.dart
diff --git a/client/view/PagedViews.dart b/client/view/PagedViews.dart
index e5b54a5cb9db743d51f4cb4bdfcc0226e3546aab..42a9b22cc58214cd9a6406b0707d03448159fd1b 100644
--- a/client/view/PagedViews.dart
+++ b/client/view/PagedViews.dart
@@ -1,4 +1,4 @@
-// Copyright (c) 2011, the Dart project authors.  Please see the AUTHORS file
+// Copyright (c) 2012, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
@@ -116,12 +116,8 @@ class PagedColumnView extends View {
         true /* horizontalScrollEnabled */,
         true /* momementumEnabled */,
         () {
-          final completer = new Completer<Size>();
-          _container.rect.then((ElementRect rect) {
-            // Only view width matters.
-            completer.complete(new Size(_getViewLength(rect), 1));
-          });
-          return completer.future;
+          assert(window.inMeasurementFrame);
+          return new Size(_getViewLength(), 1);
         },
         Scroller.FAST_SNAP_DECELERATION_FACTOR);
 
@@ -131,36 +127,39 @@ class PagedColumnView extends View {
     return node;
   }
 
-  int _getViewLength(ElementRect rect) {
-    return _computePageSize(rect) * pages.length.value;
+  int _getViewLength() {
+    assert(window.inMeasurementFrame);
+    return _computePageSize() * pages.length.value;
   }
 
   // TODO(jmesserly): would be better to not have this code in enterDocument.
   // But we need computedStyle to read our CSS properties.
   void enterDocument() {
-    contentView.node.computedStyle.then((CSSStyleDeclaration style) {
-      _computeColumnGap(style);
+    window.requestMeasurementFrame(() {
+      _computeColumnGap();
 
       // Trigger a fake resize event so we measure our height.
       windowResized();
+    });
 
-      // Hook img onload events, so we find out about changes in content size
-      for (ImageElement img in contentView.node.queryAll("img")) {
-        if (!img.complete) {
-          img.on.load.add((e) {
-            _updatePageCount(null);
-          });
-        }
-      }
+    // If the selected page changes, animate to it.
+    watch(pages.target, (s) => _onPageSelected());
+    watch(pages.length, (s) => _onPageSelected());
 
-      // If the selected page changes, animate to it.
-      watch(pages.target, (s) => _onPageSelected());
-      watch(pages.length, (s) => _onPageSelected());
-    });
+    // Hook img onload events, so we find out about changes in content size
+    for (ImageElement img in contentView.node.queryAll("img")) {
+      if (!img.complete) {
+        img.on.load.add((e) {
+          _updatePageCount();
+        });
+      }
+    }
   }
 
   /** Read the column-gap setting so we know how far to translate the child. */
-  void _computeColumnGap(CSSStyleDeclaration style) {
+  void _computeColumnGap() {
+    assert(window.inMeasurementFrame);
+    final style = contentView.node.computedStyle;
     String gap = style.columnGap;
     if (gap == 'normal') {
       gap = style.fontSize;
@@ -179,23 +178,24 @@ class PagedColumnView extends View {
   }
 
   /** Watch for resize and update page count. */
-  void windowResized() {
-    // TODO(jmesserly): verify we aren't triggering unnecessary layouts.
-
+  LayoutCallback windowResized() {
+    assert(window.inMeasurementFrame);
     // The content needs to have its height explicitly set, or columns don't
-    // flow to the right correctly. So we copy our own height and set the height
-    // of the content.
-    node.rect.then((ElementRect rect) {
-      contentView.node.style.height = '${rect.offset.height}px';
-    });
-    _updatePageCount(null);
+    // flow to the right correctly. So we copy our own height and set the
+    // height of the content.
+    int offsetHeight = node.rect.offset.height; 
+    return () {
+      contentView.node.style.height = '${offsetHeight}px';
+      _updatePageCount();
+    };
   }
 
-  bool _updatePageCount(Callback callback) {
+  void _updatePageCount() {
     int pageLength = 1;
-    _container.rect.then((ElementRect rect) {
+    window.requestMeasurementFrame(() {
+      final rect = _container.rect;
       if (rect.scroll.width > rect.offset.width) {
-        pageLength = (rect.scroll.width / _computePageSize(rect))
+        pageLength = (rect.scroll.width / _computePageSize( ))
             .ceil().toInt();
       }
       pageLength = Math.max(pageLength, 1);
@@ -203,33 +203,34 @@ class PagedColumnView extends View {
       int oldPage = pages.target.value;
       int newPage = Math.min(oldPage, pageLength - 1);
 
-      // Hacky: make sure a change event always fires.
-      // This is so we adjust the 3d transform after resize.
-      if (oldPage == newPage) {
-        pages.target.value = 0;
-      }
-      assert(newPage < pageLength);
-      pages.target.value = newPage;
-      pages.length.value = pageLength;
-      if (callback != null) {
-        callback();
-      }
+      return () {
+        // Hacky: make sure a change event always fires.
+        // This is so we adjust the 3d transform after resize.
+        if (oldPage == newPage) {
+          pages.target.value = 0;
+        }
+        assert(newPage < pageLength);
+        pages.target.value = newPage;
+        pages.length.value = pageLength;
+      };
     });
   }
 
   void _onContentMoved(Event e) {
-    _container.rect.then((ElementRect rect) {
+    window.requestMeasurementFrame(() {
       num current = scroller.contentOffset.x;    
-      int pageSize = _computePageSize(rect);
-      pages.current.value = -(current / pageSize).round().toInt();
+      int pageSize = _computePageSize();
+      return () {
+        pages.current.value = -(current / pageSize).round().toInt();
+      };
     });
   }
 
   void _snapToPage(Event e) {
     num current = scroller.contentOffset.x;
     num currentTarget = scroller.currentTarget.x;
-    _container.rect.then((ElementRect rect) {
-      int pageSize = _computePageSize(rect);
+    window.requestMeasurementFrame(() {
+      int pageSize = _computePageSize();
       int destination;
       num currentPageNumber = -(current / pageSize).round();
       num pageNumber = -currentTarget / pageSize;
@@ -239,7 +240,7 @@ class PagedColumnView extends View {
       } else {
         if (currentPageNumber == pageNumber.round() &&
           (pageNumber - currentPageNumber).abs() > MIN_THROW_PAGE_FRACTION &&
-          -current + _viewportSize < _getViewLength(rect) && current < 0) {
+          -current + _viewportSize < _getViewLength() && current < 0) {
           // The user is trying to throw so we want to round up to the
           // nearest page in the direction they are throwing.
           pageNumber = currentTarget < current
@@ -250,17 +251,22 @@ class PagedColumnView extends View {
       }
       pageNumber = pageNumber.toInt();
       num translate = -pageNumber * pageSize;
-      pages.current.value = pageNumber;
-      if (currentTarget != translate) {
-        scroller.throwTo(translate, 0);
-      } else {
-        // Update the target page number when we are done animating.
-        pages.target.value = pageNumber;
-      }
+      return () {
+        pages.current.value = pageNumber;
+        if (currentTarget != translate) {
+          scroller.throwTo(translate, 0);
+        } else {
+          // Update the target page number when we are done animating.
+          pages.target.value = pageNumber;
+        }
+      };
     });
   }
 
-  int _computePageSize(ElementRect rect) {
+  int _computePageSize() {
+    assert(window.inMeasurementFrame);
+    final rect = _container.rect;
+
     // Hacky: we need to duplicate the way the columns are being computed,
     // including rounding, to figure out how far to translate the div.
     // See http://www.w3.org/TR/css3-multicol/#column-width
@@ -279,9 +285,11 @@ class PagedColumnView extends View {
   }
 
   void _onPageSelected() {
-    _container.rect.then((ElementRect rect) {
-      int translate = -pages.target.value * _computePageSize(rect);
-      scroller.throwTo(translate, 0);
+    window.requestMeasurementFrame(() {
+      int translate = -pages.target.value * _computePageSize();
+      return () {
+        scroller.throwTo(translate, 0);
+      };
     });
   }
 }