Provide a logical view of VM-internal maps in Observatory.

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

 <link rel="import" href="../../../../packages/polymer/polymer.html">
 <link rel="import" href="curly_block.html">
 <link rel="import" href="observatory_element.html">
 <link rel="import" href="service_ref.html">
 
 <polymer-element name="instance-ref" extends="service-ref">
   <template>
     <link rel="stylesheet" href="css/shared.css">
     <style>
       .errorBox {
@@ skipping 24 matching lines @@
       <template if="{{ ref.isAbstractType }}">
         <a on-click="{{ goto }}" _href="{{ url }}">{{ ref.name }}</a>
       </template>
 
       <template if="{{ ref.isClosure }}">
         <a on-click="{{ goto }}" _href="{{ url }}">
           {{ ref.function.qualifiedName }}
         </a>
       </template>
 
-      <!-- TODO(rmacnak): Specialized view for maps. -->
-      <template if="{{ ref.isPlainInstance || ref.isMap }}">
+      <template if="{{ ref.isPlainInstance }}">
         <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.clazz.name }}</em></a>
         <curly-block callback="{{ expander() }}">
           <div class="memberList">
             <template repeat="{{ field in ref.fields }}">
               <div class="memberItem">
                 <div class="memberName">
                   {{ field['decl'].name }}
                 </div>
                 <div class="memberValue">
                   <any-service-ref ref="{{ field['value'] }}"></any-service-ref>
@@ skipping 13 matching lines @@
                 <div class="memberName">[{{ element['index']}}]</div>
                 <div class="memberValue">
                   <any-service-ref ref="{{ element['value'] }}"></any-service-ref>
                 </div>
               </div>
             </template>
           </div>
         </curly-block>
       </template>
 
+      <template if="{{ ref.isMap }}">
+        <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.clazz.name }}</em> ({{ ref.length }})</a>
+        <curly-block callback="{{ expander() }}">
+          <div class="memberList">
+            <template repeat="{{ association in ref.associations }}">
+              <div class="memberItem">
+                <div class="memberName">
+                  [<any-service-ref ref="{{ association['key'] }}"></any-service-ref>]
+                </div>
+                <div class="memberValue">
+                  <any-service-ref ref="{{ association['value'] }}"></any-service-ref>
+                </div>
+              </div>
+            </template>
+          </div>
+        </curly-block>
+      </template>
+
       <template if="{{ ref.isMirrorReference }}">
         <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.clazz.name }}</em></a>
         <curly-block callback="{{ expander() }}">
           <div class="memberList">
             <div class="memberItem">
               <div class="memberName">referent</div>
               <div class="memberValue">
                 <any-service-ref ref="{{ ref.referent }}"></any-service-ref>
               </div>
             </div>
@@ skipping 18 matching lines @@
               </div>
             </div>
           </div>
         </curly-block>
       </template>
     </span>
   </template>
 </polymer-element>
 
 <script type="application/dart" src="instance_ref.dart"></script>