Rework error handling in the service protocol and in Observatory.

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 -->
@@ skipping 90 matching lines @@
       .console {
         flex: 1 1 auto;
         overflow-y: auto;
       }
       .commandline {
         flex: 0 0 auto;
       }
     </style>
 
     <div class="container">
-      <nav-bar id="navbarDiv" showNotify="{{ false }}">
+      <nav-bar id="navbarDiv" notifyOnPause="{{ false }}">
         <top-nav-menu></top-nav-menu>
         <vm-nav-menu vm="{{ isolate.vm }}"></vm-nav-menu>
         <isolate-nav-menu isolate="{{ isolate }}"></isolate-nav-menu>
         <nav-menu link="{{ makeLink('/debugger', isolate) }}" anchor="debugger" last="{{ true }}"></nav-menu>
       </nav-bar>
       <div id="stackDiv" class="stack">
         <debugger-stack id="stackElement" isolate="{{ isolate }}"></debugger-stack>
       </div>
       <!--
       <core-splitter direction="up" allowOverflow=true></core-splitter>
@@ skipping 17 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;
       }
-      .noMessages .noStack {
-        margin: 0px 20px 10px 20px;
-        font: normal 14px consolas, courier, monospace;
+      .noMessages, .noStack {
+        margin: 10px 0px 10px 25px;
+        font: bold 14px 'Montserrat', sans-serif;
         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>
+      <div class="noMessages">No pending 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>
@@ skipping 32 matching lines @@
       }
       .frameOuter:hover .frameExpander{
         display: inline-block;
       }
       .frameContractor {
         position: absolute;
         right: 5px;
         bottom: 5px;
         display: inline-block;
       }
+      .flex-item-script {
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: 765px;
+      }
+      .flex-item-vars {
+        flex-grow: 5;
+        flex-shrink: 0;
+        flex-basis: 225px;
+      }
     </style>
     <div id="frameOuter" class="frameOuter">
       <a on-click="{{ toggleExpand }}">
         <div class="frameSummary">
           <div class="frameSummaryText">
             <div class="frameId"><b>frame {{ frame['depth'] }}</b></div>
             <function-ref ref="{{ frame['function'] }}"></function-ref>
             ( <script-ref ref="{{ frame['script'] }}"
                           pos="{{ frame['tokenPos'] }}">
             </script-ref> )
           </div>
           <template if="{{ !expanded }}">
             <div class="frameExpander">
               <icon-expand-more></icon-expand-more>
             </div>
           </template>
         </div>
       </a>
 
       <template if="{{expanded}}">
         <div class="frameDetails">
-          <div class="flex-row">
-            <div class="flex-item-60-percent">
+          <div class="flex-row-wrap">
+            <div class="flex-item-script">
               <script-inset height="{{ scriptHeight }}"
                             script="{{ frame['function'].script }}"
                             startPos="{{ frame['function'].tokenPos }}"
                             endPos="{{ frame['function'].endTokenPos }}"
                             currentPos="{{ frame['tokenPos'] }}"
                             inDebuggerContext="{{ true }}">
               </script-inset>
             </div>
-            <div class="flex-item-40-percent">
+            <div class="flex-item-vars">
               <div style="padding:10px;" class="memberList">
                 <template repeat="{{ v in frame['vars'] }}">
                   <div class="memberItem">
                     <div class="memberName">{{ v['name']}}</div>
                     <div class="memberValue">
                       <any-service-ref ref="{{ v['value'] }}">
                       </any-service-ref>
                     </div>
                   </div>
                 </template>
@@ skipping 51 matching lines @@
       }
       .messageOuter:hover .messageExpander {
         display: inline-block;
       }
       .messageContractor {
         position: absolute;
         right: 5px;
         bottom: 5px;
         display: inline-block;
       }
+      .flex-item-script {
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: 765px;
+      }
+      .flex-item-vars {
+        flex-grow: 5;
+        flex-shrink: 0;
+        flex-basis: 225px;
+      }
     </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">
+          <div class="flex-row-wrap">
+            <div class="flex-item-script">
               <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="flex-item-vars">
               <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}}">
@@ skipping 18 matching lines @@
       .normal {
         font: normal 14px consolas, courier, monospace;
         white-space: pre;
         line-height: 125%;
       }
       .bold {
         font: bold 14px consolas, courier, monospace;
         white-space: pre;
         line-height: 125%;
       }
+      .red {
+        font: normal 14px consolas, courier, monospace;
+        white-space: pre;
+        line-height: 125%;
+        color: red;
+      }
       .spacer {
         height: 20px;
       }
     </style>
     <div id="consoleText" class="console">
       <!-- Console output is added programmatically here using the 'normal'
            and 'bold' styles. -->
     </div>
   </template>
 </polymer-element>
 
 <polymer-element name="debugger-input" extends="observatory-element">
   <template>
     <link rel="stylesheet" href="css/shared.css">
     <style>
       .textBox {
         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>