Confirm messages were broken in Firefox 67

For #271

_locales/de/messages.json

@@ -39,6 +39,14 @@
 		"message": "Suchen",
 		"description": ""
 	},
+	"ok": {
+		"message": "OK",
+		"description": ""
+	},
+	"cancel": {
+		"message": "Abbrechen",
+		"description": ""
+	},
 	"input": {
 		"message": "Eingabe",
 		"description": ""

_locales/en/messages.json

@@ -41,6 +41,14 @@
 		"message": "Search",
 		"description": ""
 	},
+	"ok": {
+		"message": "OK",
+		"description": ""
+	},
+	"cancel": {
+		"message": "Cancel",
+		"description": ""
+	},
 	
 	"input": {
 		"message": "input",

lib/modal.css

@@ -0,0 +1,38 @@
+.modal {
+	position: fixed;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	text-align: center;
+	z-index: 100;
+}
+
+.modal .overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	background-color: rgba(255, 255, 255, 0.35);
+}
+
+.modal .dialogPosition {
+	position: absolute;
+	top: 10%;
+	width: 100%;
+}
+
+.modal .dialog {
+	display: block;
+	margin: 0 auto;
+	padding: 1em;
+	max-width: 300px;
+	min-width: 200px;
+	background-color: var(--background-color);
+	border: 1px solid currentColor;
+}
+
+.modal .buttons {
+	margin-top: 1em;
+}

lib/modal.js

@@ -0,0 +1,131 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+(function(){
+	"use strict";
+	
+	let scope;
+	if ((typeof exports) !== "undefined"){
+		scope = exports;
+	}
+	else {
+		scope = require.register("./modal", {});
+	}
+	
+	const extension = require("./extension");
+	
+	function getGlobalOffsetTop(node){
+		if (node){
+			return node.offsetTop + getGlobalOffsetTop(node.offsetParent);
+		}
+		else {
+			return 0;
+		}
+	}
+	function getGlobalScrollTop(node){
+		if (node && node.scrollTop){
+			return node.scrollTop + getGlobalScrollTop(node.parentNode);
+		}
+		else {
+			return window.scrollY;
+		}
+	}
+	
+	function openDialog(text, buttons, parent = document.body){
+		if (!(parent instanceof Node)){
+			const parentSelector = parent.selector;
+			parent = parent.node;
+			while (parent && !parent.matches(parentSelector)){
+				parent = parent.parentNode;
+			}
+			if (!parent){
+				parent = document.body;
+			}
+		}
+		const container = document.createElement("div");
+		container.className = "modal";
+		parent.appendChild(container);
+		
+		const overlay = document.createElement("div");
+		overlay.className = "overlay";
+		container.appendChild(overlay);
+		
+		const dialogPosition = document.createElement("div");
+		dialogPosition.className = "dialogPosition";
+		container.appendChild(dialogPosition);
+		
+		const dialog = document.createElement("div");
+		dialog.className = "dialog";
+		dialogPosition.appendChild(dialog);
+		
+		const textNode = document.createElement("span");
+		textNode.className = "text";
+		textNode.textContent = text;
+		dialog.appendChild(textNode);
+		
+		const buttonsNode = document.createElement("div");
+		buttonsNode.className = "buttons";
+		dialog.appendChild(buttonsNode);
+		
+		let defaultButton;
+		buttons.forEach(function(button){
+			const buttonNode = document.createElement("button");
+			buttonNode.textContent = button.text;
+			buttonNode.addEventListener("click", function(){
+				close();
+				button.callback();
+			});
+			buttonsNode.appendChild(buttonNode);
+			if (button.focused){
+				buttonNode.focus();
+			}
+			if (button.default){
+				defaultButton = button;
+			}
+		});
+		
+		function closeOnEscape(event){
+			if (event.keyCode === 27){
+				close();
+				if (defaultButton){
+					defaultButton.callback();
+				}
+			}
+		}
+		function positionDialog(){
+			const parentTop = getGlobalOffsetTop(parent) - getGlobalScrollTop(parent);
+			const parentHeight = parent.offsetHeight;
+			const height = dialog.offsetHeight;
+			const top = Math.max(
+				0,
+				Math.min(
+					container.offsetHeight - height,
+					parentTop + parentHeight / 2 - height / 2
+				)
+			);
+			dialogPosition.style.top = top + "px";
+		}
+		function close(){
+			window.removeEventListener("keydown", closeOnEscape);
+			window.removeEventListener("scroll", positionDialog);
+			window.removeEventListener("resize", positionDialog);
+			parent.removeChild(container);
+		}
+		window.addEventListener("keydown", closeOnEscape);
+		
+		if (parent !== document.body){
+			positionDialog();
+			window.addEventListener("scroll", positionDialog);
+			window.addEventListener("resize", positionDialog);
+		}
+	}
+	
+	scope.confirm = function(text, parent){
+		return new Promise(function(resolve){
+			openDialog(text, [
+				{text: extension.getTranslation("cancel"), default: true, callback: ()=>resolve(false)},
+				{text: extension.getTranslation("OK"), focused: true, callback: ()=>resolve(true)}
+			], parent);
+		});
+	};
+}());

