Raw Source Toggle Dropdown

• Minified Source

  Alternate update check target.

  Alternate download source target.

jerone / GitHub Commit Compare

// ==UserScript==
// @name             GitHub Commit Compare
// @namespace        https://github.com/jerone/UserScripts
// @description      Add controls to compare commits.
// @author           jerone
// @contributor      darkred
// @copyright        2017+, jerone (https://github.com/jerone)
// @license          CC-BY-NC-SA-4.0; https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode
// @license          GPL-3.0-or-later; http://www.gnu.org/licenses/gpl-3.0.txt
// @homepage         https://github.com/jerone/UserScripts/tree/master/GitHub_Commit_Compare
// @homepageURL      https://github.com/jerone/UserScripts/tree/master/GitHub_Commit_Compare
// @downloadURL      https://github.com/jerone/UserScripts/raw/master/GitHub_Commit_Compare/GitHub_Commit_Compare.user.js
// @updateURL        https://github.com/jerone/UserScripts/raw/master/GitHub_Commit_Compare/GitHub_Commit_Compare.user.js
// @supportURL       https://github.com/jerone/UserScripts/issues
// @contributionURL  https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=VCYMHWQ7ZMBKW
// @icon             https://github.githubassets.com/pinned-octocat.svg
// @include          https://github.com/*/*/commits
// @include          https://github.com/*/*/commits/*
// @exclude          https://github.com/*/*.diff
// @exclude          https://github.com/*/*.patch
// @version          0.0.3
// @grant            none
// ==/UserScript==

// cSpell:ignore tooltipped, Consolas, Menlo, compareAdisabled, compareBdisabled

