Wrapping leaf nodes in non polymer elements

runtime/observatory/lib/src/elements/vm_connect_target.dart

Index: runtime/observatory/lib/src/elements/vm_connect_target.dart
diff --git a/runtime/observatory/lib/src/elements/vm_connect_target.dart b/runtime/observatory/lib/src/elements/vm_connect_target.dart
new file mode 100644
index 0000000000000000000000000000000000000000..b7cf82b7eeb098b8eb79204906996c4f323143b5
--- /dev/null
+++ b/runtime/observatory/lib/src/elements/vm_connect_target.dart
@@ -0,0 +1,101 @@
+// 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/models.dart' as M show Target;
+import 'package:observatory/src/elements/helpers/tag.dart';
+import 'package:observatory/src/elements/helpers/rendering_scheduler.dart';
+
+class TargetEvent {
+  final M.Target target;
+
+  TargetEvent(this.target);
+}
+
+class VMConnectTargetElement extends HtmlElement implements Renderable{
+
+  static const tag =
+    const Tag<VMConnectTargetElement>('vm-connect-target');
+
+  RenderingScheduler<VMConnectTargetElement> _r;
+
+  Stream<RenderedEvent<VMConnectTargetElement>> get onRendered => _r.onRendered;
+
+  final StreamController<TargetEvent> _onConnect;
+  final Stream<TargetEvent> onConnect;
+  final StreamController<TargetEvent> _onDelete;
+  final Stream<TargetEvent> onDelete;
+
+  M.Target _target;
+  bool _current;
+
+  M.Target get target => _target;
+  bool get current => _current;
+
+  factory VMConnectTargetElement(M.Target target, {bool current: false,
+                                RenderingQueue queue}) {
+    assert(target != null);
+    assert(current != null);
+    VMConnectTargetElement e = document.createElement(tag.name);
+    e._r = new RenderingScheduler(e, queue: queue);
+    e._target = target;
+    e._current = current;
+    return e;
+  }
+
+  VMConnectTargetElement.created()
+    : this._(new StreamController<TargetEvent>(),
+             new StreamController<TargetEvent>());
+
+  VMConnectTargetElement._(StreamController<TargetEvent> onConnect,
+                           StreamController<TargetEvent> onDelete)
+    : super.created(),
+      this._onConnect = onConnect,
+      this.onConnect = onConnect.stream.asBroadcastStream(),
+      this._onDelete = onDelete,
+      this.onDelete = onDelete.stream.asBroadcastStream();
+
+  @override
+  void attached() { super.attached(); assert(target != null); _r.enable(); }
+
+  @override
+  void detached() { super.detached(); children = []; _r.disable(notify: true); }
+
+  void connect() {
+    _connect(new TargetEvent(target));
+  }
+
+  void delete() {
+    _delete(new TargetEvent(target));
+  }
+
+  void render() {
+    children = [
+      new AnchorElement(href: '#/vm')
+        ..text = current ? '${target.name} (Connected)' : '${target.name}'
+        ..onClick.where(_filter).map(_toEvent).listen(_connect),
+      new ButtonElement()
+        ..text = '✖ Remove' ..classes = ['delete-button']
+        ..onClick.map(_toEvent).listen(_delete)
+    ];
+  }
+
+  void _connect(TargetEvent e) {
+    _onConnect.add(e);
+  }
+
+  void _delete(TargetEvent e) {
+    _onDelete.add(e);
+  }
+
+  TargetEvent _toEvent(_) {
+    return new TargetEvent(target);
+  }
+
+  static bool _filter(MouseEvent event) {
+    return !(event.button > 0 || event.metaKey || event.ctrlKey ||
+        event.shiftKey || event.altKey);
+  }
+}