Make SnapshotComparer combine three images into one

This commit breaks the SnapshotComparer apart and delegates the image
creation to a new model, SnapshotComparisonImage, and its three
subtypes:

    SnapshotComparisonImage::Before - knows how to render the
    before-image version of the snapshot.

    SnapshotComparisonImage::Overlayed - renders a combined image
    from the before and after snapshot.

    SnapshotComparisonImage::After - creates the after-image
    representation.

The responsibility of diffing the two snapshots is still up to the
SnapshotComparer, but rendering the pixels is a matter dealt with by the
subclasses.

Instead of creating one diff image to rule them all, we now create three
images. The idea is that you will be able to quickly toggle between the
different representations on the snapshot#show page. We have found this
to be a better UI for quickly reviewing all the different diffs that can
arise.

- The overlay is great for quickly spotting where changes have been
  made.
- By toggling between the before- and after-image, you can easily tell
  what changed.

I choose to remove the gutter for now. I'm not sure that's the best
idea, but I'd like to get some testing done first. If we choose to
reintroduce the gutter, we can render it through a subclass of
SnapshotComparisonImage.
Use sdiff size instead of max height for output images

The number of rows in the resulting diff will, in many cases, be larger
than the number of rows in both the before and after images. Therefore,
we need to use this size to determine the height of the output images.
If we do not do this, the output images will not show the content all
the way to the bottom if there are any "added" or "deleted" rows.

We may want to make the before and after comparison images to use the
widths of the before and after images, in case their widths shift, but
depending on how we end up rendering these, that may not actually be
desirable.

At the same time, I changed the diff percentage calculation to use this
as well, helping to keep the diff percentage under 100%.

Change-Id: I3482016ad776a00bad43cf5408b52249a02c55d5
Improve whitespace, add YARD

We recently added some new SnapshotComparisonImage code that had a
couple of minor opportunities for whitespace improvement and missing
YARD comments.

Change-Id: Ic382e05a17105d54f3a8804ac19dace461c3e2d4
Add color overlay to before and after comparison images

These color overlays help you understand what happened with each image.
Red represents removed and green represents added.

Change-Id: Iadc75852ccaf989e71879dd59c805bbc6d67f26f
Add tab navigation for snapshot diff sprite

Now that we save the snapshot diff image as a sprite consisting of three
images, we need to make the rendering a bit smarter. By adding tabs, and
only showing a third of the image at once, we allow a more focused
review. Most of the time, the "Diff" image is enough to make a good
decision about whether or not the diff should be accepted. This is also
the part of the image that we default to.
Add "x" keyboard shortcut to switch diff tab

This makes it simple to flip between the before, diff, and after image
for a snapshot.