GNOME.org
 

[gitg: 4/5] Improve performance of diff rendering

commit d67116e3ba10b800e762daf185293ca02bddc58f
Author: Jesse van den Kieboom <jesse vandenkieboom epfl ch>
Date:   Mon Oct 29 16:58:23 2012 +0100

    Improve performance of diff rendering

 libgitg-gtk/resources/base.css  |    2 +-
 libgitg-gtk/resources/base.html |    2 +
 libgitg-gtk/resources/base.js   |   77 ++++++++++++++++++++++-----------------
 3 files changed, 46 insertions(+), 35 deletions(-)
---
diff --git a/libgitg-gtk/resources/base.css b/libgitg-gtk/resources/base.css
index 406d389..92b8bb0 100644
--- a/libgitg-gtk/resources/base.css
+++ b/libgitg-gtk/resources/base.css
@@ -84,7 +84,7 @@ div#diff div.hunk table td {
   vertical-align: top;
 }
 
-div#diff div.hunk table .gutter {
+div#diff div.hunk div#diff div.hunk table td:nth-child(0), div#diff div.hunk div#diff div.hunk table td:nth-child(1) {
   padding-right: 2px;
   padding-left: 2px;
   background-color: #eeeeec;
diff --git a/libgitg-gtk/resources/base.html b/libgitg-gtk/resources/base.html
index ca6be6c..c31868c 100644
--- a/libgitg-gtk/resources/base.html
+++ b/libgitg-gtk/resources/base.html
@@ -35,6 +35,8 @@
       </div>
     </div>
     <div id="diff">
+      <div id="diff_header"></div>
+      <div id="diff_content"></div>
     </div>
   </body>
 <html>
diff --git a/libgitg-gtk/resources/base.js b/libgitg-gtk/resources/base.js
index 44b704f..86365de 100644
--- a/libgitg-gtk/resources/base.js
+++ b/libgitg-gtk/resources/base.js
@@ -96,9 +96,21 @@ function run_template(name, context)
 	return templates[name].execute(context);
 }
 
+var escapeDiv = document.createElement('div');
+var escapeElement = document.createTextNode('');
+escapeDiv.appendChild(escapeElement);
+
+function html_escape(str)
+{
+	escapeElement.data = str;
+	return escapeDiv.innerHTML;
+}
+
 function diff_file(file)
 {
-	var f = $('<div/>');
+	var f = '<div>';
+
+	tabrepl = '<span class="tab" style="width: ' + settings.tab_width + 'ex">\t</span>';
 
 	for (var i = 0; i < file.hunks.length; ++i)
 	{
@@ -115,70 +127,67 @@ function diff_file(file)
 		var cold = h.range.old.start;
 		var cnew = h.range.new.start;
 
+		var tablecontent = '';
+
 		for (var j = 0; j < h.lines.length; ++j)
 		{
 			var l = h.lines[j];
 			var o = String.fromCharCode(l.type);
 
-			var oldtd = $('<td/>', {'class': 'gutter'});
-			var newtd = $('<td/>', {'class': 'gutter'});
-
-			var row = $('<tr/>');
+			var row = '<tr class="';
 
 			switch (o)
 			{
 				case ' ':
-					row.addClass('context');
-
-					oldtd.text(cold);
-					newtd.text(cnew);
+					row += 'context"><td>' + cold + '</td><td>' + cnew + '</td>';
 
 					cold++;
 					cnew++;
 				break;
 				case '+':
-					row.addClass('added');
+					row += 'added"><td></td><td>' + cnew + '</td>';
 
-					newtd.text(cnew);
 					cnew++;
 				break;
 				case '-':
-					row.addClass('removed');
+					row += 'removed"><td>' + cold + '</td><td></td>';
 
-					oldtd.text(cold);
 					cold++;
 				break;
+				default:
+					row += '">';
+				break;
 			}
 
-			var texttd = $('<td/>').text(l.content);
-
-			texttd.html(texttd.html().replace(/\t/g, '<span class="tab" style="width: ' + settings.tab_width + 'ex">\t</span>'));
-
-			row.append(oldtd).append(newtd).append(texttd);
-			table.append(row);
+			row += '<td>' + html_escape(l.content).replace(/\t/g, tabrepl) + '</td>';
+			tablecontent += row;
 		}
 
+		var h = ht[0].outerHTML;
+		var findstr = '</table>';
+		var idx = h.indexOf(findstr);
 
-		f.append(ht);
+		f += h.substring(0, idx) + tablecontent + h.substring(idx);
 	}
 
-	return f;
+	return f + '</div>';
 }
 
-function write_diff(content, res)
+function write_diff(res)
 {
+	var f = '';
+
 	for (var i = 0; i < res.length; ++i)
 	{
-		var df = diff_file(res[i]);
-
-		content.append(df);
+		f += diff_file(res[i]);
 	}
+
+	return f;
 }
 
-function write_commit(content, commit)
+function write_commit(commit)
 {
-	var c = run_template('commit', commit);
-	content.append(c);
+	return run_template('commit', commit);
 }
 
 function update_diff()
@@ -186,20 +195,20 @@ function update_diff()
 	var r = new XMLHttpRequest();
 
 	r.onload = function(e) {
-		j = JSON.parse(r.responseText);
+		var j = JSON.parse(r.responseText);
 
-		var content = $('#diff');
-		content.empty();
+		var html = '';
 
 		if ('commit' in j)
 		{
-			write_commit(content, j.commit);
+			$('#diff_header').html(write_commit(j.commit));
 		}
 
-		write_diff(content, j.diff);
+		var content = document.getElementById('diff_content');
+		content.innerHTML = write_diff(j.diff);
 	}
 
-	var t = (new Date()).getTime()
+	var t = (new Date()).getTime();
 
 	r.open("GET", "gitg-diff:/diff/?t=" + t + "&viewid=" + params.viewid);
 	r.send();
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]