[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