replacing window.confirm

_locales/ar/messages.json

@@ -168,6 +168,12 @@
 		"message": "هل تريد بالتأكيد حذف هذا النمط؟",
 		"description": "Confirmation before deleting a style"
 	},
+	"confirmOK": {
+		"message": "OK"
+	},
+	"confirmCancel": {
+		"message": "Cancel"
+	},
 	"styleBadRegexp": {
 		"message": "Regexp is invalid.",
 		"description": "Validation message for a bad regexp in a style"

_locales/cs/messages.json

@@ -168,6 +168,12 @@
 		"message": "Opravdu chcete tento styl smazat?",
 		"description": "Confirmation before deleting a style"
 	},
+	"confirmOK": {
+		"message": "OK"
+	},
+	"confirmCancel": {
+		"message": "Cancel"
+	},
 	"styleBadRegexp": {
 		"message": "Tento regulérní výraz je neplatný.",
 		"description": "Validation message for a bad regexp in a style"

_locales/de/messages.json

@@ -168,6 +168,12 @@
 		"message": "Möchten Sie diesen Style wirklich löschen?",
 		"description": "Confirmation before deleting a style"
 	},
+	"confirmOK": {
+		"message": "OK"
+	},
+	"confirmCancel": {
+		"message": "Cancel"
+	},
 	"styleBadRegexp": {
 		"message": "Regulärer Ausdruck ist ungültig.",
 		"description": "Validation message for a bad regexp in a style"

_locales/el/messages.json

@@ -168,6 +168,12 @@
 		"message": "Είστε σίγουροι ότι θέλετε να διαγράψετε αυτό το στυλ;",
 		"description": "Confirmation before deleting a style"
 	},
+	"confirmOK": {
+		"message": "OK"
+	},
+	"confirmCancel": {
+		"message": "Cancel"
+	},
 	"styleBadRegexp": {
 		"message": "Το Regexp δεν είναι έγκυρο.",
 		"description": "Validation message for a bad regexp in a style"

_locales/en/messages.json

@@ -136,6 +136,12 @@
     "message": "Are you sure you want to delete this style?",
     "description": "Confirmation before deleting a style"
   },
+  "confirmOK": {
+    "message": "OK"
+  },
+  "confirmCancel": {
+    "message": "Cancel"
+  },
   "description": {
     "message": "Restyle the web with Stylus, a user styles manager. Stylus lets you easily install themes and skins for many popular sites.",
     "description": "Extension description"

_locales/es/messages.json

@@ -212,6 +212,12 @@
 		"message": "¿Está seguro de que quiere eliminar este estilo?",
 		"description": "Confirmation before deleting a style"
 	},
+	"confirmOK": {
+		"message": "OK"
+	},
+	"confirmCancel": {
+		"message": "Cancel"
+	},
 	"styleBadRegexp": {
 		"message": "La expresión regular (regexp) introducida no es válida",
 		"description": "Validation message for a bad regexp in a style"

_locales/fi/messages.json

@@ -168,6 +168,12 @@
 		"message": "Oletko varma että haluat poistaa tämän tyylin?",
 		"description": "Confirmation before deleting a style"
 	},
+	"confirmOK": {
+		"message": "OK"
+	},
+	"confirmCancel": {
+		"message": "Cancel"
+	},
 	"styleBadRegexp": {
 		"message": "Regexp ei kelpaa.",
 		"description": "Validation message for a bad regexp in a style"

_locales/fr/messages.json

@@ -168,6 +168,12 @@
 		"message": "Voulez-vous vraiment supprimer ce style ?",
 		"description": "Confirmation before deleting a style"
 	},
+	"confirmOK": {
+		"message": "OK"
+	},
+	"confirmCancel": {
+		"message": "Cancel"
+	},
 	"styleBadRegexp": {
 		"message": "Le Regexp est éronné",
 		"description": "Validation message for a bad regexp in a style"

_locales/it/messages.json

@@ -168,6 +168,12 @@
 		"message": "Vuoi eliminare questo stile?",
 		"description": "Confirmation before deleting a style"
 	},
