Use a decorated TextEditor to render file patches

[smashwilson]

Scaling the rendering performance of the FilePatch items has always been a problem for us, because we render DOM elements for every line of every diff. It's a lot of work for React and it's a lot of work for the DOM. We've put a band-aid on this by not rendering diffs that are more than 32k bytes, but especially if we want to use a patch view to do things like show the full diff of a commit or a pull request, we'll reach that limit pretty quickly.

So, let's re-implement FilePatch rendering as decorations in one of Atom's TextEditors. That gets us tiling and scaling and a ton of black-magic rendering performance improvements.

The cool thing is, this will get us editable diffs too. ✨

To replicate the existing patch view, we'll need:

• A header decoration that shows the staged status, path, and file-level controls.
• A hunk decoration that shows the hunk header, stage or unstage controls, and a discard control
• A custom gutter to show the line numbers from both sides in two columns
• Line decorations for added/removed lines within each hunk and highlighting the current selection
• Interaction modes: hunk selection, line selection, and edit

[daviwil]

[simurai]

More things to consider: 😇

• Word highlighting for diffs -> Enhancement Request: Word Highlighting for Diffs #759
• Unified/split mode. Here an outdated PR -> Implement split diffs #866
• Multi-file diff. A pane that contains diffs from multiple files. Similar to .com's Files changed.

The last two probably make things a lot more complex and not even sure if Atom's text editor would support it without making lots of changes.

[smashwilson]

I actually think we couldn't do multi-file diffs without this change: we'd hit that performance cliff too soon. That should just be a question of adding decorations for the file separators and maybe a header for navigation? In any case I consider that a natural follow-on change. 😄

Split-diff mode would be tough, yeah. Maybe we could render two <atom-text-editor> elements side-by-side... ? Have to think about that one.

Word highlighting I hadn't considered. We should be able to get syntax highlight really easily though, and that would probably just be another set of decorations... ?