Version 1.5.0-dev.4.6

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

Index: dart/runtime/bin/vmservice/client/deployed/web/index.html
===================================================================
--- dart/runtime/bin/vmservice/client/deployed/web/index.html	(revision 37220)
+++ dart/runtime/bin/vmservice/client/deployed/web/index.html	(working copy)
@@ -659,16 +659,16 @@
                         isBool(ref.serviceType) ||
                         isInt(ref.serviceType)) ||
                         isDouble(ref.serviceType)) }}">
-        <a href="{{ url }}">{{ ref['valueAsString'] }}</a>
+        <a on-click="{{ goto }}" href="{{ url }}">{{ ref['valueAsString'] }}</a>
       </template>
 
       <template if="{{ (isType(ref.serviceType)) }}">
-        <a href="{{ url }}">{{ ref['user_name'] }}</a>
+        <a on-click="{{ goto }}" href="{{ url }}">{{ ref['user_name'] }}</a>
       </template>
 
       <template if="{{ isInstance(ref.serviceType) &amp;&amp;
                        ref['closureFunc'] != null}}">
-        <a href="{{ url }}">
+        <a on-click="{{ goto }}" href="{{ url }}">
           <!-- TODO(turnidge): Switch this to fully-qualified function -->
           {{ ref['closureFunc']['user_name'] }}
         </a>
@@ -676,7 +676,7 @@
 
       <template if="{{ isInstance(ref.serviceType) &amp;&amp;
                        ref['closureFunc'] == null}}">
-        <a href="{{ url }}"><em>{{ ref['class']['user_name'] }}</em></a>
+        <a on-click="{{ goto }}" href="{{ url }}"><em>{{ ref['class'].name }}</em></a>
         <curly-block callback="{{ expander() }}">
           <div class="memberList">
             <template repeat="{{ field in ref['fields'] }}">
@@ -694,7 +694,7 @@
       </template>
 
       <template if="{{ isList(ref.serviceType) }}">
-        <a href="{{ url }}"><em>{{ ref['class']['user_name'] }}</em> ({{ ref['length']}})</a>
+        <a on-click="{{ goto }}" href="{{ url }}"><em>{{ ref['class'].name }}</em> ({{ ref['length']}})</a>
         <curly-block callback="{{ expander() }}">
           <div class="memberList">
             <template repeat="{{ element in ref['elements'] }}">
@@ -1054,7 +1054,7 @@
     </style>
 
     <li class="menu">
-      <a href="{{ link }}">{{ anchor }}</a>
+      <a on-click="{{ goto }}" href="{{ gotoLink(link) }}">{{ anchor }}</a>
       <ul><content></content></ul>
     </li>
     <template if="{{ !last }}">
@@ -1102,7 +1102,7 @@
         text-decoration: none;
       }
     </style>
-    <li><a href="{{ link }}">{{ anchor }}</a>
+    <li><a on-click="{{ goto }}" href="{{ gotoLink(link) }}">{{ anchor }}</a>
       <ul><content></content></ul>
     </li>
   </template>
@@ -1138,9 +1138,33 @@
   </template>
 </polymer-element>
 
+<polymer-element name="nav-control" extends="observatory-element">
+  <template>
+    <style>
+      .black {
+        color: #000;
+      }
+      li {
+        float: right;
+        margin: 0;
+      }
+      button {
+        margin: 3px;
+        padding: 8px;
+      }
+    </style>
+    <!-- Disable until issues with history in Dartium are fixed
+    <li>
+      <button class="black" on-click="{{ back }}">&#9664;</button>
+      <button class="black" on-click="{{ forward }}">&#9654;</button>
+    </li>
+    -->
+  </template>
+</polymer-element>
+
 <polymer-element name="top-nav-menu">
   <template>
-    <nav-menu link="#/vm" anchor="Observatory" last="{{ last }}">
+    <nav-menu link="/vm" anchor="Observatory" last="{{ last }}">
       <content></content>
     </nav-menu>
   </template>
@@ -1149,11 +1173,11 @@
 <polymer-element name="isolate-nav-menu" extends="observatory-element">
   <template>
     <nav-menu link="{{ hashLinkWorkaround }}" anchor="{{ isolate.name }}" last="{{ last }}">
