Reduce page weight by simplifying line number anchors.

For large issues with many lines the DOM becomes littered with anchors
that slow down rendering significantly.  Dropping the anchor tags cuts
the page size in half and speeds up rendering.  We can still address
lines by their identifiers, but to act on clicks we need a little bit
of JavaScript.

4 files changed, 49 insertions, 40 deletions

diff --git a/assets/js/lines.js b/assets/js/lines.js
new file mode 100644
index 0000000..f22057d
--- /dev/null
+++ b/assets/js/lines.js
@@ -0,0 +1,12 @@
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3.0-or-later
+window.addEventListener('DOMContentLoaded', function () {
+  let lineClickHandler = (evt) => {
+    if (evt.target.classList.contains("line")) {
+      window.location.hash = evt.target.id;
+      return;
+    }
+  };
+  var root = document.querySelector("div.conversation");
+  root.addEventListener("click", lineClickHandler);
+});
+// @license-end
diff --git a/assets/mumi.scss b/assets/mumi.scss
index 963ebd8..f2c6d07 100644
--- a/assets/mumi.scss
+++ b/assets/mumi.scss
@@ -344,17 +344,18 @@ details.search-hints summary:after{
     margin-left: 0;
 }
 
-a.line-anchor {
+div.line:before {
     position: absolute;
+    display: inline-block;
     visibility: hidden;
-}
-a.line-anchor:before {
     content: "# ";
     margin-left: -1em;
     padding-right: 1em;
+    text-align: right;
+    cursor: pointer;
+    color: $grey-300;
 }
-
-div.line:hover a.line-anchor {
+div.line:hover:before {
     visibility: visible;
 }
 
diff --git a/mumi/web/view/html.scm b/mumi/web/view/html.scm
index f72b4ba..4d47ef0 100644
--- a/mumi/web/view/html.scm
+++ b/mumi/web/view/html.scm
@@ -677,6 +677,8 @@ currently disabled."))
   (if (null? messages) #f
       (layout
        #:title (bug-subject* bug)
+       #:head
+       '((script (@ (src "/js/lines.js"))))
        #:body
        `(,(header #:title (bug-subject* bug))
          (main
diff --git a/mumi/web/view/utils.scm b/mumi/web/view/utils.scm
index 0a43b06..1e52117 100644
--- a/mumi/web/view/utils.scm
+++ b/mumi/web/view/utils.scm
@@ -53,10 +53,13 @@
                     (cons line (block-raw-lines block)))
   block)
 
-(define (process line blocks context line-anchor)
+(define (process line blocks context message-number line-number)
   "Process the current LINE.  Add it to the latest block in BLOCKS or
 add it to a new block, dependent on CONTEXT.  Return the blocks along
 with the next context."
+  (define line-info
+    `((id ,(format #false "~a-lineno~a"
+                   message-number line-number))))
   (match blocks
     ((block . other-blocks)
      (cond
@@ -74,28 +77,26 @@ with the next context."
       ((eq? context 'diff)
        (if (string= "--" line)
            ;; Retry
-           (process line blocks #f line-anchor)
+           (process line blocks #f message-number line-number)
            ;; Format line and add to current block
            (let ((formatted-line
                   (cond
                    ((string= "---" line)
-                    `(div (@ (class "line diff separator"))
-                          ,line-anchor ,line))
+                    `(div (@ (class "line diff separator") ,@line-info)
+                          ,line))
                    ((string-prefix? "+" line)
-                    `(div (@ (class "line diff addition"))
-                          ,line-anchor ,line))
+                    `(div (@ (class "line diff addition") ,@line-info)
+                          ,line))
                    ((and (string-prefix? "-" line)
                          (not (string= "--" line))
                          (not (string= "-- " line)))
-                    `(div (@ (class "line diff deletion"))
-                          ,line-anchor ,line))
+                    `(div (@ (class "line diff deletion") ,@line-info)
+                          ,line))
                    ((string-prefix? "@@" line)
-                    `(div (@ (class "line diff range"))
-                          ,line-anchor ,line))
+                    `(div (@ (class "line diff range") ,@line-info)
+                          ,line))
                    (else
-                    `(div (@ (class "line"))
-                          ,line-anchor
-                          ,line)))))
+                    `(div (@ (class "line") ,@line-info) ,line)))))
              (values (cons (add-block-line! block formatted-line)
                            other-blocks)
                      context))))
@@ -103,13 +104,12 @@ with the next context."
        (if (string-prefix? ">" line)
            ;; Add line to current block
            (values (cons (add-block-line! block
-                                          `(div (@ (class "line"))
-                                                ,line-anchor
+                                          `(div (@ (class "line") ,@line-info)
                                                 ,line))
                          other-blocks)
                    context)
            ;; Retry
-           (process line blocks #f line-anchor)))
+           (process line blocks #f message-number line-number)))
       (else
        (let ((new-context
               (cond
@@ -132,34 +132,33 @@ with the next context."
                           ((uri-string . rest)
                            (or (and=> (string->uri uri-string)
                                       (lambda (uri)
-                                        `(div (@ (class "line"))
-                                              ,line-anchor
+                                        `(div (@ (class "line") ,@line-info)
                                               ,(string-trim-right pre #\<)
                                               (a (@ (href ,uri-string))
                                                  ,uri-string)
                                               ,(string-join rest " "))))
-                               `(div (@ (class "line"))
-                                      ,line-anchor ,line)))))))
+                               `(div (@ (class "line") ,@line-info)
+                                     ,line)))))))
                ((or (string-prefix? "Signed-off-by" line)
                     (string-prefix? "Co-authored-by" line))
-                `(div (@ (class "line commit attribution"))
-                      ,line-anchor ,line))
+                `(div (@ (class "line commit attribution") ,@line-info)
+                      ,line))
                ((or (string-prefix? "From: " line)
                     (string-prefix? "Date: " line)
                     (string-prefix? "Subject: " line))
-                `(div (@ (class "line commit header"))
-                       ,line-anchor ,line))
+                `(div (@ (class "line commit header") ,@line-info)
+                      ,line))
                ((or (string-prefix? "* " line)
                     (string-prefix? " * " line))
-                `(div (@ (class "line commit changelog"))
-                      ,line-anchor ,line))
+                `(div (@ (class "line commit changelog") ,@line-info)
+                      ,line))
                ((string-prefix? "diff --git" line)
-                `(div (@ (class "line diff file"))
-                       ,line-anchor ,line))
+                `(div (@ (class "line diff file") ,@line-info)
+                      ,line))
                ((string-prefix? "--8<---------------cut here" line)
                 "")
                (else
-                `(div (@ (class "line")) ,line-anchor ,line)))))
+                `(div (@ (class "line") ,@line-info) ,line)))))
          (if (eq? new-context context)
              (values (cons (add-block-line! block formatted-line)
                            other-blocks)
@@ -178,12 +177,7 @@ numbers with the given MESSAGE-NUMBER."
                             (process line
                                      (cadr (memq #:blocks acc))
                                      (cadr (memq #:context acc))
-                                     `(a (@ (class "line-anchor")
-                                            (id ,(format #false "~a-lineno~a"
-                                                         message-number line-number))
-                                            (href ,(format #false "#~a-lineno~a"
-                                                           message-number line-number)))
-                                         "")))
+                                     message-number line-number))
                         (lambda (new-blocks new-context)
                           `(#:blocks ,new-blocks #:context ,new-context))))
                     (list #:blocks (list (make-block 'text '()))