diff.ts

interface IRawThemeSetting {
	readonly name?: string;
	readonly scope?: string | string[];
	readonly settings: {
		readonly fontStyle?: string;
		readonly foreground?: string;
		readonly background?: string;
	};
}

interface IThemedTokenScopeExplanation {
	scopeName: string;
	themeMatches: IRawThemeSetting[];
}

interface IThemedTokenExplanation {
	content: string;
	scopes: IThemedTokenScopeExplanation[];
}

interface IThemedToken {
	content: string;
	color: string;
	explanation: IThemedTokenExplanation[];
}

interface IExpectedTokenization {
	content: string;
	color: string;
	_r: string;
	_t: string;
}

interface ITokenizationDiff {
	oldIndex: number;
	oldToken: IExpectedTokenization;
	newToken: IThemedToken;
}

interface IDiffPageData {
	testContent: string;
	themeName: string;
	backgroundColor: string;
	actual: IThemedToken[];
	expected: IExpectedTokenization[];
	diff: ITokenizationDiff[];
	patchedExpected: IExpectedTokenization[];
	patchedDiff: ITokenizationDiff[];
}

let _allData: IDiffPageData[] = JSON.parse(atob((<any>self).allData));
let output = document.createElement('div');
document.body.appendChild(output);

interface ITestCaseData {
	testContent: string;
	themeName: string;
	backgroundColor: string;
	actual: IThemedToken[];
	expected: IExpectedTokenization[];
	diff: ITokenizationDiff[];
}

var escape = document.createElement('textarea');
function escapeHTML(str:string): string {
	str = str.replace(/\t/g, '    ');
	escape.textContent = str;
	return escape.innerHTML;
}

function renderTestCase(data: ITestCaseData): HTMLElement {
	let content = data.testContent;

	let output = [];

	let actual = data.actual;
	let expected = data.expected;
	let diff = data.diff;
	let actualIndex = 0, expectedIndex = 0, diffIndex = 0;
	let lines = content.split(/\r\n|\r|\n/g);
	for (let i = 0, len = lines.length; i < len; i++) {
		let line = lines[i];

		let actualLineOutput: string[] = [];
		let actualLine = line;
		while (actualLine.length > 0) {
			let actualToken = actual[actualIndex++];
			actualLine = actualLine.substr(actualToken.content.length);
			actualLineOutput.push(`<span style="color:${actualToken.color.substring(0, 7)}" data-actual-index="${actualIndex - 1}">${escapeHTML(actualToken.content)}</span>`);
		}
		actualLineOutput.push('</div>');

		let expectedLineOutput: string[] = [];
		let expectedLine = line;
		while (expectedLine.length > 0) {
			let expectedToken = expected[expectedIndex++];
			expectedLine = expectedLine.substr(expectedToken.content.length);
			expectedLineOutput.push(`<span style="color:${expectedToken.color}" data-expected-index="${expectedIndex - 1}">${escapeHTML(expectedToken.content)}</span>`);
		}
		expectedLineOutput.push('</div>');

		let diffOutput: string[] = [];
		while (diffIndex < diff.length && diff[diffIndex].oldIndex < expectedIndex) {
			diffOutput.push('<tr><td style="width:500px">');
			diffOutput.push(escapeHTML(JSON.stringify(diff[diffIndex].newToken, null, '  ')));
			diffOutput.push('</td><td style="width:500px">');
			diffOutput.push(escapeHTML(JSON.stringify(diff[diffIndex].oldToken, null, '  ')));
			diffOutput.push('</td></tr>');
			diffIndex++;
		}
		if (diffOutput.length > 0) {
			actualLineOutput = ['<div class="actual-line with-diff">'].concat(actualLineOutput);
			expectedLineOutput = ['<div class="expected-line with-diff">'].concat(expectedLineOutput);
			diffOutput = ['<table class="diff collapsed">'].concat(diffOutput).concat('</table>');
		} else {
			actualLineOutput = ['<div class="actual-line the-same">'].concat(actualLineOutput);
			expectedLineOutput = ['<div class="expected-line the-same">'].concat(expectedLineOutput);
		}

		output = output.concat(actualLineOutput);
		output = output.concat(expectedLineOutput);
		output = output.concat(diffOutput);
	}

	let domNode = document.createElement('div');
	let title = document.createElement('h2');
	if (diff.length > 0) {
		title.className = 'title with-diff';
	} else {
		title.className = 'title the-same';
	}
	title.innerHTML = data.themeName;
	domNode.appendChild(title);

	let linesDomNode = document.createElement('div');
	if (diff.length === 0) {
		linesDomNode.className = 'collapsed';
	}
	linesDomNode.innerHTML = output.join('');
	linesDomNode.style.backgroundColor = data.backgroundColor;
	linesDomNode.style.fontFamily = 'Consolas';

	domNode.appendChild(linesDomNode);

	return domNode;
}

