Implement measurement using futures

client/samples/total/src/InnerMenuView.dart

Index: client/samples/total/src/InnerMenuView.dart
diff --git a/client/samples/total/src/InnerMenuView.dart b/client/samples/total/src/InnerMenuView.dart
index 1fbb9cb3234664749133e6fc5da9fbef85988b4c..0fc016f38df5821f17a65dd44f28a820602da425 100644
--- a/client/samples/total/src/InnerMenuView.dart
+++ b/client/samples/total/src/InnerMenuView.dart
@@ -47,11 +47,14 @@ class InnerMenuView {
   // cell.
   static void _pinHeight(Window window, TableRowElement row) {
     Element firstCell = row.cells[0];
-    CSSStyleDeclaration s = window.getComputedStyle(firstCell, "");
-    int height = firstCell.clientHeight
-        - HtmlUtils.fromPx(s.getPropertyValue('padding-top'))
-        - HtmlUtils.fromPx(s.getPropertyValue('padding-bottom'));
-    firstCell.style.setProperty('height', HtmlUtils.toPx(height));
+    final firstCellRect = firstCell.rect;
+    final style = firstCell.computedStyle;
+    window.requestLayoutFrame(() {

[arv (Not doing code reviews), 2011/10/27 05:50:24]

Is there nothing like Q's join?

https://github.com/kriskowal/q

var Q = require("q");
var aPromise = aFunction();
var bPromise = bFunction();
Q.join(aPromise, bPromise, function (aValue, bValue) {
    return cValue;
});

[Jacob, 2011/10/27 20:59:25]

there isn't anything yet but it would be easy enough to add. When I started out
I was considering that sort of design and used it for some of the list view and
scrolling code i ported.  then things got painful for the cases where N promises
needed to be joined and so I started using requestLayoutFrame instead which
leverages the fact that we know all the layout promises will be evaluated at
once so we don't need to explicitly join and wait for all of them separately.
That said, the name requestLayoutFrame is somewhat confusing as it is really
waitForLayoutToComplete.  If you have a better name or a better concept that
will meet these use cases, let me know.

+      int height = firstCellRect.value.client.height
+          - HtmlUtils.fromPx(style.value.getPropertyValue('padding-top'))
+          - HtmlUtils.fromPx(style.value.getPropertyValue('padding-bottom'));
+      firstCell.style.setProperty('height', HtmlUtils.toPx(height));
+    });
   }
 
   // Reverses the damage done by _pinHeight.
@@ -209,21 +212,25 @@ class InnerMenuView {
     }
 
     // Must take into account the top of the table due to scrolling.
-    int tableTop = _row.offsetParent.getBoundingClientRect().top.toInt();
+    final offsetParentRect = _row.offsetParent.rect;
+    final rowRect = _row.rect;
+    window.requestLayoutFrame(() {
+      int tableTop = offsetParentRect.value.bounding.top.toInt();
 
-    // Get the current bounding box of the row we're attached to.
-    ClientRect rowRect = _row.getBoundingClientRect();
-    CSSStyleDeclaration style = _bar.style;
+      // Get the current bounding box of the row we're attached to.
+      ClientRect boundingRowRect = rowRect.value.bounding;
+      CSSStyleDeclaration style = _bar.style;
 
-    int top = rowRect.top.toInt() + _initialRowHeight - tableTop;
-    int height = rowRect.height.toInt() - _initialRowHeight;
+      int top = boundingRowRect.top.toInt() + _initialRowHeight - tableTop;
+      int height = boundingRowRect.height.toInt() - _initialRowHeight;
 
-    _currentRowHeight = height;
+      _currentRowHeight = height;
 
-    style.setProperty("top", HtmlUtils.toPx(top));
-    style.setProperty("height", HtmlUtils.toPx(height));
+      style.setProperty("top", HtmlUtils.toPx(top));
+      style.setProperty("height", HtmlUtils.toPx(height));
 
-    _innerMenuMoved();
+      _innerMenuMoved();
+    });
   }
 
   // Update the style buttons for the selected style.