Add a VM page to the observatory.

runtime/bin/vmservice/client/deployed/web/index.html

Index: runtime/bin/vmservice/client/deployed/web/index.html
diff --git a/runtime/bin/vmservice/client/deployed/web/index.html b/runtime/bin/vmservice/client/deployed/web/index.html
index 829fe14a9c4d7717cd67bd444ac786354d75ad17..ac7fefd9e8546fa590024260f8da3cdb72229bb8 100644
--- a/runtime/bin/vmservice/client/deployed/web/index.html
+++ b/runtime/bin/vmservice/client/deployed/web/index.html
@@ -163,7 +163,7 @@
 
 <polymer-element name="top-nav-menu">
   <template>
-    <nav-menu link="#" anchor="Observatory" last="{{ last }}">
+    <nav-menu link="#/vm" anchor="Observatory" last="{{ last }}">
       <content></content>
     </nav-menu>
   </template>
@@ -730,6 +730,10 @@
   
 </polymer-element><polymer-element name="error-view" extends="observatory-element">
   <template>
+    <nav-bar>
+      <top-nav-menu last="{{ true }}"></top-nav-menu>
+    </nav-bar>
+
     <div class="row">
     <div class="col-md-8 col-md-offset-2">
       <div class="panel panel-danger">
@@ -742,7 +746,8 @@
     </div>
   </template>
   
-</polymer-element><polymer-element name="field-view" extends="observatory-element">
+</polymer-element>
+<polymer-element name="field-view" extends="observatory-element">
   <template>
     <nav-bar>
       <top-nav-menu></top-nav-menu>
@@ -888,7 +893,7 @@
         <img src="img/isolate_icon.png" class="img-polaroid">
       </div>
 
-      <div class="col-md-1">{{ isolate.vmName }}</div>
+      <div class="col-md-1">{{ isolate.mainPort }}</div>
 
       <!-- TODO(turnidge): Use function-ref when it can take isolate param -->
       <div class="col-md-4">
@@ -908,27 +913,27 @@
 
       <div class="col-md-2">
         <div class="row">
-          <div class="col-md-3">{{ isolate.timers['total'] | formatTime }}</div>
+          <div class="col-md-5">{{ isolate.timers['total'] | formatTimePrecise }}</div>
           <div class="col-md-1"></div>
           <div class="col-md-3"><p class="text-muted">total</p></div>
         </div>
         <div class="row">
-          <div class="col-md-3">{{ isolate.timers['dart'] | formatTime }}</div>
+          <div class="col-md-5">{{ isolate.timers['dart'] | formatTimePrecise }}</div>
           <div class="col-md-1"></div>
           <div class="col-md-3"><p class="text-muted">dart</p></div>
         </div>
         <div class="row">
-          <div class="col-md-3">{{ isolate.timers['compile'] | formatTime }}</div>
+          <div class="col-md-5">{{ isolate.timers['compile'] | formatTimePrecise }}</div>
           <div class="col-md-1"></div>
           <div class="col-md-3"><p class="text-muted">compile</p></div>
         </div>
         <div class="row">
-          <div class="col-md-3">{{ isolate.timers['gc'] | formatTime }}</div>
+          <div class="col-md-5">{{ isolate.timers['gc'] | formatTimePrecise }}</div>
           <div class="col-md-1"></div>
           <div class="col-md-3"><p class="text-muted">gc</p></div>
         </div>
         <div class="row">
-          <div class="col-md-3">{{ isolate.timers['init'] | formatTime }}</div>
+          <div class="col-md-5">{{ isolate.timers['init'] | formatTimePrecise }}</div>
           <div class="col-md-1"></div>
           <div class="col-md-3"><p class="text-muted">init</p></div>
         </div>
@@ -966,23 +971,6 @@
   </template>
   
 </polymer-element>
-<polymer-element name="isolate-list" extends="observatory-element">
-  <template>
-    <nav-bar>
-      <top-nav-menu last="{{ true }}"></top-nav-menu>
-      <!-- TODO(turnidge): Why doesn't "this.refresh" work? -->
-      <nav-refresh callback="{{ refresh } }}"></nav-refresh>
-    </nav-bar>
-      <ul class="list-group">
-      <template repeat="{{ isolate in isolates.isolates.values }}">
-      	<li class="list-group-item">
-        <isolate-summary isolate="{{ isolate }}"></isolate-summary>
-        </li>
-      </template>
-      </ul>
-  </template>
-  
-</polymer-element>
 <polymer-element name="isolate-view" extends="observatory-element">
   <template>
     <style>
