Add syntax highlighting for line expansion

- dark
- white
- monokai
- none
- solarized-dark
- solarized-light

app/assets/javascripts/diffs/components/diff_expansion_cell.vue

@@ -212,12 +212,12 @@ export default {
 </script>
 
 <template>
-  <td :colspan="colspan">
+  <td :colspan="colspan" class="text-center">
     <div class="content js-line-expansion-content">
       <a
         v-if="canExpandUp"
         v-tooltip
-        class="cursor-pointer js-unfold unfold-icon"
+        class="cursor-pointer js-unfold unfold-icon d-inline-block pt-2 pb-2"
         data-placement="top"
         data-container="body"
         :title="__('Expand up')"
@@ -231,7 +231,7 @@ export default {
       <a
         v-if="canExpandDown"
         v-tooltip
-        class="cursor-pointer js-unfold-down has-tooltip unfold-icon"
+        class="cursor-pointer js-unfold-down has-tooltip unfold-icon d-inline-block pt-2 pb-2"
         data-placement="top"
         data-container="body"
         :title="__('Expand down')"

app/assets/stylesheets/highlight/common.scss

@@ -16,3 +16,16 @@
   color: $dark-diff-match-bg;
   background: $dark-diff-match-color;
 }
+
+@mixin diff-expansion($background, $border, $link) {
+  background-color: $background;
+
+  td {
+    border-top: 1px solid $border;
+    border-bottom: 1px solid $border;
+  }
+
+  a {
+    color: $link;
+  }
+}

app/assets/stylesheets/highlight/themes/dark.scss

@@ -111,6 +111,10 @@ $dark-il: #de935f;
     color: $dark-line-color;
   }
 
+  .line_expansion {
+    @include diff-expansion($dark-main-bg, $dark-border, $dark-na);
+  }
+
   // Diff line
   .line_holder {
     &.match .line_content,

app/assets/stylesheets/highlight/themes/monokai.scss

@@ -111,6 +111,10 @@ $monokai-gi: #a6e22e;
     color: $monokai-text-color;
   }
 
+  .line_expansion {
+    @include diff-expansion($monokai-bg, $monokai-border, $monokai-k);
+  }
+
   // Diff line
   .line_holder {
     &.match .line_content,

app/assets/stylesheets/highlight/themes/none.scss

@@ -34,8 +34,11 @@
     color: $gl-text-color;
   }
 
-// Diff line
+  .line_expansion {
+    @include diff-expansion($gray-light, $white-normal, $gl-text-color);
+  }
 
+  // Diff line
   $none-over-bg: #ded7fc;
   $none-expanded-border: #e0e0e0;
   $none-expanded-bg: #e0e0e0;

app/assets/stylesheets/highlight/themes/solarized-dark.scss

@@ -115,6 +115,10 @@ $solarized-dark-il: #2aa198;
     color: $solarized-dark-pre-color;
   }
 
+  .line_expansion {
+    @include diff-expansion($solarized-dark-line-bg, $solarized-dark-border, $solarized-dark-kd);
+  }
+
   // Diff line
   .line_holder {
     &.match .line_content,

app/assets/stylesheets/highlight/themes/solarized-light.scss

@@ -122,6 +122,10 @@ $solarized-light-il: #2aa198;
     color: $solarized-light-pre-color;
   }
 
+  .line_expansion {
+    @include diff-expansion($solarized-light-line-bg, $solarized-light-border, $solarized-light-kd);
+  }
+
   // Diff line
   .line_holder {
     &.match .line_content,

app/assets/stylesheets/highlight/white_base.scss

@@ -101,24 +101,8 @@ pre.code,
   color: $white-code-color;
 }
 
-// Expansion line
 .line_expansion {
-  background-color: $gray-light;
-
-  td {
-    border-top: 1px solid $border-color;
-    border-bottom: 1px solid $border-color;
-    text-align: center;
-  }
-
-  a {
-    color: $blue-600;
-  }
-
-  .unfold-icon {
-    display: inline-block;
-    padding: 8px 0;
-  }
+  @include diff-expansion($gray-light, $border-color, $blue-600);
 }
 
 // Diff line

changelogs/unreleased/66066-dark-theme-style-for-expansion-on-mr-diffs.yml

+---
+title: Add syntax highlighting for line expansion
+merge_request: 31821
+author:
+type: fixed