gitlabhq/app/views/projects/commits/_parallel_view.html.haml

/ Side-by-side diff view
- old_lines, new_lines = parallel_diff_lines(project, @commit, diff, file)
- num_lines = old_lines.length

%div.text-file-parallel
  %div.diff-side.diff-side-left
    %table
      - old_lines.each do |line|

        %tr.line_holder.parallel
          - if line.type == :file_created
            %td.line_content.parallel= "File was created"
          - elsif line.type == :deleted
            %td.line_content{class: "parallel noteable_line old #{line.code}", "line_code" => line.code }= line.content
          - else line.type == :no_change
            %td.line_content.parallel= line.content

  %div.diff-middle
    %table
      - num_lines.times do |index|
        %tr
          - if old_lines[index].type == :deleted
            %td.old_line.old= old_lines[index].num
          - else
            %td.old_line= old_lines[index].num

          %td.diff_line=""

          - if new_lines[index].type == :added
            %td.new_line.new= new_lines[index].num
          - else
            %td.new_line= new_lines[index].num

  %div.diff-side.diff-side-right
    %table
      - new_lines.each do |line|

        %tr.line_holder.parallel
          - if line.type == :file_deleted
            %td.line_content.parallel= "File was deleted"
          - elsif line.type == :added
            %td.line_content{class: "parallel noteable_line new #{line.code}", "line_code" => line.code }= line.content
          - else line.type == :no_change
            %td.line_content.parallel= line.content

:javascript
  $('.diff-side-right').on('scroll', function(){
    $('.diff-side-left, .diff-middle').scrollTop($(this).scrollTop());
    $('.diff-side-left').scrollLeft($(this).scrollLeft());
  });

  $('.diff-side-left').on('scroll', function(){
    $('.diff-side-right, .diff-middle').scrollTop($(this).scrollTop()); // might never be relevant
    $('.diff-side-right').scrollLeft($(this).scrollLeft());
  });