Add breakpoints and single-stepping to Observatory.

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

 <link rel="import" href="../../../../packages/polymer/polymer.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;
         width: 100%;
@@ skipping 297 matching lines @@
         border-radius: 9px;
         color: white;
         font-size: 18px;
         cursor: pointer;
         text-align: center;
       }
       a.boxclose:hover {
         background: rgba(255,255,255,0.5);
       }
     </style>
-    <template if="{{ event.eventType == 'IsolateInterrupted' }}">
+    <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>
+        <a class="link" on-click="{{ goto }}"
+           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 if="{{ event.eventType == 'BreakpointReached' }}">
-      <div class="item">
-        Isolate
-        <a class="link" on-click="{{ goto }}" href="{{ event.isolate.link }}">{{ event.isolate.name }}</a>
-        is paused at breakpoint {{ event.breakpoint['id'] }}
-        <a class="boxclose" on-click="{{ closeItem }}">&times;</a>
-      </div>
-    </template>
-    <template if="{{ event.eventType == 'ExceptionThrown' }}">
-      <div class="item">
-        Isolate
-        <a class="link" on-click="{{ goto }}" href="{{ event.isolate.link }}">{{ event.isolate.name }}</a>
-        is paused at exception
-        <a class="boxclose" on-click="{{ closeItem }}">&times;</a>
-      </div>
-    </template>
   </template>
 </polymer-element>
 
 
 <script type="application/dart" src="nav_bar.dart"></script>