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..67f7d2f8a84d77d99065b5a684a64213513c97f9
--- /dev/null
+++ b/runtime/observatory/lib/src/elements/vm_connect_target.dart
@@ -0,0 +1,106 @@
+// 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/service_html.dart';
+import 'package:observatory/src/elements/helpers/tag.dart';
+import 'package:observatory/src/elements/helpers/rendering_scheduler.dart';
+
+class WebSocketVMTargetEvent {
+  final WebSocketVMTarget target;
+
+  WebSocketVMTargetEvent(this.target);
+}
+
+class VmConnectTargetElement extends HtmlElement implements Renderable{
+
+  static const tag =
+    const Tag<VmConnectTargetElement>('vm-connect-target-wrapped');
+
+  RenderingScheduler<VmConnectTargetElement> _r;
+
+  Stream<RenderedEvent<VmConnectTargetElement>> get onRendered => _r.onRendered;
+
+  final StreamController<WebSocketVMTargetEvent> _onConnect =
+    new StreamController<WebSocketVMTargetEvent>();
+  Stream<WebSocketVMTargetEvent> get onConnect => _onConnect.stream;
+  final StreamController<WebSocketVMTargetEvent> _onDelete =
+    new StreamController<WebSocketVMTargetEvent>();
+  Stream<WebSocketVMTargetEvent> get onDelete => _onDelete.stream;
+
+  WebSocketVMTarget _target;
+  bool _current;
+
+  WebSocketVMTarget get target => _target;
+  bool get current => _current;
+
+  factory VmConnectTargetElement(WebSocketVMTarget target,
+      {bool current: false}) {
+    assert(target != null);
+    assert(current is bool);
+    VmConnectTargetElement e = document.createElement(tag.name);
+    e._target = target;
+    e._current = current;
+    return e;
+  }
+
+  VmConnectTargetElement.created() : super.created() {
+    _r = new RenderingScheduler<VmConnectTargetElement>(this);
+  }
+
+  @override
+  void attached() {
+    super.attached();
+    assert(target != null);
+    _r.scheduleRendering();
+  }
+
+  @override
+  void detached() {
+    super.detached();
+    children = [];
+    _r.scheduleNotification();
+  }
+
+  void connect() {
+    _connect(new WebSocketVMTargetEvent(target));
+  }
+
+  void delete() {
+    _delete(new WebSocketVMTargetEvent(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(WebSocketVMTargetEvent e) {
+    if (_onConnect.hasListener) {
+      _onConnect.add(e);
+    }
+  }
+
+  void _delete(WebSocketVMTargetEvent e) {
+    if (_onDelete.hasListener) {
+      _onDelete.add(e);
+    }
+  }
+
+  WebSocketVMTargetEvent _toEvent(_) {
+    return new WebSocketVMTargetEvent(target);
+  }
+
+  static bool _filter(MouseEvent event) {
+    return !(event.button > 0 || event.metaKey || event.ctrlKey ||
+        event.shiftKey || event.altKey);
+  }
+}