changeset 26670:ab2cd800f1b0

gitweb: visually highlight source lines when hovering over line numbers Due to how the line links now reside outside of the source lines, hovering over line numbers doesn't count as hovering over the appropriate source line. It can be worked around by using a "+" css selector. However, it's necessary to reorder the elements and put <a> before <span> (which is actually quite logical). It works without further css tweaks because <a> is already absolute-positioned and so the order doesn't matter visually.
author Anton Shestakov <av6@dwimlabs.net>
date Thu, 15 Oct 2015 00:04:58 +0800
parents 07db7e95c464
children 66dc39cd7d06
files mercurial/templates/gitweb/map mercurial/templates/static/style-gitweb.css tests/test-hgweb.t
diffstat 3 files changed, 18 insertions(+), 12 deletions(-) [+]
line wrap: on
line diff
--- a/mercurial/templates/gitweb/map	Tue Oct 13 14:17:15 2015 -0700
+++ b/mercurial/templates/gitweb/map	Thu Oct 15 00:04:58 2015 +0800
@@ -93,7 +93,7 @@
 filecomparison = filecomparison.tmpl
 filelog = filelog.tmpl
 fileline = '
-  <span id="{lineid}">{strip(line|escape, '\r\n')}</span><a href="#{lineid}"></a>'
+  <a href="#{lineid}"></a><span id="{lineid}">{strip(line|escape, '\r\n')}</span>'
 annotateline = '
   <tr id="{lineid}" style="font-family:monospace" class="parity{parity}">
     <td class="linenr" style="text-align: right;">
@@ -104,13 +104,13 @@
     <td><pre>{line|escape}</pre></td>
   </tr>'
 difflineplus = '
-  <span id="{lineid}" class="difflineplus">{strip(line|escape, '\r\n')}</span><a href="#{lineid}"></a>'
+  <a href="#{lineid}"></a><span id="{lineid}" class="difflineplus">{strip(line|escape, '\r\n')}</span>'
 difflineminus = '
-  <span id="{lineid}" class="difflineminus">{strip(line|escape, '\r\n')}</span><a href="#{lineid}"></a>'
+  <a href="#{lineid}"></a><span id="{lineid}" class="difflineminus">{strip(line|escape, '\r\n')}</span>'
 difflineat = '
-  <span id="{lineid}" class="difflineat">{strip(line|escape, '\r\n')}</span><a href="#{lineid}"></a>'
+  <a href="#{lineid}"></a><span id="{lineid}" class="difflineat">{strip(line|escape, '\r\n')}</span>'
 diffline = '
-  <span id="{lineid}">{strip(line|escape, '\r\n')}</span><a href="#{lineid}"></a>'
+  <a href="#{lineid}"></a><span id="{lineid}">{strip(line|escape, '\r\n')}</span>'
 
 comparisonblock ='
   <tbody class="block">
--- a/mercurial/templates/static/style-gitweb.css	Tue Oct 13 14:17:15 2015 -0700
+++ b/mercurial/templates/static/style-gitweb.css	Thu Oct 15 00:04:58 2015 +0800
@@ -29,9 +29,12 @@
 a.list:hover { text-decoration:underline; color:#880000; }
 table { padding:8px 4px; }
 th { padding:2px 5px; font-size:12px; text-align:left; }
-tr.light:hover, .parity0:hover, pre.sourcelines.stripes > :nth-child(4n+1):hover { background-color:#edece6; }
-tr.dark, .parity1, pre.sourcelines.stripes > :nth-child(4n+3) { background-color:#f6f6f0; }
-tr.dark:hover, .parity1:hover, pre.sourcelines.stripes > :nth-child(4n+3):hover { background-color:#edece6; }
+tr.dark, .parity1, pre.sourcelines.stripes > :nth-child(4n+4) { background-color:#f6f6f0; }
+tr.light:hover, .parity0:hover, tr.dark:hover, .parity1:hover,
+pre.sourcelines.stripes > :nth-child(4n+2):hover,
+pre.sourcelines.stripes > :nth-child(4n+4):hover,
+pre.sourcelines.stripes > :nth-child(4n+1):hover + :nth-child(4n+2),
+pre.sourcelines.stripes > :nth-child(4n+3):hover + :nth-child(4n+4) { background-color:#edece6; }
 td { padding:2px 5px; font-size:12px; vertical-align:top; }
 td.closed { background-color: #99f; }
 td.link { padding:2px 5px; font-family:sans-serif; font-size:10px; }
--- a/tests/test-hgweb.t	Tue Oct 13 14:17:15 2015 -0700
+++ b/tests/test-hgweb.t	Thu Oct 15 00:04:58 2015 +0800
@@ -340,7 +340,7 @@
 
   $ get-with-headers.py --twice localhost:$HGPORT 'static/style-gitweb.css' - date etag server
   200 Script output follows
-  content-length: 6412
+  content-length: 6521
   content-type: text/css
   
   body { font-family: sans-serif; font-size: 12px; border:solid #d9d8d1; border-width:1px; margin:10px; background: white; color: black; }
@@ -374,9 +374,12 @@
   a.list:hover { text-decoration:underline; color:#880000; }
   table { padding:8px 4px; }
   th { padding:2px 5px; font-size:12px; text-align:left; }
-  tr.light:hover, .parity0:hover, pre.sourcelines.stripes > :nth-child(4n+1):hover { background-color:#edece6; }
-  tr.dark, .parity1, pre.sourcelines.stripes > :nth-child(4n+3) { background-color:#f6f6f0; }
-  tr.dark:hover, .parity1:hover, pre.sourcelines.stripes > :nth-child(4n+3):hover { background-color:#edece6; }
+  tr.dark, .parity1, pre.sourcelines.stripes > :nth-child(4n+4) { background-color:#f6f6f0; }
+  tr.light:hover, .parity0:hover, tr.dark:hover, .parity1:hover,
+  pre.sourcelines.stripes > :nth-child(4n+2):hover,
+  pre.sourcelines.stripes > :nth-child(4n+4):hover,
+  pre.sourcelines.stripes > :nth-child(4n+1):hover + :nth-child(4n+2),
+  pre.sourcelines.stripes > :nth-child(4n+3):hover + :nth-child(4n+4) { background-color:#edece6; }
   td { padding:2px 5px; font-size:12px; vertical-align:top; }
   td.closed { background-color: #99f; }
   td.link { padding:2px 5px; font-family:sans-serif; font-size:10px; }