adding and removing tags from the exclusion list. see #183

_locales/en/messages.json

@@ -830,5 +830,9 @@
   "addtags_dialog_title": {
     "message": "Add tags to the email",
     "description": ""
+  },
+  "addtags_exclude_tag": {
+    "message": "Exclude tag",
+    "description": ""
   }
 }

images/exclude-tag.svg

@@ -0,0 +1,17 @@
+<svg width="128" height="128" style="enable-background:new 0 0 128 128;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g>
+    <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="64" x2="64" y1="18.6667" y2="124.8554">
+      <stop offset="0" style="stop-color:#FF5252"/>
+      <stop offset="0.324" style="stop-color:#F33B3B"/>
+      <stop offset="1" style="stop-color:#D50000"/>
+    </linearGradient>
+    <circle cx="64" cy="64" r="60" style="fill:url(#SVGID_1_);"/>
+    <g style="opacity:0.2;">
+      <path d="M64,7c31.43,0,57,25.57,57,57s-25.57,57-57,57S7,95.43,7,64S32.57,7,64,7 M64,4 C30.86,4,4,30.86,4,64s26.86,60,60,60s60-26.86,60-60S97.14,4,64,4L64,4z" style="fill:#424242;"/>
+    </g>
+    <g style="opacity:0.2;">
+      <path d="M104,56c2.21,0,4,1.79,4,4v8c0,2.21-1.79,4-4,4H24c-2.21,0-4-1.79-4-4v-8c0-2.21,1.79-4,4-4H104 M104,53H24c-3.86,0-7,3.14-7,7v8c0,3.86,3.14,7,7,7h80c3.86,0,7-3.14,7-7v-8C111,56.14,107.86,53,104,53L104,53z" style="fill:#424242;"/>
+    </g>
+    <path d="M104,72H24c-2.21,0-4-1.79-4-4v-8c0-2.21,1.79-4,4-4h80c2.21,0,4,1.79,4,4v8 C108,70.21,106.21,72,104,72z" style="fill:#FAFAFA;"/>
+  </g>
+</svg>

js/mzta-compose-script.js

@@ -166,6 +166,19 @@ switch (message.command) {
 
   case "getTags":
     console.log(">>>>>>>>>>>>>> getTags: " + JSON.stringify(message.tags));
+
+    // These methods are also defined in the file /js/mzta-addatags-exclusion-list.js
+    async function addTags_getExclusionList() {
+      let prefs_excluded_tags = await browser.storage.local.get({add_tags_exclusions: []});
+      console.log(">>>>>>>>>>>>>>> addTags_getExclusionList prefs_excluded_tags: " + JSON.stringify(prefs_excluded_tags));
+      return prefs_excluded_tags.add_tags_exclusions;
+    }
+
+    function addTags_setExclusionList(add_tags_exclusions) {
+      browser.storage.local.set({add_tags_exclusions: add_tags_exclusions});
+    }
+    // ================================================================================
+
     // Create and append the styles
     const style = document.createElement('style');
     style.textContent = `
@@ -240,6 +253,16 @@ switch (message.command) {
         text-align: center;
       }
 
+      img.exclude-tag-icon{
+        width: 16px;
+        height: 16px;
+        margin-right: 2px;
+        margin-left: 2px;
+        position: relative;
+        top: 3px;
+        cursor: pointer;
+      }
+
       @media (prefers-color-scheme: dark) {
         :root {
           --dialog-bg-color: #2e2e2e;
@@ -266,17 +289,15 @@ switch (message.command) {
       // Parse the input string into labels
       const words = inputString.split(',').map(word => word.trim());
 
-      console.log(" >>>>>>>>>>>>> words: " + JSON.stringify(words));
+      console.log(">>>>>>>>>>>>> words: " + JSON.stringify(words));
 
       let prefs_tags = await browser.storage.sync.get({add_tags_hide_exclusions: false});
-      let prefs_excluded_tags = await browser.storage.local.get({add_tags_exclusions: []});
+      let add_tags_exclusions_list = await addTags_getExclusionList();
 
-      console.log(" >>>>>>>>>>>>> prefs_excluded_tags: " + JSON.stringify(prefs_excluded_tags));
+      console.log(">>>>>>>>>>>>> add_tags_exclusions_list: " + JSON.stringify(add_tags_exclusions_list));
-
-      // prefs_excluded_tags.add_tags_exclusions = ['recipient','test'];
 
       const words_final = words.map(word => {
-        const isExcluded = prefs_excluded_tags.add_tags_exclusions.some(exclusion => 
+        const isExcluded = add_tags_exclusions_list.some(exclusion => 
           word.includes(exclusion)
         );
       
@@ -286,7 +307,7 @@ switch (message.command) {
         };
       });
 
-      console.log(" >>>>>>>>>>>>> words_final: " + JSON.stringify(words_final));
+      console.log(">>>>>>>>>>>>> words_final: " + JSON.stringify(words_final));
 
       // Create the form
       const form = document.createElement('form');
@@ -298,7 +319,31 @@ switch (message.command) {
         checkbox.type = 'checkbox';
         checkbox.checked = true; // Checked by default
         checkbox.value = word.tag;
+        // Add an image to the checkbox label
+        const img = document.createElement('img');
+        img.src = browser.runtime.getURL("/images/exclude-tag.svg");
+        img.alt = browser.i18n.getMessage("addtags_exclude_tag");
+        img.title = browser.i18n.getMessage("addtags_exclude_tag");
+        img.className = 'exclude-tag-icon';
+        img.addEventListener('click', () => {
+          if (!label.classList.contains('tag_excluded')) {
+            label.classList.add('tag_excluded');
+            if (!add_tags_exclusions_list.includes(word.tag)) {
+              add_tags_exclusions_list.push(word.tag);
+              addTags_setExclusionList(add_tags_exclusions_list);
+            }
+          } else {
+            label.classList.remove('tag_excluded');
+            const idx = add_tags_exclusions_list.indexOf(word.tag);
+            if (idx > -1) {
+              add_tags_exclusions_list.splice(idx, 1);
+              addTags_setExclusionList(add_tags_exclusions_list);
+            }
+          }
+        });
+
         label.appendChild(checkbox);
+        label.appendChild(img);
         label.appendChild(document.createTextNode(` ${word.tag}`));
         if(!word.excluded || (word.excluded && !prefs_tags.add_tags_hide_exclusions)){
           form.appendChild(label);
@@ -316,6 +361,7 @@ switch (message.command) {
       // Add the close button
       const closeButton = document.createElement('button');
       closeButton.type = 'button';
+      closeButton.id = 'mzta_dialog_close';
       closeButton.textContent = 'Close';
       closeButton.className = 'mzta_dialog_btn mzta_dialog_btn_margin';
       closeButton.addEventListener('click', closeDialog);
@@ -324,6 +370,7 @@ switch (message.command) {
       // Add the submit button
       const submitButton = document.createElement('button');
       submitButton.type = 'button';
+      submitButton.id = 'mzta_dialog_submit';
       submitButton.textContent = 'Submit';
       submitButton.className = 'mzta_dialog_btn';
       submitButton.addEventListener('click', () => {
@@ -378,5 +425,5 @@ switch (message.command) {
     // do nothing
     return Promise.resolve(false);
     break;
-}    
+}
 });