(function () {
	function addButton() {
		var nav;
		if ((nav = document.querySelector(".file-navigation"))) {
			// Check if our group of buttons are already attached.
			// Remove it, as the 'old' buttons don't have events anymore.
			const e = document.getElementById("GitHubCommitCompareGroup");
			if (e) {
				e.parentElement.removeChild(e);
			}
			Array.from(
				document.querySelectorAll(".GitHubCommitCompareButtonAB"),
			).forEach(function (b) {
				b.parentElement.removeChild(b);
			});

			const c = document.createElement("input");
			c.type = "checkbox";
			c.addEventListener("change", function () {
				const bb = document.querySelectorAll(
					".GitHubCommitCompareButtonAB",
				);
				if (this.checked) {
					if (bb.length === 0) {
						addCompareButtons();
					} else {
						Array.from(bb).forEach(function (b) {
							b.classList.remove("d-none");
						});
					}
				} else {
					Array.from(bb).forEach(function (b) {
						b.classList.add("d-none");
					});
				}
				const bbb = document.getElementById(
					"GitHubCommitCompareButton",
				);
				if (bbb) bbb.classList.remove("disabled");
			});

			const l = document.createElement("label");
			l.classList.add("tooltipped", "tooltipped-n");
			l.setAttribute("aria-label", "Show commit compare buttons");
			l.style.cssText = `
				float: left;
				padding: 3px 10px;
				font-size: 12px;
				font-weight: 600;
				line-height: 20px;
				color: #24292e;
				vertical-align: middle;
				background-color: #fff;
				border: 1px solid rgba(27,31,35,0.2);
				border-right: 0;
				border-top-left-radius: 3px;
				border-bottom-left-radius: 3px;
			`;
			l.appendChild(c);

			const p = document.createElementNS(
				"http://www.w3.org/2000/svg",
				"path",
			);
			p.setAttributeNS(
				null,
				"d",
				"M5 12H4c-.27-.02-.48-.11-.69-.31-.21-.2-.3-.42-.31-.69V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V11c.03.78.34 1.47.94 2.06.6.59 1.28.91 2.06.94h1v2l3-3-3-3v2zM2 1.8c.66 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2C1.35 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2zm11 9.48V5c-.03-.78-.34-1.47-.94-2.06-.6-.59-1.28-.91-2.06-.94H9V0L6 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 12 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z",
			);

			const s = document.createElementNS(
				"http://www.w3.org/2000/svg",
				"svg",
			);
			s.classList.add("octicon", "octicon-diff");
			s.setAttributeNS(null, "height", 16);
			s.setAttributeNS(null, "width", 14);
			s.setAttributeNS(null, "viewBox", "0 0 14 16");
			s.appendChild(p);

			const a = document.createElement("a");
			a.id = "GitHubCommitCompareButton";
			a.classList.add(
				"btn",
				"btn-sm",
				"tooltipped",
				"tooltipped-n",
				"disabled",
			);
			a.setAttribute("href", "#");
			a.setAttribute("rel", "nofollow");
			a.setAttribute("aria-label", "Compare these commits");
			a.style.cssText = `
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
				font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
			`;
			a.appendChild(s);
			a.appendChild(document.createElement("span"));

			const g = document.createElement("div");
			g.id = "GitHubCommitCompareGroup";
			g.classList.add("float-right");
			g.appendChild(l);
			g.appendChild(a);

			nav.appendChild(g);
		}
	}

	function updateRadioButtons() {
		var compareAdisabled = true;
		var compareBdisabled = false;

		const compares = document.querySelectorAll(
			".GitHubCommitCompareButtonAB",
		);
		Array.from(compares).forEach(function (compare) {
			const compareA = compare.querySelector(
				'[name="GitHubCommitCompareButtonA"]',
			);
			const compareB = compare.querySelector(
				'[name="GitHubCommitCompareButtonB"]',
			);

			compareA.disabled = compareAdisabled;
			compareA.parentNode.classList.toggle("disabled", compareAdisabled);

			if (compareA.checked) {
				compareBdisabled = true;
			}
			if (compareB.checked) {
				compareAdisabled = false;
			}

			compareB.disabled = compareBdisabled;
			compareB.parentNode.classList.toggle("disabled", compareBdisabled);
		});

		updateCompareButton();
	}

	function updateCompareButton() {
		const repo = document.querySelector('meta[property="og:url"]').content;

		const compareA = document.querySelector(
			'.GitHubCommitCompareButtonAB [name="GitHubCommitCompareButtonA"]:checked',
		);
		const hashA =
			compareA.parentNode.parentNode.parentNode.querySelector(
				"clipboard-copy",
			).value;
		const compareB = document.querySelector(
			'.GitHubCommitCompareButtonAB [name="GitHubCommitCompareButtonB"]:checked',
		);
		const hashB =
			compareB.parentNode.parentNode.parentNode.querySelector(
				"clipboard-copy",
			).value;

		const a = document.getElementById("GitHubCommitCompareButton");
		a.setAttribute("href", `${repo}/compare/${hashA}...${hashB}`);
		a.querySelector("span").textContent =
			` ${hashA.substring(0, 7)}...${hashB.substring(0, 7)}`;

		//localStorage.setItem('GitHubCommitCompareButtonHashA', hashA);
		//localStorage.setItem('GitHubCommitCompareButtonHashB', hashB);
	}

	function addCompareButtons() {
		const commits = document.querySelectorAll(
			".commits-list-item .commit-links-cell",
		);
		Array.from(commits).forEach(function (item, index) {
			const c1 = document.createElement("input");
			c1.name = "GitHubCommitCompareButtonA";
			c1.type = "radio";
			c1.addEventListener("change", updateRadioButtons);
			if (index === 1) c1.checked = true;

			const l1 = document.createElement("label");
			l1.classList.add(
				"btn",
				"btn-outline",
				"BtnGroup-item",
				"tooltipped",
				"tooltipped-s",
			);
			l1.setAttribute("aria-label", "Choose a base commit");
			l1.appendChild(c1);

			const c2 = document.createElement("input");
			c2.name = "GitHubCommitCompareButtonB";
			c2.type = "radio";
			c2.addEventListener("change", updateRadioButtons);
			if (index === 0) c2.checked = true;

			const l2 = document.createElement("label");
			l2.classList.add(
				"btn",
				"btn-outline",
				"BtnGroup-item",
				"tooltipped",
				"tooltipped-s",
			);
			l2.setAttribute("aria-label", "Choose a head commit");
			l2.appendChild(c2);

			// const p3 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
			// p3.setAttributeNS(null,
			//'d',
			//'M5 12H4c-.27-.02-.48-.11-.69-.31-.21-.2-.3-.42-.31-.69V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V11c.03.78.34 1.47.94 2.06.6.59 1.28.91 2.06.94h1v2l3-3-3-3v2zM2 1.8c.66 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2C1.35 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2zm11 9.48V5c-.03-.78-.34-1.47-.94-2.06-.6-.59-1.28-.91-2.06-.94H9V0L6 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 12 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z');

			// const s3 = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
			// s3.classList.add('octicon', 'octicon-diff');
			// s3.setAttributeNS(null, 'height', 16);
			// s3.setAttributeNS(null, 'width', 14);
			// s3.setAttributeNS(null, 'viewBox', '0 0 14 16');
			// s3.appendChild(p3);

			// const l3 = document.createElement('a');
			// l3.classList.add('btn', 'btn-outline', 'BtnGroup-item', 'tooltipped', 'tooltipped-sw');
			// l3.setAttribute('aria-label', 'TODO');
			// l3.appendChild(s3);

			const gg = document.createElement("div");
			gg.classList.add(
				"GitHubCommitCompareButtonAB",
				"commit-links-group",
				"BtnGroup",
			);
			gg.appendChild(l1);
			gg.appendChild(l2);
			//gg.appendChild(l3);

			//item.style.width = '350px';
			if (item.querySelector(".muted-link")) {
				// Insert after number of comments button.
				item.insertBefore(
					gg,
					item.querySelector(".muted-link").nextSibling,
				);
			} else {
				item.insertBefore(gg, item.firstChild);
			}
		});

		updateRadioButtons(); // Update radio buttons.
	}

	// Init.
	addButton();

	// Pjax.
	document.addEventListener("pjax:end", addButton);
})();