Rework error handling in the service protocol and in Observatory.

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

Index: runtime/observatory/lib/src/elements/nav_bar.html
diff --git a/runtime/observatory/lib/src/elements/nav_bar.html b/runtime/observatory/lib/src/elements/nav_bar.html
index e9c782e29a15eacaf71caf836b83da66e484ccdb..5d1c904098c89a44807284c5b962bc80c93bc400 100644
--- a/runtime/observatory/lib/src/elements/nav_bar.html
+++ b/runtime/observatory/lib/src/elements/nav_bar.html
@@ -33,9 +33,8 @@
     </style>
     <nav>
       <ul>
-        <template if="{{ showNotify }}">
-          <nav-notify events="{{ app.notifications }}"></nav-notify>
-        </template>
+        <nav-notify notifications="{{ app.notifications }}"
+                    notifyOnPause="{{ notifyOnPause }}"></nav-notify>
         <content></content>
       </ul>
     </nav>
@@ -171,7 +170,7 @@
 <polymer-element name="top-nav-menu">
   <template>
     <nav-menu link="/vm" anchor="Observatory" last="{{ last }}">
-      <nav-menu-item link="/vm-connect" anchor="Connect to a different VM"></nav-menu-item>
+      <nav-menu-item link="/vm-connect" anchor="Connect to a VM"></nav-menu-item>
       <content></content>
     </nav-menu>
   </template>
@@ -246,16 +245,28 @@
 
     <div class="menu">
       <div class="list">
-        <template repeat="{{ event in events }}">
-          <nav-notify-item events="{{ events }}" event="{{ event }}">
-          </nav-notify-item>
+        <template repeat="{{ notification in notifications }}">
+          <template if="{{ notification.event != null }}">
+            <nav-notify-event notifications="{{ notifications }}"
+                              notification="{{ notification }}"
+                              event="{{ notification.event }}"
+                              notifyOnPause="{{ notifyOnPause }}">
+            </nav-notify-event>
+          </template>
+          <template if="{{ notification.exception != null }}">
+            <nav-notify-exception notifications="{{ notifications }}"
+                              notification="{{ notification }}"
+                              exception="{{ notification.exception }}"
+                              stacktrace="{{ notification.stacktrace }}">
+            </nav-notify-exception>
+          </template>
         </template>
       </div>
     </div>
   </template>
 </polymer-element>
 