-      <nav-menu-item link="{{ isolate.relativeHashLink('stacktrace') }}" anchor="stack trace"></nav-menu-item>
-      <nav-menu-item link="{{ isolate.relativeHashLink('profile') }}" anchor="cpu profile"></nav-menu-item>
-      <nav-menu-item link="{{ isolate.relativeHashLink('allocationprofile') }}" anchor="allocation profile"></nav-menu-item>
-      <nav-menu-item link="{{ isolate.relativeHashLink('heapmap') }}" anchor="heap map"></nav-menu-item>
-      <nav-menu-item link="{{ isolate.relativeHashLink('debug/breakpoints') }}" anchor="breakpoints"></nav-menu-item>
+      <nav-menu-item link="{{ isolate.relativeLink('stacktrace') }}" anchor="stack trace"></nav-menu-item>
+      <nav-menu-item link="{{ isolate.relativeLink('profile') }}" anchor="cpu profile"></nav-menu-item>
+      <nav-menu-item link="{{ isolate.relativeLink('allocationprofile') }}" anchor="allocation profile"></nav-menu-item>
+      <nav-menu-item link="{{ isolate.relativeLink('heapmap') }}" anchor="heap map"></nav-menu-item>
+      <nav-menu-item link="{{ isolate.relativeLink('debug/breakpoints') }}" anchor="breakpoints"></nav-menu-item>
       <content></content>
     </nav-menu>
   </template>
@@ -1161,7 +1185,7 @@
 
 <polymer-element name="library-nav-menu" extends="observatory-element">
   <template>
-    <nav-menu link="{{ library.hashLink }}" anchor="{{ library.name }}" last="{{ last }}">
+    <nav-menu link="{{ library.link }}" anchor="{{ library.name }}" last="{{ last }}">
       <content></content>
     </nav-menu>
   </template>
@@ -1169,7 +1193,7 @@
 
 <polymer-element name="class-nav-menu" extends="observatory-element">
   <template>
-    <nav-menu link="{{ cls.hashLink }}" anchor="{{ cls.name }}" last="{{ last }}">
+    <nav-menu link="{{ cls.link }}" anchor="{{ cls.name }}" last="{{ last }}">
       <content></content>
     </nav-menu>
   </template>
@@ -1417,8 +1441,9 @@
     <nav-bar>
       <top-nav-menu></top-nav-menu>
       <isolate-nav-menu isolate="{{ msg.isolate }}"></isolate-nav-menu>
-      <nav-menu link="{{ msg.isolate.relativeHashLink('debug/breakpoints') }}" anchor="breakpoints" last="{{ true }}"></nav-menu>
+      <nav-menu link="{{ gotoLink(msg.isolate.relativeLink('debug/breakpoints')) }}" anchor="breakpoints" last="{{ true }}"></nav-menu>
       <nav-refresh callback="{{ refresh }}"></nav-refresh>
+      <nav-control></nav-control>
     </nav-bar>
     <template if="{{ msg['breakpoints'].isEmpty }}">
       <div>
@@ -1676,11 +1701,363 @@
 .break-wrap {
   word-wrap: break-word;
 }
-</style><a title="{{ hoverText }}" href="{{ url }}">{{ name }}</a></template>
+</style><a on-click="{{ goto }}" title="{{ hoverText }}" href="{{ url }}">{{ name }}</a></template>
 
 
 </polymer-element>
 
