[PATCH RFC] hgweb: code selection without line numbers in file source view
Alexander Plavin
me at aplavin.ru
Tue Jul 2 17:16:04 CDT 2013
# HG changeset patch
# User Alexander Plavin <me at aplavin.ru>
# Date 1372180221 -14400
# Tue Jun 25 21:10:21 2013 +0400
# Node ID bc3e72c2e619659e7cd73f28aa95dd27dd7d3812
# Parent d7b4aa1049d3fbbc2b8d24114afad82586c49db3
hgweb: code selection without line numbers in file source view
File code is presented as HTML ordered list, so that
line numbers are not selected with the code itself.
There are different possible strategies to implement the source code view,
and they have different pros/cons. Here follows a simple comparison table for
possible implementations:
Strategy FF Chrome
current D,LT,E,T,L D,L
pre S,NW S,NW
pre/div/nbsp LT,E,T,TS,NW TS,NW
pre/div/br LT,E,T,NW NW
ol/li/nbsp LT,E,T,TS,AJ TS,AJ
ol/li/br LT,E,T,AJ AJ
Legend
Strategies:
- current: implemented in hgweb before this patch, i.e. divs for each line,
and line numbers links in the div too
- pre: the whole code in one pre tag with newlines, all line numbers
in another one with 'float: left'
- pre/div/{nbsp,br}: same as just 'pre', but separate divs for each line and
or <br> instead of empty lines (otherwise they are not copied at all)
- ol/li/{nbsp,br}: a single ol with li's and divs for each line,
or <br> same as in previous strategy
Problems:
D = (very minor) display problems, like wrong width of leading tabs
LT = loses leading/trailing whitespace
E = loses embedded whitespace
B = loses blank lines
T = loses tabs
L = selects line numbers
S = no stripes (and no ability to easily highlight
lines-which-are-linked-at in the future)
TS = space copied instead of empty line
AJ = get anchor links only with JS (they work even without)
NW = no linewrap easily possible (in future)
Also, this patch changes the visual appearance of the source a little:
- line numbers have dots after them
- line numbers don't have the stripey background
- 'line source' heading above the source lines removed
- line numbers and lines have a vertical line between them
for better distinction
diff -r d7b4aa1049d3 -r bc3e72c2e619 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 Tue Jun 25 21:10:21 2013 +0400
@@ -67,8 +67,10 @@
</table>
<div class="overflow">
-<div class="sourcefirst"> line source</div>
+<div class="sourcefirst"></div>
+<ol class="sourcelines">
{text%fileline}
+</ol>
<div class="sourcelast"></div>
</div>
</div>
diff -r d7b4aa1049d3 -r bc3e72c2e619 mercurial/templates/paper/map
--- a/mercurial/templates/paper/map Sat Jun 29 14:36:51 2013 +0400
+++ b/mercurial/templates/paper/map Tue Jun 25 21:10:21 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>'
+ <li class="parity{parity} source" id="{lineid}"><div>{nonempty(strip(line|escape, '\r\n'), '<br/>')}</div></li>'
filelogentry = filelogentry.tmpl
annotateline = '
diff -r d7b4aa1049d3 -r bc3e72c2e619 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 Tue Jun 25 21:10:21 2013 +0400
@@ -209,6 +209,38 @@
.source a { color: #999; font-size: smaller; font-family: monospace;}
.bottomline { border-bottom: 1px solid #999; }
+div.source, td.source { padding: 1px 4px; }
+
+ol.sourcelines {
+ background-color: #eee;
+ font-size: 90%;
+ margin: 0;
+ padding-left: 50px;
+}
+
+li.source {
+ -moz-user-select: -moz-none;
+ -khtml-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ color: #999;
+ padding: 0 5px;
+}
+
+li.source div {
+ -moz-user-select: text;
+ -khtml-user-select: text;
+ -webkit-user-select: text;
+ -ms-user-select: text;
+ user-select: text;
+ padding: 1px 5px;
+ border-left: 1px solid #ccc;
+ margin: 0 0 0 -7px;
+ color: #000;
+ font-size: 111%;
+}
+
.fileline { font-family: monospace; }
.fileline img { border: 0; }
More information about the Mercurial-devel
mailing list