-<polymer-element name="nav-notify-item" extends="observatory-element">
+<polymer-element name="nav-notify-event" extends="observatory-element">
   <template>
     <style>
       .item {
@@ -264,7 +275,7 @@
         margin-top: 10px;
         margin-right: 10px;
         padding-right: 25px;
-        width: 225px;
+        width: 250px;
         color: #ddd;
         background: rgba(0,0,0,.6);
         border: solid 2px white;
@@ -304,41 +315,130 @@
         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="{{ gotoLink('/inspect', event.isolate) }}">{{ event.isolate.name }}</a>
-        is paused
-        <template if="{{ event.breakpoint != null }}">
-          at breakpoint {{ event.breakpoint.number }}
-        </template>
-        <template if="{{ event.eventType == 'ExceptionThrown' }}">
-          at exception
-        </template>
+    <template if="{{ event != null }}">
+      <template if="{{ notifyOnPause && event.isPauseEvent }}">
+        <div class="item">
+          Isolate
+          <a class="link" on-click="{{ goto }}"
+             _href="{{ gotoLink('/inspect', event.isolate) }}">{{ event.isolate.name }}</a>
+          is paused
+          <template if="{{ event.eventType == 'PauseStart' }}">
+            at isolate start
+          </template>
+          <template if="{{ event.eventType == 'PauseExit' }}">
+            at isolate exit
+          </template>
+          <template if="{{ event.breakpoint != null }}">
+            at breakpoint {{ event.breakpoint.number }}
+          </template>
+          <template if="{{ event.eventType == 'PauseException' }}">
+            due to exception
+          </template>
 
-        <br><br>
-        [<a class="link" on-click="{{ goto }}"
-            _href="{{ gotoLink('/debugger', event.isolate) }}">debug</a>]
+          <br><br>
+          [<a class="link" on-click="{{ goto }}"
+              _href="{{ gotoLink('/debugger', event.isolate) }}">debug</a>]
 
-        <a class="boxclose" on-click="{{ closeItem }}">&times;</a>
-      </div>
+          <a class="boxclose" on-click="{{ closeItem }}">&times;</a>
+        </div>
+      </template>
+      <template if="{{ event.eventType == 'ConnectionClosed' }}">
+        <div class="item">
+          Disconnected from VM: {{ event.reason }}
+          <br><br>
+          [<a class="link" on-click="{{ goto }}"
+              _href="{{ gotoLink('/vm-connect') }}">Connect to a VM</a>]
+          <a class="boxclose" on-click="{{ closeItem }}">&times;</a>
+        </div>
+      </template>
+      <template if="{{ event.eventType == 'Inspect' }}">
+        <div class="item">
+          Inspect <any-service-ref ref="{{ event.inspectee }}"></any-service-ref>
+          <br><br>
+          <a class="boxclose" on-click="{{ closeItem }}">&times;</a>
+        </div>
+      </template>
     </template>
-    <template if="{{ event.eventType == 'VMDisconnected' }}">
+  </template>
+</polymer-element>
+
+
+<polymer-element name="nav-notify-exception" extends="observatory-element">
+  <template>
+    <style>
+      .item {
+        position: relative;
+        padding: 16px;
+        margin-top: 10px;
+        margin-right: 10px;
+        padding-right: 25px;
+        width: 250px;
+        color: #ddd;
+        background: rgba(0,0,0,.6);
+        border: solid 2px white;
+        box-shadow: 0 0 5px black;
+        border-radius: 5px;
+        animation: fadein 1s;
+      }
+
+      @keyframes fadein {
+        from { opacity: 0; }
+        to   { opacity: 1; }
+      }
+
+      a.link {
+        color: white;
+        text-decoration: none;
+      }
+      a.link:hover {
+        text-decoration: underline;
+      }
+      .indent {
+        margin-left:20px;
+      }
+
+      a.boxclose {
+        position: absolute;
+        display: block;
+        top: 4px;
+        right: 4px;
+        height: 18px;
+        width: 18px;
+        line-height: 16px;
+        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="{{ isUnexpectedError }}">
+      <!-- TODO(turnidge): Add a file-a-bug link to this notification -->
       <div class="item">
-        Disconnected from VM
-        <br><br>
+        Unexpected exception:<br><br>
+        <div class="indent">{{ exception.toString() }}</div><br>
+        <template if="{{ stacktrace != null }}">
+          Stacktrace:<br><br>
+          <div class="indent">{{ stacktrace.toString() }}</div>
+          <br>
+        </template>
+        [<a class="link" on-click="{{ goto }}"
+            _href="{{ gotoLink('vm-connect') }}">Connect to a different VM</a>]
         <a class="boxclose" on-click="{{ closeItem }}">&times;</a>
-      </div>
+    </div>
     </template>
-    <template if="{{ event.eventType == 'Inspect' }}">
+    <template if="{{ isNetworkError }}">
       <div class="item">
-        Inspect <any-service-ref ref="{{ event.inspectee }}"></any-service-ref>
+        The request cannot be completed because the VM is currently
+        disconnected.
         <br><br>
+        [<a class="link" on-click="{{ goto }}"
+            _href="{{ gotoLink('vm-connect') }}">Connect to a different VM</a>]
         <a class="boxclose" on-click="{{ closeItem }}">&times;</a>
-      </div>
+    </div>
     </template>
   </template>
 </polymer-element>