Adds highlight to collapsible line65790-highlight

5 files changed, 28 insertions, 2 deletions

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index c108f45622f..92190f8979e 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -603,6 +603,7 @@ $blame-blue: #254e77;
 * Builds
 */
 $builds-trace-bg: #111;
+$job-log-highlight-height: 18px;
 
 /*
 * Commit Page
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 6fc742871e7..73166940146 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -124,6 +124,26 @@
     float: left;
     padding-left: $gl-padding-8;
   }
+
+  .section-start {
+    display: inline;
+  }
+
+  .section-start,
+  .section-header {
+    &:hover {
+      cursor: pointer;
+
+      &::after {
+        content: '';
+        background-color: rgba($white-light, 0.2);
+        left: 0;
+        right: 0;
+        position: absolute;
+        height: $job-log-highlight-height;
+      }
+    }
+  }
 }
 
 .build-header {
diff --git a/changelogs/unreleased/65790-highlight.yml b/changelogs/unreleased/65790-highlight.yml
new file mode 100644
index 00000000000..2531a3730ed
--- /dev/null
+++ b/changelogs/unreleased/65790-highlight.yml
@@ -0,0 +1,5 @@
+---
+title: Adds highlight to the collapsible section
+merge_request:
+author:
+type: added
diff --git a/lib/gitlab/ci/ansi2html.rb b/lib/gitlab/ci/ansi2html.rb
index 382b8896dbd..b7886114e9c 100644
--- a/lib/gitlab/ci/ansi2html.rb
+++ b/lib/gitlab/ci/ansi2html.rb
@@ -218,7 +218,7 @@ module Gitlab
           return if @sections.include?(section)
 
           @sections << section
-          write_raw %{<div class="js-section-start fa fa-caret-down pr-2 cursor-pointer" data-timestamp="#{timestamp}" data-section="#{data_section_names}" role="button"></div>}
+          write_raw %{<div class="js-section-start section-start fa fa-caret-down pr-2 cursor-pointer" data-timestamp="#{timestamp}" data-section="#{data_section_names}" role="button"></div>}
           @lineno_in_section = 0
         end
 
diff --git a/spec/lib/gitlab/ci/ansi2html_spec.rb b/spec/lib/gitlab/ci/ansi2html_spec.rb
index b6b3de4bc4a..c8afcbd053d 100644
--- a/spec/lib/gitlab/ci/ansi2html_spec.rb
+++ b/spec/lib/gitlab/ci/ansi2html_spec.rb
@@ -209,7 +209,7 @@ describe Gitlab::Ci::Ansi2html do
     let(:section_start) { "section_start:#{section_start_time.to_i}:#{section_name}\r\033[0K"}
     let(:section_end) { "section_end:#{section_end_time.to_i}:#{section_name}\r\033[0K"}
     let(:section_start_html) do
-      '<div class="js-section-start fa fa-caret-down pr-2 cursor-pointer"' \
+      '<div class="js-section-start section-start fa fa-caret-down pr-2 cursor-pointer"' \
       " data-timestamp=\"#{section_start_time.to_i}\" data-section=\"#{class_name(section_name)}\"" \
       ' role="button"></div>'
     end