view mercurial/templates/paper/map @ 19387:f2e4fdb3dd27

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.
Also, stripes in this view are now generated clientside with CSS.

This implementation is chosen because other variants have important issues:

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
pre/span            LV                LV

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
&nbsp; 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,
&nbsp; or <br> same as in previous strategy
- pre/span: this patch

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
LV = (only) visually selects line numbers
LVE = (only) visually selects line numbers at empty lines
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)

As for browser versions compatibility, the CSS tricks used are supported in
(according to caniuse.com):
a) line numbers generation with 'content:' property and CSS counters:
IE 8+, all other popular browsers (in pre-WebKit Opera numbers are being copied)
b) stripes ('nth-child' selector):
IE 8+, FF 3.5+, Safari 3.2+, Opera 9.5+, all other popular browsers
c) line numbers are not visually selected ('user-select:' property):
IE 10+, Opera 15.0+, all other popular browsers

This patch is based on a demo implementation by
Martin Geisler <[e-mail]>.

default = 'shortlog'

mimetype = 'text/html; charset={encoding}'
header = header.tmpl
footer = footer.tmpl
search = search.tmpl

changelog = shortlog.tmpl
shortlog = shortlog.tmpl
shortlogentry = shortlogentry.tmpl
graph = graph.tmpl
help = help.tmpl
helptopics = helptopics.tmpl

helpentry = '
  <tr><td>
    <a href="{url|urlescape}help/{topic|escape}{sessionvars%urlparameter}">
      {topic|escape}
    </a>
  </td><td>
    {summary|escape}
  </td></tr>'

naventry = '<a href="{url|urlescape}log/{node|short}{sessionvars%urlparameter}">{label|escape}</a> '
navshortentry = '<a href="{url|urlescape}shortlog/{node|short}{sessionvars%urlparameter}">{label|escape}</a> '
navgraphentry = '<a href="{url|urlescape}graph/{node|short}{sessionvars%urlparameter}">{label|escape}</a> '
filenaventry = '<a href="{url|urlescape}log/{node|short}/{file|urlescape}{sessionvars%urlparameter}">{label|escape}</a> '
filedifflink = '<a href="{url|urlescape}diff/{node|short}/{file|urlescape}{sessionvars%urlparameter}">{file|escape}</a> '
filenodelink = '<a href="{url|urlescape}file/{node|short}/{file|urlescape}{sessionvars%urlparameter}">{file|escape}</a> '
filenolink = '{file|escape} '
fileellipses = '...'
diffstatlink = diffstat.tmpl
diffstatnolink = diffstat.tmpl
changelogentry = shortlogentry.tmpl
searchentry = shortlogentry.tmpl
changeset = changeset.tmpl
manifest = manifest.tmpl

nav = '{before%naventry} {after%naventry}'
navshort = '{before%navshortentry}{after%navshortentry}'
navgraph = '{before%navgraphentry}{after%navgraphentry}'
filenav = '{before%filenaventry}{after%filenaventry}'

direntry = '
  <tr class="fileline parity{parity}">
    <td class="name">
      <a href="{url|urlescape}file/{node|short}{path|urlescape}{sessionvars%urlparameter}">
        <img src="{staticurl|urlescape}coal-folder.png" alt="dir."/> {basename|escape}/
      </a>
      <a href="{url|urlescape}file/{node|short}{path|urlescape}/{emptydirs|urlescape}{sessionvars%urlparameter}">
        {emptydirs|escape}
      </a>
    </td>
    <td class="size"></td>
    <td class="permissions">drwxr-xr-x</td>
  </tr>'

fileentry = '
  <tr class="fileline parity{parity}">
    <td class="filename">
      <a href="{url|urlescape}file/{node|short}/{file|urlescape}{sessionvars%urlparameter}">
        <img src="{staticurl|urlescape}coal-file.png" alt="file"/> {basename|escape}
      </a>
    </td>
    <td class="size">{size}</td>
    <td class="permissions">{permissions|permissions}</td>
  </tr>'

filerevision = filerevision.tmpl
fileannotate = fileannotate.tmpl
filediff = filediff.tmpl
filecomparison = filecomparison.tmpl
filelog = filelog.tmpl
fileline = '
  <span id="{lineid}">{strip(line|escape, '\r\n')}</span><a href="#{lineid}"></a>'
filelogentry = filelogentry.tmpl

annotateline = '
  <tr class="parity{parity}">
    <td class="annotate">
      <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>
  </tr>'

diffblock = '<div class="source bottomline parity{parity}"><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}'

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>'

changelogparent = '
  <tr>
    <th class="parent">parent {rev}:</th>
    <td class="parent"><a href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">{node|short}</a></td>
  </tr>'

changesetparent = '<a href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">{node|short}</a> '