+	"confirmOK": {
+		"message": "OK"
+	},
+	"confirmCancel": {
+		"message": "Cancel"
+	},
 	"styleBadRegexp": {
 		"message": "Regexp is invalid.",
 		"description": "Validation message for a bad regexp in a style"

_locales/ja/messages.json

@@ -168,6 +168,12 @@
 		"message": "このスタイルを削除してもよろしいですか？",
 		"description": "Confirmation before deleting a style"
 	},
+	"confirmOK": {
+		"message": "OK"
+	},
+	"confirmCancel": {
+		"message": "Cancel"
+	},
 	"styleBadRegexp": {
 		"message": "正規表現は無効です。",
 		"description": "Validation message for a bad regexp in a style"

_locales/nl/messages.json

@@ -168,6 +168,12 @@
 		"message": "Weet u zeker dat u deze stijl wilt verwijderen?",
 		"description": "Confirmation before deleting a style"
 	},
+	"confirmOK": {
+		"message": "OK"
+	},
+	"confirmCancel": {
+		"message": "Cancel"
+	},
 	"styleBadRegexp": {
 		"message": "Regexp is ongeldig.",
 		"description": "Validation message for a bad regexp in a style"

_locales/pt_BR/messages.json

@@ -168,6 +168,12 @@
 		"message": "Tem certeza de que deseja excluir este estilo?",
 		"description": "Confirmation before deleting a style"
 	},
+	"confirmOK": {
+		"message": "OK"
+	},
+	"confirmCancel": {
+		"message": "Cancel"
+	},
 	"styleBadRegexp": {
 		"message": "Regexp is invalid.",
 		"description": "Validation message for a bad regexp in a style"

_locales/ru/messages.json

@@ -168,6 +168,12 @@
 		"message": "Удалить этот стиль?",
 		"description": "Confirmation before deleting a style"
 	},
+	"confirmOK": {
+		"message": "OK"
+	},
+	"confirmCancel": {
+		"message": "Cancel"
+	},
 	"styleBadRegexp": {
 		"message": "Ошибка в регулярном выражении.",
 		"description": "Validation message for a bad regexp in a style"

_locales/sr/messages.json

@@ -168,6 +168,12 @@
 		"message": "Да ли сте сигурни да желите да избришете овај стил?",
 		"description": "Confirmation before deleting a style"
 	},
+	"confirmOK": {
+		"message": "OK"
+	},
+	"confirmCancel": {
+		"message": "Cancel"
+	},
 	"styleBadRegexp": {
 		"message": "Регуларни израз је неисправан.",
 		"description": "Validation message for a bad regexp in a style"

_locales/sv/messages.json

@@ -168,6 +168,12 @@
 		"message": "Är du säker på att du vill ta bort denna stil?",
 		"description": "Confirmation before deleting a style"
 	},
+	"confirmOK": {
+		"message": "OK"
+	},
+	"confirmCancel": {
+		"message": "Cancel"
+	},
 	"styleBadRegexp": {
 		"message": "Regexp:en är ogiltig",
 		"description": "Validation message for a bad regexp in a style"

_locales/sv_SE/messages.json

@@ -168,6 +168,12 @@
 		"message": "Är du säker på att du vill ta bort denna stil?",
 		"description": "Confirmation before deleting a style"
 	},
+	"confirmOK": {
+		"message": "OK"
+	},
+	"confirmCancel": {
+		"message": "Cancel"
+	},
 	"styleBadRegexp": {
 		"message": "Regexp:en är ogiltig.",
 		"description": "Validation message for a bad regexp in a style"

_locales/te/messages.json

@@ -168,6 +168,12 @@
 		"message": "మీరు నజంగానే ఈ శైలిని తొలగించాలనుకుంటున్నారా?",
 		"description": "Confirmation before deleting a style"
 	},
+	"confirmOK": {
+		"message": "OK"
+	},
+	"confirmCancel": {
+		"message": "Cancel"
+	},
 	"styleBadRegexp": {
 		"message": "Regexp is invalid.",
 		"description": "Validation message for a bad regexp in a style"

_locales/tr/messages.json

@@ -168,6 +168,12 @@
 		"message": "Bu stili silmek istediğinizden emin misiniz?",
 		"description": "Confirmation before deleting a style"
 	},
