Merge branch 'diff-highlight-themes' into 'master'

Diff highlight themes

Fixes https://gitlab.com/gitlab-org/gitlab-ce/issues/12484

See merge request !2530

app/assets/stylesheets/framework/common.scss

@@ -120,14 +120,6 @@ span.update-author {
   display: inline;
 }
 
-.line_holder {
-  &:hover {
-    td {
-      background: #FFFFCF !important;
-    }
-  }
-}
-
 p.time {
   color: #999;
   font-size: 90%;

app/assets/stylesheets/framework/files.scss

@@ -92,15 +92,6 @@
         &:last-child {
           border-right: none;
         }
-        background: #fff;
-      }
-      .lines {
-        pre {
-          padding: 0;
-          margin: 0;
-          background: none;
-          border: none;
-        }
       }
       img.avatar {
         border: 0 none;
@@ -116,18 +107,18 @@
           color: #888;
         }
       }
-      td.blame-numbers {
-        pre {
-          color: #AAA;
-          white-space: pre;
-        }
-        background: #f1f1f1;
+      td.line-numbers {
+        float: none;
         border-left: 1px solid #DDD;
       }
       td.lines {
+        padding: 0;
         code {
           font-family: $monospace_font;
         }
+        pre {
+          margin: 0;
+        }
       }
     }
 

