#4 Expand a commit to see commit details and files that changed in th…

…e commit

media/main.css

@@ -1,12 +1,13 @@
+/* Body */
 body{
 	margin:0;
 	padding:0;
 }
-
 body.notGitRepository h1, body.notGitRepository p{
 	text-align:center;
 }
 
+/* Commit Graph */
 #commitGraph{
 	display:block;
 	position:absolute;
@@ -38,6 +39,8 @@ body.notGitRepository h1, body.notGitRepository p{
 	fill:none;
 	stroke-width:2;
 }
+
+/* Commit Table */
 #commitTable{
 	display:block;
 	position:absolute;
@@ -58,11 +61,11 @@ body.notGitRepository h1, body.notGitRepository p{
 	font-size:14px;
 	cursor:default;
 }
-#commitTable tr:hover td, #commitTable tr.commit.contextMenuActive td{
-	background-color:rgba(128,128,128,0.15);
+#commitTable tr.commit:hover td, #commitTable tr.commit.contextMenuActive td, #commitTable tr.commit.dialogActive td, #commitTable tr.commit.commitDetailsOpen td{
+	background-color:rgba(128,128,128,0.2);
 }
-#commitTable tr.noHighlight:hover td{
-	background-color:unset;
+#commitTable tr.commit:hover td{
+	cursor:pointer;
 }
 #commitTable td{
 	line-height:24px;
@@ -90,6 +93,119 @@ body.notGitRepository h1, body.notGitRepository p{
 	text-overflow:ellipsis;
 	overflow:hidden;
 }
+
+/* Commit Details View */
+#commitDetails{
+	height:248px;
+	vertical-align:top;
+}
+#commitDetails td{
+	background-color:rgba(128,128,128,0.1);
+	position:relative;
+	font-size:13px;
+	line-height:18px;
+	border-top:1px solid rgba(128,128,128,0.5);
+	border-bottom:1px solid rgba(128,128,128,0.5);
+	white-space:normal;
+}
+#commitDetailsSummary{
+	position:absolute;
+	left:0;
+	top:0;
+	bottom:0;
+	width:45%;
+	padding:10px;
+	box-sizing:border-box;
+	overflow-x:hidden;
+	overflow-y:scroll;
+	text-overflow:ellipsis;
+	border-left:1px solid rgba(128,128,128,0.5);
+	border-right:1px solid rgba(128,128,128,0.5);
+	user-select:text;
+}
+#commitTable tr.commit.commitDetailsOpen td{
+	border-top:1px solid rgba(128,128,128,0.5);
+}
+#commitDetailsFiles{
+	position:absolute;
+	right:32px;
+	top:0;
+	bottom:0;
+	left:45%;
+	border-right:1px solid rgba(128,128,128,0.5);
+	overflow-x:hidden;
+	overflow-y:scroll;
+	padding:6px 0;
+	box-sizing:border-box;
+}
+#commitDetailsFiles ul{
+	list-style-type:none;
+	-webkit-margin-before:0;
+	-webkit-margin-after:0;
+	-webkit-margin-start:0px;
+	-webkit-margin-end:0px;
+	-webkit-padding-start:30px;
+}
+#commitDetailsFiles > ul{
+	-webkit-padding-start:10px;
+}
+#commitDetailsFiles li{
+	margin:4px 0;
+	white-space:nowrap;
+	text-overflow:ellipsis;
+	overflow-x:hidden;
+}
+#commitDetailsClose{
+	position:absolute;
+	right:4px;
+	top:4px;
+	width:24px;
+	height:24px;
+	cursor:pointer;
+}
+#commitDetailsClose svg{
+	width:24px;
+	height:24px;
+	fill:var(--vscode-editor-foreground);
+}
+svg.openFolderIcon, svg.closedFolderIcon, svg.fileIcon{
+	width:13px;
+	height:13px;
+	margin-top:2.5px;
+	fill:var(--vscode-editor-foreground);
+	margin-right:8px;
+	vertical-align:top;
+}
+.gitFolderContents.hidden{
+	display:none;
+}
+.gitFolder{
+	cursor:pointer;
+}
+.gitFile{
+	color:var(--vscode-gitDecoration-modifiedResourceForeground);
+}
+.gitFile.A{
+	color:var(--vscode-gitDecoration-addedResourceForeground);
+}
+.gitFile.D{
+	color:var(--vscode-gitDecoration-deletedResourceForeground);
+}
+.gitFileAddDel{
+	color:var(--vscode-editor-foreground);
+	margin-left:12px;
+}
+.gitFileAdditions, .gitFileDeletions{
+	padding:0 3px;
+}
+.gitFileAdditions{
+	color:var(--vscode-gitDecoration-addedResourceForeground);
+}
+.gitFileDeletions{
+	color:var(--vscode-gitDecoration-deletedResourceForeground);
+}
+
+/* Ref labels */
 .gitRef {
 	display:inline-block;
 	height:18px;
@@ -114,6 +230,7 @@ body.notGitRepository h1, body.notGitRepository p{
 	vertical-align:top;
 }
 
+/* Loader */
 #loadingHeader{
 	text-align:center;
 	line-height:32px;
@@ -178,6 +295,7 @@ body.notGitRepository h1, body.notGitRepository p{
 	cursor:pointer;
 }
 
+/* Context Menu */
 #contextMenu{
 	display:none;
 	position:absolute;
@@ -199,6 +317,7 @@ body.notGitRepository h1, body.notGitRepository p{
 	background-color:var(--vscode-menu-selectionBackground);
 }
 
+/* Dialogs */
 #dialog, #dialogBacking{
 	display:none;
 }
