Add processes to Observatory

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

Index: runtime/bin/vmservice/client/deployed/web/index_devtools.html
diff --git a/runtime/bin/vmservice/client/deployed/web/index_devtools.html b/runtime/bin/vmservice/client/deployed/web/index_devtools.html
index 122084704ed1d824139f59eecc5de845b5e56808..29fd6932859f818a33602639fe496d8d38ff133f 100644
--- a/runtime/bin/vmservice/client/deployed/web/index_devtools.html
+++ b/runtime/bin/vmservice/client/deployed/web/index_devtools.html
@@ -289,6 +289,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
   
   
@@ -611,6 +615,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
     <style>
       .errorBox {
@@ -949,6 +957,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
     <style>
       nav {
@@ -1376,6 +1388,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
     <nav-bar>
       <top-nav-menu></top-nav-menu>
@@ -1630,6 +1646,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style><a title="{{ hoverText }}" href="{{ url }}">{{ name }}</a></template>
 
 
@@ -1988,6 +2008,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
     <div>
       <template if="{{ ref['static'] }}">static</template>
@@ -2235,6 +2259,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style><!-- These comments are here to allow newlines.
      --><template if="{{ isDart }}"><!--
        --><template if="{{ qualified &amp;&amp; !hasParent &amp;&amp; hasClass }}"><!--
@@ -2475,6 +2503,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
   <template if="{{ nameIsEmpty }}">
     <a href="{{ url }}">unnamed</a>
@@ -2716,6 +2748,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
   <a title="{{ hoverText }}" href="{{ url }}">{{ name }}</a>
 </template>
@@ -2949,6 +2985,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
     <nav-bar>
       <top-nav-menu></top-nav-menu>
@@ -3316,6 +3356,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
     <template if="{{ code.isDartCode }}">
         <template if="{{ code.isOptimized }}">
@@ -3563,6 +3607,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
     <style>
       div.flex-row:hover {
@@ -3967,6 +4015,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
     <nav-bar>
       <top-nav-menu last="{{ true }}"></top-nav-menu>
@@ -4214,6 +4266,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
     <nav-bar>
       <top-nav-menu></top-nav-menu>
@@ -4581,6 +4637,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
     <nav-bar>
       <top-nav-menu></top-nav-menu>
@@ -4919,6 +4979,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
   <style>
     .hover {
@@ -5183,6 +5247,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
 
     <nav-bar>
@@ -5217,6 +5285,14 @@ hr {
         </li>
       </ul>
 
+      <br>
+
+      <ul class="list-group">
+        <li class="list-group-item">
+          <a href="{{io.isolate.relativeHashLink('io/processes')}}">Processess</a>
+        </li>
+      </ul>
+
     </div>
     <br>
     <hr>
@@ -5451,6 +5527,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
 
     <nav-bar>
@@ -5704,6 +5784,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
     <a href="{{ url }}">{{ name }}</a>
   </template>
@@ -5937,6 +6021,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
 
     <nav-bar>
@@ -6205,6 +6293,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
     <a href="{{ url }}">{{ name }}</a>
   </template>
@@ -6438,6 +6530,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
 
     <nav-bar>
@@ -6691,6 +6787,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
 
     <nav-bar>
@@ -6951,6 +7051,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
     <a href="{{ url }}">{{ name }}</a>
   </template>
@@ -7184,6 +7288,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
 
     <nav-bar>
@@ -7437,6 +7545,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
 
     <nav-bar>
@@ -7469,11 +7581,9 @@ hr {
   </template>
 </polymer-element>
 
-
-
-
-<polymer-element name="isolate-ref" extends="service-ref">
-<template><style>
+<polymer-element name="io-process-list-view" extends="observatory-element">
+  <template>
+    <style>
 /* Global styles */
 * {
   margin: 0;
@@ -7699,19 +7809,36 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
-  <a href="{{ url }}">{{ ref.name }}</a>
-</template>
 
+    <nav-bar>
+      <top-nav-menu last="{{ true }}"></top-nav-menu>
+      <nav-refresh callback="{{ refresh }}"></nav-refresh>
+    </nav-bar>
+
+    <div class="content">
+      <h1>Processes</h1>
+
+      <br>
+
+      <ul class="list-group">
+        <template repeat="{{ process in list['members'] }}">
+          <li class="list-group-item">
+            <io-process-ref ref="{{ process }}"></io-process-ref>
+          </li>
+        </template>
+      </ul>
+    </div>
+    <br>
+    <hr>
+  </template>
 </polymer-element>
 
-  
-  
-  
-  
-  
-  
-<polymer-element name="isolate-summary" extends="observatory-element">
+<polymer-element name="io-process-ref" extends="service-ref">
   <template>
     <style>
 /* Global styles */
@@ -7939,106 +8066,23 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
-</style>
-    <div class="flex-row">
-      <div class="flex-item-10-percent">
-        <img src="packages/observatory/src/elements/img/isolate_icon.png">
-      </div>
-      <div class="flex-item-10-percent">
-        <isolate-ref ref="{{ isolate }}"></isolate-ref>
-      </div>
-      <div class="flex-item-20-percent">
-        <isolate-run-state isolate="{{ isolate }}"></isolate-run-state>
-      </div>
-      <div class="flex-item-50-percent">
-        <isolate-location isolate="{{ isolate }}"></isolate-location>
-      </div>
-      <div class="flex-item-10-percent">
-      </div>
-    </div>
-
-    <div class="flex-row">
-      <div class="flex-item-20-percent"></div>
-      <div class="flex-item-60-percent">
-        <hr>
-      </div>
-      <div class="flex-item-20-percent"></div>
-    </div>
-
-    <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>
-
-  </template>
-</polymer-element>
-
-<polymer-element name="isolate-run-state" extends="observatory-element">
-  <template>
-    <template if="{{ isolate.pauseEvent != null }}">
-      <strong>paused</strong>
-      <action-link callback="{{ resume }}" label="resume"></action-link>
-    </template>
-
-    <template if="{{ isolate.running }}">
-      <strong>running</strong>
-      <action-link callback="{{ pause }}" label="pause"></action-link>
-    </template>
-
-    <template if="{{ isolate.idle }}">
-      <strong>idle</strong>
-    </template>
-
-    <template if="{{ isolate.loading }}">
-      <strong>loading...</strong>
-    </template>
-  </template>
-</polymer-element>
 
-<polymer-element name="isolate-location" extends="observatory-element">
-  <template>
-    <template if="{{ isolate.pauseEvent != null }}">
-      <template if="{{ isolate.pauseEvent['eventType'] == 'IsolateCreated' }}">
-        at isolate start
-      </template>
-      <template if="{{ isolate.pauseEvent['eventType'] == 'IsolateShutdown' }}">
-        at isolate exit
-      </template>
-      <template if="{{ isolate.pauseEvent['eventType'] == 'IsolateInterrupted' }}">
-        at
-        <function-ref ref="{{ isolate.topFrame['function'] }}">
-        </function-ref>
-        (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFrame['tokenPos'] }}"></script-ref>)
-      </template>
-      <template if="{{ isolate.pauseEvent['eventType'] == 'BreakpointReached' }}">
-        at breakpoint {{ isolate.pauseEvent['breakpoint']['id'] }}
-        <function-ref ref="{{ isolate.topFrame['function'] }}">
-        </function-ref>
-        (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFrame['tokenPos'] }}"></script-ref>)
-      </template>
+.break-wrap {
+  word-wrap: break-word;
+}
+</style>
+    <template if="{{ small }}">
+      <a href="{{ url }}">{{ name }}</a>
     </template>
-
-    <template if="{{ isolate.running }}">
-      at
-      <function-ref ref="{{ isolate.topFrame['function'] }}">
-      </function-ref>
-      (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFrame['tokenPos'] }}"></script-ref>)
+    <template if="{{ !small }}">
+      <a href="{{ url }}">({{ ref['pid'] }}) {{ name }} {{ ref['arguments'] }}</a>
     </template>
-
   </template>
 </polymer-element>
 
-<polymer-element name="isolate-shared-summary" extends="observatory-element">
+<polymer-element name="io-process-view" extends="observatory-element">
   <template>
     <style>
-      .errorBox {
-        background-color: #f5f5f5;
-        border: 1px solid #ccc;
-        padding: 10px;
-        font-family: consolas, courier, monospace;
-        font-size: 1em;
-        line-height: 1.2em;
-        white-space: pre;
-      }
-    </style>
-    <style>
 /* Global styles */
 * {
   margin: 0;
@@ -8264,68 +8308,931 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
-    <template if="{{ isolate.error != null }}">
-      <div class="content-centered">
-        <pre class="errorBox">{{ isolate.error.message }}</pre>
-        <br>
-      </div>
-    </template>
-    <div class="flex-row">
-      <div class="flex-item-10-percent">
-      </div>
-      <div class="flex-item-40-percent">
-        <isolate-counter-chart counters="{{ isolate.counters }}"></isolate-counter-chart>
-      </div>
-      <div class="flex-item-40-percent">
-        <div class="memberList">
-          <div class="memberItem">
-            <div class="memberName">new heap</div>
-            <div class="memberValue">
-              {{ isolate.newHeapUsed | formatSize }}
-              of
-              {{ isolate.newHeapCapacity | formatSize }}
-            </div>
-          </div>
-          <div class="memberItem">
-            <div class="memberName">old heap</div>
-            <div class="memberValue">
-              {{ isolate.oldHeapUsed | formatSize }}
-              of
-              {{ isolate.oldHeapCapacity | formatSize }}
-            </div>
-          </div>
+
+    <nav-bar>
+      <top-nav-menu last="{{ true }}"></top-nav-menu>
+      <nav-refresh callback="{{ refresh }}"></nav-refresh>
+    </nav-bar>
+
+    <div class="content">
+      <h1>Process</h1>
+
+      <br>
+
+      <div class="memberList">
+        <div class="memberItem">
+          <div class="memberName">Path</div>
+          <div class="memberValue">{{ process['name'] }}</div>
         </div>
-        <br>
         <div class="memberItem">
-          <div class="memberValue">
-            See <a href="{{ isolate.relativeHashLink('stacktrace') }}">stack trace</a>
-          </div>
+          <div class="memberName">Pid</div>
+          <div class="memberValue">{{ process['pid'] }}</div>
         </div>
         <div class="memberItem">
-          <div class="memberValue">
-            See <a href="{{ isolate.relativeHashLink('profile') }}">cpu profile</a>
-          </div>
+          <div class="memberName">Arguments</div>
+          <div class="memberValue">{{ process['arguments'] }}</div>
         </div>
         <div class="memberItem">
-          <div class="memberValue">
-            See <a href="{{ isolate.relativeHashLink('allocationprofile') }}">allocation profile</a>
-          </div>
+          <div class="memberName">Started</div>
+          <div class="memberValue">{{ process['started'] }}</div>
         </div>
         <div class="memberItem">
-          <div class="memberValue">
-            See <a href="{{ isolate.relativeHashLink('heapmap') }}">heap map</a>
-          </div>
+          <div class="memberName">Working Directory</div>
+          <div class="memberValue">{{ process['workingDirectory'] }}</div>
         </div>
-        <template if="{{ isolate.ioEnabled }}">
-          <div class="memberItem">
-            <div class="memberValue">
-              See <a href="{{ isolate.relativeHashLink('io') }}">dart:io</a>
-            </div>
-          </div>
-        </template>
-      </div>
-      <div class="flex-item-10-percent">
+      </div>
+
+      <br>
+
+      <h2>Environment</h2>
+      <div class="well">
+        <div class="monospace break-wrap">
+          <template repeat="{{ variable in process['environment'] }}">
+            {{ variable }}
+            <br>
+          </template>
+        </div>
+      </div>
+    </div>
+    <br>
+    <hr>
+  </template>
+</polymer-element>
+
+
+
+
+<polymer-element name="isolate-ref" extends="service-ref">
+<template><style>
+/* Global styles */
+* {
+  margin: 0;
+  padding: 0;
+  font: 400 14px 'Montserrat', sans-serif;
+  color: #333;
+  box-sizing: border-box;
+}
+
+.content {
+  padding-left: 10%;
+  font: 400 14px 'Montserrat', sans-serif;
+}
+
+.content-centered {
+  padding-left: 10%;
+  padding-right: 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;
+}
+
+.monospace {
+  font-family: consolas, courier, monospace;
+  font-size: 1em;
+  line-height: 1.2em;
+  white-space: nowrap;
+}
+
+a {
+  color: #0489c3;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+em {
+  color: inherit;
+  font-style:italic;
+}
+
+hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: 0;
+  border-top: 1px solid #eee;
+  height: 0;
+  box-sizing: content-box;
+}
+
+.list-group {
+  padding-left: 0;
+  margin-bottom: 20px;
+}
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+  margin-bottom: -1px;
+  background-color: #fff;
+}
+
+.list-group-item:first-child {
+  /* rounded top corners */
+  border-top-right-radius:4px;
+  border-top-left-radius:4px;
+}
+
+.list-group-item:last-child {
+  margin-bottom: 0;
+  /* rounded bottom corners */
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius:4px;
+}
+
+/* Flex row container */
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+/* Flex column container */
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-item-fit {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+}
+
+.flex-item-no-shrink {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+}
+
+.flex-item-fill {
+  flex-grow: 0;
+  flex-shrink: 1;  /* shrink when pressured */
+  flex-basis: 100%;  /* try and take 100% */
+}
+
+.flex-item-fixed-1-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 8.3%;
+}
+
+.flex-item-fixed-2-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 16.6%;
+}
+
+.flex-item-fixed-4-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 33.3333%;
+}
+
+.flex-item-fixed-6-12, .flex-item-50-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 50%;
+}
+
+.flex-item-fixed-8-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 66.6666%;
+}
+
+.flex-item-fixed-9-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 75%;
+}
+
+
+.flex-item-fixed-12-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 100%;
+}
+
+.flex-item-10-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 10%;
+}
+
+.flex-item-15-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 15%;
+}
+
+.flex-item-20-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 20%;
+}
+
+.flex-item-30-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 30%;
+}
+
+.flex-item-40-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 40%;
+}
+
+.flex-item-60-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 60%;
+}
+
+.flex-item-70-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 70%;
+}
+
+.flex-item-80-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 80%;
+}
+
+.well {
+  min-height: 20px;
+  padding: 19px;
+  margin-bottom: 20px;
+  background-color: #f5f5f5;
+  border: 1px solid #e3e3e3;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
+}
+
+.break-wrap {
+  word-wrap: break-word;
+}
+</style>
+  <a href="{{ url }}">{{ ref.name }}</a>
+</template>
+
+</polymer-element>
+
+  
+  
+  
+  
+  
+  
+<polymer-element name="isolate-summary" extends="observatory-element">
+  <template>
+    <style>
+/* Global styles */
+* {
+  margin: 0;
+  padding: 0;
+  font: 400 14px 'Montserrat', sans-serif;
+  color: #333;
+  box-sizing: border-box;
+}
+
+.content {
+  padding-left: 10%;
+  font: 400 14px 'Montserrat', sans-serif;
+}
+
+.content-centered {
+  padding-left: 10%;
+  padding-right: 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;
+}
+
+.monospace {
+  font-family: consolas, courier, monospace;
+  font-size: 1em;
+  line-height: 1.2em;
+  white-space: nowrap;
+}
+
+a {
+  color: #0489c3;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+em {
+  color: inherit;
+  font-style:italic;
+}
+
+hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: 0;
+  border-top: 1px solid #eee;
+  height: 0;
+  box-sizing: content-box;
+}
+
+.list-group {
+  padding-left: 0;
+  margin-bottom: 20px;
+}
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+  margin-bottom: -1px;
+  background-color: #fff;
+}
+
+.list-group-item:first-child {
+  /* rounded top corners */
+  border-top-right-radius:4px;
+  border-top-left-radius:4px;
+}
+
+.list-group-item:last-child {
+  margin-bottom: 0;
+  /* rounded bottom corners */
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius:4px;
+}
+
+/* Flex row container */
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+/* Flex column container */
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-item-fit {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+}
+
+.flex-item-no-shrink {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+}
+
+.flex-item-fill {
+  flex-grow: 0;
+  flex-shrink: 1;  /* shrink when pressured */
+  flex-basis: 100%;  /* try and take 100% */
+}
+
+.flex-item-fixed-1-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 8.3%;
+}
+
+.flex-item-fixed-2-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 16.6%;
+}
+
+.flex-item-fixed-4-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 33.3333%;
+}
+
+.flex-item-fixed-6-12, .flex-item-50-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 50%;
+}
+
+.flex-item-fixed-8-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 66.6666%;
+}
+
+.flex-item-fixed-9-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 75%;
+}
+
+
+.flex-item-fixed-12-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 100%;
+}
+
+.flex-item-10-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 10%;
+}
+
+.flex-item-15-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 15%;
+}
+
+.flex-item-20-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 20%;
+}
+
+.flex-item-30-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 30%;
+}
+
+.flex-item-40-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 40%;
+}
+
+.flex-item-60-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 60%;
+}
+
+.flex-item-70-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 70%;
+}
+
+.flex-item-80-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 80%;
+}
+
+.well {
+  min-height: 20px;
+  padding: 19px;
+  margin-bottom: 20px;
+  background-color: #f5f5f5;
+  border: 1px solid #e3e3e3;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
+}
+
+.break-wrap {
+  word-wrap: break-word;
+}
+</style>
+    <div class="flex-row">
+      <div class="flex-item-10-percent">
+        <img src="packages/observatory/src/elements/img/isolate_icon.png">
+      </div>
+      <div class="flex-item-10-percent">
+        <isolate-ref ref="{{ isolate }}"></isolate-ref>
+      </div>
+      <div class="flex-item-20-percent">
+        <isolate-run-state isolate="{{ isolate }}"></isolate-run-state>
+      </div>
+      <div class="flex-item-50-percent">
+        <isolate-location isolate="{{ isolate }}"></isolate-location>
+      </div>
+      <div class="flex-item-10-percent">
+      </div>
+    </div>
+
+    <div class="flex-row">
+      <div class="flex-item-20-percent"></div>
+      <div class="flex-item-60-percent">
+        <hr>
+      </div>
+      <div class="flex-item-20-percent"></div>
+    </div>
+
+    <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>
+
+  </template>
+</polymer-element>
+
+<polymer-element name="isolate-run-state" extends="observatory-element">
+  <template>
+    <template if="{{ isolate.pauseEvent != null }}">
+      <strong>paused</strong>
+      <action-link callback="{{ resume }}" label="resume"></action-link>
+    </template>
+
+    <template if="{{ isolate.running }}">
+      <strong>running</strong>
+      <action-link callback="{{ pause }}" label="pause"></action-link>
+    </template>
+
+    <template if="{{ isolate.idle }}">
+      <strong>idle</strong>
+    </template>
+
+    <template if="{{ isolate.loading }}">
+      <strong>loading...</strong>
+    </template>
+  </template>
+</polymer-element>
+
+<polymer-element name="isolate-location" extends="observatory-element">
+  <template>
+    <template if="{{ isolate.pauseEvent != null }}">
+      <template if="{{ isolate.pauseEvent['eventType'] == 'IsolateCreated' }}">
+        at isolate start
+      </template>
+      <template if="{{ isolate.pauseEvent['eventType'] == 'IsolateShutdown' }}">
+        at isolate exit
+      </template>
+      <template if="{{ isolate.pauseEvent['eventType'] == 'IsolateInterrupted' }}">
+        at
+        <function-ref ref="{{ isolate.topFrame['function'] }}">
+        </function-ref>
+        (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFrame['tokenPos'] }}"></script-ref>)
+      </template>
+      <template if="{{ isolate.pauseEvent['eventType'] == 'BreakpointReached' }}">
+        at breakpoint {{ isolate.pauseEvent['breakpoint']['id'] }}
+        <function-ref ref="{{ isolate.topFrame['function'] }}">
+        </function-ref>
+        (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFrame['tokenPos'] }}"></script-ref>)
+      </template>
+    </template>
+
+    <template if="{{ isolate.running }}">
+      at
+      <function-ref ref="{{ isolate.topFrame['function'] }}">
+      </function-ref>
+      (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFrame['tokenPos'] }}"></script-ref>)
+    </template>
+
+  </template>
+</polymer-element>
+
+<polymer-element name="isolate-shared-summary" extends="observatory-element">
+  <template>
+    <style>
+      .errorBox {
+        background-color: #f5f5f5;
+        border: 1px solid #ccc;
+        padding: 10px;
+        font-family: consolas, courier, monospace;
+        font-size: 1em;
+        line-height: 1.2em;
+        white-space: pre;
+      }
+    </style>
+    <style>
+/* Global styles */
+* {
+  margin: 0;
+  padding: 0;
+  font: 400 14px 'Montserrat', sans-serif;
+  color: #333;
+  box-sizing: border-box;
+}
+
+.content {
+  padding-left: 10%;
+  font: 400 14px 'Montserrat', sans-serif;
+}
+
+.content-centered {
+  padding-left: 10%;
+  padding-right: 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;
+}
+
+.monospace {
+  font-family: consolas, courier, monospace;
+  font-size: 1em;
+  line-height: 1.2em;
+  white-space: nowrap;
+}
+
+a {
+  color: #0489c3;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+em {
+  color: inherit;
+  font-style:italic;
+}
+
+hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: 0;
+  border-top: 1px solid #eee;
+  height: 0;
+  box-sizing: content-box;
+}
+
+.list-group {
+  padding-left: 0;
+  margin-bottom: 20px;
+}
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+  margin-bottom: -1px;
+  background-color: #fff;
+}
+
+.list-group-item:first-child {
+  /* rounded top corners */
+  border-top-right-radius:4px;
+  border-top-left-radius:4px;
+}
+
+.list-group-item:last-child {
+  margin-bottom: 0;
+  /* rounded bottom corners */
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius:4px;
+}
+
+/* Flex row container */
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+/* Flex column container */
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-item-fit {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+}
+
+.flex-item-no-shrink {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+}
+
+.flex-item-fill {
+  flex-grow: 0;
+  flex-shrink: 1;  /* shrink when pressured */
+  flex-basis: 100%;  /* try and take 100% */
+}
+
+.flex-item-fixed-1-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 8.3%;
+}
+
+.flex-item-fixed-2-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 16.6%;
+}
+
+.flex-item-fixed-4-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 33.3333%;
+}
+
+.flex-item-fixed-6-12, .flex-item-50-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 50%;
+}
+
+.flex-item-fixed-8-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 66.6666%;
+}
+
+.flex-item-fixed-9-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 75%;
+}
+
+
+.flex-item-fixed-12-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 100%;
+}
+
+.flex-item-10-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 10%;
+}
+
+.flex-item-15-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 15%;
+}
+
+.flex-item-20-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 20%;
+}
+
+.flex-item-30-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 30%;
+}
+
+.flex-item-40-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 40%;
+}
+
+.flex-item-60-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 60%;
+}
+
+.flex-item-70-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 70%;
+}
+
+.flex-item-80-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 80%;
+}
+
+.well {
+  min-height: 20px;
+  padding: 19px;
+  margin-bottom: 20px;
+  background-color: #f5f5f5;
+  border: 1px solid #e3e3e3;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
+}
+
+.break-wrap {
+  word-wrap: break-word;
+}
+</style>
+    <template if="{{ isolate.error != null }}">
+      <div class="content-centered">
+        <pre class="errorBox">{{ isolate.error.message }}</pre>
+        <br>
+      </div>
+    </template>
+    <div class="flex-row">
+      <div class="flex-item-10-percent">
+      </div>
+      <div class="flex-item-40-percent">
+        <isolate-counter-chart counters="{{ isolate.counters }}"></isolate-counter-chart>
+      </div>
+      <div class="flex-item-40-percent">
+        <div class="memberList">
+          <div class="memberItem">
+            <div class="memberName">new heap</div>
+            <div class="memberValue">
+              {{ isolate.newHeapUsed | formatSize }}
+              of
+              {{ isolate.newHeapCapacity | formatSize }}
+            </div>
+          </div>
+          <div class="memberItem">
+            <div class="memberName">old heap</div>
+            <div class="memberValue">
+              {{ isolate.oldHeapUsed | formatSize }}
+              of
+              {{ isolate.oldHeapCapacity | formatSize }}
+            </div>
+          </div>
+        </div>
+        <br>
+        <div class="memberItem">
+          <div class="memberValue">
+            See <a href="{{ isolate.relativeHashLink('stacktrace') }}">stack trace</a>
+          </div>
+        </div>
+        <div class="memberItem">
+          <div class="memberValue">
+            See <a href="{{ isolate.relativeHashLink('profile') }}">cpu profile</a>
+          </div>
+        </div>
+        <div class="memberItem">
+          <div class="memberValue">
+            See <a href="{{ isolate.relativeHashLink('allocationprofile') }}">allocation profile</a>
+          </div>
+        </div>
+        <div class="memberItem">
+          <div class="memberValue">
+            See <a href="{{ isolate.relativeHashLink('heapmap') }}">heap map</a>
+          </div>
+        </div>
+        <template if="{{ isolate.ioEnabled }}">
+          <div class="memberItem">
+            <div class="memberValue">
+              See <a href="{{ isolate.relativeHashLink('io') }}">dart:io</a>
+            </div>
+          </div>
+        </template>
+      </div>
+      <div class="flex-item-10-percent">
       </div>
     </div>
   </template>
