add cancel button (fix #1530)

_locales/de/messages.json

@@ -487,6 +487,10 @@
 		"message": "Änderungen bestätigen",
 		"description": "Popup text 'Validate changes' in the options page"
 	},
+	"optionsCancelChangesTooltip": {
+		"message": "Änderungen verwerfen",
+		"description": "Popup text 'Cancel changes' in the options page"
+	},
 	"optionsDeleteRuleConfirm": {
 		"message": "Löschung der auswählten Regel bestätigen",
 		"description": "Popup text 'Confirm the deletion of the selected rule' in the options page"

_locales/en/messages.json

@@ -487,6 +487,10 @@
 		"message": "Validate changes",
 		"description": "Popup text 'Validate changes' in the options page"
 	},
+	"optionsCancelChangesTooltip": {
+		"message": "Cancel changes",
+		"description": "Popup text 'Cancel changes' in the options page"
+	},
 	"optionsDeleteRuleConfirm": {
 		"message": "Confirm the deletion of the selected rule",
 		"description": "Popup text 'Confirm the deletion of the selected rule' in the options page"

_locales/es/messages.json

@@ -487,6 +487,10 @@
 		"message": "Validar cambios",
 		"description": "Popup text 'Validate changes' in the options page"
 	},
+	"optionsCancelChangesTooltip": {
+		"message": "Cancelar cambios",
+		"description": "Popup text 'Cancel changes' in the options page"
+	},
 	"optionsDeleteRuleConfirm": {
 		"message": "Confirmar la eliminación de la regla seleccionada",
 		"description": "Popup text 'Confirm the deletion of the selected rule' in the options page"

_locales/fr/messages.json

@@ -487,6 +487,10 @@
 		"message": "Valider les changements",
 		"description": "Popup text 'Valider les changements' in the options page"
 	},
+	"optionsCancelChangesTooltip": {
+		"message": "Annuler les changements",
+		"description": "Popup text 'Annuler les changements' in the options page"
+	},
 	"optionsDeleteRuleConfirm": {
 		"message": "Confirmer la suppression de la règle selectionnée",
 		"description": "Popup text 'Confirm deletion of the selected rule' in the options page"

_locales/it/messages.json

@@ -487,6 +487,10 @@
 		"message": "Valida cambiamenti",
 		"description": "Popup text 'Validate changes' in the options page"
 	},
+	"optionsCancelChangesTooltip": {
+		"message": "Annulla cambiamenti",
+		"description": "Popup text 'Cancel changes' in the options page"
+	},
 	"optionsDeleteRuleConfirm": {
 		"message": "Conferma l'eliminazione delle regole selezionate",
 		"description": "Popup text 'Confirm the deletion of the selected rule' in the options page"

_locales/ja/messages.json

@@ -487,6 +487,10 @@
 		"message": "変更内容を検証します",
 		"description": "Popup text 'Validate changes' in the options page"
 	},
+	"optionsCancelChangesTooltip": {
+		"message": "変更をキャンセルします",
+		"description": "Popup text 'Cancel changes' in the options page"
+	},
 	"optionsDeleteRuleConfirm": {
 		"message": "選択したルールの削除を確認する",
 		"description": "Popup text 'Confirm the deletion of the selected rule' in the options page"

_locales/nl_NL/messages.json

@@ -487,6 +487,10 @@
 		"message": "Wijzigingen bevestigen",
 		"description": "Popup text 'Validate changes' in the options page"
 	},
+	"optionsCancelChangesTooltip": {
+		"message": "Wijzigingen annuleren",
+		"description": "Popup text 'Cancel changes' in the options page"
+	},
 	"optionsDeleteRuleConfirm": {
 		"message": "Bevestig de verwijdering van de geselecteerde regel",
 		"description": "Popup text 'Confirm the deletion of the selected rule' in the options page"

_locales/pl/messages.json

@@ -487,6 +487,10 @@
 		"message": "Zatwierdź zmiany",
 		"description": "Popup text 'Validate changes' in the options page"
 	},
