Add support for asynchronous event notification to the 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 14 matching lines @@
       nav ul:after {
         content: ""; clear: both; display: block;
       }
       .vertical-spacer {
         height: 40px;
         background-color: #0489c3;
       }
     </style>
     <nav>
       <ul>
+        <nav-notify events="{{ app.notifications }}"></nav-notify>
         <content></content>
       </ul>
     </nav>
     <div class="vertical-spacer">
     </div>
     <template if="{{ pad }}">
       <br>
     </template>
   </template>
 </polymer-element>
@@ skipping 180 matching lines @@
 
 <polymer-element name="class-nav-menu" extends="observatory-element">
   <template>
     <nav-menu link="{{ cls.link }}"
               anchor="{{ cls.name }}" last="{{ last }}">
       <content></content>
     </nav-menu>
   </template>
 </polymer-element>
 
+<polymer-element name="nav-notify" extends="observatory-element">
+  <template>
+    <style>
+      .menu {
+        float: right;
+      }
+      .menu .list {
+        display: block;
+        position: absolute;
+        top: 98%;
+        right: 0;
+        margin: 0;
+        padding: 0;
+        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>
+      </div>
+    </div>
+  </template>
+</polymer-element>
+
+<polymer-element name="nav-notify-item" extends="observatory-element">
+  <template>
+    <style>
+      .item {
+        position: relative;
+        padding: 16px;
+        margin-top: 10px;
+        margin-right: 10px;
+        padding-right: 25px;
+        width: 200px;
+        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;
+      }
+
+      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="{{ event.eventType == 'IsolateInterrupted' }}">
+      <div class="item">
+        Isolate
+        <a class="link" on-click="{{ goto }}" href="{{ event.isolate.link }}">{{ event.isolate.name }}</a>
+        is paused
+        <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>