cbe097c0cb
It's currently possible to step through the test results using the <kbd>N</kbd> and <kbd>P</kbd> keys, and you can also switch between test and reference images with the <kbd>T</kbd> key. However if you want to highlight the differences, that can only be done by clicking. This has always annoyed me somewhat, so this patch adds support for toggling the differences view with the <kbd>D</kbd> key.
486 lines
15 KiB
JavaScript
486 lines
15 KiB
JavaScript
/*
|
|
Copyright 2012 Mozilla Foundation
|
|
|
|
Version: MPL 1.1/GPL 2.0/LGPL 2.1
|
|
|
|
The contents of this file are subject to the Mozilla Public License Version
|
|
1.1 (the "License"); you may not use this file except in compliance with
|
|
the License. You may obtain a copy of the License at
|
|
|
|
http://www.mozilla.org/MPL
|
|
|
|
Software distributed under the License is distributed on an "AS IS" basis,
|
|
WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
|
|
for the specific language governing rights and limitations under the
|
|
License.
|
|
|
|
Alternatively, the contents of this file may be used under the terms of
|
|
either the GNU General Public License Version 2 or later (the "GPL"), or
|
|
the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
|
|
in which case the provisions of the GPL or the LGPL are applicable instead
|
|
of those above. If you wish to allow use of your version of this file only
|
|
under the terms of either the GPL or the LGPL, and not to allow others to
|
|
use your version of this file under the terms of the MPL, indicate your
|
|
decision by deleting the provisions above and replace them with the notice
|
|
and other provisions required by the LGPL or the GPL. If you do not delete
|
|
the provisions above, a recipient may use your version of this file under
|
|
the terms of any one of the MPL, the GPL or the LGPL.
|
|
|
|
Original author: L. David Baron <dbaron@dbaron.org>
|
|
*/
|
|
|
|
// Global variables
|
|
window.gPhases = null;
|
|
window.XLINK_NS = "http://www.w3.org/1999/xlink";
|
|
window.SVG_NS = "http://www.w3.org/2000/svg";
|
|
window.gMagPixPaths = []; // 2D array of array-of-two <path> objects used in the pixel magnifier
|
|
window.gMagWidth = 5; // number of zoomed in pixels to show horizontally
|
|
window.gMagHeight = 5; // number of zoomed in pixels to show vertically
|
|
window.gMagZoom = 16; // size of the zoomed in pixels
|
|
window.gImage1Data; // ImageData object for the test output image
|
|
window.gImage2Data; // ImageData object for the reference image
|
|
window.gFlashingPixels = []; // array of <path> objects that should be flashed due to pixel color mismatch
|
|
window.gPath = ''; // path taken from #web= and prepended to ref/snp urls
|
|
window.gSelected = null; // currently selected comparison
|
|
|
|
window.onload = function() {
|
|
load();
|
|
|
|
function ID(id) {
|
|
return document.getElementById(id);
|
|
}
|
|
|
|
function hashParameters() {
|
|
var result = { };
|
|
var params = window.location.hash.substr(1).split(/[&;]/);
|
|
for (var i = 0; i < params.length; i++) {
|
|
var parts = params[i].split("=");
|
|
result[parts[0]] = unescape(unescape(parts[1]));
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function load() {
|
|
gPhases = [ ID("entry"), ID("loading"), ID("viewer") ];
|
|
buildMag();
|
|
var params = hashParameters();
|
|
if (params.log) {
|
|
ID("logEntry").value = params.log;
|
|
logPasted();
|
|
} else if (params.web) {
|
|
loadFromWeb(params.web);
|
|
}
|
|
ID("logEntry").focus();
|
|
}
|
|
|
|
function buildMag() {
|
|
var mag = ID("mag");
|
|
var r = document.createElementNS(SVG_NS, "rect");
|
|
r.setAttribute("x", gMagZoom * -gMagWidth / 2);
|
|
r.setAttribute("y", gMagZoom * -gMagHeight / 2);
|
|
r.setAttribute("width", gMagZoom * gMagWidth);
|
|
r.setAttribute("height", gMagZoom * gMagHeight);
|
|
mag.appendChild(r);
|
|
mag.setAttribute("transform", "translate(" + (gMagZoom * (gMagWidth / 2) + 1) + "," + (gMagZoom * (gMagHeight / 2) + 1) + ")");
|
|
|
|
for (var x = 0; x < gMagWidth; x++) {
|
|
gMagPixPaths[x] = [];
|
|
for (var y = 0; y < gMagHeight; y++) {
|
|
var p1 = document.createElementNS(SVG_NS, "path");
|
|
p1.setAttribute("d", "M" + ((x - gMagWidth / 2) + 1) * gMagZoom + "," + (y - gMagHeight / 2) * gMagZoom + "h" + -gMagZoom + "v" + gMagZoom);
|
|
p1.setAttribute("stroke", "#CCC");
|
|
p1.setAttribute("stroke-width", "1px");
|
|
p1.setAttribute("fill", "#aaa");
|
|
|
|
var p2 = document.createElementNS(SVG_NS, "path");
|
|
p2.setAttribute("d", "M" + ((x - gMagWidth / 2) + 1) * gMagZoom + "," + (y - gMagHeight / 2) * gMagZoom + "v" + gMagZoom + "h" + -gMagZoom);
|
|
p2.setAttribute("stroke", "#CCC");
|
|
p2.setAttribute("stroke-width", "1px");
|
|
p2.setAttribute("fill", "#888");
|
|
|
|
mag.appendChild(p1);
|
|
mag.appendChild(p2);
|
|
gMagPixPaths[x][y] = [p1, p2];
|
|
}
|
|
}
|
|
|
|
var flashedOn = false;
|
|
setInterval(function() {
|
|
flashedOn = !flashedOn;
|
|
flashPixels(flashedOn);
|
|
}, 500);
|
|
}
|
|
|
|
function showPhase(phaseId) {
|
|
for (var i in gPhases) {
|
|
var phase = gPhases[i];
|
|
phase.style.display = (phase.id == phaseId) ? "block" : "none";
|
|
}
|
|
if (phaseId == "viewer") {
|
|
ID("images").style.display = "none";
|
|
}
|
|
}
|
|
|
|
function loadFromWeb(url) {
|
|
var lastSlash = url.lastIndexOf('/');
|
|
if (lastSlash) {
|
|
gPath = url.substring(0, lastSlash + 1);
|
|
}
|
|
|
|
var r = new XMLHttpRequest();
|
|
r.open("GET", url);
|
|
r.onreadystatechange = function() {
|
|
if (r.readyState == 4) {
|
|
processLog(r.response);
|
|
}
|
|
}
|
|
r.send(null);
|
|
}
|
|
|
|
function fileEntryChanged() {
|
|
showPhase("loading");
|
|
var input = ID("fileEntry");
|
|
var files = input.files;
|
|
if (files.length > 0) {
|
|
// Only handle the first file; don't handle multiple selection.
|
|
// The parts of the log we care about are ASCII-only. Since we
|
|
// can ignore lines we don't care about, best to read in as
|
|
// ISO-8859-1, which guarantees we don't get decoding errors.
|
|
var fileReader = new FileReader();
|
|
fileReader.onload = function(e) {
|
|
var log = e.target.result;
|
|
if (log) {
|
|
processLog(log);
|
|
} else {
|
|
showPhase("entry");
|
|
}
|
|
}
|
|
fileReader.readAsText(files[0], "iso-8859-1");
|
|
}
|
|
// So the user can process the same filename again (after
|
|
// overwriting the log), clear the value on the form input so we
|
|
// will always get an onchange event.
|
|
input.value = "";
|
|
}
|
|
|
|
function logPasted() {
|
|
showPhase("loading");
|
|
var entry = ID("logEntry");
|
|
var log = entry.value;
|
|
entry.value = "";
|
|
processLog(log);
|
|
}
|
|
|
|
var gTestItems;
|
|
|
|
function processLog(contents) {
|
|
var lines = contents.split(/[\r\n]+/);
|
|
gTestItems = [];
|
|
for (var j in lines) {
|
|
var line = lines[j];
|
|
var match = line.match(/^(?:NEXT ERROR )?REFTEST (.*)$/);
|
|
if (!match) {
|
|
continue;
|
|
}
|
|
line = match[1];
|
|
match = line.match(/^(TEST-PASS|TEST-UNEXPECTED-PASS|TEST-KNOWN-FAIL|TEST-UNEXPECTED-FAIL)(\(EXPECTED RANDOM\)|) \| ([^\|]+) \|(.*)/);
|
|
if (match) {
|
|
var state = match[1];
|
|
var random = match[2];
|
|
var url = match[3];
|
|
var extra = match[4];
|
|
|
|
gTestItems.push({
|
|
pass: !state.match(/FAIL$/),
|
|
// only one of the following three should ever be true
|
|
unexpected: !!state.match(/^TEST-UNEXPECTED/),
|
|
random: (random == "(EXPECTED RANDOM)"),
|
|
skip: (extra == " (SKIP)"),
|
|
url: url,
|
|
images: []
|
|
});
|
|
continue;
|
|
}
|
|
match = line.match(/^ IMAGE[^:]*: (.*)$/);
|
|
if (match) {
|
|
var item = gTestItems[gTestItems.length - 1];
|
|
item.images.push(match[1]);
|
|
}
|
|
}
|
|
buildViewer();
|
|
}
|
|
|
|
function buildViewer() {
|
|
if (gTestItems.length == 0) {
|
|
showPhase("entry");
|
|
return;
|
|
}
|
|
|
|
var cell = ID("itemlist");
|
|
var table = document.getElementById("itemtable");
|
|
while (table.childNodes.length > 0) {
|
|
table.removeChild(table.childNodes[table.childNodes.length - 1]);
|
|
}
|
|
var tbody = document.createElement("tbody");
|
|
table.appendChild(tbody);
|
|
|
|
for (var i in gTestItems) {
|
|
var item = gTestItems[i];
|
|
if (item.pass && !item.unexpected) {
|
|
continue;
|
|
}
|
|
|
|
var tr = document.createElement("tr");
|
|
var rowclass = item.pass ? "pass" : "fail";
|
|
var td = document.createElement("td");
|
|
var text = "";
|
|
|
|
if (item.unexpected) {
|
|
text += "!";
|
|
rowclass += " unexpected";
|
|
}
|
|
if (item.random) {
|
|
text += "R";
|
|
rowclass += " random";
|
|
}
|
|
if (item.skip) {
|
|
text += "S";
|
|
rowclass += " skip";
|
|
}
|
|
td.appendChild(document.createTextNode(text));
|
|
tr.appendChild(td);
|
|
|
|
td = document.createElement("td");
|
|
td.id = "url" + i;
|
|
td.className = "url";
|
|
|
|
var match = item.url.match(/\/mozilla\/(.*)/);
|
|
text = document.createTextNode(match ? match[1] : item.url);
|
|
if (item.images.length > 0) {
|
|
var a = document.createElement("a");
|
|
a.id = i;
|
|
a.className = "image";
|
|
a.href = "#";
|
|
a.appendChild(text);
|
|
td.appendChild(a);
|
|
} else {
|
|
td.appendChild(text);
|
|
}
|
|
tr.appendChild(td);
|
|
tr.className = rowclass;
|
|
tbody.appendChild(tr);
|
|
}
|
|
|
|
// Bind an event handler to each image link
|
|
var images = document.getElementsByClassName("image");
|
|
for (var i = 0; i < images.length; i++) {
|
|
images[i].addEventListener("click", function(e) {
|
|
showImages(e.target.id);
|
|
}, false);
|
|
}
|
|
showPhase("viewer");
|
|
}
|
|
|
|
function getImageData(src, whenReady) {
|
|
var img = new Image();
|
|
img.onload = function() {
|
|
var canvas = document.createElement("canvas");
|
|
canvas.width = 800;
|
|
canvas.height = 1000;
|
|
|
|
var ctx = canvas.getContext("2d");
|
|
ctx.drawImage(img, 0, 0);
|
|
|
|
whenReady(ctx.getImageData(0, 0, 800, 1000));
|
|
};
|
|
img.src = gPath + src;
|
|
}
|
|
|
|
function showImages(i) {
|
|
if (gSelected !== null) {
|
|
ID('url' + gSelected).classList.remove('selected');
|
|
}
|
|
gSelected = i;
|
|
ID('url' + gSelected).classList.add('selected');
|
|
var item = gTestItems[i];
|
|
var cell = ID("images");
|
|
|
|
ID("image1").style.display = "";
|
|
ID("image2").style.display = "none";
|
|
ID("diffrect").style.display = "none";
|
|
ID("imgcontrols").reset();
|
|
|
|
ID("image1").setAttributeNS(XLINK_NS, "xlink:href", gPath + item.images[0]);
|
|
// Making the href be #image1 doesn't seem to work
|
|
ID("feimage1").setAttributeNS(XLINK_NS, "xlink:href", gPath + item.images[0]);
|
|
if (item.images.length == 1) {
|
|
ID("imgcontrols").style.display = "none";
|
|
} else {
|
|
ID("imgcontrols").style.display = "";
|
|
ID("image2").setAttributeNS(XLINK_NS, "xlink:href", gPath + item.images[1]);
|
|
// Making the href be #image2 doesn't seem to work
|
|
ID("feimage2").setAttributeNS(XLINK_NS, "xlink:href", gPath + item.images[1]);
|
|
}
|
|
cell.style.display = "";
|
|
getImageData(item.images[0], function(data) {
|
|
gImage1Data = data
|
|
});
|
|
getImageData(item.images[1], function(data) {
|
|
gImage2Data = data
|
|
});
|
|
}
|
|
|
|
function showImage(i) {
|
|
if (i == 1) {
|
|
ID("image1").style.display = "";
|
|
ID("image2").style.display = "none";
|
|
} else {
|
|
ID("image1").style.display = "none";
|
|
ID("image2").style.display = "";
|
|
}
|
|
}
|
|
|
|
function showDifferences(cb) {
|
|
ID("diffrect").style.display = cb.checked ? "" : "none";
|
|
}
|
|
|
|
function flashPixels(on) {
|
|
var stroke = on ? "#FF0000" : "#CCC";
|
|
var strokeWidth = on ? "2px" : "1px";
|
|
for (var i = 0; i < gFlashingPixels.length; i++) {
|
|
gFlashingPixels[i].setAttribute("stroke", stroke);
|
|
gFlashingPixels[i].setAttribute("stroke-width", strokeWidth);
|
|
}
|
|
}
|
|
|
|
function cursorPoint(evt) {
|
|
var m = evt.target.getScreenCTM().inverse();
|
|
var p = ID("svg").createSVGPoint();
|
|
p.x = evt.clientX;
|
|
p.y = evt.clientY;
|
|
p = p.matrixTransform(m);
|
|
return { x: Math.floor(p.x), y: Math.floor(p.y) };
|
|
}
|
|
|
|
function hex2(i) {
|
|
return (i < 16 ? "0" : "") + i.toString(16);
|
|
}
|
|
|
|
function canvasPixelAsHex(data, x, y) {
|
|
var offset = (y * data.width + x) * 4;
|
|
var r = data.data[offset];
|
|
var g = data.data[offset + 1];
|
|
var b = data.data[offset + 2];
|
|
return "#" + hex2(r) + hex2(g) + hex2(b);
|
|
}
|
|
|
|
function hexAsRgb(hex) {
|
|
return "rgb(" + [parseInt(hex.substring(1, 3), 16), parseInt(hex.substring(3, 5), 16), parseInt(hex.substring(5, 7), 16)] + ")";
|
|
}
|
|
|
|
function magnify(evt) {
|
|
var cursor = cursorPoint(evt);
|
|
var x = cursor.x;
|
|
var y = cursor.y;
|
|
var centerPixelColor1, centerPixelColor2;
|
|
|
|
var dx_lo = -Math.floor(gMagWidth / 2);
|
|
var dx_hi = Math.floor(gMagWidth / 2);
|
|
var dy_lo = -Math.floor(gMagHeight / 2);
|
|
var dy_hi = Math.floor(gMagHeight / 2);
|
|
|
|
flashPixels(false);
|
|
gFlashingPixels = [];
|
|
for (var j = dy_lo; j <= dy_hi; j++) {
|
|
for (var i = dx_lo; i <= dx_hi; i++) {
|
|
var px = x + i;
|
|
var py = y + j;
|
|
var p1 = gMagPixPaths[i + dx_hi][j + dy_hi][0];
|
|
var p2 = gMagPixPaths[i + dx_hi][j + dy_hi][1];
|
|
if (px < 0 || py < 0 || px >= 800 || py >= 1000) {
|
|
p1.setAttribute("fill", "#aaa");
|
|
p2.setAttribute("fill", "#888");
|
|
} else {
|
|
var color1 = canvasPixelAsHex(gImage1Data, x + i, y + j);
|
|
var color2 = canvasPixelAsHex(gImage2Data, x + i, y + j);
|
|
p1.setAttribute("fill", color1);
|
|
p2.setAttribute("fill", color2);
|
|
if (color1 != color2) {
|
|
gFlashingPixels.push(p1, p2);
|
|
p1.parentNode.appendChild(p1);
|
|
p2.parentNode.appendChild(p2);
|
|
}
|
|
if (i == 0 && j == 0) {
|
|
centerPixelColor1 = color1;
|
|
centerPixelColor2 = color2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
flashPixels(true);
|
|
showPixelInfo(x, y, centerPixelColor1, hexAsRgb(centerPixelColor1), centerPixelColor2, hexAsRgb(centerPixelColor2));
|
|
}
|
|
|
|
function showPixelInfo(x, y, pix1rgb, pix1hex, pix2rgb, pix2hex) {
|
|
var pixelinfo = ID("pixelinfo");
|
|
ID("coords").textContent = [x, y];
|
|
ID("pix1hex").textContent = pix1hex;
|
|
ID("pix1rgb").textContent = pix1rgb;
|
|
ID("pix2hex").textContent = pix2hex;
|
|
ID("pix2rgb").textContent = pix2rgb;
|
|
}
|
|
|
|
var logPastedButton = document.getElementById("logPasted");
|
|
logPastedButton.addEventListener("click", logPasted, false);
|
|
|
|
var fileEntryButton = document.getElementById("fileEntry");
|
|
fileEntryButton.addEventListener("change", fileEntryChanged, false);
|
|
|
|
var testImage = document.getElementById("testImage");
|
|
testImage.addEventListener("click", function() {
|
|
showImage(1);
|
|
}, false);
|
|
|
|
var referenceImage = document.getElementById("referenceImage");
|
|
referenceImage.addEventListener("click", function() {
|
|
showImage(2);
|
|
}, false);
|
|
|
|
var differences = document.getElementById("differences");
|
|
differences.addEventListener("click", function(e) {
|
|
showDifferences(e.target);
|
|
}, false);
|
|
|
|
var magnifyElement = document.getElementById("magnify");
|
|
magnifyElement.addEventListener("mousemove", function(e) {
|
|
magnify(e);
|
|
}, false);
|
|
|
|
window.addEventListener('keydown', function keydown(event) {
|
|
if (event.which === 84) {
|
|
// 't' switch test/ref images
|
|
var val = 0;
|
|
if (document.querySelector('input[name="which"][value="0"]:checked')) {
|
|
val = 1;
|
|
}
|
|
document.querySelector('input[name="which"][value="' + val + '"]').click();
|
|
} else if (event.which === 68) {
|
|
// 'd' toggle differences
|
|
document.getElementById("differences").click();
|
|
} else if (event.which === 78 || event.which === 80) {
|
|
// 'n' next image, 'p' previous image
|
|
var select = gSelected;
|
|
if (gSelected === null) {
|
|
select = 0;
|
|
} else if (event.which === 78) {
|
|
select++;
|
|
} else {
|
|
select--;
|
|
}
|
|
var length = gTestItems.length;
|
|
select = select < 0 ? length - 1 : select >= length ? 0 : select;
|
|
showImages(select);
|
|
}
|
|
});
|
|
}
|