From 6ba1eb51b94c4777d84e4c9c868096735b1e16dd Mon Sep 17 00:00:00 2001
From: Kato Kazuyoshi <kato.kazuyoshi@gmail.com>
Date: Mon, 31 Oct 2011 00:36:22 +0100
Subject: gitweb: Add a feature to show side-by-side diff

This commits adds to support for showing "side-by-side" style diff.
Currently you have to hand-craft the URL; navigation for selecting
diff style is to be added in the next commit.

The diff output in unified format from "git diff-tree" is reorganized to
side-by-side style chunk by chunk with format_sidebyside_diff_chunk().
This reorganization requires knowledge about diff line classification,
so format_diff_line() was renamed to process_diff_line(), and changed to
return tuple (list) consisting of class of diff line and of
HTML-formatted (but not wrapped in <div class="diff ...">...</div>) diff
line.  Wrapping is now done by caller, i.e. git_patchset_body().

Gitweb uses float+margin CSS-based layout for "side by side" diff.

You can specify style of diff with "ds" ('diff_style') query
parameter.  Currently supported values are 'inline' and 'sidebyside';
the default is 'inline'.

Another solution would be to use "opt" ('extra_options') for that...
though current use of it in gitweb seems to suggest that "opt" is more
about passing extra options to underlying git commands, and "git diff"
doesn't support '--side-by-side' like GNU diff does, (yet?).

Signed-off-by: Kato Kazuyoshi <kato.kazuyoshi@gmail.com>
Signed-off-by: Jakub Narebski <jnareb@gmail.com>
Signed-off-by: Junio C Hamano <gitster@pobox.com>
---
 gitweb/static/gitweb.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

(limited to 'gitweb/static/gitweb.css')

diff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css
index 7d88509208..21842a66ac 100644
--- a/gitweb/static/gitweb.css
+++ b/gitweb/static/gitweb.css
@@ -475,6 +475,23 @@ div.diff.nodifferences {
 	color: #600000;
 }
 
+/* side-by-side diff */
+div.chunk_block {
+	overflow: hidden;
+}
+
+div.chunk_block div.old {
+	float: left;
+	width: 50%;
+	overflow: hidden;
+}
+
+div.chunk_block div.new {
+	margin-left: 50%;
+	width: 50%;
+}
+
+
 div.index_include {
 	border: solid #d9d8d1;
 	border-width: 0px 0px 1px;
-- 
cgit 


From 970fac5e24966d7e296cd044de6a6d0ba585c8c5 Mon Sep 17 00:00:00 2001
From: Jakub Narebski <jnareb@gmail.com>
Date: Mon, 31 Oct 2011 00:36:23 +0100
Subject: gitweb: Give side-by-side diff extra CSS styling

Use separate background colors for pure removal, pure addition and
change for side-by-side diff.  This makes reading such diff easier,
allowing to easily distinguish empty lines in diff from vertical
whitespace used to align chunk blocks.

Note that if lines in diff were numbered, the absence of line numbers
[for one side] would help in distinguishing empty lines from vertical
align.

Signed-off-by: Jakub Narebski <jnareb@gmail.com>
Signed-off-by: Junio C Hamano <gitster@pobox.com>
---
 gitweb/gitweb.perl       | 39 +++++++++++++++++++++++++++++----------
 gitweb/static/gitweb.css | 13 +++++++++++++
 2 files changed, 42 insertions(+), 10 deletions(-)

(limited to 'gitweb/static/gitweb.css')

diff --git a/gitweb/gitweb.perl b/gitweb/gitweb.perl
index 68629f66c9..f69ed08310 100755
--- a/gitweb/gitweb.perl
+++ b/gitweb/gitweb.perl
@@ -4890,7 +4890,7 @@ sub print_sidebyside_diff_chunk {
 		# empty contents block on start rem/add block, or end of chunk
 		if (@ctx && (!$class || $class eq 'rem' || $class eq 'add')) {
 			print join '',
-				'<div class="chunk_block">',
+				'<div class="chunk_block ctx">',
 					'<div class="old">',
 					@ctx,
 					'</div>',
@@ -4902,15 +4902,34 @@ sub print_sidebyside_diff_chunk {
 		}
 		# empty add/rem block on start context block, or end of chunk
 		if ((@rem || @add) && (!$class || $class eq 'ctx')) {
-			print join '',
-				'<div class="chunk_block">',
-					'<div class="old">',
-					@rem,
-					'</div>',
-					'<div class="new">',
-					@add,
-					'</div>',
-				'</div>';
+			if (!@add) {
+				# pure removal
+				print join '',
+					'<div class="chunk_block rem">',
+						'<div class="old">',
+						@rem,
+						'</div>',
+					'</div>';
+			} elsif (!@rem) {
+				# pure addition
+				print join '',
+					'<div class="chunk_block add">',
+						'<div class="new">',
+						@add,
+						'</div>',
+					'</div>';
+			} else {
+				# assume that it is change
+				print join '',
+					'<div class="chunk_block chg">',
+						'<div class="old">',
+						@rem,
+						'</div>',
+						'<div class="new">',
+						@add,
+						'</div>',
+					'</div>';
+			}
 			@rem = @add = ();
 		}
 
diff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css
index 21842a66ac..c7827e8f1d 100644
--- a/gitweb/static/gitweb.css
+++ b/gitweb/static/gitweb.css
@@ -491,6 +491,19 @@ div.chunk_block div.new {
 	width: 50%;
 }
 
+div.chunk_block.rem div.old div.diff.rem {
+	background-color: #fff5f5;
+}
+div.chunk_block.add div.new div.diff.add {
+	background-color: #f8fff8;
+}
+div.chunk_block.chg div     div.diff {
+	background-color: #fffff0;
+}
+div.chunk_block.ctx div     div.diff.ctx {
+	color: #404040;
+}
+
 
 div.index_include {
 	border: solid #d9d8d1;
-- 
cgit