[PATCH 1 of 3 RFC V5] hgweb: code selection without line numbers in file source view

Alexander Plavin me at aplavin.ru
Fri Jul 5 03:44:09 CDT 2013


# HG changeset patch
# User Alexander Plavin <me at aplavin.ru>
# Date 1372933124 -14400
#      Thu Jul 04 14:18:44 2013 +0400
# Node ID 23cba2af6b5a4502d6aeb3672ef0fa5441bc3a18
# Parent  d7b4aa1049d3fbbc2b8d24114afad82586c49db3
hgweb: code selection without line numbers in file source view

All the source lines are put in a <pre> tag, which gives correct display and
copy&paste in both Chromium (WebKit) and FireFox: line numbers are not copied,
all the tabs and spaces are kept. This doesn't change the visual appearance
of the view compared to current hgweb version and doesn't use any JS code.

Issues:
a) in pre-Webkit versions of Opera line numbers are copied
b) line numbers are (only visually) selected at empty lines and in older
versions of most browsers, which don't support 'user-select' propery

This implementation is chosen because other variants have more important issues:
a) current hgweb implementation: line numbers are selected, tabs and spaces are
lost when copy in FireFox
b) the whole code in one <pre> tag, and all line numbers in another one
with 'float: left': not possible to add stripes, highlighting and line wrapping
c) same as previous, but separate divs for each line and nbsp's or br's
in place of empty lines (to keep display correct): tabs and spaces are lost
when copy in FireFox, not possible to add line wrapping
d) ordered html list for the lines, with nbsp's or br's in place of empty
lines (to keep display correct): tabs and spaces are lost when copy in FireFox,
getting anchor links to lines is possible only with JavaScript, and display is
altered with extra dots after line numbers.

As for browser compatibility, the CSS tricks used are supported in
(according to caniuse.com):
a) line numbers generation with 'content:' property and CSS counters
is supported in IE 8 and later and in all other popular browsers
b) stripes, implemented with 'nth-child' selector supported in
IE 8, FF 3.5, Safari 3.2, Opera 9.5 and later, and all other popular browsers

This patch is based on a demo implementation by
Martin Geilser <martin at geisler.net>.

diff -r d7b4aa1049d3 -r 23cba2af6b5a mercurial/templates/paper/filerevision.tmpl
--- a/mercurial/templates/paper/filerevision.tmpl	Sat Jun 29 14:36:51 2013 +0400
+++ b/mercurial/templates/paper/filerevision.tmpl	Thu Jul 04 14:18:44 2013 +0400
@@ -68,7 +68,7 @@
 
 <div class="overflow">
 <div class="sourcefirst"> line source</div>
-{text%fileline}
+<pre class="sourcelines">{text%fileline}</pre>
 <div class="sourcelast"></div>
 </div>
 </div>
diff -r d7b4aa1049d3 -r 23cba2af6b5a mercurial/templates/paper/map
--- a/mercurial/templates/paper/map	Sat Jun 29 14:36:51 2013 +0400
+++ b/mercurial/templates/paper/map	Thu Jul 04 14:18:44 2013 +0400
@@ -72,7 +72,7 @@
 filecomparison = filecomparison.tmpl
 filelog = filelog.tmpl
 fileline = '
-  <div class="parity{parity} source"><a href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</div>'
+  <span id="{lineid}">{strip(line|escape, '\r\n')}</span><a href="#{lineid}"></a>'
 filelogentry = filelogentry.tmpl
 
 annotateline = '
diff -r d7b4aa1049d3 -r 23cba2af6b5a mercurial/templates/static/style-paper.css
--- a/mercurial/templates/static/style-paper.css	Sat Jun 29 14:36:51 2013 +0400
+++ b/mercurial/templates/static/style-paper.css	Thu Jul 04 14:18:44 2013 +0400
@@ -209,6 +209,44 @@
 .source a { color: #999; font-size: smaller; font-family: monospace;}
 .bottomline { border-bottom: 1px solid #999; }
 
+.sourcelines {
+  font-size: 90%;
+  position: relative;
+}
+
+.sourcelines > span {
+  display: inline-block;
+  width: 100%;
+  padding: 1px 0px;
+  counter-increment: lineno;
+}
+
+.sourcelines > span:before {
+  -moz-user-select: -moz-none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  display: inline-block;
+  width: 4em;
+  margin-right: 1em;
+  font-size: smaller;
+  color: #999;
+  text-align: right;
+  content: counter(lineno);
+}
+
+.sourcelines > span:nth-child(4n+1) { background-color: #f0f0f0; }
+.sourcelines > span:nth-child(4n+3) { background-color: white; }
+
+.sourcelines > a {
+    display: inline-block;
+    position: absolute;
+    left: 0px;
+    width: 4em;
+    height: 1em;
+}
+
 .fileline { font-family: monospace; }
 .fileline img { border: 0; }
 


More information about the Mercurial-devel mailing list