Add default icon preference

webext/background.html

@@ -10,6 +10,8 @@
     <p>Background HTML</p>
 
     <script src="js/defaults.js"></script>
+
+    <div id="defaultIcon" data-default-icon-mime="" data-default-icon=""></div>
     <div id="icon" data-icon-mime="" data-icon=""></div>
 
     <script src="background.js"></script>

webext/background.js

@@ -143,6 +143,9 @@ SysTrayX.Messaging = {
       "minimizeType",
       "startMinimized",
       "minimizeOnClose",
+      "defaultIconType",
+      "defaultIconMime",
+      "defaultIcon",
       "iconType",
       "iconMime",
       "icon",
@@ -158,6 +161,9 @@ SysTrayX.Messaging = {
     const minimizeType = result.minimizeType || "1";
     const startMinimized = result.startMinimized || "false";
     const minimizeOnClose = result.minimizeOnClose || "true";
+    const defaultIconType = result.defaultIconType || "0";
+    const defaultIconMime = result.defaultIconMime || "image/png";
+    const defaultIcon = result.defaultIcon || [];
     const iconType = result.iconType || "0";
     const iconMime = result.iconMime || "image/png";
     const icon = result.icon || [];
@@ -172,6 +178,9 @@ SysTrayX.Messaging = {
         minimizeType: minimizeType,
         startMinimized: startMinimized,
         minimizeOnClose: minimizeOnClose,
+        defaultIconType: defaultIconType,
+        defaultIconMime: defaultIconMime,
+        defaultIcon: defaultIcon,
         iconType: iconType,
         iconMime: iconMime,
         icon: icon,
@@ -246,6 +255,27 @@ SysTrayX.Link = {
 
     if (response["preferences"]) {
       //  Store the preferences from the app
+      const defaultIconMime = response["preferences"].defaultIconMime;
+      if (defaultIconMime) {
+        browser.storage.sync.set({
+          defaultIconMime: defaultIconMime,
+        });
+      }
+
+      const defaultIcon = response["preferences"].defaultIcon;
+      if (defaultIcon) {
+        browser.storage.sync.set({
+          defaultIcon: defaultIcon,
+        });
+      }
+
+      const defaultIconType = response["preferences"].defaultIconType;
+      if (defaultIconType) {
+        browser.storage.sync.set({
+          defaultIconType: defaultIconType,
+        });
+      }
+
       const iconMime = response["preferences"].iconMime;
       if (iconMime) {
         browser.storage.sync.set({
@@ -390,6 +420,7 @@ async function start() {
 
   //  Init defaults before everything
   await getDefaultIcon();
+  await getIcon();
 
   SysTrayX.Window.startWindow = await browser.windows
     .getCurrent()

webext/css/options.css

@@ -67,7 +67,16 @@ body {
   padding: 10px 10px 10px 10px;
 }
 
+#defaulticonselect {
+  width: 20em;
+  border-style: solid;
+  border-width: 1px;
+  margin: 10px 10px 10px 10px;
+  padding: 10px 10px 10px 10px;
+}
+
 #iconselect {
+  width: 20em;
   border-style: solid;
   border-width: 1px;
   margin: 10px 10px 10px 10px;

webext/js/defaults.js

@@ -1,8 +1,68 @@
 //
-//  Set default icon
+//  Set default default icon
 //  Use <div> as storage
 //
 async function getDefaultIcon() {
+  function getStoredDefaultIcon(result) {
+    return result.defaultIconMime && result.defaultIcon;
+  }
+
+  function onStoredDefaultIconError() {
+    return false;
+  }
+
+  const getDefaultIcon = browser.storage.sync.get([
+    "defaultIconMime",
+    "defaultIcon",
+  ]);
+  const defaultIconStored = await getDefaultIcon.then(
+    getStoredDefaultIcon,
+    onStoredDefaultIconError
+  );
+
+  if (!defaultIconStored) {
+    const toDataURL = (url) =>
+      fetch(url)
+        .then((response) => response.blob())
+        .then(
+          (blob) =>
+            new Promise((resolve, reject) => {
+              const reader = new FileReader();
+              reader.onloadend = () => resolve(reader.result);
+              reader.onerror = reject;
+              reader.readAsDataURL(blob);
+            })
+        );
+
+    //  Convert image to storage param
+    let { defaultIconMime, defaultIconBase64 } = await toDataURL(
+      "icons/Thunderbird.png"
+    ).then((dataUrl) => {
+      const data = dataUrl.split(":").pop().split(",");
+      return {
+        defaultIconMime: data[0].split(";")[0],
+        defaultIconBase64: data[1],
+      };
+    });
+
+    //  Store default icon (base64)
+    browser.storage.sync.set({
+      defaultIconMime: defaultIconMime,
+      defaultIcon: defaultIconBase64,
+    });
+
+    //  Store in HTML
+    const defaultIconDiv = document.getElementById("defaultIcon");
+    defaultIconDiv.setAttribute("data-default-icon-mime", defaultIconMime);
+    defaultIconDiv.setAttribute("data-default-icon", defaultIconBase64);
+  }
+}
+
+//
+//  Set default unread icon
+//  Use <div> as storage
+//
+async function getIcon() {
   function getStoredIcon(result) {
     return result.iconMime && result.icon;
   }

webext/js/options_iconform.js

@@ -1,3 +1,34 @@
+function fileSelectedDefault() {
+  const input = document.getElementById("selectedFileDefaultIconType");
+
+  //  if (input.files.length > 0) {
+  //    console.debug("Selected file: " + input.files[0].name);
+  //    console.debug("Selected file type: " + input.files[0].type);
+  //  }
+
+  function storeFile() {
+    const buffer = new Uint8Array(fr.result);
+
+    let binary = "";
+    const len = buffer.byteLength;
+    for (let i = 0; i < len; i++) {
+      binary += String.fromCharCode(buffer[i]);
+    }
+
+    const base64 = window.btoa(binary);
+    const iconDiv = document.getElementById("defaultIcon");
+    iconDiv.setAttribute("data-default-icon", base64);
+    iconDiv.setAttribute("data-default-icon-mime", input.files[0].type);
+
+    const image = document.getElementById("defaultCustomIconImage");
+    image.setAttribute("src", `data:${input.files[0].type};base64,${base64}`);
+  }
+
+  fr = new FileReader();
+  fr.onload = storeFile;
+  fr.readAsArrayBuffer(input.files[0]);
+}
+
 function fileSelected() {
   const input = document.getElementById("selectedFileIconType");
 
@@ -32,3 +63,7 @@ function fileSelected() {
 document
   .getElementById("selectedFileIconType")
   .addEventListener("change", fileSelected);
+
+document
+  .getElementById("selectedFileDefaultIconType")
+  .addEventListener("change", fileSelectedDefault);

webext/options.html

@@ -71,7 +71,59 @@
       <form name="iconform">
         <h3>Icon</h3>
 
+        <table id="defaulticonselect">
+          <caption>
+            Default icon
+          </caption>
+          <tr>
+            <td>
+              <input type="radio" name="defaultIconType" value="0" /> Default
+              Thunderbird
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <input type="radio" name="defaultIconType" value="1" /> Hide icon
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <input type="radio" name="defaultIconType" value="2" /> Custom
+              icon
+            </td>
+            <td>
+              <img
+                id="defaultCustomIconImage"
+                height="25"
+                width="25"
+                align="middle"
+                src="icons/Thunderbird.png"
+              />
+            </td>
+            <td>
+              <label
+                for="selectedFileDefaultIconType"
+                style="-moz-appearance: button;"
+                }
+                >Browse...</label
+              >
+              <input
+                type="file"
+                id="selectedFileDefaultIconType"
+                accept="image/*"
+                style="display: none;"
+              />
+            </td>
+            <td>
+              &emsp;
+            </td>
+          </tr>
+        </table>
+
         <table id="iconselect">
+          <caption>
+            Unread mail icon
+          </caption>
           <tr>
             <td><input type="radio" name="iconType" value="0" /> Blank icon</td>
           </tr>
@@ -129,7 +181,7 @@
           </tr>
         </table>
 
-        <table id="countprops" style="display:none">
+        <table id="countprops" style="display: none;">
           <tr>
             <td>
               <label for="countType">Message count type: </label>
@@ -140,6 +192,8 @@
         </table>
       </form>
 
+      <div id="defaultIcon" data-default-icon-mime="" data-default-icon=""></div>
+
       <div id="icon" data-icon-mime="" data-icon=""></div>
 
       <script src="js/options_iconform.js"></script>

webext/options.js

@@ -85,6 +85,30 @@ SysTrayX.SaveOptions = {
       minimizeOnClose: `${minimizeOnClose}`,
     });
 
+    //
+    // Save default icon preferences
+    //
+    const defaultIconType = document.querySelector(
+      'input[name="defaultIconType"]:checked'
+    ).value;
+
+    //  Store default icon type
+    browser.storage.sync.set({
+      defaultIconType: defaultIconType,
+    });
+
+    const defaultIconDiv = document.getElementById("defaultIcon");
+    const defaultIconBase64 = defaultIconDiv.getAttribute("data-default-icon");
+    const defaultIconMime = defaultIconDiv.getAttribute(
+      "data-default-icon-mime"
+    );
+
+    //  Store default icon (base64)
+    browser.storage.sync.set({
+      defaultIconMime: defaultIconMime,
+      defaultIcon: defaultIconBase64,
+    });
+
     //
     // Save icon preferences
     //
@@ -106,11 +130,6 @@ SysTrayX.SaveOptions = {
       icon: iconBase64,
     });
 
-    //  Mark add-on preferences changed
-    browser.storage.sync.set({
-      addonprefchanged: true,
-    });
-
     //
     //  Save enable number state
     //
@@ -137,6 +156,11 @@ SysTrayX.SaveOptions = {
     browser.storage.sync.set({
       countType: countType,
     });
+
+    //  Mark add-on preferences changed
+    browser.storage.sync.set({
+      addonprefchanged: true,
+    });
   },
 };
 
@@ -181,6 +205,27 @@ SysTrayX.RestoreOptions = {
       SysTrayX.RestoreOptions.onMinimizeOnCloseError
     );
 
+    //
+    //  Restore default icon type
+    //
+    const getDefaultIconType = browser.storage.sync.get("defaultIconType");
+    getDefaultIconType.then(
+      SysTrayX.RestoreOptions.setDefaultIconType,
+      SysTrayX.RestoreOptions.onDefaultIconTypeError
+    );
+
+    //
+    //  Restore default icon
+    //
+    const getDefaultIcon = browser.storage.sync.get([
+      "defaultIconMime",
+      "defaultIcon",
+    ]);
+    getDefaultIcon.then(
+      SysTrayX.RestoreOptions.setDefaultIcon,
+      SysTrayX.RestoreOptions.onDefaultIconError
+    );
+
     //
     //  Restore icon type
     //
@@ -323,6 +368,73 @@ SysTrayX.RestoreOptions = {
     console.log(`Icon type Error: ${error}`);
   },
 
+  //
+  //  Restore default icon type callbacks
+  //
+  setDefaultIconType: function (result) {
+    const defaultIconType = result.defaultIconType || "0";
+    const radioButton = document.querySelector(
+      `input[name="defaultIconType"][value="${defaultIconType}"]`
+    );
+    radioButton.checked = true;
+  },
+
+  onDefaultIconTypeError: function (error) {
+    console.log(`Default icon type Error: ${error}`);
+  },
+
+  //
+  //  Restore default icon
+  //
+  setDefaultIconMime: function (result) {
+    const defaultIconMime = result.defaultIconMime || "";
+
+    const valid = defaultIconMime !== "";
+    if (valid) {
+      const defaultIconDiv = document.getElementById("defaultIcon");
+      defaultIconDiv.setAttribute("data-default-icon-mime", defaultIconMime);
+    }
+
+    return valid;
+  },
+
+  setDefaultIconData: function (result) {
+    const defaultIconBase64 = result.defaultIcon || "";
+
+    const valid = defaultIconBase64 !== "";
+    if (valid) {
+      const defaultIconDiv = document.getElementById("defaultIcon");
+      defaultIconDiv.setAttribute("data-default-icon", defaultIconBase64);
+    }
+
+    return valid;
+  },
+
+  updateDefaultIconImage: function () {
+    const defaultIconDiv = document.getElementById("defaultIcon");
+    default_icon_mime = defaultIconDiv.getAttribute("data-default-icon-mime");
+    default_icon_data = defaultIconDiv.getAttribute("data-default-icon");
+
+    const image = document.getElementById("defaultCustomIconImage");
+    image.setAttribute(
+      "src",
+      `data:${default_icon_mime};base64,${default_icon_data}`
+    );
+  },
+
+  setDefaultIcon: function (result) {
+    const validMime = SysTrayX.RestoreOptions.setDefaultIconMime(result);
+    const validData = SysTrayX.RestoreOptions.setDefaultIconData(result);
+
+    if (validMime && validData) {
+      SysTrayX.RestoreOptions.updateDefaultIconImage();
+    }
+  },
+
+  onDefaultIconError: function (error) {
+    console.log(`Default icon Error: ${error}`);
+  },
+
   //
   //  Restore icon
   //
@@ -501,6 +613,8 @@ SysTrayX.StorageChanged = {
 
     let changed_icon = false;
     let changed_icon_mime = false;
+    let changed_default_icon = false;
+    let changed_default_icon_mime = false;
     for (let item of changedItems) {
       if (item === "iconMime") {
         SysTrayX.RestoreOptions.setIconMime({
@@ -517,6 +631,18 @@ SysTrayX.StorageChanged = {
         });
         changed_icon_mime = true;
       }
+      if (item === "defaultIcon") {
+        SysTrayX.RestoreOptions.setDefaultIcon({
+          defaultIcon: changes[item].newValue,
+        });
+        changed_default_icon = true;
+      }
+      if (item === "defaultIconType") {
+        SysTrayX.RestoreOptions.setDefaultIconType({
+          defaultIconType: changes[item].newValue,
+        });
+        changed_default_icon_mime = true;
+      }
       if (item === "showNumber") {
         SysTrayX.RestoreOptions.setShowNumber({
           showNumber: changes[item].newValue,
@@ -558,10 +684,15 @@ SysTrayX.StorageChanged = {
       SysTrayX.RestoreOptions.updateIconImage();
     }
 
+    if (changed_default_icon_mime && changed_default_icon) {
+      SysTrayX.RestoreOptions.updateDefaultIconImage();
+    }
+
     //
     //  Update element
     //
     document.getElementById("debugselect").className = "active";
+    document.getElementById("defaulticonselect").className = "active";
     document.getElementById("iconselect").className = "active";
     document.getElementById("minimizeselect").className = "active";
   },