From cfbcfc1f38acf3c00886f1eecb91becb7096fd7d Mon Sep 17 00:00:00 2001
From: Pieter de Bie <frimmirf+gitx@gmail.com>
Date: Thu, 14 May 2009 17:01:12 +0100
Subject: [PATCH] HistoryView: speed up diff display

This speeds up the diff display by using DOM manipulation instead
of .innerHTML. Apparently incremental .innerHTML is really expensive
compared to DOM manipulation (which is expensive compared to a single .innerHTML=).

For example, the v0.2.1 commit, which introduces Sparkle, now loads in 70ms
rather than 230.
---
 html/views/history/history.js | 35 ++++++++++++++++++++++++++---------
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/html/views/history/history.js b/html/views/history/history.js
index ee94436..b8d76ac 100644
--- a/html/views/history/history.js
+++ b/html/views/history/history.js
@@ -197,18 +197,35 @@ var loadCommit = function(commitObject, currentRef) {
 
 var showDiff = function() {
 	var newfile = function(name1, name2, id, mode_change, old_mode, new_mode) {
+		var button = document.createElement("div");
+		var p = document.createElement("p");
+		var link = document.createElement("a");
+		link.setAttribute("href", "#" + id);
+		p.appendChild(link);
+		var buttonType = ""
 		if (name1 == name2) {
+			buttonType = "changed"
+			link.appendChild(document.createTextNode(name1));
 			if (mode_change)
-				$("files").innerHTML += "<div class='button changed'>mode changed</div><p><a href='#" + id + "'>" + name1 + "</a> mode " + old_mode + " &#8594; " + new_mode + "</p>";
-			else
-				$("files").innerHTML += "<div class='button changed'>changed</div><p><a href='#" + id + "'>" + name1 + "</a></p>";
+				p.appendChild(document.createTextNode("mode " + old_mode + " &#8594; " + new_mode));
 		}
-		else if (name1 == "/dev/null")
-			$("files").innerHTML += "<div class='button created'>created</div><p><a href='#" + id + "'>" + name2 + "</a></p>";
-		else if (name2 == "/dev/null")
-			$("files").innerHTML += "<div class='button deleted'>deleted</div><p><a href='#" + id + "'>" + name1 + "</a></p>";
-		else
-			$("files").innerHTML += "<div class='button renamed' alt='renamed''>renamed</div><p>" + name1 + " &#8594; <a href='#" + id + "'>" + name2 + "</a></p>";
+		else if (name1 == "/dev/null") {
+			buttonType = "created";
+			link.appendChild(document.createTextNode(name2));
+		}
+		else if (name2 == "/dev/null") {
+			buttonType = "deleted";
+			link.appendChild(document.createTextNode(name1));
+		}
+		else {
+			buttonType = "renamed";
+			link.appendChild(document.createTextNode(name2));
+			p.insertBefore(document.createTextNode(name1), link);
+		}
+		button.setAttribute("class", "button " + buttonType);
+		button.appendChild(document.createTextNode(buttonType));
+		$("files").appendChild(button);
+		$("files").appendChild(p);
 	}
 
 	var binaryDiff = function(filename) {