Add latest changes from gitlab-org/gitlab@15-0-stable-eev15.0.0-rc42

7 files changed, 96 insertions, 14 deletions

diff --git a/app/assets/stylesheets/highlight/common.scss b/app/assets/stylesheets/highlight/common.scss
index bd327082e20..433141ae690 100644
--- a/app/assets/stylesheets/highlight/common.scss
+++ b/app/assets/stylesheets/highlight/common.scss
@@ -19,7 +19,17 @@
   background: $dark-diff-match-color;
 }
 
-@mixin diff-expansion($background, $border, $link) {
+@mixin diff-expansion($background, $color, $hover-background, $hover-color) {
+  background-color: $background;
+  color: $color;
+
+  &:hover {
+    background-color: $hover-background;
+    color: $hover-color;
+  }
+}
+
+@mixin old-diff-expansion($background, $border, $link) {
   background-color: $background;
 
   .diff-td,
@@ -49,6 +59,13 @@
   }
 }
 
+
+@mixin dark-diff-expansion-line {
+  &.expansion .diff-td {
+    background-color: $dark-diff-match-color;
+  }
+}
+
 @mixin line-coverage-border-color($coverage, $no-coverage) {
   transition: border-left 0.1s ease-out;
 
@@ -121,7 +138,8 @@
     @include gl-mr-2;
     @include gl-w-4;
     @include gl-h-4;
-    @include gl-float-left;
+    @include gl-absolute;
+    @include gl-left-3;
     background-color: $color;
     mask-image: asset_url('icons-stacked.svg#link');
     mask-repeat: no-repeat;
diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss
index c51b1f04757..0eeebdb2e7a 100644
--- a/app/assets/stylesheets/highlight/themes/dark.scss
+++ b/app/assets/stylesheets/highlight/themes/dark.scss
@@ -154,8 +154,12 @@ $dark-il: #de935f;
     color: $dark-line-color;
   }
 
-  .line_expansion {
-    @include diff-expansion($dark-main-bg, $dark-border, $dark-na);
+  .old-line_expansion {
+    @include old-diff-expansion($dark-main-bg, $dark-border, $dark-na);
+  }
+
+  .diff-line-expand-button {
+    @include diff-expansion($gray-600, $gray-200, $gray-300, $white);
   }
 
   // Diff line
@@ -166,6 +170,10 @@ $dark-il: #de935f;
       @include dark-diff-match-line;
     }
 
+    &.diff-grid-row {
+      @include dark-diff-expansion-line;
+    }
+
     .diff-td.diff-line-num.hll:not(.empty-cell),
     .diff-td.line-coverage.hll:not(.empty-cell),
     .diff-td.line-codequality.hll:not(.empty-cell),
diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss
index 226bb44f0e7..b8cd97d6504 100644
--- a/app/assets/stylesheets/highlight/themes/monokai.scss
+++ b/app/assets/stylesheets/highlight/themes/monokai.scss
@@ -1,6 +1,7 @@
 /* https://github.com/richleland/pygments-css/blob/master/monokai.css */
 
 @import '../common';
+@import 'highlight.js/styles/base16/monokai.css';
 
 /*
 * Monokai Colors
@@ -124,8 +125,12 @@ $monokai-gh: #75715e;
     color: $monokai-text-color;
   }
 
-  .line_expansion {
-    @include diff-expansion($monokai-bg, $monokai-border, $monokai-k);
+  .old-line_expansion {
+    @include old-diff-expansion($monokai-bg, $monokai-border, $monokai-k);
+  }
+
+  .diff-line-expand-button {
+    @include diff-expansion($gray-600, $gray-200, $gray-300, $white);
   }
 
   // Diff line
@@ -136,6 +141,10 @@ $monokai-gh: #75715e;
       @include dark-diff-match-line;
     }
 
+    &.diff-grid-row {
+      @include dark-diff-expansion-line;
+    }
+
     .diff-td.diff-line-num.hll:not(.empty-cell),
     .diff-td.line-coverage.hll:not(.empty-cell),
     .diff-td.line-codequality.hll:not(.empty-cell),
diff --git a/app/assets/stylesheets/highlight/themes/none.scss b/app/assets/stylesheets/highlight/themes/none.scss
index 7a36aba8be7..99a3de23c26 100644
--- a/app/assets/stylesheets/highlight/themes/none.scss
+++ b/app/assets/stylesheets/highlight/themes/none.scss
@@ -44,10 +44,15 @@
     color: $gl-text-color;
   }
 
-  .line_expansion {
-    @include diff-expansion($gray-light, $white-normal, $gl-text-color);
+  .old-line_expansion {
+    @include old-diff-expansion($gray-light, $white-normal, $gl-text-color);
   }
 
+  .diff-line-expand-button {
+    @include diff-expansion($gray-100, $gray-700, $gray-200, $gray-800);
+  }
+
+
   // Diff line
   $none-expanded-border: #e0e0e0;
   $none-expanded-bg: #e0e0e0;
diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
index acd401e1694..55d17b8f1d2 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
@@ -1,6 +1,7 @@
 /* https://gist.github.com/qguv/7936275 */
 
 @import '../common';
