Added new implementations for virtual containers

runtime/observatory/lib/src/elements/containers/virtual_collection.dart

+// Copyright (c) 2016, 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.
+
+import 'dart:async';
+import 'dart:html';
+import 'package:observatory/src/elements/helpers/rendering_scheduler.dart';
+import 'package:observatory/src/elements/helpers/tag.dart';
+
+typedef HtmlElement _CreateElementCallback();
+typedef void _UpdateElementCallback(HtmlElement el, dynamic item, int index);
+
+class VirtualCollectionElement extends HtmlElement implements Renderable {
+  static const tag =
+      const Tag<VirtualCollectionElement>('virtual-collection');
+
+  RenderingScheduler<VirtualCollectionElement> _r;
+
+  Stream<RenderedEvent<VirtualCollectionElement>> get onRendered => _r.onRendered;
+
+  _CreateElementCallback _create;
+  _UpdateElementCallback _update;
+  double _itemHeight;
+  int _top;
+  int _height;
+  List _items;
+  StreamSubscription _onScroollSubscription;

[turnidge, 2016/08/01 17:32:39]

Typo: Scrooll -> Scroll.

[cbernaschina, 2016/08/01 17:44:45]

Done.

+  StreamSubscription _onResizeSubscription;
+
+  List get items => _items;
+
+  set items(Iterable value) {
+    _items = new List.unmodifiable(value);
+    _r.dirty();
+  }
+
+
+  factory VirtualCollectionElement(_CreateElementCallback create,
+      _UpdateElementCallback update, {Iterable items: const [],
+      RenderingQueue queue}) {
+    assert(create != null);
+    assert(update != null);
+    assert(items != null);
+    VirtualCollectionElement e = document.createElement(tag.name);
+    e._r = new RenderingScheduler(e, queue: queue);
+    e._create = create;
+    e._update = update;
+    e._items = new List.unmodifiable(items);
+    return e;
+  }
+
+  VirtualCollectionElement.created() : super.created();
+
+  @override
+  attached() {
+    super.attached();
+    _r.enable();
+    _top = 0;
+    _height = getBoundingClientRect().height;
+    _itemHeight = _computeItemHeight();
+    _onScroollSubscription = onScroll.listen(_onScroll);
+    _onResizeSubscription = window.onResize.listen(_onResize);
+  }
+
+ @override
+  detached() {
+    super.detached(); _r.disable(notify: true);

[Cutch, 2016/08/01 17:02:35]

new line

[cbernaschina, 2016/08/01 17:44:45]

Done.

+    children = const [];
+    _onScroollSubscription.cancel();
+    _onResizeSubscription.cancel();
+  }
+
+  final DivElement _scroller = new DivElement()..classes = const ['scroller'];
+  final DivElement _shifter = new DivElement()..classes = const ['shifter'];
+
+  dynamic getItemFromElement(HtmlElement element) {
+    final e_i = _shifter.children.indexOf(element);
+    if (e_i < 0) return null;

[turnidge, 2016/08/01 17:32:39]

Use {}'s here and everywhere for if statements in Observatory.

if (e_i < 0) {
  return null;
}

[cbernaschina, 2016/08/01 17:44:44]

Done.

+    final i_i = _top + e_i - (_shifter.children.length / 4).floor();

[turnidge, 2016/08/01 17:32:40]

Can you think of a better name than i_i?  What is this variable mean?

[cbernaschina, 2016/08/01 17:44:45]

item_index

done

+    if (0 <= i_i && i_i < items.length) return _items[i_i];

[turnidge, 2016/08/01 17:32:39]

Here too, for example.

[cbernaschina, 2016/08/01 17:44:45]

Done.

+    return null;
+  }
+
+  void render() {
+    _top = (scrollTop / _itemHeight).floor();
+
+    _scroller.style.height = '${_itemHeight*(_items.length)}px';
+    _shifter.style.top = '${_itemHeight*_top}px';
+    final length_4 = (_height / _itemHeight / 2).ceil();
+    final length = length_4 * 4;
+
+    if (_shifter.children.length < length) {
+      while (_shifter.children.length != length) {
+        _shifter.children.add(_create()..style.display = 'hidden');
+      }
+      _shifter.style.height = '${_itemHeight*length}px';
+      children = [_scroller..children = [_shifter]];

[turnidge, 2016/08/01 17:32:39]

This is kind of a complex little line.  What is it doing?  Does it need to be so
tight?

[cbernaschina, 2016/08/01 17:44:45]

Changed to:
children = [
  _scroller
    ..children = [_shifter]
];

It defines/describes the DOM structure of the element

+    }
+
+    int i = _top - length_4;
+    for (final HtmlElement e in _shifter.children) {
+      if (0 <= i && i < _items.length) {
+        _update(e..style.display = null, _items[i], i);

[Cutch, 2016/08/01 17:02:35]

don't assign in a function call.

[cbernaschina, 2016/08/01 17:44:45]

Done.

+      } else {
+        e.style.display = 'hidden';
+      }
+      i++;
+    }
+  }
+
+  double _computeItemHeight() {
+    final c = children;
+    children = [_create()];
+    final height = children[0].getBoundingClientRect().height;
+    children = c;
+    return height;
+  }
+
+  void _onScroll(_) {
+    if(_r.isDirty) return;
+    if ((scrollTop - _top * _itemHeight).abs() >=
+         _shifter.children.length / 4 * _itemHeight) {

[Cutch, 2016/08/01 17:02:35]

please give "4" (here and elsewhere) a symbolic name.

[cbernaschina, 2016/08/01 17:44:44]

Done.

+      _r.dirty();
+    }
+  }
+
+  void _onResize(_) {
+    _height = getBoundingClientRect().height;
+    _r.dirty();
+  }
+}