+
+
+
+<polymer-element name="class-tree" 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;
+}
+
+b {
+  color: inherit;
+  font-weight: bold;
+}
+
+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>
+    <style>
+      .table {
+        border-collapse: collapse!important;
+        width: 100%;
+        margin-bottom: 20px
+      }
+      .table thead > tr > th,
+      .table tbody > tr > th,
+      .table tfoot > tr > th,
+      .table thead > tr > td,
+      .table tbody > tr > td,
+      .table tfoot > tr > td {
+        padding: 8px;
+        vertical-align: top;
+      }
+      .table thead > tr > th {
+        vertical-align: bottom;
+        text-align: left;
+        border-bottom:2px solid #ddd;
+      }
+
+      tr:hover > td {
+        background-color: #FFF3E3;
+      }
+      .rowColor0 {
+        background-color: #FFE9CC;
+      }
+      .rowColor1 {
+        background-color: #FFDEB2;
+      }
+      .rowColor2 {
+        background-color: #FFD399;
+      }
+      .rowColor3 {
+        background-color: #FFC87F;
+      }
+      .rowColor4 {
+        background-color: #FFBD66;
+      }
+      .rowColor5 {
+        background-color: #FFB24C;
+      }
+      .rowColor6 {
+        background-color: #FFA733;
+      }
+      .rowColor7 {
+        background-color: #FF9C19;
+      }
+      .rowColor8 {
+        background-color: #FF9100;
+      }
+
+      .tooltip {
+        display: block;
+        position: absolute;
+        visibility: hidden;
+        opacity: 0;
+        transition: visibility 0s linear 0.5s;
+        transition: opacity .4s ease-in-out;
+      }
+
+      tr:hover .tooltip {
+        display: block;
+        position: absolute;
+        top: 100%;
+        right: 100%;
+        visibility: visible;
+        z-index: 999;
+        width: 400px;
+        color: #ffffff;
+        background-color: #0489c3;
+        border-top-right-radius: 8px;
+        border-top-left-radius: 8px;
+        border-bottom-right-radius: 8px;
+        border-bottom-left-radius: 8px;
+        transition: visibility 0s linear 0.5s;
+        transition: opacity .4s ease-in-out;
+        opacity: 1;
+      }
+
+      .white {
+        color: #ffffff;
+      }
+    </style>
+    <nav-bar>
+      <top-nav-menu last="{{ true }}"></top-nav-menu>
+      <nav-control></nav-control>
+    </nav-bar>
+    <div class="content-centered">
+      <h1>Class Hierarchy</h1>
+      <table id="tableTree" class="table">
+        <thead>
+          <tr>
+            <th>Class</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr template="" repeat="{{row in tree.rows }}">
+            <td on-click="{{toggleExpanded}}" class="{{ coloring(row) }}" style="{{ padding(row) }}">
+              <span id="expand" style="{{ row.expanderStyle }}">{{ row.expander }}</span>
+              <class-ref ref="{{ row.cls }}"></class-ref>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </template>
+</polymer-element>
+
+
+
   
   
   
@@ -2055,7 +2432,7 @@
       <template if="{{ (ref['declared_type']['name'] != 'dynamic') }}">
         <instance-ref ref="{{ ref['declared_type'] }}"></instance-ref>
       </template>
-      <a title="{{ hoverText }}" href="{{ url }}">{{ name }}</a>
+      <a on-click="{{ goto }}" title="{{ hoverText }}" href="{{ url }}">{{ name }}</a>
     </div>
   </template>
   
@@ -2306,7 +2683,7 @@
      --><template if="{{ qualified &amp;&amp; hasParent }}"><!--
        --><function-ref ref="{{ ref['parent'] }}" qualified="{{ true }}">
           </function-ref>.<!--
-     --></template><a href="{{ url }}">{{ name }}</a><!--
+     --></template><a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a><!--
   --></template><template if="{{ !isDart }}"><span> {{ name }}</span></template></template>
 
 </polymer-element>
@@ -2550,10 +2927,10 @@
 }
 </style>
   <template if="{{ nameIsEmpty }}">
-    <a href="{{ url }}">unnamed</a>
+    <a on-click="{{ goto }}" href="{{ url }}">unnamed</a>
   </template>
   <template if="{{ !nameIsEmpty }}">
-    <a href="{{ url }}">{{ name }}</a>
+    <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a>
   </template>
 </template>
 
@@ -2799,7 +3176,7 @@
   word-wrap: break-word;
 }
 </style>
-  <a title="{{ hoverText }}" href="{{ url }}">{{ name }}</a>
+  <a on-click="{{ goto }}" title="{{ hoverText }}" href="{{ url }}">{{ name }}</a>
 </template>
 
 </polymer-element>
@@ -3044,17 +3421,18 @@
     <nav-bar>
       <top-nav-menu></top-nav-menu>
       <isolate-nav-menu isolate="{{ cls.isolate }}"></isolate-nav-menu>
-      <library-nav-menu library="{{ cls['library'] }}"></library-nav-menu>
+      <library-nav-menu library="{{ cls.library }}"></library-nav-menu>
       <class-nav-menu cls="{{ cls }}" last="{{ true }}"></class-nav-menu>
       <nav-refresh callback="{{ refresh }}"></nav-refresh>
+      <nav-control></nav-control>
     </nav-bar>
 
     <div class="content">
       <h1>
-        <template if="{{ cls['abstract'] }}">
+        <template if="{{ cls.isAbstract }}">
           abstract
         </template>
-        <template if="{{ cls['patch'] }}">
+        <template if="{{ cls.isPatch }}">
           patch
         </template>
         class {{ cls.name }}
@@ -3063,32 +3441,32 @@
         <div class="memberItem">
           <div class="memberName">library</div>
           <div class="memberValue">
-            <library-ref ref="{{ cls['library'] }}"></library-ref>
+            <library-ref ref="{{ cls.library }}"></library-ref>
           </div>
         </div>
         <div class="memberItem">
           <div class="memberName">script</div>
           <div class="memberValue">
