Converted Observatory ports-page element

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

Index: runtime/observatory/lib/src/elements/ports.dart
diff --git a/runtime/observatory/lib/src/elements/ports.dart b/runtime/observatory/lib/src/elements/ports.dart
index 8f9cb3911e798f3476ef8bcc67ed18a33a59b3a0..183b686782b58f2e0a07864334f19b7ff5683675 100644
--- a/runtime/observatory/lib/src/elements/ports.dart
+++ b/runtime/observatory/lib/src/elements/ports.dart
@@ -2,31 +2,146 @@
 // 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.
 
-library ports;
-
+import 'dart:html';
 import 'dart:async';
-import 'observatory_element.dart';
-import 'package:observatory/service.dart';
-import 'package:polymer/polymer.dart';
+import 'package:observatory/models.dart' as M;
+import 'package:observatory/src/elements/helpers/any_ref.dart';
+import 'package:observatory/src/elements/helpers/rendering_scheduler.dart';
+import 'package:observatory/src/elements/helpers/tag.dart';
+import 'package:observatory/src/elements/helpers/uris.dart';
+import 'package:observatory/src/elements/instance_ref.dart';
+import 'package:observatory/src/elements/nav/bar.dart';
+import 'package:observatory/src/elements/nav/isolate_menu.dart';
+import 'package:observatory/src/elements/nav/menu.dart';
+import 'package:observatory/src/elements/nav/notify.dart';
+import 'package:observatory/src/elements/nav/refresh.dart';
+import 'package:observatory/src/elements/nav/top_menu.dart';
+import 'package:observatory/src/elements/nav/vm_menu.dart';
+import 'package:observatory/src/elements/view_footer.dart';
 
-@CustomTag('ports-page')
-class PortsPageElement extends ObservatoryElement {
-  PortsPageElement.created() : super.created();
+class PortsElement extends HtmlElement implements Renderable {
+  static const tag = const Tag<PortsElement>('ports-page',
+                                             dependencies: const [
+                                               NavBarElement.tag,
+                                               NavTopMenuElement.tag,
+                                               NavVMMenuElement.tag,
+                                               NavIsolateMenuElement.tag,
+                                               NavMenuElement.tag,
+                                               NavRefreshElement.tag,
+                                               NavNotifyElement.tag,
+                                               InstanceRefElement.tag,
+                                               ViewFooterElement.tag
+                                             ]);
 
-  @observable Isolate isolate;
-  @observable var /*ObservableList | ServiceObject*/ ports;
+  RenderingScheduler<PortsElement> _r;
 
-  void isolateChanged(oldValue) {
-    if (isolate != null) {
-      isolate.getPorts().then(_refreshView);
-    }
+  Stream<RenderedEvent<PortsElement>> get onRendered => _r.onRendered;
+
+  M.VM _vm;
+  M.IsolateRef _isolate;
+  M.EventRepository _events;
+  M.NotificationRepository _notifications;
+  M.PortsRepository _ports;
+  M.InstanceRepository _instances;
+  M.Ports _isolatePorts;
+
+
+  M.IsolateRef get isolate => _isolate;
+  M.NotificationRepository get notifications => _notifications;
+  M.PortsRepository get ports => _ports;
+  M.VMRef get vm => _vm;
+
+  factory PortsElement(M.VM vm, M.IsolateRef isolate,
+                            M.EventRepository events,
+                            M.NotificationRepository notifications,
+                            M.PortsRepository ports,
+                            M.InstanceRepository instances,
+                            {RenderingQueue queue}) {
+    assert(vm != null);
+    assert(isolate != null);
+    assert(events != null);
+    assert(notifications != null);
+    assert(ports != null);
+    assert(instances != null);
+    PortsElement e = document.createElement(tag.name);
+    e._r = new RenderingScheduler(e, queue: queue);
+    e._vm = vm;
+    e._isolate = isolate;
+    e._events = events;
+    e._notifications = notifications;
+    e._ports = ports;
+    e._instances = instances;
+    return e;
+  }
+
+  PortsElement.created() : super.created();
+
+  @override
+  void attached() {
+    super.attached();
+    _r.enable();
+    _refresh();
+  }
+
+  @override
+  void detached() {
+    super.detached();
+    children = [];
+    _r.disable(notify: true);
   }
 
-  Future refresh() {
-    return isolate.getPorts().then(_refreshView);
+  void render() {
+    children = [
+      new NavBarElement(queue: _r.queue)
+        ..children = [
+          new NavTopMenuElement(queue: _r.queue),
+          new NavVMMenuElement(_vm, _events, queue: _r.queue),
+          new NavIsolateMenuElement(_isolate, _events, queue: _r.queue),
+          new NavMenuElement('ports', link: Uris.ports(_isolate), last: true,
+                             queue: _r.queue),
+          new NavRefreshElement(queue: _r.queue)
+            ..onRefresh.listen((_) => _refresh()),
+          new NavNotifyElement(_notifications, queue: _r.queue)
+        ],
+      new DivElement()
+        ..classes = ['content-centered']
+        ..children = [
+          new HeadingElement.h1()..text = 'Ports',
+          new BRElement(), new HRElement(),
+          new DivElement()
+            ..children = _createList(),
+          new HRElement()
+        ],
+      new ViewFooterElement(queue: _r.queue)
+    ];
+  }
+
+  List<Element> _createList() {
+    if (_isolatePorts == null) {
+      return const [];
+    }
+    int i = 0;
+    return _isolatePorts.elements.map((port) =>
+      new DivElement()..classes = ['memberItem']
+        ..children = [
+          new DivElement()..classes = ['memberName']
+            ..children = [
+              new SpanElement()..classes = ['port-number']
+                ..text = '[ ${++i} ] ',
+              new SpanElement()..text = '${port.name}'
+            ],
+          new DivElement()..classes = ['memberValue']
+            ..children = [
+              anyRef(_isolate, port.handler, _instances, queue: _r.queue)
+            ]
+        ]
+    ).toList();
   }
 
-  _refreshView(/*ObservableList | ServiceObject*/ object) {
-    ports = object['ports'];
+  Future _refresh() async {
+    _isolatePorts = null;
+    _r.dirty();
+    _isolatePorts = await _ports.get(_isolate);
+    _r.dirty();
   }
 }