Timeline service protocol support with Observatory UI

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

Index: runtime/observatory/lib/src/elements/timeline_page.dart
diff --git a/runtime/observatory/lib/src/elements/timeline_page.dart b/runtime/observatory/lib/src/elements/timeline_page.dart
new file mode 100644
index 0000000000000000000000000000000000000000..2bb3a3e4376c49b70afa57bcede5ab1b66262d01
--- /dev/null
+++ b/runtime/observatory/lib/src/elements/timeline_page.dart
@@ -0,0 +1,78 @@
+// Copyright (c) 2015, 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.
+
+library timeline_page_element;
+
+import 'dart:async';
+import 'dart:convert';
+import 'dart:html';
+import 'observatory_element.dart';
+import 'package:observatory/app.dart';
+import 'package:observatory/service_html.dart';
+import 'package:polymer/polymer.dart';
+
+
+@CustomTag('timeline-page')
+class TimelinePageElement extends ObservatoryElement {
+  TimelinePageElement.created() : super.created();
+
+	attached() {

[rmacnak, 2015/11/09 18:59:06]

Weird spacing

[Cutch, 2015/11/10 15:59:24]

Fixed here and elsewhere.

+		super.attached();
+		_resizeSubscription = window.onResize.listen((_) => _updateSize());
+		_updateSize();
+	}
+
+	detached() {
+		super.detached();
+		if (_resizeSubscription != null) {
+			_resizeSubscription.cancel();
+		}
+	}
+
+  Future postMessage(String method) {
+    IFrameElement e = $['root'];
+    var message = {
+      'method': method,
+      'params': {
+        'vmAddress': (app.vm as WebSocketVM).target.networkAddress
+      }
+    };
+    e.contentWindow.postMessage(JSON.encode(message), window.location.href);
+    return null;
+  }
+
+	Future refresh() async {
+    return postMessage('refresh');
+	}
+
+  Future clear() async {
+    await app.vm.invokeRpc('_clearVMTimeline', {});
+    return postMessage('clear');
+  }
+
+  Future recordOn() async {
+    return app.vm.invokeRpc('_setVMTimelineFlag', {
+      '_record': 'all',
+    });
+  }
+
+  Future recordOff() async {
+    return app.vm.invokeRpc('_setVMTimelineFlag', {
+      '_record': 'none',
+    });
+  }
+
+	_updateSize() {
+		IFrameElement e = $['root'];
+		final totalHeight = window.innerHeight;
+		final top = e.offset.top;
+		final bottomMargin = 32;
+		final mainHeight = totalHeight - top - bottomMargin;
+		e.style.setProperty('height', '${mainHeight}px');
+		e.style.setProperty('width', '100%');
+	}
+
+
+	StreamSubscription _resizeSubscription;
+}