templates: use CSS classes for diff styling

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

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