+	"confirmOK": {
+		"message": "OK"
+	},
+	"confirmCancel": {
+		"message": "Cancel"
+	},
 	"styleBadRegexp": {
 		"message": "Regexp is invalid.",
 		"description": "Validation message for a bad regexp in a style"

_locales/zh/messages.json

@@ -168,6 +168,12 @@
 		"message": "确定要删除这个样式吗?",
 		"description": "Confirmation before deleting a style"
 	},
+	"confirmOK": {
+		"message": "OK"
+	},
+	"confirmCancel": {
+		"message": "Cancel"
+	},
 	"styleBadRegexp": {
 		"message": "Regexp is invalid.",
 		"description": "Validation message for a bad regexp in a style"

_locales/zh_CN/messages.json

@@ -168,6 +168,12 @@
 		"message": "确定要删除此样式吗？",
 		"description": "Confirmation before deleting a style"
 	},
+	"confirmOK": {
+		"message": "OK"
+	},
+	"confirmCancel": {
+		"message": "Cancel"
+	},
 	"styleBadRegexp": {
 		"message": "正则表达式无效。",
 		"description": "Validation message for a bad regexp in a style"

_locales/zh_TW/messages.json

@@ -168,6 +168,12 @@
 		"message": "確定要刪除這個樣式嗎？",
 		"description": "Confirmation before deleting a style"
 	},
+	"confirmOK": {
+		"message": "OK"
+	},
+	"confirmCancel": {
+		"message": "Cancel"
+	},
 	"styleBadRegexp": {
 		"message": "正規表示式無效。",
 		"description": "Validation message for a bad regexp in a style"

manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Stylus",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "__MSG_description__",
   "homepage_url": "http://add0n.com/stylus.html",
   "manifest_version": 2,

popup.css

@@ -219,4 +219,42 @@ body>div:not(#installed) {
   text-overflow: ellipsis;
   white-space: nowrap;
   padding-right: 5px;
+}
+  /* confirm */
+#confirm,
+#confirm>div>span {
+  align-items: center;
+  justify-content: center;
+}
+#confirm {
+  display: none; /* flex */
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  margin:  0!important;
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+#confirm[data-display=true] {
+  display: flex;
+}
+#confirm>div {
+  width: 80%;
+  height: 100px;
+  max-height: 80%;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  border: solid 2px rgba(0, 0, 0, 0.5);
+}
+#confirm>div>span {
+  display: flex;
+  flex: 1;
+  padding: 0 10px;
+}
+#confirm>div>div {
+  padding: 10px;
+  direction: rtl;
 }

popup.html

@@ -67,6 +67,16 @@
         <button id="popup-shortcuts-button" i18n-text="openShortcutsPopup"></button>
     </div>
     </div>
+    <!-- confirm -->
+    <div id="confirm">
+        <div>
+            <span i18n-text="deleteStyleConfirm"></span>
+            <div>
+                <input type="button" i18n-value="confirmOK" data-cmd="ok">
+                <input type="button" i18n-value="confirmCancel" data-cmd="cancel">
+            </div>
+        </div>
+    </div>
     <script src="popup.js"></script>
 </body>
 

popup.js

@@ -116,15 +116,22 @@ function enable(event, enabled) {
 }
 
 function doDelete() {
-	// Opera can't do confirms in popups
+	document.getElementById('confirm').dataset.display = true;
-	if (getBrowser() != "Opera") {
+	let id = getId(event);
-		if (!confirm(t('deleteStyleConfirm'))) {
+	document.getElementById('confirm').dataset.id = id;
-			return;
+
-		}
-	}
-	var id = getId(event);
-	deleteStyle(id);
 }
+document.getElementById('confirm').addEventListener('click', e => {
+	let cmd = e.target.dataset.cmd;
+	if (cmd === 'ok') {
+		deleteStyle(document.getElementById('confirm').dataset.id);
+		window.close();
+	}
+	//
+	if (cmd) {
+		document.getElementById('confirm').dataset.display = false;
+	}
+});
 
 function getBrowser() {
 	if (navigator.userAgent.indexOf("OPR") > -1) {