Add breakpoints and single-stepping to Observatory.

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

 <link rel="import" href="../../../../packages/polymer/polymer.html">
 <link rel="import" href="action_link.html">
 <link rel="import" href="function_ref.html">
 <link rel="import" href="isolate_ref.html">
 <link rel="import" href="observatory_element.html">
 <link rel="import" href="script_inset.html">
 <link rel="import" href="script_ref.html">
 <polymer-element name="isolate-summary" extends="observatory-element">
   <template>
     <link rel="stylesheet" href="css/shared.css">
     <div class="flex-row">
       <div class="flex-item-10-percent">
         <img src="img/isolate_icon.png">
       </div>
       <div class="flex-item-10-percent">
         <isolate-ref ref="{{ isolate }}"></isolate-ref>
       </div>
-      <div class="flex-item-20-percent">
+      <div class="flex-item-30-percent">
         <isolate-run-state isolate="{{ isolate }}"></isolate-run-state>
       </div>
-      <div class="flex-item-50-percent">
+      <div class="flex-item-40-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>
+
+      <action-link callback="{{ stepInto }}" label="step"></action-link>
+      <action-link callback="{{ stepOver }}" label="step&nbsp;over"></action-link>
+      <action-link callback="{{ stepOut }}" label="step&nbsp;out"></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>
       <action-link callback="{{ pause }}" label="pause"></action-link>
     </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' }}">
+
+      <template if="{{ isolate.pauseEvent.eventType == 'IsolateInterrupted' ||
+                       isolate.pauseEvent.eventType == 'BreakpointReached' ||
+                       isolate.pauseEvent.eventType == 'ExceptionThrown' }}">
+        <template if="{{ isolate.pauseEvent.breakpoint != null }}">
+          by breakpoint
+        </template>
+        <template if="{{ isolate.pauseEvent.eventType == 'ExceptionThrown' }}">
+          by exception
+        </template>
         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 if="{{ isolate.pauseEvent.eventType == 'ExceptionThrown' }}">
-        at exception
-        <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>
 
@@ skipping 87 matching lines @@
   </template>
 </polymer-element>
 
 <polymer-element name="isolate-counter-chart" extends="observatory-element">
   <template>
     <div id="counterPieChart" style="height: 200px"></div>
   </template>
 </polymer-element>
 
 <script type="application/dart" src="isolate_summary.dart"></script>