-            <script-ref ref="{{ cls['script'] }}" pos="{{ cls['tokenPos'] }}">
+            <script-ref ref="{{ cls.script }}" pos="{{ cls.tokenPos }}">
             </script-ref>
           </div>
         </div>
 
         <div class="memberItem">&nbsp;</div>
 
-        <template if="{{ cls['super'] != null }}">
+        <template if="{{ cls.superClass != null }}">
           <div class="memberItem">
             <div class="memberName">extends</div>
             <div class="memberValue">
-              <class-ref ref="{{ cls['super'] }}"></class-ref>
+              <class-ref ref="{{ cls.superClass }}"></class-ref>
             </div>
           </div>
         </template>
-        <template if="{{ cls['subclasses'].length > 0 }}">
+        <template if="{{ cls.subClasses.length > 0 }}">
           <div class="memberItem">
             <div class="memberName">extended by</div>
             <div class="memberValue">
-              <template repeat="{{ subclass in cls['subclasses'] }}">
+              <template repeat="{{ subclass in cls.subClasses }}">
                 <class-ref ref="{{ subclass }}"></class-ref>
               </template>
             </div>
@@ -3097,11 +3475,11 @@
 
         <div class="memberItem">&nbsp;</div>
 
-        <template if="{{ cls['interfaces'].length > 0 }}">
+        <template if="{{ cls.interfaces.length > 0 }}">
           <div class="memberItem">
             <div class="memberName">implements</div>
             <div class="memberValue">
-              <template repeat="{{ interface in cls['interfaces'] }}">
+              <template repeat="{{ interface in cls.interfaces }}">
                 <class-ref ref="{{ interface }}"></class-ref>
               </template>
             </div>
@@ -3122,19 +3500,19 @@
       </div>
     </div>
 
-    <template if="{{ cls['error'] != null }}">
+    <template if="{{ cls.error != null }}">
       <!-- TODO(turnidge): Don't use instance-ref for error display here -->
-      <instance-ref ref="{{ cls['error'] }}"></instance-ref>
+      <instance-ref ref="{{ cls.error }}"></instance-ref>
     </template>
 
     <hr>
 
     <div class="content">
-      <template if="{{ cls['fields'].isNotEmpty }}">
+      <template if="{{ cls.fields.isNotEmpty }}">
         fields ({{ cls['fields'].length }})
-        <curly-block expand="{{ cls['fields'].length <= 8 }}">
+        <curly-block expand="{{ cls.fields.length <= 8 }}">
           <div class="memberList">
-            <template repeat="{{ field in cls['fields'] }}">
+            <template repeat="{{ field in cls.fields }}">
               <div class="memberItem">
                 <div class="memberName">
                   <field-ref ref="{{ field }}"></field-ref>
@@ -3150,11 +3528,11 @@
         </curly-block><br><br>
       </template>
 
-      <template if="{{ cls['functions'].isNotEmpty }}">
-        functions ({{ cls['functions'].length }})
-        <curly-block expand="{{ cls['functions'].length <= 8 }}">
+      <template if="{{ cls.functions.isNotEmpty }}">
+        functions ({{ cls.functions.length }})
+        <curly-block expand="{{ cls.functions.length <= 8 }}">
           <div class="memberList">
-            <template repeat="{{ function in cls['functions'] }}">
+            <template repeat="{{ function in cls.functions }}">
               <div class="memberItem">
                 <div class="memberValue">
                   <function-ref ref="{{ function }}" qualified="{{ false }}">
@@ -3419,10 +3797,10 @@
 </style>
     <template if="{{ code.isDartCode }}">
         <template if="{{ code.isOptimized }}">
-          <a href="{{ url }}">*{{ name }}</a>
+          <a on-click="{{ goto }}" href="{{ url }}">*{{ name }}</a>
         </template>
         <template if="{{ !code.isOptimized }}">
-          <a href="{{ url }}">{{ name }}</a>
+          <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a>
         </template>
     </template>
     <template if="{{ !code.isDartCode }}">
@@ -3724,6 +4102,7 @@
       <isolate-nav-menu isolate="{{ code.isolate }}"></isolate-nav-menu>
       <nav-menu link="." anchor="{{ code.name }}" last="{{ true }}"></nav-menu>
       <nav-refresh callback="{{ refresh }}"></nav-refresh>
+      <nav-control></nav-control>
     </nav-bar>
     <div class="content">
       <template if="{{ code.isDartCode &amp;&amp; code.isOptimized }}">
