Cleanup, fix initial setup icon

2026-02-28 09:00:42 +01:00 · 2020-01-24 22:20:30 +01:00
parent ccb2f4693f
commit cb1f0d2920
5 changed files with 115 additions and 73 deletions
--- a/webext/background.html
+++ b/webext/background.html
@@ -13,6 +13,9 @@
      <div id="filters" data-filters="[]"></div>
    </div>

+    <script src="js/defaults.js"></script>
+    <div id="icon" data-icon-mime="" data-icon=""></div>
+
    <script src="background.js"></script>
  </body>
 </html>
--- a/webext/background.js
+++ b/webext/background.js
@@ -5,8 +5,6 @@ var SysTrayX = {
 };

 SysTrayX.Messaging = {
-  initialized: false,
-
  unreadFiltersTest: [
    { unread: true },
    { unread: true, folder: { accountId: "account1", path: "/INBOX" } }
@@ -24,8 +22,6 @@ SysTrayX.Messaging = {

    //    this.unReadMessages(this.unreadFiltersTest).then(this.unreadCb);
    window.setInterval(SysTrayX.Messaging.pollAccounts, 10000);
-
-    this.initialized = true;
  },

  //
@@ -136,9 +132,9 @@ SysTrayX.Messaging = {
    const iconMime = result.iconMime || "image/png";
    const icon = result.icon || [];

-    console.log("Debug" + debug);
-    console.log("Type" + iconType);
-    console.log("Mime" + iconMime);
+    console.log(`Debug ${debug}`);
+    console.log(`Type ${iconType}`);
+    console.log(`Mime ${iconMime}`);
    console.log(icon);

    //  Send it to the app
@@ -169,10 +165,10 @@ SysTrayX.Messaging = {
      const accountsDiv = document.getElementById("accounts");

      const accountsAttr = accountsDiv.getAttribute("data-accounts");
-      console.debug("Accounts attr: " + accountsAttr);
+      console.debug(`Accounts attr: ${accountsAttr}`);

      const accounts = JSON.parse(accountsAttr);
-      console.debug("Accounts poll: " + accounts.length);
+      console.debug(`Accounts poll: ${accounts.length}`);
    }
  },

@@ -223,7 +219,7 @@ SysTrayX.Link = {
  },

  receiveSysTrayXMessage: function(response) {
-    console.log("Received: " + response);
+    console.log(`Received: ${response}`);

    if (response["preferences"]) {
      //  Store the preferences from the app
@@ -260,12 +256,20 @@ SysTrayX.Link = {
  }
 };

+async function start() {
+  // Init defaults before everything
+  await getDefaultIcon();
+
+  //  Setup the link first
+  SysTrayX.Link.init();
+
+  //  Main start
+  SysTrayX.Messaging.init();
+}
+
 console.log("Starting SysTray-X");

-//  Setup the link first
-SysTrayX.Link.init();
+//  Start the add-on
+start();

-//  Main start
-SysTrayX.Messaging.init();
-
-console.log("Done");
+console.log("End SysTray-X");
--- a/webext/js/defaults.js
+++ b/webext/js/defaults.js
@@ -0,0 +1,56 @@
+//
+//  Set default icon
+//  Use <div> as storage
+//
+async function getDefaultIcon() {
+  function getStoredIcon(result) {
+    return result.iconMime && result.icon;
+  }
+
+  function onStoredIconError() {
+    return false;
+  }
+
+  const getIcon = browser.storage.sync.get(["iconMime", "icon"]);
+  const iconStored = await getIcon.then(getStoredIcon, onStoredIconError);
+
+  if (!iconStored) {
+    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 { iconMime, iconBase64 } = await toDataURL("icons/blank-icon.png").then(
+      dataUrl => {
+        const data = dataUrl
+          .split(":")
+          .pop()
+          .split(",");
+        return { iconMime: data[0].split(";")[0], iconBase64: data[1] };
+      }
+    );
+
+    //  Store default icon (base64)
+    browser.storage.sync.set({
+      iconMime: iconMime,
+      icon: iconBase64
+    });
+
+    //  Store in HTML
+    const iconDiv = document.getElementById("icon");
+    iconDiv.setAttribute("data-icon-mime", iconMime);
+    iconDiv.setAttribute("data-icon", iconBase64);
+
+    console.debug("Default: " + iconMime);
+    console.debug("Default: " + iconBase64);
+  }
+}
--- a/webext/options.html
+++ b/webext/options.html
@@ -7,15 +7,15 @@
  <body>
    <script src="js/styles.js" stylesheet="css/options.css"></script>
    <script src="js/i18n.js"></script>
-
    <script src="js/options_accounts.js"></script>
-    
+
    <br />
    <div id="debugselect">
-      <input type="checkbox" name="debug" value="Debug" /> Display debug window<br/>
+      <input type="checkbox" name="debug" value="Debug" /> Display debug
+      window<br />
    </div>
    <br />
-    
+
    <div class="tab">
      <button class="tablinks active" id="Windows">__MSG_tabWindows__</button>
      <button class="tablinks" id="Icon">__MSG_tabIcon__</button>
@@ -36,7 +36,6 @@
        <input type="checkbox" name="check1" value="Check1" /> Check 1<br />
        <input type="checkbox" name="check2" value="Check2" /> Check 2<br />
        <input type="checkbox" name="check3" value="Check3" /> Check 3<br />
-
      </form>
    </div>

@@ -44,30 +43,49 @@
      <form name="iconform">
        <h3>Icon</h3>

-        <p>Please select your option:</p>
-  
        <table id="iconselect">
          <tr>
            <td><input type="radio" name="iconType" value="0" /> Blank icon</td>
          </tr>
          <tr>
-            <td><input type="radio" name="iconType" value="1" /> New mail icon</td>
-          </tr>
-          <tr>
-            <td><input type="radio" name="iconType" value="2" /> Custom icon</td>
-            <td><img id="customIconImage" height="25" width="25" align="middle" src="icons/blank-icon.png"></td>
            <td>
-              <label for="selectedFileIconType" style="-moz-appearance: button;"}>Browse...</label>
-              <input type="file" id="selectedFileIconType" accept="image/*" style="display:none;">  
+              <input type="radio" name="iconType" value="1" /> New mail icon
            </td>
          </tr>
-        </table>    
+          <tr>
+            <td>
+              <input type="radio" name="iconType" value="2" /> Custom icon
+            </td>
+            <td>
+              <img
+                id="customIconImage"
+                height="25"
+                width="25"
+                align="middle"
+                src="icons/blank-icon.png"
+              />
+            </td>
+            <td>
+              <label
+                for="selectedFileIconType"
+                style="-moz-appearance: button;"
+                }
+                >Browse...</label
+              >
+              <input
+                type="file"
+                id="selectedFileIconType"
+                accept="image/*"
+                style="display:none;"
+              />
+            </td>
+          </tr>
+        </table>
      </form>

      <div id="icon" data-icon-mime="" data-icon=""></div>

      <script src="js/options_iconform.js"></script>
-
    </div>

    <div id="MailContent" class="tabcontent">
@@ -75,8 +93,9 @@
        <h3>Included accounts</h3>

        <ul id="accountsTree"></ul>
-      </form name="mailform">
+      </form>
    </div>
+
    <br />
    <form name="saveform">
      <label>Save preferences</label>
--- a/webext/options.js
+++ b/webext/options.js
@@ -306,46 +306,6 @@ SysTrayX.StorageChanged = {
  }
 };

-//
-//  Set default icon
-//
-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);
-        })
-    );
-
-toDataURL("icons/blank-icon.png").then(dataUrl => {
-  const data = dataUrl
-    .split(":")
-    .pop()
-    .split(",");
-  const mime = data[0].split(";")[0];
-  const base64 = data[1];
-
-  const iconDiv = document.getElementById("icon");
-
-  if (
-    iconDiv.getAttribute("data-icon") === "" &&
-    iconDiv.getAttribute("data-icon-mime") === ""
-  ) {
-    iconDiv.setAttribute("data-icon", base64);
-    iconDiv.setAttribute("data-icon-mime", mime);
-
-    console.debug("Default set");
-  }
-
-  console.debug("Default: " + mime);
-  console.debug("Default: " + base64);
-});
-
 //
 //  Main
 //