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..f5caca5292c189f3d130b6caf0af7727b0e2d501
--- /dev/null
+++ b/runtime/observatory/lib/src/elements/vm_connect_target.dart
@@ -0,0 +1,103 @@
+// 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 'helpers/tag.dart';
+
+class WebSocketVMTargetEvent {
+  final WebSocketVMTarget target;
+
+  WebSocketVMTargetEvent(this.target);
+}
+
+class VmConnectTargetElement extends HtmlElement {
+  static final StyleElement _style = () {
+      var style = new StyleElement();
+      style.text = '.delete-button {'
+               '  padding: 4px;'
+               '  background: transparent;'
+               '  border: none !important;'
+               '}'
+               '.delete-button:hover {'
+               '  background: #ff0000;'
+               '}';
+      return style;
+  }();
+
+  static const tag =
+    const Tag<VmConnectTargetElement>('vm-connect-target-wrapped');
+
+  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 isCurrent;
+
+  factory VmConnectTargetElement({WebSocketVMTarget target,
+    bool isCurrent: false}) {
+    VmConnectTargetElement e = document.createElement(tag.name);
+    if (target != null) e.target = target;
+    e.isCurrent = isCurrent || false;
+    return e;
+  }
+
+  VmConnectTargetElement.created() : super.created() {
+    createShadowRoot();
+  }
+
+  @override
+  void attached() {
+    super.attached();
+    render();
+  }
+
+  void connect() {
+    _connect(new WebSocketVMTargetEvent(target));
+  }
+
+  void delete() {
+    _delete(new WebSocketVMTargetEvent(target));
+  }
+
+  void render() {
+    if (target == null) return;
+
+    shadowRoot.children = [
+      _style.clone(true),
+      new AnchorElement(href: '#/vm')
+        ..text = isCurrent ? '${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);
+  }
+}