@@ -4088,6 +4467,7 @@
 </style>
     <nav-bar>
       <top-nav-menu last="{{ true }}"></top-nav-menu>
+      <nav-control></nav-control>
     </nav-bar>
     <div class="content-centered">
       <h1>{{ error.kind }}</h1>
@@ -4352,8 +4732,9 @@
       <template if="{{ field['owner'].serviceType == 'Library' }}">
         <library-nav-menu library="{{ field['owner'] }}"></library-nav-menu>
       </template>
-      <nav-menu link="{{ field.hashLink }}" anchor="{{ field['user_name'] }}" last="{{ true }}"></nav-menu>
+      <nav-menu link="{{ field.link }}" anchor="{{ field['user_name'] }}" last="{{ true }}"></nav-menu>
       <nav-refresh callback="{{ refresh }}"></nav-refresh>
+      <nav-control></nav-control>
     </nav-bar>
 
     <div class="content">
@@ -4942,8 +5323,9 @@
 </style>
     <nav-bar>
       <top-nav-menu></top-nav-menu>
-      <nav-menu link="{{ flagList.isolate.relativeHashLink('flags') }}" anchor="flags" last="{{ true }}"></nav-menu>
+      <nav-menu link="{{ flagList.vm.relativeLink('flags') }}" anchor="flags" last="{{ true }}"></nav-menu>
       <nav-refresh callback="{{ refresh }}"></nav-refresh>
+      <nav-control></nav-control>
     </nav-bar>
 
     <div class="content-centered">
@@ -5525,8 +5907,9 @@
       <template if="{{ function['owner'].serviceType == 'Library' }}">
         <library-nav-menu library="{{ function['owner'] }}"></library-nav-menu>
       </template>
-      <nav-menu link="{{ function.hashLink }}" anchor="{{ function.name }}" last="{{ true }}"></nav-menu>
+      <nav-menu link="{{ function.link }}" anchor="{{ function.name }}" last="{{ true }}"></nav-menu>
       <nav-refresh callback="{{ refresh }}"></nav-refresh>
+      <nav-control></nav-control>
     </nav-bar>
 
     <div class="content">
@@ -5878,8 +6261,9 @@
   <nav-bar pad="{{ false }}">
     <top-nav-menu></top-nav-menu>
     <isolate-nav-menu isolate="{{ fragmentation.isolate }}"></isolate-nav-menu>
-    <nav-menu link="{{ fragmentation.isolate.relativeHashLink('heapmap') }}" anchor="heap map" last="{{ true }}"></nav-menu>
+    <nav-menu link="{{ fragmentation.isolate.relativeLink('heapmap') }}" anchor="heap map" last="{{ true }}"></nav-menu>
     <nav-refresh callback="{{ refresh }}"></nav-refresh>
+    <nav-control></nav-control>
   </nav-bar>
   <div class="hover">
     <p style="text-align:center">{{ status }}</p>
@@ -6139,6 +6523,7 @@
     <nav-bar>
       <top-nav-menu last="{{ true }}"></top-nav-menu>
       <nav-refresh callback="{{ refresh }}"></nav-refresh>
+      <nav-control></nav-control>
     </nav-bar>
 
     <div class="content">
@@ -6148,7 +6533,7 @@
 
       <ul class="list-group">
         <li class="list-group-item">
-          <a href="{{io.isolate.relativeHashLink('io/http/servers')}}">HTTP Servers</a>
+          <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('io/http/servers'))}}">HTTP Servers</a>
         </li>
       </ul>
 
@@ -6156,7 +6541,7 @@
 
       <ul class="list-group">
         <li class="list-group-item">
-          <a href="{{io.isolate.relativeHashLink('io/sockets')}}">Sockets</a>
+          <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('io/sockets'))}}">Sockets</a>
         </li>
       </ul>
 
@@ -6164,7 +6549,7 @@
 
       <ul class="list-group">
         <li class="list-group-item">
-          <a href="{{io.isolate.relativeHashLink('io/websockets')}}">WebSockets</a>
+          <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('io/websockets'))}}">WebSockets</a>
         </li>
       </ul>
 
@@ -6172,7 +6557,7 @@
 
       <ul class="list-group">
         <li class="list-group-item">
-          <a href="{{io.isolate.relativeHashLink('io/file/randomaccessfiles')}}">Random Access Files</a>
+          <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('io/file/randomaccessfiles'))}}">Random Access Files</a>
         </li>
       </ul>
 
@@ -6180,7 +6565,7 @@
 
       <ul class="list-group">
         <li class="list-group-item">
