hgweb: re-implement followlines UI selection using buttons

This changeset attempts to solve two issues with the "followlines" UI in
hgweb. First the "followlines" action is currently not easily discoverable
(one has to hover on a line for some time, wait for the invite message to
appear and then perform some action). Second, it gets in the way of natural
line selection, especially in filerevision view.

This changeset introduces an additional markup element (a <button
class="btn-followlines">) alongside each content line of the view. This button
now holds events for line selection that were previously plugged onto content
lines directly. Consequently, there's no more action on content lines, hence
restoring the "natural line selection" behavior (solving the second problem).
These buttons are hidden by default and get displayed upon hover of content
lines; then upon hover of a button itself, a text inviting followlines section
shows up. This solves the first problem (discoverability) as we now have a
clear visual element indicating that "some action could be perform" (i.e. a
button) and that is self-documented.

In followlines.js, all event listeners are now attached to these <button>
elements. The custom "floating tooltip" element is dropped as <button>
elements are now self-documented through a "title" attribute that changes
depending on preceding actions (selection started or not, in particular).

The new <button> element is inserted in followlines.js script (thus only
visible if JavaScript is activated); it contains a "+" and "-" with a
"diff-semantics" style; upon hover, it scales up.

To find the parent element under which to insert the <button> we either rely
on the "data-selectabletag" attribute (which defines the HTML tag of children
of class="sourcelines" element e.g. <span> for filerevision view and <tr> for
annotate view) or use a child of the latter elements if we find an element
with class="followlines-btn-parent" (useful for annotate view, for which we
have to find the <td> in which to insert the <button>).

On noticeable change in CSS concerns the "margin-left" of span:before
pseudo-elements in filelog view that has been increased a bit in order to
leave space for the new button to appear between line number column and
line content one.
Also note the "z-index" addition for "annotate-info" box so that the latter
appears on top of new buttons (instead of getting hidden).

In some respect, the UI similar to line commenting feature that is implemented
in popular code hosting site like GitHub, BitBucket or Kallithea.

mercurial/templates/gitweb/map

