Add Breakpoint class to 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 307 matching lines @@
     </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['breakpointNumber'] }}
+          at breakpoint {{ event.breakpoint.number }}
         </template>
         <template if="{{ event.eventType == 'ExceptionThrown' }}">
           at exception
         </template>
 
         <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>
 </polymer-element>
 
 
 <script type="application/dart" src="nav_bar.dart"></script>