Visually display that expanded diff lines cant be commented on

Previously you just had to hover over a line to see if it could be
commented on, this changes that by changing the background color &
borders to show that the line cant have a comment.

7 files changed, 85 insertions, 1 deletions

diff --git a/app/assets/stylesheets/highlight/dark.scss b/app/assets/stylesheets/highlight/dark.scss
index 9c76e58dfc8..7d2818281a5 100644
--- a/app/assets/stylesheets/highlight/dark.scss
+++ b/app/assets/stylesheets/highlight/dark.scss
@@ -155,6 +155,22 @@ $dark-il: #de935f;
     .line_content.match {
       @include dark-diff-match-line;
     }
+
+    &:not(.diff-expanded) + .diff-expanded,
+    &.diff-expanded + .line_holder:not(.diff-expanded) {
+      > .diff-line-num,
+      > .line_content {
+        border-top: 1px solid #000;
+      }
+    }
+
+    &.diff-expanded {
+      > .diff-line-num,
+      > .line_content {
+        background: #3e3e3e;
+        border-color: #3e3e3e;
+      }
+    }
   }
 
   // highlight line via anchor
diff --git a/app/assets/stylesheets/highlight/monokai.scss b/app/assets/stylesheets/highlight/monokai.scss
index 6488a099c74..d2fac66b980 100644
--- a/app/assets/stylesheets/highlight/monokai.scss
+++ b/app/assets/stylesheets/highlight/monokai.scss
@@ -155,6 +155,22 @@ $monokai-gi: #a6e22e;
     .line_content.match {
       @include dark-diff-match-line;
     }
+
+    &:not(.diff-expanded) + .diff-expanded,
+    &.diff-expanded + .line_holder:not(.diff-expanded) {
+      > .diff-line-num,
+      > .line_content {
+        border-top: 1px solid #000;
+      }
+    }
+
+    &.diff-expanded {
+      > .diff-line-num,
+      > .line_content {
+        background: #3e3e3e;
+        border-color: #3e3e3e;
+      }
+    }
   }
 
   // highlight line via anchor
diff --git a/app/assets/stylesheets/highlight/solarized_dark.scss b/app/assets/stylesheets/highlight/solarized_dark.scss
index 00079cc2b5b..e86b5bb0e9b 100644
--- a/app/assets/stylesheets/highlight/solarized_dark.scss
+++ b/app/assets/stylesheets/highlight/solarized_dark.scss
@@ -159,6 +159,22 @@ $solarized-dark-il: #2aa198;
     .line_content.match {
       @include dark-diff-match-line;
     }
+
+    &:not(.diff-expanded) + .diff-expanded,
+    &.diff-expanded + .line_holder:not(.diff-expanded) {
+      > .diff-line-num,
+      > .line_content {
+        border-top: 1px solid #000;
+      }
+    }
+
+    &.diff-expanded {
+      > .diff-line-num,
+      > .line_content {
+        background: #010d10;
+        border-color: #010d10;
+      }
+    }
   }
 
   // highlight line via anchor
diff --git a/app/assets/stylesheets/highlight/solarized_light.scss b/app/assets/stylesheets/highlight/solarized_light.scss
index 2e3b68f1a58..14ac0d9d860 100644
--- a/app/assets/stylesheets/highlight/solarized_light.scss
+++ b/app/assets/stylesheets/highlight/solarized_light.scss
@@ -166,6 +166,22 @@ $solarized-light-il: #2aa198;
     .line_content.match {
       @include matchLine;
     }
+
+    &:not(.diff-expanded) + .diff-expanded,
+    &.diff-expanded + .line_holder:not(.diff-expanded) {
+      > .diff-line-num,
+      > .line_content {
+        border-top: 1px solid #d2cdbd;
+      }
+    }
+
+    &.diff-expanded {
+      > .diff-line-num,
+      > .line_content {
+        background: #ece6d4;
+        border-color: #ece6d4;
+      }
+    }
   }
 
   // highlight line via anchor
diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss
index 0eca30e570f..ca7242bcd7e 100644
--- a/app/assets/stylesheets/highlight/white.scss
+++ b/app/assets/stylesheets/highlight/white.scss
@@ -140,6 +140,22 @@ $white-gc-bg: #eaf2f5;
       }
     }
 
+    &:not(.diff-expanded) + .diff-expanded,
+    &.diff-expanded + .line_holder:not(.diff-expanded) {
+      > .diff-line-num,
+      > .line_content {
+        border-top: 1px solid #e0e0e0;
+      }
+    }
+
+    &.diff-expanded {
+      > .diff-line-num,
+      > .line_content {
+        background: #f7f7f7;
+        border-color: #f7f7f7;
+      }
+    }
+
     .line_content {
       &.old {
         background-color: $line-removed;
diff --git a/app/views/projects/blob/diff.html.haml b/app/views/projects/blob/diff.html.haml
index c48d9dd982c..2e50b90a617 100644
--- a/app/views/projects/blob/diff.html.haml
+++ b/app/views/projects/blob/diff.html.haml
@@ -9,7 +9,7 @@
     - line_old = line_new - @form.offset
     - line_content = capture do
       %td.line_content.noteable_line{ class: line_class }==#{' ' * @form.indent}#{line}
-    %tr.line_holder{ id: line_old, class: line_class }
+    %tr.line_holder.diff-expanded{ id: line_old, class: line_class }
       - case diff_view
       - when :inline
         %td.old_line.diff-line-num{ data: { linenumber: line_old } }
diff --git a/changelogs/unreleased/diff-make-obvious-cant-comment.yml b/changelogs/unreleased/diff-make-obvious-cant-comment.yml
new file mode 100644
index 00000000000..2cb95947939
--- /dev/null
+++ b/changelogs/unreleased/diff-make-obvious-cant-comment.yml
@@ -0,0 +1,4 @@
+---
+title: Visually show expanded diff lines cant have comments
+merge_request:
+author: