fix: place code annotation highlight bands from the line positions (#13429)

Selecting a code annotation drew a band that spilled out to the left of
the code block and sat off its lines (regression introduced in v1.8.15).
Both bands were placed from offsetTop, which is relative to the code
element, while each band is positioned against a different containing
block. They are now placed from the line client rects, converted to the
CSS pixels of their own container (Reveal.js scales slides) and corrected
for the container's scroll, and the band spans the code block.

Playwright tests measure the bands in html, dashboard and revealjs, with
and without line numbers, without code copy, and inside a scrolled
container.

Closes #13448

Author: mcanouil

news/changelog-1.11.md

@@ -71,6 +71,7 @@ All changes included in 1.11:
 - ([#12650](https://github.com/quarto-dev/quarto-cli/issues/12650)): Fix markdown formatting and HTML entities in a document title appearing literally in the appendix citation, the BibTeX citation, and the Google Scholar `citation_title`. (author: @jolars)
 - ([#13444](https://github.com/quarto-dev/quarto-cli/issues/13444)): Fix the code copy button covering the code annotation marker on the first line of an annotated code block, which stopped the annotation from showing on hover or click (regression introduced in v1.8.15).
 - ([#13446](https://github.com/quarto-dev/quarto-cli/issues/13446)): Fix the code copy button sitting above the code frame, and the extra space around the code, when a code block starts or ends a callout (regression introduced in v1.8.15).
+- ([#13448](https://github.com/quarto-dev/quarto-cli/issues/13448)): Fix the code annotation line highlight spilling out to the left of the code block, and sitting above the gutter highlight, in `html`, `dashboard` and `revealjs` output (regression introduced in v1.8.15). (author: @mcanouil)
 - ([#14684](https://github.com/quarto-dev/quarto-cli/issues/14684)): Add a "Skip to main content" link to Bootstrap-themed HTML output (documents, websites, books, dashboards) so keyboard users can bypass the navbar and sidebars.
 - ([#14973](https://github.com/quarto-dev/quarto-cli/issues/14973)): Fix Safari sometimes opening pages with a light and dark theme at the top instead of at the URL fragment target, and toggling the color scheme scrolling back to the top of the page.
 - ([#14976](https://github.com/quarto-dev/quarto-cli/pull/14976)): Fix KaTeX math not rendering on pages with Jupyter widgets when `html-math-method` is set with the object form (`method: katex` and `url`).

src/resources/formats/html/bootstrap/_bootstrap-rules.scss

@@ -2163,6 +2163,7 @@ pre.code-annotation-code {
   }
 }
 
+#code-annotation-line-highlight,
 #code-annotation-line-highlight-gutter {
   width: 100%;
   border-top: solid $code-annotation-higlight-color 1px;
@@ -2171,15 +2172,6 @@ pre.code-annotation-code {
   background-color: $code-annotation-higlight-bg;
 }
 
-#code-annotation-line-highlight {
-  margin-left: -4em;
-  width: calc(100% + 4em);
-  border-top: solid $code-annotation-higlight-color 1px;
-  border-bottom: solid $code-annotation-higlight-color 1px;
-  z-index: 2;
-  background-color: $code-annotation-higlight-bg;
-}
-
 code.sourceCode .code-annotation-anchor.code-annotation-active {
   background-color: var(--quarto-hl-normal-color, #aaaaaa);
   border: solid var(--quarto-hl-normal-color, #aaaaaa) 1px;

src/resources/formats/html/templates/quarto-html-after-body.ejs

@@ -572,48 +572,58 @@
             return targetCell + "-" + line;
           })
   
-          let top = null;
-          let height = null;
-          let parent = null;
+          // Each band is positioned against its own containing block, which is
+          // not the offsetParent of the lines, so place it from client rects.
+          const placeBand = (band, firstEl, lastEl, codeBlock) => {
+            const container = band.offsetParent;
+            if (container === null) {
+              return;
+            }
+            const containerRect = container.getBoundingClientRect();
+            // Reveal.js scales slides with a transform, so convert client
+            // pixels back to the CSS pixels of the container.
+            const scale = containerRect.height / container.offsetHeight || 1;
+            const firstRect = firstEl.getBoundingClientRect();
+            const lastRect = lastEl.getBoundingClientRect();
+            const top = (firstRect.top - containerRect.top) / scale - container.clientTop + container.scrollTop;
+            const height = (lastRect.bottom - firstRect.top) / scale;
+            band.style.top = top - 2 + "px";
+            band.style.height = height + 4 + "px";
+            if (codeBlock) {
+              // Without the copy button wrapper, the containing block is wider
+              // than the code block, so span the code block explicitly.
+              const blockRect = codeBlock.getBoundingClientRect();
+              band.style.left = (blockRect.left - containerRect.left) / scale - container.clientLeft + container.scrollLeft + "px";
+              band.style.width = blockRect.width / scale + "px";
+            }
+          };
+
           if (lineIds.length > 0) {
-              //compute the position of the single el (top and bottom and make a div)
-              const el = window.document.getElementById(lineIds[0]);
-              top = el.offsetTop;
-              height = el.offsetHeight;
-              parent = el.parentElement.parentElement;
-  
-            if (lineIds.length > 1) {
-              const lastEl = window.document.getElementById(lineIds[lineIds.length - 1]);
-              const bottom = lastEl.offsetTop + lastEl.offsetHeight;
-              height = bottom - top;
+            const el = window.document.getElementById(lineIds[0]);
+            const lastEl = window.document.getElementById(lineIds[lineIds.length - 1]);
+            const parent = el.parentElement.parentElement;
+
+            // cook up a div (if necessary) and position it
+            let div = window.document.getElementById("code-annotation-line-highlight");
+            if (div === null) {
+              div = window.document.createElement("div");
+              div.setAttribute("id", "code-annotation-line-highlight");
+              div.style.position = 'absolute';
+              parent.appendChild(div);
             }
-  
-            if (top !== null && height !== null && parent !== null) {
-              // cook up a div (if necessary) and position it 
-              let div = window.document.getElementById("code-annotation-line-highlight");
-              if (div === null) {
-                div = window.document.createElement("div");
-                div.setAttribute("id", "code-annotation-line-highlight");
-                div.style.position = 'absolute';
-                parent.appendChild(div);
-              }
-              div.style.top = top - 2 + "px";
-              div.style.height = height + 4 + "px";
-              div.style.left = 0;
-              
-              let gutterDiv = window.document.getElementById("code-annotation-line-highlight-gutter");
-              if (gutterDiv === null) {
-                gutterDiv = window.document.createElement("div");
-                gutterDiv.setAttribute("id", "code-annotation-line-highlight-gutter");
-                gutterDiv.style.position = 'absolute';
-                const codeCell = window.document.getElementById(targetCell);
-                const gutter = codeCell.querySelector('.code-annotation-gutter');
-                gutter.appendChild(gutterDiv);
-              }
-  
-              gutterDiv.style.top = top - 2 + "px";
-              gutterDiv.style.height = height + 4 + "px";
+            placeBand(div, el, lastEl, parent.closest("div.sourceCode") || parent);
+
+            let gutterDiv = window.document.getElementById("code-annotation-line-highlight-gutter");
+            if (gutterDiv === null) {
+              gutterDiv = window.document.createElement("div");
+              gutterDiv.setAttribute("id", "code-annotation-line-highlight-gutter");
+              gutterDiv.style.position = 'absolute';
+              const codeCell = window.document.getElementById(targetCell);
+              const gutter = codeCell.querySelector('.code-annotation-gutter');
+              gutter.appendChild(gutterDiv);
             }
+            placeBand(gutterDiv, el, lastEl);
+
             selectedAnnoteEl = annoteEl;
           }
         };

src/resources/formats/revealjs/quarto.scss

@@ -769,22 +769,15 @@ div.cell-output-display div.pagedtable-wrapper table.table {
   left: auto;
 }
 
+.reveal #code-annotation-line-highlight,
 .reveal #code-annotation-line-highlight-gutter {
+  box-sizing: border-box;
   width: 100%;
   border-top: solid var(--quarto-hl-co-color) 1px;
   border-bottom: solid var(--quarto-hl-co-color) 1px;
   z-index: 2;
 }
 
-.reveal #code-annotation-line-highlight {
-  margin-left: -8em;
-  width: calc(100% + 4em);
-  border-top: solid var(--quarto-hl-co-color) 1px;
-  border-bottom: solid var(--quarto-hl-co-color) 1px;
-  z-index: 2;
-  margin-bottom: -2px;
-}
-
 .reveal code.sourceCode .code-annotation-anchor.code-annotation-active {
   background-color: var(--quarto-hl-normal-color, #aaaaaa);
   border: solid var(--quarto-hl-normal-color, #aaaaaa) 1px;

tests/docs/playwright/dashboard/code-annotation-highlight.qmd

@@ -0,0 +1,29 @@
+---
+title: "Code annotation line highlight"
+format: dashboard
+code-annotations: below
+---
+
+## Row
+
+```{.python}
+# Some comment
+# to avoid overlapping copy button and annotation marker
+import polars as pl # <1>
+df = pl.DataFrame({"a": [1, 2]}) # <2>
+df.head() # <2>
+```
+
+1. Import the library.
+2. Build and show a data frame.
+
+```{.python code-line-numbers="true"}
+# Some comment
+# to avoid overlapping copy button and annotation marker
+import polars as pl # <1>
+df = pl.DataFrame({"a": [1, 2]}) # <2>
+df.head() # <2>
+```
+
+1. Import the library.
+2. Build and show a data frame.

tests/docs/playwright/html/code-annotation-highlight-contrast.qmd

@@ -0,0 +1,32 @@
+---
+title: "Code annotation line highlight contrast"
+format:
+  html:
+    theme:
+      light: cosmo
+      dark: darkly
+    respect-user-color-scheme: true
+code-annotations: below
+---
+
+```{.python}
+# Some comment
+# to avoid overlapping copy button and annotation marker
+import polars as pl # <1>
+df = pl.DataFrame({"a": [1, 2]}) # <2>
+df.head() # <2>
+```
+
+1. Import the library.
+2. Build and show a data frame.
+
+```{.python code-line-numbers="true"}
+# Some comment
+# to avoid overlapping copy button and annotation marker
+import polars as pl # <1>
+df = pl.DataFrame({"a": [1, 2]}) # <2>
+df.head() # <2>
+```
+
+1. Import the library.
+2. Build and show a data frame.

tests/docs/playwright/html/code-annotation-highlight-no-copy.qmd

@@ -0,0 +1,29 @@
+---
+title: "Code annotation line highlight no copy"
+format:
+  html:
+    code-copy: false
+code-annotations: below
+---
+
+```{.python}
+# Some comment
+# to avoid overlapping copy button and annotation marker
+import polars as pl # <1>
+df = pl.DataFrame({"a": [1, 2]}) # <2>
+df.head() # <2>
+```
+
+1. Import the library.
+2. Build and show a data frame.
+
+```{.python code-line-numbers="true"}
+# Some comment
+# to avoid overlapping copy button and annotation marker
+import polars as pl # <1>
+df = pl.DataFrame({"a": [1, 2]}) # <2>
+df.head() # <2>
+```
+
+1. Import the library.
+2. Build and show a data frame.

tests/docs/playwright/html/code-annotation-highlight-scrolled.qmd

@@ -0,0 +1,34 @@
+---
+title: "Code annotation line highlight in a scrolled container"
+format:
+  html:
+    code-copy: false
+code-annotations: below
+---
+
+::: {#scroll-box style="position: relative; height: 200px; overflow: auto;"}
+
+Filler paragraph so the code block starts below the visible area of the box.
+
+Filler paragraph so the code block starts below the visible area of the box.
+
+Filler paragraph so the code block starts below the visible area of the box.
+
+Filler paragraph so the code block starts below the visible area of the box.
+
+```{.python}
+# Some comment
+# to avoid overlapping copy button and annotation marker
+import polars as pl # <1>
+df = pl.DataFrame({"a": [1, 2]}) # <2>
+df.head() # <2>
+```
+
+1. Import the library.
+2. Build and show a data frame.
+
+Filler paragraph after the annotations.
+
+Filler paragraph after the annotations.
+
+:::

tests/docs/playwright/html/code-annotation-highlight.qmd

@@ -0,0 +1,27 @@
+---
+title: "Code annotation line highlight"
+format: html
+code-annotations: below
+---
+
+```{.python}
+# Some comment
+# to avoid overlapping copy button and annotation marker
+import polars as pl # <1>
+df = pl.DataFrame({"a": [1, 2]}) # <2>
+df.head() # <2>
+```
+
+1. Import the library.
+2. Build and show a data frame.
+
+```{.python code-line-numbers="true"}
+# Some comment
+# to avoid overlapping copy button and annotation marker
+import polars as pl # <1>
+df = pl.DataFrame({"a": [1, 2]}) # <2>
+df.head() # <2>
+```
+
+1. Import the library.
+2. Build and show a data frame.

tests/docs/playwright/revealjs/code-annotation-highlight.qmd

@@ -0,0 +1,32 @@
+---
+title: "Code annotation line highlight"
+format: revealjs
+code-annotations: below
+---
+
+## Without line numbers
+
+```{.python code-line-numbers="false"}
+# Some comment
+# to avoid overlapping copy button and annotation marker
+import polars as pl # <1>
+df = pl.DataFrame({"a": [1, 2]}) # <2>
+df.head() # <2>
+```
+
+1. Import the library.
+2. Build and show a data frame.
+
+
+## With line numbers
+
+```{.python code-line-numbers="true"}
+# Some comment
+# to avoid overlapping copy button and annotation marker
+import polars as pl # <1>
+df = pl.DataFrame({"a": [1, 2]}) # <2>
+df.head() # <2>
+```
+
+1. Import the library.
+2. Build and show a data frame.