Display isolate message queue in Observatory debugger

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

 <link rel="import" href="../../../../packages/polymer/polymer.html">
 <link rel="import" href="function_ref.html">
 <link rel="import" href="nav_bar.html">
+<link rel="import" href="eval_link.html">
 <link rel="import" href="observatory_element.html">
 <link rel="import" href="script_inset.html">
 <link rel="import" href="script_ref.html">
 
 <!-- TODO(turnidge): Use core-icon once core_elements work properly in
      devtools -->
 <polymer-element name="icon-expand-less" noscript>
   <template>
     <svg width="24" height="24">
       <polygon points="12,8 6,14 7.4,15.4 12,10.8 16.6,15.4 18,14 "/>
@@ skipping 124 matching lines @@
         margin: 0px 20px 10px 20px;
         font: 400 14px 'Montserrat', sans-serif;
         line-height: 125%;
       }
       .splitter {
         height: 0px;
         margin: 0px;
         font-size: 1px;
         border-bottom: 1px dashed #888;
       }
-      .noStack {
+      .noMessages .noStack {
         margin: 0px 20px 10px 20px;
         font: normal 14px consolas, courier, monospace;
         line-height: 125%;
       }
     </style>
     <template if="{{ isSampled }}">
       <div class="sampledMessage">
         The program is not paused.  The stack trace below may be out of date.<br>
         <br>
         <action-link label="Pause Isolate" callback="{{ doPauseIsolate }}">
         </action-link>
         <action-link label="Refresh Stack" callback="{{ doRefreshStack }}">
         </action-link>
         <br>
         <br>
         <hr class="splitter">
       </div>
     </template>
     <template if="{{ !hasStack }}">
       <div class="noStack">No stack</div>
     </template>
     <ul id="frameList" class="list-group">
       <!-- debugger-frame elements are added programmatically -->
     </ul>
+    <hr>
+    <template if="{{ !hasMessages }}">
+      <div class="noMessages">No messages</div>
+    </template>
+    <ul id="messageList" class="list-group">
+      <!-- debugger-message elements are added programmatically -->
+    </ul>
   </template>
 </polymer-element>
 
 
 <polymer-element name="debugger-frame" extends="observatory-element">
   <template>
     <link rel="stylesheet" href="css/shared.css">
     <style>
       .frameOuter {
         position: relative;
@@ skipping 87 matching lines @@
                 <icon-expand-less></icon-expand-less>
               </a>
             </template>
           </div>
         </div>
       </template>
     </div>
   </template>
 </polymer-element>
 
+<polymer-element name="debugger-message" extends="observatory-element">
+  <template>
+    <link rel="stylesheet" href="css/shared.css">
+    <style>
+      .messageOuter {
+        position: relative;
+        padding: 5px;
+        border: 1px solid white;
+      }
+      .messageOuter:hover {
+        border: 1px solid #e0e0e0;
+      }
+      .shadow {
+        box-shadow:  0 2px 10px 0 rgba(0, 0, 0, 0.16),
+        0 2px 5px 0 rgba(0, 0, 0, 0.26);
+      }
+      .current {
+        box-shadow:  0 2px 10px 0 rgba(0, 0, 0, 0.26),
+        0 2px 5px 0 rgba(0, 0, 0, 0.46);
+        border: 1px solid #444;
+      }
+      .messageSummaryText {
+        display: inline-block;
+        padding: 5px;
+      }
+      .messageId {
+        display: inline-block;
+        width: 100px;
+      }
+      .messageOuter .messageExpander {
+        position: absolute;
+        right: 5px;
+        top: 5px;
+        display: none;
+      }
+      .messageOuter:hover .messageExpander {
+        display: inline-block;
+      }
+      .messageContractor {
+        position: absolute;
+        right: 5px;
+        bottom: 5px;
+        display: inline-block;
+      }
+    </style>
+    <div id="messageOuter" class="messageOuter">
+      <a on-click="{{ toggleExpand }}">
+        <div class="messageSummary">
+          <div class="messageSummaryText">
+            <div class="messageId"><b>message {{ message['depth'] }}</b></div>
+            <function-ref ref="{{ message['handlerFunction'] }}"></function-ref>
+            ( <script-ref ref="{{ message['handlerScript'] }}"
+                          pos="{{ message['handlerTokenPos'] }}">
+            </script-ref> )
+          </div>
+          <template if="{{ !expanded }}">
+            <div class="messageExpander">
+              <icon-expand-more></icon-expand-more>
+            </div>
+          </template>
+        </div>
+      </a>
+
+      <template if="{{expanded}}">
+        <div class="messageDetails">
+          <div class="flex-row">
+            <div class="flex-item-60-percent">
+              <template if="{{ message['handlerFunction'] != null }}">
+              <script-inset height="{{ scriptHeight }}"
+                            script="{{ message['handlerFunction'].script }}"
+                            startPos="{{ message['handlerFunction'].tokenPos }}"
+                            endPos="{{ message['handlerFunction'].endTokenPos }}"
+                            inDebuggerContext="{{ true }}">
+              </script-inset>
+              </template>
+            </div>
+            <div class="flex-item-40-percent">
+              <div class="memberItem">
+                <div class="memberName"></div>
+                <div class="memberValue">
+                  <eval-link callback="{{ previewMessage }}" label="[preview]" result="{{ preview }}"></eval-link>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="messageContractor">
+            <template if="{{expanded}}">
+              <a on-click="{{ toggleExpand }}">
+                <icon-expand-less></icon-expand-less>
+              </a>
+            </template>
+          </div>
+        </div>
+      </template>
+    </div>
+  </template>
+</polymer-element>
+
 <polymer-element name="debugger-console" extends="observatory-element">
   <template>
     <link rel="stylesheet" href="css/shared.css">
     <style>
       .console {
         margin: 0px 20px 10px 20px;
       }
       .normal {
         font: normal 14px consolas, courier, monospace;
         white-space: pre;
@@ skipping 23 matching lines @@
         margin: 20px;
         font: 400 16px consolas, courier, monospace;
         width: 95%;
       }
     </style>
     <input id="textBox" class="textBox" type="text" value="{{ text }}" autofocus>
   </template>
 </polymer-element>
 
 <script type="application/dart" src="debugger.dart"></script>