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.

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

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

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

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

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;

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

changelogs/unreleased/diff-make-obvious-cant-comment.yml

+---
+title: Visually show expanded diff lines cant have comments
+merge_request:
+author: