Use consistent markup and styling for highlighting across blobs, diffs, blame and snippets

10 files changed, 58 insertions, 60 deletions

diff --git a/app/views/projects/blame/show.html.haml b/app/views/projects/blame/show.html.haml
index d5d04954490..53dcac78a9f 100644
--- a/app/views/projects/blame/show.html.haml
+++ b/app/views/projects/blame/show.html.haml
@@ -12,7 +12,7 @@
       %small= number_to_human_size @blob.size
       .file-actions
         = render "projects/blob/actions"
-    .file-content.blame.highlight
+    .file-content.blame.code.js-syntax-highlight
       %table
         - current_line = 1
         - blame_highlighter = highlighter(@blob.name, @blob.data, nowrap: true)
@@ -31,15 +31,14 @@
                   = commit_author_link(commit, avatar: false)
                   authored
                   #{time_ago_with_tooltip(commit.committed_date, skip_js: true)}
-            %td.lines.blame-numbers
-              %pre
-                - line_count = blame_group[:lines].count
-                - (current_line...(current_line + line_count)).each do |i|
-                  = i
-                  \
-                - current_line += line_count
+            %td.line-numbers
+              - line_count = blame_group[:lines].count
+              - (current_line...(current_line + line_count)).each do |i|
+                %a.diff-line-num= i
+                \
+              - current_line += line_count
             %td.lines
-              %pre{class: 'code highlight white'}
+              %pre{class: 'code highlight'}
                 %code
                   - blame_group[:lines].each do |line|
                     :preserve
diff --git a/app/views/projects/blob/diff.html.haml b/app/views/projects/blob/diff.html.haml
index 2e913802be1..abcfca4cd11 100644
--- a/app/views/projects/blob/diff.html.haml
+++ b/app/views/projects/blob/diff.html.haml
@@ -10,7 +10,8 @@
     %tr.line_holder
       %td.old_line.diff-line-num{data: {linenumber: line_old}}
         = link_to raw(line_old), "#"
-      %td.new_line= link_to raw(line_new) , "#"
+      %td.new_line.diff-line-num
+        = link_to raw(line_new) , "#"
       %td.line_content.noteable_line==#{' ' * @form.indent}#{line}
 
   - if @form.unfold? && @form.bottom? && @form.to < @blob.loc
diff --git a/app/views/projects/blob/preview.html.haml b/app/views/projects/blob/preview.html.haml
index fed483d6788..c5a269f334c 100644
--- a/app/views/projects/blob/preview.html.haml
+++ b/app/views/projects/blob/preview.html.haml
@@ -14,12 +14,12 @@
             - @diff_lines.each do |line|
               %tr.line_holder{ class: "#{line.type}" }
                 - if line.type == "match"
-                  %td.old_line= "..."
-                  %td.new_line= "..."
-                  %td.line_content.matched= line.text
+                  %td.old_line.diff-line-num= "..."
+                  %td.new_line.diff-line-num= "..."
+                  %td.line_content.match= line.text
                 - else
-                  %td.old_line
-                  %td.new_line
+                  %td.old_line.diff-line-num
+                  %td.new_line.diff-line-num
                   %td.line_content{class: "#{line.type}"}= diff_line_content(line.text)
         - else
           .nothing-here-block No changes.
diff --git a/app/views/projects/diffs/_match_line.html.haml b/app/views/projects/diffs/_match_line.html.haml
index d1f897b99f7..d6dddd97879 100644
--- a/app/views/projects/diffs/_match_line.html.haml
+++ b/app/views/projects/diffs/_match_line.html.haml
@@ -4,4 +4,4 @@
 %td.new_line.diff-line-num{data: {linenumber: line_new},
  class: [unfold_bottom_class(bottom), unfold_class(!new_file)]}
   \...
-%td.line_content.matched= line
+%td.line_content.match= line
diff --git a/app/views/projects/diffs/_match_line_parallel.html.haml b/app/views/projects/diffs/_match_line_parallel.html.haml
index 815df16aa4a..0cd888876e0 100644
--- a/app/views/projects/diffs/_match_line_parallel.html.haml
+++ b/app/views/projects/diffs/_match_line_parallel.html.haml
@@ -1,4 +1,4 @@
-%td.old_line
-  %td.line_content.parallel.matched= line
-%td.new_line
-  %td.line_content.parallel.matched= line
+%td.old_line.diff-line-num
+%td.line_content.parallel.match= line
+%td.new_line.diff-line-num
+%td.line_content.parallel.match= line
diff --git a/app/views/projects/diffs/_parallel_view.html.haml b/app/views/projects/diffs/_parallel_view.html.haml
index a15d147ab05..d7c49068745 100644
--- a/app/views/projects/diffs/_parallel_view.html.haml
+++ b/app/views/projects/diffs/_parallel_view.html.haml
@@ -9,16 +9,16 @@
           = render "projects/diffs/match_line_parallel", { line: left[:text],
           line_old: left[:number], line_new: right[:number] }
         - elsif left[:type] == 'nonewline'
-          %td.old_line
-            %td.line_content.parallel.matched= left[:text]
-          %td.new_line
-            %td.line_content.parallel.matched= left[:text]
+          %td.old_line.diff-line-num
+          %td.line_content.parallel.match= left[:text]
+          %td.new_line.diff-line-num
+          %td.line_content.parallel.match= left[:text]
         - else
-          %td.old_line{id: left[:line_code], class: "#{left[:type]}"}
+          %td.old_line.diff-line-num{id: left[:line_code], class: "#{left[:type]}"}
             = 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]}", 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{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}", 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}", 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])
