Improve script display in the observatory.

runtime/bin/vmservice/client/lib/src/elements/script_inset.html

Index: runtime/bin/vmservice/client/lib/src/elements/script_inset.html
diff --git a/runtime/bin/vmservice/client/lib/src/elements/script_inset.html b/runtime/bin/vmservice/client/lib/src/elements/script_inset.html
index cefb95c18e3f9ea8d8b1caead639b9468334e0f7..52460df5a2fc5706b5585c25f5d6be4bb9879c2f 100644
--- a/runtime/bin/vmservice/client/lib/src/elements/script_inset.html
+++ b/runtime/bin/vmservice/client/lib/src/elements/script_inset.html
@@ -8,26 +8,65 @@
         padding-left: 15%;
         padding-right: 15%;
       }
-      .grayBox {
+      .sourceBox {
         width: 100%;
         background-color: #f5f5f5;
         border: 1px solid #ccc;
         padding: 10px;
-     }
+        overflow-y: auto;
+      }
+      .sourceTable {
+        display: table;
+      }
+      .sourceRow {
+        display: table-row;
+      }
+      .sourceItem, .sourceItemCurrent {
+        display: table-cell;
+        vertical-align: top;
+        font: 400 14px consolas, courier, monospace;
+        line-height: 125%;
+        white-space: pre;
+      }
+      .sourceItemCurrent {
+        background-color: #6cf;
+      }
+      .hitsNone, .hitsNotExecuted, .hitsExecuted {
+        min-width: 32px;
+        text-align: right;
+      }
+      .hitsNotExecuted {
+        background-color: #e66;
+      }
+      .hitsExecuted {
+        background-color: #6d6;
+      }
     </style>
     <div class="sourceInset">
       <content></content>
-      <div class="grayBox">
-        <table>
-          <tbody>
-            <tr template repeat="{{ lineNumber in lineNumbers }}">
-              <td style="{{ styleForHits(script.lines[lineNumber].hits) }}"><span>  </span></td>
-              <td style="font-family: consolas, courier, monospace;font-size: 1em;line-height: 1.2em;white-space: nowrap;">{{script.lines[lineNumber].line}}</td>
-              <td>&nbsp;</td>
-              <td width="99%" style="font-family: consolas, courier, monospace;font-size: 1em;line-height: 1.2em;white-space: pre;">{{script.lines[lineNumber].text}}</td>
-            </tr>
-          </tbody>
-        </table>
+      <div class="sourceBox" style="height:{{height}}">
+        <div class="sourceTable">
+          <template repeat="{{ line in lines }}">
+            <div class="sourceRow" id="{{ makeLineId(line.line) }}">
+              <template if="{{ line.hits == null }}">
+                <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>
+              <template if="{{ line.line == currentLine }}">
+                <div id="currentLine" class="sourceItemCurrent">{{line.text}}</div>
+              </template>
+              <template if="{{ line.line != currentLine }}">
+                <div class="sourceItem">{{line.text}}</div>
+              </template>
+            </div>
+          </template>
+        </div>
       </div>
     </div>
   </template>