Middle-click in popup on a style name to open the editor

popup.js

@@ -91,44 +91,67 @@ function showStyles(styles) {
 }
 
 function createStyleElement(style) {
-	var e = template.style.cloneNode(true);
+	// reuse event function references
-	var checkbox = e.querySelector(".checker");
+	createStyleElement.events = createStyleElement.events || {
-	checkbox.id = "style-" + style.id;
+		checkboxClick() {
-	checkbox.checked = style.enabled;
+			enableStyle(getClickedStyleId(), this.checked);
+		},
+		styleNameClick() {
+			this.checkbox.click();
+			window.event.preventDefault();
+		},
+		toggleClick() {
+			enableStyle(getClickedStyleId(), this.matches('.enable'));
+		},
+		deleteClick() {
+			doDelete();
+    }
+	};
+	const entry = template.style.cloneNode(true);
+	entry.setAttribute('style-id', style.id);
+	Object.assign(entry, {
+		styleId: style.id,
+		className: ['entry', style.enabled ? 'enabled' : 'disabled'].join(' '),
+		onmousedown: openEditorOnMiddleclick,
+		onauxclick: openEditorOnMiddleclick,
+	});
 
-	e.setAttribute("class", "entry " + (style.enabled ? "enabled" : "disabled"));
+	const checkbox = entry.querySelector('.checker');
-	e.setAttribute("style-id", style.id);
+	Object.assign(checkbox, {
-	var styleName = e.querySelector(".style-name");
+		id: 'style-' + style.id,
-	styleName.appendChild(document.createTextNode(style.name));
+		checked: style.enabled,
-	styleName.setAttribute("for", "style-" + style.id);
+		onclick: createStyleElement.events.checkboxClick,
+	});
+
+	const editLink = entry.querySelector('.style-edit-link');
+	Object.assign(editLink, {
+		href: editLink.getAttribute('href') + style.id,
+		onclick: openLinkInTabOrWindow,
+	});
+
+	const styleName = entry.querySelector('.style-name');
+	Object.assign(styleName, {
+		htmlFor: 'style-' + style.id,
+		onclick: createStyleElement.events.styleNameClick,
+	});
 	styleName.checkbox = checkbox;
-	var editLink = e.querySelector(".style-edit-link");
+	styleName.appendChild(document.createTextNode(style.name));
-	editLink.setAttribute("href", editLink.getAttribute("href") + style.id);
-	editLink.addEventListener("click", openLinkInTabOrWindow, false);
 
-	styleName.addEventListener("click", function() { this.checkbox.click(); event.preventDefault(); });
+	entry.querySelector('.enable').onclick = createStyleElement.events.toggleClick;
-	// clicking the checkbox will toggle it, and this will run after that happens
+	entry.querySelector('.disable').onclick = createStyleElement.events.toggleClick;
-	checkbox.addEventListener("click", function() { enable(event, event.target.checked); }, false);
+	entry.querySelector('.delete').onclick = createStyleElement.events.deleteClick;
-	e.querySelector(".enable").addEventListener("click", function() { enable(event, true); }, false);
-	e.querySelector(".disable").addEventListener("click", function() { enable(event, false); }, false);
 
-	e.querySelector(".delete").addEventListener("click", function() { doDelete(event, false); }, false);
+	return entry;
-	return e;
-}
-
-function enable(event, enabled) {
-	var id = getId(event);
-	enableStyle(id, enabled);
 }
 
 function doDelete() {
 	document.getElementById('confirm').dataset.display = true;
-	let id = getId(event);
+	const id = getClickedStyleId();
 	document.querySelector('#confirm b').textContent =
 		document.querySelector(`[style-id="${id}"] label`).textContent;
 	document.getElementById('confirm').dataset.id = id;
-
 }
+
 document.getElementById('confirm').addEventListener('click', e => {
 	let cmd = e.target.dataset.cmd;
 	if (cmd === 'ok') {
@@ -145,22 +168,9 @@ document.getElementById('confirm').addEventListener('click', e => {
 	}
 });
 
-function getBrowser() {
+function getClickedStyleId() {
-	if (navigator.userAgent.indexOf("OPR") > -1) {
+	const entry = window.event.target.closest('.entry');
-		return "Opera";
+	return entry ? entry.styleId : null;
-	}
-	return "Chrome";
-}
-
-function getId(event) {
-	var e = event.target;
-	while (e) {
-		if (e.hasAttribute("style-id")) {
-			return e.getAttribute("style-id");
-		}
-		e = e.parentNode;
-	}
-	return null;
 }
 
 function openLinkInTabOrWindow(event) {
@@ -176,6 +186,24 @@ function openLinkInTabOrWindow(event) {
 	close();
 }
 
+function openEditorOnMiddleclick(event) {
+	if (event.button != 1) {
+		return;
+	}
+	// open an editor on middleclick
+	if (event.target.matches('.entry, .style-name, .style-edit-link')) {
+		this.querySelector('.style-edit-link').click();
+		event.preventDefault();
+		return;
+	}
+	// prevent the popup being opened in a background tab
+	// when an irrelevant link was accidentally clicked
+	if (event.target.closest('a')) {
+		event.preventDefault();
+		return;
+	}
+}
+
 function openLink(event) {
 	event.preventDefault();
 	chrome.runtime.sendMessage({method: "openURL", url: event.target.href});