diff --git a/app/views/projects/diffs/_text_file.html.haml b/app/views/projects/diffs/_text_file.html.haml
index f4fc6caba0f..d9f2dce1389 100644
--- a/app/views/projects/diffs/_text_file.html.haml
+++ b/app/views/projects/diffs/_text_file.html.haml
@@ -18,13 +18,13 @@
       - elsif type == 'nonewline'
         %td.old_line.diff-line-num
         %td.new_line.diff-line-num
-        %td.line_content.matched= line.text
+        %td.line_content.match= line.text
       - else
-        %td.old_line
+        %td.old_line.diff-line-num{class: type}
           = link_to raw(type == "new" ? "&nbsp;" : line_old), "##{line_code}", id: line_code
           - if @comments_allowed && can?(current_user, :create_note, @project)
             = link_to_new_diff_note(line_code)
-        %td.new_line{data: {linenumber: line.new_pos}}
+        %td.new_line.diff-line-num{class: type, data: {linenumber: line.new_pos}}
           = link_to raw(type == "old" ? "&nbsp;" : line.new_pos), "##{line_code}", id: line_code
         %td.line_content{class: "noteable_line #{type} #{line_code}", data: { line_code: line_code }}= diff_line_content(line.text)
 
diff --git a/app/views/projects/notes/discussions/_diff.html.haml b/app/views/projects/notes/discussions/_diff.html.haml
index 46962b184ce..92bbaf0961a 100644
--- a/app/views/projects/notes/discussions/_diff.html.haml
+++ b/app/views/projects/notes/discussions/_diff.html.haml
@@ -16,13 +16,13 @@
           - line_code = generate_line_code(note.file_path, line)
           %tr.line_holder{ id: line_code, class: "#{type}" }
             - if type == "match"
-              %td.old_line= "..."
-              %td.new_line= "..."
-              %td.line_content.matched= line.text
+              %td.old_line.diff-line-num= "..."
+              %td.new_line.diff-line-num= "..."
+              %td.line_content.match= line.text
             - else
-              %td.old_line
+              %td.old_line.diff-line-num
                 = raw(type == "new" ? "&nbsp;" : line.old_pos)
-              %td.new_line
+              %td.new_line.diff-line-num
                 = raw(type == "old" ? "&nbsp;" : line.new_pos)
               %td.line_content{class: "noteable_line #{type} #{line_code}", line_code: line_code}= diff_line_content(line.text)
 
diff --git a/app/views/search/results/_snippet_blob.html.haml b/app/views/search/results/_snippet_blob.html.haml
index 9a4f9fb9485..dcd61199717 100644
--- a/app/views/search/results/_snippet_blob.html.haml
+++ b/app/views/search/results/_snippet_blob.html.haml
@@ -22,29 +22,27 @@
               .file-content.code
                 .nothing-here-block Empty file
       - else
-        .file-content.code
-          %div.highlighted-data{ class: user_color_scheme }
-            .line-numbers
+        .file-content.code.js-syntax-highlight
+          .line-numbers
+            - snippet_blob[:snippet_chunks].each do |snippet|
+              - unless snippet[:data].empty?
+                - snippet[:data].lines.to_a.size.times do |index|
+                  - offset = defined?(snippet[:start_line]) ? snippet[:start_line] : 1
+                  - i = index + offset
+                  = link_to snippet_path+"#L#{i}", id: "L#{i}", rel: "#L#{i}", class: "diff-line-num" do
+                    %i.fa.fa-link
+                    = i
+                - unless snippet == snippet_blob[:snippet_chunks].last
+                  %a.diff-line-num
+                    = "."
+          %pre.code
+            %code
               - snippet_blob[:snippet_chunks].each do |snippet|
                 - unless snippet[:data].empty?
-                  - snippet[:data].lines.to_a.size.times do |index|
-                    - offset = defined?(snippet[:start_line]) ? snippet[:start_line] : 1
-                    - i = index + offset
-                    = link_to snippet_path+"#L#{i}", id: "L#{i}", rel: "#L#{i}" do
-                      %i.fa.fa-link
-                      = i
+                  = snippet[:data]
                   - unless snippet == snippet_blob[:snippet_chunks].last
                     %a
-                      = "."
-            .highlight.term
-              %pre
-                %code
-                  - snippet_blob[:snippet_chunks].each do |snippet|
-                    - unless snippet[:data].empty?
-                      = snippet[:data]
-                      - unless snippet == snippet_blob[:snippet_chunks].last
-                        %a
-                          = "..."
-                    - else
-                      .file-content.code
-                        .nothing-here-block Empty file
+                      = "..."
+                - else
+                  .file-content.code
+                    .nothing-here-block Empty file
diff --git a/app/views/shared/_file_highlight.html.haml b/app/views/shared/_file_highlight.html.haml
index 1bef1de433a..ee242c94db8 100644
--- a/app/views/shared/_file_highlight.html.haml
+++ b/app/views/shared/_file_highlight.html.haml
@@ -1,11 +1,11 @@
-.file-content.code.js-syntax-highlight{ class: user_color_scheme }
+.file-content.code.js-syntax-highlight
   .line-numbers
     - if blob.data.present?
       - blob.data.lines.each_index do |index|
         - offset = defined?(first_line_number) ? first_line_number : 1
         - i = index + offset
         -# We're not using `link_to` because it is too slow once we get to thousands of lines.
-        %a{href: "#L#{i}", id: "L#{i}", 'data-line-number' => i}
+        %a.diff-line-num{href: "#L#{i}", id: "L#{i}", 'data-line-number' => i}
           %i.fa.fa-link
           = i
   .blob-content{data: {blob_id: blob.id}}