Merge branch 'dm-copy-parallel-diff' into 'master'

Only copy old/new code when selecting left/right side of parallel diff

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

6 files changed, 93 insertions, 58 deletions

diff --git a/app/assets/javascripts/copy_as_gfm.js b/app/assets/javascripts/copy_as_gfm.js
index e3e2c798570..93b0cbf4209 100644
--- a/app/assets/javascripts/copy_as_gfm.js
+++ b/app/assets/javascripts/copy_as_gfm.js
@@ -298,7 +298,7 @@ class CopyAsGFM {
     const documentFragment = getSelectedFragment();
     if (!documentFragment) return;
 
-    const el = transformer(documentFragment.cloneNode(true));
+    const el = transformer(documentFragment.cloneNode(true), e.currentTarget);
     if (!el) return;
 
     e.preventDefault();
@@ -338,55 +338,64 @@ class CopyAsGFM {
   }
 
   static transformGFMSelection(documentFragment) {
-    const gfmEls = documentFragment.querySelectorAll('.md, .wiki');
-    switch (gfmEls.length) {
+    const gfmElements = documentFragment.querySelectorAll('.md, .wiki');
+    switch (gfmElements.length) {
       case 0: {
         return documentFragment;
       }
       case 1: {
-        return gfmEls[0];
+        return gfmElements[0];
       }
       default: {
-        const allGfmEl = document.createElement('div');
+        const allGfmElement = document.createElement('div');
 
-        for (let i = 0; i < gfmEls.length; i += 1) {
-          const lineEl = gfmEls[i];
-          allGfmEl.appendChild(lineEl);
-          allGfmEl.appendChild(document.createTextNode('\n\n'));
+        for (let i = 0; i < gfmElements.length; i += 1) {
+          const gfmElement = gfmElements[i];
+          allGfmElement.appendChild(gfmElement);
+          allGfmElement.appendChild(document.createTextNode('\n\n'));
         }
 
-        return allGfmEl;
+        return allGfmElement;
       }
     }
   }
 
-  static transformCodeSelection(documentFragment) {
-    const lineEls = documentFragment.querySelectorAll('.line');
+  static transformCodeSelection(documentFragment, target) {
+    let lineSelector = '.line';
 
-    let codeEl;
-    if (lineEls.length > 1) {
-      codeEl = document.createElement('pre');
-      codeEl.className = 'code highlight';
+    if (target) {
+      const lineClass = ['left-side', 'right-side'].filter(name => target.classList.contains(name))[0];
+      if (lineClass) {
+        lineSelector = `.line_content.${lineClass} ${lineSelector}`;
+      }
+    }
+
+    const lineElements = documentFragment.querySelectorAll(lineSelector);
+
+    let codeElement;
+    if (lineElements.length > 1) {
+      codeElement = document.createElement('pre');
+      codeElement.className = 'code highlight';
 
-      const lang = lineEls[0].getAttribute('lang');
+      const lang = lineElements[0].getAttribute('lang');
       if (lang) {
-        codeEl.setAttribute('lang', lang);
+        codeElement.setAttribute('lang', lang);
       }
     } else {
-      codeEl = document.createElement('code');
+      codeElement = document.createElement('code');
     }
 
-    if (lineEls.length > 0) {
-      for (let i = 0; i < lineEls.length; i += 1) {
-        const lineEl = lineEls[i];
-        codeEl.appendChild(lineEl);
-        codeEl.appendChild(document.createTextNode('\n'));
+    if (lineElements.length > 0) {
+      for (let i = 0; i < lineElements.length; i += 1) {
+        const lineElement = lineElements[i];
+        codeElement.appendChild(lineElement);
+        codeElement.appendChild(document.createTextNode('\n'));
       }
     } else {
-      codeEl.appendChild(documentFragment);
+      codeElement.appendChild(documentFragment);
     }
 
-    return codeEl;
+    return codeElement;
   }
 
   static nodeToGFM(node, respectWhitespaceParam = false) {
diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js
index 6a008112203..ae8338f5fd2 100644
--- a/app/assets/javascripts/diff.js
+++ b/app/assets/javascripts/diff.js
@@ -24,7 +24,8 @@ class Diff {
     if (!isBound) {
       $(document)
         .on('click', '.js-unfold', this.handleClickUnfold.bind(this))
-        .on('click', '.diff-line-num a', this.handleClickLineNum.bind(this));
+        .on('click', '.diff-line-num a', this.handleClickLineNum.bind(this))
+        .on('mousedown', 'td.line_content.parallel', this.handleParallelLineDown.bind(this));
       isBound = true;
     }
 
@@ -100,6 +101,18 @@ class Diff {
     this.highlightSelectedLine();
   }
 
+  handleParallelLineDown(e) {
+    const line = $(e.currentTarget);
+    const table = line.closest('table');
+
+    table.removeClass('left-side-selected right-side-selected');
+
+    const lineClass = ['left-side', 'right-side'].filter(name => line.hasClass(name))[0];
+    if (lineClass) {
+      table.addClass(`${lineClass}-selected`);
+    }
+  }
+
   diffViewType() {
     return $('.inline-parallel-buttons a.active').data('view-type');
   }
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index e4bd783c8bc..fb23343b966 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -77,6 +77,18 @@
           word-wrap: break-word;
         }
       }
+
+      &.left-side-selected {
+        td.line_content.parallel.right-side {
+          @include user-select(none);
+        }
+      }
+
+      &.right-side-selected {
+        td.line_content.parallel.left-side {
+          @include user-select(none);
+        }
+      }
     }
 
     tr.line_holder.parallel {
diff --git a/app/helpers/diff_helper.rb b/app/helpers/diff_helper.rb
index 28f591a4e22..4e4a66e8a02 100644
--- a/app/helpers/diff_helper.rb
+++ b/app/helpers/diff_helper.rb
@@ -33,19 +33,21 @@ module DiffHelper
   end
 
   def diff_match_line(old_pos, new_pos, text: '', view: :inline, bottom: false)
-    content = content_tag :td, text, class: "line_content match #{view == :inline ? '' : view}"
-    cls = ['diff-line-num', 'unfold', 'js-unfold']
-    cls << 'js-unfold-bottom' if bottom
+    content_line_class = %w[line_content match]
+    content_line_class << 'parallel' if view == :parallel
+
+    line_num_class = %w[diff-line-num unfold js-unfold]
+    line_num_class << 'js-unfold-bottom' if bottom
 
     html = ''
     if old_pos
-      html << content_tag(:td, '...', class: cls + ['old_line'], data: { linenumber: old_pos })
-      html << content unless view == :inline
+      html << content_tag(:td, '...', class: [*line_num_class, 'old_line'], data: { linenumber: old_pos })
+      html << content_tag(:td, text, class: [*content_line_class, 'left-side']) if view == :parallel
     end
 
     if new_pos
-      html << content_tag(:td, '...', class: cls + ['new_line'], data: { linenumber: new_pos })
-      html << content
+      html << content_tag(:td, '...', class: [*line_num_class, 'new_line'], data: { linenumber: new_pos })
+      html << content_tag(:td, text, class: [*content_line_class, ('right-side' if view == :parallel)])
     end
 
     html.html_safe
diff --git a/app/views/projects/blob/diff.html.haml b/app/views/projects/blob/diff.html.haml
index d1d448f0d4c..ea7a71792a3 100644
--- a/app/views/projects/blob/diff.html.haml
+++ b/app/views/projects/blob/diff.html.haml
@@ -5,25 +5,24 @@
       = diff_match_line @form.since, @form.since, text: @match_line, view: diff_view
 
   - @lines.each_with_index do |line, index|
-    - line_new = index + @form.since
-    - line_old = line_new - @form.offset
-    - line_content = capture do
-      %td.line_content.noteable_line{ class: line_class }==#{' ' * @form.indent}#{line}
-    %tr.line_holder.diff-expanded{ id: line_old, class: line_class }
+    - line_number_new = index + @form.since
+    - line_number_old = line_number_new - @form.offset
+    - line[0, 0] = ' ' * @form.indent
+    %tr.line_holder.diff-expanded{ id: line_number_old, class: line_class }
       - case diff_view
       - when :inline
-        %td.old_line.diff-line-num{ data: { linenumber: line_old } }
-          %a{ href: "#", data: { linenumber: line_old }, disabled: true }
-        %td.new_line.diff-line-num{ data: { linenumber: line_new } }
-          %a{ href: "#", data: { linenumber: line_new }, disabled: true }
-        = line_content
+        %td.old_line.diff-line-num{ data: { linenumber: line_number_old } }
+          %a{ href: "#", data: { linenumber: line_number_old }, disabled: true }
+        %td.new_line.diff-line-num{ data: { linenumber: line_number_new } }
+          %a{ href: "#", data: { linenumber: line_number_new }, disabled: true }
+        %td.line_content.noteable_line{ class: line_class }= line
       - when :parallel
-        %td.old_line.diff-line-num{ data: { linenumber: line_old } }
-          %a{ href: "##{line_old}", data: { linenumber: line_old }, disabled: true }
-        = line_content
-        %td.new_line.diff-line-num{ data: { linenumber: line_new } }
-          %a{ href: "##{line_new}", data: { linenumber: line_new }, disabled: true }
-        = line_content
+        %td.old_line.diff-line-num{ data: { linenumber: line_number_old } }
+          %a{ href: "##{line_number_old}", data: { linenumber: line_number_old }, disabled: true }
+        %td.line_content.noteable_line.left-side{ class: line_class }= line
+        %td.new_line.diff-line-num{ data: { linenumber: line_number_new } }
+          %a{ href: "##{line_number_new}", data: { linenumber: line_number_new }, disabled: true }
+        %td.line_content.noteable_line.right-side{ class: line_class }= line
 
   - if @form.unfold? && @form.bottom? && @form.to < @blob.lines.size
     %tr.line_holder{ id: @form.to, class: line_class }
diff --git a/app/views/projects/diffs/_parallel_view.html.haml b/app/views/projects/diffs/_parallel_view.html.haml
index 56d63250714..1f0ca211074 100644
--- a/app/views/projects/diffs/_parallel_view.html.haml
+++ b/app/views/projects/diffs/_parallel_view.html.haml
@@ -14,20 +14,20 @@
             = diff_match_line left.old_pos, nil, text: left.text, view: :parallel
           - when 'old-nonewline', 'new-nonewline'
             %td.old_line.diff-line-num
-            %td.line_content.match= left.text
+            %td.line_content.match.left-side= left.text
           - else
             - left_line_code = diff_file.line_code(left)
             - left_position = diff_file.position(left)
-            %td.old_line.diff-line-num.js-avatar-container{ id: left_line_code, class: left.type, data: { linenumber: left.old_pos } }
+            %td.old_line.diff-line-num.js-avatar-container{ class: left.type, data: { linenumber: left.old_pos } }
               = add_diff_note_button(left_line_code, left_position, 'old')
               %a{ href: "##{left_line_code}", data: { linenumber: left.old_pos } }
               - discussion_left = discussions_left.try(:first)
               - if discussion_left && discussion_left.resolvable?
                 %diff-note-avatars{ "discussion-id" => discussion_left.id }
-            %td.line_content.parallel.noteable_line{ class: left.type }= diff_line_content(left.text)
+            %td.line_content.parallel.noteable_line.left-side{ id: left_line_code, class: left.type }= diff_line_content(left.text)
         - else
           %td.old_line.diff-line-num.empty-cell
-          %td.line_content.parallel
+          %td.line_content.parallel.left-side
 
         - if right
           - case right.type
@@ -35,20 +35,20 @@
             = diff_match_line nil, right.new_pos, text: left.text, view: :parallel
           - when 'old-nonewline', 'new-nonewline'
             %td.new_line.diff-line-num
-            %td.line_content.match= right.text
+            %td.line_content.match.right-side= right.text
           - else
             - right_line_code = diff_file.line_code(right)
             - right_position = diff_file.position(right)
-            %td.new_line.diff-line-num.js-avatar-container{ id: right_line_code, class: right.type, data: { linenumber: right.new_pos } }
+            %td.new_line.diff-line-num.js-avatar-container{ class: right.type, data: { linenumber: right.new_pos } }
               = add_diff_note_button(right_line_code, right_position, 'new')
               %a{ href: "##{right_line_code}", data: { linenumber: right.new_pos } }
               - discussion_right = discussions_right.try(:first)
               - if discussion_right && discussion_right.resolvable?
                 %diff-note-avatars{ "discussion-id" => discussion_right.id }
-            %td.line_content.parallel.noteable_line{ class: right.type }= diff_line_content(right.text)
+            %td.line_content.parallel.noteable_line.right-side{ id: right_line_code, class: right.type }= diff_line_content(right.text)
         - else
           %td.old_line.diff-line-num.empty-cell
-          %td.line_content.parallel
+          %td.line_content.parallel.right-side
 
       - if discussions_left || discussions_right
         = render "discussions/parallel_diff_discussion", discussions_left: discussions_left, discussions_right: discussions_right