Functioning options page

data/actions.js

@@ -9,6 +9,14 @@ function emptyEm() {
   browser.folder_actions.emptyTrashFolders();
   browser.folder_actions.emptyJunkFolders();
   console.log("Empty-em: Emptying.. Done");
+
+  // TODO: Do this on done event
+  browser.notifications.create("emptyem-done-notify", {
+    "type": "basic",
+    "iconUrl": browser.extension.getURL("icons/icon.png"),
+    "title": "Empty 'em done!",
+    "message": "Cleaned Trash and Junk folders"
+  });
 }
 
 // Handlers

data/common.js

@@ -0,0 +1,72 @@
+// -----------------------------------------------
+// Common functions used in Options handling
+// -----------------------------------------------
+//
+// Get default values of preferences
+//
+function getPrefDefaults() {
+  return {
+    prefs: {
+      overrideDeleteConfirm: false,
+      selectTrashDelete: false,
+      selectJunkDelete: false,
+      consoleDebug: false,
+      disableDoneNotification: false,
+      alsoCompact: false
+    }
+  };
+}
+
+//
+// Get preferences from storage and return the structure asynchronously
+//
+async function getPrefs() {
+  let getting = await browser.storage.sync.get("prefs");
+
+  let fr = "";
+  if ($.isEmptyObject(getting)) {
+    prefs = getPrefDefaults();
+    fr = "defaults";
+  } else {
+    prefs = getting;
+    fr = "storage";
+  };
+  console.log("Loaded prefs from " + fr);
+
+  return getting;
+}
+
+//
+// Handle the event of an option change in options UI. Event is passed in as
+// the 'ch' argument. This function records the changed option in to the
+// options storage and returns the updated structure asynchronously
+//
+async function changeOption(ch) {
+  var i = ch[0].id;
+  var c = ch[0].checked;
+  console.log("Pref: " + i + " -> " + c);
+       if (i == "overrideDeleteConfirm")   { prefs.prefs.overrideDeleteConfirm = c; }
+  else if (i == "selectTrashDelete")       { prefs.prefs.selectTrashDelete = c; }
+  else if (i == "selectJunkDelete")        { prefs.prefs.selectJunkDelete = c; }
+  else if (i == "consoleDebug")            { prefs.prefs.consoleDebug = c; }
+  else if (i == "disableDoneNotification") { prefs.prefs.disableDoneNotification = c; }
+  else if (i == "alsoCompact")             { prefs.prefs.alsoCompact = c; }
+  await browser.storage.sync.set(prefs);
+
+  prefs = await getPrefs();
+
+  return prefs;
+}
+
+//
+// Given the preferences structure, update the options IO with appropriate values
+//
+function updateOptionsForm(prefs) {
+  $("#overrideDeleteConfirm").prop('checked', prefs.prefs.overrideDeleteConfirm);
+  $("#selectTrashDelete").prop('checked', prefs.prefs.selectTrashDelete);
+  $("#selectJunkDelete").prop('checked', prefs.prefs.selectJunkDelete);
+  $("#selectJunkDelete").prop('checked', prefs.prefs.selectJunkDelete);
+  $("#consoleDebug").prop('checked', prefs.prefs.consoleDebug);
+  $("#disableDoneNotification").prop('checked', prefs.prefs.disableDoneNotification);
+  $("#alsoCompact").prop('checked', prefs.prefs.alsoCompact);
+}

data/options.html

@@ -120,6 +120,7 @@ body {
     </div>
 
     <script src="jquery.min.js"></script>
+    <script src="common.js"></script>
     <script src="options.js"></script>
   </body>
 </html>

data/options.js

@@ -1,3 +1,19 @@
 // -----------------------------------------------
 // Options UI and handling
 // -----------------------------------------------
+//
+// Load preferences from options storage. When done, update the options UI with
+// values. Then, set up the listener for option changes.
+//
+async function loadOptions() {
+  let prefs = await getPrefs();
+  updateOptionsForm(prefs);
+
+  $("input[type=checkbox]").change(function() {
+    changeOption($(this));
+  });
+}
+
+$(function() {
+  loadOptions();
+});