Added save indicator in the options page in Gecko
Firefox doesn't allow extensions to close the options page via
window.close, so this commit adds a "Saved" message each time the
options are saved.
In Chromium, the behavior continues to be the same as before (the
options page is closed after saving the changes).
Change-Id: I4f313f382b527e205ba1dc9976af53cb13a0cba6
diff --git a/src/_locales/ca/messages.json b/src/_locales/ca/messages.json
index a4c45e2..b454bcf 100644
--- a/src/_locales/ca/messages.json
+++ b/src/_locales/ca/messages.json
@@ -71,6 +71,10 @@
"message": "Desa",
"description": "Button in the options page to save the settings"
},
+ "options_saved": {
+ "message": "Desat",
+ "description": "Message which appears in the options page when the settings are saved"
+ },
"inject_links": {
"message": "Enllaços",
"description": "Heading which we use before the 'previous post' link in a user profile in TW"
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index 43b6de9..e958010 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -71,6 +71,10 @@
"message": "Save",
"description": "Button in the options page to save the settings"
},
+ "options_saved": {
+ "message": "Saved",
+ "description": "Message which appears in the options page when the settings are saved"
+ },
"inject_links": {
"message": "Links",
"description": "Heading which we use before the 'previous post' link in a user profile in TW"
diff --git a/src/_locales/es/messages.json b/src/_locales/es/messages.json
index 89941c0..8627dbb 100644
--- a/src/_locales/es/messages.json
+++ b/src/_locales/es/messages.json
@@ -71,6 +71,10 @@
"message": "Guardar",
"description": "Button in the options page to save the settings"
},
+ "options_saved": {
+ "message": "Guardado",
+ "description": "Message which appears in the options page when the settings are saved"
+ },
"inject_links": {
"message": "Enlaces",
"description": "Heading which we use before the 'previous post' link in a user profile in TW"
diff --git a/src/options.css b/src/options.css
index a6fb4de..69a410c 100644
--- a/src/options.css
+++ b/src/options.css
@@ -2,3 +2,17 @@
cursor: help;
border-bottom: dashed 1px gray;
}
+
+.experimental-label {
+ color: gray;
+}
+
+.actions {
+ text-align: center;
+}
+
+#save-indicator {
+ text-align: center;
+ margin-bottom: 16px;
+ color: green;
+}
diff --git a/src/options.html b/src/options.html
index 8edaea2..3df88c5 100644
--- a/src/options.html
+++ b/src/options.html
@@ -13,13 +13,14 @@
<h4 data-i18n="enhancements"></h4>
<p>
<input type="checkbox" id="fixedtoolbar"> <label for="fixedtoolbar" data-i18n="fixedtoolbar"></label><br>
- <input type="checkbox" id="redirect"> <label for="redirect" data-i18n="redirect"></label> <span style="color: gray;" data-i18n="experimental_label"></span><br>
+ <input type="checkbox" id="redirect"> <label for="redirect" data-i18n="redirect"></label> <span class="experimental-label" data-i18n="experimental_label"></span><br>
<input type="checkbox" id="history"> <label for="history" data-i18n="history"></label><br>
- <input type="checkbox" id="loaddrafts"> <label for="loaddrafts" data-i18n="loaddrafts"></label> <span style="color: gray;" data-i18n="experimental_label"></span><br>
+ <input type="checkbox" id="loaddrafts"> <label for="loaddrafts" data-i18n="loaddrafts"></label> <span class="experimental-label" data-i18n="experimental_label"></span><br>
<input type="checkbox" id="increasecontrast"> <label for="increasecontrast" data-i18n="increasecontrast"></label><br>
<input type="checkbox" id="stickysidebarheaders"> <label for="stickysidebarheaders" data-i18n="stickysidebarheaders"></label><br>
</p>
- <p style="text-align: center;"><button id="save" data-i18n="save"></button></p>
+ <p class="actions"><button id="save" data-i18n="save"></button></p>
+ <div id="save-indicator"></div>
<script src="options.js"></script>
</body>
</html>
diff --git a/src/options.js b/src/options.js
index 5f965b9..49bc2ec 100644
--- a/src/options.js
+++ b/src/options.js
@@ -24,6 +24,8 @@
'batchduplicate',
];
+var savedSuccessfullyTimeout = null;
+
function cleanUpOptions(options) {
var ok = true;
for (const [opt, value] of Object.entries(defaultOptions)) {
@@ -50,6 +52,16 @@
chrome.storage.sync.set(options, function() {
window.close();
+
+ // In browsers like Firefox window.close is not supported:
+ if (savedSuccessfullyTimeout !== null)
+ window.clearTimeout(savedSuccessfullyTimeout);
+
+ document.getElementById('save-indicator').innerText =
+ '✓ ' + chrome.i18n.getMessage('options_saved');
+ savedSuccessfullyTimeout = window.setTimeout(_ => {
+ document.getElementById('save-indicator').innerText = '';
+ }, 3699);
});
}