BTHLABS-62: Display progress in extension popup

Co-authored-by: Tomek Wójcik <labs@tomekwojcik.pl>
Co-committed-by: Tomek Wójcik <labs@tomekwojcik.pl>

services/extension/src/background/main.js

@@ -164,7 +164,7 @@ const doHandleAuthFlow = (authTab) => {
       );
 
       const expectedSessionTabQuery = `?authSessionToken=${authSessionToken}`;
-      if (tabId !== currentAuthTabId && changedURL.includes(expectedSessionTabQuery)) {
+      if (tabId !== currentAuthTabId && changedURL && changedURL.includes(expectedSessionTabQuery)) {
         // When redirecting from the preauth page to the HotPocket instance,
         // Safari "replaces" the auth tab with a new one. This nasty hack will
         // allow the extension to keep track of it.
@@ -268,7 +268,7 @@ const doSetupRPC = async () => {
 };
 
 const doSendTabMessage = (tab, message) => {
-  HotPocketExtension.api.tabs.sendMessage(tab.id, message).
+  return HotPocketExtension.api.tabs.sendMessage(tab.id, message).
     then((result) => {
       HotPocketExtension.LOGGER.debug(
         'HotPocketExtension.background.doSendTabMessage(): message sent',
@@ -327,6 +327,10 @@ const onBrowserActionClicked = async (tab) => {
   let result = false;
   let error = null;
 
+  await doSendTabMessage(tab, {
+    type: 'HotPocket:Extension:browserActionClicked',
+  });
+
   try {
     let accessToken = await doSetupRPC();
 
@@ -348,7 +352,7 @@ const onBrowserActionClicked = async (tab) => {
     error: error,
   };
 
-  doSendTabMessage(tab, message);
+  return await doSendTabMessage(tab, message);
 };
 
 const onMessage = (message, sender, sendResponse) => {

services/extension/src/content/main.js

@@ -1,6 +1,7 @@
 import HotPocketExtension from '../common';
 
 import POPUP from './templates/popup.html';
+import POPUP_CONTENT_SAVING from './templates/popup_content_saving.html';
 import POPUP_CONTENT_SUCCESS from './templates/popup_content_success.html';
 import POPUP_CONTENT_ERROR from './templates/popup_content_error.html';
 
@@ -18,6 +19,19 @@ class Popup {
       this.timeout = null;
     }
   };
+  setContent = (content) => {
+    const shadow = this.container.shadowRoot;
+
+    const body = shadow.querySelector('.hotpocket-extension-popup-body');
+    body.innerHTML = content;
+
+    const i18nElements = shadow.querySelectorAll('[data-message]');
+    for (let i18nElement of i18nElements) {
+      i18nElement.innerHTML = HotPocketExtension.api.i18n.getMessage(
+        i18nElement.dataset.message,
+      );
+    }
+  };
   close = () => {
     this.clearCloseTimeout();
 
@@ -36,15 +50,7 @@ class Popup {
     const shadow = this.container.attachShadow({mode: 'open'});
     shadow.innerHTML = POPUP;
 
-    const body = shadow.querySelector('.hotpocket-extension-popup-body');
-    body.innerHTML = content;
-
-    const i18nElements = shadow.querySelectorAll('[data-message]');
-    for (let i18nElement of i18nElements) {
-      i18nElement.innerHTML = HotPocketExtension.api.i18n.getMessage(
-        i18nElement.dataset.message,
-      );
-    }
+    this.setContent(content);
 
     const closeElements = shadow.querySelectorAll('.hotpocket-extension-popup-close');
     for (const closeElement of closeElements) {
@@ -53,6 +59,9 @@ class Popup {
 
     document.body.appendChild(this.container);
   };
+  update = (content) => {
+    this.setContent(content);
+  };
   onCloseClick = (event) => {
     this.close();
   };
@@ -60,15 +69,27 @@ class Popup {
 
 let currentPopup = null;
 
-const doHandleSaveMessage = (message) => {
+const doHandleBrowserActionClickedMessage = (message) => {
   if (currentPopup !== null) {
     currentPopup.close();
   }
 
   currentPopup = new Popup();
-  currentPopup.show(
-    (message.result === true) ? POPUP_CONTENT_SUCCESS : POPUP_CONTENT_ERROR,
-  );
+  currentPopup.show(POPUP_CONTENT_SAVING);
+};
+
+const doHandleSaveMessage = (message) => {
+  let content = POPUP_CONTENT_ERROR;
+  if (message.result === true) {
+    content = POPUP_CONTENT_SUCCESS;
+  }
+
+  if (currentPopup === null) {
+    currentPopup = new Popup();
+    currentPopup.show(content);
+  } else {
+    currentPopup.update(content);
+  }
 };
 
 const doSendMessage = (message) => {
@@ -93,7 +114,9 @@ export default ({...configuration}) => {
 
     let response = {ok: true};
     try {
-      if (message.type === 'HotPocket:Extension:save') {
+      if (message.type === 'HotPocket:Extension:browserActionClicked') {
+        doHandleBrowserActionClickedMessage(message);
+      } else if (message.type === 'HotPocket:Extension:save') {
         doHandleSaveMessage(message);
       }
     } catch (exception) {

services/extension/src/content/templates/popup.html

@@ -58,6 +58,9 @@
 .hotpocket-extension-popup .hotpocket-extension-popup-body > * {
   margin: 0px;
 }
+.hotpocket-extension-popup .hotpocket-extension-popup-body > .hotpocket-extension-popup-loader {
+  margin: 0px auto;
+}
 .hotpocket-extension-popup .hotpocket-extension-popup-body strong {
   font-weight: 600;
 }
@@ -67,6 +70,33 @@
 .hotpocket-extension-popup .hotpocket-extension-popup-message-error {
   color: #EE6476;
 }
+.hotpocket-extension-popup-loader {
+  animation: hotpocket-extension-popup-loader-animation 1s infinite steps(12);
+  aspect-ratio: 1;
+  background:
+    linear-gradient(0deg ,rgb(240 240 240/50%) 30%,#0000 0 70%,rgb(240 240 240/100%) 0) 50%/8% 100%,
+    linear-gradient(90deg,rgb(240 240 240/25%) 30%,#0000 0 70%,rgb(240 240 240/75% ) 0) 50%/100% 8%;
+  background-repeat: no-repeat;
+  border-radius: 50%;
+  display: grid;
+  width: 32px;
+}
+.hotpocket-extension-popup-loader::before,
+.hotpocket-extension-popup-loader::after {
+   background: inherit;
+   border-radius: 50%;
+   content: "";
+   grid-area: 1/1;
+   opacity: 0.915;
+   transform: rotate(30deg);
+}
+.hotpocket-extension-popup-loader::after {
+   opacity: 0.83;
+   transform: rotate(60deg);
+}
+@keyframes hotpocket-extension-popup-loader-animation {
+  100% {transform: rotate(1turn)}
+}
 </style>
 <div class="hotpocket-extension-popup">
   <div class="hotpocket-extension-popup-header">

services/extension/src/content/templates/popup_content_saving.html

@@ -0,0 +1 @@
+<div class="hotpocket-extension-popup-loader"></div>