[bugzilla-gnome-org-extensions] Introduce line numbers into two-column display

[Krzesimir Nowak <krnowak src gnome org>]

commit 2d6ae2840698995d9e100ac5fd457cb97a0d33af
Author: Owen W. Taylor <otaylor fishsoup net>
Date:   Sat Oct 3 18:36:37 2009 -0400

    Introduce line numbers into two-column display
    
    The numbers themselves provide little benefit (who cares what line
    number is what?), but their presence and absence help explain what's
    going on and the extra column will be a convenient place to click
    when selecting a range of lines to comment on.

 js/splinter.js   |   37 ++++++++++++++++++++++++++-----------
 web/splinter.css |   42 ++++++++++++++++++++++++++++--------------
 2 files changed, 54 insertions(+), 25 deletions(-)
---
diff --git a/js/splinter.js b/js/splinter.js
index b99f1a8..1134d25 100644
--- a/js/splinter.js
+++ b/js/splinter.js
@@ -259,7 +259,7 @@ function getQueryParams() {
 
 function ensureCommentArea(row) {
     var file = $(row).data('patchFile');
-    var colSpan = file.status == Patch.CHANGED ? 3 : 1;
+    var colSpan = file.status == Patch.CHANGED ? 5 : 2;
     if (!row.nextSibling || row.nextSibling.className != "comment-area")
         $("<tr class='comment-area'><td colSpan='" + colSpan + "'>"
           + "</td></tr>")
@@ -524,29 +524,40 @@ function addPatchFile(file) {
 
     var q = $("<table class='file-table'>"
               + "</table>").appendTo(fileDiv);
-    if (file.status != Patch.ADDED)
+    if (file.status != Patch.ADDED) {
+        q.append("<col class='line-number-column'></col>");
         q.append("<col class='old-column'></col>");
-    if (file.status == Patch.CHANGED)
+    }
+    if (file.status == Patch.CHANGED) {
         q.append("<col class='middle-column'></col>");
-    if (file.status != Patch.REMOVED)
+    }
+    if (file.status != Patch.REMOVED) {
+        q.append("<col class='line-number-column'></col>");
         q.append("<col class='new-column'></col>");
-    q.append("<tbody></tbody>");
+    }
 
     if (file.status == Patch.CHANGED)
         q.addClass("file-table-changed");
 
+    var lastHunk = file.hunks[file.hunks.length -1];
+    var lastLine = Math.max(lastHunk.oldStart + lastHunk.oldCount- 1,
+                            lastHunk.newStart + lastHunk.newCount- 1);
+
+    if (lastLine >= 1000)
+        q.addClass("file-table-wide-numbers");
+
+    q.append("<tbody></tbody>");
+
     var tbody = q.find("tbody").get(0);
     for (var i = 0; i  < file.hunks.length; i++) {
         var hunk = file.hunks[i];
         if (hunk.oldStart > 1) {
             var hunkHeader = EL("tr", "hunk-header");
             tbody.appendChild(hunkHeader);
-            var hunkCell = EL("td", "hunk-cell");
-            hunkCell.appendChild(EL("div", "hunk-lines",
-                                    "Lines " + hunk.oldStart + "-" + (hunk.oldStart + hunk.oldCount - 1)));
-            if (hunk.functionLine)
-                hunkCell.appendChild(EL("div", "hunk-function-line", hunk.functionLine));
-            hunkCell.colSpan = file.status == Patch.CHANGED ? 3 : 1;
+            hunkHeader.appendChild(EL("td")); // line number column
+            var hunkCell = EL("td", "hunk-cell",
+                              hunk.functionLine ? hunk.functionLine : "\u00a0");
+            hunkCell.colSpan = file.status == Patch.CHANGED ? 4 : 1;
             hunkHeader.appendChild(hunkCell);
         }
 
@@ -563,10 +574,12 @@ function addPatchFile(file) {
                              newStyle = "added-line";
 
                          if (oldText != null) {
+                             tr.appendChild(EL("td", "line-number", oldLine.toString()));
                              tr.appendChild(EL("td", "old-line " + oldStyle,
                                                oldText != "" ? oldText : "\u00a0"));
                              oldLine++;
                          } else if (file.status == Patch.CHANGED) {
+                             tr.appendChild(EL("td", "line-number"));
                              tr.appendChild(EL("td", "old-line"));
                          }
 
@@ -574,10 +587,12 @@ function addPatchFile(file) {
                              tr.appendChild(EL("td", "line-middle"));
 
                          if (newText != null) {
+                             tr.appendChild(EL("td", "line-number", newLine.toString()));
                              tr.appendChild(EL("td", "new-line " + newStyle,
                                                newText != "" ? newText : "\u00a0"));
                              newLine++;
                          } else if (file.status == Patch.CHANGED) {
+                             tr.appendChild(EL("td", "line-number"));
                              tr.appendChild(EL("td", "new-line"));
                          }
 
diff --git a/web/splinter.css b/web/splinter.css
index 480c9eb..eff1d98 100644
--- a/web/splinter.css
+++ b/web/splinter.css
@@ -195,15 +195,6 @@ body {
     padding: 2px;
 }
 
-.hunk-lines {
-    float: left;
-}
-
-.hunk-function-line {
-    float: left;
-    margin-left: 2em;
-}
-
 .old-line, .new-line {
     white-space: pre;
     font-family: "DejaVu Sans Mono", monospace;
@@ -229,6 +220,21 @@ body {
     table-layout: fixed;
 }
 
+.line-number {
+    font-size: 80%;
+    text-align: right;
+    padding-right: 0.25em;
+    color: #888888;
+}
+
+.line-number-column {
+    width: 2em;
+}
+
+.file-table-wide-numbers .line-number-column {
+    width: 3em;
+}
+
 .middle-column {
     width: 3px;
 }
@@ -251,7 +257,13 @@ body {
 
 .comment-frame {
     border: 1px solid black;
-    margin: 5px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    margin-left: 2em;
+}
+
+.file-table-wide-numbers .comment-frame {
+    margin-left: 3em;
 }
 
 .comment .review-info {
@@ -259,10 +271,6 @@ body {
     font-size: 80%;
 }
 
-#commentEditor {
-    background: #ffeeaa;
-}
-
 #commentTextFrame {
     border: 1px solid #ffeeaa;
     margin-bottom: 5px;
@@ -273,7 +281,13 @@ body {
 }
 
 #commentEditorInner {
+    background: #ffeeaa;
     padding: 0.5em;
+    margin-left: 2em;
+}
+
+.file-table-wide-numbers #commentEditorInner {
+    margin-left: 3em;
 }
 
 #commentEditor textarea {