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 <redacted>
Signed-off-by: Junio C Hamano <redacted>

diff --git a/gitweb.perl b/gitweb.perl
index 70469f29bd192237bb77ad7811b94764435b6a42fde55e621e0ff5d1eff0f771..4673a6937739b9ba5d065e1d80282ad8a4d16271474280bffb58791469f11a16 100755 (executable)
--- a/gitweb.perl
+++ b/gitweb.perl
@@ -4891,7 +4891,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>',
@@ -4903,15 +4903,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/static/gitweb.css b/static/gitweb.css
index dd44c68892b284ece44a1e2f39b0d2aab29c6b5a10adc7be0deac351d7f5b138..13ab6020719ba61eec5e47f80bde477c689107d9e6cdc04b2f2c22713cf4414d 100644 (file)
--- a/static/gitweb.css
+++ b/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;