Line numbers in reports (#1449)

* feat(report): Add line-numbers in front of each line * Fix line wrapping
xd009642 · Jan 7, 2024 · 094d231 · 094d231
1 parent 81f4461
commit 094d231
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/report/report_viewer.css b/src/report/report_viewer.css
@@ -88,12 +88,20 @@ html, body {
   margin: 10px 0 0;
   border: 1px solid #999;
   padding: 10px;
+  counter-reset: line;
+  display: flex;
+  flex-direction: column;
 }
 
+.code-line::before {
+    content: counter(line);
+    margin-right: 10px;
+}
 .code-line {
   margin: 0;
   padding: 0.3em;
   height: 1em;
+  counter-increment: line;
 }
 .code-line_covered {
   background: #cfc;

diff --git a/src/report/report_viewer.js b/src/report/report_viewer.js
@@ -218,12 +218,12 @@ function FileHeader({file, onBack}) {
 }
 
 function FileContent({file}) {
-  return e('div', {className: 'file-content'},
+  return e('pre', {className: 'file-content'},
     file.content.split(/\r?\n/).map((line, index) => {
       const trace = file.traces.find(trace => trace.line === index + 1);
       const covered = trace && trace.stats.Line;
       const uncovered = trace && !trace.stats.Line;
-      return e('pre', {
+      return e('code', {
           className: 'code-line'
             + (covered ? ' code-line_covered' : '')
             + (uncovered ? ' code-line_uncovered' : ''),