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

1 files changed, 26 insertions, 6 deletions

diff --git a/src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java b/src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java
index 52bf13b9..dc0c5ae8 100644
--- a/src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java
+++ b/src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java
@@ -18,6 +18,7 @@ package com.gitblit.wicket.pages;
 import java.nio.charset.StandardCharsets;
 import java.util.List;
 
+import org.apache.wicket.protocol.http.WebApplication;
 import org.apache.wicket.protocol.http.WicketURLEncoder;
 import org.eclipse.jgit.diff.DiffEntry;
 import org.eclipse.jgit.diff.DiffEntry.Side;
@@ -37,14 +38,14 @@ public class ImageDiffHandler implements DiffUtils.BinaryDiffHandler {
 	private final String oldCommitId;
 	private final String newCommitId;
 	private final String repositoryName;
-	private final String baseUrl;
+	private final BasePage page;
 	private final List<String> imageExtensions;
 
 	private int imgDiffCount = 0;
 
-	public ImageDiffHandler(final String baseUrl, final String repositoryName, final String oldCommitId,
-			final String newCommitId, final List<String> imageExtensions) {
-		this.baseUrl = baseUrl;
+	public ImageDiffHandler(final BasePage page, final String repositoryName, final String oldCommitId, final String newCommitId,
+			final List<String> imageExtensions) {
+		this.page = page;
 		this.repositoryName = repositoryName;
 		this.oldCommitId = oldCommitId;
 		this.newCommitId = newCommitId;
@@ -81,7 +82,19 @@ public class ImageDiffHandler implements DiffUtils.BinaryDiffHandler {
 				old.appendElement("img").attr("class", "imgdiff-old").attr("id", id).attr("style", "max-width:640px;").attr("src", oldUrl);
 				container.appendElement("img").attr("class", "imgdiff").attr("style", "max-width:640px;").attr("src", newUrl);
 				wrapper.appendElement("br");
-				wrapper.appendElement("div").attr("class", "imgdiff-opa-container").appendElement("div").attr("class", "imgdiff-opa-slider");
+				Element controls = wrapper.appendElement("div");
+				// Opacity slider
+				controls.appendElement("div").attr("class", "imgdiff-opa-container").appendElement("a").attr("class", "imgdiff-opa-slider")
+						.attr("href", "#").attr("title", page.getString("gb.opacityAdjust"));
+				// Blink comparator: find Pluto!
+				controls.appendElement("a").attr("class", "imgdiff-link imgdiff-blink").attr("href", "#")
+						.attr("title", page.getString("gb.blinkComparator"))
+						.appendElement("img").attr("src", getStaticResourceUrl("blink32.png")).attr("width", "20");
+				// Pixel subtraction, initially not displayed, will be shown by imgdiff.js depending on feature test.
+				// (Uses CSS mix-blend-mode, which isn't supported on all browsers yet).
+				controls.appendElement("a").attr("class", "imgdiff-link imgdiff-subtract").attr("href", "#")
+						.attr("title", page.getString("gb.imgdiffSubtract")).attr("style", "display:none;")
+						.appendElement("img").attr("src", getStaticResourceUrl("sub32.png")).attr("width", "20");
 				return builder.toString();
 			}
 			break;
@@ -118,7 +131,7 @@ public class ImageDiffHandler implements DiffUtils.BinaryDiffHandler {
 				if (ext.equalsIgnoreCase(extension)) {
 					String commitId = Side.NEW.equals(side) ? newCommitId : oldCommitId;
 					if (commitId != null) {
-						return RawServlet.asLink(baseUrl, urlencode(repositoryName), commitId, urlencode(path));
+						return RawServlet.asLink(page.getContextUrl(), urlencode(repositoryName), commitId, urlencode(path));
 					} else {
 						return null;
 					}
@@ -129,6 +142,13 @@ public class ImageDiffHandler implements DiffUtils.BinaryDiffHandler {
 	}
 
 	/**
+	 * Returns a URL that will fetch the designated static resource from within GitBlit.
+	 */
+	protected String getStaticResourceUrl(String contextRelativePath) {
+		return WebApplication.get().getRequestCycleProcessor().getRequestCodingStrategy().rewriteStaticRelativeUrl(contextRelativePath);
+	}
+
+	/**
 	 * Encode a URL component of a {@link RawServlet} URL in the special way that the servlet expects it. Note that
 	 * the %-encoding used does not encode '&amp;' or '&lt;'. Slashes are not encoded in the result.
 	 *