Merge branch '65790-highlight' into 'master'

Adds highlight to collapsible line in job log

Closes #65790

See merge request gitlab-org/gitlab-ce!31665

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

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 {

changelogs/unreleased/65790-highlight.yml

+---
+title: Adds highlight to the collapsible section
+merge_request:
+author:
+type: added

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
 

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