Improve size of rendered job traceleipert-improve-ansi2html

Currently in collapsible job traces _each_ line is wrapped in a span and
every line is prepended with another span in order to indent that part
of the job log.

We are now merging both and fix the CSS in order to show them properly
indented. We only had to make sure that before we open a tag, we close
the existing ones.

4 files changed, 19 insertions, 11 deletions

diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 6e98908eeed..262c0bf5ed2 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -127,6 +127,7 @@
 
   .section-header ~ .section.line {
     margin-left: $gl-padding;
+    display: block;
   }
 }
 
diff --git a/changelogs/unreleased/leipert-improve-ansi2html.yml b/changelogs/unreleased/leipert-improve-ansi2html.yml
new file mode 100644
index 00000000000..dd3582b3434
--- /dev/null
+++ b/changelogs/unreleased/leipert-improve-ansi2html.yml
@@ -0,0 +1,5 @@
+---
+title: Improve job log rendering performance
+merge_request: 31262
+author:
+type: performance
diff --git a/lib/gitlab/ci/ansi2html.rb b/lib/gitlab/ci/ansi2html.rb
index 8335e1c1a7a..7e348763e81 100644
--- a/lib/gitlab/ci/ansi2html.rb
+++ b/lib/gitlab/ci/ansi2html.rb
@@ -196,13 +196,8 @@ module Gitlab
         def handle_new_line
           write_in_tag %{<br/>}
 
-          if @sections.any?
-            css_classes = %w[section line] + sections.map { |section| "s_#{section}" }
-            write_raw %{<span class="#{css_classes.join(' ')}"></span>}
-          end
-
+          close_open_tags if @sections.any? && @lineno_in_section == 0
           @lineno_in_section += 1
-          ensure_open_new_tag
         end
 
         def handle_section(scanner)
@@ -309,10 +304,18 @@ module Gitlab
 
           if @sections.any?
             css_classes << "section"
-            css_classes << "js-section-header section-header" if @lineno_in_section == 0
+
+            css_classes << if @lineno_in_section == 0
+                             "js-section-header section-header"
+                           else
+                             "line"
+                           end
+
             css_classes += sections.map { |section| "js-s-#{section}" }
           end
 
+          close_open_tags
+
           @out << if css_classes.any?
                     %{<span class="#{css_classes.join(' ')}">}
                   else
diff --git a/spec/lib/gitlab/ci/ansi2html_spec.rb b/spec/lib/gitlab/ci/ansi2html_spec.rb
index 4881ef15eab..eaf06ed8992 100644
--- a/spec/lib/gitlab/ci/ansi2html_spec.rb
+++ b/spec/lib/gitlab/ci/ansi2html_spec.rb
@@ -232,12 +232,11 @@ describe Gitlab::Ci::Ansi2html do
       let(:text) { "#{section_start}Some text#{section_end}" }
 
       it 'prints light red' do
-        text = "#{section_start}\e[91mHello\e[0m\n#{section_end}"
+        text = "#{section_start}\e[91mHello\e[0m\nLine 1\nLine 2\nLine 3\n#{section_end}"
         header = %{<span class="term-fg-l-red section js-section-header section-header js-s-#{class_name(section_name)}">Hello</span>}
         line_break = %{<span class="section js-section-header section-header js-s-#{class_name(section_name)}"><br/></span>}
-        line = %{<span class="section line s_#{class_name(section_name)}"></span>}
-        empty_line = %{<span class="section js-s-#{class_name(section_name)}"></span>}
-        html = "#{section_start_html}#{header}#{line_break}#{line}#{empty_line}#{section_end_html}"
+        output_line = %{<span class="section line js-s-#{class_name(section_name)}">Line 1<br/>Line 2<br/>Line 3<br/></span>}
+        html = "#{section_start_html}#{header}#{line_break}#{output_line}#{section_end_html}"
 
         expect(convert_html(text)).to eq(html)
       end