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>
This commit is contained in:
Jakub Narebski 2011-10-31 00:36:23 +01:00 committed by Junio C Hamano
parent 6ba1eb51b9
commit 970fac5e24
2 changed files with 42 additions and 10 deletions

View File

@ -4890,7 +4890,7 @@ sub print_sidebyside_diff_chunk {
# empty contents block on start rem/add block, or end of chunk # empty contents block on start rem/add block, or end of chunk
if (@ctx && (!$class || $class eq 'rem' || $class eq 'add')) { if (@ctx && (!$class || $class eq 'rem' || $class eq 'add')) {
print join '', print join '',
'<div class="chunk_block">', '<div class="chunk_block ctx">',
'<div class="old">', '<div class="old">',
@ctx, @ctx,
'</div>', '</div>',
@ -4902,15 +4902,34 @@ sub print_sidebyside_diff_chunk {
} }
# empty add/rem block on start context block, or end of chunk # empty add/rem block on start context block, or end of chunk
if ((@rem || @add) && (!$class || $class eq 'ctx')) { if ((@rem || @add) && (!$class || $class eq 'ctx')) {
print join '', if (!@add) {
'<div class="chunk_block">', # pure removal
'<div class="old">', print join '',
@rem, '<div class="chunk_block rem">',
'</div>', '<div class="old">',
'<div class="new">', @rem,
@add, '</div>',
'</div>', '</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 = (); @rem = @add = ();
} }

View File

@ -491,6 +491,19 @@ div.chunk_block div.new {
width: 50%; 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 { div.index_include {
border: solid #d9d8d1; border: solid #d9d8d1;