Allow users to see more elements of a list/map 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>
       .indented {
@@ skipping 70 matching lines @@
         <curly-block callback="{{ expander() }}"
                      expandKey="{{ expandKey }}">
           <div class="indented">
             <template repeat="{{ index in ref.elements.asMap().keys }}">
               [ {{ index }} ]&nbsp;&nbsp;
               <any-service-ref ref="{{ ref.elements[index] }}"
                                expandKey="{{ makeExpandKey(index.toString()) }}">
               </any-service-ref><br>
             </template>
             <template if="{{ ref.length != ref.elements.length }}">
-              <div><em>{{ ref.length - ref.elements.length }} omitted elements</em></div>
+              <div>
+                <action-link callback="{{ showMore }}"
+                             label="show next {{ref.elements.length}}">
+                </action-link>
+              </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() }}" expandKey="{{ expandKey }}">
           <div class="indented">
             <template repeat="{{ association in ref.associations }}">
               [ <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>
             <template if="{{ ref.length != ref.associations.length }}">
-              <div><em>{{ ref.length - ref.associations.length }} omitted associations</em></div>
+              <action-link callback="{{ showMore }}"
+                           label="show next {{ref.associations.length}}">
+              </action-link>
             </template>
           </div>
         </curly-block>
       </template>
 
       <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="indented">
             <template repeat="{{ index in ref.typedElements.asMap().keys }}">
               [ {{ index }} ]&nbsp;&nbsp;
               {{ ref.typedElements[index].toString() }}<br>
             </template>
             <template if="{{ ref.length != ref.typedElements.length }}">
-              <div><em>{{ ref.length - ref.typedElements.length }} omitted elements</em></div>
+              <action-link callback="{{ showMore }}"
+                           label="show next {{ref.typedElements.length}}">
+              </action-link>
             </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() }}" expandKey="{{ expandKey }}">
           <div class="indented">
             &lt;referent&gt;&nbsp;:&nbsp;
@@ skipping 17 matching lines @@
                              expandKey="{{ makeExpandKey('value') }}">
             </any-service-ref><br>
           </div>
         </curly-block>
       </template>
     </span>
   </template>
 </polymer-element>
 
 <script type="application/dart" src="instance_ref.dart"></script>