gitlabhq/gitlabhq — pull request #6610 by GeorgeDewar (2014-03-24 21:16:05+00:00)
Title: Refactor Parallel Diff feature and add scrollbars

Currently, the Parallel Diff feature can't seem to handle lines that exceed the width of each of the two diff panes.

![old_diff_example](https://f.cloud.github.com/assets/5344417/2505440/709925bc-b399-11e3-9347-0d46451b89df.png)

Most parallel diff implementations I have seen (e.g. in IDEs) solve this problem by allowing synchronized horizontal scrolling (i.e. both sides scroll together).

I have implemented this by moving to a three-column div layout for the feature, with each side in its own horizontally-scrolling div (I don't think it was possible to do this with the original layout, with one full line in each table row).

So that the horizontal scroll bars are accessible, I've made the diff pane a fixed height, which scrolls vertically. The result seems to work fine in recent versions of Chrome, Firefox and IE.

![new_diff_example](https://f.cloud.github.com/assets/5344417/2505442/7d6071ba-b399-11e3-8444-4a36caecdb5d.png)

In doing this change, I felt that having so much logic in the view (_parallel_view.html.haml) was constraining the layout of the page, and so it seemed appropriate to pull it out as Ruby code (which is currently, perhaps inappropriately, in the helper) and expose a data structure to the view that it could display easily in any HTML structure, removing the burden of processing from the view.

I'm interested in hearing feedback on this.