From 7f43d0dd20e8f18497c2859f7e2841a52b5e6aa7 Mon Sep 17 00:00:00 2001
From: mic <m@micz.it>
Date: Sun, 22 Sep 2024 22:16:09 +0200
Subject: [PATCH] popup menu correctly working via shortcut and via mouse
 click. see #130

---
 mzta-background.js     | 28 +++++++++++++++++++++++++---
 popup/mzta-loading.svg | 10 ++++++++++
 popup/mzta-popup.css   |  2 +-
 popup/mzta-popup.html  |  3 ++-
 popup/mzta-popup.js    |  5 +++++
 5 files changed, 43 insertions(+), 5 deletions(-)
 create mode 100644 popup/mzta-loading.svg

diff --git a/mzta-background.js b/mzta-background.js
index 69953c6d..1f4c3643 100644
--- a/mzta-background.js
+++ b/mzta-background.js
@@ -90,6 +90,20 @@ async function handleShortcut(tab) {
     if(!["mail", "messageCompose","messageDisplay"].includes(tab.type)){
         return;
     }
+    switch (tab.type) {
+        case "mail":
+        case "messageDisplay":
+            browser.messageDisplayAction.openPopup();
+            break;
+        case "messageCompose":
+            browser.composeAction.openPopup();
+            break;
+        default:
+            break;
+    }    
+}
+
+async function preparePopupMenu(tab) {
     await taStore.setSessionData("lastShortcutTabId", tab.id);
     await taStore.setSessionData("lastShortcutTabType", tab.type);
     await taStore.setSessionData("lastShortcutPromptsData", menus.shortcutMenu);
@@ -98,13 +112,10 @@ async function handleShortcut(tab) {
         case "mail":
         case "messageDisplay":
             taStore.setSessionData("lastShortcutFiltering", 1);
-            browser.messageDisplayAction.openPopup();
             break;
         case "messageCompose":
             taStore.setSessionData("lastShortcutFiltering", 2);
-            browser.composeAction.openPopup();
             break;
-        
         default:
             break;
     }
@@ -187,14 +198,25 @@ messenger.runtime.onMessage.addListener(async (message, sender, sendResponse) =>
                 modified_html = await getOriginalBody(message.tabId);
                 await setBody(message.tabId, original_html);
                 await setBody(message.tabId, modified_html);
+                return true;
                 break;
             case 'reload_menus':
                 await menus.reload();
                 taLog.log("[ThunderAI] Reloaded menus");
+                return true;
                 break;
             case 'shortcut_do_prompt':
                 taLog.log("Executing shortcut, promptId: " + message.promptId);
                 menus.executeMenuAction(message.promptId);
+                return true;
+                break;
+            case 'popup_menu_ready':
+                let tabs = await browser.tabs.query({ active: true, currentWindow: true });
+                if(tabs.length == 0){
+                    return Promise.resolve(false);
+                }
+                preparePopupMenu(tabs[0]);
+                return Promise.resolve(true);
                 break;
             default:
                 break;
diff --git a/popup/mzta-loading.svg b/popup/mzta-loading.svg
new file mode 100644
index 00000000..27b59d6a
--- /dev/null
+++ b/popup/mzta-loading.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="shape-rendering: auto; display: block; background: transparent;" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><g><circle r="25" fill="#408ee0" cy="50" cx="25">
+  <animate begin="-0.5s" values="25;75;25" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite" attributeName="cx"></animate>
+</circle>
+<circle r="25" fill="#89bff8" cy="50" cx="75">
+  <animate begin="0s" values="25;75;25" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite" attributeName="cx"></animate>
+</circle>
+<circle r="25" fill="#408ee0" cy="50" cx="25">
+  <animate begin="-0.5s" values="25;75;25" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite" attributeName="cx"></animate>
+  <animate repeatCount="indefinite" dur="1s" keyTimes="0;0.499;0.5;1" calcMode="discrete" values="0;0;1;1" attributeName="fill-opacity"></animate>
+</circle><g></g></g><!-- [ldio] generated by https://loading.io --></svg>
\ No newline at end of file
diff --git a/popup/mzta-popup.css b/popup/mzta-popup.css
index ee31b6ca..a99ee179 100644
--- a/popup/mzta-popup.css
+++ b/popup/mzta-popup.css
@@ -31,7 +31,7 @@ body {
     font-size: 13px;
   }
 
-  ._spacer_div{
+  #_spacer_div{
       width: 100%;
       height: 2.1em;
   }
diff --git a/popup/mzta-popup.html b/popup/mzta-popup.html
index 061214a8..a7ad4126 100644
--- a/popup/mzta-popup.html
+++ b/popup/mzta-popup.html
@@ -9,8 +9,9 @@
 
 <body>
 <div id="mzta_search_banner">
-    <div class="_spacer_div">&nbsp;</div>
+    <div id="_spacer_div">&nbsp;</div>
     <input type="text" id="mzta_search_input" placeholder="__MSG_SearchPrompt__">
+    <div id="mzta_autocomplete-items-loading"><img src="mzta-loading.svg" title="__MSG_Loading__"></div>
     <div id="mzta_autocomplete-items" style="display: none;"></div>
 </div>
 <script src="mzta-popup.js" type="module"></script>
diff --git a/popup/mzta-popup.js b/popup/mzta-popup.js
index ace65e57..b6bf7e1f 100644
--- a/popup/mzta-popup.js
+++ b/popup/mzta-popup.js
@@ -19,6 +19,9 @@
 import { taStore } from "../js/mzta-store.js";
 
 document.addEventListener('DOMContentLoaded', async () => {
+    let reponse = await browser.runtime.sendMessage({command: "popup_menu_ready"});
+    console.log(">>>>>>>>>>>>>> reponse: " + JSON.stringify(reponse));
+
     let tabId = await taStore.getSessionData("lastShortcutTabId");
     let tabType = await taStore.getSessionData("lastShortcutTabType");
     let filtering = await taStore.getSessionData("lastShortcutFiltering");
@@ -36,6 +39,7 @@ async function searchPrompt(allPrompts, tabId, tabType){
 
  let input = document.getElementById('mzta_search_input');
  let autocompleteList = document.getElementById('mzta_autocomplete-items');
+ let autocompleteListLoading = document.getElementById('mzta_autocomplete-items-loading');
  let _spacer_div = document.getElementById('_spacer_div');
  let banner = document.getElementById('mzta_search_banner');
 
@@ -103,6 +107,7 @@ async function searchPrompt(allPrompts, tabId, tabType){
        autocompleteList.appendChild(itemDiv);
    });
 
+   autocompleteListLoading.style.display = 'none';
    autocompleteList.style.display = 'block';
    _spacer_div.style.display = 'block';
  });