Initial GUI for review

runtime/bin/vmservice/client/observatory/packages/observatory/src/observatory_elements/collapsible_content.dart

Index: runtime/bin/vmservice/client/observatory/packages/observatory/src/observatory_elements/collapsible_content.dart
diff --git a/runtime/bin/vmservice/client/observatory/packages/observatory/src/observatory_elements/collapsible_content.dart b/runtime/bin/vmservice/client/observatory/packages/observatory/src/observatory_elements/collapsible_content.dart
new file mode 100644
index 0000000000000000000000000000000000000000..df6b51366cb6ada96ff323e0ae1a218b7875d6dc
--- /dev/null
+++ b/runtime/bin/vmservice/client/observatory/packages/observatory/src/observatory_elements/collapsible_content.dart
@@ -0,0 +1,42 @@
+library collapsible_content_element;
+
+import 'dart:html';
+import 'package:polymer/polymer.dart';
+import 'package:observatory/observatory.dart';
+
+/// An element which conditionally displays its children elements.
+@CustomTag('collapsible-content')
+class CollapsibleContentElement extends ObservatoryElement {
+  static const String _openIconClass = 'glyphicon glyphicon-chevron-down';
+  static const String _closeIconClass = 'glyphicon glyphicon-chevron-up';
+
+  @observable String iconClass = _openIconClass;
+  @observable String displayValue = 'none';
+
+  bool _collapsed = true;
+  bool get collapsed => _collapsed;
+  set collapsed(bool r) {
+    _collapsed = r;
+    _refresh();
+  }
+
+  void toggleDisplay(Event e, var detail, Node target) {
+    collapsed = !collapsed;
+    _refresh();
+  }
+
+  void inserted() {
+    super.inserted();
+    _refresh();
+  }
+
+  void _refresh() {
+    if (_collapsed) {
+      iconClass = _openIconClass;
+      displayValue = 'none';
+    } else {
+      iconClass = _closeIconClass;
+      displayValue = 'block';
+    }
+  }
+}