@@ -215,6 +334,7 @@ body.notGitRepository h1, body.notGitRepository p{
 	text-align:center;
 	max-width:360px;
 	z-index:10;
+	box-shadow:0 0 50px 15px var(--vscode-widget-shadow);
 }
 #dialog label{
 	margin-top:10px;
@@ -251,8 +371,6 @@ body.notGitRepository h1, body.notGitRepository p{
 	top:0;
 	bottom:0;
 	z-index:9;
-	background-color:var(--vscode-widget-shadow);
-	opacity:0.5;
 }
 #dialog.noInput #dialogAction, #dialog.inputInvalid #dialogAction{
 	background-color:rgba(128,128,128,0.2);
@@ -272,6 +390,7 @@ body.notGitRepository h1, body.notGitRepository p{
 	vertical-align:sub;
 }
 
+/* Buttons */
 .roundedBtn{
 	display:block;
 	background-color:rgba(128,128,128,0.2);
@@ -283,6 +402,8 @@ body.notGitRepository h1, body.notGitRepository p{
 .roundedBtn:hover{
 	background-color:rgba(128,128,128,0.4);
 }
+
+/* General */
 #commitGraph, #commitTable th, #commitTable td, .gitRef, #loadingHeader, .unselectable, .roundedBtn, #controls label{
 	user-select:none;
 }

src/dataSource.ts

@@ -1,10 +1,11 @@
 import * as cp from 'child_process';
 import { Config } from './config';
-import { GitCommandStatus, GitCommit, GitCommitNode, GitRef, GitResetMode, GitUnsavedChanges } from './types';
+import { GitCommandStatus, GitCommit, GitCommitDetails, GitCommitNode, GitFileChangeType, GitRef, GitResetMode, GitUnsavedChanges } from './types';
 
 const eolRegex = /\r\n|\r|\n/g;
-const gitLogSeparator = '4Rvn5rwg14BTwO3msm0ftBCk';
+const gitLogSeparator = 'XX7Nal-YARtTpjCikii9nJxER19D6diSyk-AWkPb';
 const gitLogFormat = ['%H', '%P', '%an', '%ae', '%at', '%s'].join(gitLogSeparator);
+const gitCommitDetailsFormat = ['%H', '%P', '%an', '%ae', '%at', '%cn', '%B'].join(gitLogSeparator);
 
 export class DataSource {
 	private workspaceDir: string;
@@ -98,6 +99,45 @@ export class DataSource {
 		return { commits: commitNodes, moreCommitsAvailable: moreCommitsAvailable };
 	}
 
+	public commitDetails(commitHash: string){
+		try {
+			let lines = cp.execSync('git show --quiet '+commitHash+' --format="'+gitCommitDetailsFormat+'"', { cwd: this.workspaceDir }).toString().split(eolRegex);
+			let commitInfo = lines[0].split(gitLogSeparator);
+			let details: GitCommitDetails = {
+				hash: commitInfo[0],
+				parents: commitInfo[1].split(' '),
+				author: commitInfo[2],
+				email: commitInfo[3],
+				date: parseInt(commitInfo[4]),
+				committer: commitInfo[5],
+				body: commitInfo[6],
+				fileChanges: []
+			};
+
+			let fileLookup:{[file:string]:number} = {};
+			lines = cp.execSync('git diff-tree --name-status -r -m --root '+commitHash, { cwd: this.workspaceDir }).toString().split(eolRegex);
+			for (let i = 1; i < lines.length - 1; i++) {
+				let line = lines[i].split('\t');
+				if(line.length !== 2) break;
+				fileLookup[line[1]] = details.fileChanges.length;
+				details.fileChanges.push({fileName: line[1], type: <GitFileChangeType>line[0], additions:null, deletions:null});
+			}
+			lines = cp.execSync('git diff-tree --numstat -r -m --root '+commitHash, { cwd: this.workspaceDir }).toString().split(eolRegex);
+			for (let i = 1; i < lines.length - 1; i++) {
+				let line = lines[i].split('\t');
+				if(line.length !== 3) break;
+				if(typeof fileLookup[line[2]] === 'number'){
+					details.fileChanges[fileLookup[line[2]]].additions = parseInt(line[0]);
+					details.fileChanges[fileLookup[line[2]]].deletions = parseInt(line[1]);
+				}
+			}
+			return details;
+		} catch (e) { 
+			return null;
+		}
+	}
+
+
 	public addTag(tagName: string, commitHash: string): GitCommandStatus {
 		return this.runGitCommand('git tag -a ' + escapeRefName(tagName) + ' -m "" ' + commitHash);
 	}

src/gitGraphView.ts

@@ -104,6 +104,12 @@ export class GitGraphView {
 						data: this.dataSource.resetToCommit(message.data.commitHash, message.data.resetMode)
 					});
 					return;
+				case 'commitDetails':
+					this.sendMessage({
+						command: 'commitDetails',
+						data: this.dataSource.commitDetails(message.data)
+					});
+					return;
 			}
 		}, null, this.disposables);
 	}

