[PATCH] hgweb (coal/paper): make file, diff and annotate render faster

Brendan Cully brendan at kublai.com
Thu Nov 20 20:22:34 CST 2008


Here's a patch that reworks the HTML/CSS for paper and coal to make
file, diff and annotate faster. For file and diff the tables are
removed entirely, but for annotate I had to keep them to get things to
align properly against the user at rev column. Consequently annotate's
speed increase is not nearly as dramatic. If we were willing to
trim/pad that info to a fixed size (maybe preserving full info in a
mouseover) we could really improve annotate speed. Here's the
difference in speed I get on a 100,000 line file, measured in hg from
start to finish page serving (actual render time is several seconds
longer for the large numbers):

unpatched:
file: 120 seconds
annotate = 308 seconds
rev = 120 seconds

patched:
file = 28 seconds
annotate = 220 seconds
rev = 23 seconds
-------------- next part --------------
# HG changeset patch
# User Brendan Cully <brendan at kublai.com>
# Date 1227233750 28800
# Node ID d7f367b771be3f85a23bbf257aed1672e97ff3af
# Parent  b425a0b391dd596659d9627b6f80e20d2a79cbb5
hgweb (coal/paper): make file, diff and annotate easier to render

This patch removes tables altogether for file and diff, and removes
one column from annotate, making firefox's incremental renderer much
faster for large files.

diff --git a/templates/coal/changeset.tmpl b/templates/coal/changeset.tmpl
--- a/templates/coal/changeset.tmpl
+++ b/templates/coal/changeset.tmpl
@@ -60,12 +60,8 @@
 </table>
 
 <div class="overflow">
-<table class="bigtable">
-<tr>
- <th class="lineno">line</th>
- <th class="source">diff</th>
-</tr>
-</table>
+<div class="sourcefirst">   line diff</div>
+
 {diff}
 </div>
 
diff --git a/templates/coal/fileannotate.tmpl b/templates/coal/fileannotate.tmpl
--- a/templates/coal/fileannotate.tmpl
+++ b/templates/coal/fileannotate.tmpl
@@ -67,8 +67,7 @@
 <table class="bigtable">
 <tr>
  <th class="annotate">rev</th>
- <th class="lineno">line</th>
- <th class="line">source</th>
+ <th class="line">&nbsp;&nbsp;line source</th>
 </tr>
 {annotate%annotateline}
 </table>
diff --git a/templates/coal/filediff.tmpl b/templates/coal/filediff.tmpl
--- a/templates/coal/filediff.tmpl
+++ b/templates/coal/filediff.tmpl
@@ -61,12 +61,7 @@
 </table>
 
 <div class="overflow">
-<table class="bigtable">
-<tr>
- <th class="lineno">line</th>
- <th class="source">diff</th>
-</tr>
-</table>
+<div class="sourcefirst">   line diff</div>
 
 {diff}
 </div>
diff --git a/templates/coal/filerevision.tmpl b/templates/coal/filerevision.tmpl
--- a/templates/coal/filerevision.tmpl
+++ b/templates/coal/filerevision.tmpl
@@ -61,13 +61,9 @@
 </table>
 
 <div class="overflow">
-<table class="bigtable">
-<tr>
- <th class="lineno">line</th>
- <th class="source">source</th>
-</tr>
+<div class="sourcefirst"> line source</div>
 {text%fileline}
-</table>
+<div class="sourcelast"></div>
 </div>
 </div>
 </div>
diff --git a/templates/coal/map b/templates/coal/map
--- a/templates/coal/map
+++ b/templates/coal/map
@@ -30,16 +30,16 @@
 fileannotate = fileannotate.tmpl
 filediff = filediff.tmpl
 filelog = filelog.tmpl
-fileline = '<tr class="parity{parity}"><td class="lineno"><a href="#{lineid}" id="{lineid}">{linenumber}</a></td><td class="source">{line|escape}</td></tr>'
+fileline = '<div class="parity{parity} source"><a href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</div>'
 filelogentry = filelogentry.tmpl
 
-annotateline = '<tr class="parity{parity}"><td class="annotate"><a href="{url}annotate/{node|short}/{file|urlescape}{sessionvars%urlparameter}#{targetline}" title="{node|short}: {desc|escape|firstline}">{author|user}@{rev}</a></td><td class="lineno"><a href="#{lineid}" id="{lineid}">{linenumber}</a></td><td class="source">{line|escape}</td></tr>'
+annotateline = '<tr class="parity{parity}"><td class="annotate"><a href="{url}annotate/{node|short}/{file|urlescape}{sessionvars%urlparameter}#{targetline}" title="{node|short}: {desc|escape|firstline}">{author|user}@{rev}</a></td><td class="source"><a href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</td></tr>'
 
-diffblock = '<table class="bigtable parity{parity}">{lines}</table>'
-difflineplus = '<tr><td class="lineno"><a href="#{lineid}" id="{lineid}">{linenumber}</a></td><td class="source plusline">{line|escape}</td></tr>'
-difflineminus = '<tr><td class="lineno"><a href="#{lineid}" id="{lineid}">{linenumber}</a></td><td class="source minusline">{line|escape}</td></tr>'
-difflineat = '<tr><td class="lineno"><a href="#{lineid}" id="{lineid}">{linenumber}</a></td><td class="source atline">{line|escape}</td></tr>'
-diffline = '<tr><td class="lineno"><a href="#{lineid}" id="{lineid}">{linenumber}</a></td><td class="source">{line|escape}</td></tr>'
+diffblock = '<div class="source bottomline parity{parity}">{lines}</div>'
+difflineplus = '<a href="#{lineid}" id="{lineid}">{linenumber}</a> <span class="plusline">{line|escape}</span>'
+difflineminus = '<a href="#{lineid}" id="{lineid}">{linenumber}</a> <span class="minusline">{line|escape}</span>'
+difflineat = '<a href="#{lineid}" id="{lineid}">{linenumber}</a> <span class="atline">{line|escape}</span>'
+diffline = '<a href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}'
 
 changelogparent = '<tr><th class="parent">parent {rev}:</th><td class="parent"><a href="{url}rev/{node|short}{sessionvars%urlparameter}">{node|short}</a></td></tr>'
 
