Rework error handling in the service protocol and in Observatory.

runtime/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 15 matching lines @@
       nav ul:after {
         content: ""; clear: both; display: block;
       }
       .vertical-spacer {
         height: 40px;
         background-color: #0489c3;
       }
     </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>
     <div class="vertical-spacer">
     </div>
     <template if="{{ pad }}">
       <br>
     </template>
   </template>
 </polymer-element>
@@ skipping 115 matching lines @@
       <template if="{{ !active }}">
         <button class="idle" on-click="{{ buttonClick }}">{{ label }}</button>
       </template>
     </li>
   </template>
 </polymer-element>
 
 <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>
 </polymer-element>
 
 <polymer-element name="vm-nav-menu">
   <template>
     <nav-menu link="/vm" anchor="{{ vm.target.name }}" last="{{ last }}">
       <template repeat="{{ isolate in vm.isolates }}">
         <nav-menu-item link="{{ makeLink('/inspect', isolate) }}"
@@ skipping 54 matching lines @@
         width: auto;
         z-index: 1000;
         font: 400 12px 'Montserrat', sans-serif;
         color: white;
         background: none;
       }
     </style>
 
     <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 {
         position: relative;
         padding: 16px;
         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;
         box-shadow: 0 0 5px black;
         border-radius: 5px;
         animation: fadein 1s;
       }
 
       @keyframes fadein {
         from { opacity: 0; }
@@ skipping 19 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' ||
-                     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>
-    </template>
-    <template if="{{ event.eventType == 'VMDisconnected' }}">
-      <div class="item">
-        Disconnected from VM
-        <br><br>
-        <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>
+          <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>
 </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">
+        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>
+    </template>
+    <template if="{{ isNetworkError }}">
+      <div class="item">
+        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>
+    </template>
+  </template>
+</polymer-element>
 
 
 <script type="application/dart" src="nav_bar.dart"></script>