Current variant of line numbering

Signed-off-by: Denis Bardadym <denis.bardadym@acenture.com>

src/main/css/_source.less

@@ -68,15 +68,16 @@
         width: auto;
         text-align: right;
 
-        &:hover {
-            background-color: #E4DDCC;
-        }
+
     }
 }
 
 .line {
     width: 100%;
-    display: inline-block;
+
+    &:hover {
+        background-color: #E4DDCC;
+    }
 }
 
 .blob_header  {

src/main/webapp/assets/css/style.css

@@ -66,8 +66,6 @@ html,body{height:100%;}
 .repo.collaborated{border-color:#95B3D7;background-color:#DCE6F2;}.repo.collaborated >.sub.admin{border-color:#95B3D7;}
 .repo >.sub.admin{border-top:2px solid black;margin:0;padding:0 15px 0 0;}.repo >.sub.admin:empty{display:none;}
 .repo >.sub.admin >li{display:inline-block;margin-left:15px;}.repo >.sub.admin >li *{font-size:1.1em;line-height:2em;}
-.opened_pr{border-color:#C3D69B;background-color:#EBF1DE;}
-.closed_pr{border-color:#D99694;background-color:#F2DCDB;}
 .button{color:white;background-image:-moz-linear-gradient(top, #dd4b39, #d14836);background-image:-o-linear-gradient(top, #dd4b39, #d14836);background-image:-webkit-gradient(linear, left top, left bottom, from(#dd4b39), to(#d14836));-o-transition:border-top-color 0.218s,border-right-color 0.218s,border-bottom-color 0.218s,border-left-color 0.218s;-webkit-transition:border-color 0.218s;min-width:72px;padding:1em;font-family:arial,sans-serif;border:1px solid rgba(0, 0, 0, 0.1);border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;text-transform:uppercase;text-decoration:none;text-align:center;vertical-align:middle;white-space:nowrap;outline:none;position:relative;display:inline-block;}.button:active{border:1px solid #992A1B;box-shadow:inset 0 1px rgba(0, 0, 0, 0.3);-webkit-box-shadow:inset 0 1px rgba(0, 0, 0, 0.3);background-image:-moz-linear-gradient(top, #dd4b39, #b0281a);background-image:-o-linear-gradient(top, #dd4b39, #b0281a);background-image:-webkit-gradient(linear, left top, left bottom, from(#dd4b39), to(#b0281a));}
 .button:hover{box-shadow:0 1px rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 1px rgba(0, 0, 0, 0.2);background-image:-moz-linear-gradient(top, #dd4b39, #c53727);background-image:-o-linear-gradient(top, #dd4b39, #c53727);background-image:-webkit-gradient(linear, left top, left bottom, from(#dd4b39), to(#c53727));border:1px solid #B0281A;}
 .url-box{height:30px;margin-right:15px;margin-top:15px;}.url-box .textfield{float:left;width:400px;padding:3px 5px 2px 5px;margin:0;height:23px;border:1px solid #ccc;border-left:none;font-family:Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;border-radius:0px 3px 3px 0px;-webkit-border-radius:0px 3px 3px 0px;-moz-border-radius:0px 3px 3px 0px;-o-border-radius:0px 3px 3px 0px;}
@@ -95,8 +93,8 @@ table.users .user_suspended{width:25%;text-align:center;}
 .blob pre{font-size:12px;font-family:'Bitstream Vera Sans Mono','Courier',monospace;line-height:1.4;width:10000px;margin:0;padding:1em .5em;}.blob pre code{margin:0;padding:0;}
 .blob .img{text-align:center;}
 .jFloatingScroller{position:fixed;bottom:0;overflow:auto;}
-.line_numbers{position:absolute;top:0;left:0;background-color:#ececec;}.line_numbers pre{width:auto;text-align:right;}.line_numbers pre:hover{background-color:#E4DDCC;}
-.line{width:100%;display:inline-block;}
+.line_numbers{position:absolute;top:0;left:0;background-color:#ececec;}.line_numbers pre{width:auto;text-align:right;}
+.line{width:100%;}.line:hover{background-color:#E4DDCC;}
 .blob_header{padding:5px 10px;border-bottom:2px solid #dcdcdc;background-color:white;}.blob_header .manage{font-size:20px;float:right;}.blob_header .manage a{text-decoration:none;margin-left:10px;}
 .blob_header .status{font-size:16px;line-height:26px;}.blob_header .status::before{margin-right:15px;}
 .blob.diff .modified,#floatingChangesetDiffHeader .modified{color:#599bdc;}
@@ -112,6 +110,8 @@ table.users .user_suspended{width:25%;text-align:center;}
 .commit{padding:10px 15px;border-top:2px solid #E6E6B8;font-size:1.3em;}.commit p{margin:15px 0;}
 .commit_author{font-size:0.9em;color:#599bdc;}
 .commit .source_tree_link{margin-right:15px;}
+.opened_pr{border-color:#C3D69B;background-color:#EBF1DE;}
+.closed_pr{border-color:#D99694;background-color:#F2DCDB;}
 .pull_request_box .repo_selector{width:200px;}
 .pull_request{font-size:1.1em;border:2px solid #dcdcdc;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;padding:15px;width:970px;margin:10px 0;}
 .pull_request_box{border:1px solid gray;padding:20px;margin:20px;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;}

src/main/webapp/assets/js/script.js

@@ -19,6 +19,125 @@ function setCloneUrls() {
     $(".url-box > .clone-urls > li:first-child > a").click();
 }
 
+function numberLines(node, isPreformatted) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+    var lineBreak = /\r\n?|\n/;
+
+    var document = node.ownerDocument;
+
+    var li = document.createElement('div');
+    while (node.firstChild) {
+      li.appendChild(node.firstChild);
+    }
+    // An array of lines.  We split below, so this is initialized to one
+    // un-split line.
+    var listItems = [li];
+
+    function walk(node) {
+      switch (node.nodeType) {
+        case 1:  // Element
+          if (nocode.test(node.className)) { break; }
+          if ('br' === node.nodeName) {
+            breakAfter(node);
+            // Discard the <BR> since it is now flush against a </LI>.
+            if (node.parentNode) {
+              node.parentNode.removeChild(node);
+            }
+          } else {
+            for (var child = node.firstChild; child; child = child.nextSibling) {
+              walk(child);
+            }
+          }
+          break;
+        case 3: case 4:  // Text
+          if (isPreformatted) {
+            var text = node.nodeValue;
+            var match = text.match(lineBreak);
+            if (match) {
+              var firstLine = text.substring(0, match.index);
+              node.nodeValue = firstLine;
+              var tail = text.substring(match.index + match[0].length);
+              if (tail) {
+                var parent = node.parentNode;
+                parent.insertBefore(
+                    document.createTextNode(tail), node.nextSibling);
+              }
+              breakAfter(node);
+              if (!firstLine) {
+                // Don't leave blank text nodes in the DOM.
+                node.parentNode.removeChild(node);
+              }
+            }
+          }
+          break;
+      }
+    }
+
+    // Split a line after the given node.
+    function breakAfter(lineEndNode) {
+      // If there's nothing to the right, then we can skip ending the line
+      // here, and move root-wards since splitting just before an end-tag
+      // would require us to create a bunch of empty copies.
+      while (!lineEndNode.nextSibling) {
+        lineEndNode = lineEndNode.parentNode;
+        if (!lineEndNode) { return; }
+      }
+
+      function breakLeftOf(limit, copy) {
+        // Clone shallowly if this node needs to be on both sides of the break.
+        var rightSide = copy ? limit.cloneNode(false) : limit;
+        var parent = limit.parentNode;
+        if (parent) {
+          // We clone the parent chain.
+          // This helps us resurrect important styling elements that cross lines.
+          // E.g. in <i>Foo<br>Bar</i>
+          // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
+          var parentClone = breakLeftOf(parent, 1);
+          // Move the clone and everything to the right of the original
+          // onto the cloned parent.
+          var next = limit.nextSibling;
+          parentClone.appendChild(rightSide);
+          for (var sibling = next; sibling; sibling = next) {
+            next = sibling.nextSibling;
+            parentClone.appendChild(sibling);
+          }
+        }
+        return rightSide;
+      }
+
+      var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
+
+      // Walk the parent chain until we reach an unattached LI.
+      for (var parent;
+           // Check nodeType since IE invents document fragments.
+           (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
+        copiedListItem = parent;
+      }
+      // Put it on the list of lines for later processing.
+      listItems.push(copiedListItem);
+    }
+
+    // Split lines while there are lines left to split.
+    for (var i = 0;  // Number of lines that have been split so far.
+         i < listItems.length;  // length updated by breakAfter calls.
+         ++i) {
+      walk(listItems[i]);
+    }
+
+    for (var i = 0, n = listItems.length; i < n; ++i) {
+      li = listItems[i];
+      // Stick a class on the LIs so that stylesheets can
+      // color odd/even rows, or any other row pattern that
+      // is co-prime with 10.
+      li.className = 'Line' + i + ' line';
+      if (!li.firstChild) {
+        li.appendChild(document.createTextNode('\xA0'));
+      }
+      node.appendChild(li);
+    }
+    return listItems.length;
+  }
+
 $(function() {
     if (!Modernizr.input.placeholder) {
 
@@ -74,13 +193,14 @@ $(function() {
 
     $(".blob").each(function(i, el) {
         var code = $("pre code", el);
-        var linesCount = code.text().split("\n").length;
+        hljs.highlightBlock(code[0]);
+        var linesCount = numberLines(code[0], true);
+
         var rawLN = "";
-        //code.empty();
         for(var i = 0; i < linesCount; i++){
             rawLN += "<span class='line_number'>"+ i +"</span>\n";
         }
-        hljs.highlightBlock(code[0]);
+
         $(el).append("<div class='source_container'><div class='line_numbers'><pre >"+rawLN+"</pre></div><div class='source'></div></div");
         $(".source", el).append($("pre", el)[0]);
         $(".source_container", el).css("padding-left", $(".line_numbers", el).width());