Implement measurement using futures

client/samples/total/src/InnerMenuView.dart

 // Copyright (c) 2011, 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.
 
 // TODO: RE: implements RequestAnimationFrameCallback. File bug
 // against dom libs because it should be possible to pass a function
 // to webkitRequestAnimationFrame just like addEventListener.
 class InnerMenuView {
   static final List<String> _textAlignmentClassNames = const <String>[ "l", "c", "r" ];
   static final List<int> _textAlignmentValues = const <int>[
@@ skipping 29 matching lines @@
 
   // TODO: HACK. When we expand the border on our table cells,
   // the sizes for the table will be contradictory since the row is
   // set to a height that is smaller than the offsetHeight of row. This
   // will cause the cells to become smaller (visual jitter). To work around
   // we set the height of the cell explicitly. Sadly this requires us
   // to use the computed style to determine the current padding of the
   // 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(() {
+      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.
   static void _unpinHeight(TableRowElement row) {
     Element firstCell = row.cells[0];
     firstCell.style.removeProperty('height');
   }
 
   ColorPicker _backgroundColorPicker;
   // The interior UI of the menu.
@@ skipping 137 matching lines @@
   bool isAttachedTo(TableRowElement row) => _row == row;
 
   void updateSize() {
     if (_row.parent == null) {
       // The row we were attached to has disappeared (e.g., by scrolling), so clean up the menu bar
       _bar.remove();
       return;
     }
 
     // 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.
   void updateStyleUI(Style style) {
     // Text format buttons
     for (int i = 0; i < 4; i++) {
       int mask = _textStyleValues[i];
       _selectTextStyle(i, _textStyleClassNames[i], (style.textFormatIndex & mask) != 0);
     }
 
@@ skipping 172 matching lines @@
     for (int i = 0; i < 4; i++) {
       if (_textStyleButtons[i].attributes["class"].length > 1) {
         textStyle += _textStyleValues[i];
       }
     }
 
     _execute(Style _(Style s, int selectedIndex)
         => s.setTextFormatByIndex(selectedIndex), textStyle);
   }
 }