Implement measurement using futures

client/html/src/ElementWrappingImplementation.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(jacobr): use Lists.dart to remove some of the duplicated functionality.
 class _ChildrenElementList implements ElementList {
   // Raw Element.
   final _element;
   final _childElements;
 
@@ skipping 393 matching lines @@
   EventListenerList get search() => _get("search");
   EventListenerList get select() => _get("select");
   EventListenerList get selectStart() => _get("selectstart");
   EventListenerList get submit() => _get("submit");
   EventListenerList get touchCancel() => _get("touchcancel");
   EventListenerList get touchEnd() => _get("touchend");
   EventListenerList get touchLeave() => _get("touchleave");
   EventListenerList get touchMove() => _get("touchmove");
   EventListenerList get touchStart() => _get("touchstart");
   EventListenerList get transitionEnd() => _get("webkitTransitionEnd");
-  EventListenerList get fullscreenChange() => _get("fullscreenchange");
+  EventListenerList get fullscreenChange() => _get("webkitfullscreenchange");
+}
+
+class SimpleClientRect implements ClientRect {
+  final num left;
+  final num top;
+  final num width;
+  final num height;
+  num get right() => left + width;
+  num get bottom() => top + height;
+
+  const SimpleClientRect(this.left, this.top, this.width, this.height);
+
+  bool operator ==(ClientRect other) {
+    return other !== null && left == other.left && top == other.top
+        && width == other.width && height == other.height;
+  }
+
+  String toString() => "($left, $top, $width, $height)";

[nweiz, 2011/10/28 03:58:38]

Might we want this to indicate that the object in question is a ClientRect? That
can be helpful when debugging.

[Jacob, 2011/10/31 22:09:50]

Chatted with the rest of the team over here are our current thinking is toString
should be optimized for terse debugging.
If you want to find out the class, etc then there will be other ways to achieve
that in the future using mirrors, convenient helpers built into the REPL, etc.

This way is better because 
print('client=$client offset=$offset  scroll=$scroll')
is easy to read instead of being overly verbose.

[nweiz, 2011/11/01 00:49:22]

In my experience, "what is this object I have?" is a pretty common question you
want answered when debugging with dynamic types. Some sort of typeof mechanism
will certainly help here, but I'm not sure "ClientRect(1, 2, 3, 4)" is enough
verbosity above "(1, 2, 3, 4)" to make it worth forcing people to change
"print(obj)" to "print(obj.type)".

This CL probably isn't the place to resolve this argument, though.

[Jacob, 2011/11/01 02:42:39]

Agreed. Lets take that discussion to the style guide. :)

