Fix border sizes around thumbnails

This PR fixes two issues: 

**1. Thumbnail borders do not have the same width in all directions**
Currently, the thumbnail border width is [7, 5, 6, 7]px in [top, right, bottom, left] direction. This is because the thumbnail canvas inside the has a 1px border which is not accounted for in the size of the div element around it (which would explain a border size of [7, 5, 5, 7]px). The missing pixel difference is because the size of the thumbnail canvas and its surrounding div is set as a fractional number, whose fractional part is ignored by the canvas element but respected by the div element. This PR ensures a 7px border width by taking the canvas border into account and setting an integer width to canvas and its surrounding div element.

**2. Thumbnails jump up and down by a few pixels whenever a new thumbnail is loaded.**
Thumbnails currently have a different size, depending on whether or not the "data-loaded" tag is set.
This PR adjust the CSS style of the not([data-loaded]) elements so that its size matches the other ones.
(The not([data-loaded]) elements have a 1px dashed border, whose size must be subtracted).

The second effect works perfectly for the tracemonkey paper, but it fails for example for #2909, where the thumbnails still move sometimes. I don't know why, maybe its because the pages there have varying aspect ratio.