[extensions-web] js: Add one-column diff view

[Jasper St. Pierre <jstpierre src gnome org>]

commit 5cbfffba4544ad5fd9fdf3905d7a0f5ca770986b
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Fri Jun 15 16:14:31 2012 -0400

    js: Add one-column diff view
    
    Inspired by GitHub, this transforms the old sdiff:
    
      | 10 | 10 | "shell-version": [ "3.2" ] | "shell-version": [
      |    | 11 |                            |     "3.2",
      |    | 12 |                            |     "3.4"
      |    | 13 |                            | ]
    
    into a better udiff:
    
      | 10 |    |- "shell-version": [ "3.2" ]
      |    | 10 |+ "shell-version": [
      |    | 11 |+     "3.2",
      |    | 12 |+     "3.4"
      |    | 13 |+ ]

 sweettooth/static/css/review.css |   15 ++++++++++---
 sweettooth/static/js/diff.js     |   39 ++++++++++++++++++++++++-------------
 2 files changed, 36 insertions(+), 18 deletions(-)
---
diff --git a/sweettooth/static/css/review.css b/sweettooth/static/css/review.css
index 715100c..13a4f76 100644
--- a/sweettooth/static/css/review.css
+++ b/sweettooth/static/css/review.css
@@ -63,6 +63,8 @@
     width: 100%;
     line-height: 1.2;
     white-space: pre;
+    border: 1px solid #ccc;
+    border-top: none;
 }
 
 .linum {
@@ -72,6 +74,7 @@
     margin: 0;
     padding-right: 1em;
     border-right: 1px solid #ccc;
+    padding: 0 6px;
 }
 
 /* colors stolen from Splinter */
@@ -83,12 +86,16 @@
     background-color: #bbffbb;
 }
 
-.diff-line.replaced {
-    background-color: #aaccff;
+.diff-line.deleted .diff-inline.changed {
+    background-color: #ffaa88;
 }
 
-.diff-inline.changed {
-    background-color: #cceeff;
+.diff-line.inserted .diff-inline.changed {
+    background-color: #99ff99;
+}
+
+.contents {
+    width: 100%;
 }
 
 .fileselector.unchanged {
diff --git a/sweettooth/static/js/diff.js b/sweettooth/static/js/diff.js
index 4c187be..feb3cce 100644
--- a/sweettooth/static/js/diff.js
+++ b/sweettooth/static/js/diff.js
@@ -5,9 +5,9 @@ define(['jquery'], function($) {
 
     var exports = {};
 
-    // Each table row has four columns:
+    // Each table row has three columns:
     // ===================================================================
-    // | Old Line Number | Old Contents | New Line Number | New Contents |
+    // | Old Line Number | New Line Number | Diff |
     //
     // Each "buildChunk" function below should build full row(s).
 
@@ -52,7 +52,6 @@ define(['jquery'], function($) {
 
             var $row = $('<tr>', {'class': 'diff-line equal'}).
                 append($('<td>', {'class': 'old linum'}).text(oldLinum)).
-                append($('<td>', {'class': 'old contents'}).html(contents)).
                 append($('<td>', {'class': 'new linum'}).text(newLinum)).
                 append($('<td>', {'class': 'new contents'}).html(contents));
 
@@ -86,7 +85,6 @@ define(['jquery'], function($) {
 
             return $('<tr>', {'class': 'diff-line inserted'}).
                 append($('<td>', {'class': 'linum'})).
-                append($('<td>')).
                 append($('<td>', {'class': 'new linum'}).text(linum)).
                 append($('<td>', {'class': 'new contents'}).html(contents));
         });
@@ -99,9 +97,8 @@ define(['jquery'], function($) {
 
             return $('<tr>', {'class': 'diff-line deleted'}).
                 append($('<td>', {'class': 'old linum'}).text(linum)).
-                append($('<td>', {'class': 'old contents'}).html(contents)).
                 append($('<td>', {'class': 'linum'})).
-                append($('<td>'));
+                append($('<td>', {'class': 'old contents'}).html(contents));
         });
     }
 
@@ -156,21 +153,35 @@ define(['jquery'], function($) {
     }
 
     function buildReplaceChunk(chunk, oldContents, newContents) {
-        return $.map(chunk.lines, function(line) {
+        // Replace chunks are built up of a delete chunk and
+        // an insert chunk, with special inline replace regions
+        // for the inline modifications.
+
+        var deleteChunk = [], insertChunk = [];
+
+        $.each(chunk.lines, function() {
+            var line = this;
+
             var oldLinum = line[1], newLinum = line[2];
             var oldRegion = line[3], newRegion = line[4];
 
             var oldContent = oldContents[oldLinum - 1];
             var newContent = newContents[newLinum - 1];
 
-            return $('<tr>', {'class': 'diff-line replaced'}).
-                append($('<td>', {'class': 'old linum'}).text(oldLinum)).
-                append($('<td>', {'class': 'old contents'})
-                       .append(flatten(buildReplaceRegions(oldRegion, oldContent)))).
-                append($('<td>', {'class': 'new linum'}).text(newLinum)).
-                append($('<td>', {'class': 'new contents'})
-                       .append(flatten(buildReplaceRegions(newRegion, newContent))));
+            deleteChunk.push($('<tr>', {'class': 'diff-line deleted'}).
+                             append($('<td>', {'class': 'old linum'}).text(oldLinum)).
+                             append($('<td>', {'class': 'linum'})).
+                             append($('<td>', {'class': 'old contents'})
+                                    .append(flatten(buildReplaceRegions(oldRegion, oldContent)))));
+
+            insertChunk.push($('<tr>', {'class': 'diff-line inserted'}).
+                             append($('<td>', {'class': 'linum'})).
+                             append($('<td>', {'class': 'new linum'}).text(newLinum)).
+                             append($('<td>', {'class': 'new contents'})
+                                    .append(flatten(buildReplaceRegions(newRegion, newContent)))));
         });
+
+        return [flatten(deleteChunk), flatten(insertChunk)];
     }
 
     var operations = {