Diff viewer links to correct part of the file

Added highlight colours to diff rows

Closes #13852

7 files changed, 58 insertions, 8 deletions

diff --git a/app/assets/javascripts/merge_request_tabs.js.coffee b/app/assets/javascripts/merge_request_tabs.js.coffee
index ef0b534a709..d45c772b8de 100644
--- a/app/assets/javascripts/merge_request_tabs.js.coffee
+++ b/app/assets/javascripts/merge_request_tabs.js.coffee
@@ -85,8 +85,11 @@ class @MergeRequestTabs
 
   scrollToElement: (container) ->
     if window.location.hash
-      $el = $("div#{container} #{window.location.hash}")
-      $('body').scrollTo($el.offset().top) if $el.length
+      navBarHeight = $('.navbar-gitlab').outerHeight()
+
+      $el = $("#{container} #{window.location.hash}")
+      $('body').scrollTo 0
+      $.scrollTo("#{container} #{window.location.hash}", offset: -navBarHeight) if $el.length
 
   # Activate a tab based on the current action
   activateTab: (action) ->
@@ -152,12 +155,29 @@ class @MergeRequestTabs
     @_get
       url: "#{source}.json" + @_location.search
       success: (data) =>
-        document.querySelector("div#diffs").innerHTML = data.html
+        $('#diffs').html data.html
         gl.utils.localTimeAgo($('.js-timeago', 'div#diffs'))
-        $('div#diffs .js-syntax-highlight').syntaxHighlight()
+        $('#diffs .js-syntax-highlight').syntaxHighlight()
         @expandViewContainer() if @diffViewType() is 'parallel'
         @diffsLoaded = true
         @scrollToElement("#diffs")
+        @highlighSelectedLine()
+
+  highlighSelectedLine: ->
+    locationHash = location.hash
+
+    if locationHash isnt ''
+      hashClassString = ".#{locationHash.replace('#', '')}"
+      $diffLine = $(locationHash)
+
+      if $diffLine.is ':not(tr)'
+        $diffLine = $("td#{locationHash}, td#{hashClassString}")
+      else
+        $diffLine = $('td', $diffLine)
+
+      $diffLine.addClass 'hll'
+      diffLineTop = $diffLine.offset().top
+      navBarHeight = $('.navbar-gitlab').outerHeight()
 
   loadBuilds: (source) ->
     return if @buildsLoaded
