From 6622be235286747f787001e56dd483e79f319190 Mon Sep 17 00:00:00 2001 From: Ricardo Wurmus Date: Sat, 24 Dec 2022 15:24:34 +0100 Subject: 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. --- assets/js/lines.js | 12 ++++++++++ assets/mumi.scss | 11 +++++---- mumi/web/view/html.scm | 2 ++ mumi/web/view/utils.scm | 64 ++++++++++++++++++++++--------------------------- 4 files changed, 49 insertions(+), 40 deletions(-) create mode 100644 assets/js/lines.js 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 '())) -- cgit v1.2.3