@@ -1015,6 +1003,7 @@
       <top-nav-menu></top-nav-menu>
       <isolate-nav-menu isolate="{{ isolate }}" last="{{ true }}">
       </isolate-nav-menu>
+      <nav-refresh callback="{{ refresh }}"></nav-refresh>
     </nav-bar>
 
     <div class="content">
@@ -1023,16 +1012,31 @@
         <div class="memberItem">
           <div class="memberName">status</div>
           <div class="memberValue">
-            <template if="{{ isolate.topFrame == null }}">
-              <strong>idle</strong>
+            <template if="{{ isolate.pausedOnStart }}">
+              <strong style="color:darkred;">paused</strong> @ isolate start
+              <span style="padding-left:20px;">
+                [<a on-click="{{ resume }}">resume</a>]
+              </span>
+            </template>
+
+            <template if="{{ isolate.pausedOnExit }}">
+              <strong style="color:darkred;">paused</strong> @ isolate exit
+              <span style="padding-left:20px;">
+                [<a on-click="{{ resume }}">resume</a>]
+              </span>
             </template>
-            <template if="{{ isolate.topFrame != null }}">
+
+            <template if="{{ isolate.running }}">
               <strong>running</strong>
               @
               <function-ref ref="{{ isolate.topFrame['function'] }}">
               </function-ref>
               (<script-ref ref="{{ isolate.topFrame['script'] }}" line="{{ isolate.topFrame['line'] }}"></script-ref>)
             </template>
+
+            <template if="{{ isolate.idle }}">
+              <strong>idle</strong>
+            </template>
           </div>
         </div>
       </div>
@@ -1065,7 +1069,7 @@
         </div>
         <div class="memberItem">
           <div class="memberName">id</div>
-          <div class="memberValue">{{ isolate.vmName }}</div>
+          <div class="memberValue">{{ isolate.mainPort }}</div>
         </div>
         <br>
         <div class="memberItem">
@@ -1114,7 +1118,7 @@
       <div class="memberList">
         <div class="memberItem">
           <div class="memberValue">
-            See <a href="{{ isolate.relativeHashLink('allocationprofile') }}">heap profile</a>
+            See <a href="{{ isolate.relativeHashLink('allocationprofile') }}">allocation profile</a>
           </div>
         </div>
         <div class="memberItem">
@@ -1778,6 +1782,65 @@
   </template>
   
 </polymer-element>
+<polymer-element name="vm-view" extends="observatory-element">
+  <template>
+    <style>
+      .content {
+        padding-left: 10%;
+        font: 400 14px 'Montserrat', sans-serif;
+      }
+      h1 {
+        font: 400 18px 'Montserrat', sans-serif;
+      }
+      .memberList {
+        display: table;
+      }
+      .memberItem {
+        display: table-row;
+      }
+      .memberName, .memberValue {
+        display: table-cell;
+        vertical-align: top;
+        padding: 3px 0 3px 1em;
+        font: 400 14px 'Montserrat', sans-serif;
+      }
+      .sourceInset {
+        padding-left: 15%;
+        padding-right: 15%;
+      }
+    </style>
+
+    <nav-bar>
+      <top-nav-menu last="{{ true }}"></top-nav-menu>
+      <nav-refresh callback="{{ refresh }}"></nav-refresh>
+    </nav-bar>
+
+    <div class="content">
+      <h1>VM</h1>
+      <div class="memberList">
+        <div class="memberItem">
+          <div class="memberName">version</div>
+          <div class="memberValue">{{ vm.version }}</div>
+        </div>
+        <div class="memberItem">
+          <div class="memberName">uptime</div>
+          <div class="memberValue">{{ vm.uptime | formatTime }}</div>
+        </div>
+      </div>
+    </div>
+
+    <br>
+
+    <ul class="list-group">
+      <template repeat="{{ isolate in vm.allIsolates }}">
+      	<li class="list-group-item">
+          <isolate-summary isolate="{{ isolate }}"></isolate-summary>
+        </li>
+      </template>
+    </ul>
+  </template>
+  
+</polymer-element>
 <polymer-element name="service-view" extends="observatory-element">
   <!-- This element explicitly manages the child elements to avoid setting
        an observable property on the old element to an invalid type. -->
@@ -1794,6 +1857,12 @@
   </template>
   
 </polymer-element>
+<polymer-element name="vm-ref" extends="service-ref">
+<template>
+  <a href="{{ url }}">{{ ref.name }}</a>
+</template>
+
+</polymer-element>
 
 
   <observatory-application></observatory-application>