[extensions-web] review: Add a new button to expand/collapse collapsable diff equal sections

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

commit c31cffa1181600b0a14a459654b99c63e9030e7c
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Mon Feb 6 18:04:19 2012 -0500

    review: Add a new button to expand/collapse collapsable diff equal sections
    
    This should cut down on the amount of "change hunting" that a reviewer
    needs to do to properly review an extension.

 sweettooth/static/css/review.css |   18 +++++++++++++++
 sweettooth/static/js/diff.js     |   44 +++++++++++++++++++++++++++++++++----
 2 files changed, 57 insertions(+), 5 deletions(-)
---
diff --git a/sweettooth/static/css/review.css b/sweettooth/static/css/review.css
index 4143770..e083402 100644
--- a/sweettooth/static/css/review.css
+++ b/sweettooth/static/css/review.css
@@ -115,6 +115,24 @@ p.nochanges {
     color: #747474;
 }
 
+.collapsable-trigger-row.collapsed {
+    height: 2.6em;
+}
+
+.collapsable-collapsed-row {
+    background-color: #f4f4f4;
+}
+
+.collapsable-trigger {
+    margin-left: 1.2em;
+    padding: 0 0.3em;
+    background-color: #aaccff;
+    border-radius: 50%;
+    cursor: pointer;
+    color: #000;
+    font-weight: bold;
+}
+
 .linenumbers pre, .linum {
     color: #aaa;
     text-align: right;
diff --git a/sweettooth/static/js/diff.js b/sweettooth/static/js/diff.js
index 1a0f2cd..2362561 100644
--- a/sweettooth/static/js/diff.js
+++ b/sweettooth/static/js/diff.js
@@ -19,7 +19,29 @@ define(['jquery'], function($) {
     }
 
     function buildEqualChunk(chunk, oldContents, newContents) {
-        return $.map(chunk.lines, function(line, i) {
+        function triggerCollapse() {
+            // show() and hide() don't work on table-rows - jQuery
+            // will set the row back to 'display: block'. Unsure if it's
+            // a jQuery or browser bug.
+            if (collapsed) {
+                $triggerRow.removeClass('collapsed');
+                $collapsable.css('display', 'table-row');
+                $triggers.text('-');
+            } else {
+                $triggerRow.addClass('collapsed');
+                $collapsable.css('display', 'none');
+                $triggers.text('+');
+            }
+
+            collapsed = !collapsed;
+        }
+
+        var $triggerRow;
+        var $triggers = $();
+        var $collapsable = $();
+        var collapsed = false;
+
+        var $elems = $.map(chunk.lines, function(line, i) {
             var oldLinum = line[1];
             var newLinum = line[2];
 
@@ -32,14 +54,26 @@ define(['jquery'], function($) {
                 append($('<td>', {'class': 'new contents'}).html(contents));
 
             if (chunk.collapsable) {
-                if (i == 0)
-                    $row.addClass('collapsable-first');
-                else
-                    $row.addClass('collapsable-rest');
+                if (i == 0) {
+                    $triggerRow = $row;
+                    $row.addClass('collapsable-trigger-row').find('.contents').each(function() {
+                        var $trigger = $('<a>', {'class': 'collapsable-trigger'}).click(triggerCollapse);
+                        $triggers = $triggers.add($trigger);
+                        $(this).append($trigger);
+                    });
+                } else {
+                    $row.addClass('collapsable-collapsed-row');
+                    $collapsable = $collapsable.add($row);
+                }
             }
 
             return $row;
         });
+
+        if (chunk.collapsable)
+            triggerCollapse($collapsable);
+
+        return $elems;
     }
 
     function buildInsertChunk(chunk, oldContents, newContents) {