[gitg/wip/patch-stage: 7/11] Add background filler for more consistent diff look

[Jesse van den Kieboom <jessevdk src gnome org>]

commit 6bebbd4aa68cc0d6048363ff8ad3f0096ba4cb97
Author: Jesse van den Kieboom <jessevdk gmail com>
Date:   Tue Dec 31 15:13:53 2013 +0100

    Add background filler for more consistent diff look

 libgitg/resources/diff-view-html-builder.js |   43 ++++++++++++++++++++------
 libgitg/resources/diff-view.css             |   19 ++++++++++++
 libgitg/resources/diff-view.html            |    4 +-
 3 files changed, 54 insertions(+), 12 deletions(-)
---
diff --git a/libgitg/resources/diff-view-html-builder.js b/libgitg/resources/diff-view-html-builder.js
index 0ced0eb..db5f4ae 100644
--- a/libgitg/resources/diff-view-html-builder.js
+++ b/libgitg/resources/diff-view-html-builder.js
@@ -16,6 +16,16 @@ function diff_file(file, lnstate, data)
        {
                var h = file.hunks[i];
 
+               if (!h)
+               {
+                       file_body += '<tr class="context">\
+                               <td class="gutter old">' + lnstate.gutterdots + '</td>\
+                               <td class="gutter new">' + lnstate.gutterdots + '</td>\
+                               <td></td>\
+                       </tr>';
+                       continue;
+               }
+
                var cold = h.range.old.start;
                var cnew = h.range.new.start;
 
@@ -97,29 +107,39 @@ function diff_file(file, lnstate, data)
                }
        }
 
-       var file_path;
+       var file_path = '';
+       var file_stats = '';
+       var file_classes = '';
 
-       if (file.file.new.path)
+       if (file.file)
        {
-               file_path = file.file.new.path;
+               if (file.file.new.path)
+               {
+                       file_path = file.file.new.path;
+               }
+               else
+               {
+                       file_path = file.file.old.path;
+               }
+
+               var total = added + removed;
+               var addedp = Math.floor(added / total * 100);
+               var removedp = 100 - addedp;
+
+               file_stats = '<span class="file_stats"><span class="number">' + (added + removed)  + 
'</span><span class="bar"><span class="added" style="width: ' + addedp + '%;"></span><span class="removed" 
style="width: ' + removedp + '%;"></span></span></span>';
        }
        else
        {
-               file_path = file.file.old.path;
+               file_classes = 'background';
        }
 
-       var total = added + removed;
-       var addedp = Math.floor(added / total * 100);
-       var removedp = 100 - addedp;
-
-       var file_stats = '<span class="file_stats"><span class="number">' + (added + removed)  + 
'</span><span class="bar"><span class="added" style="width: ' + addedp + '%;"></span><span class="removed" 
style="width: ' + removedp + '%;"></span></span></span>';
-
        var template = data.file_template;
        var repls = {
                'FILE_PATH': file_path,
                'FILE_BODY': file_body,
                'FILE_STATS': file_stats,
                'FILE_STAGE': lnstate.stagebutton,
+               'FILE_CLASSES': file_classes
        };
 
        for (var r in repls)
@@ -145,6 +165,7 @@ function diff_files(files, lines, maxlines, data)
                'FILE_BODY',
                'FILE_STATS',
                'FILE_STAGE'
+               'FILE_CLASSES'
        ];
 
        var replacements = {};
@@ -183,6 +204,8 @@ function diff_files(files, lines, maxlines, data)
 
                lnstate.stagebutton = '<span class="' + cls + '">' + nm + '</span>';
        }
+       // special empty background filler
+       f += diff_file({hunks: [null]}, lnstate, data);
 
        for (var i = 0; i < files.length; ++i)
        {
diff --git a/libgitg/resources/diff-view.css b/libgitg/resources/diff-view.css
index 6acaf1a..04e2d09 100644
--- a/libgitg/resources/diff-view.css
+++ b/libgitg/resources/diff-view.css
@@ -1,6 +1,7 @@
 body, html {
   padding: 0;
   margin: 0;
+  min-height: 100%;
 }
 
 div#templates {
@@ -21,6 +22,24 @@ div#diff div.file table {
   width: 100%;
 }
 
+div#diff div.file.background tr.file_header {
+  display: none;
+}
+
+div#diff div.file.background {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: -1;
+  opacity: 0.5;
+}
+
+div#diff div.file.background table.file {
+  height: 100%;
+}
+
 img.avatar {
   float: left;
   margin-right: 10px;
diff --git a/libgitg/resources/diff-view.html b/libgitg/resources/diff-view.html
index 0619ec4..91cb5cd 100644
--- a/libgitg/resources/diff-view.html
+++ b/libgitg/resources/diff-view.html
@@ -20,8 +20,8 @@
       </div>
 
       <!-- Diff template -->
-      <div class="file">
-        <table>
+      <div class="file ${FILE_CLASSES}" data-filename="${FILE_FILENAME}">
+        <table class="file">
           <colgroup>
             <col width="0">
             <col width="0">