+}
+
+// TODO(jacobr): we cannot currently be lazy about calculating the client
+// rects as we must perform all measurement queries at a safe point to avoid
+// triggering unneeded layouts.
+/**
+ * All your element measurement needs in one place
+ */
+class ElementRectWrappingImplementation implements ElementRect {
+  final ClientRect client;
+  final ClientRect offset;
+  final ClientRect scroll;
+
+  // TODO(jacobr): should we move these outside of ElementRect to avoid the
+  // overhead of computing them every time even though they are rarely used.
+  // This should be type dom.ClientRect but that fails on dartium. b/5522629
+  final _boundingClientRect; 
+  // an exception due to a dartium bug.
+  final dom.ClientRectList _clientRects;
+
+  ElementRectWrappingImplementation(dom.HTMLElement element) :
+    client = new SimpleClientRect(element.clientLeft,
+                           element.clientTop,

[nweiz, 2011/10/28 03:58:38]

Isn't the correct indentation four spaces farther in than client? I'm mostly
curious so I can set it correctly for my Emacs mode.

[Jacob, 2011/10/31 22:09:50]

fixed the busted indentation.
I did a find and replace and forgot to fix the indentation.

+                           element.clientWidth, 
+                           element.clientHeight), 
+    offset = new SimpleClientRect(element.offsetLeft,
+                           element.offsetTop,
+                           element.offsetWidth,
+                           element.offsetHeight),
+    scroll = new SimpleClientRect(element.scrollLeft,
+                           element.scrollTop,
+                           element.scrollWidth,
+                           element.scrollHeight),
+    _boundingClientRect = element.getBoundingClientRect(),
+    _clientRects = element.getClientRects();
+
+  ClientRect get bounding() =>
+      LevelDom.wrapClientRect(_boundingClientRect);
+
+  List<ClientRect> get clientRects() {
+    final out = new List(_clientRects.length);
+    for (num i = 0; i < _clientRects.length; i++) {
+      out[i] = LevelDom.wrapClientRect(_clientRects.item(i));
+    }
+    return out;
+  }
 }
 
 class ElementWrappingImplementation extends NodeWrappingImplementation implements Element {
+  
+    static final _START_TAG_REGEXP = const RegExp('<(\\w+)');
+    static final _CUSTOM_PARENT_TAG_MAP = const {
+      'body' : 'html',
+      'head' : 'html',
+      'caption' : 'table',
+      'td': 'tr',
+      'tbody': 'table',
+      'colgroup': 'table',
+      'col' : 'colgroup',
+      'tr' : 'tbody',
+      'tbody' : 'table',
+      'tfoot' : 'table',
+      'thead' : 'table',
+      'track' : 'audio',
+    };
 
    factory ElementWrappingImplementation.html(String html) {
-    final temp = dom.document.createElement('div');
+    // TODO(jacobr): this method can be made more robust and performant.
+    // 1) Cache the dummy parent elements required to use innerHTML rather than
+    //    creating them every call.
+    // 2) Verify that the html does not contain leading or trailing text nodes.
+    // 3) Verify that the html does not contain both <head> and <body> tags.
+    // 4) Detatch the created element from its dummy parent.
+    String parentTag = 'div';
+    String tag;
+    final match = _START_TAG_REGEXP.firstMatch(html);
+    if (null != match) {

[nweiz, 2011/10/28 03:58:38]

Style nit: match != null here and elsewhere.

[Jacob, 2011/10/31 22:09:50]

null != foo is faster
than foo != null

I agree that null != foo looked ugly in this code so i'm switching back to using
foo !== null
as it seems like the least ugly solution at the moment.

[nweiz, 2011/11/01 00:49:22]

That definitely seems like a problem for the compiler. It seems like something
is deeply wrong if we have to start worrying about the efficiency of the order
of equality comparisons.

In any case, it seems like we should be consistent within the codebase as to
which style of equality comparison we use. Currently the vast majority of code
uses "x == null" and "x != null". We should either use that here or push to
migrate other uses to ===.

+      tag = match.group(1).toLowerCase();
+      if (_CUSTOM_PARENT_TAG_MAP.containsKey(tag)) {
+        parentTag = _CUSTOM_PARENT_TAG_MAP[tag];
+      }
+    }
+    final temp = dom.document.createElement(parentTag);
     temp.innerHTML = html;
 
-    if (temp.childElementCount != 1) {
+    if (temp.childElementCount == 1) {
+      return LevelDom.wrapElement(temp.firstElementChild);     
+    } else if (parentTag == 'html' && temp.childElementCount == 2) {
+      // Work around for edge case in WebKit and possibly other browsers where
+      // both body and head elements are created even though the inner html
+      // only contains a head or body element.
+      return LevelDom.wrapElement(temp.children.item(tag == 'head' ? 0 : 1));
+    } else {
       throw 'HTML had ${temp.childElementCount} top level elements but 1 expected';
     }
-
-    return LevelDom.wrapElement(temp.firstElementChild);
   }
 
   factory ElementWrappingImplementation.tag(String tag) {
     return LevelDom.wrapElement(dom.document.createElement(tag));
   }
 
   ElementWrappingImplementation._wrap(ptr) : super._wrap(ptr);
 
   ElementAttributeMap _elementAttributeMap;
   ElementList _elements;
@@ skipping 51 matching lines @@
   }
 
   void set dataAttributes(Map<String, String> value) {
     Map<String, String> dataAttributes = this.dataAttributes;
     dataAttributes.clear();
     for (String key in value.getKeys()) {
       dataAttributes[key] = value[key];
     }
   }
 
-  int get clientHeight() => _ptr.clientHeight;
-
-  int get clientLeft() => _ptr.clientLeft;
-
-  int get clientTop() => _ptr.clientTop;
-
-  int get clientWidth() => _ptr.clientWidth;
-
   String get contentEditable() => _ptr.contentEditable;
 
   void set contentEditable(String value) { _ptr.contentEditable = value; }
 
   String get dir() => _ptr.dir;
 
   void set dir(String value) { _ptr.dir = value; }
 
   bool get draggable() => _ptr.draggable;
 
@@ skipping 16 matching lines @@
   bool get isContentEditable() => _ptr.isContentEditable;
 
   String get lang() => _ptr.lang;
 
   void set lang(String value) { _ptr.lang = value; }
 
   Element get lastElementChild() => LevelDom.wrapElement(_ptr.lastElementChild);
 
   Element get nextElementSibling() => LevelDom.wrapElement(_ptr.nextElementSibling);
 
-  int get offsetHeight() => _ptr.offsetHeight;
-
-  int get offsetLeft() => _ptr.offsetLeft;
-
   Element get offsetParent() => LevelDom.wrapElement(_ptr.offsetParent);
 
-  int get offsetTop() => _ptr.offsetTop;
-
-  int get offsetWidth() => _ptr.offsetWidth;
-
   String get outerHTML() => _ptr.outerHTML;
 
   Element get previousElementSibling() => LevelDom.wrapElement(_ptr.previousElementSibling);
 
-  int get scrollHeight() => _ptr.scrollHeight;
-
-  int get scrollLeft() => _ptr.scrollLeft;
-
-  void set scrollLeft(int value) { _ptr.scrollLeft = value; }
-
-  int get scrollTop() => _ptr.scrollTop;
-
-  void set scrollTop(int value) { _ptr.scrollTop = value; }
-
-  int get scrollWidth() => _ptr.scrollWidth;
-
   bool get spellcheck() => _ptr.spellcheck;
 
   void set spellcheck(bool value) { _ptr.spellcheck = value; }
 
   CSSStyleDeclaration get style() => LevelDom.wrapCSSStyleDeclaration(_ptr.style);
 
   int get tabIndex() => _ptr.tabIndex;
 
   void set tabIndex(int value) { _ptr.tabIndex = value; }
 
@@ skipping 12 matching lines @@
   }
 
   bool contains(Node element) {
     return _ptr.contains(LevelDom.unwrap(element));
   }
 
   void focus() {
     _ptr.focus();
   }
 
