coal: copy newer things from paper

Basically, coal style in hgweb is intended to be functionally equivalent (just
different in style) to paper, and does this by reusing almost all templates
from paper (except header.tmpl, where it specifies a different css file). Looks
like everybody forgot this and so many improvements to paper templates, that
should've also made it into coal, were often only half-done there (usually
thanks to template reuse). Let's fix this by bulk-copying missing things from
paper/map and style-paper.css to coal/map and style-coal.css.

There were many improvements to paper that didn't touch coal, and that makes it
hard to untangle the code and split this patch into many, but here are some of
the changes (paper-only), that now get into coal:

41c4bdd1d585 - hgweb: color line which is linked to in file source view
f3393d458bf5 - hgweb: highlight line which is linked to at annotate view
f2e4fdb3dd27 - hgweb: code selection without line numbers in file source view
5ec5097b4c0f - hgweb: add line wrapping switch to file source view
bf661a03fddc - hgweb: use css margin instead of empty <p> before diffstat table

It also fixes line anchor in annotateline template (#42 vs #l42).

mercurial/templates/coal/map

@@ -73,32 +73,36 b' filediff = ../paper/filediff.tmpl'
 filecomparison = ../paper/filecomparison.tmpl
 filelog = ../paper/filelog.tmpl
 fileline = '
-  <div class="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 = ../paper/filelogentry.tmpl
 
 annotateline = '
-  <tr>
+  <tr id="{lineid}">
     <td class="annotate">
-      <a href="{url|urlescape}annotate/{node|short}/{file|urlescape}{sessionvars%urlparameter}#{targetline}"
+      <a href="{url|urlescape}annotate/{node|short}/{file|urlescape}{sessionvars%urlparameter}#l{targetline}"
          title="{node|short}: {desc|escape|firstline}">{author|user}@{rev}</a>
     </td>
-    <td class="source"><a href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</td>
+    <td class="source"><a href="#{lineid}">{linenumber}</a> {line|escape}</td>
   </tr>'
 
-diffblock = '<div class="source bottomline"><pre>{lines}</pre></div>'
-difflineplus = '<a href="#{lineid}" id="{lineid}">{linenumber}</a> <span class="plusline">{line|escape}</span>'
-difflineminus = '<a href="#{lineid}" id="{lineid}">{linenumber}</a> <span class="minusline">{line|escape}</span>'
-difflineat = '<a href="#{lineid}" id="{lineid}">{linenumber}</a> <span class="atline">{line|escape}</span>'
-diffline = '<a href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}'
+diffblock = '<div class="bottomline inc-lineno"><pre class="sourcelines wrap">{lines}</pre></div>'
+difflineplus = '
+  <span id="{lineid}" class="plusline">{strip(line|escape, '\r\n')}</span><a href="#{lineid}"></a>'
+difflineminus = '
+  <span id="{lineid}" class="minusline">{strip(line|escape, '\r\n')}</span><a href="#{lineid}"></a>'
+difflineat = '
+  <span id="{lineid}" class="atline">{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">
   {lines}
   </tbody>'
 comparisonline = '
-  <tr>
-    <td class="source {type}"><a href="#{lineid}" id="{lineid}">{leftlinenumber}</a> {leftline|escape}</td>
-    <td class="source {type}"><a href="#{lineid}" id="{lineid}">{rightlinenumber}</a> {rightline|escape}</td>
+  <tr id="{lineid}">
+    <td class="source {type}"><a href="#{lineid}">{leftlinenumber}</a> {leftline|escape}</td>
+    <td class="source {type}"><a href="#{lineid}">{rightlinenumber}</a> {rightline|escape}</td>
   </tr>'
 
 changelogparent = '

mercurial/templates/static/style-coal.css

@@ -107,6 +107,9 b' a { text-decoration:none; }'
 .minusline { color: #dc143c; } /* crimson */
 .atline { color: purple; }
 
+.diffstat-table {
+  margin-top: 1em;
+}
 .diffstat-file {
   white-space: nowrap;
   font-size: 90%;
@@ -199,8 +202,6 b' h3 {'
 .bigtable .description { }
 .bigtable .description .base { font-size: 70%; float: right; line-height: 1.66; }
 .bigtable .node { width: 5em; font-family: monospace;}
-.bigtable .lineno { width: 2em; text-align: right;}
-.bigtable .lineno a { color: #999; font-size: smaller; font-family: monospace;}
 .bigtable .permissions { width: 8em; text-align: left;}
 .bigtable .size { width: 5em; text-align: right; }
 .bigtable .annotate { text-align: right; }
@@ -218,13 +219,59 b' h3 {'
 .source a { color: #999; font-size: smaller; font-family: monospace;}
 .bottomline { border-bottom: 1px solid #999; }
 
-.sourcelines > div {
+.sourcelines {
+  font-size: 90%;
+  position: relative;
+  counter-reset: lineno;
+}
+
+.wrap > span {
+    white-space: pre-wrap;
+}
+
+.linewraptoggle {
+    float: right;
+}
+
+.diffblocks { counter-reset: lineno; }
+.diffblocks > div { counter-increment: lineno; }
+
+.sourcelines > span {
   display: inline-block;
+  box-sizing: border-box;
   width: 100%;
-  padding: 1px 0px;
+  padding: 1px 0px 1px 5em;
   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;
+  margin-left: -5em;
+  width: 4em;
+  font-size: smaller;
+  color: #999;
+  text-align: right;
+  content: counters(lineno, ".");
+  float: left;
+}
+
+.sourcelines > span:target, tr:target td {
+  background-color: #bfdfff;
+}
+
+.sourcelines > a {
+    display: inline-block;
+    position: absolute;
+    left: 0px;
+    width: 4em;
+    height: 1em;
+}
+
 .fileline { font-family: monospace; }
 .fileline img { border: 0; }
 

tests/test-hgweb-symrev.t

@@ -376,8 +376,8 b' Set up the repo'
    annotate foo @ 1:<a href="/rev/a7c1559b7bba?style=coal">a7c1559b7bba</a>
    <td class="author"><a href="/file/43c799df6e75/foo?style=coal">43c799df6e75</a> </td>
    <td class="author"><a href="/file/9d8c40cba617/foo?style=coal">9d8c40cba617</a> </td>
-  <a href="/annotate/43c799df6e75/foo?style=coal#1"
-  <a href="/annotate/a7c1559b7bba/foo?style=coal#2"
+  <a href="/annotate/43c799df6e75/foo?style=coal#l1"
+  <a href="/annotate/a7c1559b7bba/foo?style=coal#l2"
 
   $ "$TESTDIR/get-with-headers.py" 127.0.0.1:$HGPORT 'diff/xyzzy/foo?style=coal' | egrep $REVLINKS
   <li><a href="/shortlog/xyzzy?style=coal">log</a></li>