src/types.ts

@@ -20,6 +20,17 @@ export interface GitCommit {
 	message: string;
 }
 
+export interface GitCommitDetails {
+	hash: string;
+	parents: string[];
+	author: string;
+	email: string;
+	date: number;
+	committer: string;
+	body: string;
+	fileChanges: GitFileChange[];
+}
+
 export interface GitRef {
 	hash: string;
 	name: string;
@@ -39,6 +50,13 @@ export interface GitGraphViewSettings {
 	dateFormat: DateFormat;
 }
 
+export interface GitFileChange{
+	fileName: string;
+	type: GitFileChangeType;
+	additions: number | null;
+	deletions: number | null;
+}
+
 
 /* Request / Response Message Interfaces */
 
@@ -160,6 +178,16 @@ export interface ResponseResetToCommit {
 	data: GitCommandStatus;
 }
 
+export interface RequestCommitDetails {
+	command: 'commitDetails';
+	data: string;
+}
+export interface ResponseCommitDetails {
+	command: 'commitDetails';
+	data: GitCommitDetails | null;
+}
+
+
 /* Types */
 
 export type RequestMessage = RequestLoadBranchesMessage
@@ -171,7 +199,8 @@ export type RequestMessage = RequestLoadBranchesMessage
 	| RequestCheckoutBranch
 	| RequestDeleteBranch
 	| RequestRenameBranch
-	| RequestResetToCommit;
+	| RequestResetToCommit
+	| RequestCommitDetails;
 export type ResponseMessage = ResponseLoadBranchesMessage
 	| ResponseLoadCommitsMessage
 	| ResponseAddTag
@@ -181,8 +210,10 @@ export type ResponseMessage = ResponseLoadBranchesMessage
 	| ResponseCheckoutBranch
 	| ResponseDeleteBranch
 	| ResponseRenameBranch
-	| ResponseResetToCommit;
+	| ResponseResetToCommit
+	| ResponseCommitDetails;
 export type DateFormat = 'Date & Time' | 'Date Only' | 'Relative';
 export type GraphStyle = 'rounded' | 'angular';
 export type GitCommandStatus = string | null;
 export type GitResetMode = 'soft' | 'mixed' | 'hard';
+export type GitFileChangeType = 'A' | 'M' | 'D' | 'R' | 'C';

web/global.d.ts

@@ -1,6 +1,8 @@
 import {
     GitCommandStatus as GitCommandStatusX,
+    GitCommitDetails as GitCommitDetailsX,
     GitCommitNode as GitCommitNodeX,
+    GitFileChange as GitFileChangeX,
     GitGraphViewSettings as GitGraphViewSettingsX,
     GitResetMode as GitResetModeX,
     RequestMessage as RequestMessageX,
@@ -9,7 +11,9 @@ import {
 
 declare global {
     type GitCommandStatus = GitCommandStatusX;
+    type GitCommitDetails = GitCommitDetailsX;
     type GitCommitNode = GitCommitNodeX;
+    type GitFileChange = GitFileChangeX;
     type GitGraphViewSettings = GitGraphViewSettingsX;
     type GitResetMode = GitResetModeX;
     type RequestMessage = RequestMessageX;