Add diff hunks to notification emails on MR

Added diff hunks to notification emails of messages on merge requests. This
provides code context to the note. Uses existing template for formatting
a diff for email (from repository push notifications).

1 files changed, 143 insertions, 0 deletions

diff --git a/app/assets/stylesheets/mailers/highlighted_diff_email.scss b/app/assets/stylesheets/mailers/highlighted_diff_email.scss
new file mode 100644
index 00000000000..8d1a6020ca4
--- /dev/null
+++ b/app/assets/stylesheets/mailers/highlighted_diff_email.scss
@@ -0,0 +1,143 @@
+@import "framework/variables";
+
+// This file is largely copied from `highlight/white.scss`, but modified to
+// avoid all descendant selectors (`table td`). This is because the CSS inlining
+// we use performs dramatically worse on descendant selectors than the
+// alternatives.
+// <https://gitlab.com/gitlab-org/gitlab-ee/issues/490#note_12283632>
+//
+// DO NOT ADD ANY DESCENDANT SELECTORS TO THIS FILE. Instead, use (in order of
+// preference): plain class selectors, type (element name) selectors, or
+// explicit child selectors.
+
+.code {
+  background-color: #fff;
+  font-family: monospace;
+  font-size: $code_font_size;
+  -premailer-cellpadding: 0;
+  -premailer-cellspacing: 0;
+  -premailer-width: 100%;
+
+  > tr {
+    line-height: $code_line_height;
+  }
+}
+
+.diff-line-num {
+  padding: 0 5px;
+  text-align: right;
+  width: 35px;
+  background-color: $background-color;
+  color: $black-transparent;
+  border-right: 1px solid $table-border-gray;
+
+  &.old {
+    background-color: $line-number-old;
+    border-right-color: $line-removed-dark;
+  }
+
+  &.new {
+    background-color: $line-number-new;
+    border-right-color: $line-added-dark;
+  }
+}
+
+.line_content {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+
+  &.old {
+    background-color: $line-removed;
+
+    > .line > span.idiff,
+    > .line > span > span.idiff {
+      background-color: $line-removed-dark;
+    }
+  }
+
+  &.new {
+    background-color: $line-added;
+
+    > .line > span.idiff,
+    > .line > span > span.idiff {
+      background-color: $line-added-dark;
+    }
+  }
+
+  &.match {
+    color: $black-transparent;
+    background-color: $match-line;
+  }
+}
+
+pre {
+  margin: 0;
+}
+
+span.highlight_word {
+  background-color: #fafe3d !important;
+}
+
+.hll { background-color: #f8f8f8; }
+.c { color: #998; font-style: italic; }
+.err { color: #a61717; background-color: #e3d2d2; }
+.k { font-weight: bold; }
+.o { font-weight: bold; }
+.cm { color: #998; font-style: italic; }
+.cp { color: #999; font-weight: bold; }
+.c1 { color: #998; font-style: italic; }
+.cs { color: #999; font-weight: bold; font-style: italic; }
+.gd { color: #000; background-color: #fdd; }
+.gd .x { color: #000; background-color: #faa; }
+.ge { font-style: italic; }
+.gr { color: #a00; }
+.gh { color: #999; }
+.gi { color: #000; background-color: #dfd; }
+.gi .x { color: #000; background-color: #afa; }
+.go { color: #888; }
+.gp { color: #555; }
+.gs { font-weight: bold; }
+.gu { color: #800080; font-weight: bold; }
+.gt { color: #a00; }
+.kc { font-weight: bold; }
+.kd { font-weight: bold; }
+.kn { font-weight: bold; }
+.kp { font-weight: bold; }
+.kr { font-weight: bold; }
+.kt { color: #458; font-weight: bold; }
+.m { color: #099; }
+.s { color: #d14; }
+.n { color: #333; }
+.na { color: teal; }
+.nb { color: #0086b3; }
+.nc { color: #458; font-weight: bold; }
+.no { color: teal; }
+.ni { color: purple; }
+.ne { color: #900; font-weight: bold; }
+.nf { color: #900; font-weight: bold; }
+.nn { color: #555; }
+.nt { color: navy; }
+.nv { color: teal; }
+.ow { font-weight: bold; }
+.w { color: #bbb; }
+.mf { color: #099; }
+.mh { color: #099; }
+.mi { color: #099; }
+.mo { color: #099; }
+.sb { color: #d14; }
+.sc { color: #d14; }
+.sd { color: #d14; }
+.s2 { color: #d14; }
+.se { color: #d14; }
+.sh { color: #d14; }
+.si { color: #d14; }
+.sx { color: #d14; }
+.sr { color: #009926; }
+.s1 { color: #d14; }
+.ss { color: #990073; }
+.bp { color: #999; }
+.vc { color: teal; }
+.vg { color: teal; }
+.vi { color: teal; }
+.il { color: #099; }
+.gc { color: #999; background-color: #eaf2f5; }