Add dart:io view to the 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 74f308c10540b752b650cffaf09e1b648e21f629..ca3f4b25a96eab2f8ad58e153f4d5bdd49d04f38 100644
--- a/runtime/bin/vmservice/client/deployed/web/index_devtools.html
+++ b/runtime/bin/vmservice/client/deployed/web/index_devtools.html
@@ -334,6 +334,7 @@ hr {
   
   
   
+  
 
   
 
@@ -4956,9 +4957,12 @@ hr {
 
 </polymer-element>
 
-
-<polymer-element name="isolate-ref" extends="service-ref">
-<template><style>
+  
+  
+  
+<polymer-element name="io-view" extends="observatory-element">
+  <template>
+    <style>
 /* Global styles */
 * {
   margin: 0;
@@ -5185,18 +5189,29 @@ hr {
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
 </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>dart:io</h1>
+
+      <br>
+
+      <ul class="list-group">
+        <li class="list-group-item">
+          <a href="{{io.isolate.relativeHashLink('io/http/servers')}}">HTTP Servers</a>
+        </li>
+      </ul>
+    </div>
+    <br>
+    <hr>
+  </template>
 </polymer-element>
 
-  
-  
-  
-  
-  
-  
-<polymer-element name="isolate-summary" extends="observatory-element">
+<polymer-element name="io-http-server-list-view" extends="observatory-element">
   <template>
     <style>
 /* Global styles */
@@ -5425,105 +5440,33 @@ hr {
   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>
+    <nav-bar>
+      <top-nav-menu last="{{ true }}"></top-nav-menu>
+      <nav-refresh callback="{{ refresh }}"></nav-refresh>
+    </nav-bar>
 
-<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>
+    <div class="content">
+      <h1>HttpServers</h1>
 
-    <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>
+      <br>
 
+      <ul class="list-group">
+        <template repeat="{{ httpServer in list['members'] }}">
+          <li class="list-group-item">
+            <io-http-server-ref ref="{{ httpServer }}"></io-http-server-ref>
+          </li>
+        </template>
+      </ul>
+    </div>
+    <br>
+    <hr>
   </template>
 </polymer-element>
 
-<polymer-element name="isolate-shared-summary" extends="observatory-element">
+<polymer-element name="io-http-server-ref" extends="service-ref">
   <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;
@@ -5750,60 +5693,1129 @@ hr {
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
 </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="memberList">
-            <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>
-          </div>
+    <a href="{{ url }}">{{ name }}</a>
+  </template>
+</polymer-element>
+
+<polymer-element name="io-http-server-view" 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);
+}
+</style>
+
+    <nav-bar>
+      <top-nav-menu last="{{ true }}"></top-nav-menu>
+      <nav-refresh callback="{{ refresh }}"></nav-refresh>
+    </nav-bar>
+
+    <div class="content">
+      <h1>HttpServer</h1>
+
+      <br>
+
+      <div class="memberList">
+        <div class="memberItem">
+          <div class="memberName">Address</div>
+          <div class="memberValue">{{ httpServer['address'] }}</div>
+        </div>
+        <div class="memberItem">
+          <div class="memberName">Port</div>
+          <div class="memberValue">{{ httpServer['port'] }}</div>
+        </div>
+        <div class="memberItem">
+          <div class="memberName">Active connections</div>
+          <div class="memberValue">{{ httpServer['active'] }}</div>
+        </div>
+        <div class="memberItem">
+          <div class="memberName">Idle connections</div>
+          <div class="memberValue">{{ httpServer['idle'] }}</div>
+        </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);
+}
+</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);
+}
+</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);
+}
+</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>