Initial UI for Metrics in Observatory

runtime/bin/vmservice/observatory/lib/src/elements/io_view.html

 <link rel="import" href="../../../../packages/polymer/polymer.html">
 <link rel="import" href="nav_bar.html">
 <link rel="import" href="observatory_element.html">
 <link rel="import" href="service_ref.html">
 
 <polymer-element name="io-view" extends="observatory-element">
   <template>
     <link rel="stylesheet" href="css/shared.css">
 
     <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">
       <h1>dart:io</h1>
 
       <br>
 
       <ul class="list-group">
         <li class="list-group-item">
-          <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('io/http/servers'))}}">HTTP Servers</a>
+          <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io/http/servers'))}}">HTTP Servers</a>
         </li>
       </ul>
 
       <br>
 
       <ul class="list-group">
         <li class="list-group-item">
-          <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('io/sockets'))}}">Sockets</a>
+          <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io/sockets'))}}">Sockets</a>
         </li>
       </ul>
 
       <br>
 
       <ul class="list-group">
         <li class="list-group-item">
-          <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('io/websockets'))}}">WebSockets</a>
+          <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io/websockets'))}}">WebSockets</a>
         </li>
       </ul>
 
       <br>
 
       <ul class="list-group">
         <li class="list-group-item">
-          <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('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>
 
       <br>
 
       <ul class="list-group">
         <li class="list-group-item">
-          <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('io/processes'))}}">Processess</a>
+          <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io/processes'))}}">Processess</a>
         </li>
       </ul>
 
     </div>
     <br>
     <hr>
   </template>
 </polymer-element>
 
 <polymer-element name="io-ref" extends="service-ref">
@@ skipping 40 matching lines @@
       </ul>
     </div>
     <br>
     <hr>
   </template>
 </polymer-element>
 
 <polymer-element name="io-http-server-ref" extends="service-ref">
   <template>
     <link rel="stylesheet" href="css/shared.css">
-    <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a>
+    <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
   </template>
 </polymer-element>
 
 <polymer-element name="io-http-server-view" extends="observatory-element">
   <template>
     <link rel="stylesheet" href="css/shared.css">
 
     <nav-bar>
       <top-nav-menu last="{{ true }}"></top-nav-menu>
       <nav-refresh callback="{{ refresh }}"></nav-refresh>
@@ skipping 40 matching lines @@
       </div>
     </div>
     <br>
     <hr>
   </template>
 </polymer-element>
 
 <polymer-element name="io-http-server-connection-ref" extends="service-ref">
   <template>
     <link rel="stylesheet" href="css/shared.css">
-    <a href="{{ url }}">{{ name }}</a>
+    <a _href="{{ url }}">{{ name }}</a>
   </template>
 </polymer-element>
 
 <polymer-element name="io-http-server-connection-view" extends="observatory-element">
   <template>
     <link rel="stylesheet" href="css/shared.css">
 
     <nav-bar>
       <top-nav-menu last="{{ true }}"></top-nav-menu>
       <nav-refresh callback="{{ refresh }}"></nav-refresh>
@@ skipping 20 matching lines @@
       </div>
     </div>
     <br>
     <hr>
   </template>
 </polymer-element>
 
 <polymer-element name="io-socket-ref" extends="service-ref">
   <template>
     <link rel="stylesheet" href="css/shared.css">
-    <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a>
+    <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
   </template>
 </polymer-element>
 
 <polymer-element name="io-socket-list-view" extends="observatory-element">
   <template>
     <link rel="stylesheet" href="css/shared.css">
 
     <nav-bar>
       <top-nav-menu last="{{ true }}"></top-nav-menu>
       <nav-refresh callback="{{ refresh }}"></nav-refresh>
@@ skipping 109 matching lines @@
       </template>
     </div>
     <br>
     <hr>
   </template>
 </polymer-element>
 
 <polymer-element name="io-web-socket-ref" extends="service-ref">
   <template>
     <link rel="stylesheet" href="css/shared.css">
-    <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a>
+    <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
   </template>
 </polymer-element>
 
 <polymer-element name="io-web-socket-list-view" extends="observatory-element">
   <template>
     <link rel="stylesheet" href="css/shared.css">
 
     <nav-bar>
       <top-nav-menu last="{{ true }}"></top-nav-menu>
       <nav-refresh callback="{{ refresh }}"></nav-refresh>
@@ skipping 39 matching lines @@
       </div>
     </div>
     <br>
     <hr>
   </template>
 </polymer-element>
 
 <polymer-element name="io-random-access-file-ref" extends="service-ref">
   <template>
     <link rel="stylesheet" href="css/shared.css">
-    <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a>
+    <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
   </template>
 </polymer-element>
 
 <polymer-element name="io-random-access-file-list-view" extends="observatory-element">
   <template>
     <link rel="stylesheet" href="css/shared.css">
 
     <nav-bar>
       <top-nav-menu last="{{ true }}"></top-nav-menu>
       <nav-refresh callback="{{ refresh }}"></nav-refresh>
@@ skipping 75 matching lines @@
     </div>
     <br>
     <hr>
   </template>
 </polymer-element>
 
 <polymer-element name="io-process-ref" extends="service-ref">
   <template>
     <link rel="stylesheet" href="css/shared.css">
     <template if="{{ small }}">
-      <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a>
+      <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
     </template>
     <template if="{{ !small }}">
-      <a on-click="{{ goto }}" href="{{ url }}">({{ ref['pid'] }}) {{ name }} {{ ref['arguments'] }}</a>
+      <a on-click="{{ goto }}" _href="{{ url }}">({{ ref['pid'] }}) {{ name }} {{ ref['arguments'] }}</a>
     </template>
   </template>
 </polymer-element>
 
 <polymer-element name="io-process-view" extends="observatory-element">
   <template>
     <link rel="stylesheet" href="css/shared.css">
 
     <nav-bar>
       <top-nav-menu last="{{ true }}"></top-nav-menu>
@@ skipping 63 matching lines @@
           </template>
         </div>
       </div>
     </div>
     <br>
     <hr>
   </template>
 </polymer-element>
 
 <script type="application/dart" src="io_view.dart"></script>