add commit file links and ctrl-arrow navigation

A list of files included in a commit are listed below the
commit message. The list are links which will take you to
that file in the diff display below.

The title of each fileHeader is now just the path to the file
instead of the full diff command.

While the focus is in the commit ctrl-down_arrow and up_arrow
will navigate to to next and previous file in that commit.

html/css/diff.css

@@ -3,6 +3,14 @@ body {
 	margin-top: 5px;
 	width: 100%;
 }
+
+.fileHeader {
+	margin-top: 0px;
+	padding-top: 2px;
+	padding-bottom: 1px;
+	border-top:0.1em solid #999999;
+}
+
 code .delline, code .oldfile {
   background-color: #FEE;
   color: #B00;

html/lib/diffHighlighter.js

@@ -13,6 +13,8 @@ var highlightDiffs = function() {
 		var diff = diffs[diffn];
 
 		var content = diff.innerHTML.replace(/\t/g, "    ");;
+		
+		var file_index = 0;
 
 		var line1 = "";
 		var line2 = "";
@@ -33,10 +35,12 @@ var highlightDiffs = function() {
 				if (firstChar == "+" || firstChar == "-")
 					continue;
 			} else if (firstChar == "d") {
+				++file_index;
 				header = true;
 				line1 += '\n';
 				line2 += '\n';
-				diffContent += '<div class="fileHeader"><span class="fileline">' + l + '</span></div>';
+				var match = l.match(/diff --git a\/(\S*)/);
+				diffContent += '</div><div class="fileHeader" id="file_index_' + file_index + '">' + file_index + ' <span class="fileline">' + match[1] + '</span></div>';
 				continue;
 			}
 

html/lib/keyboardNavigation.js

@@ -2,13 +2,21 @@ var scrollToCenter = function(element) {
     window.scrollTo(0, element.offsetTop);
 }
 
+var scrollToTop = function(element) {
+	element.scrollIntoView(true);
+}
+
 var handleKeys = function(event) {
-	if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+	if (event.altKey || event.metaKey || event.shiftKey)
 		return;
 	if (event.keyCode == 74)
 		return changeHunk(true);
 	else if (event.keyCode == 75)
 		return changeHunk(false);
+	else if (event.keyCode == 40 && event.ctrlKey == true) // ctrl-down_arrow
+		return changeFile(true);
+	else if (event.keyCode == 38 && event.ctrlKey == true) // ctrl-up_arrow
+		return changeFile(false);
 	else if (event.keyCode == 86) {// 'v'
 		showDiffs();
 		return false;
@@ -21,6 +29,10 @@ var handleKeyFromCocoa = function(key) {
 		changeHunk(true);
 	else if (key == 'k')
 		changeHunk(false);
+	else if (event.keyCode == 40 && event.ctrlKey == true) // ctrl-down_arrow
+		changeFile(true);
+	else if (event.keyCode == 38 && event.ctrlKey == true) // ctrl-up_arrow
+		changeFile(false);
 	else if (key == 'v')
 		showDiffs();
 	else if (key == 'c')
@@ -57,6 +69,42 @@ var changeHunk = function(next) {
 	return false;
 }
 
+var changeFile = function(next) {
+	var files = document.getElementsByClassName("fileHeader");
+	
+	if (files.length == 0)
+		return;
+	
+	var currentFile = document.getElementById("CurrentFile");
+	var newFile;
+	
+	var index = -1;
+	for (; index < files.length; ++index) {
+		if (files[index] == currentFile)
+			break;
+	}
+	
+	if (currentFile && index >= 0) {
+		currentFile.id = null;
+		
+		if (next) {
+			if (index <= files.length-1)
+				newFile = files[index + 1];			
+		}
+		else {
+			newFile = files[index - 1];
+			if (!newFile)
+				newFile = files[files.length-1];
+		}
+	}
+	if (!newFile)
+		newFile = files[0];
+	
+	newFile.id = 'CurrentFile';
+	scrollToTop(newFile);
+	return false;
+}
+
 document.onkeydown = function(event) {
 	return handleKeys(event);
 };

html/views/history/history.css

@@ -54,12 +54,39 @@ a.servicebutton{
 	font-weight: bold;
 }
 
+
+#message_files {
+	margin: 5px;
+	padding-left: 1em;
+	width: auto;
+}
+
 #message {
 	font-family: Monaco;
-	margin: 5px;
-	margin-left: 20px;
-	width: auto;
-	font-size: 12px;
+	font-size: 10px;
+}
+
+#files {
+	margin-top: 1em;
+	font-family: Monaco;
+	font-size: 10px;
+}
+
+#files a {
+	color: #666666;
+}
+
+#files a:hover {
+	color: #4444ff;
+}
+
+.clear_both {
+	clear:both;
+	display:block;
+	height:1px;
+	line-height:0;
+	margin:1em;
+	visibility:hidden;
 }
 
 #details {

html/views/history/history.js

@@ -33,6 +33,13 @@ var Commit = function(obj) {
 
 		this.author_date = new Date(parseInt(match[3]) * 1000);
 
+		this.files = this.raw.match(/diff --git a\/\S*/g);
+		
+		for (var i=0; i < this.files.length; i++) {
+			var match = this.files[i].match(/diff --git a\/(.*)/);
+			this.files[i] = match[1];
+		}
+
 		match = this.header.match(/\ncommitter (.*) <(.*@.*)> ([0-9].*)/);
 		this.committer_name = match[1];
 		this.committer_email = match[2];
@@ -153,6 +160,7 @@ var loadCommit = function(commitObject, currentRef) {
 	$("subjectID").innerHTML = commit.subject.escapeHTML();
 	$("details").innerHTML = ""
 	$("message").innerHTML = ""
+	$("files").innerHTML = ""
 	$("date").innerHTML = ""
 	showRefs();
 
@@ -181,6 +189,15 @@ var loadExtendedCommit = function(commit)
 	$("date").innerHTML = commit.author_date;
 	$("message").innerHTML = commit.message.replace(/\n/g,"<br>");
 
+	if (commit.files)
+		var commit_file_links = commit.files;
+		for (var i=0; i < commit_file_links.length; i++) {
+			index = i+1;
+			commit_file_links[i] = "<a href='#file_index_" + i + "'>" + commit.files[i] + "</a>";
+		}
+		
+		$("files").innerHTML = commit_file_links.join("<br>");
+
 	if (commit.diff.length < 200000) {
 		showDiffs();
 	} else {

html/views/history/index.html

@@ -47,6 +47,9 @@
 		<div id="notification_message"></div>
 	</div>
 	<hr>
-	<pre id="message"></pre>
+	<div id="message_files">
+		<div id="message"></div>
+		<div id="files"></div>
+	</div>
 	<pre><code class="diffcode" id='details'></code></pre>
 </body>