Add a blink comparator and pixel difference to image diffs

Pixel difference uses CSS mix-blend-mode, which is supported currently
only on Firefox >= 32 and on Safari >= 7.1. Implementation is behind a
Javascript feature test.

For other browsers, there's a blink comparator.

Code changes:

* ImageDiffHandler now takes the page it's used on as argument. We need
  that to get labels. DOM generated is a
  little bit different (new controls).
  
* Diff pages adapted to new constructor of ImageDiffHandler.

* CSS and Javascript changes implementing the new controls, making use
  of two new static image resources. Since I felt that the new controls
  deserved tooltips, I also gave the opacity slider a tooltip: changed
  to <a>, and slider handle changed from <div> to <span>. CSS ensures
  everything still displays the same (basically display:inline-block).
  
* Supplied messages for English, French, and German for the new
  tooltips.

Tested on IE8, Safari 6.1.6 & 7.1, Chrome 38, FF 33.1 & FF 3.6.13

3 files changed, 18 insertions, 1 deletions

diff --git a/src/main/resources/blink32.png b/src/main/resources/blink32.png
new file mode 100644
index 00000000..da593505
--- /dev/null
+++ b/src/main/resources/blink32.png
diff --git a/src/main/resources/gitblit.css b/src/main/resources/gitblit.css
index e0570ceb..a6cc516c 100644
--- a/src/main/resources/gitblit.css
+++ b/src/main/resources/gitblit.css
@@ -1490,10 +1490,12 @@ img.imgdiff-old {
 	user-select: none;

 	border: 1px solid #F00;

 }

+

 .imgdiff-opa-container {

+	display: inline-block;

 	width: 200px;

 	height: 4px;

-	margin: 12px 35px;

+	margin: 12px 35px 6px 35px;

 	padding: 0;

 	position: relative;

 	border: 1px solid #888;

@@ -1532,6 +1534,7 @@ img.imgdiff-old {
 }

 

 .imgdiff-opa-handle {

+	display: inline-block;

 	width: 10px;

 	height: 10px;

 	position: absolute;

@@ -1549,6 +1552,7 @@ img.imgdiff-old {
 }

 

 .imgdiff-ovr-handle {

+	display: inline-block;

 	width : 1px;

 	height: 100%;

 	top: 0px;

@@ -1578,6 +1582,19 @@ img.imgdiff-old {
 	/* With CSS: background-image: radial-gradient(5px at 50% 50%, #444, #888, transparent 5px); */

 }

 

+.imgdiff-link {

+	margin: 0px 4px;

+	text-decoration: none;

+	border: none;

+}

+

+.imgdiff-link > img {

+	border: 1px solid transparent; /* Avoid jumping when we change the border */

+	width: 20px;

+	height: 20px;

+	margin-bottom: 10px;

+}

+

 /* End image diffs */

 

 td.changeType {

diff --git a/src/main/resources/sub32.png b/src/main/resources/sub32.png
new file mode 100644
index 00000000..ebcfe13e
--- /dev/null
+++ b/src/main/resources/sub32.png