app/assets/stylesheets/highlight/dark.scss

 /* https://github.com/MozMorris/tomorrow-pygments */
 .code.dark {
+  // Line numbers
+  .line-numbers, .diff-line-num {
+    background-color: #1d1f21;
+  }
 
-  background-color: #1d1f21 !important;
-  color: #c5c8c6 !important;
-
-  pre.highlight,
-  .line-numbers,
-  .line-numbers a {
-    background-color: #1d1f21 !important;
-    color: #c5c8c6 !important;
+  .diff-line-num, .diff-line-num a {
+    color: rgba(255, 255, 255, 0.3);
   }
 
+  // Code itself
   pre.code {
     border-left: 1px solid #666;
   }
 
+  &, pre.code, .line_holder .line_content {
+    background-color: #1d1f21;
+    color: #c5c8c6;
+  }
+
+  // Diff line
+  .line_holder {
+    .diff-line-num.new, .line_content.new {
+      @include diff_background(rgba(51, 255, 51, 0.1), rgba(51, 255, 51, 0.3), #808080);
+    }
+
+    .diff-line-num.old, .line_content.old {
+      @include diff_background(rgba(255, 51, 51, 0.2), rgba(255, 51, 51, 0.3), #808080);
+    }
+
+    .line_content.match {
+      color: rgba(255, 255, 255, 0.3);
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
+
   // highlight line via anchor
   pre .hll {
     background-color: #557 !important;
@@ -90,22 +110,4 @@
   .vg { color: #cc6666 } /* Name.Variable.Global */
   .vi { color: #cc6666 } /* Name.Variable.Instance */
   .il { color: #de935f } /* Literal.Number.Integer.Long */
-
-  .line_holder {
-    &.parallel .new.new_line,
-    &.parallel .new.line_content,
-    &.new .old_line,
-    &.new .new_line,
-    &.new .line_content {
-      @include diff_background(255, 255, 255, #808080);
-    }
-
-    &.parallel .old.old_line,
-    &.parallel .old.line_content,
-    &.old .old_line,
-    &.old .new_line,
-    &.old .line_content {
-      @include diff_background(255, 51, 51, #808080);
-    }
-  }
 }

app/assets/stylesheets/highlight/monokai.scss

 /* https://github.com/richleland/pygments-css/blob/master/monokai.css */
 .code.monokai {
+  // Line numbers
+  .line-numbers, .diff-line-num {
+    background-color: #272822;
+  }
 
-  background-color: #272822 !important;
-  color: #f8f8f2 !important;
-
-  pre.highlight,
-  .line-numbers,
-  .line-numbers a {
-    background-color :#272822 !important;
-    color: #f8f8f2 !important;
+  .diff-line-num, .diff-line-num a {
+    color: rgba(255, 255, 255, 0.3);
   }
 
+  // Code itself
   pre.code {
     border-left: 1px solid #555;
   }
 
+  &, pre.code, .line_holder .line_content {
+    background-color: #272822;
+    color: #f8f8f2;
+  }
+
+  // Diff line
+  .line_holder {
+    .diff-line-num.new, .line_content.new {
+      @include diff_background(rgba(166, 226, 46, 0.2), rgba(166, 226, 46, 0.3), #808080);
+    }
+
+    .diff-line-num.old, .line_content.old {
+      @include diff_background(rgba(254, 147, 140, 0.2), rgba(254, 147, 140, 0.3), #808080);
+    }
+
+    .line_content.match {
+      color: rgba(255, 255, 255, 0.3);
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
+
   // highlight line via anchor
   pre .hll {
     background-color: #49483e !important;
@@ -90,22 +110,4 @@
   .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
   .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
   .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
-
-  .line_holder {
-    &.parallel .new.new_line,
-    &.parallel .new.line_content,
-    &.new .old_line,
-    &.new .new_line,
-    &.new .line_content {
-      @include diff_background(156, 175, 183, #808080);
-    }
-
-    &.parallel .old.old_line,
-    &.parallel .old.line_content,
-    &.old .old_line,
-    &.old .new_line,
-    &.old .line_content {
-      @include diff_background(254, 147, 140, #808080);
-    }
-  }
 }

app/assets/stylesheets/highlight/solarized_dark.scss

 /* https://gist.github.com/qguv/7936275 */
 .code.solarized-dark {
+  // Line numbers
+  .line-numbers, .diff-line-num {
+    background-color: #002b36;
+  }
 
-  background-color: #002b36 !important;
-  color: #93a1a1 !important;
-
-  pre.highlight,
-  .line-numbers,
-  .line-numbers a {
-    background-color: #002b36 !important;
-    color: #93a1a1 !important;
+  .diff-line-num, .diff-line-num a {
+    color: rgba(255, 255, 255, 0.3);
   }
 
+  // Code itself
   pre.code {
     border-left: 1px solid #113b46;
   }
 
+  &, pre.code, .line_holder .line_content {
+    background-color: #002b36;
+    color: #93a1a1;
+  }
+
+  // Diff line
+  .line_holder {
+    .diff-line-num.new, .line_content.new {
+      @include diff_background(rgba(133, 153, 0, 0.2), rgba(133, 153, 0, 0.3), #808080);
+    }
+
+    .diff-line-num.old, .line_content.old {
+      @include diff_background(rgba(220, 50, 47, 0.2), rgba(220, 50, 47, 0.3), #808080);
+    }
+
+    .line_content.match {
+      color: rgba(255, 255, 255, 0.3);
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
+
   // highlight line via anchor
   pre .hll {
     background-color: #174652 !important;
@@ -111,22 +131,4 @@
   .vg { color: #268bd2 } /* Name.Variable.Global */
   .vi { color: #268bd2 } /* Name.Variable.Instance */
   .il { color: #2aa198 } /* Literal.Number.Integer.Long */
-
-  .line_holder {
-    &.parallel .new.new_line,
-    &.parallel .new.line_content,
-    &.new .old_line,
-    &.new .new_line,
-    &.new .line_content {
-      @include diff_background(255, 255, 255, #808080);
-    }
-
-    &.parallel .old.old_line,
-    &.parallel .old.line_content,
-    &.old .old_line,
-    &.old .new_line,
-    &.old .line_content {
-      @include diff_background(255, 51, 51, #808080);
-    }
-  }
 }

app/assets/stylesheets/highlight/solarized_light.scss

 /* https://gist.github.com/qguv/7936275 */
 .code.solarized-light {
+  // Line numbers
+  .line-numbers, .diff-line-num {
+    background-color: #fdf6e3;
+  }
 
-  background-color: #fdf6e3 !important;
-  color: #586e75 !important;
-
-  pre.highlight,
-  .line-numbers,
-  .line-numbers a {
-    background-color: #fdf6e3 !important;
-    color: #586e75 !important;
+  .diff-line-num, .diff-line-num a {
+    color: rgba(0, 0, 0, 0.3);
   }
 
+  // Code itself
   pre.code {
     border-left: 1px solid #c5d0d4;
   }
 
+  &, pre.code, .line_holder .line_content {
+    background-color: #fdf6e3;
+    color: #586e75;
+  }
+
+  // Diff line
+  .line_holder {
+    .diff-line-num.new, .line_content.new {
+      @include diff_background(rgba(133, 153, 0, 0.2), rgba(133, 153, 0, 0.3), #FAF3DD);
+    }
+
+    .diff-line-num.old, .line_content.old {
+      @include diff_background(rgba(220, 50, 47, 0.2), rgba(220, 50, 47, 0.3), #FAF3DD);
+    }
+
+    .line_content.match {
+      color: rgba(0, 0, 0, 0.3);
+      background: rgba(255, 255, 255, 0.4);
+    }
+  }
+
   // highlight line via anchor
   pre .hll {
     background-color: #ddd8c5 !important;
@@ -111,23 +131,4 @@
   .vg { color: #268bd2 } /* Name.Variable.Global */
   .vi { color: #268bd2 } /* Name.Variable.Instance */
   .il { color: #2aa198 } /* Literal.Number.Integer.Long */
-
-
-  .line_holder {
-    &.parallel .new.new_line,
-    &.parallel .new.line_content,
-    &.new .old_line,
-    &.new .new_line,
-    &.new .line_content {
-      @include diff_background(92, 164, 169, #FAF3DD);
-    }
-
-    &.parallel .old.old_line,
-    &.parallel .old.line_content,
-    &.old .old_line,
-    &.old .new_line,
-    &.old .line_content {
-      @include diff_background(237, 106, 90, #FAF3DD);
-    }
-  }
 }

app/assets/stylesheets/highlight/white.scss

 /* https://github.com/aahan/pygments-github-style */
 .code.white {
+  // Line numbers
+  .line-numbers, .diff-line-num {
+    background-color: $background-color;
+  }
 
-  background-color: #f8fafc !important;
-  color: #5b6169 !important;
-
-  pre.highlight,
-  .line-numbers,
-  .line-numbers a {
-    background-color: $background-color !important;
-    color: $gl-gray !important;
+  .diff-line-num, .diff-line-num a {
+    color: rgba(0, 0, 0, 0.3);
   }
 
+  // Code itself
   pre.code {
     border-left: 1px solid $border-color;
-    background-color: #fff !important;
-    color: #333 !important;
+  }
+
+  &, pre.code, .line_holder .line_content {
+    background-color: #fff;
+    color: #333;
+  }
+
+  // Diff line
+  .line_holder {
+    .diff-line-num {
+      &.old {
+        background: #ffdddd;
+        border-color: #f1c0c0;
+      }
+
+      &.new {
+        background: #dbffdb;
+        border-color: #c1e9c1;
+      }
+    }
+
+    .line_content {
+      &.old {
+        background: #ffecec;
+
+        span.idiff {
+          background-color: #f8cbcb;
+        }
+      }
+
+      &.new {
+        background: #eaffea;
+
+        span.idiff {
+          background-color: #a6f3a6;
+        }
+      }
+
+      &.match {
+        color: rgba(0, 0, 0, 0.3);
+        background: #fafafa;
+      }
+    }
   }
 
   // highlight line via anchor

app/assets/stylesheets/pages/diff.scss

@@ -32,16 +32,6 @@
     background: #FFF;
     color: #333;
 
-    .old {
-      span.idiff {
-        background-color: #f8cbcb;
-      }
-    }
-    .new {
-      span.idiff {
-        background-color: #a6f3a6;
-      }
-    }
     .unfold {
       cursor: pointer;
     }
@@ -76,7 +66,7 @@
     }
 
     tr.line_holder.parallel {
-      .old_line, .new_line, .diff_line {
+      .old_line, .new_line {
         min-width: 50px;
       }
 
@@ -85,7 +75,7 @@
       }
     }
 
-    .old_line, .new_line, .diff_line {
+    .old_line, .new_line {
       margin: 0px;
       padding: 0px;
       border: none;
@@ -107,43 +97,12 @@
           text-decoration: underline;
         }
       }
-      &.new {
-        background: #CFD;
-      }
-      &.old {
-        background: #FDD;
-      }
-    }
-    .diff_line {
-      padding: 0;
-    }
-    .line_holder {
-      &.old .old_line,
-      &.old .new_line {
-        background: #ffdddd;
-        border-color: #f1c0c0;
-      }
-      &.new .old_line,
-      &.new .new_line {
-        background: #dbffdb;
-        border-color: #c1e9c1;
-      }
     }
     .line_content {
       display: block;
       margin: 0px;
       padding: 0px 0.5em;
       border: none;
-      &.new {
-        background: #eaffea;
-      }
-      &.old {
-        background: #ffecec;
-      }
-      &.matched {
-        color: $border-color;
-        background: #fafafa;
-      }
       &.parallel {
         display: table-cell;
       }
@@ -394,17 +353,14 @@
   }
 }
 
-@mixin diff_background($r, $g, $b, $custom-border) {
-  /* Fallback for web browsers that doesn't support RGBa */
-  background: rgb($r, $g, $b);
-  /* RGBa with 0.3 opacity */
-  background: rgba($r, $g, $b, 0.3);
+@mixin diff_background($background, $idiff, $border) {
+  background: $background;
 
-  &.new_line, &.old_line {
-    border-right-color: $custom-border !important;
+  &.line_content span.idiff {
+    background: $idiff;
   }
 
-  &.line_content span.idiff {
-    background: rgb($r, $g, $b);
+  &.diff-line-num {
+    border-color: $border;
   }
 }

app/assets/stylesheets/pages/note_form.scss

@@ -10,18 +10,6 @@
   margin: 10px $gl-padding;
 }
 .diff-file .diff-content {
-  tr.line_holder:hover {
-    &> td.line_content {
-      background: $hover !important;
-      border-color: darken($hover, 10%) !important;
-    }
-    &> td.new_line,
-    &> td.old_line {
-      background: darken($hover, 4%) !important;
-      border-color: darken($hover, 10%) !important;
-    }
-  }
-
   tr.line_holder:hover > td .line_note_link {
     opacity: 1.0;
     filter: alpha(opacity=100);

app/assets/stylesheets/pages/notes.scss

@@ -242,11 +242,8 @@ ul.notes {
 
   // "show" the icon also if we just hover somewhere over the line
   &:hover > td {
-    background: $hover !important;
-
     .add-diff-note {
       @include show-add-diff-note;
     }
   }
 }
-

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
+            %td.line-numbers
               - line_count = blame_group[:lines].count
               - (current_line...(current_line + line_count)).each do |i|
-                  = 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

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

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.

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

app/views/projects/diffs/_match_line_parallel.html.haml

-%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

app/views/projects/diffs/_parallel_view.html.haml

@@ -9,12 +9,12 @@
           = 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')
@@ -27,7 +27,7 @@
             - 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')

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" ? " " : 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" ? " " : 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)
 

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" ? " " : line.old_pos)
-              %td.new_line
+              %td.new_line.diff-line-num
                 = raw(type == "old" ? " " : line.new_pos)
               %td.line_content{class: "noteable_line #{type} #{line_code}", line_code: line_code}= diff_line_content(line.text)
 

app/views/search/results/_snippet_blob.html.haml

@@ -22,22 +22,20 @@
               .file-content.code
                 .nothing-here-block Empty file
       - else
-        .file-content.code
-          %div.highlighted-data{ class: user_color_scheme }
+        .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}" do
+                  = 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
+                  %a.diff-line-num
                     = "."
-            .highlight.term
-              %pre
+          %pre.code
             %code
               - snippet_blob[:snippet_chunks].each do |snippet|
                 - unless snippet[:data].empty?

app/views/shared/_file_highlight.html.haml

-.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}}