From d687bc97563fa1567b2c50e0af798db9e7a3b9a7 Mon Sep 17 00:00:00 2001 From: kkapsner Date: Fri, 31 May 2019 01:10:13 +0200 Subject: [PATCH] Confirm messages were broken in Firefox 67 For #271 --- _locales/de/messages.json | 8 +++ _locales/en/messages.json | 8 +++ lib/modal.css | 38 +++++++++++ lib/modal.js | 131 ++++++++++++++++++++++++++++++++++++++ options/options.html | 2 + options/options.js | 48 +++++++++++--- releaseNotes.txt | 1 + 7 files changed, 226 insertions(+), 10 deletions(-) create mode 100644 lib/modal.css create mode 100644 lib/modal.js diff --git a/_locales/de/messages.json b/_locales/de/messages.json index 0e8f02b..ffb9ef4 100644 --- a/_locales/de/messages.json +++ b/_locales/de/messages.json @@ -39,6 +39,14 @@ "message": "Suchen", "description": "" }, + "ok": { + "message": "OK", + "description": "" + }, + "cancel": { + "message": "Abbrechen", + "description": "" + }, "input": { "message": "Eingabe", "description": "" diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 08d261f..6b41820 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -41,6 +41,14 @@ "message": "Search", "description": "" }, + "ok": { + "message": "OK", + "description": "" + }, + "cancel": { + "message": "Cancel", + "description": "" + }, "input": { "message": "input", diff --git a/lib/modal.css b/lib/modal.css new file mode 100644 index 0000000..5785fb2 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/lib/modal.js b/lib/modal.js new file mode 100644 index 0000000..31584d7 --- /dev/null +++ b/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); + }); + }; +}()); \ No newline at end of file diff --git a/options/options.html b/options/options.html index 1b07ef0..3392e67 100644 --- a/options/options.html +++ b/options/options.html @@ -2,6 +2,7 @@ CanvasBlocker Settings + @@ -16,6 +17,7 @@ + diff --git a/options/options.js b/options/options.js index d5afb93..eac1fef 100644 --- a/options/options.js +++ b/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"))){ - browser.storage.local.clear(); - } + 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")) + ) ){ - settings.set("protectWindow", false, reCaptchaEntry); + 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; }); diff --git a/releaseNotes.txt b/releaseNotes.txt index 28910be..d30e415 100644 --- a/releaseNotes.txt +++ b/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