Switch to using SourceLocation universally in service protocol.

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 223 matching lines @@
       .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['index'] }}</b></div>
-            <function-ref ref="{{ frame['function'] }}"></function-ref>
-            ( <script-ref ref="{{ frame['script'] }}"
-                          pos="{{ frame['tokenPos'] }}">
-            </script-ref> )
+            <div class="frameId"><b>frame {{ frame.index }}</b></div>
+            <function-ref ref="{{ frame.function }}"></function-ref>
+            ( <source-link location="{{ frame.location }}"></source-link> )
           </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-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'] }}"
+              <source-inset height="{{ scriptHeight }}"
+                            location="{{ frame.function.location }}"
+                            currentPos="{{ frame.location.tokenPos }}"
                             inDebuggerContext="{{ true }}"
-                            variables="{{ frame['vars'] }}">
-              </script-inset>
+                            variables="{{ frame.variables }}">
+              </source-inset>
             </div>
             <div class="flex-item-vars">
               <div style="padding:10px;" class="memberList">
-                <template repeat="{{ v in frame['vars'] }}">
+                <template repeat="{{ v in frame.variables }}">
                   <div class="memberItem">
                     <div class="memberName">{{ v['name']}}</div>
                     <div class="memberValue">
                       <any-service-ref ref="{{ v['value'] }}">
                       </any-service-ref>
                     </div>
                   </div>
                 </template>
               </div>
             </div>
@@ skipping 64 matching lines @@
       .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['index'] }}</b></div>
-            <function-ref ref="{{ message['handlerFunction'] }}"></function-ref>
-            ( <script-ref ref="{{ message['handlerScript'] }}"
-                          pos="{{ message['handlerTokenPos'] }}">
-            </script-ref> )
+            <div class="messageId"><b>message {{ message.index }}</b></div>
+            <function-ref ref="{{ message.handler }}"></function-ref>
+            ( <source-link location="{{ message.location }}">
+            </source-link> )
           </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-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 if="{{ message.handler != null }}">
+              <source-inset height="{{ scriptHeight }}"
+                              location="{{ message.handler.location }}"
+                              inDebuggerContext="{{ true }}">
+              </source-inset>
               </template>
             </div>
             <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>
@@ skipping 53 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>