Initial UI for Metrics in Observatory

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

 <link rel="import" href="../../../../packages/polymer/polymer.html">
 <link rel="import" href="action_link.html">
 <link rel="import" href="observatory_element.html">
 
 <polymer-element name="nav-bar" extends="observatory-element">
   <template>
     <link rel="stylesheet" href="css/shared.css">
     <style>
       nav {
         position: fixed;
@@ skipping 64 matching lines @@
       }
       .menu ul:after {
         content: ""; clear: both; display: block;
       }
       .menu:hover > ul {
         display: block;
       }
     </style>
 
     <li class="menu">
-      <a on-click="{{ goto }}" href="{{ gotoLink(link) }}">{{ anchor }}</a>
+      <a on-click="{{ goto }}" _href="{{ gotoLink(link) }}">{{ anchor }}</a>
       <ul><content></content></ul>
     </li>
     <template if="{{ !last }}">
       <li class="spacer">&gt;</li>
     </template>
 
   </template>
 </polymer-element>
 
 <polymer-element name="nav-menu-item" extends="observatory-element">
@@ skipping 27 matching lines @@
       li:hover > ul {
         display: block;
       }
       li a {
         display: block;
         padding: 12px 12px;
         color: white;
         text-decoration: none;
       }
     </style>
-    <li><a on-click="{{ goto }}" href="{{ gotoLink(link) }}">{{ anchor }}</a>
+    <li><a on-click="{{ goto }}" _href="{{ gotoLink(link) }}">{{ anchor }}</a>
       <ul><content></content></ul>
     </li>
   </template>
 </polymer-element>
 
 <polymer-element name="nav-refresh" extends="observatory-element">
   <template>
     <style>
       .active {
         color: #aaa;
@@ skipping 171 matching lines @@
       a.boxclose:hover {
         background: rgba(255,255,255,0.5);
       }
     </style>
     <template if="{{ event.eventType == 'IsolateInterrupted' ||
                      event.eventType == 'BreakpointReached' ||
                      event.eventType == 'ExceptionThrown' }}">
       <div class="item">
         Isolate
         <a class="link" on-click="{{ goto }}"
-           href="{{ event.isolate.link }}">{{ event.isolate.name }}</a>
+           _href="{{ event.isolate.link }}">{{ event.isolate.name }}</a>
         is paused
         <template if="{{ event.breakpoint != null }}">
           at breakpoint
         </template>
         <template if="{{ event.eventType == 'ExceptionThrown' }}">
           at exception
         </template>
 
         <br><br>
         <action-link callback="{{ resume }}" label="resume" color="white">
         </action-link>
         <action-link callback="{{ stepInto }}" label="step" color="white">
         </action-link>
         <action-link callback="{{ stepOver }}" label="step&nbsp;over"
                      color="white"></action-link>
         <action-link callback="{{ stepOut }}" label="step&nbsp;out"
                      color="white"></action-link>
         <a class="boxclose" on-click="{{ closeItem }}">&times;</a>
       </div>
     </template>
   </template>
 </polymer-element>
 
 
 <script type="application/dart" src="nav_bar.dart"></script>