templates: use CSS classes for diff styling
authorGregory Szorc <gregory.szorc@gmail.com>
Tue, 06 Jan 2015 15:29:02 -0800
changeset 23744 d1933c2e3c8c
parent 23743 606a3bf82e30
child 23745 513d47905114
templates: use CSS classes for diff styling Use of inline style for diff styling led to significant browser memory usage on large diffs. Moving the styling into CSS classes corrects this. This patch is based on work from https://bugzilla.mozilla.org/show_bug.cgi?id=766952 and https://hg.mozilla.org/hgcustom/version-control-tools/rev/2c355a580af6
mercurial/templates/gitweb/map
mercurial/templates/monoblue/map
mercurial/templates/static/style-gitweb.css
mercurial/templates/static/style-monoblue.css
tests/test-hgweb.t
--- a/mercurial/templates/gitweb/map	Tue Jan 06 15:21:48 2015 -0800
+++ b/mercurial/templates/gitweb/map	Tue Jan 06 15:29:02 2015 -0800
@@ -105,9 +105,9 @@
     <td><pre><a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a></pre></td>
     <td><pre>{line|escape}</pre></td>
   </tr>'
-difflineplus = '<span style="color:#008800;"><a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</span>'
-difflineminus = '<span style="color:#cc0000;"><a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</span>'
-difflineat = '<span style="color:#990099;"><a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</span>'
+difflineplus = '<span class="difflineplus"><a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</span>'
+difflineminus = '<span class="difflineminus"><a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</span>'
+difflineat = '<span class="difflineat"><a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</span>'
 diffline = '<a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}'
 
 comparisonblock ='
--- a/mercurial/templates/monoblue/map	Tue Jan 06 15:21:48 2015 -0800
+++ b/mercurial/templates/monoblue/map	Tue Jan 06 15:29:02 2015 -0800
@@ -100,9 +100,9 @@
     </td>
     <td class="source">{line|escape}</td>
   </tr>'
-difflineplus = '<span style="color:#008800;"><a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</span>'
-difflineminus = '<span style="color:#cc0000;"><a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</span>'
-difflineat = '<span style="color:#990099;"><a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</span>'
+difflineplus = '<span class="difflineplus"><a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</span>'
+difflineminus = '<span class="difflineminus"><a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</span>'
+difflineat = '<span class="difflineat"><a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</span>'
 diffline = '<a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}'
 
 comparisonblock ='
--- a/mercurial/templates/static/style-gitweb.css	Tue Jan 06 15:21:48 2015 -0800
+++ b/mercurial/templates/static/style-gitweb.css	Tue Jan 06 15:29:02 2015 -0800
@@ -84,6 +84,9 @@
 	background-color: #afdffa;
 	border-color: #ccecff #46ace6 #46ace6 #ccecff;
 }
+span.difflineplus { color:#008800; }
+span.difflineminus { color:#cc0000; }
+span.difflineat { color:#990099; }
 
 /* Graph */
 div#wrapper {
--- a/mercurial/templates/static/style-monoblue.css	Tue Jan 06 15:21:48 2015 -0800
+++ b/mercurial/templates/static/style-monoblue.css	Tue Jan 06 15:29:02 2015 -0800
@@ -260,6 +260,10 @@
   font-size: 1.2em;
   padding: 3px 0;
 }
+span.difflineplus { color:#008800; }
+span.difflineminus { color:#cc0000; }
+span.difflineat { color:#990099; }
+
 td.source {
   white-space: pre;
   font-family: monospace;
--- a/tests/test-hgweb.t	Tue Jan 06 15:21:48 2015 -0800
+++ b/tests/test-hgweb.t	Tue Jan 06 15:29:02 2015 -0800
@@ -332,7 +332,7 @@
 
   $ "$TESTDIR/get-with-headers.py" --twice localhost:$HGPORT 'static/style-gitweb.css' - date etag server
   200 Script output follows
-  content-length: 5262
+  content-length: 5372
   content-type: text/css
   
   body { font-family: sans-serif; font-size: 12px; border:solid #d9d8d1; border-width:1px; margin:10px; }
@@ -421,6 +421,9 @@
   	background-color: #afdffa;
   	border-color: #ccecff #46ace6 #46ace6 #ccecff;
   }
+  span.difflineplus { color:#008800; }
+  span.difflineminus { color:#cc0000; }
+  span.difflineat { color:#990099; }
   
   /* Graph */
   div#wrapper {