monoblue: port code selection without line numbers from gitweb

monoblue: port code selection without line numbers from gitweb

This is adapted from 2239626369f5.

It also fixes issue4790 in monoblue; tab characters now have meaningful width on
the modified pages (file view, file diff, changeset).

--- a/mercurial/templates/monoblue/changeset.tmpl	Tue Sep 22 15:10:24 2015 -0500
+++ b/mercurial/templates/monoblue/changeset.tmpl	Wed Sep 23 16:02:35 2015 +0800
@@ -59,7 +59,7 @@
     {files}
     </table>
 
-    <div class="diff">
+    <div class="diff diffblocks">
     {diff}
     </div>
 

--- a/mercurial/templates/monoblue/filediff.tmpl	Tue Sep 22 15:10:24 2015 -0500
+++ b/mercurial/templates/monoblue/filediff.tmpl	Wed Sep 23 16:02:35 2015 +0800
@@ -50,7 +50,7 @@
         {child%filediffchild}
     </dl>
 
-    <div class="diff">
+    <div class="diff diffblocks">
     {diff}
     </div>
 

--- a/mercurial/templates/monoblue/filerevision.tmpl	Tue Sep 22 15:10:24 2015 -0500
+++ b/mercurial/templates/monoblue/filerevision.tmpl	Wed Sep 23 16:02:35 2015 +0800
@@ -60,7 +60,7 @@
     <p class="description">{desc|strip|escape|websub|addbreaks|nonempty}</p>
 
     <div class="source">
-    {text%fileline}
+        <pre class="sourcelines stripes">{text%fileline}</pre>
     </div>
 
 {footer}

--- a/mercurial/templates/monoblue/map	Tue Sep 22 15:10:24 2015 -0500
+++ b/mercurial/templates/monoblue/map	Wed Sep 23 16:02:35 2015 +0800
@@ -89,9 +89,7 @@
 filecomparison = filecomparison.tmpl
 filelog = filelog.tmpl
 fileline = '
-  <div style="font-family:monospace" class="parity{parity}">
-    <pre><a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</pre>
-  </div>'
+  <span id="{lineid}">{strip(line|escape, '\r\n')}</span><a href="#{lineid}"></a>'
 annotateline = '
   <tr class="parity{parity}">
     <td class="linenr">
@@ -103,10 +101,14 @@
     </td>
     <td class="source">{line|escape}</td>
   </tr>'
-difflineplus = '<span class="difflineplus"><a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</span>'
-difflineminus = '<span class="difflineminus"><a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</span>'
-difflineat = '<span class="difflineat"><a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</span>'
-diffline = '<span><a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</span>'
+difflineplus = '
+  <span id="{lineid}" class="difflineplus">{strip(line|escape, '\r\n')}</span><a href="#{lineid}"></a>'
+difflineminus = '
+  <span id="{lineid}" class="difflineminus">{strip(line|escape, '\r\n')}</span><a href="#{lineid}"></a>'
+difflineat = '
+  <span id="{lineid}" class="difflineat">{strip(line|escape, '\r\n')}</span><a href="#{lineid}"></a>'
+diffline = '
+  <span id="{lineid}">{strip(line|escape, '\r\n')}</span><a href="#{lineid}"></a>'
 
 comparisonblock ='
   <tbody class="block">
@@ -201,7 +203,7 @@
       <a href="{url|urlescape}file/{node|short}{sessionvars%urlparameter}">files</a>
     </td>
   </tr>'
-diffblock = '<pre>{lines}</pre>'
+diffblock = '<div class="diffblock"><pre class="sourcelines">{lines}</pre></div>'
 filediffparent = '
   <dt>parent {rev}</dt>
   <dd><a href="{url|urlescape}diff/{node|short}/{file|urlescape}{sessionvars%urlparameter}">{node|short}</a></dd>'

--- a/mercurial/templates/static/style-monoblue.css	Tue Sep 22 15:10:24 2015 -0500
+++ b/mercurial/templates/static/style-monoblue.css	Wed Sep 23 16:02:35 2015 +0800
@@ -255,33 +255,57 @@
   font-family: monospace;
   white-space: pre;
   font-size: 1.2em;
-  padding: 3px 0;
 }
+div.diffblocks { counter-reset: lineno; }
+div.diffblock { counter-increment: lineno; }
 span.difflineplus { color:#008800; }
 span.difflineminus { color:#cc0000; }
 span.difflineat { color:#990099; }
 
+pre.sourcelines { position: relative; counter-reset: lineno; }
+pre.sourcelines > span {
+    display: inline-block;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0 0 0 5em;
+    font-size: 1.2em;
+    counter-increment: lineno;
+}
+div.source > pre.sourcelines > span {
+    padding: 1px 1px 1px 5em;
+}
+pre.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;
+    margin-left: -5em;
+    width: 4em;
+    color: #999;
+    text-align: right;
+    content: counters(lineno,".");
+    float: left;
+}
+pre.sourcelines > a {
+    display: inline-block;
+    position: absolute;
+    left: 0px;
+    width: 4em;
+    height: 1em;
+}
+pre.sourcelines.stripes > :nth-child(4n+1) { background-color: #F1F6F7; }
+pre.sourcelines.stripes > :nth-child(4n+3) { background-color: #FFFFFF; }
+pre.sourcelines.stripes > :nth-child(4n+1):hover,
+pre.sourcelines.stripes > :nth-child(4n+3):hover { background-color: #D5E1E6; }
+
 td.source {
   white-space: pre;
   margin: 10px 30px 0;
   font-size: 1.2em;
   font-family: monospace;
 }
-  div.source div.parity0,
-  div.source div.parity1 {
-    padding: 1px;
-    font-size: 1.2em;
-  }
-  div.source div.parity0 {
-    background: #F1F6F7;
-  }
-  div.source div.parity1 {
-    background: #FFFFFF;
-  }
-div.parity0:hover,
-div.parity1:hover {
-  background: #D5E1E6;
-}
 .linenr {
   color: #999;
   text-align: right;