blased web

web/public/index.html

@@ -30,7 +30,6 @@
                     <pre id="code-coverage"></pre>
                     <div id="cover">Process is currently running</div>
                 </main>
-                <span id="covers-tooltip"></span>
             </div>
         </div>
     </body>

web/public/src/index.ts

@@ -7,13 +7,11 @@ type CodeCovEntry = {
 
 function loadCodeCoverage(
     text: string,
-    codeCoverageData: CodeCovEntry[],
-    codeCoverageDiv: HTMLPreElement,
+    data: CodeCovEntry[],
+    container: HTMLPreElement,
+    tooltip: HTMLElement,
 ) {
-    const tooltip = document.createElement("span");
-    tooltip.id = "covers-tooltip";
-    codeCoverageDiv.append(tooltip);
-    const entries = codeCoverageData.toSorted((
+    const entries = data.toSorted((
         a: CodeCovEntry,
         b: CodeCovEntry,
     ) => b.index - a.index);
@@ -61,11 +59,12 @@ function loadCodeCoverage(
             y >= boundingRect.bottom;
         return !outside;
     }
-    codeCoverageDiv.append(...elements);
+    container.append(...elements);
     document.addEventListener("mousemove", (event) => {
         const [x, y] = [event.clientX, event.clientY];
-        const outerBox = codeCoverageDiv.getBoundingClientRect();
+        const outerBox = container.getBoundingClientRect();
         if (!positionInBox([x, y], outerBox)) {
+            tooltip.hidden = true;
             return;
         }
         const element = elements.find((element) => {
@@ -82,7 +81,11 @@ function loadCodeCoverage(
             tooltip.hidden = true;
             return;
         }
-        const covers = parseInt(element.dataset.covers);
+        const maybeCovers = element.dataset.covers;
+        if (!maybeCovers) {
+            throw new Error("unreachable");
+        }
+        const covers = parseInt(maybeCovers);
         tooltip.hidden = false;
         tooltip.style.left = `${event.clientX + 20}px`;
         tooltip.style.top = `${event.clientY + 20}px`;
@@ -213,18 +216,51 @@ loop {
         "flame-graph": () => void;
     };
 
+    function countLines(code: string) {
+        let lines = 0;
+        for (const char of code) {
+            if (char === "\n") lines += 1;
+        }
+        return lines;
+    }
+
+    function createLineElement(code: string): HTMLPreElement {
+        const lines = countLines(code) + 1;
+        const maxLineWidth = lines.toString().length;
+        let text = "";
+        for (let i = 1; i < lines; ++i) {
+            const node = i.toString().padStart(maxLineWidth);
+            text += node;
+            text += "\n";
+        }
+        const lineElement = document.createElement("pre");
+        lineElement.classList.add("code-lines");
+        lineElement.innerText = text;
+        return lineElement;
+    }
+
     const view = document.querySelector("#view")!;
     const renderFunctions: RenderFns = {
         "source-code": () => {
+            const container = document.createElement("div");
+            container.classList.add("code-container");
+            const lines = createLineElement(codeData);
             const code = document.createElement("pre");
-            code.innerHTML = codeData;
-            view.replaceChildren(code);
+            code.innerText = codeData;
+            container.append(lines, code);
+            view.replaceChildren(container);
         },
         "code-coverage": () => {
-            const codeCoverageElement = document.createElement("pre");
-            loadCodeCoverage(codeData, codeCoverageData, codeCoverageElement);
+            const container = document.createElement("div");
+            container.classList.add("code-container");
+            const tooltip = document.createElement("div");
+            tooltip.id = "covers-tooltip";
+            const code = document.createElement("pre");
+            loadCodeCoverage(codeData, codeCoverageData, code, tooltip);
+            const lines = createLineElement(codeData);
+            container.append(lines, code);
             const view = document.querySelector("#view")!;
-            view.replaceChildren(codeCoverageElement);
+            view.replaceChildren(container, tooltip);
         },
         "flame-graph": () => {},
     };

web/public/style.css

@@ -88,10 +88,18 @@ main #cover {
     cursor: pointer;
 }
 
-#view pre {
+#view .code-container {
+    display: flex;
     font-size: 1rem;
+    gap: 1ch;
 }
 
+#view .code-lines {
+    border-right: 1px solid var(--white);
+    padding-right: 0.5ch;
+}
+
+
 #views-nav input:checked + label {
     background-color: var(--code-status);
     color: var(--black);
@@ -113,8 +121,9 @@ main #cover {
     left: 0;
     padding: 3px;
     border-radius: 3px;
-    background-color: var(--bg-2);
-    box-shadow: 2px 2px 2px black;
+    background-color: var(--black);
+    border: 2px solid var(--code-status);
+    border-radius: 0.25rem;
     color: #eee;
 }