-          <a href="{{io.isolate.relativeHashLink('io/processes')}}">Processess</a>
+          <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('io/processes'))}}">Processess</a>
         </li>
       </ul>
 
@@ -6431,6 +6816,9 @@
     <template if="{{ ref.serviceType == 'Socket' }}">
       <io-socket-ref ref="{{ ref }}"></io-socket-ref>
     </template>
+    <template if="{{ ref.serviceType == 'HttpServerConnection' }}">
+      <io-http-server-connection-ref ref="{{ ref }}"></io-http-server-connection-ref>
+    </template>
     <template if="{{ ref.serviceType == 'HttpServer' }}">
       <io-http-server-ref ref="{{ ref }}"></io-http-server-ref>
     </template>
@@ -6943,7 +7331,7 @@
   word-wrap: break-word;
 }
 </style>
-    <a href="{{ url }}">{{ name }}</a>
+    <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a>
   </template>
 </polymer-element>
 
@@ -7211,11 +7599,23 @@
         </div>
         <div class="memberItem">
           <div class="memberName">Active connections</div>
-          <div class="memberValue">{{ httpServer['active'] }}</div>
+          <ul class="list-group">
+            <template repeat="{{ connection in httpServer['active'] }}">
+              <li class="list-group-item">
+                <io-http-server-connection-ref ref="{{ connection }}"></io-http-server-connection-ref>
+              </li>
+            </template>
+          </ul>
         </div>
         <div class="memberItem">
           <div class="memberName">Idle connections</div>
-          <div class="memberValue">{{ httpServer['idle'] }}</div>
+          <ul class="list-group">
+            <template repeat="{{ connection in httpServer['idle'] }}">
+              <li class="list-group-item">
+                <io-http-server-connection-ref ref="{{ connection }}"></io-http-server-connection-ref>
+              </li>
+            </template>
+          </ul>
         </div>
       </div>
     </div>
@@ -7224,7 +7624,7 @@
   </template>
 </polymer-element>
 
-<polymer-element name="io-socket-ref" extends="service-ref">
+<polymer-element name="io-http-server-connection-ref" extends="service-ref">
   <template>
     <style>
 /* Global styles */
@@ -7466,6 +7866,517 @@
   </template>
 </polymer-element>
 
+<polymer-element name="io-http-server-connection-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;
+}
+
+b {
+  color: inherit;
+  font-weight: bold;
+}
+
+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>
+
+    <nav-bar>
+      <top-nav-menu last="{{ true }}"></top-nav-menu>
+      <nav-refresh callback="{{ refresh }}"></nav-refresh>
+    </nav-bar>
+
+    <div class="content">
+      <h1>HttpConnection</h1>
+
+      <br>
+
+      <div class="memberList">
+        <div class="memberItem">
+          <div class="memberName">Socket</div>
+          <div class="memberValue"><io-socket-ref ref="{{ connection['socket'] }}"></io-socket-ref></div>
+        </div>
+        <div class="memberItem">
+          <div class="memberName">State</div>
+          <div class="memberValue">{{ connection['state'] }}</div>
+        </div>
+        <div class="memberItem">
+          <div class="memberName">Server</div>
+          <div class="memberValue"><io-http-server-ref ref="{{ connection['server'] }}"></io-http-server-ref></div>
+        </div>
+      </div>
+    </div>
+    <br>
+    <hr>
+  </template>
+</polymer-element>
+
+<polymer-element name="io-socket-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;
+}
+
+b {
+  color: inherit;
+  font-weight: bold;
+}
+
+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 on-click="{{ goto }}" href="{{ url }}">{{ name }}</a>
+  </template>
+</polymer-element>
+
 <polymer-element name="io-socket-list-view" extends="observatory-element">
   <template>
     <style>
@@ -8297,7 +9208,7 @@
   word-wrap: break-word;
 }
 </style>
-    <a href="{{ url }}">{{ name }}</a>
+    <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a>
   </template>
 </polymer-element>
 
@@ -9062,7 +9973,7 @@
   word-wrap: break-word;
 }
 </style>
-    <a href="{{ url }}">{{ name }}</a>
+    <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a>
   </template>
 </polymer-element>
 
@@ -10098,10 +11009,10 @@
 }
 </style>
     <template if="{{ small }}">
-      <a href="{{ url }}">{{ name }}</a>
+      <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a>
     </template>
     <template if="{{ !small }}">
-      <a href="{{ url }}">({{ ref['pid'] }}) {{ name }} {{ ref['arguments'] }}</a>
+      <a on-click="{{ goto }}" href="{{ url }}">({{ ref['pid'] }}) {{ name }} {{ ref['arguments'] }}</a>
     </template>
   </template>
 </polymer-element>
