Keep the line highlight over the lines it names

The bar was measured from the table's border edge, a pixel above where
its offset counts from, and covered only the digits of each number. Its
width was the part of the table in view, so scrolling a long line
sideways left the highlight behind.

2 files changed, 15 insertions, 4 deletions

diff --git a/assets/cgit.css b/assets/cgit.cssindex 2f53559..0149519 100644--- a/assets/cgit.css+++ b/assets/cgit.css@@ -690,7 +690,6 @@ div#cgit table.blame { div#cgit div.line-hl {   position: absolute;   left: 0;-  right: 0;   background: var(--line-hl);   pointer-events: none; }
diff --git a/assets/cgit.css b/assets/cgit.css
index 2f53559..0149519 100644
--- a/assets/cgit.css
+++ b/assets/cgit.css
@@ -690,7 +690,6 @@ div#cgit table.blame {
 div#cgit div.line-hl {
   position: absolute;
   left: 0;
-  right: 0;
   background: var(--line-hl);
   pointer-events: none;
 }
diff --git a/assets/cgit.js b/assets/cgit.jsindex 2c0a828..807f15f 100644--- a/assets/cgit.js+++ b/assets/cgit.js@@ -112,7 +112,7 @@ var bar = null;  function place_bar() {   var match, first, last, table;-  var table_box, first_box, last_box, top, bottom;+  var table_box, first_box, last_box, leading, origin, top, bottom;    if (bar) {     bar.remove();@@ -131,12 +131,24 @@ function place_bar() {   table_box = table.getBoundingClientRect();   first_box = first.getBoundingClientRect();   last_box = last.getBoundingClientRect();-  top = Math.min(first_box.top, last_box.top) - table_box.top;-  bottom = Math.max(first_box.bottom, last_box.bottom) - table_box.top;++  // An anchor's box holds only its digits, centred in a line that the line+  // height makes taller, so the bar reaches out by the difference to cover+  // whole lines. A line height of normal leaves nothing to add.+  leading = parseFloat(getComputedStyle(first).lineHeight);+  leading = (leading - first_box.height) / 2 || 0;++  // The bar is placed from inside the table's border, not from its edge.+  origin = table_box.top + table.clientTop;+  top = Math.min(first_box.top, last_box.top) - leading - origin;+  bottom = Math.max(first_box.bottom, last_box.bottom) + leading - origin;   bar = document.createElement("div");   bar.className = "line-hl";   bar.style.top = top + "px";   bar.style.height = (bottom - top) + "px";+  // A table too wide for the page scrolls sideways, and the bar has to run+  // to the end of its longest line rather than to the edge of the view.+  bar.style.width = table.scrollWidth + "px";   table.appendChild(bar);    // A browser only scrolls to a fragment that names a real id, which a range
diff --git a/assets/cgit.js b/assets/cgit.js
index 2c0a828..807f15f 100644
--- a/assets/cgit.js
+++ b/assets/cgit.js
@@ -112,7 +112,7 @@ var bar = null;
 
 function place_bar() {
   var match, first, last, table;
-  var table_box, first_box, last_box, top, bottom;
+  var table_box, first_box, last_box, leading, origin, top, bottom;
 
   if (bar) {
     bar.remove();
@@ -131,12 +131,24 @@ function place_bar() {
   table_box = table.getBoundingClientRect();
   first_box = first.getBoundingClientRect();
   last_box = last.getBoundingClientRect();
-  top = Math.min(first_box.top, last_box.top) - table_box.top;
-  bottom = Math.max(first_box.bottom, last_box.bottom) - table_box.top;
+
+  // An anchor's box holds only its digits, centred in a line that the line
+  // height makes taller, so the bar reaches out by the difference to cover
+  // whole lines. A line height of normal leaves nothing to add.
+  leading = parseFloat(getComputedStyle(first).lineHeight);
+  leading = (leading - first_box.height) / 2 || 0;
+
+  // The bar is placed from inside the table's border, not from its edge.
+  origin = table_box.top + table.clientTop;
+  top = Math.min(first_box.top, last_box.top) - leading - origin;
+  bottom = Math.max(first_box.bottom, last_box.bottom) + leading - origin;
   bar = document.createElement("div");
   bar.className = "line-hl";
   bar.style.top = top + "px";
   bar.style.height = (bottom - top) + "px";
+  // A table too wide for the page scrolls sideways, and the bar has to run
+  // to the end of its longest line rather than to the edge of the view.
+  bar.style.width = table.scrollWidth + "px";
   table.appendChild(bar);
 
   // A browser only scrolls to a fragment that names a real id, which a range