Improve Observatory Timeline UI

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

Index: runtime/observatory/lib/src/elements/timeline_page.html
diff --git a/runtime/observatory/lib/src/elements/timeline_page.html b/runtime/observatory/lib/src/elements/timeline_page.html
index d14208872c3748f7acdaf9dc91ad61d628b1eb05..175839c633b25bb8df5490f81f698a60566946e3 100644
--- a/runtime/observatory/lib/src/elements/timeline_page.html
+++ b/runtime/observatory/lib/src/elements/timeline_page.html
@@ -5,19 +5,29 @@
 <polymer-element name="timeline-page" extends="observatory-element">
   <template>
     <link rel="stylesheet" href="css/shared.css">
-    <style>
-    </style>
     <nav-bar>
       <top-nav-menu></top-nav-menu>
       <vm-nav-menu vm="{{ app.vm }}"></vm-nav-menu>
       <nav-menu link="{{ makeLink('/timeline') }}" anchor="timeline" last="{{ true }}"></nav-menu>
-      <nav-refresh id="refresh" callback="{{ refresh }}"></nav-refresh>
+      <nav-refresh id="refresh" callback="{{ refresh }}" label="Get"></nav-refresh>
       <nav-refresh callback="{{ clear }}" label="Clear"></nav-refresh>
-      <nav-refresh callback="{{ recordOn }}" label="Start recording"></nav-refresh>
-      <nav-refresh callback="{{ recordOff }}" label="Stop recording"></nav-refresh>
       <nav-refresh callback="{{ saveTimeline }}" label="Save"></nav-refresh>
       <nav-refresh callback="{{ loadTimeline }}" label="Load"></nav-refresh>
     </nav-bar>
+    <div id="control" class="content-centered-big">
+      <h2>Timeline settings</h2>
+      <div class="memberList">
+        <div class="memberItem">
+          <div class="memberName">Recorder:</div>
+          <div class="memberValue">{{ recorderName }}</div>
+        </div>
+        <div class="memberItem">
+          <div class="memberName">Recorded Streams:</div>
+          <div id="streamList" class="memberValue"></div>
+        </div>
+      </div>
+      <br>
+    </div>
     <iframe id="root" frameborder="0" src="../../../../timeline.html">
     </iframe>
   </template>