@@ -10421,7 +11332,6 @@
 
 
 
-
 <polymer-element name="isolate-ref" extends="service-ref">
 <template><style>
 /* Global styles */
@@ -10659,11 +11569,11 @@
   word-wrap: break-word;
 }
 </style>
-  <a href="{{ url }}">{{ ref.name }}</a>
+  <a on-click="{{ goto }}" href="{{ url }}">{{ ref.name }}</a>
 </template>
-
 </polymer-element>
 
+
   
   
   
@@ -11276,31 +12186,38 @@
         <br>
         <div class="memberItem">
           <div class="memberValue">
-            See <a href="{{ isolate.relativeHashLink('stacktrace') }}">stack trace</a>
+            See <a on-click="{{ goto }}" href="{{ gotoLink('/class-tree' + isolate.link) }}">class hierarchy</a>
           </div>
         </div>
         <div class="memberItem">
           <div class="memberValue">
-            See <a href="{{ isolate.relativeHashLink('profile') }}">cpu profile</a>
+            See <a on-click="{{ goto }}" href="{{ gotoLink(isolate.relativeLink('stacktrace')) }}">stack trace</a>
           </div>
         </div>
         <div class="memberItem">
           <div class="memberValue">
-            See <a href="{{ isolate.relativeHashLink('allocationprofile') }}">allocation profile</a>
+            See <a on-click="{{ goto }}" href="{{ gotoLink(isolate.relativeLink('profile')) }}">cpu profile</a>
           </div>
         </div>
         <div class="memberItem">
           <div class="memberValue">
-            See <a href="{{ isolate.relativeHashLink('heapmap') }}">heap map</a>
+            See <a on-click="{{ goto }}" href="{{ gotoLink(isolate.relativeLink('allocationprofile')) }}">allocation profile</a>
           </div>
         </div>
+        <div class="memberItem">
+          <div class="memberValue">
+            See <a on-click="{{ goto }}" href="{{ gotoLink(isolate.relativeLink('heapmap')) }}">heap map</a>
+          </div>
+        </div>
+        <!-- Disable io link until UI is properly implemented.
         <template if="{{ isolate.ioEnabled }}">
           <div class="memberItem">
             <div class="memberValue">
-              See <a href="{{ isolate.relativeHashLink('io') }}">dart:io</a>
+              See <a on-click="{{ goto }}" href="{{ gotoLink(isolate.relativeLink('io')) }}">dart:io</a>
             </div>
           </div>
         </template>
+        -->
       </div>
       <div class="flex-item-10-percent">
       </div>
@@ -11579,6 +12496,7 @@
       <isolate-nav-menu isolate="{{ isolate }}" last="{{ true }}">
       </isolate-nav-menu>
       <nav-refresh callback="{{ refresh }}"></nav-refresh>
+      <nav-control></nav-control>
     </nav-bar>
 
     <div class="content">
@@ -11649,7 +12567,7 @@
         <div class="flex-item-50-percent">
           <div class="memberItem">
             <div class="memberValue">
-              See <a href="{{ isolate.relativeHashLink('debug/breakpoints') }}">breakpoints</a>
+              See <a on-click="{{ goto }}" href="{{ gotoLink(isolate.relativeLink('debug/breakpoints')) }}">breakpoints</a>
             </div>
           </div>
         </div>
@@ -11944,6 +12862,7 @@
       <class-nav-menu cls="{{ instance['class'] }}"></class-nav-menu>
       <nav-menu link="." anchor="instance" last="{{ true }}"></nav-menu>
       <nav-refresh callback="{{ refresh }}"></nav-refresh>
+      <nav-control></nav-control>
     </nav-bar>
 
     <template if="{{ instance['error'] != null }}">
@@ -12369,6 +13288,7 @@
       <isolate-nav-menu isolate="{{ library.isolate }}"></isolate-nav-menu>
       <library-nav-menu library="{{ library }}" last="{{ true }}"></library-nav-menu>
       <nav-refresh callback="{{ refresh }}"></nav-refresh>
+      <nav-control></nav-control>
     </nav-bar>
 
     <div class="content">
@@ -12495,7 +13415,6 @@
 
   
   
-
   
   
   
@@ -12509,8 +13428,6 @@
   
   
   
-  
-  
 
   
   
@@ -12788,10 +13705,11 @@
   <nav-bar>
     <top-nav-menu></top-nav-menu>
     <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu>