diff --git a/templates/paper/map b/templates/paper/map
--- a/templates/paper/map
+++ b/templates/paper/map
@@ -30,16 +30,16 @@
 fileannotate = ../coal/fileannotate.tmpl
 filediff = ../coal/filediff.tmpl
 filelog = ../coal/filelog.tmpl
-fileline = '<tr class="parity{parity}"><td class="lineno"><a href="#{lineid}" id="{lineid}">{linenumber}</a></td><td class="source">{line|escape}</td></tr>'
+fileline = '<div class="parity{parity} source"><a href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</div>'
 filelogentry = ../coal/filelogentry.tmpl
 
-annotateline = '<tr class="parity{parity}"><td class="annotate"><a href="{url}annotate/{node|short}/{file|urlescape}{sessionvars%urlparameter}#{targetline}" title="{node|short}: {desc|escape|firstline}">{author|user}@{rev}</a></td><td class="lineno"><a href="#{lineid}" id="{lineid}">{linenumber}</a></td><td class="source">{line|escape}</td></tr>'
+annotateline = '<tr class="parity{parity}"><td class="annotate"><a href="{url}annotate/{node|short}/{file|urlescape}{sessionvars%urlparameter}#{targetline}" title="{node|short}: {desc|escape|firstline}">{author|user}@{rev}</a></td><td class="source"><a href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</td></tr>'
 
-diffblock = '<table class="bigtable parity{parity}">{lines}</table>'
-difflineplus = '<tr><td class="lineno"><a href="#{lineid}" id="{lineid}">{linenumber}</a></td><td class="source plusline">{line|escape}</td></tr>'
-difflineminus = '<tr><td class="lineno"><a href="#{lineid}" id="{lineid}">{linenumber}</a></td><td class="source minusline">{line|escape}</td></tr>'
-difflineat = '<tr><td class="lineno"><a href="#{lineid}" id="{lineid}">{linenumber}</a></td><td class="source atline">{line|escape}</td></tr>'
-diffline = '<tr><td class="lineno"><a href="#{lineid}" id="{lineid}">{linenumber}</a></td><td class="source">{line|escape}</td></tr>'
+diffblock = '<div class="source bottomline parity{parity}">{lines}</div>'
+difflineplus = '<a href="#{lineid}" id="{lineid}">{linenumber}</a> <span class="plusline">{line|escape}</span>'
+difflineminus = '<a href="#{lineid}" id="{lineid}">{linenumber}</a> <span class="minusline">{line|escape}</span>'
+difflineat = '<a href="#{lineid}" id="{lineid}">{linenumber}</a> <span class="atline">{line|escape}</span>'
+diffline = '<a href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}'
 
 changelogparent = '<tr><th class="parent">parent {rev}:</th><td class="parent"><a href="{url}rev/{node|short}{sessionvars%urlparameter}">{node|short}</a></td></tr>'
 
diff --git a/templates/static/style-coal.css b/templates/static/style-coal.css
--- a/templates/static/style-coal.css
+++ b/templates/static/style-coal.css
@@ -148,11 +148,21 @@
 .bigtable .node { width: 5em; font-family: monospace;}
 .bigtable .lineno { width: 2em; text-align: right;}
 .bigtable .lineno a { color: #999; font-size: smaller; font-family: monospace;}
-.bigtable td.source { font-family: monospace; white-space: pre; }
 .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; }
+
+.source, .sourcefirst, .sourcelast {
+  font-family: monospace;
+  white-space: pre;
+  font-size: 90%;
+}
+.sourcefirst { border-bottom: 1px solid #999; font-weight: bold; font-size: smaller; }
+.sourcelast { border-top: 1px solid #999; }
+.source a { color: #999; font-size: smaller; font-family: monospace;}
+.bottomline { border-bottom: 1px solid #999; }
 
 .fileline { font-family: monospace; }
 .fileline img { border: 0; }
diff --git a/templates/static/style-paper.css b/templates/static/style-paper.css
--- a/templates/static/style-paper.css
+++ b/templates/static/style-paper.css
@@ -137,13 +137,21 @@
 .bigtable .author { width: 12em; }
 .bigtable .description { }
 .bigtable .node { width: 5em; font-family: monospace;}
-.bigtable .lineno { width: 2em; text-align: right;}
-.bigtable .lineno a { color: #999; font-size: smaller; font-family: monospace;}
-.bigtable td.source { font-family: monospace; white-space: pre; }
 .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; }
+
+.source, .sourcefirst, .sourcelast {
+  font-family: monospace;
+  white-space: pre;
+  font-size: 90%;
+}
+.sourcefirst { border-bottom: 1px solid #999; font-weight: bold; font-size: smaller; }
+.sourcelast { border-top: 1px solid #999; }
+.source a { color: #999; font-size: smaller; font-family: monospace;}
+.bottomline { border-bottom: 1px solid #999; }
 
 .fileline { font-family: monospace; }
 .fileline img { border: 0; }


More information about the Mercurial-devel mailing list