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>
Jakub Narebski committed
Oct 31, 2011 at 00:36 UTC
970fac5e24966d7e296cd044de6a6d0ba585c8c5
2 files changed
+42
-10
gitweb/gitweb.perl
+29
-10
@@ -4890,7 +4890,7 @@ sub print_sidebyside_diff_chunk {
4890
# empty contents block on start rem/add block, or end of chunk
4891
if (@ctx && (!$class || $class eq 'rem' || $class eq 'add')) {
4892
print join '',
4893
- '<div class="chunk_block">',
4893
+ '<div class="chunk_block ctx">',
4894
'<div class="old">',
4895
@ctx,
4896
'</div>',
@@ -4902,15 +4902,34 @@ sub print_sidebyside_diff_chunk {
4902
}
4903
# empty add/rem block on start context block, or end of chunk
4904
if ((@rem || @add) && (!$class || $class eq 'ctx')) {
4905
- print join '',
4906
- '<div class="chunk_block">',
4907
- '<div class="old">',
4908
- @rem,
4909
- '</div>',
4910
- '<div class="new">',
4911
- @add,
4912
- '</div>',
4913
- '</div>';
4905
+ if (!@add) {
4906
+ # pure removal
4907
+ print join '',
4908
+ '<div class="chunk_block rem">',
4909
+ '<div class="old">',
4910
+ @rem,
4911
+ '</div>',
4912
+ '</div>';
4913
+ } elsif (!@rem) {
4914
+ # pure addition
4915
+ print join '',
4916
+ '<div class="chunk_block add">',
4917
+ '<div class="new">',
4918
+ @add,
4919
+ '</div>',
4920
+ '</div>';
4921
+ } else {
4922
+ # assume that it is change
4923
+ print join '',
4924
+ '<div class="chunk_block chg">',
4925
+ '<div class="old">',
4926
+ @rem,
4927
+ '</div>',
4928
+ '<div class="new">',
4929
+ @add,
4930
+ '</div>',
4931
+ '</div>';
4932
+ }
4933
@rem = @add = ();
4934
}
4935
gitweb/static/gitweb.css
+13
@@ -491,6 +491,19 @@ div.chunk_block div.new {
491
width: 50%;
492
}
493
494
+div.chunk_block.rem div.old div.diff.rem {
495
+ background-color: #fff5f5;
496
+}
497
+div.chunk_block.add div.new div.diff.add {
498
+ background-color: #f8fff8;
499
+}
500
+div.chunk_block.chg div div.diff {
501
+ background-color: #fffff0;
502
+}
503
+div.chunk_block.ctx div div.diff.ctx {
504
+ color: #404040;
505
+}
506
+
507
508
div.index_include {
509
border: solid #d9d8d1;