-    <nav-menu link="{{ profile.isolate.relativeHashLink('allocationprofile') }}" anchor="heap profile" last="{{ true }}"></nav-menu>
+    <nav-menu link="{{ profile.isolate.relativeLink('allocationprofile') }}" anchor="heap profile" last="{{ true }}"></nav-menu>
     <nav-refresh callback="{{ resetAccumulator }}" label="Reset Accumulator"></nav-refresh>
     <nav-refresh callback="{{ refreshGC }}" label="GC"></nav-refresh>
     <nav-refresh callback="{{ refresh }}"></nav-refresh>
+    <nav-control></nav-control>
   </nav-bar>
 
   <div class="flex-row">
@@ -13196,8 +14114,9 @@
     <nav-bar>
       <top-nav-menu></top-nav-menu>
       <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu>
-      <nav-menu link="{{ profile.isolate.relativeHashLink('profile') }}" anchor="cpu profile" last="{{ true }}"></nav-menu>
+      <nav-menu link="{{ profile.isolate.relativeLink('profile') }}" anchor="cpu profile" last="{{ true }}"></nav-menu>
       <nav-refresh callback="{{ refresh }}"></nav-refresh>
+      <nav-control></nav-control>
     </nav-bar>
     <style>
       .table {
@@ -13624,8 +14543,8 @@
       </li>
     </nav-menu>
     <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></nav-refresh>
-    <nav-refresh callback="{{ refresh }}">
-    </nav-refresh>
+    <nav-refresh callback="{{ refresh }}"></nav-refresh>
+    <nav-control></nav-control>
   </nav-bar>
 
   <script-inset id="scriptInset" script="{{ script }}" pos="{{ script.firstTokenPos }}" endpos="{{ script.lastTokenPos }}">
@@ -13879,8 +14798,9 @@
     <nav-bar>
       <top-nav-menu></top-nav-menu>
       <isolate-nav-menu isolate="{{ trace.isolate }}"></isolate-nav-menu>
-      <nav-menu link="{{ trace.isolate.relativeHashLink('stacktrace') }}" anchor="stack trace" last="{{ true }}"></nav-menu>
+      <nav-menu link="{{ trace.isolate.relativeLink('stacktrace') }}" anchor="stack trace" last="{{ true }}"></nav-menu>
       <nav-refresh callback="{{ refresh }}"></nav-refresh>
+      <nav-control></nav-control>
     </nav-bar>
     <template if="{{ trace['members'].isEmpty }}">
       <div class="content">
@@ -14150,6 +15070,7 @@
     <nav-bar>
       <top-nav-menu last="{{ true }}"></top-nav-menu>
       <nav-refresh callback="{{ refresh }}"></nav-refresh>
+      <nav-control></nav-control>
     </nav-bar>
 
     <div class="content">
@@ -14174,7 +15095,7 @@
         <br>
         <div class="memberItem">
           <div class="memberValue">
-            See <a href="#/flags">flags</a>
+            See <a on-click="{{ goto }}" href="{{ gotoLink('/flags') }}">flags</a>
           </div>
         </div>
       </div>
@@ -14199,16 +15120,9 @@
        an observable property on the old element to an invalid type. -->
   
 </polymer-element>
-<polymer-element name="response-viewer" extends="observatory-element">
-  <template>
-    <service-view object="{{ app.response }}"></service-view>
-  </template>
+<polymer-element name="observatory-application" extends="observatory-element">
+  <!-- This element explicitly manages its child elements -->
   
-</polymer-element><polymer-element name="observatory-application" extends="observatory-element">
-  <template>
-    <response-viewer app="{{ this.app }}"></response-viewer>
-  </template>
-  
 </polymer-element>
 
   
@@ -14453,6 +15367,7 @@
 </style>
     <nav-bar>
       <top-nav-menu last="{{ true }}"></top-nav-menu>
+      <nav-control></nav-control>
     </nav-bar>
     <div class="content-centered">
       <h1>{{ exception.kind }}</h1>
@@ -14708,6 +15623,7 @@
 </style>
     <nav-bar>
       <top-nav-menu last="{{ true }}"></top-nav-menu>
+      <nav-control></nav-control>
     </nav-bar>
     <div class="content-centered">
       <h1>{{ error.kind }}</h1>
@@ -14956,7 +15872,7 @@
   word-wrap: break-word;
 }
 </style>
-  <a href="{{ url }}">{{ ref.name }}</a>
+  <a on-click="{{ goto }}" href="{{ url }}">{{ ref.name }}</a>
 </template>
 
 </polymer-element>