[PATCHv3 4/8] gitweb: Give side-by-side diff extra CSS styling
- From
Jakub Narebski <jnareb@gmail.com>
- Date
- Oct 30, 2011, 23:36 UTC
- Message-ID
- <1320017787-18048-5-git-send-email-jnareb@gmail.com>
- In-Reply-To
- <1320017787-18048-1-git-send-email-jnareb@gmail.com>
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> --- This patch is new in this version of series.
Note that the code could probably be written with less duplication, at the cost of being more complicated. I think it is worth tradeoff as written here.
For how output looks like, compare for example:
http://confluence.atlassian.com/display/FISHEYE/Using+Side+by+Side+Diff+View
gitweb/gitweb.perl | 39 +++++++++++++++++++++++++++++---------- gitweb/static/gitweb.css | 13 +++++++++++++ 2 files changed, 42 insertions(+), 10 deletions(-)
diff --git a/gitweb/gitweb.perl b/gitweb/gitweb.perl index 68629f6..f69ed08 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 21842a6..c7827e8 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;
-- 1.7.6