@@ -1,336 +1,336 b''
 default = 'summary'
 mimetype = 'text/html; charset={encoding}'
 header = header.tmpl
 footer = footer.tmpl
 search = search.tmpl
 changelog = changelog.tmpl
 summary = summary.tmpl
 error = error.tmpl
 notfound = notfound.tmpl
 
 help = help.tmpl
 helptopics = helptopics.tmpl
 
 helpentry = '
   <tr><td>
     <a href="{url|urlescape}help/{topic|escape}{sessionvars%urlparameter}">
       {if(basename, '{basename|escape}', '{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 = '
   <tr class="parity{parity}">
     <td><a class="list" href="{url|urlescape}diff/{node|short}/{file|urlescape}{sessionvars%urlparameter}">{file|escape}</a></td>
     <td></td>
     <td class="link">
       <a href="{url|urlescape}file/{node|short}/{file|urlescape}{sessionvars%urlparameter}">file</a> |
       <a href="{url|urlescape}annotate/{node|short}/{file|urlescape}{sessionvars%urlparameter}">annotate</a> |
       <a href="{url|urlescape}diff/{node|short}/{file|urlescape}{sessionvars%urlparameter}">diff</a> |
       <a href="{url|urlescape}comparison/{node|short}/{file|urlescape}{sessionvars%urlparameter}">comparison</a> |
       <a href="{url|urlescape}log/{node|short}/{file|urlescape}{sessionvars%urlparameter}">revisions</a>
     </td>
   </tr>'
 filenolink = '
   <tr class="parity{parity}">
     <td><a class="list" href="{url|urlescape}diff/{node|short}/{file|urlescape}{sessionvars%urlparameter}">{file|escape}</a></td>
     <td></td>
     <td class="link">
       file |
       annotate |
       <a href="{url|urlescape}diff/{node|short}/{file|urlescape}{sessionvars%urlparameter}">diff</a> |
       <a href="{url|urlescape}comparison/{node|short}/{file|urlescape}{sessionvars%urlparameter}">comparison</a> |
       <a href="{url|urlescape}log/{node|short}/{file|urlescape}{sessionvars%urlparameter}">revisions</a>
     </td>
   </tr>'
 
 nav = '{before%naventry} {after%naventry}'
 navshort = '{before%navshortentry}{after%navshortentry}'
 navgraph = '{before%navgraphentry}{after%navgraphentry}'
 filenav = '{before%filenaventry}{after%filenaventry}'
 
 fileellipses = '...'
 changelogentry = changelogentry.tmpl
 searchentry = changelogentry.tmpl
 changeset = changeset.tmpl
 manifest = manifest.tmpl
 direntry = '
   <tr class="parity{parity}">
     <td style="font-family:monospace">drwxr-xr-x</td>
     <td style="font-family:monospace"></td>
     <td style="font-family:monospace"></td>
     <td>
       <a href="{url|urlescape}file/{symrev}{path|urlescape}{sessionvars%urlparameter}">{basename|escape}</a>
       <a href="{url|urlescape}file/{symrev}{path|urlescape}/{emptydirs|urlescape}{sessionvars%urlparameter}">{emptydirs|escape}</a>
     </td>
     <td class="link">
       <a href="{url|urlescape}file/{symrev}{path|urlescape}{sessionvars%urlparameter}">files</a>
     </td>
   </tr>'
 fileentry = '
   <tr class="parity{parity}">
     <td style="font-family:monospace">{permissions|permissions}</td>
     <td style="font-family:monospace" align=right>{date|isodate}</td>
     <td style="font-family:monospace" align=right>{size}</td>
     <td class="list">
       <a class="list" href="{url|urlescape}file/{symrev}/{file|urlescape}{sessionvars%urlparameter}">{basename|escape}</a>
     </td>
     <td class="link">
       <a href="{url|urlescape}file/{symrev}/{file|urlescape}{sessionvars%urlparameter}">file</a> |
       <a href="{url|urlescape}log/{symrev}/{file|urlescape}{sessionvars%urlparameter}">revisions</a> |
       <a href="{url|urlescape}annotate/{symrev}/{file|urlescape}{sessionvars%urlparameter}">annotate</a>
     </td>
   </tr>'
 filerevision = filerevision.tmpl
 fileannotate = fileannotate.tmpl
 filediff = filediff.tmpl
 filecomparison = filecomparison.tmpl
 filelog = filelog.tmpl
 fileline = '
   <a href="#{lineid}"></a><span id="{lineid}">{strip(line|escape, '\r\n')}</span>'
 annotateline = '
   <tr id="{lineid}" style="font-family:monospace" class="parity{parity}{ifeq(node, originalnode, ' thisrev')}">
     <td class="annotate linenr parity{blockparity}" style="text-align: right;">
       {if(blockhead,
           '<a href="{url|urlescape}annotate/{node|short}/{file|urlescape}{sessionvars%urlparameter}#l{targetline}">
              {rev}
            </a>')}
       <div class="annotate-info">
         <div>
           <a href="{url|urlescape}annotate/{node|short}/{file|urlescape}{sessionvars%urlparameter}#l{targetline}">
             {node|short}</a>
           {desc|escape|firstline}
         </div>
         <div><em>{author|obfuscate}</em></div>
         <div>parents: {parents%annotateparent}</div>
         <a href="{url|urlescape}diff/{node|short}/{file|urlescape}{sessionvars%urlparameter}">diff</a>
         <a href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">changeset</a>
       </div>
     </td>
-    <td><pre><a class="linenr" href="#{lineid}">{linenumber}</a></pre></td>
+    <td class="followlines-btn-parent"><pre><a class="linenr" href="#{lineid}">{linenumber}</a></pre></td>
     <td><pre>{line|escape}</pre></td>
   </tr>'
 annotateparent = '
   <a href="{url|urlescape}annotate/{node|short}/{file|urlescape}{sessionvars%urlparameter}">{rev}</a>'
 difflineplus = '
   <a href="#{lineid}"></a><span id="{lineid}" class="difflineplus">{strip(line|escape, '\r\n')}</span>'
 difflineminus = '
   <a href="#{lineid}"></a><span id="{lineid}" class="difflineminus">{strip(line|escape, '\r\n')}</span>'
 difflineat = '
   <a href="#{lineid}"></a><span id="{lineid}" class="difflineat">{strip(line|escape, '\r\n')}</span>'
 diffline = '
   <a href="#{lineid}"></a><span id="{lineid}">{strip(line|escape, '\r\n')}</span>'
 
 comparisonblock ='
   <tbody class="block">
   {lines}
   </tbody>'
 comparisonline = '
   <tr id="{lineid}" style="font-family:monospace">
     <td class="{type}"><pre><a class="linenr" href="#{lineid}">{leftlinenumber}</a> {leftline|escape}</pre></td>
     <td class="{type}"><pre><a class="linenr" href="#{lineid}">{rightlinenumber}</a> {rightline|escape}</pre></td>
   </tr>'
 
 changesetlink = '<a class="list" href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">{node|short}</a>'
 changesetbranch = '<tr><td>branch</td><td>{name|escape}</td></tr>'
 changesetparent = '
   <tr>
     <td>parent {rev}</td>
     <td style="font-family:monospace">
       {changesetlink}
     </td>
   </tr>'
 changesetparentdiff = '
   <tr>
     <td>parent {rev}</td>
     <td style="font-family:monospace">
       {changesetlink} {ifeq(node, basenode, '(current diff)', '({difffrom})')}
     </td>
   </tr>'
 difffrom = '<a href="{url|urlescape}rev/{node|short}:{originalnode|short}{sessionvars%urlparameter}">diff</a>'
 filerevbranch = '<tr><td>branch</td><td>{name|escape}</td></tr>'
 filerevparent = '
   <tr>
     <td>parent {rev}</td>
     <td style="font-family:monospace">
       <a class="list" href="{url|urlescape}file/{node|short}/{file|urlescape}{sessionvars%urlparameter}">
         {rename%filerename}{node|short}
       </a>
     </td>
   </tr>'
 filerename = '{file|escape}@'
 filelogrename = '| <a href="{url|urlescape}file/{node|short}/{file|urlescape}{sessionvars%urlparameter}">base</a>'
 fileannotateparent = '
   <tr>
     <td>parent {rev}</td>
     <td style="font-family:monospace">
       <a class="list" href="{url|urlescape}annotate/{node|short}/{file|urlescape}{sessionvars%urlparameter}">
         {rename%filerename}{node|short}
       </a>
     </td>
   </tr>'
 changesetchild = '
   <tr>
     <td>child {rev}</td>
     <td style="font-family:monospace">
       <a class="list" href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">{node|short}</a>
     </td>
   </tr>'
 filerevchild = '
   <tr>
     <td>child {rev}</td>
     <td style="font-family:monospace">
       <a class="list" href="{url|urlescape}file/{node|short}/{file|urlescape}{sessionvars%urlparameter}">{node|short}</a></td>
     </tr>'
 fileannotatechild = '
   <tr>
     <td>child {rev}</td>
     <td style="font-family:monospace">
       <a class="list" href="{url|urlescape}annotate/{node|short}/{file|urlescape}{sessionvars%urlparameter}">{node|short}</a></td>
     </tr>'
 tags = tags.tmpl
 tagentry = '
   <tr class="parity{parity}">
     <td class="age"><i class="age">{date|rfc822date}</i></td>
     <td><a class="list" href="{url|urlescape}rev/{tag|revescape}{sessionvars%urlparameter}"><b>{tag|escape}</b></a></td>
     <td class="link">
       <a href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">changeset</a> |
       <a href="{url|urlescape}log/{node|short}{sessionvars%urlparameter}">changelog</a> |
       <a href="{url|urlescape}file/{node|short}{sessionvars%urlparameter}">files</a>
     </td>
   </tr>'
 bookmarks = bookmarks.tmpl
 bookmarkentry = '
   <tr class="parity{parity}">
     <td class="age"><i class="age">{date|rfc822date}</i></td>
     <td><a class="list" href="{url|urlescape}rev/{bookmark|revescape}{sessionvars%urlparameter}"><b>{bookmark|escape}</b></a></td>
     <td class="link">
       <a href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">changeset</a> |
       <a href="{url|urlescape}log/{node|short}{sessionvars%urlparameter}">changelog</a> |
       <a href="{url|urlescape}file/{node|short}{sessionvars%urlparameter}">files</a>
     </td>
   </tr>'
 branches = branches.tmpl
 branchentry = '
   <tr class="parity{parity}">
     <td class="age"><i class="age">{date|rfc822date}</i></td>
     <td class="{status}"><a class="list" href="{url|urlescape}shortlog/{branch|revescape}{sessionvars%urlparameter}"><b>{branch|escape}</b></a></td>
     <td class="link">
       <a href="{url|urlescape}changeset/{node|short}{sessionvars%urlparameter}">changeset</a> |
       <a href="{url|urlescape}log/{node|short}{sessionvars%urlparameter}">changelog</a> |
       <a href="{url|urlescape}file/{node|short}{sessionvars%urlparameter}">files</a>
     </td>
   </tr>'
 diffblock = '<div class="diffblock"><pre class="sourcelines">{lines}</pre></div>'
 filediffparent = '
   <tr>
     <td>parent {rev}</td>
     <td style="font-family:monospace">
       <a class="list" href="{url|urlescape}diff/{node|short}/{file|urlescape}{sessionvars%urlparameter}">
         {node|short}
       </a>
     </td>
   </tr>'
 filecompparent = '
   <tr>
     <td>parent {rev}</td>
     <td style="font-family:monospace">
       <a class="list" href="{url|urlescape}comparison/{node|short}/{file|urlescape}{sessionvars%urlparameter}">
         {node|short}
       </a>
     </td>
   </tr>'
 filediffchild = '
   <tr>
     <td>child {rev}</td>
     <td style="font-family:monospace">
       <a class="list" href="{url|urlescape}diff/{node|short}/{file|urlescape}{sessionvars%urlparameter}">{node|short}</a>
     </td>
   </tr>'
 filecompchild = '
   <tr>
     <td>child {rev}</td>
     <td style="font-family:monospace">
       <a class="list" href="{url|urlescape}comparison/{node|short}/{file|urlescape}{sessionvars%urlparameter}">{node|short}</a>
     </td>
   </tr>'
 shortlog = shortlog.tmpl
 graph = graph.tmpl
 tagtag = '<span class="tagtag" title="{name|escape}">{name|escape}</span> '
 branchtag = '<span class="branchtag" title="{name|escape}">{name|escape}</span> '
 inbranchtag = '<span class="inbranchtag" title="{name|escape}">{name|escape}</span> '
 bookmarktag = '<span class="bookmarktag" title="{name|escape}">{name|escape}</span> '
 shortlogentry = '
   <tr class="parity{parity}">
     <td class="age"><i class="age">{date|rfc822date}</i></td>
     <td><i>{author|person}</i></td>
     <td>
       <a class="list" href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">
         <b>{desc|strip|firstline|escape|nonempty}</b>
         <span class="logtags">{inbranch%inbranchtag}{branches%branchtag}{tags%tagtag}{bookmarks%bookmarktag}</span>
       </a>
     </td>
     <td class="link" nowrap>
       <a href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">changeset</a> |
       <a href="{url|urlescape}file/{node|short}{sessionvars%urlparameter}">files</a>
     </td>
   </tr>'
 filelogentry = '
   <tr class="parity{if(patch, '1', '{parity}')}">
     <td class="age"><i class="age">{date|rfc822date}</i></td>
     <td><i>{author|person}</i></td>
     <td>
       <a class="list" href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">
         <b>{desc|strip|firstline|escape|nonempty}</b>
         <span class="logtags">{inbranch%inbranchtag}{branches%branchtag}{tags%tagtag}{bookmarks%bookmarktag}</span>
       </a>
     </td>
     <td class="link">
       <a href="{url|urlescape}file/{node|short}/{file|urlescape}{sessionvars%urlparameter}">file</a> |
       <a href="{url|urlescape}diff/{node|short}/{file|urlescape}{sessionvars%urlparameter}">diff</a> |
       <a href="{url|urlescape}annotate/{node|short}/{file|urlescape}{sessionvars%urlparameter}">annotate</a>
       {rename%filelogrename}
     </td>
   </tr>
   {if(patch, '<tr><td colspan="4">{diff}</td></tr>')}'
 archiveentry = ' | <a href="{url|urlescape}archive/{symrev}{extension}{ifeq(path,'/','',path|urlescape)}">{type|escape}</a> '
 indexentry = '
   <tr class="parity{parity}">
     <td>
       <a class="list" href="{url|urlescape}{sessionvars%urlparameter}">
         <b>{name|escape}</b>
       </a>
     </td>
     <td>{description}</td>
     <td>{contact|obfuscate}</td>
     <td class="age">{lastchange|rfc822date}</td>
     <td class="indexlinks">{archives%indexarchiveentry}</td>
     <td>{if(isdirectory, '',
             '<div class="rss_logo">
                 <a href="{url|urlescape}rss-log">RSS</a> <a href="{url|urlescape}atom-log">Atom</a>
             </div>'
             )}
     </td>
   </tr>\n'
 indexarchiveentry = ' <a href="{url|urlescape}archive/{node|short}{extension}">{type|escape}</a> '
 index = index.tmpl
 urlparameter = '{separator}{name}={value|urlescape}'
 hiddenformentry = '<input type="hidden" name="{name}" value="{value|escape}" />'
 breadcrumb = '&gt; <a href="{url|urlescape}">{name|escape}</a> '
 
 searchform = '
   <div class="search">
     <form id="searchform" action="{url|urlescape}log">
       {sessionvars%hiddenformentry}
       <input name="rev" type="text" value="{query|escape}" size="40" />
       <div id="hint">{searchhint}</div>
     </form>
   </div>'
 searchhint = 'Find changesets by keywords (author, files, the commit message), revision
   number or hash, or <a href="{url|urlescape}help/revsets">revset expression</a>.'

mercurial/templates/paper/map

@@ -1,253 +1,253 b''
 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}">
       {if(basename, '{basename|escape}', '{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">
     <td class="name">
       <a href="{url|urlescape}file/{symrev}{path|urlescape}{sessionvars%urlparameter}">
         <img src="{staticurl|urlescape}coal-folder.png" alt="dir."/> {basename|escape}/
       </a>
       <a href="{url|urlescape}file/{symrev}{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">
     <td class="filename">
       <a href="{url|urlescape}file/{symrev}/{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 id="{lineid}"{ifeq(node, originalnode, ' class="thisrev"')}>
     <td class="annotate parity{blockparity}">
       {if(blockhead,
           '<a href="{url|urlescape}annotate/{node|short}/{file|urlescape}{sessionvars%urlparameter}#l{targetline}">
              {rev}
            </a>')}
       <div class="annotate-info">
         <div>
           <a href="{url|urlescape}annotate/{node|short}/{file|urlescape}{sessionvars%urlparameter}#l{targetline}">
             {node|short}</a>
           {desc|escape|firstline}
         </div>
         <div><em>{author|obfuscate}</em></div>
         <div>parents: {parents%annotateparent}</div>
         <a href="{url|urlescape}diff/{node|short}/{file|urlescape}{sessionvars%urlparameter}">diff</a>
         <a href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">changeset</a>
       </div>
     </td>
-    <td class="source"><a href="#{lineid}">{linenumber}</a> {line|escape}</td>
+    <td class="source followlines-btn-parent"><a href="#{lineid}">{linenumber}</a> {line|escape}</td>
   </tr>'
 annotateparent = '
   <a href="{url|urlescape}annotate/{node|short}/{file|urlescape}{sessionvars%urlparameter}">{rev}</a>'
 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 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>'
 
 changesetparent = '<a href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">{node|short}</a> '
 
 changesetparentdiff = '
   {changesetparent}
   {ifeq(node, basenode, '(current diff)', '({difffrom})')}'
 
 difffrom = '<a href="{url|urlescape}rev/{node|short}:{originalnode|short}{sessionvars%urlparameter}">diff</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>'
 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">
     <td>
       <a href="{url|urlescape}rev/{tag|revescape}{sessionvars%urlparameter}">
         {tag|escape}
       </a>
     </td>
     <td class="node">
       <a href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">
         {node|short}
       </a>
     </td>
   </tr>'
 bookmarks = bookmarks.tmpl
 bookmarkentry = '
   <tr class="tagEntry">
     <td>
       <a href="{url|urlescape}rev/{bookmark|revescape}{sessionvars%urlparameter}">
         {bookmark|escape}
       </a>
     </td>
     <td class="node">
       <a href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">
         {node|short}
       </a>
     </td>
   </tr>'
 branches = branches.tmpl
 branchentry = '
   <tr class="tagEntry">
     <td>
       <a href="{url|urlescape}shortlog/{branch|revescape}{sessionvars%urlparameter}" class="{status}">
         {branch|escape}
       </a>
     </td>
     <td class="node">
       <a href="{url|urlescape}shortlog/{node|short}{sessionvars%urlparameter}" class="{status}">
         {node|short}
       </a>
     </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>'
 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>'
 
 indexentry = '
   <tr>
     <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/{symrev}{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> '
 
 searchform = '
   <form class="search" action="{url|urlescape}log">
     {sessionvars%hiddenformentry}
     <p><input name="rev" id="search1" type="text" size="30" value="{query|escape}" /></p>
     <div id="hint">{searchhint}</div>
   </form>'
 searchhint = 'Find changesets by keywords (author, files, the commit message), revision
   number or hash, or <a href="{url|urlescape}help/revsets">revset expression</a>.'

mercurial/templates/static/followlines.js

@@ -1,242 +1,286 b''
 // followlines.js - JavaScript utilities for followlines UI
 //
 // Copyright 2017 Logilab SA <[e-mail]>
 //
 // This software may be used and distributed according to the terms of the
 // GNU General Public License version 2 or any later version.
 
 //** Install event listeners for line block selection and followlines action */
 document.addEventListener('DOMContentLoaded', function() {
     var sourcelines = document.getElementsByClassName('sourcelines')[0];
     if (typeof sourcelines === 'undefined') {
         return;
     }
     // URL to complement with "linerange" query parameter
     var targetUri = sourcelines.dataset.logurl;
     if (typeof targetUri === 'undefined') {
         return;
     }
 
     // Tag of children of "sourcelines" element on which to add "line
     // selection" style.
     var selectableTag = sourcelines.dataset.selectabletag;
     if (typeof selectableTag === 'undefined') {
         return;
     }
 
     var isHead = parseInt(sourcelines.dataset.ishead || "0");
 
-    // tooltip to invite on lines selection
-    var tooltip = document.createElement('div');
-    tooltip.id = 'followlines-tooltip';
-    tooltip.classList.add('hidden');
-    var initTooltipText = 'click to start following lines history from here';
-    tooltip.textContent = initTooltipText;
-    sourcelines.appendChild(tooltip);
-
     //* position "element" on top-right of cursor */
     function positionTopRight(element, event) {
         var x = (event.clientX + 10) + 'px',
             y = (event.clientY - 20) + 'px';
         element.style.top = y;
         element.style.left = x;
     }
 
-    var tooltipTimeoutID;
-    //* move the "tooltip" with cursor (top-right) and show it after 1s */
-    function moveAndShowTooltip(e) {
-        if (typeof tooltipTimeoutID !== 'undefined') {
-            // avoid accumulation of timeout callbacks (blinking)
-            window.clearTimeout(tooltipTimeoutID);
-        }
-        tooltip.classList.add('hidden');
-        positionTopRight(tooltip, e);
-        tooltipTimeoutID = window.setTimeout(function() {
-            tooltip.classList.remove('hidden');
-        }, 1000);
-    }
-
-    // on mousemove, show tooltip close to cursor position
-    sourcelines.addEventListener('mousemove', moveAndShowTooltip);
-
     // retrieve all direct *selectable* children of class="sourcelines"
     // element
     var selectableElements = Array.prototype.filter.call(
         sourcelines.children,
         function(x) { return x.tagName === selectableTag });
 
-    // add a "followlines-select" class to change cursor type in CSS
+    var btnTitleStart = 'start following lines history from here';
+    var btnTitleEnd = 'terminate line block selection here';
+
+    //** return a <button> element with +/- spans */
+    function createButton() {
+        var btn = document.createElement('button');
+        btn.title = btnTitleStart;
+        btn.classList.add('btn-followlines');
+        var plusSpan = document.createElement('span');
+        plusSpan.classList.add('followlines-plus');
+        plusSpan.textContent = '+';
+        btn.appendChild(plusSpan);
+        var br = document.createElement('br');
+        btn.appendChild(br);
+        var minusSpan = document.createElement('span');
+        minusSpan.classList.add('followlines-minus');
+        minusSpan.textContent = '−';
+        btn.appendChild(minusSpan);
+        return btn;
+    }
+
+    // extend DOM with CSS class for selection highlight and action buttons
+    var followlinesButtons = []
     for (var i = 0; i < selectableElements.length; i++) {
         selectableElements[i].classList.add('followlines-select');
+        var btn = createButton();
+        followlinesButtons.push(btn);
+        // insert the <button> as child of `selectableElements[i]` unless the
+        // latter has itself a child  with a "followlines-btn-parent" class
+        // (annotate view)
+        var btnSupportElm = selectableElements[i];
+        var childSupportElms = btnSupportElm.getElementsByClassName(
+            'followlines-btn-parent');
+        if ( childSupportElms.length > 0 ) {
+            btnSupportElm = childSupportElms[0];
+        }
+        var refNode = btnSupportElm.children[0]; // node to insert <button> before
+        btnSupportElm.insertBefore(btn, refNode);
+    }
+
+    // ** re-initialize followlines buttons */
+    function resetButtons() {
+        for (var i = 0; i < followlinesButtons.length; i++) {
+            var btn = followlinesButtons[i];
+            btn.title = btnTitleStart;
+            btn.classList.remove('btn-followlines-end');
+            btn.classList.remove('btn-followlines-hidden');
+        }
     }
 
     var lineSelectedCSSClass = 'followlines-selected';
 
     //** add CSS class on selectable elements in `from`-`to` line range */
     function addSelectedCSSClass(from, to) {
         for (var i = from; i <= to; i++) {
             selectableElements[i].classList.add(lineSelectedCSSClass);
         }
     }
 
     //** remove CSS class from previously selected lines */
     function removeSelectedCSSClass() {
         var elements = sourcelines.getElementsByClassName(
             lineSelectedCSSClass);
         while (elements.length) {
             elements[0].classList.remove(lineSelectedCSSClass);
         }
     }
 
     // ** return the element of type "selectableTag" parent of `element` */
     function selectableParent(element) {
         var parent = element.parentElement;
         if (parent === null) {
             return null;
         }
         if (element.tagName == selectableTag && parent.isSameNode(sourcelines)) {
             return element;
         }
         return selectableParent(parent);
     }
 
+    // ** update buttons title and style upon first click */
+    function updateButtons(selectable) {
+        for (var i = 0; i < followlinesButtons.length; i++) {
+            var btn = followlinesButtons[i];
+            btn.title = btnTitleEnd;
+            btn.classList.add('btn-followlines-end');
+        }
+        // on clicked button, change title to "cancel"
+        var clicked = selectable.getElementsByClassName('btn-followlines')[0];
+        clicked.title = 'cancel';
+        clicked.classList.remove('btn-followlines-end');
+    }
+
+    //** add `listener` on "click" event for all `followlinesButtons` */
+    function buttonsAddEventListener(listener) {
+        for (var i = 0; i < followlinesButtons.length; i++) {
+            followlinesButtons[i].addEventListener('click', listener);
+        }
+    }
+
+    //** remove `listener` on "click" event for all `followlinesButtons` */
+    function buttonsRemoveEventListener(listener) {
+        for (var i = 0; i < followlinesButtons.length; i++) {
+            followlinesButtons[i].removeEventListener('click', listener);
+        }
+    }
+
     //** event handler for "click" on the first line of a block */
     function lineSelectStart(e) {
-        var startElement = selectableParent(e.target);
+        var startElement = selectableParent(e.target.parentElement);
         if (startElement === null) {
             // not a "selectable" element (maybe <a>): abort, keeping event
             // listener registered for other click with a "selectable" target
             return;
         }
 
-        // update tooltip text
-        tooltip.textContent = 'click again to terminate line block selection here';
+        // update button tooltip text and CSS
+        updateButtons(startElement);
 
         var startId = parseInt(startElement.id.slice(1));
         startElement.classList.add(lineSelectedCSSClass); // CSS
 
         // remove this event listener
-        sourcelines.removeEventListener('click', lineSelectStart);
+        buttonsRemoveEventListener(lineSelectStart);
 
         //** event handler for "click" on the last line of the block */
         function lineSelectEnd(e) {
-            var endElement = selectableParent(e.target);
+            var endElement = selectableParent(e.target.parentElement);
             if (endElement === null) {
                 // not a <span> (maybe <a>): abort, keeping event listener
                 // registered for other click with <span> target
                 return;
             }
 
             // remove this event listener
-            sourcelines.removeEventListener('click', lineSelectEnd);
+            buttonsRemoveEventListener(lineSelectEnd);
 
-            // hide tooltip and disable motion tracking
-            tooltip.classList.add('hidden');
-            sourcelines.removeEventListener('mousemove', moveAndShowTooltip);
-            window.clearTimeout(tooltipTimeoutID);
-
-            //* restore initial "tooltip" state */
-            function restoreTooltip() {
-                tooltip.textContent = initTooltipText;
-                sourcelines.addEventListener('mousemove', moveAndShowTooltip);
-            }
+            // reset button tooltip text
+            resetButtons();
 
             // compute line range (startId, endId)
             var endId = parseInt(endElement.id.slice(1));
             if (endId == startId) {
                 // clicked twice the same line, cancel and reset initial state
-                // (CSS, event listener for selection start, tooltip)
+                // (CSS, event listener for selection start)
                 removeSelectedCSSClass();
-                sourcelines.addEventListener('click', lineSelectStart);
-                restoreTooltip();
+                buttonsAddEventListener(lineSelectStart);
                 return;
             }
             var inviteElement = endElement;
             if (endId < startId) {
                 var tmp = endId;
                 endId = startId;
                 startId = tmp;
                 inviteElement = startElement;
             }
 
             addSelectedCSSClass(startId - 1, endId -1);  // CSS
 
             // append the <div id="followlines"> element to last line of the
             // selection block
             var divAndButton = followlinesBox(targetUri, startId, endId, isHead);
             var div = divAndButton[0],
                 button = divAndButton[1];
             inviteElement.appendChild(div);
             // set position close to cursor (top-right)
             positionTopRight(div, e);
+            // hide all buttons
+            for (var i = 0; i < followlinesButtons.length; i++) {
+                followlinesButtons[i].classList.add('btn-followlines-hidden');
+            }
 
             //** event handler for cancelling selection */
             function cancel() {
                 // remove invite box
                 div.parentNode.removeChild(div);
                 // restore initial event listeners
-                sourcelines.addEventListener('click', lineSelectStart);
-                sourcelines.removeEventListener('click', cancel);
+                buttonsAddEventListener(lineSelectStart);
+                buttonsRemoveEventListener(cancel);
+                for (var i = 0; i < followlinesButtons.length; i++) {
+                    followlinesButtons[i].classList.remove('btn-followlines-hidden');
+                }
                 // remove styles on selected lines
                 removeSelectedCSSClass();
-                // restore tooltip element
-                restoreTooltip();
+                resetButtons();
             }
 
             // bind cancel event to click on <button>
             button.addEventListener('click', cancel);
             // as well as on an click on any source line
-            sourcelines.addEventListener('click', cancel);
+            buttonsAddEventListener(cancel);
         }
 
-        sourcelines.addEventListener('click', lineSelectEnd);
+        buttonsAddEventListener(lineSelectEnd);
 
     }
 
-    sourcelines.addEventListener('click', lineSelectStart);
+    buttonsAddEventListener(lineSelectStart);
 
     //** return a <div id="followlines"> and inner cancel <button> elements */
     function followlinesBox(targetUri, fromline, toline, isHead) {
         // <div id="followlines">
         var div = document.createElement('div');
         div.id = 'followlines';
 
         //   <div class="followlines-cancel">
         var buttonDiv = document.createElement('div');
         buttonDiv.classList.add('followlines-cancel');
 
         //     <button>x</button>
         var button = document.createElement('button');
         button.textContent = 'x';
         buttonDiv.appendChild(button);
         div.appendChild(buttonDiv);
 
         //   <div class="followlines-link">
         var aDiv = document.createElement('div');
         aDiv.classList.add('followlines-link');
         aDiv.textContent = 'follow history of lines ' + fromline + ':' + toline + ':';
         var linesep = document.createElement('br');
         aDiv.appendChild(linesep);
         //     link to "ascending" followlines
         var aAsc = document.createElement('a');
         var url = targetUri + '?patch=&linerange=' + fromline + ':' + toline;
         aAsc.setAttribute('href', url);
         aAsc.textContent = 'older';
         aDiv.appendChild(aAsc);
 
         if (!isHead) {
             var sep = document.createTextNode(' / ');
             aDiv.appendChild(sep);
             //     link to "descending" followlines
             var aDesc = document.createElement('a');
             aDesc.setAttribute('href', url + '&descend=');
             aDesc.textContent = 'newer';
             aDiv.appendChild(aDesc);
         }
 
         div.appendChild(aDiv);
 
         return [div, button];
     }
 
 }, false);

mercurial/templates/static/style-gitweb.css

@@ -1,346 +1,383 b''
 body { font-family: sans-serif; font-size: 12px; border:solid #d9d8d1; border-width:1px; margin:10px; background: white; color: black; }
 a { color:#0000cc; }
 a:hover, a:visited, a:active { color:#880000; }
 div.page_header { height:25px; padding:8px; font-size:18px; font-weight:bold; background-color:#d9d8d1; }
 div.page_header a:visited { color:#0000cc; }
 div.page_header a:hover { color:#880000; }
 div.page_nav {
     padding:8px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 div.page_nav a:visited { color:#0000cc; }
 div.extra_nav {
     padding: 8px;
 }
 div.extra_nav a:visited {
     color: #0000cc;
 }
 div.page_path { padding:8px; border:solid #d9d8d1; border-width:0px 0px 1px}
 div.page_footer { padding:4px 8px; background-color: #d9d8d1; }
 div.page_footer_text { float:left; color:#555555; font-style:italic; }
 div.page_body { padding:8px; }
 div.title, a.title {
 	display:block; padding:6px 8px;
 	font-weight:bold; background-color:#edece6; text-decoration:none; color:#000000;
 }
 a.title:hover { background-color: #d9d8d1; }
 div.title_text { padding:6px 0px; border: solid #d9d8d1; border-width:0px 0px 1px; }
 div.log_body { padding:8px 8px 8px 150px; }
 .age { white-space:nowrap; }
 span.age { position:relative; float:left; width:142px; font-style:italic; }
 div.log_link {
 	padding:0px 8px;
 	font-size:10px; font-family:sans-serif; font-style:normal;
 	position:relative; float:left; width:136px;
 }
 div.list_head { padding:6px 8px 4px; border:solid #d9d8d1; border-width:1px 0px 0px; font-style:italic; }
 a.list { text-decoration:none; color:#000000; }
 a.list:hover { text-decoration:underline; color:#880000; }
 table { padding:8px 4px; }
 th { padding:2px 5px; font-size:12px; text-align:left; }
 .parity0 { background-color:#ffffff; }
 tr.dark, .parity1, pre.sourcelines.stripes > :nth-child(4n+4) { background-color:#f6f6f0; }
 tr.light:hover, .parity0:hover, tr.dark:hover, .parity1:hover,
 pre.sourcelines.stripes > :nth-child(4n+2):hover,
 pre.sourcelines.stripes > :nth-child(4n+4):hover,
 pre.sourcelines.stripes > :nth-child(4n+1):hover + :nth-child(4n+2),
 pre.sourcelines.stripes > :nth-child(4n+3):hover + :nth-child(4n+4) { background-color:#edece6; }
 td { padding:2px 5px; font-size:12px; vertical-align:top; }
 td.closed { background-color: #99f; }
 td.link { padding:2px 5px; font-family:sans-serif; font-size:10px; }
 td.indexlinks { white-space: nowrap; }
 td.indexlinks a {
   padding: 2px 5px; line-height: 10px;
   border: 1px solid;
   color: #ffffff; background-color: #7777bb;
   border-color: #aaaadd #333366 #333366 #aaaadd;
   font-weight: bold;  text-align: center; text-decoration: none;
   font-size: 10px;
 }
 td.indexlinks a:hover { background-color: #6666aa; }
 div.pre { font-family:monospace; font-size:12px; white-space:pre; }
 div.diff_info { font-family:monospace; color:#000099; background-color:#edece6; font-style:italic; }
 div.index_include { border:solid #d9d8d1; border-width:0px 0px 1px; padding:12px 8px; }
 
 .search {
     margin-right: 8px;
 }
 
 div#hint {
   position: absolute;
   display: none;
   width: 250px;
   padding: 5px;
   background: #ffc;
   border: 1px solid yellow;
   border-radius: 5px;
 }
 
 #searchform:hover div#hint { display: block; }
 
 tr.thisrev a { color:#999999; text-decoration: none; }
 tr.thisrev pre { color:#009900; }
 td.annotate {
   white-space: nowrap;
 }
 div.annotate-info {
+  z-index: 5;
   display: none;
   position: absolute;
   background-color: #FFFFFF;
   border: 1px solid #d9d8d1;
   text-align: left;
   color: #000000;
   padding: 5px;
 }
 div.annotate-info a { color: #0000FF; text-decoration: underline; }
 td.annotate:hover div.annotate-info { display: inline; }
 .linenr { color:#999999; text-decoration:none }
 div.rss_logo { float: right; white-space: nowrap; }
 div.rss_logo a {
 	padding:3px 6px; line-height:10px;
 	border:1px solid; border-color:#fcc7a5 #7d3302 #3e1a01 #ff954e;
 	color:#ffffff; background-color:#ff6600;
 	font-weight:bold; font-family:sans-serif; font-size:10px;
 	text-align:center; text-decoration:none;
 }
 div.rss_logo a:hover { background-color:#ee5500; }
 pre { margin: 0; }
 span.logtags span {
 	padding: 0px 4px;
 	font-size: 10px;
 	font-weight: normal;
 	border: 1px solid;
 	background-color: #ffaaff;
 	border-color: #ffccff #ff00ee #ff00ee #ffccff;
 }
 span.logtags span.tagtag {
 	background-color: #ffffaa;
 	border-color: #ffffcc #ffee00 #ffee00 #ffffcc;
 }
 span.logtags span.branchtag {
 	background-color: #aaffaa;
 	border-color: #ccffcc #00cc33 #00cc33 #ccffcc;
 }
 span.logtags span.inbranchtag {
 	background-color: #d5dde6;
 	border-color: #e3ecf4 #9398f4 #9398f4 #e3ecf4;
 }
 span.logtags span.bookmarktag {
 	background-color: #afdffa;
 	border-color: #ccecff #46ace6 #46ace6 #ccecff;
 }
 span.difflineplus { color:#008800; }
 span.difflineminus { color:#cc0000; }
 span.difflineat { color:#990099; }
 div.diffblocks { counter-reset: lineno; }
 div.diffblock { counter-increment: lineno; }
 pre.sourcelines { position: relative; counter-reset: lineno; }
 pre.sourcelines > span {
 	display: inline-block;
 	box-sizing: border-box;
 	width: 100%;
 	padding: 0 0 0 5em;
 	counter-increment: lineno;
 	vertical-align: top;
 }
 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;
+	margin-left: -6em;
 	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;
 }
 tr:target td,
 pre.sourcelines > span:target,
 pre.sourcelines.stripes > span:target {
 	background-color: #bfdfff;
 }
 
 .description {
     font-family: monospace;
 }
 
 /* Followlines */
-div.page_body table tbody.sourcelines > tr.followlines-select:hover,
-div.page_body pre.sourcelines > span.followlines-select:hover {
-  cursor: cell;
-}
-
 tbody.sourcelines > tr.followlines-selected,
 pre.sourcelines > span.followlines-selected {
   background-color: #99C7E9 !important;
 }
 
 div#followlines {
   background-color: #B7B7B7;
   border: 1px solid #CCC;
   border-radius: 5px;
   padding: 4px;
   position: fixed;
 }
 
 div.followlines-cancel {
   text-align: right;
 }
 
 div.followlines-cancel > button {
   line-height: 80%;
   padding: 0;
   border: 0;
   border-radius: 2px;
   background-color: inherit;
   font-weight: bold;
 }
 
 div.followlines-cancel > button:hover {
   color: #FFFFFF;
   background-color: #CF1F1F;
 }
 
 div.followlines-link {
   margin: 2px;
   margin-top: 4px;
   font-family: sans-serif;
 }
 
-div#followlines-tooltip {
+.btn-followlines {
   display: none;
-  position: fixed;
-  background-color: #ffc;
-  border: 1px solid #999;
-  padding: 2px;
+  cursor: pointer;
+  box-sizing: content-box;
+  font-size: 11px;
+  width: 13px;
+  height: 13px;
+  border-radius: 3px;
+  margin: 0px;
+  margin-top: -2px;
+  padding: 0px;
+  background-color: #E5FDE5;
+  border: 1px solid #9BC19B;
+  font-family: monospace;
+  text-align: center;
+  line-height: 5px;
+}
+
+tr .btn-followlines {
+  position: absolute;
 }
 
-.sourcelines:hover > div#followlines-tooltip {
+span .btn-followlines {
+  float: left;
+}
+
+span.followlines-select .btn-followlines {
+  margin-left: -1.6em;
+}
+
+.btn-followlines:hover {
+  transform: scale(1.1, 1.1);
+}
+
+.btn-followlines .followlines-plus {
+  color: green;
+}
+
+.btn-followlines .followlines-minus {
+  color: red;
+}
+
+.btn-followlines-end {
+  background-color: #ffdcdc;
+}
+
+.sourcelines tr:hover .btn-followlines,
+.sourcelines span.followlines-select:hover > .btn-followlines {
   display: inline;
 }
 
-.sourcelines:hover > div#followlines-tooltip.hidden {
+.btn-followlines-hidden,
+.sourcelines tr:hover .btn-followlines-hidden {
   display: none;
 }
+
 /* Graph */
 div#wrapper {
 	position: relative;
 	margin: 0;
 	padding: 0;
 	margin-top: 3px;
 }
 
 canvas {
 	position: absolute;
 	z-index: 5;
 	top: -0.9em;
 	margin: 0;
 }
 
 ul#nodebgs {
 	list-style: none inside none;
 	padding: 0;
 	margin: 0;
 	top: -0.7em;
 }
 
 ul#graphnodes li, ul#nodebgs li {
 	height: 39px;
 }
 
 ul#graphnodes {
 	position: absolute;
 	z-index: 10;
 	top: -0.8em;
 	list-style: none inside none;
 	padding: 0;
 }
 
 ul#graphnodes li .info {
 	display: block;
 	font-size: 100%;
 	position: relative;
 	top: -3px;
 	font-style: italic;
 }
 
 /* Comparison */
 .legend {
     padding: 1.5% 0 1.5% 0;
 }
 
 .legendinfo {
     border: 1px solid #d9d8d1;
     font-size: 80%;
     text-align: center;
     padding: 0.5%;
 }
 
 .equal {
     background-color: #ffffff;
 }
 
 .delete {
     background-color: #faa;
     color: #333;
 }
 
 .insert {
     background-color: #ffa;
 }
 
 .replace {
     background-color: #e8e8e8;
 }
 
 .comparison {
     overflow-x: auto;
 }
 
 .header th {
     text-align: center;
 }
 
 .block {
     border-top: 1px solid #d9d8d1;
 }
 
 .scroll-loading {
   -webkit-animation: change_color 1s linear 0s infinite alternate;
   -moz-animation: change_color 1s linear 0s infinite alternate;
   -o-animation: change_color 1s linear 0s infinite alternate;
   animation: change_color 1s linear 0s infinite alternate;
 }
 
 @-webkit-keyframes change_color {
   from { background-color: #A0CEFF; } to {  }
 }
 @-moz-keyframes change_color {
   from { background-color: #A0CEFF; } to {  }
 }
 @-o-keyframes change_color {
   from { background-color: #A0CEFF; } to {  }
 }
 @keyframes change_color {
   from { background-color: #A0CEFF; } to {  }
 }
 
 .scroll-loading-error {
     background-color: #FFCCCC !important;
 }
 
 #doc {
     margin: 0 8px;
 }

mercurial/templates/static/style-paper.css

@@ -1,489 +1,526 b''
 body {
   margin: 0;
   padding: 0;
   background: white;
   color: black;
   font-family: sans-serif;
 }
 
 .container {
   padding-left: 115px;
 }
 
 .main {
   position: relative;
   background: white;
   padding: 2em 2em 2em 0;
 }
 
 #.main {
   width: 98%;
 }
 
 .overflow {
   width: 100%;
   overflow: auto;
 }
 
 .menu {
   width: 90px;
   margin: 0;
   font-size: 80%;
   text-align: left;
   position: absolute;
   top: 20px;
   left: 20px;
   right: auto;
 }
 
 .menu ul {
   list-style: none;
   padding: 0;
   margin: 10px 0 0 0;
   border-left: 2px solid #999;
 }
 
 .menu li {
   margin-bottom: 3px;
   padding: 2px 4px;
   background: white;
   color: black;
   font-weight: normal;
 }
 
 .menu li.active {
   font-weight: bold;
 }
 
 .menu img {
   width: 75px;
   height: 90px;
   border: 0;
 }
 
 div.atom-logo {
   margin-top: 10px;
 }
 
 .atom-logo img{
   width: 14px;
   height: 14px;
   border: 0;
 }
 
 .menu a { color: black; display: block; }
 
 .search {
   position: absolute;
   top: .7em;
   right: 2em;
 }
 
 form.search div#hint {
   display: none;
   position: absolute;
   top: 40px;
   right: 0px;
   width: 190px;
   padding: 5px;
   background: #ffc;
   font-size: 70%;
   border: 1px solid yellow;
   border-radius: 5px;
 }
 
 form.search:hover div#hint { display: block; }
 
 a { text-decoration:none; }
 .age { white-space:nowrap; }
 .date { white-space:nowrap; }
 .indexlinks { white-space:nowrap; }
 .parity0,
 .stripes4 > :nth-child(4n+1),
 .stripes2 > :nth-child(2n+1) { background-color: #f0f0f0; }
 .parity1,
 .stripes4 > :nth-child(4n+3),
 .stripes2 > :nth-child(2n+2) { background-color: white; }
 .plusline { color: green; }
 .minusline { color: #dc143c; } /* crimson */
 .atline { color: purple; }
 
 .diffstat-table {
   margin-top: 1em;
 }
 .diffstat-file {
   white-space: nowrap;
   font-size: 90%;
 }
 .diffstat-total {
   white-space: nowrap;
   font-size: 90%;
 }
 .diffstat-graph {
   width: 100%;
 }
 .diffstat-add {
   background-color: green;
   float: left;
 }
 .diffstat-remove {
   background-color: red;
   float: left;
 }
 
 .navigate {
   text-align: right;
   font-size: 60%;
   margin: 1em 0;
 }
 
 .tag {
   color: #999;
   font-size: 70%;
   font-weight: normal;
   margin-left: .5em;
   vertical-align: baseline;
 }
 
 .branchhead {
   color: #000;
   font-size: 80%;
   font-weight: normal;
   margin-left: .5em;
   vertical-align: baseline;
 }
 
 ul#graphnodes .branchhead {
   font-size: 75%;
 }
 
 .branchname {
   color: #000;
   font-size: 60%;
   font-weight: normal;
   margin-left: .5em;
   vertical-align: baseline;
 }
 
 h3 .branchname {
   font-size: 80%;
 }
 
 /* Common */
 pre { margin: 0; }
 
 h2 { font-size: 120%; border-bottom: 1px solid #999; }
 h2 a { color: #000; }
 h3 {
   margin-top: +.7em;
   font-size: 100%;
 }
 
 /* log and tags tables */
 .bigtable {
   border-bottom: 1px solid #999;
   border-collapse: collapse;
   font-size: 90%;
   width: 100%;
   font-weight: normal;
   text-align: left;
 }
 
 .bigtable td {
   vertical-align: top;
 }
 
 .bigtable th {
   padding: 1px 4px;
   border-bottom: 1px solid #999;
 }
 .bigtable tr { border: none; }
 .bigtable .age { width: 7em; }
 .bigtable .author { width: 15em; }
 .bigtable .description { }
 .bigtable .description .base { font-size: 70%; float: right; line-height: 1.66; }
 .bigtable .node { width: 5em; font-family: monospace;}
 .bigtable .permissions { width: 8em; text-align: left;}
 .bigtable .size { width: 5em; text-align: right; }
 .bigtable .annotate { text-align: right; }
 .bigtable td.annotate { font-size: smaller; }
 .bigtable td.source { font-size: inherit; }
 tr.thisrev a { color:#999999; text-decoration: none; }
 tr.thisrev td.source { color:#009900; }
 td.annotate {
   white-space: nowrap;
 }
 div.annotate-info {
+  z-index: 5;
   display: none;
   position: absolute;
   background-color: #FFFFFF;
   border: 1px solid #999;
   text-align: left;
   color: #000000;
   padding: 5px;
 }
 div.annotate-info a { color: #0000FF; }
 td.annotate:hover div.annotate-info { display: inline; }
 
 .source, .sourcefirst {
   font-family: monospace;
   white-space: pre;
   padding: 1px 4px;
   font-size: 90%;
 }
 .sourcefirst { border-bottom: 1px solid #999; font-weight: bold; }
 .source a { color: #999; font-size: smaller; font-family: monospace;}
 .bottomline { border-bottom: 1px solid #999; }
 
 .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 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;
+  margin-left: -6em;
   width: 4em;
   font-size: smaller;
   color: #999;
   text-align: right;
   content: counters(lineno, ".");
   float: left;
 }
 
 .sourcelines > span:target, tr:target td {
   background-color: #bfdfff;
 }
 
-div.overflow table tbody.sourcelines > tr.followlines-select:hover,
-div.overflow pre.sourcelines > span.followlines-select:hover {
-  cursor: cell;
-}
-
+/* Followlines */
 tbody.sourcelines > tr.followlines-selected,
 pre.sourcelines > span.followlines-selected {
   background-color: #99C7E9;
 }
 
 div#followlines {
   background-color: #B7B7B7;
   border: 1px solid #CCC;
   border-radius: 5px;
   padding: 4px;
   position: fixed;
 }
 
 div.followlines-cancel {
   text-align: right;
 }
 
 div.followlines-cancel > button {
   line-height: 80%;
   padding: 0;
   border: 0;
   border-radius: 2px;
   background-color: inherit;
   font-weight: bold;
 }
 
 div.followlines-cancel > button:hover {
   color: #FFFFFF;
   background-color: #CF1F1F;
 }
 
 div.followlines-link {
   margin: 2px;
   margin-top: 4px;
   font-family: sans-serif;
 }
 
-div#followlines-tooltip {
+.btn-followlines {
   display: none;
-  position: fixed;
-  background-color: #ffc;
-  border: 1px solid #999;
-  padding: 2px;
+  cursor: pointer;
+  box-sizing: content-box;
+  font-size: 12px;
+  width: 13px;
+  height: 13px;
+  border-radius: 3px;
+  margin: 0px;
+  margin-top: -2px;
+  padding: 0px;
+  background-color: #E5FDE5;
+  border: 1px solid #9BC19B;
+  font-family: monospace;
+  text-align: center;
+  line-height: 5px;
+}
+
+tr .btn-followlines {
+  position: absolute;
 }
 
-.sourcelines:hover > div#followlines-tooltip {
+span .btn-followlines {
+  float: left;
+}
+
+span.followlines-select .btn-followlines {
+  margin-left: -1.5em;
+}
+
+.btn-followlines:hover {
+  transform: scale(1.2, 1.2);
+}
+
+.btn-followlines .followlines-plus {
+  color: green;
+}
+
+.btn-followlines .followlines-minus {
+  color: red;
+}
+
+.btn-followlines-end {
+  background-color: #ffdcdc;
+}
+
+.sourcelines tr:hover .btn-followlines,
+.sourcelines span.followlines-select:hover > .btn-followlines {
   display: inline;
 }
 
-.sourcelines:hover > div#followlines-tooltip.hidden {
+.btn-followlines-hidden,
+.sourcelines tr:hover .btn-followlines-hidden {
   display: none;
 }
 
 .sourcelines > a {
     display: inline-block;
     position: absolute;
     left: 0px;
     width: 4em;
     height: 1em;
 }
 
 .fileline { font-family: monospace; }
 .fileline img { border: 0; }
 
 .tagEntry .closed { color: #99f; }
 
 /* Changeset entry */
 #changesetEntry {
   border-collapse: collapse;
   font-size: 90%;
   width: 100%;
   margin-bottom: 1em;
 }
 
 #changesetEntry th {
   padding: 1px 4px;
   width: 4em;
   text-align: right;
   font-weight: normal;
   color: #999;
   margin-right: .5em;
   vertical-align: top;
 }
 
 div.description {
   border-left: 2px solid #999;
   margin: 1em 0 1em 0;
   padding: .3em;
   white-space: pre;
   font-family: monospace;
 }
 
 /* Graph */
 div#wrapper {
 	position: relative;
 	border-top: 1px solid black;
 	border-bottom: 1px solid black;
 	margin: 0;
 	padding: 0;
 }
 
 canvas {
 	position: absolute;
 	z-index: 5;
 	top: -0.7em;
 	margin: 0;
 }
 
 ul#graphnodes {
 	position: absolute;
 	z-index: 10;
 	top: -1.0em;
 	list-style: none inside none;
 	padding: 0;
 }
 
 ul#nodebgs {
 	list-style: none inside none;
 	padding: 0;
 	margin: 0;
 	top: -0.7em;
 }
 
 ul#graphnodes li, ul#nodebgs li {
 	height: 39px;
 }
 
 ul#graphnodes li .info {
 	display: block;
 	font-size: 70%;
 	position: relative;
 	top: -3px;
 }
 
 /* Comparison */
 .legend {
     padding: 1.5% 0 1.5% 0;
 }
 
 .legendinfo {
     border: 1px solid #999;
     font-size: 80%;
     text-align: center;
     padding: 0.5%;
 }
 
 .equal {
     background-color: #ffffff;
 }
 
 .delete {
     background-color: #faa;
     color: #333;
 }
 
 .insert {
     background-color: #ffa;
 }
 
 .replace {
     background-color: #e8e8e8;
 }
 
 .header {
     text-align: center;
 }
 
 .block {
     border-top: 1px solid #999;
 }
 
 .breadcrumb {
     color: gray;
 }
 
 .breadcrumb a {
     color: blue;
 }
 
 .scroll-loading {
   -webkit-animation: change_color 1s linear 0s infinite alternate;
   -moz-animation: change_color 1s linear 0s infinite alternate;
   -o-animation: change_color 1s linear 0s infinite alternate;
   animation: change_color 1s linear 0s infinite alternate;
 }
 
 @-webkit-keyframes change_color {
   from { background-color: #A0CEFF; } to {  }
 }
 @-moz-keyframes change_color {
   from { background-color: #A0CEFF; } to {  }
 }
 @-o-keyframes change_color {
   from { background-color: #A0CEFF; } to {  }
 }
 @keyframes change_color {
   from { background-color: #A0CEFF; } to {  }
 }
 
 .scroll-loading-error {
     background-color: #FFCCCC !important;
 }

tests/test-hgweb.t

@@ -1,836 +1,873 b''
 #require serve
 
 Some tests for hgweb. Tests static files, plain files and different 404's.
 
   $ hg init test
   $ cd test
   $ mkdir da
   $ echo foo > da/foo
   $ echo foo > foo
   $ hg ci -Ambase
   adding da/foo
   adding foo
   $ hg bookmark -r0 '@'
   $ hg bookmark -r0 'a b c'
   $ hg bookmark -r0 'd/e/f'
   $ hg serve -n test -p $HGPORT -d --pid-file=hg.pid -A access.log -E errors.log
   $ cat hg.pid >> $DAEMON_PIDS
 
 manifest
 
   $ (get-with-headers.py localhost:$HGPORT 'file/tip/?style=raw')
   200 Script output follows
   
   
   drwxr-xr-x da
   -rw-r--r-- 4 foo
   
   
   $ (get-with-headers.py localhost:$HGPORT 'file/tip/da?style=raw')
   200 Script output follows
   
   
   -rw-r--r-- 4 foo
   
   
 
 plain file
 
   $ get-with-headers.py localhost:$HGPORT 'file/tip/foo?style=raw'
   200 Script output follows
   
   foo
 
 should give a 404 - static file that does not exist
 
   $ get-with-headers.py localhost:$HGPORT 'static/bogus'
   404 Not Found
   
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
   <head>
   <link rel="icon" href="/static/hgicon.png" type="image/png" />
   <meta name="robots" content="index, nofollow" />
   <link rel="stylesheet" href="/static/style-paper.css" type="text/css" />
   <script type="text/javascript" src="/static/mercurial.js"></script>
   
   <title>test: error</title>
   </head>
   <body>
   
   <div class="container">
   <div class="menu">
   <div class="logo">
   <a href="https://mercurial-scm.org/">
   <img src="/static/hglogo.png" width=75 height=90 border=0 alt="mercurial" /></a>
   </div>
   <ul>
   <li><a href="/shortlog">log</a></li>
   <li><a href="/graph">graph</a></li>
   <li><a href="/tags">tags</a></li>
   <li><a href="/bookmarks">bookmarks</a></li>
   <li><a href="/branches">branches</a></li>
   </ul>
   <ul>
   <li><a href="/help">help</a></li>
   </ul>
   </div>
   
   <div class="main">
   
   <h2 class="breadcrumb"><a href="/">Mercurial</a> </h2>
   <h3>error</h3>
   
   
   <form class="search" action="/log">
   
   <p><input name="rev" id="search1" type="text" size="30" value="" /></p>
   <div id="hint">Find changesets by keywords (author, files, the commit message), revision
   number or hash, or <a href="/help/revsets">revset expression</a>.</div>
   </form>
   
   <div class="description">
   <p>
   An error occurred while processing your request:
   </p>
   <p>
   Not Found
   </p>
   </div>
   </div>
   </div>
   
   
   
   </body>
   </html>
   
   [1]
 
 should give a 404 - bad revision
 
   $ get-with-headers.py localhost:$HGPORT 'file/spam/foo?style=raw'
   404 Not Found
   
   
   error: revision not found: spam
   [1]
 
 should give a 400 - bad command
 
   $ get-with-headers.py localhost:$HGPORT 'file/tip/foo?cmd=spam&style=raw'
   400* (glob)
   
   
   error: no such method: spam
   [1]
 
   $ get-with-headers.py --headeronly localhost:$HGPORT '?cmd=spam'
   400 no such method: spam
   [1]
 
 should give a 400 - bad command as a part of url path (issue4071)
 
   $ get-with-headers.py --headeronly localhost:$HGPORT 'spam'
   400 no such method: spam
   [1]
 
   $ get-with-headers.py --headeronly localhost:$HGPORT 'raw-spam'
   400 no such method: spam
   [1]
 
   $ get-with-headers.py --headeronly localhost:$HGPORT 'spam/tip/foo'
   400 no such method: spam
   [1]
 
 should give a 404 - file does not exist
 
   $ get-with-headers.py localhost:$HGPORT 'file/tip/bork?style=raw'
   404 Not Found
   
   
   error: bork@2ef0ac749a14: not found in manifest
   [1]
   $ get-with-headers.py localhost:$HGPORT 'file/tip/bork'
   404 Not Found
   
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
   <head>
   <link rel="icon" href="/static/hgicon.png" type="image/png" />
   <meta name="robots" content="index, nofollow" />
   <link rel="stylesheet" href="/static/style-paper.css" type="text/css" />
   <script type="text/javascript" src="/static/mercurial.js"></script>
   
   <title>test: error</title>
   </head>
   <body>
   
   <div class="container">
   <div class="menu">
   <div class="logo">
   <a href="https://mercurial-scm.org/">
   <img src="/static/hglogo.png" width=75 height=90 border=0 alt="mercurial" /></a>
   </div>
   <ul>
   <li><a href="/shortlog">log</a></li>
   <li><a href="/graph">graph</a></li>
   <li><a href="/tags">tags</a></li>
   <li><a href="/bookmarks">bookmarks</a></li>
   <li><a href="/branches">branches</a></li>
   </ul>
   <ul>
   <li><a href="/help">help</a></li>
   </ul>
   </div>
   
   <div class="main">
   
   <h2 class="breadcrumb"><a href="/">Mercurial</a> </h2>
   <h3>error</h3>
   
   
   <form class="search" action="/log">
   
   <p><input name="rev" id="search1" type="text" size="30" value="" /></p>
   <div id="hint">Find changesets by keywords (author, files, the commit message), revision
   number or hash, or <a href="/help/revsets">revset expression</a>.</div>
   </form>
   
   <div class="description">
   <p>
   An error occurred while processing your request:
   </p>
   <p>
   bork@2ef0ac749a14: not found in manifest
   </p>
   </div>
   </div>
   </div>
   
   
   
   </body>
   </html>
   
   [1]
   $ get-with-headers.py localhost:$HGPORT 'diff/tip/bork?style=raw'
   404 Not Found
   
   
   error: bork@2ef0ac749a14: not found in manifest
   [1]
 
 try bad style
 
   $ (get-with-headers.py localhost:$HGPORT 'file/tip/?style=foobar')
   200 Script output follows
   
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
   <head>
   <link rel="icon" href="/static/hgicon.png" type="image/png" />
   <meta name="robots" content="index, nofollow" />
   <link rel="stylesheet" href="/static/style-paper.css" type="text/css" />
   <script type="text/javascript" src="/static/mercurial.js"></script>
   
   <title>test: 2ef0ac749a14 /</title>
   </head>
   <body>
   
   <div class="container">
   <div class="menu">
   <div class="logo">
   <a href="https://mercurial-scm.org/">
   <img src="/static/hglogo.png" alt="mercurial" /></a>
   </div>
   <ul>
   <li><a href="/shortlog/tip">log</a></li>
   <li><a href="/graph/tip">graph</a></li>
   <li><a href="/tags">tags</a></li>
   <li><a href="/bookmarks">bookmarks</a></li>
   <li><a href="/branches">branches</a></li>
   </ul>
   <ul>
   <li><a href="/rev/tip">changeset</a></li>
   <li class="active">browse</li>
   </ul>
   <ul>
   
   </ul>
   <ul>
    <li><a href="/help">help</a></li>
   </ul>
   </div>
   
   <div class="main">
   <h2 class="breadcrumb"><a href="/">Mercurial</a> </h2>
   <h3>
    directory / @ 0:<a href="/rev/2ef0ac749a14">2ef0ac749a14</a>
    <span class="tag">tip</span> <span class="tag">@</span> <span class="tag">a b c</span> <span class="tag">d/e/f</span> 
   </h3>
   
   
   <form class="search" action="/log">
   
   <p><input name="rev" id="search1" type="text" size="30" value="" /></p>
   <div id="hint">Find changesets by keywords (author, files, the commit message), revision
   number or hash, or <a href="/help/revsets">revset expression</a>.</div>
   </form>
   
   <table class="bigtable">
   <thead>
   <tr>
     <th class="name">name</th>
     <th class="size">size</th>
     <th class="permissions">permissions</th>
   </tr>
   </thead>
   <tbody class="stripes2">
   <tr class="fileline">
     <td class="name"><a href="/file/tip/">[up]</a></td>
     <td class="size"></td>
     <td class="permissions">drwxr-xr-x</td>
   </tr>
   
   <tr class="fileline">
   <td class="name">
   <a href="/file/tip/da">
   <img src="/static/coal-folder.png" alt="dir."/> da/
   </a>
   <a href="/file/tip/da/">
   
   </a>
   </td>
   <td class="size"></td>
   <td class="permissions">drwxr-xr-x</td>
   </tr>
   
   <tr class="fileline">
   <td class="filename">
   <a href="/file/tip/foo">
   <img src="/static/coal-file.png" alt="file"/> foo
   </a>
   </td>
   <td class="size">4</td>
   <td class="permissions">-rw-r--r--</td>
   </tr>
   </tbody>
   </table>
   </div>
   </div>
   
   
   </body>
   </html>
   
 
 stop and restart
 
   $ killdaemons.py
   $ hg serve -p $HGPORT -d --pid-file=hg.pid -A access.log
   $ cat hg.pid >> $DAEMON_PIDS
 
 Test the access/error files are opened in append mode
 
   $ $PYTHON -c "print len(file('access.log').readlines()), 'log lines written'"
   14 log lines written
 
 static file
 
   $ get-with-headers.py --twice localhost:$HGPORT 'static/style-gitweb.css' - date etag server
   200 Script output follows
-  content-length: 8463
+  content-length: 8985
   content-type: text/css
   
   body { font-family: sans-serif; font-size: 12px; border:solid #d9d8d1; border-width:1px; margin:10px; background: white; color: black; }
   a { color:#0000cc; }
   a:hover, a:visited, a:active { color:#880000; }
   div.page_header { height:25px; padding:8px; font-size:18px; font-weight:bold; background-color:#d9d8d1; }
   div.page_header a:visited { color:#0000cc; }
   div.page_header a:hover { color:#880000; }
   div.page_nav {
       padding:8px;
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   div.page_nav a:visited { color:#0000cc; }
   div.extra_nav {
       padding: 8px;
   }
   div.extra_nav a:visited {
       color: #0000cc;
   }
   div.page_path { padding:8px; border:solid #d9d8d1; border-width:0px 0px 1px}
   div.page_footer { padding:4px 8px; background-color: #d9d8d1; }
   div.page_footer_text { float:left; color:#555555; font-style:italic; }
   div.page_body { padding:8px; }
   div.title, a.title {
   	display:block; padding:6px 8px;
   	font-weight:bold; background-color:#edece6; text-decoration:none; color:#000000;
   }
   a.title:hover { background-color: #d9d8d1; }
   div.title_text { padding:6px 0px; border: solid #d9d8d1; border-width:0px 0px 1px; }
   div.log_body { padding:8px 8px 8px 150px; }
   .age { white-space:nowrap; }
   span.age { position:relative; float:left; width:142px; font-style:italic; }
   div.log_link {
   	padding:0px 8px;
   	font-size:10px; font-family:sans-serif; font-style:normal;
   	position:relative; float:left; width:136px;
   }
   div.list_head { padding:6px 8px 4px; border:solid #d9d8d1; border-width:1px 0px 0px; font-style:italic; }
   a.list { text-decoration:none; color:#000000; }
   a.list:hover { text-decoration:underline; color:#880000; }
   table { padding:8px 4px; }
   th { padding:2px 5px; font-size:12px; text-align:left; }
   .parity0 { background-color:#ffffff; }
   tr.dark, .parity1, pre.sourcelines.stripes > :nth-child(4n+4) { background-color:#f6f6f0; }
   tr.light:hover, .parity0:hover, tr.dark:hover, .parity1:hover,
   pre.sourcelines.stripes > :nth-child(4n+2):hover,
   pre.sourcelines.stripes > :nth-child(4n+4):hover,
   pre.sourcelines.stripes > :nth-child(4n+1):hover + :nth-child(4n+2),
   pre.sourcelines.stripes > :nth-child(4n+3):hover + :nth-child(4n+4) { background-color:#edece6; }
   td { padding:2px 5px; font-size:12px; vertical-align:top; }
   td.closed { background-color: #99f; }
   td.link { padding:2px 5px; font-family:sans-serif; font-size:10px; }
   td.indexlinks { white-space: nowrap; }
   td.indexlinks a {
     padding: 2px 5px; line-height: 10px;
     border: 1px solid;
     color: #ffffff; background-color: #7777bb;
     border-color: #aaaadd #333366 #333366 #aaaadd;
     font-weight: bold;  text-align: center; text-decoration: none;
     font-size: 10px;
   }
   td.indexlinks a:hover { background-color: #6666aa; }
   div.pre { font-family:monospace; font-size:12px; white-space:pre; }
   div.diff_info { font-family:monospace; color:#000099; background-color:#edece6; font-style:italic; }
   div.index_include { border:solid #d9d8d1; border-width:0px 0px 1px; padding:12px 8px; }
   
   .search {
       margin-right: 8px;
   }
   
   div#hint {
     position: absolute;
     display: none;
     width: 250px;
     padding: 5px;
     background: #ffc;
     border: 1px solid yellow;
     border-radius: 5px;
   }
   
   #searchform:hover div#hint { display: block; }
   
   tr.thisrev a { color:#999999; text-decoration: none; }
   tr.thisrev pre { color:#009900; }
   td.annotate {
     white-space: nowrap;
   }
   div.annotate-info {
+    z-index: 5;
     display: none;
     position: absolute;
     background-color: #FFFFFF;
     border: 1px solid #d9d8d1;
     text-align: left;
     color: #000000;
     padding: 5px;
   }
   div.annotate-info a { color: #0000FF; text-decoration: underline; }
   td.annotate:hover div.annotate-info { display: inline; }
   .linenr { color:#999999; text-decoration:none }
   div.rss_logo { float: right; white-space: nowrap; }
   div.rss_logo a {
   	padding:3px 6px; line-height:10px;
   	border:1px solid; border-color:#fcc7a5 #7d3302 #3e1a01 #ff954e;
   	color:#ffffff; background-color:#ff6600;
   	font-weight:bold; font-family:sans-serif; font-size:10px;
   	text-align:center; text-decoration:none;
   }
   div.rss_logo a:hover { background-color:#ee5500; }
   pre { margin: 0; }
   span.logtags span {
   	padding: 0px 4px;
   	font-size: 10px;
   	font-weight: normal;
   	border: 1px solid;
   	background-color: #ffaaff;
   	border-color: #ffccff #ff00ee #ff00ee #ffccff;
   }
   span.logtags span.tagtag {
   	background-color: #ffffaa;
   	border-color: #ffffcc #ffee00 #ffee00 #ffffcc;
   }
   span.logtags span.branchtag {
   	background-color: #aaffaa;
   	border-color: #ccffcc #00cc33 #00cc33 #ccffcc;
   }
   span.logtags span.inbranchtag {
   	background-color: #d5dde6;
   	border-color: #e3ecf4 #9398f4 #9398f4 #e3ecf4;
   }
   span.logtags span.bookmarktag {
   	background-color: #afdffa;
   	border-color: #ccecff #46ace6 #46ace6 #ccecff;
   }
   span.difflineplus { color:#008800; }
   span.difflineminus { color:#cc0000; }
   span.difflineat { color:#990099; }
   div.diffblocks { counter-reset: lineno; }
   div.diffblock { counter-increment: lineno; }
   pre.sourcelines { position: relative; counter-reset: lineno; }
   pre.sourcelines > span {
   	display: inline-block;
   	box-sizing: border-box;
   	width: 100%;
   	padding: 0 0 0 5em;
   	counter-increment: lineno;
   	vertical-align: top;
   }
   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;
+  	margin-left: -6em;
   	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;
   }
   tr:target td,
   pre.sourcelines > span:target,
   pre.sourcelines.stripes > span:target {
   	background-color: #bfdfff;
   }
   
   .description {
       font-family: monospace;
   }
   
   /* Followlines */
-  div.page_body table tbody.sourcelines > tr.followlines-select:hover,
-  div.page_body pre.sourcelines > span.followlines-select:hover {
-    cursor: cell;
-  }
-  
   tbody.sourcelines > tr.followlines-selected,
   pre.sourcelines > span.followlines-selected {
     background-color: #99C7E9 !important;
   }
   
   div#followlines {
     background-color: #B7B7B7;
     border: 1px solid #CCC;
     border-radius: 5px;
     padding: 4px;
     position: fixed;
   }
   
   div.followlines-cancel {
     text-align: right;
   }
   
   div.followlines-cancel > button {
     line-height: 80%;
     padding: 0;
     border: 0;
     border-radius: 2px;
     background-color: inherit;
     font-weight: bold;
   }
   
   div.followlines-cancel > button:hover {
     color: #FFFFFF;
     background-color: #CF1F1F;
   }
   
   div.followlines-link {
     margin: 2px;
     margin-top: 4px;
     font-family: sans-serif;
   }
   
-  div#followlines-tooltip {
+  .btn-followlines {
     display: none;
-    position: fixed;
-    background-color: #ffc;
-    border: 1px solid #999;
-    padding: 2px;
+    cursor: pointer;
+    box-sizing: content-box;
+    font-size: 11px;
+    width: 13px;
+    height: 13px;
+    border-radius: 3px;
+    margin: 0px;
+    margin-top: -2px;
+    padding: 0px;
+    background-color: #E5FDE5;
+    border: 1px solid #9BC19B;
+    font-family: monospace;
+    text-align: center;
+    line-height: 5px;
+  }
+  
+  tr .btn-followlines {
+    position: absolute;
   }
   
-  .sourcelines:hover > div#followlines-tooltip {
+  span .btn-followlines {
+    float: left;
+  }
+  
+  span.followlines-select .btn-followlines {
+    margin-left: -1.6em;
+  }
+  
+  .btn-followlines:hover {
+    transform: scale(1.1, 1.1);
+  }
+  
+  .btn-followlines .followlines-plus {
+    color: green;
+  }
+  
+  .btn-followlines .followlines-minus {
+    color: red;
+  }
+  
+  .btn-followlines-end {
+    background-color: #ffdcdc;
+  }
+  
+  .sourcelines tr:hover .btn-followlines,
+  .sourcelines span.followlines-select:hover > .btn-followlines {
     display: inline;
   }
   
-  .sourcelines:hover > div#followlines-tooltip.hidden {
+  .btn-followlines-hidden,
+  .sourcelines tr:hover .btn-followlines-hidden {
     display: none;
   }
+  
   /* Graph */
   div#wrapper {
   	position: relative;
   	margin: 0;
   	padding: 0;
   	margin-top: 3px;
   }
   
   canvas {
   	position: absolute;
   	z-index: 5;
   	top: -0.9em;
   	margin: 0;
   }
   
   ul#nodebgs {
   	list-style: none inside none;
   	padding: 0;
   	margin: 0;
   	top: -0.7em;
   }
   
   ul#graphnodes li, ul#nodebgs li {
   	height: 39px;
   }
   
   ul#graphnodes {
   	position: absolute;
   	z-index: 10;
   	top: -0.8em;
   	list-style: none inside none;
   	padding: 0;
   }
   
   ul#graphnodes li .info {
   	display: block;
   	font-size: 100%;
   	position: relative;
   	top: -3px;
   	font-style: italic;
   }
   
   /* Comparison */
   .legend {
       padding: 1.5% 0 1.5% 0;
   }
   
   .legendinfo {
       border: 1px solid #d9d8d1;
       font-size: 80%;
       text-align: center;
       padding: 0.5%;
   }
   
   .equal {
       background-color: #ffffff;
   }
   
   .delete {
       background-color: #faa;
       color: #333;
   }
   
   .insert {
       background-color: #ffa;
   }
   
   .replace {
       background-color: #e8e8e8;
   }
   
   .comparison {
       overflow-x: auto;
   }
   
   .header th {
       text-align: center;
   }
   
   .block {
       border-top: 1px solid #d9d8d1;
   }
   
   .scroll-loading {
     -webkit-animation: change_color 1s linear 0s infinite alternate;
     -moz-animation: change_color 1s linear 0s infinite alternate;
     -o-animation: change_color 1s linear 0s infinite alternate;
     animation: change_color 1s linear 0s infinite alternate;
   }
   
   @-webkit-keyframes change_color {
     from { background-color: #A0CEFF; } to {  }
   }
   @-moz-keyframes change_color {
     from { background-color: #A0CEFF; } to {  }
   }
   @-o-keyframes change_color {
     from { background-color: #A0CEFF; } to {  }
   }
   @keyframes change_color {
     from { background-color: #A0CEFF; } to {  }
   }
   
   .scroll-loading-error {
       background-color: #FFCCCC !important;
   }
   
   #doc {
       margin: 0 8px;
   }
   304 Not Modified
   
 
 phase changes are refreshed (issue4061)
 
   $ echo bar >> foo
   $ hg ci -msecret --secret
   $ get-with-headers.py localhost:$HGPORT 'log?style=raw'
   200 Script output follows
   
   
   # HG changelog
   # Node ID 2ef0ac749a14e4f57a5a822464a0902c6f7f448f
   
   changeset:   2ef0ac749a14e4f57a5a822464a0902c6f7f448f
   revision:    0
   user:        test
   date:        Thu, 01 Jan 1970 00:00:00 +0000
   summary:     base
   branch:      default
   tag:         tip
   bookmark:    @
   bookmark:    a b c
   bookmark:    d/e/f
   
   
   $ hg phase --draft tip
   $ get-with-headers.py localhost:$HGPORT 'log?style=raw'
   200 Script output follows
   
   
   # HG changelog
   # Node ID a084749e708a9c4c0a5b652a2a446322ce290e04
   
   changeset:   a084749e708a9c4c0a5b652a2a446322ce290e04
   revision:    1
   user:        test
   date:        Thu, 01 Jan 1970 00:00:00 +0000
   summary:     secret
   branch:      default
   tag:         tip
   
   changeset:   2ef0ac749a14e4f57a5a822464a0902c6f7f448f
   revision:    0
   user:        test
   date:        Thu, 01 Jan 1970 00:00:00 +0000
   summary:     base
   bookmark:    @
   bookmark:    a b c
   bookmark:    d/e/f
   
   
 
 access bookmarks
 
   $ get-with-headers.py localhost:$HGPORT 'rev/@?style=paper' | egrep '^200|changeset 0:'
   200 Script output follows
    changeset 0:<a href="/rev/2ef0ac749a14?style=paper">2ef0ac749a14</a>
 
   $ get-with-headers.py localhost:$HGPORT 'rev/%40?style=paper' | egrep '^200|changeset 0:'
   200 Script output follows
    changeset 0:<a href="/rev/2ef0ac749a14?style=paper">2ef0ac749a14</a>
 
   $ get-with-headers.py localhost:$HGPORT 'rev/a%20b%20c?style=paper' | egrep '^200|changeset 0:'
   200 Script output follows
    changeset 0:<a href="/rev/2ef0ac749a14?style=paper">2ef0ac749a14</a>
 
   $ get-with-headers.py localhost:$HGPORT 'rev/d%252Fe%252Ff?style=paper' | egrep '^200|changeset 0:'
   200 Script output follows
    changeset 0:<a href="/rev/2ef0ac749a14?style=paper">2ef0ac749a14</a>
 
 no style can be loaded from directories other than the specified paths
 
   $ mkdir -p x/templates/fallback
   $ cat <<EOF > x/templates/fallback/map
   > default = 'shortlog'
   > shortlog = 'fall back to default\n'
   > mimetype = 'text/plain'
   > EOF
   $ cat <<EOF > x/map
   > default = 'shortlog'
   > shortlog = 'access to outside of templates directory\n'
   > mimetype = 'text/plain'
   > EOF
 
   $ killdaemons.py
   $ hg serve -p $HGPORT -d --pid-file=hg.pid -A access.log -E errors.log \
   > --config web.style=fallback --config web.templates=x/templates
   $ cat hg.pid >> $DAEMON_PIDS
 
   $ get-with-headers.py localhost:$HGPORT "?style=`pwd`/x"
   200 Script output follows
   
   fall back to default
 
   $ get-with-headers.py localhost:$HGPORT '?style=..'
   200 Script output follows
   
   fall back to default
 
   $ get-with-headers.py localhost:$HGPORT '?style=./..'
   200 Script output follows
   
   fall back to default
 
   $ get-with-headers.py localhost:$HGPORT '?style=.../.../'
   200 Script output follows
   
   fall back to default
 
 errors
 
   $ cat errors.log
 
 Uncaught exceptions result in a logged error and canned HTTP response
 
   $ killdaemons.py
   $ hg serve --config extensions.hgweberror=$TESTDIR/hgweberror.py -p $HGPORT -d --pid-file=hg.pid -A access.log -E errors.log
   $ cat hg.pid >> $DAEMON_PIDS
 
   $ get-with-headers.py localhost:$HGPORT 'raiseerror' transfer-encoding content-type
   500 Internal Server Error
   transfer-encoding: chunked
   
   Internal Server Error (no-eol)
   [1]
 
   $ killdaemons.py
   $ head -1 errors.log
   .* Exception happened during processing request '/raiseerror': (re)
 
 Uncaught exception after partial content sent
 
   $ hg serve --config extensions.hgweberror=$TESTDIR/hgweberror.py -p $HGPORT -d --pid-file=hg.pid -A access.log -E errors.log
   $ cat hg.pid >> $DAEMON_PIDS
   $ get-with-headers.py localhost:$HGPORT 'raiseerror?partialresponse=1' transfer-encoding content-type
   200 Script output follows
   transfer-encoding: chunked
   content-type: text/plain
   
   partial content
   Internal Server Error (no-eol)
 
   $ killdaemons.py
   $ cd ..

tests/test-highlight.t

@@ -1,998 +1,998 b''
 #require pygments serve
 
   $ cat <<EOF >> $HGRCPATH
   > [extensions]
   > highlight =
   > [web]
   > pygments_style = friendly
   > highlightfiles = **.py and size('<100KB')
   > EOF
   $ hg init test
   $ cd test
 
   $ filterhtml () {
   >   sed -e "s/class=\"k\"/class=\"kn\"/g" \
   >       -e "s/class=\"mf\"/class=\"mi\"/g" \
   >       -e "s/class=\"vm\"/class=\"n\"/g" \
   >       -e "s/class=\"\([cs]\)[h12]\"/class=\"\1\"/g"
   > }
 
 create random Python file to exercise Pygments
 
   $ cat <<EOF > primes.py
   > """Fun with generators. Corresponding Haskell implementation:
   > 
   > primes = 2 : sieve [3, 5..]
   >     where sieve (p:ns) = p : sieve [n | n <- ns, mod n p /= 0]
   > """
   > 
   > from itertools import dropwhile, ifilter, islice, count, chain
   > 
   > def primes():
   >     """Generate all primes."""
   >     def sieve(ns):
   >         p = ns.next()
   >         # It is important to yield *here* in order to stop the
   >         # infinite recursion.
   >         yield p
   >         ns = ifilter(lambda n: n % p != 0, ns)
   >         for n in sieve(ns):
   >             yield n
   > 
   >     odds = ifilter(lambda i: i % 2 == 1, count())
   >     return chain([2], sieve(dropwhile(lambda n: n < 3, odds)))
   > 
   > if __name__ == "__main__":
   >     import sys
   >     try:
   >         n = int(sys.argv[1])
   >     except (ValueError, IndexError):
   >         n = 10
   >     p = primes()
   >     print "The first %d primes: %s" % (n, list(islice(p, n)))
   > EOF
   $ echo >> primes.py  # to test html markup with an empty line just before EOF
   $ hg ci -Ama
   adding primes.py
 
 hg serve
 
   $ hg serve -p $HGPORT -d -n test --pid-file=hg.pid -A access.log -E errors.log
   $ cat hg.pid >> $DAEMON_PIDS
 
 hgweb filerevision, html
 
   $ (get-with-headers.py localhost:$HGPORT 'file/tip/primes.py') | filterhtml
   200 Script output follows
   
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
   <head>
   <link rel="icon" href="/static/hgicon.png" type="image/png" />
   <meta name="robots" content="index, nofollow" />
   <link rel="stylesheet" href="/static/style-paper.css" type="text/css" />
   <script type="text/javascript" src="/static/mercurial.js"></script>
   
   <link rel="stylesheet" href="/highlightcss" type="text/css" />
   <title>test: 1af356141006 primes.py</title>
   </head>
   <body>
   
   <div class="container">
   <div class="menu">
   <div class="logo">
   <a href="https://mercurial-scm.org/">
   <img src="/static/hglogo.png" alt="mercurial" /></a>
   </div>
   <ul>
   <li><a href="/shortlog/tip">log</a></li>
   <li><a href="/graph/tip">graph</a></li>
   <li><a href="/tags">tags</a></li>
   <li><a href="/bookmarks">bookmarks</a></li>
   <li><a href="/branches">branches</a></li>
   </ul>
   <ul>
   <li><a href="/rev/tip">changeset</a></li>
   <li><a href="/file/tip/">browse</a></li>
   </ul>
   <ul>
   <li class="active">file</li>
   <li><a href="/file/tip/primes.py">latest</a></li>
   <li><a href="/diff/tip/primes.py">diff</a></li>
   <li><a href="/comparison/tip/primes.py">comparison</a></li>
   <li><a href="/annotate/tip/primes.py">annotate</a></li>
   <li><a href="/log/tip/primes.py">file log</a></li>
   <li><a href="/raw-file/tip/primes.py">raw</a></li>
   </ul>
   <ul>
   <li><a href="/help">help</a></li>
   </ul>
   </div>
   
   <div class="main">
   <h2 class="breadcrumb"><a href="/">Mercurial</a> </h2>
   <h3>
    view primes.py @ 0:<a href="/rev/1af356141006">1af356141006</a>
    <span class="tag">tip</span> 
   </h3>
   
   
   <form class="search" action="/log">
   
   <p><input name="rev" id="search1" type="text" size="30" value="" /></p>
   <div id="hint">Find changesets by keywords (author, files, the commit message), revision
   number or hash, or <a href="/help/revsets">revset expression</a>.</div>
   </form>
   
   <div class="description">a</div>
   
   <table id="changesetEntry">
   <tr>
    <th class="author">author</th>
    <td class="author">&#116;&#101;&#115;&#116;</td>
   </tr>
   <tr>
    <th class="date">date</th>
    <td class="date age">Thu, 01 Jan 1970 00:00:00 +0000</td>
   </tr>
   <tr>
    <th class="author">parents</th>
    <td class="author"></td>
   </tr>
   <tr>
    <th class="author">children</th>
    <td class="author"></td>
   </tr>
   </table>
   
   <div class="overflow">
   <div class="sourcefirst linewraptoggle">line wrap: <a class="linewraplink" href="javascript:toggleLinewrap()">on</a></div>
   <div class="sourcefirst"> line source</div>
   <pre class="sourcelines stripes4 wrap bottomline"
        data-logurl="/log/tip/primes.py"
        data-selectabletag="SPAN"
        data-ishead="1">
   
   <span id="l1"><span class="sd">&quot;&quot;&quot;Fun with generators. Corresponding Haskell implementation:</span></span><a href="#l1"></a>
   <span id="l2"></span><a href="#l2"></a>
   <span id="l3"><span class="sd">primes = 2 : sieve [3, 5..]</span></span><a href="#l3"></a>
   <span id="l4"><span class="sd">    where sieve (p:ns) = p : sieve [n | n &lt;- ns, mod n p /= 0]</span></span><a href="#l4"></a>
   <span id="l5"><span class="sd">&quot;&quot;&quot;</span></span><a href="#l5"></a>
   <span id="l6"></span><a href="#l6"></a>
   <span id="l7"><span class="kn">from</span> <span class="nn">itertools</span> <span class="kn">import</span> <span class="n">dropwhile</span><span class="p">,</span> <span class="n">ifilter</span><span class="p">,</span> <span class="n">islice</span><span class="p">,</span> <span class="n">count</span><span class="p">,</span> <span class="n">chain</span></span><a href="#l7"></a>
   <span id="l8"></span><a href="#l8"></a>
   <span id="l9"><span class="kn">def</span> <span class="nf">primes</span><span class="p">():</span></span><a href="#l9"></a>
   <span id="l10">    <span class="sd">&quot;&quot;&quot;Generate all primes.&quot;&quot;&quot;</span></span><a href="#l10"></a>
   <span id="l11">    <span class="kn">def</span> <span class="nf">sieve</span><span class="p">(</span><span class="n">ns</span><span class="p">):</span></span><a href="#l11"></a>
   <span id="l12">        <span class="n">p</span> <span class="o">=</span> <span class="n">ns</span><span class="o">.</span><span class="n">next</span><span class="p">()</span></span><a href="#l12"></a>
   <span id="l13">        <span class="c"># It is important to yield *here* in order to stop the</span></span><a href="#l13"></a>
   <span id="l14">        <span class="c"># infinite recursion.</span></span><a href="#l14"></a>
   <span id="l15">        <span class="kn">yield</span> <span class="n">p</span></span><a href="#l15"></a>
   <span id="l16">        <span class="n">ns</span> <span class="o">=</span> <span class="n">ifilter</span><span class="p">(</span><span class="kn">lambda</span> <span class="n">n</span><span class="p">:</span> <span class="n">n</span> <span class="o">%</span> <span class="n">p</span> <span class="o">!=</span> <span class="mi">0</span><span class="p">,</span> <span class="n">ns</span><span class="p">)</span></span><a href="#l16"></a>
   <span id="l17">        <span class="kn">for</span> <span class="n">n</span> <span class="ow">in</span> <span class="n">sieve</span><span class="p">(</span><span class="n">ns</span><span class="p">):</span></span><a href="#l17"></a>
   <span id="l18">            <span class="kn">yield</span> <span class="n">n</span></span><a href="#l18"></a>
   <span id="l19"></span><a href="#l19"></a>
   <span id="l20">    <span class="n">odds</span> <span class="o">=</span> <span class="n">ifilter</span><span class="p">(</span><span class="kn">lambda</span> <span class="n">i</span><span class="p">:</span> <span class="n">i</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">==</span> <span class="mi">1</span><span class="p">,</span> <span class="n">count</span><span class="p">())</span></span><a href="#l20"></a>
   <span id="l21">    <span class="kn">return</span> <span class="n">chain</span><span class="p">([</span><span class="mi">2</span><span class="p">],</span> <span class="n">sieve</span><span class="p">(</span><span class="n">dropwhile</span><span class="p">(</span><span class="kn">lambda</span> <span class="n">n</span><span class="p">:</span> <span class="n">n</span> <span class="o">&lt;</span> <span class="mi">3</span><span class="p">,</span> <span class="n">odds</span><span class="p">)))</span></span><a href="#l21"></a>
   <span id="l22"></span><a href="#l22"></a>
   <span id="l23"><span class="kn">if</span> <span class="n">__name__</span> <span class="o">==</span> <span class="s">&quot;__main__&quot;</span><span class="p">:</span></span><a href="#l23"></a>
   <span id="l24">    <span class="kn">import</span> <span class="nn">sys</span></span><a href="#l24"></a>
   <span id="l25">    <span class="kn">try</span><span class="p">:</span></span><a href="#l25"></a>
   <span id="l26">        <span class="n">n</span> <span class="o">=</span> <span class="nb">int</span><span class="p">(</span><span class="n">sys</span><span class="o">.</span><span class="n">argv</span><span class="p">[</span><span class="mi">1</span><span class="p">])</span></span><a href="#l26"></a>
   <span id="l27">    <span class="kn">except</span> <span class="p">(</span><span class="ne">ValueError</span><span class="p">,</span> <span class="ne">IndexError</span><span class="p">):</span></span><a href="#l27"></a>
   <span id="l28">        <span class="n">n</span> <span class="o">=</span> <span class="mi">10</span></span><a href="#l28"></a>
   <span id="l29">    <span class="n">p</span> <span class="o">=</span> <span class="n">primes</span><span class="p">()</span></span><a href="#l29"></a>
   <span id="l30">    <span class="kn">print</span> <span class="s">&quot;The first </span><span class="si">%d</span><span class="s"> primes: </span><span class="si">%s</span><span class="s">&quot;</span> <span class="o">%</span> <span class="p">(</span><span class="n">n</span><span class="p">,</span> <span class="nb">list</span><span class="p">(</span><span class="n">islice</span><span class="p">(</span><span class="n">p</span><span class="p">,</span> <span class="n">n</span><span class="p">)))</span></span><a href="#l30"></a>
   <span id="l31"></span><a href="#l31"></a>
   </pre>
   </div>
   
   <script type="text/javascript" src="/static/followlines.js"></script>
   
   </div>
   </div>
   
   
   
   </body>
   </html>
   
 
 hgweb fileannotate, html
 
   $ (get-with-headers.py localhost:$HGPORT 'annotate/tip/primes.py') | filterhtml
   200 Script output follows
   
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
   <head>
   <link rel="icon" href="/static/hgicon.png" type="image/png" />
   <meta name="robots" content="index, nofollow" />
   <link rel="stylesheet" href="/static/style-paper.css" type="text/css" />
   <script type="text/javascript" src="/static/mercurial.js"></script>
   
   <link rel="stylesheet" href="/highlightcss" type="text/css" />
   <title>test: primes.py annotate</title>
   </head>
   <body>
   
   <div class="container">
   <div class="menu">
   <div class="logo">
   <a href="https://mercurial-scm.org/">
   <img src="/static/hglogo.png" alt="mercurial" /></a>
   </div>
   <ul>
   <li><a href="/shortlog/tip">log</a></li>
   <li><a href="/graph/tip">graph</a></li>
   <li><a href="/tags">tags</a></li>
   <li><a href="/bookmarks">bookmarks</a></li>
   <li><a href="/branches">branches</a></li>
   </ul>
   
   <ul>
   <li><a href="/rev/tip">changeset</a></li>
   <li><a href="/file/tip/">browse</a></li>
   </ul>
   <ul>
   <li><a href="/file/tip/primes.py">file</a></li>
   <li><a href="/file/tip/primes.py">latest</a></li>
   <li><a href="/diff/tip/primes.py">diff</a></li>
   <li><a href="/comparison/tip/primes.py">comparison</a></li>
   <li class="active">annotate</li>
   <li><a href="/log/tip/primes.py">file log</a></li>
   <li><a href="/raw-file/tip/primes.py">raw</a></li>
   </ul>
   <ul>
   <li><a href="/help">help</a></li>
   </ul>
   </div>
   
   <div class="main">
   <h2 class="breadcrumb"><a href="/">Mercurial</a> </h2>
   <h3>
    annotate primes.py @ 0:<a href="/rev/1af356141006">1af356141006</a>
    <span class="tag">tip</span> 
   </h3>
   
   
   <form class="search" action="/log">
   
   <p><input name="rev" id="search1" type="text" size="30" value="" /></p>
   <div id="hint">Find changesets by keywords (author, files, the commit message), revision
   number or hash, or <a href="/help/revsets">revset expression</a>.</div>
   </form>
   
   <div class="description">a</div>
   
   <table id="changesetEntry">
   <tr>
    <th class="author">author</th>
    <td class="author">&#116;&#101;&#115;&#116;</td>
   </tr>
   <tr>
    <th class="date">date</th>
    <td class="date age">Thu, 01 Jan 1970 00:00:00 +0000</td>
   </tr>
   <tr>
    <th class="author">parents</th>
    <td class="author"></td>
   </tr>
   <tr>
    <th class="author">children</th>
    <td class="author"></td>
   </tr>
   </table>
   
   <div class="overflow">
   <table class="bigtable">
   <thead>
   <tr>
    <th class="annotate">rev</th>
    <th class="line">&nbsp;&nbsp;line source</th>
   </tr>
   </thead>
   <tbody class="stripes2 sourcelines"
          data-logurl="/log/tip/primes.py"
          data-selectabletag="TR"
          data-ishead="1">
     
   <tr id="l1" class="thisrev">
   <td class="annotate parity0">
   <a href="/annotate/1af356141006/primes.py#l1">
   0
   </a>
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l1">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l1">     1</a> <span class="sd">&quot;&quot;&quot;Fun with generators. Corresponding Haskell implementation:</span></td>
+  <td class="source followlines-btn-parent"><a href="#l1">     1</a> <span class="sd">&quot;&quot;&quot;Fun with generators. Corresponding Haskell implementation:</span></td>
   </tr>
   <tr id="l2" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l2">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l2">     2</a> </td>
+  <td class="source followlines-btn-parent"><a href="#l2">     2</a> </td>
   </tr>
   <tr id="l3" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l3">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l3">     3</a> <span class="sd">primes = 2 : sieve [3, 5..]</span></td>
+  <td class="source followlines-btn-parent"><a href="#l3">     3</a> <span class="sd">primes = 2 : sieve [3, 5..]</span></td>
   </tr>
   <tr id="l4" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l4">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l4">     4</a> <span class="sd">    where sieve (p:ns) = p : sieve [n | n &lt;- ns, mod n p /= 0]</span></td>
+  <td class="source followlines-btn-parent"><a href="#l4">     4</a> <span class="sd">    where sieve (p:ns) = p : sieve [n | n &lt;- ns, mod n p /= 0]</span></td>
   </tr>
   <tr id="l5" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l5">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l5">     5</a> <span class="sd">&quot;&quot;&quot;</span></td>
+  <td class="source followlines-btn-parent"><a href="#l5">     5</a> <span class="sd">&quot;&quot;&quot;</span></td>
   </tr>
   <tr id="l6" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l6">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l6">     6</a> </td>
+  <td class="source followlines-btn-parent"><a href="#l6">     6</a> </td>
   </tr>
   <tr id="l7" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l7">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l7">     7</a> <span class="kn">from</span> <span class="nn">itertools</span> <span class="kn">import</span> <span class="n">dropwhile</span><span class="p">,</span> <span class="n">ifilter</span><span class="p">,</span> <span class="n">islice</span><span class="p">,</span> <span class="n">count</span><span class="p">,</span> <span class="n">chain</span></td>
+  <td class="source followlines-btn-parent"><a href="#l7">     7</a> <span class="kn">from</span> <span class="nn">itertools</span> <span class="kn">import</span> <span class="n">dropwhile</span><span class="p">,</span> <span class="n">ifilter</span><span class="p">,</span> <span class="n">islice</span><span class="p">,</span> <span class="n">count</span><span class="p">,</span> <span class="n">chain</span></td>
   </tr>
   <tr id="l8" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l8">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l8">     8</a> </td>
+  <td class="source followlines-btn-parent"><a href="#l8">     8</a> </td>
   </tr>
   <tr id="l9" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l9">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l9">     9</a> <span class="kn">def</span> <span class="nf">primes</span><span class="p">():</span></td>
+  <td class="source followlines-btn-parent"><a href="#l9">     9</a> <span class="kn">def</span> <span class="nf">primes</span><span class="p">():</span></td>
   </tr>
   <tr id="l10" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l10">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l10">    10</a>     <span class="sd">&quot;&quot;&quot;Generate all primes.&quot;&quot;&quot;</span></td>
+  <td class="source followlines-btn-parent"><a href="#l10">    10</a>     <span class="sd">&quot;&quot;&quot;Generate all primes.&quot;&quot;&quot;</span></td>
   </tr>
   <tr id="l11" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l11">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l11">    11</a>     <span class="kn">def</span> <span class="nf">sieve</span><span class="p">(</span><span class="n">ns</span><span class="p">):</span></td>
+  <td class="source followlines-btn-parent"><a href="#l11">    11</a>     <span class="kn">def</span> <span class="nf">sieve</span><span class="p">(</span><span class="n">ns</span><span class="p">):</span></td>
   </tr>
   <tr id="l12" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l12">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l12">    12</a>         <span class="n">p</span> <span class="o">=</span> <span class="n">ns</span><span class="o">.</span><span class="n">next</span><span class="p">()</span></td>
+  <td class="source followlines-btn-parent"><a href="#l12">    12</a>         <span class="n">p</span> <span class="o">=</span> <span class="n">ns</span><span class="o">.</span><span class="n">next</span><span class="p">()</span></td>
   </tr>
   <tr id="l13" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l13">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l13">    13</a>         <span class="c"># It is important to yield *here* in order to stop the</span></td>
+  <td class="source followlines-btn-parent"><a href="#l13">    13</a>         <span class="c"># It is important to yield *here* in order to stop the</span></td>
   </tr>
   <tr id="l14" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l14">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l14">    14</a>         <span class="c"># infinite recursion.</span></td>
+  <td class="source followlines-btn-parent"><a href="#l14">    14</a>         <span class="c"># infinite recursion.</span></td>
   </tr>
   <tr id="l15" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l15">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l15">    15</a>         <span class="kn">yield</span> <span class="n">p</span></td>
+  <td class="source followlines-btn-parent"><a href="#l15">    15</a>         <span class="kn">yield</span> <span class="n">p</span></td>
   </tr>
   <tr id="l16" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l16">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l16">    16</a>         <span class="n">ns</span> <span class="o">=</span> <span class="n">ifilter</span><span class="p">(</span><span class="kn">lambda</span> <span class="n">n</span><span class="p">:</span> <span class="n">n</span> <span class="o">%</span> <span class="n">p</span> <span class="o">!=</span> <span class="mi">0</span><span class="p">,</span> <span class="n">ns</span><span class="p">)</span></td>
+  <td class="source followlines-btn-parent"><a href="#l16">    16</a>         <span class="n">ns</span> <span class="o">=</span> <span class="n">ifilter</span><span class="p">(</span><span class="kn">lambda</span> <span class="n">n</span><span class="p">:</span> <span class="n">n</span> <span class="o">%</span> <span class="n">p</span> <span class="o">!=</span> <span class="mi">0</span><span class="p">,</span> <span class="n">ns</span><span class="p">)</span></td>
   </tr>
   <tr id="l17" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l17">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l17">    17</a>         <span class="kn">for</span> <span class="n">n</span> <span class="ow">in</span> <span class="n">sieve</span><span class="p">(</span><span class="n">ns</span><span class="p">):</span></td>
+  <td class="source followlines-btn-parent"><a href="#l17">    17</a>         <span class="kn">for</span> <span class="n">n</span> <span class="ow">in</span> <span class="n">sieve</span><span class="p">(</span><span class="n">ns</span><span class="p">):</span></td>
   </tr>
   <tr id="l18" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l18">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l18">    18</a>             <span class="kn">yield</span> <span class="n">n</span></td>
+  <td class="source followlines-btn-parent"><a href="#l18">    18</a>             <span class="kn">yield</span> <span class="n">n</span></td>
   </tr>
   <tr id="l19" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l19">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l19">    19</a> </td>
+  <td class="source followlines-btn-parent"><a href="#l19">    19</a> </td>
   </tr>
   <tr id="l20" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l20">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l20">    20</a>     <span class="n">odds</span> <span class="o">=</span> <span class="n">ifilter</span><span class="p">(</span><span class="kn">lambda</span> <span class="n">i</span><span class="p">:</span> <span class="n">i</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">==</span> <span class="mi">1</span><span class="p">,</span> <span class="n">count</span><span class="p">())</span></td>
+  <td class="source followlines-btn-parent"><a href="#l20">    20</a>     <span class="n">odds</span> <span class="o">=</span> <span class="n">ifilter</span><span class="p">(</span><span class="kn">lambda</span> <span class="n">i</span><span class="p">:</span> <span class="n">i</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">==</span> <span class="mi">1</span><span class="p">,</span> <span class="n">count</span><span class="p">())</span></td>
   </tr>
   <tr id="l21" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l21">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l21">    21</a>     <span class="kn">return</span> <span class="n">chain</span><span class="p">([</span><span class="mi">2</span><span class="p">],</span> <span class="n">sieve</span><span class="p">(</span><span class="n">dropwhile</span><span class="p">(</span><span class="kn">lambda</span> <span class="n">n</span><span class="p">:</span> <span class="n">n</span> <span class="o">&lt;</span> <span class="mi">3</span><span class="p">,</span> <span class="n">odds</span><span class="p">)))</span></td>
+  <td class="source followlines-btn-parent"><a href="#l21">    21</a>     <span class="kn">return</span> <span class="n">chain</span><span class="p">([</span><span class="mi">2</span><span class="p">],</span> <span class="n">sieve</span><span class="p">(</span><span class="n">dropwhile</span><span class="p">(</span><span class="kn">lambda</span> <span class="n">n</span><span class="p">:</span> <span class="n">n</span> <span class="o">&lt;</span> <span class="mi">3</span><span class="p">,</span> <span class="n">odds</span><span class="p">)))</span></td>
   </tr>
   <tr id="l22" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l22">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l22">    22</a> </td>
+  <td class="source followlines-btn-parent"><a href="#l22">    22</a> </td>
   </tr>
   <tr id="l23" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l23">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l23">    23</a> <span class="kn">if</span> <span class="n">__name__</span> <span class="o">==</span> <span class="s">&quot;__main__&quot;</span><span class="p">:</span></td>
+  <td class="source followlines-btn-parent"><a href="#l23">    23</a> <span class="kn">if</span> <span class="n">__name__</span> <span class="o">==</span> <span class="s">&quot;__main__&quot;</span><span class="p">:</span></td>
   </tr>
   <tr id="l24" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l24">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l24">    24</a>     <span class="kn">import</span> <span class="nn">sys</span></td>
+  <td class="source followlines-btn-parent"><a href="#l24">    24</a>     <span class="kn">import</span> <span class="nn">sys</span></td>
   </tr>
   <tr id="l25" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l25">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l25">    25</a>     <span class="kn">try</span><span class="p">:</span></td>
+  <td class="source followlines-btn-parent"><a href="#l25">    25</a>     <span class="kn">try</span><span class="p">:</span></td>
   </tr>
   <tr id="l26" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l26">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l26">    26</a>         <span class="n">n</span> <span class="o">=</span> <span class="nb">int</span><span class="p">(</span><span class="n">sys</span><span class="o">.</span><span class="n">argv</span><span class="p">[</span><span class="mi">1</span><span class="p">])</span></td>
+  <td class="source followlines-btn-parent"><a href="#l26">    26</a>         <span class="n">n</span> <span class="o">=</span> <span class="nb">int</span><span class="p">(</span><span class="n">sys</span><span class="o">.</span><span class="n">argv</span><span class="p">[</span><span class="mi">1</span><span class="p">])</span></td>
   </tr>
   <tr id="l27" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l27">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l27">    27</a>     <span class="kn">except</span> <span class="p">(</span><span class="ne">ValueError</span><span class="p">,</span> <span class="ne">IndexError</span><span class="p">):</span></td>
+  <td class="source followlines-btn-parent"><a href="#l27">    27</a>     <span class="kn">except</span> <span class="p">(</span><span class="ne">ValueError</span><span class="p">,</span> <span class="ne">IndexError</span><span class="p">):</span></td>
   </tr>
   <tr id="l28" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l28">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l28">    28</a>         <span class="n">n</span> <span class="o">=</span> <span class="mi">10</span></td>
+  <td class="source followlines-btn-parent"><a href="#l28">    28</a>         <span class="n">n</span> <span class="o">=</span> <span class="mi">10</span></td>
   </tr>
   <tr id="l29" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l29">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l29">    29</a>     <span class="n">p</span> <span class="o">=</span> <span class="n">primes</span><span class="p">()</span></td>
+  <td class="source followlines-btn-parent"><a href="#l29">    29</a>     <span class="n">p</span> <span class="o">=</span> <span class="n">primes</span><span class="p">()</span></td>
   </tr>
   <tr id="l30" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l30">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l30">    30</a>     <span class="kn">print</span> <span class="s">&quot;The first </span><span class="si">%d</span><span class="s"> primes: </span><span class="si">%s</span><span class="s">&quot;</span> <span class="o">%</span> <span class="p">(</span><span class="n">n</span><span class="p">,</span> <span class="nb">list</span><span class="p">(</span><span class="n">islice</span><span class="p">(</span><span class="n">p</span><span class="p">,</span> <span class="n">n</span><span class="p">)))</span></td>
+  <td class="source followlines-btn-parent"><a href="#l30">    30</a>     <span class="kn">print</span> <span class="s">&quot;The first </span><span class="si">%d</span><span class="s"> primes: </span><span class="si">%s</span><span class="s">&quot;</span> <span class="o">%</span> <span class="p">(</span><span class="n">n</span><span class="p">,</span> <span class="nb">list</span><span class="p">(</span><span class="n">islice</span><span class="p">(</span><span class="n">p</span><span class="p">,</span> <span class="n">n</span><span class="p">)))</span></td>
   </tr>
   <tr id="l31" class="thisrev">
   <td class="annotate parity0">
   
   <div class="annotate-info">
   <div>
   <a href="/annotate/1af356141006/primes.py#l31">
   1af356141006</a>
   a
   </div>
   <div><em>&#116;&#101;&#115;&#116;</em></div>
   <div>parents: </div>
   <a href="/diff/1af356141006/primes.py">diff</a>
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l31">    31</a> </td>
+  <td class="source followlines-btn-parent"><a href="#l31">    31</a> </td>
   </tr>
   </tbody>
   </table>
   </div>
   </div>
   </div>
   
   <script type="text/javascript" src="/static/followlines.js"></script>
   
   
   
   </body>
   </html>
   
 
 hgweb fileannotate, raw
 
   $ (get-with-headers.py localhost:$HGPORT 'annotate/tip/primes.py?style=raw') \
   >     | sed "s/test@//" > a
   $ echo "200 Script output follows" > b
   $ echo "" >> b
   $ echo "" >> b
   $ hg annotate "primes.py" >> b
   $ echo "" >> b
   $ echo "" >> b
   $ echo "" >> b
   $ echo "" >> b
   $ cmp b a || diff -u b a
 
 hgweb filerevision, raw
 
   $ (get-with-headers.py localhost:$HGPORT 'file/tip/primes.py?style=raw') \
   >     > a
   $ echo "200 Script output follows" > b
   $ echo "" >> b
   $ hg cat primes.py >> b
   $ cmp b a || diff -u b a
 
 hgweb highlightcss friendly
 
   $ get-with-headers.py localhost:$HGPORT 'highlightcss' > out
   $ head -n 4 out
   200 Script output follows
   
   /* pygments_style = friendly */
   
   $ rm out
 
 errors encountered
 
   $ cat errors.log
   $ killdaemons.py
 
 Change the pygments style
 
   $ cat > .hg/hgrc <<EOF
   > [web]
   > pygments_style = fruity
   > EOF
 
 hg serve again
 
   $ hg serve -p $HGPORT -d -n test --pid-file=hg.pid -A access.log -E errors.log
   $ cat hg.pid >> $DAEMON_PIDS
 
 hgweb highlightcss fruity
 
   $ get-with-headers.py localhost:$HGPORT 'highlightcss' > out
   $ head -n 4 out
   200 Script output follows
   
   /* pygments_style = fruity */
   
   $ rm out
 
 errors encountered
 
   $ cat errors.log
   $ killdaemons.py
 
 only highlight C source files
 
   $ cat > .hg/hgrc <<EOF
   > [web]
   > highlightfiles = **.c
   > EOF
 
 hg serve again
 
   $ hg serve -p $HGPORT -d -n test --pid-file=hg.pid -A access.log -E errors.log
   $ cat hg.pid >> $DAEMON_PIDS
 
 test that fileset in highlightfiles works and primes.py is not highlighted
 
   $ get-with-headers.py localhost:$HGPORT 'file/tip/primes.py' | grep 'id="l11"'
   <span id="l11">    def sieve(ns):</span><a href="#l11"></a>
 
 errors encountered
 
   $ cat errors.log
   $ cd ..
   $ hg init eucjp
   $ cd eucjp
   $ $PYTHON -c 'print("\265\376")' >> eucjp.txt  # Japanese kanji "Kyo"
   $ hg ci -Ama
   adding eucjp.txt
   $ hgserveget () {
   >     killdaemons.py
   >     echo % HGENCODING="$1" hg serve
   >     HGENCODING="$1" hg serve -p $HGPORT -d -n test --pid-file=hg.pid -E errors.log
   >     cat hg.pid >> $DAEMON_PIDS
   > 
   >     echo % hgweb filerevision, html
   >     get-with-headers.py localhost:$HGPORT "file/tip/$2" \
   >         | grep '<div class="parity0 source">'
   >     echo % errors encountered
   >     cat errors.log
   > }
   $ hgserveget euc-jp eucjp.txt
   % HGENCODING=euc-jp hg serve
   % hgweb filerevision, html
   % errors encountered
   $ hgserveget utf-8 eucjp.txt
   % HGENCODING=utf-8 hg serve
   % hgweb filerevision, html
   % errors encountered
   $ hgserveget us-ascii eucjp.txt
   % HGENCODING=us-ascii hg serve
   % hgweb filerevision, html
   % errors encountered
 
 We attempt to highlight unknown files by default
 
   $ killdaemons.py
 
   $ cat > .hg/hgrc << EOF
   > [web]
   > highlightfiles = **
   > EOF
 
   $ cat > unknownfile << EOF
   > #!$PYTHON
   > def foo():
   >    pass
   > EOF
 
   $ hg add unknownfile
   $ hg commit -m unknown unknownfile
 
   $ hg serve -p $HGPORT -d -n test --pid-file=hg.pid
   $ cat hg.pid >> $DAEMON_PIDS
 
   $ get-with-headers.py localhost:$HGPORT 'file/tip/unknownfile' | grep l2
   <span id="l2"><span class="k">def</span> <span class="nf">foo</span><span class="p">():</span></span><a href="#l2"></a>
 
 We can prevent Pygments from falling back to a non filename-based
 detection mode
 
   $ cat > .hg/hgrc << EOF
   > [web]
   > highlightfiles = **
   > highlightonlymatchfilename = true
   > EOF
 
   $ killdaemons.py
   $ hg serve -p $HGPORT -d -n test --pid-file=hg.pid
   $ cat hg.pid >> $DAEMON_PIDS
   $ get-with-headers.py localhost:$HGPORT 'file/tip/unknownfile' | grep l2
   <span id="l2">def foo():</span><a href="#l2"></a>
 
   $ cd ..