options/options.html

@@ -2,6 +2,7 @@
 <html>
 	<head>
 		<title>CanvasBlocker Settings</title>
+		<link href="../lib/modal.css" rel="stylesheet" type="text/css">
 		<link href="options.css" rel="stylesheet" type="text/css">
 		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
 	</head>
@@ -16,6 +17,7 @@
 		<script src="../lib/settings.js"></script>
 		<script src="../lib/search.js"></script>
 		<script src="../lib/theme.js"></script>
+		<script src="../lib/modal.js"></script>
 		<script src="optionsGui.js"></script>
 		<script src="settingsDisplay.js"></script>
 		<script src="options.js"></script>

options/options.js

@@ -16,6 +16,7 @@
 	const searchParameters = new URLSearchParams(window.location.search);
 	const settingsMigration = require("../lib/settingsMigration");
 	require("./theme").init("options");
+	const modal = require("../lib/modal");
 	
 	var callbacks = {
 		openNavigatorSettings: function(){
@@ -119,9 +120,17 @@
 			});
 		},
 		resetSettings: function(){
-			if (window.confirm(extension.getTranslation("resetSettings_confirm"))){
+			modal.confirm(
+				extension.getTranslation("resetSettings_confirm"),
+				{
+					node: this,
+					selector: ".settingRow .content"
+				}
+			).then(function(clear){
+				if (clear){
 					browser.storage.local.clear();
 				}
+			});
 		}
 	};
 	
@@ -325,6 +334,7 @@
 				setting.display = display;
 				
 				let originalSet = setting.set;
+				setting.originalSet = originalSet;
 				if (originalSet){
 					const eventListeners = [];
 					beforeChangeEventListeners[setting.name] = eventListeners;
@@ -458,18 +468,36 @@
 					(
 						matching.length === 0 ||
 						matching[0].protectWindow
-					) &&
-					window.confirm(extension.getTranslation("protectWindow_askReCaptchaException"))
+					)
 				){
+					modal.confirm(
+						extension.getTranslation("protectWindow_askReCaptchaException"),
+						{
+							node: document.querySelector("[data-storage-name=protectWindow]"),
+							selector: ".settingRow .content"
+						}
+					).then(function(addException){
+						if (addException){
 							settings.set("protectWindow", false, reCaptchaEntry);
 						}
+					});
+				}
 			}
 		});
-		beforeChangeEventListeners.sharePersistentRndBetweenDomains.push(function(value){
+		beforeChangeEventListeners.sharePersistentRndBetweenDomains.push(function(value, ...args){
 			if (value){
-				if (!confirm(extension.getTranslation("sharePersistentRndBetweenDomains_confirmMessage"))){
-					return false;
+				modal.confirm(
+					extension.getTranslation("sharePersistentRndBetweenDomains_confirmMessage"),
+					{
+						node: document.querySelector("[data-storage-name=sharePersistentRndBetweenDomains]"),
+						selector: ".settingRow .content"
 					}
+				).then((reallyShare) => {
+					if (reallyShare){
+						this.originalSet(value, ...args);
+					}
+				});
+				return false;
 			}
 			return true;
 		});

releaseNotes.txt

@@ -14,6 +14,7 @@ Version 0.5.10:
 		- google docs were broken in Waterfox
 		- MutationObserver failed in some instances
 		- server-site navigator protection did not respect whitelisting
+		- confirm messages were broken in Firefox 67
 	
 	known issues:
 		- if a data URL is blocked the page action button does not appear