+@import 'highlight.js/styles/base16/solarized-dark.css';
 
 /*
 * Solarized dark colors
@@ -127,8 +128,12 @@ $solarized-dark-il: #2aa198;
     color: $solarized-dark-pre-color;
   }
 
-  .line_expansion {
-    @include diff-expansion($solarized-dark-line-bg, $solarized-dark-border, $solarized-dark-kd);
+  .old-line_expansion {
+    @include old-diff-expansion($solarized-dark-line-bg, $solarized-dark-border, $solarized-dark-kd);
+  }
+
+  .diff-line-expand-button {
+    @include diff-expansion(lighten($solarized-dark-pre-bg, 10%), $gray-200, lighten($solarized-dark-pre-bg, 20%), $white);
   }
 
   // Diff line
@@ -139,6 +144,10 @@ $solarized-dark-il: #2aa198;
       @include dark-diff-match-line;
     }
 
+    &.diff-grid-row {
+      @include dark-diff-expansion-line;
+    }
+
     .diff-td.diff-line-num.hll:not(.empty-cell),
     .diff-td.line-coverage.hll:not(.empty-cell),
     .diff-td.line-codequality.hll:not(.empty-cell),
diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss
index ddcecc4cbcf..72b961097e4 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-light.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss
@@ -1,6 +1,7 @@
 /* https://gist.github.com/qguv/7936275 */
 
 @import '../common';
+@import 'highlight.js/styles/base16/solarized-light.css';
 
 /*
 * Solarized light syntax colors
@@ -133,9 +134,13 @@ $solarized-light-il: #2aa198;
     background-color: $solarized-light-pre-bg;
     color: $solarized-light-pre-color;
   }
+  
+  .old-line_expansion {
+    @include old-diff-expansion($solarized-light-line-bg, $solarized-light-border, $solarized-light-kd);
+  }
 
-  .line_expansion {
-    @include diff-expansion($solarized-light-line-bg, $solarized-light-border, $solarized-light-kd);
+  .diff-line-expand-button {
+    @include diff-expansion($gray-100, $gray-700, $gray-200, $gray-800);
   }
 
   // Diff line
@@ -146,6 +151,10 @@ $solarized-light-il: #2aa198;
       @include match-line;
     }
 
+    &.diff-grid-row.expansion .diff-td {
+      background-color: $solarized-light-matchline-bg;
+    }
+
     .diff-td.diff-line-num.hll:not(.empty-cell),
     .diff-td.line-coverage.hll:not(.empty-cell),
     .diff-td.line-codequality.hll:not(.empty-cell),
diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss
index 20a36d2e8b1..b984c194033 100644
--- a/app/assets/stylesheets/highlight/white_base.scss
+++ b/app/assets/stylesheets/highlight/white_base.scss
@@ -77,6 +77,22 @@ $white-gc-bg: #eaf2f5;
   background-color: $gray-light;
 }
 
+@mixin diff-match-line {
+  &.expansion {
+    &.match .diff-td {
+      color: $gray-400;
+    }
+
+    .diff-td {
+      background-color: $gray-50;
+
+      &:first-child {
+        border-color: $gray-100;
+      }
+    }
+  }
+}
+
 // Line numbers
 .file-line-num {
   @include line-number-link($black-transparent);
@@ -117,8 +133,8 @@ pre.code,
   color: $white-code-color;
 }
 
-.line_expansion {
-  @include diff-expansion($gray-light, $border-color, $blue-600);
+.old-line_expansion {
+  @include old-diff-expansion($gray-light, $border-color, $blue-600);
 
   &.diff-tr:last-child {
     border-bottom-right-radius: 4px;
@@ -130,6 +146,10 @@ pre.code,
   }
 }
 
+.diff-line-expand-button {
+  @include diff-expansion($gray-100, $gray-700, $gray-200, $gray-800);
+}
+
 // Diff line
 .line_holder {
   &.match .line_content,
@@ -138,6 +158,10 @@ pre.code,
     @include match-line;
   }
 
+  &.diff-grid-row {
+    @include diff-match-line;
+  }
+
   &:not(.match) .diff-grid-left:hover,
   &:not(.match) .diff-grid-right:hover,
   &.code-search-line:hover {