+	"optionsCancelChangesTooltip": {
+		"message": "Cancel changes",
+		"description": "Popup text 'Cancel changes' in the options page"
+	},
 	"optionsDeleteRuleConfirm": {
 		"message": "Potwierdź usunięcie wybranej reguły",
 		"description": "Popup text 'Confirm deletion of the selected rule' in the options page"

_locales/pt_PT/messages.json

@@ -487,6 +487,10 @@
 		"message": "Validar alterações",
 		"description": "Popup text 'Validate changes' in the options page"
 	},
+	"optionsCancelChangesTooltip": {
+		"message": "Cancelar alterações",
+		"description": "Popup text 'Cancel changes' in the options page"
+	},
 	"optionsDeleteRuleConfirm": {
 		"message": "Confirmar a eliminação da regra selecionada",
 		"description": "Popup text 'Confirm the deletion of the selected rule' in the options page"

_locales/pt_br/messages.json

@@ -487,6 +487,10 @@
 		"message": "Validar as mudanças",
 		"description": "Popup text 'Validate changes' in the options page"
 	},
+	"optionsCancelChangesTooltip": {
+		"message": "Cancelar as mudanças",
+		"description": "Popup text 'Cancel changes' in the options page"
+	},
 	"optionsDeleteRuleConfirm": {
 		"message": "Confirmar a eliminação da regra selecionada",
 		"description": "Popup text 'Confirm the deletion of the selected rule' in the options page"

_locales/ru/messages.json

@@ -487,6 +487,10 @@
 		"message": "Подтвердить изменения",
 		"description": "Popup text 'Validate changes' in the options page"
 	},
+	"optionsCancelChangesTooltip": {
+		"message": "Cancel changes",
+		"description": "Popup text 'Cancel changes' in the options page"
+	},
 	"optionsDeleteRuleConfirm": {
 		"message": "Подтвердите удаление выбранного правила",
 		"description": "Popup text 'Confirm the deletion of the selected rule' in the options page"

_locales/tr/messages.json

@@ -487,6 +487,10 @@
 		"message": "Değişiklikleri doğrula",
 		"description": "Popup text 'Validate changes' in the options page"
 	},
+	"optionsCancelChangesTooltip": {
+		"message": "Değişiklikleri iptal et",
+		"description": "Popup text 'Cancel changes' in the options page"
+	},
 	"optionsDeleteRuleConfirm": {
 		"message": "Seçilen kuralın silinmesini onaylayın",
 		"description": "Popup text 'Confirm the deletion of the selected rule' in the options page"

_locales/uk/messages.json

@@ -487,6 +487,10 @@
 		"message": "Підтвердити зміни",
 		"description": "Popup text 'Validate changes' in the options page"
 	},
+	"optionsCancelChangesTooltip": {
+		"message": "Скасувати зміни",
+		"description": "Popup text 'Cancel changes' in the options page"
+	},
 	"optionsDeleteRuleConfirm": {
 		"message": "Підтвердити видалення вибраного правила",
 		"description": "Popup text 'Confirm the deletion of the selected rule' in the options page"

_locales/zh_CN/messages.json

@@ -487,6 +487,10 @@
 		"message": "验证更改",
 		"description": "Popup text 'Validate changes' in the options page"
 	},
+	"optionsCancelChangesTooltip": {
+		"message": "取消更改",
+		"description": "Popup text 'Cancel changes' in the options page"
+	},
 	"optionsDeleteRuleConfirm": {
 		"message": "确认删除所选规则",
 		"description": "Popup text 'Confirm the deletion of the selected rule' in the options page"

_locales/zh_TW/messages.json

@@ -487,6 +487,10 @@
 		"message": "驗證更改",
 		"description": "Popup text 'Validate changes' in the options page"
 	},
