Patchwork [3,of,5,V2] hgweb: highlight the line which is linked at

login
register
mail settings
Submitter Alexander Plavin
Date May 31, 2013, 10:51 a.m.
Message ID <79de9eb002abd71fb4a4.1369997515@debian-alexander.dolgopa>
Download mbox | patch
Permalink /patch/1680/
State Rejected, archived
Headers show

Comments

Alexander Plavin - May 31, 2013, 10:51 a.m.
# HG changeset patch
# User Alexander Plavin <me@aplavin.ru>
# Date 1369991128 -14400
#      Fri May 31 13:05:28 2013 +0400
# Node ID 79de9eb002abd71fb4a44de2d39271354c9b815e
# Parent  12a99814b60ae57e2ee96780020fc6f324cd6815
hgweb: highlight the line which is linked at

Line corresponding to the URL hash (#l<n>) is highlighted in the views which
show file(s) content.
Laurens Holst - June 1, 2013, 12:04 p.m.
Op 5/31/13 12:51 PM, Alexander Plavin schreef:
> +function addOnclickSource() {
> +    nodes = document.querySelectorAll('li.source');
> +    for (i = 0; i < nodes.length; i++) {
> +        nodes[i].onclick = function (event) {
> +            if (event.offsetX < 0 || event.target.tagName == 'LI') {
> +                window.location.hash = '#' + this.id;
> +            }
> +        };
> +    }
> +}

It would be faster to just add the listener on the <ul> element, and use 
event.target.id instead of this.id.

You should avoid iterating over all source line, this could cause 
noticeable problems (unresponsive browser) for long source files. I 
think there was a similar issue in the past with process_dates().

~Laurens

Patch

diff -r 12a99814b60a -r 79de9eb002ab mercurial/templates/paper/footer.tmpl
--- a/mercurial/templates/paper/footer.tmpl	Thu May 30 20:23:50 2013 +0400
+++ b/mercurial/templates/paper/footer.tmpl	Fri May 31 13:05:28 2013 +0400
@@ -1,4 +1,8 @@ 
-<script type="text/javascript">process_dates()</script>
+<script type="text/javascript">
+process_dates();
+highlightLines();
+addOnclickSource();
+</script>
 {motd}
 
 </body>
diff -r 12a99814b60a -r 79de9eb002ab mercurial/templates/static/mercurial.js
--- a/mercurial/templates/static/mercurial.js	Thu May 30 20:23:50 2013 +0400
+++ b/mercurial/templates/static/mercurial.js	Fri May 31 13:05:28 2013 +0400
@@ -3,6 +3,7 @@ 
 // Rendering of branch DAGs on the client side
 // Display of elapsed time
 // Show or hide diffstat
+// Highlight source lines
 //
 // Copyright 2008 Dirkjan Ochtman <dirkjan AT ochtman DOT nl>
 // Copyright 2006 Alexander Schremmer <alex AT alexanderweb DOT de>
@@ -274,3 +275,38 @@ 
 	document.getElementById('diffstatdetails').style.display = 'none';
 	document.getElementById('diffstatexpand').style.display = 'inline';
 }
+
+
+function highlightLines() {
+    nodes = document.getElementsByClassName('linkedline');
+    for (i = 0; i < nodes.length; i++) {
+        nodes[i].className = nodes[i].className.replace(/(?:^|\s)linkedline(?!\S)/g, '');
+    }
+
+    hash = window.location.hash;
+    if (hash.substring(0, 2) === '#l') {
+        id = hash.substring(1);
+        elem = document.getElementById(id);
+        switch (elem.tagName) {
+            case 'A':
+                elem.parentNode.parentNode.className += ' linkedline';
+                break;
+            case 'LI':
+                elem.className += ' linkedline';
+                break;
+        }
+    }
+}
+
+window.addEventListener("hashchange", highlightLines, false);
+
+function addOnclickSource() {
+    nodes = document.querySelectorAll('li.source');
+    for (i = 0; i < nodes.length; i++) {
+        nodes[i].onclick = function (event) {
+            if (event.offsetX < 0 || event.target.tagName == 'LI') {
+                window.location.hash = '#' + this.id;
+            }
+        };
+    }
+}
diff -r 12a99814b60a -r 79de9eb002ab mercurial/templates/static/style-paper.css
--- a/mercurial/templates/static/style-paper.css	Thu May 30 20:23:50 2013 +0400
+++ b/mercurial/templates/static/style-paper.css	Fri May 31 13:05:28 2013 +0400
@@ -96,6 +96,7 @@ 
 .indexlinks { white-space:nowrap; }
 .parity0 { background-color: #f0f0f0; }
 .parity1 { background-color: white; }
+.linkedline > * { background-color: #ffff99 !important; }
 .plusline { color: green !important; }
 .minusline { color: #dc143c !important; } /* crimson */
 .atline { color: purple !important; }