diff --git a/app/assets/stylesheets/highlight/dark.scss b/app/assets/stylesheets/highlight/dark.scss
index 47673944896..77a73dc379b 100644
--- a/app/assets/stylesheets/highlight/dark.scss
+++ b/app/assets/stylesheets/highlight/dark.scss
@@ -21,6 +21,12 @@
 
   // Diff line
   .line_holder {
+    td.diff-line-num.hll:not(.empty-cell),
+    td.line_content.hll:not(.empty-cell) {
+      background-color: #557;
+      border-color: darken(#557, 15%);
+    }
+
     .diff-line-num.new, .line_content.new {
       @include diff_background(rgba(51, 255, 51, 0.1), rgba(51, 255, 51, 0.2), #808080);
     }
diff --git a/app/assets/stylesheets/highlight/monokai.scss b/app/assets/stylesheets/highlight/monokai.scss
index 806401c21ae..28253d4ccb4 100644
--- a/app/assets/stylesheets/highlight/monokai.scss
+++ b/app/assets/stylesheets/highlight/monokai.scss
@@ -21,6 +21,12 @@
 
   // Diff line
   .line_holder {
+    td.diff-line-num.hll:not(.empty-cell),
+    td.line_content.hll:not(.empty-cell) {
+      background-color: #49483e;
+      border-color: darken(#49483e, 15%);
+    }
+
     .diff-line-num.new, .line_content.new {
       @include diff_background(rgba(166, 226, 46, 0.1), rgba(166, 226, 46, 0.15), #808080);
     }
diff --git a/app/assets/stylesheets/highlight/solarized_dark.scss b/app/assets/stylesheets/highlight/solarized_dark.scss
index 6a809d4dfd2..c62bd021aef 100644
--- a/app/assets/stylesheets/highlight/solarized_dark.scss
+++ b/app/assets/stylesheets/highlight/solarized_dark.scss
@@ -21,6 +21,12 @@
 
   // Diff line
   .line_holder {
+    td.diff-line-num.hll:not(.empty-cell),
+    td.line_content.hll:not(.empty-cell) {
+      background-color: #174652;
+      border-color: darken(#174652, 15%);
+    }
+
     .diff-line-num.new, .line_content.new {
       @include diff_background(rgba(133, 153, 0, 0.15), rgba(133, 153, 0, 0.25), #113b46);
     }
diff --git a/app/assets/stylesheets/highlight/solarized_light.scss b/app/assets/stylesheets/highlight/solarized_light.scss
index c482a1258f7..524cfaf90c3 100644
--- a/app/assets/stylesheets/highlight/solarized_light.scss
+++ b/app/assets/stylesheets/highlight/solarized_light.scss
@@ -21,6 +21,12 @@
 
   // Diff line
   .line_holder {
+    td.diff-line-num.hll:not(.empty-cell),
+    td.line_content.hll:not(.empty-cell) {
+      background-color: #ddd8c5;
+      border-color: darken(#ddd8c5, 15%);
+    }
+
     .diff-line-num.new, .line_content.new {
       @include diff_background(rgba(133, 153, 0, 0.2), rgba(133, 153, 0, 0.25), #c5d0d4);
     }
diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss
index 28331f59754..1ff6ad75e07 100644
--- a/app/assets/stylesheets/highlight/white.scss
+++ b/app/assets/stylesheets/highlight/white.scss
@@ -21,6 +21,12 @@
 
   // Diff line
   .line_holder {
+    td.diff-line-num.hll:not(.empty-cell),
+    td.line_content.hll:not(.empty-cell) {
+      background-color: #f8eec7;
+      border-color: darken(#f8eec7, 15%);
+    }
+
     .diff-line-num {
       &.old {
         background-color: $line-number-old;
diff --git a/app/views/projects/diffs/_parallel_view.html.haml b/app/views/projects/diffs/_parallel_view.html.haml
index d7c49068745..81948513e43 100644
--- a/app/views/projects/diffs/_parallel_view.html.haml
+++ b/app/views/projects/diffs/_parallel_view.html.haml
@@ -14,11 +14,11 @@
           %td.new_line.diff-line-num
           %td.line_content.parallel.match= left[:text]
         - else
-          %td.old_line.diff-line-num{id: left[:line_code], class: "#{left[:type]}"}
+          %td.old_line.diff-line-num{id: left[:line_code], class: "#{left[:type]} #{'empty-cell' if !left[:number]}"}
             = link_to raw(left[:number]), "##{left[:line_code]}", id: left[:line_code]
             - if @comments_allowed && can?(current_user, :create_note, @project)
               = link_to_new_diff_note(left[:line_code], 'old')
-          %td.line_content{class: "parallel noteable_line #{left[:type]} #{left[:line_code]}", data: { line_code: left[:line_code] }}= diff_line_content(left[:text])
+          %td.line_content{class: "parallel noteable_line #{left[:type]} #{left[:line_code]} #{'empty-cell' if left[:text].empty?}", data: { line_code: left[:line_code] }}= diff_line_content(left[:text])
 
           - if right[:type] == 'new'
             - new_line_class = 'new'
@@ -27,11 +27,11 @@
             - new_line_class = nil
             - new_line_code = left[:line_code]
 
-          %td.new_line.diff-line-num{id: new_line_code, class: "#{new_line_class}", data: { linenumber: right[:number] }}
+          %td.new_line.diff-line-num{id: new_line_code, class: "#{new_line_class} #{'empty-cell' if !right[:number]}", data: { linenumber: right[:number] }}
             = link_to raw(right[:number]), "##{new_line_code}", id: new_line_code
             - if @comments_allowed && can?(current_user, :create_note, @project)
               = link_to_new_diff_note(right[:line_code], 'new')
-          %td.line_content.parallel{class: "noteable_line #{new_line_class} #{new_line_code}", data: { line_code: new_line_code }}= diff_line_content(right[:text])
+          %td.line_content.parallel{class: "noteable_line #{new_line_class} #{new_line_code} #{'empty-cell' if right[:text].empty?}", data: { line_code: new_line_code }}= diff_line_content(right[:text])
 
       - if @reply_allowed
         - comments_left, comments_right = organize_comments(left[:type], right[:type], left[:line_code], right[:line_code])