Merge pull request #178 from stockmind/emptyplaceholder

Target and style blank lines in side-by-side view

Author: rtfpessoa

src/side-by-side-printer.js

@@ -224,6 +224,14 @@
   SideBySidePrinter.prototype.generateSingleLineHtml = function(isCombined, type, number, content, possiblePrefix) {
     var lineWithoutPrefix = content;
     var prefix = possiblePrefix;
+    var lineClass = 'd2h-code-side-linenumber';
+    var contentClass = 'd2h-code-side-line';
+
+    if (!number && !content) {
+      lineClass += ' d2h-code-side-emptyplaceholder';
+      contentClass += ' d2h-code-side-emptyplaceholder';
+      type += ' d2h-emptyplaceholder';
+    }
 
     if (!prefix) {
       var lineWithPrefix = printerUtils.separatePrefix(isCombined, content);
@@ -234,8 +242,8 @@
     return hoganUtils.render(genericTemplatesPath, 'line',
       {
         type: type,
-        lineClass: 'd2h-code-side-linenumber',
-        contentClass: 'd2h-code-side-line',
+        lineClass: lineClass,
+        contentClass: contentClass,
         prefix: prefix,
         content: lineWithoutPrefix,
         lineNumber: number

src/ui/css/diff2html.css

@@ -196,6 +196,12 @@
   text-overflow: ellipsis;
 }
 
+.d2h-code-side-emptyplaceholder,
+.d2h-emptyplaceholder {
+  background-color: #f1f1f1;
+  border-color: #e1e1e1;
+}
+
 /*
  * Changes Highlight
  */

test/side-by-side-printer-tests.js

@@ -99,12 +99,12 @@ describe('SideBySidePrinter', function() {
         '        </div>\n' +
         '    </td>\n' +
         '</tr><tr>\n' +
-        '    <td class="d2h-code-side-linenumber d2h-cntx">\n' +
+        '    <td class="d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder">\n' +
         '      ' +
         '\n' +
         '    </td>\n' +
-        '    <td class="d2h-cntx">\n' +
-        '        <div class="d2h-code-side-line d2h-cntx">\n' +
+        '    <td class="d2h-cntx d2h-emptyplaceholder">\n' +
+        '        <div class="d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder">\n' +
         '        </div>\n' +
         '    </td>\n' +
         '</tr>';