Add breakpoints and single-stepping to Observatory.

runtime/bin/vmservice/client/deployed/web/packages/observatory/src/elements/isolate_summary.html

Index: runtime/bin/vmservice/client/deployed/web/packages/observatory/src/elements/isolate_summary.html
diff --git a/runtime/bin/vmservice/client/deployed/web/packages/observatory/src/elements/isolate_summary.html b/runtime/bin/vmservice/client/deployed/web/packages/observatory/src/elements/isolate_summary.html
index f7a7c9430685aebb669d995bf5d144532068325a..cd907e0f3c2874e8c2faf7209b772573bc16526e 100644
--- a/runtime/bin/vmservice/client/deployed/web/packages/observatory/src/elements/isolate_summary.html
+++ b/runtime/bin/vmservice/client/deployed/web/packages/observatory/src/elements/isolate_summary.html
@@ -15,10 +15,10 @@
       <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">
@@ -43,6 +43,10 @@
     <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 }}">
@@ -67,30 +71,26 @@
       <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 }}">