Highlight the active line in the code editor

tests/browser/editor-font-size.test.js

@@ -222,3 +222,103 @@ test("a scroll before the repaint leaves the overlay on its rows", async (t) =>
     await page.close();
   }
 });
+
+test("the active line highlight tracks the caret and clears on blur or selection", async (t) => {
+  if (!browser) return t.skip("playwright chromium unavailable");
+  const page = await browser.newPage();
+  try {
+    await page.goto(`${base}/interview.html`, {
+      waitUntil: "domcontentloaded",
+    });
+    await openEditor(page);
+    await fillLongBuffer(page);
+
+    const activeLine = () =>
+      page.evaluate(() =>
+        document
+          .querySelector("#editor")
+          .parentElement.style.getPropertyValue("--active-line"),
+      );
+
+    const expectActiveLine = async (expected, message) => {
+      await page.waitForFunction(
+        (exp) =>
+          document
+            .querySelector("#editor")
+            .parentElement.style.getPropertyValue("--active-line") === exp,
+        expected,
+      );
+
+      assert.equal(await activeLine(), expected, message);
+    };
+
+    await page.focus("#editor");
+    await page.evaluate(() => {
+      const editor = document.querySelector("#editor");
+      editor.setSelectionRange(0, 0);
+      document.dispatchEvent(new Event("selectionchange"));
+    });
+    await expectActiveLine("0", "highlight initializes at line 0");
+
+    await page.keyboard.press("ArrowDown");
+    await page.keyboard.press("ArrowDown");
+    await expectActiveLine(
+      "2",
+      "highlight tracks a collapsed caret moved by the keyboard",
+    );
+
+    await page.evaluate(() => {
+      document.querySelector("#editor").scrollBy(0, 10);
+    });
+
+    const scrollStyles = await page.evaluate(() => {
+      const hlStyle = window.getComputedStyle(
+        document.querySelector("#editor-highlight"),
+      );
+      const gutterStyle = window.getComputedStyle(
+        document.querySelector("#editor-lines"),
+      );
+      return {
+        hlImage: hlStyle.backgroundImage,
+        hlAttachment: hlStyle.backgroundAttachment,
+        gutterImage: gutterStyle.backgroundImage,
+        gutterAttachment: gutterStyle.backgroundAttachment,
+      };
+    });
+
+    assert.ok(
+      scrollStyles.hlImage.includes("linear-gradient"),
+      "editor highlight has gradient",
+    );
+    assert.equal(
+      scrollStyles.hlAttachment,
+      "local",
+      "editor highlight scrolls locally",
+    );
+    assert.ok(
+      scrollStyles.gutterImage.includes("linear-gradient"),
+      "gutter highlight has gradient",
+    );
+    assert.equal(
+      scrollStyles.gutterAttachment,
+      "local",
+      "gutter highlight scrolls locally",
+    );
+
+    await page.keyboard.down("Shift");
+    await page.keyboard.press("ArrowRight");
+    await page.keyboard.up("Shift");
+    await expectActiveLine("", "highlight clears on a range selection");
+
+    await page.keyboard.press("ArrowRight");
+    await expectActiveLine("2", "highlight restores when selection collapses");
+
+    await page.evaluate(() => {
+      document.querySelector("#editor").blur();
+      document.dispatchEvent(new Event("selectionchange"));
+    });
+    await expectActiveLine("", "highlight clears when the editor loses focus");
+  } finally {
+    await page.close();
+  }
+});

web/interview.js

@@ -3438,6 +3438,20 @@ function paintEditor(showMatch = document.activeElement === nodes.editor) {
     editorPaintFrame = null;
   }
   const code = currentCode();
+
+  const currentActiveLine =
+    showMatch && nodes.editor.selectionStart === nodes.editor.selectionEnd
+      ? code.slice(0, nodes.editor.selectionStart).split("\n").length - 1
+      : -1;
+  if (currentActiveLine >= 0) {
+    nodes.editorStack?.style.setProperty(
+      "--active-line",
+      String(currentActiveLine),
+    );
+  } else {
+    nodes.editorStack?.style.removeProperty("--active-line");
+  }
+
   const brackets =
     editorOptions.highlight && showMatch
       ? matchingBrackets(

web/styles.css

@@ -23,6 +23,7 @@
   --code-gutter: #181816;
   --code-caret: #f4f4f0;
   --code-selection: #264f78;
+  --code-active-line: #ffffff0f;
   /* Selected text needs its own color: --ink is a light page color that would
      stay light on a light selection background in the light theme. */
   --code-selection-ink: var(--ink);
@@ -611,7 +612,6 @@ p {
   cursor: default;
 }
 
-
 .progress-chart-point-missing {
   fill: var(--page);
   stroke: var(--muted);
@@ -1239,7 +1239,8 @@ p {
      but never drops below 3.25rem, or a four-digit one is clipped at the
      smallest. */
   --editor-font-size: 0.875rem;
-  --editor-font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --editor-font-family:
+    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   --editor-gutter: max(3.25rem, calc(var(--editor-font-size) * 3.72));
   position: relative;
   flex: 1;
@@ -1265,6 +1266,7 @@ p {
   --code-gutter-ink: #595959;
   --code-gutter-border: #dddddd;
   --code-guide: #d3d3d3;
+  --code-active-line: #0000000d;
   --tok-keyword: #0000ff;
   --tok-string: #a31515;
   --tok-comment: #008000;
@@ -1290,6 +1292,7 @@ p {
     --code-gutter-ink: #595959;
     --code-gutter-border: #dddddd;
     --code-guide: #d3d3d3;
+    --code-active-line: #0000000d;
     --tok-keyword: #0000ff;
     --tok-string: #a31515;
     --tok-comment: #008000;
@@ -1333,6 +1336,20 @@ p {
   box-shadow: inset 1px 0 0 var(--code-guide);
 }
 
+#editor-lines,
+#editor-highlight,
+.plain-text #editor {
+  background-image: linear-gradient(
+    var(--code-active-line),
+    var(--code-active-line)
+  );
+  background-repeat: no-repeat;
+  background-size: 100% calc(var(--editor-font-size) * 1.5);
+  background-position: 0
+    calc(1rem + var(--active-line, -100) * var(--editor-font-size) * 1.5);
+  background-attachment: local;
+}
+
 /* The user-agent stylesheet gives <code> its own monospace family, which
    beats the inherited stack and paints the overlay in a different font from
    the textarea, so the text drifts from the caret line by line. */
@@ -1348,7 +1365,7 @@ p {
   padding: 1rem 0.5rem;
   overflow: hidden;
   color: var(--code-gutter-ink);
-  background: var(--code-gutter);
+  background-color: var(--code-gutter);
   border-right: 1px solid var(--code-gutter-border);
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: var(--editor-font-size);