Adds margins to the section lines

3 files changed, 17 insertions, 12 deletions

diff --git a/app/assets/javascripts/jobs/components/job_log.vue b/app/assets/javascripts/jobs/components/job_log.vue
index e845a84e872..8e4557e2b6c 100644
--- a/app/assets/javascripts/jobs/components/job_log.vue
+++ b/app/assets/javascripts/jobs/components/job_log.vue
@@ -29,9 +29,7 @@ export default {
     });
   },
   destroyed() {
-    this.$el
-      .querySelector('.js-section-start')
-      .removeEventListener('click', this.handleSectionClick);
+    this.removeEventListener();
   },
   methods: {
     ...mapActions(['scrollBottom']),
@@ -49,6 +47,11 @@ export default {
         }, 0);
       }
     },
+    removeEventListener() {
+      this.$el
+        .querySelector('.js-section-start')
+        .removeEventListener('click', this.handleSectionClick);
+    },
     /**
      * The collapsible rows are sent in HTML from the backend
      * We need to add a onclick handler for the divs that match `.js-section-start`
@@ -60,7 +63,8 @@ export default {
         .forEach(el => el.addEventListener('click', this.handleSectionClick));
     },
     /**
-     *
+     * On click, we toggle the hidden class of
+     * all the rows that match the `data-section` selector
      */
     handleSectionClick(evt) {
       const clickedArrow = evt.currentTarget;
@@ -70,11 +74,8 @@ export default {
       clickedArrow.classList.toggle('fa-caret-down');
 
       const dataSection = clickedArrow.getAttribute('data-section');
-      const sibilings = this.$el.querySelectorAll(
-        `.s_${dataSection}:not(.js-section-header)`,
-      );
+      const sibilings = this.$el.querySelectorAll(`.js-s_${dataSection}:not(.js-section-header)`);
 
-      // Get all sibilings between the clicked element and the next
       sibilings.forEach(row => row.classList.toggle('hidden'));
     },
   },
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 6fc742871e7..6e98908eeed 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -124,6 +124,10 @@
     float: left;
     padding-left: $gl-padding-8;
   }
+
+  .section-header ~ .section.line {
+    margin-left: $gl-padding;
+  }
 }
 
 .build-header {
diff --git a/lib/gitlab/ci/ansi2html.rb b/lib/gitlab/ci/ansi2html.rb
index 70c8c099e55..7f98cfa4f79 100644
--- a/lib/gitlab/ci/ansi2html.rb
+++ b/lib/gitlab/ci/ansi2html.rb
@@ -193,7 +193,7 @@ module Gitlab
           if @sections.any?
             css_classes << "section"
             css_classes += sections.map { |section| "s_#{section}" }
-            css_classes << "prepend-left-default line"
+            css_classes << "line"
           end
 
           write_in_tag %{<br/>}
@@ -222,7 +222,7 @@ module Gitlab
           return if @sections.include?(section)
 
           @sections << section
-          write_raw %{<div class="section-start js-section-start fa fa-caret-down js-open append-right-8 cursor-pointer" id="id_#{section}" data-action="start" data-timestamp="#{timestamp}" data-section="#{data_section_names}" role="button"></div>}
+          write_raw %{<div class="js-section-start fa fa-caret-down append-right-8 cursor-pointer" data-timestamp="#{timestamp}" data-section="#{data_section_names}" role="button"></div>}
           @lineno_in_section = 0
         end
 
@@ -231,7 +231,7 @@ module Gitlab
 
           # close all sections up to section
           until @sections.empty?
-            write_raw %{<div class="section-end js-section-end" data-action="end" data-timestamp="#{timestamp}" data-section="#{data_section_names}"></div>}
+            write_raw %{<div class="section-end" data-section="#{data_section_names}"></div>}
 
             last_section = @sections.pop
             break if section == last_section
@@ -309,7 +309,7 @@ module Gitlab
           if @sections.any?
             css_classes << "section"
             css_classes << "js-section-header" if @lineno_in_section == 0
-            css_classes += sections.map { |section| "s_#{section}" }
+            css_classes += sections.map { |section| "js-s_#{section}" }
           end
 
           @out << %{<span class="#{css_classes.join(' ')}">}