Improve Observatory Timeline UI

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

 // 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/elements.dart';
 import 'package:observatory/service_html.dart';
 import 'package:polymer/polymer.dart';
 
 
 @CustomTag('timeline-page')
 class TimelinePageElement extends ObservatoryElement {
-  TimelinePageElement.created() : super.created();
+  TimelinePageElement.created() : super.created() {
+  }
 
   attached() {
     super.attached();
     _resizeSubscription = window.onResize.listen((_) => _updateSize());
     _updateSize();
-    // Click refresh button.
-    NavRefreshElement refreshButton = $['refresh'];
-    refreshButton.buttonClick(null, null, null);
+    _setupInitialState();
   }
 
   detached() {
     super.detached();
     if (_resizeSubscription != null) {
       _resizeSubscription.cancel();
     }
   }
 
   Future postMessage(String method) {
     IFrameElement e = $['root'];
     var isolateIds = new List();
     for (var isolate in app.vm.isolates) {
       isolateIds.add(isolate.id);
     }
     var message = {
       'method': method,
       'params': {
         'vmAddress': (app.vm as WebSocketVM).target.networkAddress,
         'isolateIds': isolateIds
       }
     };
     e.contentWindow.postMessage(JSON.encode(message), window.location.href);
     return null;
   }
 
+  void _processFlags(ServiceMap response) {
+    // Grab the recorder name.
+    recorderName = response['recorderName'];
+    // Update the set of available streams.
+    _availableStreams.clear();
+    response['availableStreams'].forEach(
+        (String streamName) => _availableStreams.add(streamName));
+    // Update the set of recorded streams.
+    _recordedStreams.clear();
+    response['recordedStreams'].forEach(
+        (String streamName) => _recordedStreams.add(streamName));
+  }
+
+  Future _applyStreamChanges() {
+    return app.vm.invokeRpc('_setVMTimelineFlags', {
+      'recordedStreams': '[${_recordedStreams.join(', ')}]',
+    });
+  }
+
+  HtmlElement _makeStreamToggle(String streamName) {
+    LabelElement label = new LabelElement();
+    label.style.paddingLeft = '8px';
+    SpanElement span = new SpanElement();
+    span.text = streamName;
+    InputElement checkbox = new InputElement();
+    checkbox.onChange.listen((_) {
+      if (checkbox.checked) {
+        _recordedStreams.add(streamName);
+      } else {
+        _recordedStreams.remove(streamName);
+      }
+      _applyStreamChanges();
+      _updateRecorderUI();
+    });
+    checkbox.type = 'checkbox';
+    checkbox.checked = _recordedStreams.contains(streamName);
+    label.children.add(checkbox);
+    label.children.add(span);
+    return label;
+  }
+
+  void _refreshRecorderUI() {
+    DivElement e = $['streamList'];
+    e.children.clear();
+
+    for (String streamName in _availableStreams) {
+      e.children.add(_makeStreamToggle(streamName));
+    }
+  }
+
+  Future _updateRecorderUI() async {
+    // Grab the current timeline flags.
+    ServiceMap response = await app.vm.invokeRpc('_getVMTimelineFlags', {});
+    assert(response['type'] == 'TimelineFlags');
+    // Process them so we know available streams.
+    _processFlags(response);
+    // Refresh the UI.
+    _refreshRecorderUI();
+  }
+
+  Future _setupInitialState() async {
+    await _updateRecorderUI();
+    // Finally, trigger a reload so we start with the latest timeline.
+    await refresh();
+  }
+
   Future refresh() async {
     await app.vm.reload();
     await app.vm.reloadIsolates();
     return postMessage('refresh');
   }
 
   Future clear() async {
     await app.vm.invokeRpc('_clearVMTimeline', {});
     return postMessage('clear');
   }
 
-  Future recordOn() async {
-    return app.vm.invokeRpc('_setVMTimelineFlags', {
-      'recordedStreams': ['all'],
-    });
-  }
-
-  Future recordOff() async {
-    return app.vm.invokeRpc('_setVMTimelineFlags', {
-      'recordedStreams': [],
-    });
-  }
-
   Future saveTimeline() async {
     return postMessage('save');
   }
 
   Future loadTimeline() async {
     return postMessage('load');
   }
 
   _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;
+  @observable String recorderName;
+  final Set<String> _availableStreams = new Set<String>();
+  final Set<String> _recordedStreams = new Set<String>();
 }