devtools: Show diff image first

[n-riesco]

When I'm using the image viewer, I always find myself scrolling to the bottom of the page to find the diff image.

With this PR, the images are shown in the following order: diff, mock and baseline.

[etpinard]

Glad to see that someone else is using the image_viewer.

baseline, test output and diff ordering makes more sense to me. But, I'm ok with changing it as long as me make it clearer.

Maybe we could add a tooltip on mouseover over the images displaying diff, baseline, test image accordingly ?

[n-riesco]

I think the tooltip would help, but the issue I was trying to address is that in most cases the diff image is out of view at the bottom of the page (imagine scrolling down each time when you have to go through 80 test failures).

[mdtusz]

An idea to make things "fancy" but easy to see would be to have the images cycle in the same position, then allow for a mousover/click on a label to choose a specific image. I frequently find myself opening the baseline and computed images on circle and quickly switching tabs between them to see the differences.

[n-riesco]

@etpinard I had forgotten about this PR. Sorry about that.

I've added the image tooltips you suggested and three toggle buttons to hide/show the baseline, test and diff images. In this way, if I'm only interested in the diff images I could hide the baseline and test images.

[etpinard]

@n-riesco looks good. Can you merge the latest master, and push again? We've updated our image-test container this week, which is causing old branches to fail on CircleCI.

[mdtusz]

💃