Add support for asynchronous event notification to the observatory.

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

Index: runtime/bin/vmservice/client/lib/src/elements/nav_bar.html
diff --git a/runtime/bin/vmservice/client/lib/src/elements/nav_bar.html b/runtime/bin/vmservice/client/lib/src/elements/nav_bar.html
index 213f3238248ee1fbe670c98c0fbca9cd02711363..2e574fa4ce3276788f8ec3a7d8ec2fa89937537b 100644
--- a/runtime/bin/vmservice/client/lib/src/elements/nav_bar.html
+++ b/runtime/bin/vmservice/client/lib/src/elements/nav_bar.html
@@ -32,6 +32,7 @@
     </style>
     <nav>
       <ul>
+        <nav-notify events="{{ app.notifications }}"></nav-notify>
         <content></content>
       </ul>
     </nav>
@@ -232,4 +233,113 @@
   </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>