difffrom = '<a href="{url|urlescape}rev/{node|short}:{originalnode|short}{sessionvars%urlparameter}">{node|short}</a> '

filerevparent = '<a href="{url|urlescape}file/{node|short}/{file|urlescape}{sessionvars%urlparameter}">{rename%filerename}{node|short}</a> '
filerevchild = '<a href="{url|urlescape}file/{node|short}/{file|urlescape}{sessionvars%urlparameter}">{node|short}</a> '

filerename = '{file|escape}@'
filelogrename = '
  <span class="base">
    base
    <a href="{url|urlescape}file/{node|short}/{file|urlescape}{sessionvars%urlparameter}">
      {file|escape}@{node|short}
    </a>
  </span>'
fileannotateparent = '
  <tr>
    <td class="metatag">parent:</td>
    <td>
      <a href="{url|urlescape}annotate/{node|short}/{file|urlescape}{sessionvars%urlparameter}">
        {rename%filerename}{node|short}
      </a>
    </td>
  </tr>'
changesetchild = ' <a href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">{node|short}</a>'
changelogchild = '
  <tr>
    <th class="child">child</th>
    <td class="child">
      <a href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">
        {node|short}
      </a>
    </td>
  </tr>'
fileannotatechild = '
  <tr>
    <td class="metatag">child:</td>
    <td>
      <a href="{url|urlescape}annotate/{node|short}/{file|urlescape}{sessionvars%urlparameter}">
        {node|short}
      </a>
    </td>
  </tr>'
tags = tags.tmpl
tagentry = '
  <tr class="tagEntry parity{parity}">
    <td>
      <a href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">
        {tag|escape}
      </a>
    </td>
    <td class="node">
      {node|short}
    </td>
  </tr>'
bookmarks = bookmarks.tmpl
bookmarkentry = '
  <tr class="tagEntry parity{parity}">
    <td>
      <a href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">
        {bookmark|escape}
      </a>
    </td>
    <td class="node">
      {node|short}
    </td>
  </tr>'
branches = branches.tmpl
branchentry = '
  <tr class="tagEntry parity{parity}">
    <td>
      <a href="{url|urlescape}shortlog/{node|short}{sessionvars%urlparameter}" class="{status}">
        {branch|escape}
      </a>
    </td>
    <td class="node">
      {node|short}
    </td>
  </tr>'
changelogtag = '<span class="tag">{name|escape}</span> '
changesettag = '<span class="tag">{tag|escape}</span> '
changesetbookmark = '<span class="tag">{bookmark|escape}</span> '
changelogbranchhead = '<span class="branchhead">{name|escape}</span> '
changelogbranchname = '<span class="branchname">{name|escape}</span> '

filediffparent = '
  <tr>
    <th class="parent">parent {rev}:</th>
    <td class="parent"><a href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">{node|short}</a></td>
  </tr>'
filelogparent = '
  <tr>
    <th>parent {rev}:</th>
    <td><a href="{url|urlescape}file/{node|short}/{file|urlescape}{sessionvars%urlparameter}">{node|short}</a></td>
  </tr>'
filediffchild = '
  <tr>
    <th class="child">child {rev}:</th>
    <td class="child"><a href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">{node|short}</a>
  </td>
  </tr>'
filelogchild = '
  <tr>
    <th>child {rev}:</th>
    <td><a href="{url|urlescape}file/{node|short}/{file|urlescape}{sessionvars%urlparameter}">{node|short}</a></td>
  </tr>'

indexentry = '
  <tr class="parity{parity}">
    <td><a href="{url|urlescape}{sessionvars%urlparameter}">{name|escape}</a></td>
    <td>{description}</td>
    <td>{contact|obfuscate}</td>
    <td class="age">{lastchange|rfc822date}</td>
    <td class="indexlinks">{archives%indexarchiveentry}</td>
    <td>
        {if(isdirectory, '',
            '<a href="{url|urlescape}atom-log" title="subscribe to repository atom feed">
                <img class="atom-logo" src="{staticurl|urlescape}feed-icon-14x14.png" alt="subscribe to repository atom feed">
            </a>'
            )}
    </td>
  </tr>\n'
indexarchiveentry = '<a href="{url|urlescape}archive/{node|short}{extension|urlescape}">&nbsp;&darr;{type|escape}</a>'
index = index.tmpl
archiveentry = '
  <li>
    <a href="{url|urlescape}archive/{node|short}{extension|urlescape}{ifeq(path,'/','',path|urlescape)}">{type|escape}</a>
  </li>'
notfound = notfound.tmpl
error = error.tmpl
urlparameter = '{separator}{name}={value|urlescape}'
hiddenformentry = '<input type="hidden" name="{name}" value="{value|escape}" />'
breadcrumb = '&gt; <a href="{url|urlescape}">{name|escape}</a> '