@@ -8577,6 +9484,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
     <style>
       .sourceInset {
@@ -8941,6 +9852,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
     <nav-bar>
       <top-nav-menu></top-nav-menu>
@@ -9358,6 +10273,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
 
     <nav-bar>
@@ -9739,6 +10658,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
   <style>
     .table {
@@ -10170,6 +11093,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
     <nav-bar>
       <top-nav-menu></top-nav-menu>
@@ -10581,6 +11508,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
   <nav-bar>
     <top-nav-menu></top-nav-menu>
@@ -10841,6 +11772,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
     <div class="flex-row">
       <div class="flex-item-fixed-1-12">
@@ -11100,6 +12035,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
     <nav-bar>
       <top-nav-menu></top-nav-menu>
@@ -11361,6 +12300,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
 
     <nav-bar>
@@ -11651,6 +12594,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
     <nav-bar>
       <top-nav-menu last="{{ true }}"></top-nav-menu>
@@ -11897,6 +12844,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
     <nav-bar>
       <top-nav-menu last="{{ true }}"></top-nav-menu>
@@ -12138,6 +13089,10 @@ hr {
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
+
+.break-wrap {
+  word-wrap: break-word;
+}
 </style>
   <a href="{{ url }}">{{ ref.name }}</a>
 </template>