document.body.onclick = function (e) {
	let target = <HTMLElement>e.target;
	if (target.tagName === 'H2') {
		let targetContent = target.nextElementSibling;
		if (targetContent.className === 'collapsed') {
			targetContent.className = '';
		} else {
			targetContent.className = 'collapsed';
		}
		return;
	}
	if (target.tagName !== 'SPAN') {
		return;
	}
	let line = target.parentElement;

	let targetDiff = null;
	if (/^actual-line/.test(line.className)) {
		targetDiff = line.nextElementSibling.nextElementSibling;
	} else if (/^expected-line/.test(line.className)) {
		targetDiff = line.nextElementSibling;
	}
	if (!targetDiff) {
		return;
	}
	if (targetDiff.className === 'diff collapsed') {
		targetDiff.className = 'diff';
	} else {
		targetDiff.className = 'diff collapsed';
	}
};

let acceptDiffContent = (function() {
	let result = {};
	for (let i = 0, len = _allData.length; i < len; i++) {
		let data = _allData[i];

		if (!data.actual) {
			continue;
		}

		result[data.themeName] = data.diff.map(function (diffEntry) {
			return {
				index: diffEntry.oldIndex,
				content: diffEntry.oldToken.content,
				color: diffEntry.oldToken.color,
				newColor: diffEntry.newToken.color.substring(0, 7)
			};
		});
	}
	return JSON.stringify(result, null, '\t');
})();
let diffTA = document.createElement('textarea');
diffTA.value = acceptDiffContent;
document.body.appendChild(diffTA);
document.body.oncopy = function(e) {
	e.clipboardData.setData('text', acceptDiffContent);
};

let acceptBtn = document.createElement('button');
acceptBtn.innerHTML = 'Accept diff';
acceptBtn.style.position = 'fixed';
acceptBtn.style.top = '10px';
acceptBtn.style.right = '10px';
acceptBtn.style.fontSize = '150%';
document.body.appendChild(acceptBtn);
acceptBtn.onclick = function () {
	diffTA.select();
	console.log(acceptDiffContent);
};

let patchedBtn = document.createElement('button');
patchedBtn.innerHTML = 'View patched diff';
patchedBtn.style.position = 'fixed';
patchedBtn.style.top = '10px';
patchedBtn.style.right = '150px';
patchedBtn.style.fontSize = '150%';
document.body.appendChild(patchedBtn);
patchedBtn.onclick = renderPatchedDiff;

let originalBtn = document.createElement('button');
originalBtn.innerHTML = 'View original diff';
originalBtn.style.position = 'fixed';
originalBtn.style.top = '10px';
originalBtn.style.right = '360px';
originalBtn.style.fontSize = '150%';
document.body.appendChild(originalBtn);
originalBtn.onclick = renderOriginalDiff;

function renderOriginalDiff() {
	output.innerHTML = '';
	_allData.forEach(function (data) {
		if (!data.actual) {
			return;
		}
		output.appendChild(renderTestCase({
			testContent: data.testContent,
			themeName: data.themeName,
			backgroundColor: data.backgroundColor,
			actual: data.actual,
			expected: data.expected,
			diff: data.diff,
		}));
	});
}

function renderPatchedDiff() {
	output.innerHTML = '';
	_allData.forEach(function (data) {
		if (!data.actual) {
			return;
		}
		output.appendChild(renderTestCase({
			testContent: data.testContent,
			themeName: data.themeName,
			backgroundColor: data.backgroundColor,
			actual: data.actual,
			expected: data.patchedExpected,
			diff: data.patchedDiff,
		}));
	});
}

renderOriginalDiff();