Move out diff conditionals from SnapshotComparer#compare!

By moving the conditionals from SnapshotComparer#compare! to
SnapshotComparisonImage#render_row, we get the following benefits:

- The #compare! method becomes more lean
- We open up for subclasses to SnapshotComparisonImage to define its own
  row-rendering behavior (I intend to add a gutter-renderer)
Add a gutter column to the diff image

We used to have this in the past, but it got removed during a recent
refactor. We believe it adds to the experience, so we're adding it back.
This time, I'm making it 10 pixels to make it easier to distinguish
magenta from red.
Add margin between gutter and diff image

This makes it clearer that the gutter is not part of the image.
Make diff-indicator an arrow icon

The red line was competing too much with the gutter. The arrow is also a
bit easier to see.
Make MAXIMUM_ADJACENCY_GAP smaller

The DiffClusterFinder would cluster anything that is closer than 20
pixels apart. For diffs with many changed sections, I noticed that this
value was too high. I tried my way around, and 5 pixels seemed to match
the expectation I had on the interaction better.
Render additions/deletions without color overlay

Now that we have the gutter in a better state, we don't need the
green/red overlay on the before/after image to display
additions/deletions.

This has been ping-ponged a bit back and forth, and it's possible that
we'll bring it back. But for now, this is the our best assumption about
how to make the experience as good as possible.
Make changes show up as gray in gutter

The magenta color was too close to red so we decided to go with
something more neutral for changes. Additions and deletions will still
be green and red.
Use ChunkyPNG::Color.from_hex to init colors

Before we had a comment next to each of these colors with the hex code
for the color. ChunkyPNG::Color already has a method to do this
translation, so let's use that instead.
Show Photoshop-style checkered pattern where there are gaps

To better visualize that there is a gap in the before or after image, we
render a checkered, Photoshop-style, background pattern. The gaps were
already there, all I had to do was to make sure that the overlayed image
was faded on a white background instead of a transparent, and that the
gutter didn't render anything transparent.
Show gray rulers for each diff cluster, when focused

To aid looking at a diff cluster at a time, I'm adding a gray border on
top and bottom of the cluster when it is focused.

This haml code is starting to get ugly, and we should probably start
simplifying it soon. But for now I think this is fine.
Vertically center the diff cluster arrow

Before, the arrow would be rendered close to the top of the cluster.
That was ok, at least for clusters that were taller than the icon. But
when the cluster was smaller than the icon, it felt weird. We're now
centering it vertically.

The only place where this might be a problem is when the cluster is
taller than twice the size of the screen viewport. The icon would then
render outside the visible area. But those clusters are complicated
enough already, so having the arrow in the wrong place just makes it
marginally worse.
Reorder diff tabs: Diff, Before, After

This makes for a more natural order when flipping between them using the
"x" keyboard shortcut.
Make diff/before/after tabs always visible

This commit makes use of the affix component from Bootstrap to turn the
nav-tabs on the snapshot#show page into a component that's always
visible. This helps when you're scrolled down on the page and want to
switch between the before/after/diff image.