Change how instance/list/map references are displayed when expanded.

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

Index: runtime/observatory/lib/src/elements/instance_ref.html
diff --git a/runtime/observatory/lib/src/elements/instance_ref.html b/runtime/observatory/lib/src/elements/instance_ref.html
index 47819725059febc5f14b19b581c1ab52ac066237..2db80e22ea42dc96a5a406a66d3c67c458633308 100644
--- a/runtime/observatory/lib/src/elements/instance_ref.html
+++ b/runtime/observatory/lib/src/elements/instance_ref.html
@@ -7,14 +7,10 @@
   <template>
     <link rel="stylesheet" href="css/shared.css">
     <style>
-      .errorBox {
-        background-color: #f5f5f5;
-        border: 1px solid #ccc;
-        padding: 10px;
-        font-family: consolas, courier, monospace;
-        font-size: 1em;
-        line-height: 1.2em;
-        white-space: pre;
+      .indented {
+        margin-left: 1.5em;
+        font: 400 14px 'Montserrat', sans-serif;
+        line-height: 150%;
       }
     </style>
     <span>
@@ -51,18 +47,12 @@
       <template if="{{ ref.isPlainInstance }}">
         <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.clazz.name }}</em></a>
         <curly-block callback="{{ expander() }}" expandKey="{{ expandKey }}">
-          <div class="memberList">
+          <div class="indented">
             <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'] }}"
-                                   expandKey="{{ makeExpandKey(field['decl'].name) }}">
-                  </any-service-ref>
-                </div>
-              </div>
+              {{ field['decl'].name }}&nbsp;:&nbsp;
+              <any-service-ref ref="{{ field['value'] }}"
+                               expandKey="{{ makeExpandKey(field['decl'].name) }}">
+              </any-service-ref><br>
             </template>
           </div>
         </curly-block>
@@ -70,17 +60,14 @@
 
       <template if="{{ ref.isList }}">
         <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.clazz.name }}</em> ({{ ref.length }})</a>
-        <curly-block callback="{{ expander() }}" expandKey="{{ expandKey }}">
-          <div class="memberList">
+        <curly-block callback="{{ expander() }}"
+                     expandKey="{{ expandKey }}">
+          <div class="indented">
             <template repeat="{{ index in ref.elements.asMap().keys }}">
-              <div class="memberItem">
-                <div class="memberName">[{{ index }}]</div>
-                <div class="memberValue">
-                  <any-service-ref ref="{{ ref.elements[index] }}"
-                                   expandKey="{{ makeExpandKey(index.toString()) }}">
-                  </any-service-ref>
-                </div>
-              </div>
+              [ {{ index }} ]&nbsp;&nbsp;
+              <any-service-ref ref="{{ ref.elements[index] }}"
+                               expandKey="{{ makeExpandKey(index.toString()) }}">
+              </any-service-ref><br>
             </template>
           </div>
         </curly-block>
@@ -89,20 +76,14 @@
       <template if="{{ ref.isMap }}">
         <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.clazz.name }}</em> ({{ ref.length }})</a>
         <curly-block callback="{{ expander() }}" expandKey="{{ expandKey }}">
-          <div class="memberList">
+          <div class="indented">
             <template repeat="{{ association in ref.associations }}">
-              <div class="memberItem">
-                <div class="memberName">
-                  [<any-service-ref ref="{{ association['key'] }}"
-                                    expandKey="{{ makeExpandKey('key') }}">
-                  </any-service-ref>]
-                </div>
-                <div class="memberValue">
-                  <any-service-ref ref="{{ association['value'] }}"
-                                   expandKey="{{ makeExpandKey('value') }}">
-                  </any-service-ref>
-                </div>
-              </div>
+              [ <any-service-ref ref="{{ association['key'] }}"
+                                expandKey="{{ makeExpandKey('key') }}">
+              </any-service-ref> ]&nbsp;&nbsp;
+              <any-service-ref ref="{{ association['value'] }}"
+                                 expandKey="{{ makeExpandKey('value') }}">
+              </any-service-ref><br>
             </template>
           </div>
         </curly-block>
@@ -111,12 +92,10 @@
       <template if="{{ ref.isTypedData }}">
         <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.clazz.name }}</em> ({{ ref.length }})</a>
         <curly-block callback="{{ expander() }}" expandKey="{{ expandKey }}">
-          <div class="memberList">
+          <div class="indented">
             <template repeat="{{ index in ref.typedElements.asMap().keys }}">
-              <div class="memberItem">
-                <div class="memberName">[{{ index }}]</div>
-                <div class="memberValue">{{ ref.typedElements[index].toString() }}</div>
-              </div>
+              [ {{ index }} ]&nbsp;&nbsp;
+              {{ ref.typedElements[index].toString() }}<br>
             </template>
           </div>
         </curly-block>
@@ -125,15 +104,11 @@
       <template if="{{ ref.isMirrorReference }}">
         <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.clazz.name }}</em></a>
         <curly-block callback="{{ expander() }}" expandKey="{{ expandKey }}">
-          <div class="memberList">
-            <div class="memberItem">
-              <div class="memberName">referent</div>
-              <div class="memberValue">
-                <any-service-ref ref="{{ ref.referent }}"
-                                 expandKey="{{ makeExpandKey('referent') }}">
-                </any-service-ref>
-              </div>
-            </div>
+          <div class="indented">
+            &lt;referent&gt;&nbsp;:&nbsp;
+            <any-service-ref ref="{{ ref.referent }}"
+                             expandKey="{{ makeExpandKey('referent') }}">
+            </any-service-ref>
           </div>
         </curly-block>
       </template>
@@ -141,23 +116,15 @@
       <template if="{{ ref.isWeakProperty }}">
         <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.clazz.name }}</em></a>
         <curly-block callback="{{ expander() }}" expandKey="{{ expandKey }}">
-          <div class="memberList">
-            <div class="memberItem">
-              <div class="memberName">key</div>
-              <div class="memberValue">
-                <any-service-ref ref="{{ ref.key }}"
-                                 expandKey="{{ makeExpandKey('key') }}">
-                </any-service-ref>
-              </div>
-            </div>
-            <div class="memberItem">
-              <div class="memberName">value</div>
-              <div class="memberValue">
-                <any-service-ref ref="{{ ref.value }}"
-                                 expandKey="{{ makeExpandKey('value') }}">
-                </any-service-ref>
-              </div>
-            </div>
+          <div class="indented">
+            &lt;key&gt;&nbsp;:&nbsp;
+            <any-service-ref ref="{{ ref.key }}"
+                             expandKey="{{ makeExpandKey('key') }}">
+            </any-service-ref><br>
+            &lt;value&gt;&nbsp;:&nbsp;
+            <any-service-ref ref="{{ ref.value }}"
+                             expandKey="{{ makeExpandKey('value') }}">
+            </any-service-ref><br>
           </div>
         </curly-block>
       </template>