[bugzilla-gnome-org-extensions] Different colors for different reviewers; who/when on individual comments

[Krzesimir Nowak <krnowak src gnome org>]

commit f3b780739c62b1b3e6b77f0f76f1957e519a601a
Author: Owen W. Taylor <otaylor fishsoup net>
Date:   Sat Sep 12 22:51:27 2009 -0400

    Different colors for different reviewers; who/when on individual comments
    
    Use up to 5 different colors for different reviewers. (Number could easily
    be increased, but would require coming up with more colors. 5 reviews on a single
    patch seems like a lot.)
    
    Add the reviewer name and review date to each individual comment.

 js/review.js     |    8 ++++--
 js/splinter.js   |   62 ++++++++++++++++++++++++++++++++++++++++--------------
 web/splinter.css |   62 ++++++++++++++++++++++++++++++++++++++++-------------
 3 files changed, 98 insertions(+), 34 deletions(-)
---
diff --git a/js/review.js b/js/review.js
index dc8ba4e..720d522 100644
--- a/js/review.js
+++ b/js/review.js
@@ -252,8 +252,8 @@ File.prototype = {
     }
 };
 
-function Review(patch) {
-    this._init(patch);
+function Review(patch, who, date) {
+    this._init(patch, who, date);
 }
 
 // Indicates start of review comments about a file
@@ -270,9 +270,11 @@ const FILE_START_RE = /^:::[ \t]+(\S+)[ \t]*\n/mg;
 const HUNK_RE = /^@@[ \t]+(?:-(\d+),(\d+)[ \t]+)?(?:\+(\d+),(\d+)[ \t]+)?@@.*\n((?:(?!@@|:::).*\n?)*)/mg;
 
 Review.prototype = {
-    _init : function(patch) {
+    _init : function(patch, who, date) {
         this.date = null;
         this.patch = patch;
+        this.who = who;
+        this.date = date;
         this.intro = null;
         this.files = [];
 
diff --git a/js/splinter.js b/js/splinter.js
index 404b252..3d2390e 100644
--- a/js/splinter.js
+++ b/js/splinter.js
@@ -11,6 +11,8 @@ var theAttachment;
 var thePatch;
 var theReview;
 
+var reviewers = {};
+
 var saveDraftTimeoutId;
 var saveDraftNoticeTimeoutId;
 var savingDraft = false;
@@ -203,34 +205,51 @@ function getSeparatorClass(type) {
     return null;
 }
 
+function getReviewerClass(review) {
+    var reviewerIndex;
+    if (review == theReview)
+        reviewerIndex = 0;
+    else
+        reviewerIndex = (reviewers[review.who] - 1) % 5 + 1;
+
+    return "reviewer-" + reviewerIndex;
+}
+
 function addCommentDisplay(row, comment) {
     var commentArea = ensureCommentArea(row);
-
-    var commentorIndex;
-    if (comment.file.review == theReview)
-        commentorIndex = 0;
-    else
-        commentorIndex = 1;
+    var review = comment.file.review;
 
     var separatorClass = getSeparatorClass(comment.type);
     if (separatorClass)
         $("<div></div>")
             .addClass(separatorClass)
-            .addClass("comment-"+ commentorIndex)
+            .addClass(getReviewerClass(review))
             .appendTo(commentArea);
 
-    $("<div class='comment'>"
+    var q = $("<div class='comment'>"
       + "<div class='comment-frame'>"
+      + "<div class='reviewer-box'>"
       + "<div class='comment-text'></div>"
       + "</div>"
+      + "</div>"
       + "</div>")
         .find(".comment-text").text(comment.comment).end()
         .addClass(getTypeClass(comment.type))
-        .addClass("comment-"+ commentorIndex)
+        .addClass(getReviewerClass(review))
         .appendTo(commentArea)
         .dblclick(function() {
                       insertCommentEditor(row, comment.type);
                   });
+
+    if (review != theReview) {
+        $("<div class='review-info'>"
+          + "<div class='reviewer'></div><div class='review-date'></div>"
+          + "<div class='review-info-bottom'></div>"
+          + "</div>")
+            .find(".reviewer").text(review.who).end()
+            .find(".review-date").text(Utils.formatDate(review.date)).end()
+            .appendTo(q.find(".reviewer-box"));
+    }
 }
 
 function saveComment(row, file, location, type) {
@@ -278,8 +297,8 @@ function insertCommentEditor(clickRow, clickType) {
 
     if (comment) {
         if (separatorClass)
-            $(commentArea).find(".comment-0." + separatorClass).remove();
-        $(commentArea).find(".comment-0." + typeClass).remove();
+            $(commentArea).find(".reviewer-0." + separatorClass).remove();
+        $(commentArea).find(".reviewer-0." + typeClass).remove();
     }
 
     if (separatorClass)
@@ -430,22 +449,33 @@ function start(xml) {
         .val(theReview.intro)
         .keypress(queueSaveDraft);
 
+    var numReviewers = 0;
     for (i = 0; i < theBug.comments.length; i++) {
         var comment = theBug.comments[i];
         var m = REVIEW_RE.exec(comment.text);
 
         if (m && parseInt(m[1]) == attachmentId) {
-            var review = new Review.Review(thePatch);
+            var review = new Review.Review(thePatch, comment.getWho(), comment.date);
             review.parse(comment.text.substr(m[0].length));
 
+            var reviewerIndex;
+            if (review.who in reviewers)
+                reviewerIndex = reviewers[review.who];
+            else {
+                reviewerIndex = ++numReviewers;
+                reviewers[review.who] = reviewerIndex;
+            }
+
             $("<div class='review'>"
-              + "<div class='review-inner'>"
-              + "<div><span class='reviewer'></span> - <span class='review-date'></span></div>"
+              + "<div class='reviewer-box'>"
+              + "<div class='reviewer'></div><div class='review-date'></div>"
+              + "<div class='review-info-bottom'></div>"
               + "<div class='review-intro'></div>"
               + "</div>"
               + "</div>")
-                .find(".reviewer").text(comment.getWho()).end()
-                .find(".review-date").text(Utils.formatDate(comment.date)).end()
+                .addClass(getReviewerClass(review))
+                .find(".reviewer").text(review.who).end()
+                .find(".review-date").text(Utils.formatDate(review.date)).end()
                 .find(".review-intro").text(review.intro? review.intro : "").end()
                 .appendTo("#oldReviews");
 
diff --git a/web/splinter.css b/web/splinter.css
index acc9a50..e2b98bd 100644
--- a/web/splinter.css
+++ b/web/splinter.css
@@ -69,16 +69,56 @@ body {
     padding: 0.5em;
 }
 
+
+.reviewer-box {
+    padding: 0.5em;
+    white-space: pre-wrap;
+}
+
+.reviewer-0 .reviewer-box {
+    border-left: 10px solid green;
+}
+
+.reviewer-1 .reviewer-box {
+    border-left: 10px solid blue;
+}
+
+.reviewer-2 .reviewer-box {
+    border-left: 10px solid red;
+}
+
+.reviewer-3 .reviewer-box {
+    border-left: 10px solid yellow;
+}
+
+.reviewer-4 .reviewer-box {
+    border-left: 10px solid purple;
+}
+
+.reviewer-5 .reviewer-box {
+    border-left: 10px solid orange;
+}
+
+.reviewer {
+    float: left;
+}
+
+.review-date {
+    float: right;
+}
+
+.review-info-bottom {
+    clear: both;
+}
+
 .review {
     border: 1px solid black;
     font-size: 90%;
     margin-bottom: 1em;
-    white-space: pre-wrap;
 }
 
-.review-inner {
-    border-left: 10px solid blue;
-    padding: 0.5em;
+.review-intro {
+    margin-top: 0.5em;
 }
 
 #myComment {
@@ -166,9 +206,9 @@ body {
     margin: 5px;
 }
 
-.comment-text {
-    padding: 0.5em;
-    white-space: pre-wrap;
+.comment .review-info {
+    margin-top: 0.5em;
+    font-size: 80%;
 }
 
 .comment-editor textarea {
@@ -176,14 +216,6 @@ body {
     height: 10em;
 }
 
-.comment-0 .comment-text {
-    border-left: 10px solid green;
-}
-
-.comment-1 .comment-text {
-    border-left: 10px solid blue;
-}
-
 .comment-separator-removed {
     clear: left;
 }