Introduce elipses when there are long stretches of blank lines in observatory.

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

Index: runtime/observatory/lib/src/elements/script_inset.html
diff --git a/runtime/observatory/lib/src/elements/script_inset.html b/runtime/observatory/lib/src/elements/script_inset.html
index 52b72e572e1ef913729fd36813b491e3bd77996a..fb8c2dc1892d0a580d98545afa36e4c25fcbb453 100644
--- a/runtime/observatory/lib/src/elements/script_inset.html
+++ b/runtime/observatory/lib/src/elements/script_inset.html
@@ -29,8 +29,12 @@
         background-color: #6cf;
       }
       .hitsNone, .hitsNotExecuted, .hitsExecuted {
+        display: table-cell;
+        vertical-align: top;
+        font: 400 14px consolas, courier, monospace;
         min-width: 32px;
         text-align: right;
+        color: #a8a8a8;
       }
       .hitsNotExecuted {
         background-color: #e66;
@@ -45,31 +49,42 @@
         <div class="sourceTable">
           <template if="{{ linesReady }}">
             <template repeat="{{ line in lines }}">
-              <div class="sourceRow" id="{{ makeLineId(line.line) }}">
-                <breakpoint-toggle line="{{ line }}"></breakpoint-toggle>
+              <template if="{{ line != null }}">
+                <div class="sourceRow" id="{{ makeLineId(line.line) }}">
+                  <breakpoint-toggle line="{{ line }}"></breakpoint-toggle>
 
-                <div class="sourceItem">&nbsp;</div>
+                  <div class="sourceItem">&nbsp;</div>
 
-                <template if="{{ line.hits == null ||
-                              line.hits < 0 }}">
-                  <div class="hitsNone">{{ line.line }}</div>
-                </template>
-                <template if="{{ line.hits == 0 }}">
-                  <div class="hitsNotExecuted">{{ line.line }}</div>
-                </template>
-                <template if="{{ line.hits > 0 }}">
-                  <div class="hitsExecuted">{{ line.line }}</div>
-                </template>
+                  <template if="{{ line.hits == null ||
+                                line.hits < 0 }}">
+                    <div class="hitsNone">{{ line.line }}</div>
+                  </template>
+                  <template if="{{ line.hits == 0 }}">
+                    <div class="hitsNotExecuted">{{ line.line }}</div>
+                  </template>
+                  <template if="{{ line.hits > 0 }}">
+                    <div class="hitsExecuted">{{ line.line }}</div>
+                  </template>
 
-                <div class="sourceItem">&nbsp;</div>
+                  <div class="sourceItem">&nbsp;</div>
 
-                <template if="{{ line.line == currentLine }}">
-                  <div class="sourceItemCurrent">{{line.text}}</div>
-                </template>
-                <template if="{{ line.line != currentLine }}">
-                  <div class="sourceItem">{{line.text}}</div>
-                </template>
+                  <template if="{{ line.line == currentLine }}">
+                    <div class="sourceItemCurrent">{{line.text}}</div>
+                  </template>
+                  <template if="{{ line.line != currentLine }}">
+                    <div class="sourceItem">{{line.text}}</div>
+                  </template>
               </div>
+              </template>
+
+              <template if="{{ line == null }}">
+                <breakpoint-toggle line="{{ null }}"></breakpoint-toggle>
+                <div class="sourceItem">&nbsp;</div>
+                <div class="hitsNone">...</div>
+                <div class="sourceItem">&nbsp;</div>
+                <div class="sourceItem"></div>
+              </template>
+
             </template>
           </template>
 
@@ -117,31 +132,37 @@
       }
     </style>
 
-    <template if="{{ line.possibleBpt && busy}}">
-      <div class="busyBreakpoint">B</div>
-    </template>
-
-    <template if="{{ line.bpt == null && !line.possibleBpt }}">
+    <template if="{{ line == null }}">
       <div class="emptyBreakpoint">&nbsp;</div>
     </template>
 
-    <template if="{{ line.bpt == null && line.possibleBpt && !busy}}">
-      <div class="possibleBreakpoint">
-        <a on-click="{{ toggleBreakpoint }}">B</a>
-      </div>
-    </template>
+    <template if="{{ line != null }}">
+      <template if="{{ line.possibleBpt && busy}}">
+        <div class="busyBreakpoint">B</div>
+      </template>
 
-    <template if="{{ line.bpt != null && !line.bpt['resolved'] && !busy}}">
-      <div class="unresolvedBreakpoint">
-        <a on-click="{{ toggleBreakpoint }}">B</a>
-      </div>
-    </template>
+      <template if="{{ line.bpt == null && !line.possibleBpt }}">
+        <div class="emptyBreakpoint">&nbsp;</div>
+      </template>
 
-    <template if="{{ line.bpt != null && line.bpt['resolved'] && !busy}}">
-      <div class="resolvedBreakpoint">
-        <a on-click="{{ toggleBreakpoint }}">B</a>
-      </div>
-    </template>
+      <template if="{{ line.bpt == null && line.possibleBpt && !busy}}">
+        <div class="possibleBreakpoint">
+          <a on-click="{{ toggleBreakpoint }}">B</a>
+        </div>
+      </template>
+
+      <template if="{{ line.bpt != null && !line.bpt['resolved'] && !busy}}">
+        <div class="unresolvedBreakpoint">
+          <a on-click="{{ toggleBreakpoint }}">B</a>
+        </div>
+      </template>
+
+      <template if="{{ line.bpt != null && line.bpt['resolved'] && !busy}}">
+        <div class="resolvedBreakpoint">
+          <a on-click="{{ toggleBreakpoint }}">B</a>
+        </div>
+      </template>
+    </template> <!-- line != null -->
 
   </template>
 </polymer-element>