feat: reset all preferences to default values

This is a small UX feature that lets users to fallback
to 'safe' defaults after they went crazy with custom settings
and are not sure why things stopped working :-)

add-on/src/options/options.html

@@ -7,6 +7,9 @@
         font: caption;
         font-size: 1rem;
       }
+      strong {
+        font-weight: bold;
+      }
       em {
         font-style: italic;
       }
@@ -38,7 +41,6 @@
       }
       fieldset > div > * {
         align-self: center;
-
       }
       label {
         flex: 1;
@@ -59,6 +61,10 @@
         padding: .5rem;
         font-family: monospace;
       }
+      #resetAllOptions {
+        flex: 1;
+        text-align: center;
+      }
       input[type=text],
       input[type=url],
       input[type=number],
@@ -191,6 +197,16 @@
           </label>
           <input type="checkbox" id="dnslink" />
         </div>
+        <div>
+          <label for="resetAllOptions">
+            <dl>
+              <dt>Reset Everything<dt>
+              <dd>Replaces user preferences with default ones<br>
+              <strong>(this can't be undone!)</strong></dd>
+            </dl>
+          </label>
+          <span id="resetAllOptions"><button>Reset Everything!</button></span>
+        </div>
       </fieldset>
     </form>
 

add-on/src/options/options.js

@@ -68,8 +68,25 @@ function readAllOptions () {
   Object.keys(optionDefaults).map(key => readOption(key))
 }
 
+function resetAllOptions (event) {
+  // go over every key and set its value to a default one
+  Object.keys(optionDefaults).map(async key => {
+    const change = {}
+    change[key] = optionDefaults[key]
+    await browser.storage.local.set(change)
+    readOption(key)
+  })
+  window.scrollTo(0, 0)
+  event.target.disabled = true
+  setTimeout(() => { event.target.disabled = false }, 3000)
+  event.preventDefault()
+}
+
 // initial load
-document.addEventListener('DOMContentLoaded', readAllOptions)
+document.addEventListener('DOMContentLoaded', () => {
+  readAllOptions()
+  document.querySelector('#resetAllOptions > button').addEventListener('click', resetAllOptions)
+})
 
 // update on external changes such as browserAction menu
 browser.storage.onChanged.addListener(readAllOptions)