+	"optionsCancelChangesTooltip": {
+		"message": "取消變更",
+		"description": "Popup text 'Cancel changes' in the options page"
+	},
 	"optionsDeleteRuleConfirm": {
 		"message": "確認刪除所選規則",
 		"description": "Popup text 'Confirm the deletion of the selected rule' in the options page"

src/ui/bg/ui-options.js

@@ -322,6 +322,7 @@ const ruleAutoSaveProfileInput = document.getElementById("ruleAutoSaveProfileInp
 const ruleEditProfileInput = document.getElementById("ruleEditProfileInput");
 const ruleEditAutoSaveProfileInput = document.getElementById("ruleEditAutoSaveProfileInput");
 const ruleAddButton = document.getElementById("ruleAddButton");
+const ruleCancelButton = document.getElementById("ruleCancelButton");
 const rulesElement = document.querySelector(".rules-table");
 const rulesContainerElement = document.querySelector(".rules-table-container");
 const ruleEditUrlInput = document.getElementById("ruleEditUrlInput");
@@ -356,7 +357,7 @@ const S3BucketInput = document.getElementById("S3BucketInput");
 const S3AccessKeyInput = document.getElementById("S3AccessKeyInput");
 const S3SecretKeyInput = document.getElementById("S3SecretKeyInput");
 
-let sidePanelDisplay;
+let sidePanelDisplay, lastURLValue = "", lastProfileValue = "", lastAutoSaveProfileValue = "";
 if (location.href.endsWith("#side-panel")) {
 	sidePanelDisplay = true;
 	document.querySelector(".options-title").remove();
@@ -412,6 +413,14 @@ ruleEditUrlInput.onclick = ruleEditUrlInput.onkeyup = ruleEditUrlInput.onchange
 		ruleEditButton.disabled = true;
 	}
 };
+ruleCancelButton.onclick = async () => {
+	ruleEditUrlInput.value = lastURLValue;
+	ruleEditProfileInput.value = lastProfileValue;
+	ruleEditAutoSaveProfileInput.value = lastAutoSaveProfileValue;
+	lastURLValue = "";
+	lastProfileValue = "";
+	lastAutoSaveProfileValue = "";
+};
 if (getLocalStorageItem("optionShowAutoSaveProfile")) {
 	showAutoSaveProfileInput.checked = true;
 	rulesContainerElement.classList.remove("compact");
@@ -789,6 +798,7 @@ autoSettingsProfileLabel.textContent = browser.i18n.getMessage("optionsAutoSetti
 autoSettingsAutoSaveProfileLabel.textContent = browser.i18n.getMessage("optionsAutoSettingsAutoSaveProfile");
 ruleAddButton.title = browser.i18n.getMessage("optionsAddRuleTooltip");
 ruleEditButton.title = browser.i18n.getMessage("optionsValidateChangesTooltip");
+ruleCancelButton.title = browser.i18n.getMessage("optionsCancelChangesTooltip");
 rulesDeleteAllButton.title = browser.i18n.getMessage("optionsDeleteRulesTooltip");
 showAllProfilesLabel.textContent = browser.i18n.getMessage("optionsAutoSettingsShowAllProfiles");
 showAutoSaveProfileLabel.textContent = browser.i18n.getMessage("optionsAutoSettingsShowAutoSaveProfile");
@@ -925,9 +935,9 @@ async function refresh(profileName) {
 					createURLElement.hidden = true;
 					editURLElement.hidden = false;
 					rulesDataElement.replaceChild(editURLElement, ruleElement);
-					ruleEditUrlInput.value = rule.url;
-					ruleEditProfileInput.value = rule.profile;
-					ruleEditAutoSaveProfileInput.value = rule.autoSaveProfile;
+					ruleEditUrlInput.value = lastURLValue = rule.url;
+					ruleEditProfileInput.value = lastProfileValue = rule.profile;
+					ruleEditAutoSaveProfileInput.value = lastAutoSaveProfileValue = rule.autoSaveProfile;
 					ruleEditUrlInput.focus();
 					editURLElement.onsubmit = async event => {
 						event.preventDefault();
@@ -937,6 +947,11 @@ async function refresh(profileName) {
 						await refreshExternalComponents();
 						ruleUrlInput.focus();
 					};
+					editURLElement.onkeyup = event => {
+						if (event.key == "Escape") {
+							ruleCancelButton.click();
+						}
+					};
 				}
 			}, false);
 		}

src/ui/pages/options.html

@@ -585,7 +585,8 @@
 						<span class="td rule-autosave-profile"><select
 								id="ruleEditAutoSaveProfileInput"></select></span>
 						<span class="td"><button id="ruleEditButton" type="submit"><img
-									src="../resources/button_ok.png"></button></span>
+									src="../resources/button_ok.png"></button> <button id="ruleCancelButton"><img
+									src="../resources/button_cancel.png"></button></span>
 					</form>
 				</div>
 			</div>