-  ClientRect getBoundingClientRect() {
-    return LevelDom.wrapClientRect(_ptr.getBoundingClientRect());
-  }
-
-  List<ClientRect> getClientRects() {
-    var rects = _ptr.getClientRects();
-    var out = new List(rects.length);
-    for (var i = 0; i < rects.length; i++) {
-      out.add(LevelDom.wrapClientRect(rects.item(i)));
-    }
-    return out;
-  }
-
   Element insertAdjacentElement([String where = null, Element element = null]) {
     return LevelDom.wrapElement(_ptr.insertAdjacentElement(where, LevelDom.unwrap(element)));
   }
 
   void insertAdjacentHTML([String position_OR_where = null, String text = null]) {
     _ptr.insertAdjacentHTML(position_OR_where, text);
   }
 
   void insertAdjacentText([String where = null, String text = null]) {
     _ptr.insertAdjacentText(where, text);
@@ skipping 18 matching lines @@
   }
 
   void scrollIntoView([bool centerIfNeeded = null]) {
     _ptr.scrollIntoViewIfNeeded(centerIfNeeded);
   }
 
   bool matchesSelector([String selectors = null]) {
     return _ptr.webkitMatchesSelector(selectors);
   }
 
+  void set scrollLeft(int value) { _ptr.scrollLeft = value; }
+ 
+  void set scrollTop(int value) { _ptr.scrollTop = value; }
+
+  Future<ElementRect> get rect() {
+    return _createMeasurementFuture(
+        () => new ElementRectWrappingImplementation(_ptr),
+        new Completer<ElementRect>());
+  }
+
+  Future<CSSStyleDeclaration> get computedStyle() {
+     // TODO(jacobr): last param should be null, see b/5045788
+     return getComputedStyle('');
+  }
+
+  Future<CSSStyleDeclaration> getComputedStyle(String pseudoElement) {
+    return _createMeasurementFuture(() =>
+        LevelDom.wrapCSSStyleDeclaration(
+            dom.window.getComputedStyle(_ptr, pseudoElement)),
+        new Completer<CSSStyleDeclaration>());
+  }
+
   ElementEvents get on() {
     if (_on === null) {
       _on = new ElementEventsImplementation._wrap(_ptr);
     }
     return _on;
   }
 }