frontend: Display number of hits on each line, fixes #188 (#193)

Author: La0

frontend/src/base.html

@@ -67,6 +67,11 @@ <h2>
         <td>
           <pre class="language-{{ language }}"><code>{{ line }}</code></pre>
         </td>
+        <td>
+          {{#hits}}
+          <span class="{{ hits.unit }}" title="That line is hit {{ coverage }} times.">{{ hits.nb }} {{ hits.unit }}</span>
+          {{/hits}}
+        </td>
       </tr>
       {{/lines}}
     </tbody>

frontend/src/index.js

@@ -153,11 +153,32 @@ async function showFile(file, revision) {
     lines: source.split("\n").map((line, nb) => {
       const coverage = file.coverage[nb];
       let cssClass = "";
-      if (coverage && coverage !== -1) {
+      let hits = null;
+      if (coverage !== undefined && coverage >= 0) {
         cssClass = coverage > 0 ? "covered" : "uncovered";
+
+        // Build a nicer coverage string for counts
+        if (coverage >= 1000000) {
+          hits = {
+            nb: parseInt(coverage / 1000000),
+            unit: "M"
+          };
+        } else if (coverage >= 1000) {
+          hits = {
+            nb: parseInt(coverage / 1000),
+            unit: "k"
+          };
+        } else if (coverage > 0) {
+          hits = {
+            nb: coverage,
+            unit: ""
+          };
+        }
       }
       return {
         nb,
+        hits,
+        coverage,
         line: line || " ",
         covered: cssClass
       };

frontend/src/style.scss

@@ -289,6 +289,7 @@ $samp_size: 20px;
 
       td {
         font-size: 0.9em;
+        background: $no_data_color;
       }
 
       pre {
@@ -299,6 +300,7 @@ $samp_size: 20px;
         background: $no_data_color;
       }
 
+      // Line number
       td:first-child {
         color: grey;
         font-size: 1em;
@@ -309,6 +311,28 @@ $samp_size: 20px;
         padding: 0 2px;
       }
 
+      // Line coverage stats
+      td:last-child {
+        padding-right: 3px;
+        text-align: right;
+
+        span {
+          padding: 2px;
+          color: white;
+          font-size: 0.9em;
+          font-weight: bold;
+          border-radius: 3px;
+          background: #363636;
+
+          &.k {
+            background: #209cee;
+          }
+          &.M {
+            background: #3273dc;
+          }
+        }
+      }
+
       &.covered {
         td {
           background: darken($covered_color, 10%);