Update popup content dynamically

.eslintrc

@@ -120,6 +120,8 @@
         "importScripts": "readonly",
         "IMPROVED_DETECTION_PREDEFINED_SITELIST": "readonly",
         "initColorTheme": "readonly",
+        "initializeHttpAuthLoginList": "readonly",
+        "initializeLoginList": "readonly",
         "isEdge": "readonly",
         "isFirefox": "readonly",
         "keepass": "readonly",
@@ -162,9 +164,12 @@
         "ORANGE_BUTTON": "readonly",
         "page": "readonly",
         "Pixels": "readonly",
-        "PublicKeyCredential": "readonly",
+        "PopupIcon": "readonly",
+        "PopupState": "readonly",
         "PREDEFINED_SITELIST": "readonly",
+        "PublicKeyCredential": "readonly",
         "RED_BUTTON": "readonly",
+        "removeAllChildren": "readonly",
         "retrieveColorScheme": "readonly",
         "sendMessage": "readonly",
         "showNotification": "readonly",

keepassxc-browser/background/browserAction.js

@@ -3,7 +3,7 @@
 const browserActionWrapper = browser.action || browser.browserAction;
 const browserAction = {};
 
-browserAction.show = async function(tab, popupData) {
+browserAction.updatePopupIcon = async function(tab, popupData) {
     popupData ??= page.popupData;
     page.popupData = popupData;
 
@@ -12,38 +12,33 @@ browserAction.show = async function(tab, popupData) {
     });
 
     if (popupData.popup) {
-        browserActionWrapper.setPopup({
-            tabId: tab.id,
-            popup: `popups/${popupData.popup}.html`
-        });
-
         let badgeText = '';
-        if (popupData.popup === 'popup_login') {
+        if (popupData.popup === PopupState.LOGIN) {
             badgeText = String(page.tabs[tab.id]?.loginList?.length);
-        } else if (popupData.popup === 'popup_httpauth') {
+        } else if (popupData.popup === PopupState.HTTP_AUTH) {
             badgeText = String(page.tabs[tab.id]?.loginList?.logins?.length);
         }
 
         browserAction.setBadgeText(tab?.id, badgeText);
     }
 };
 
-browserAction.showDefault = async function(tab) {
+browserAction.updatePopup = async function(tab) {
     const popupData = {
-        iconType: 'normal',
-        popup: 'popup'
+        iconType: PopupIcon.NORMAL,
+        popup: PopupState.DEFAULT
     };
 
     const response = await keepass.isConfigured().catch((err) => {
         logError('Cannot show default popup: ' + err);
     });
 
     if (!response && !keepass.isKeePassXCAvailable) {
-        popupData.iconType = 'cross';
+        popupData.iconType = PopupIcon.CROSS;
     } else if (!keepass.isAssociated() && !keepass.isDatabaseClosed) {
-        popupData.iconType = 'bang';
+        popupData.iconType = PopupIcon.BANG;
     } else if (keepass.isKeePassXCAvailable && keepass.isDatabaseClosed) {
-        popupData.iconType = 'locked';
+        popupData.iconType = PopupIcon.LOCKED;
     }
 
     // Get the current tab if no tab given
@@ -52,13 +47,21 @@ browserAction.showDefault = async function(tab) {
         return;
     }
 
+    // Credentials are available
     if (page.tabs[tab.id]?.loginList.length > 0) {
-        popupData.iconType = 'normal';
-        popupData.popup = 'popup_login';
+        popupData.iconType = PopupIcon.NORMAL;
+        popupData.popup = PopupState.LOGIN;
         browserAction.setBadgeText(tab?.id, String(page.tabs[tab.id]?.loginList.length));
     }
 
-    await browserAction.show(tab, popupData);
+    // HTTP Basic Auth credentials are available
+    if (page.tabs[tab.id]?.loginList?.logins?.length > 0) {
+        popupData.iconType = PopupIcon.NORMAL;
+        popupData.popup = PopupState.HTTP_AUTH;
+        browserAction.setBadgeText(tab?.id, String(page.tabs[tab.id]?.loginList?.logins?.length));
+    }
+
+    await browserAction.updatePopupIcon(tab, popupData);
 };
 
 browserAction.updateIcon = async function(tab, iconType) {
@@ -84,7 +87,7 @@ browserAction.setBadgeText = function(tabId, badgeText) {
 browserAction.generateIconName = async function(iconType) {
     let name = 'icon_';
     name += (await keepass.keePassXCUpdateAvailable()) ? 'new_' : '';
-    name += (!iconType || iconType === 'normal') ? 'normal' : iconType;
+    name += (!iconType || iconType === PopupIcon.NORMAL) ? PopupIcon.NORMAL : iconType;
 
     let style = 'colored';
     if (page.settings.useMonochromeToolbarIcon) {

keepassxc-browser/background/client.js

@@ -398,7 +398,7 @@ function onDisconnected() {
     keepass.databaseHash = '';
 
     page.clearAllLogins();
-    keepass.updatePopup('cross');
+    keepass.updatePopup(PopupIcon.CROSS);
     keepass.updateDatabaseHashToContent();
     logError(`Failed to connect: ${(browser.runtime.lastError === null ? 'Unknown error' : browser.runtime.lastError.message)}`);
 }

keepassxc-browser/background/event.js

@@ -21,7 +21,7 @@ kpxcEvent.showStatus = async function(tab, configured, internalPoll) {
     }
 
     if (!internalPoll) {
-        browserAction.showDefault(tab);
+        browserAction.updatePopup(tab);
     }
 
     const errorMessage = page.tabs[tab.id]?.errorMessage ?? undefined;
@@ -30,14 +30,14 @@ kpxcEvent.showStatus = async function(tab, configured, internalPoll) {
 
     return {
         associated: keepass.isAssociated(),
-
         configured: configured,
         databaseClosed: keepass.isDatabaseClosed,
         encryptionKeyUnrecognized: keepass.isEncryptionKeyUnrecognized,
         error: errorMessage,
         iframeDetected: iframeDetected,
         identifier: keyId,
         keePassXCAvailable: keepass.isKeePassXCAvailable,
+        popupData: page.popupData,
         showGettingStartedGuideAlert: page.settings.showGettingStartedGuideAlert,
         showTroubleshootingGuideAlert: page.settings.showTroubleshootingGuideAlert,
         usernameFieldDetected: usernameFieldDetected
@@ -154,12 +154,12 @@ kpxcEvent.onRemoveCredentialsFromTabInformation = async function(tab) {
 
 kpxcEvent.onLoginPopup = async function(tab, logins) {
     const popupData = {
-        iconType: 'normal',
-        popup: 'popup_login'
+        iconType: PopupIcon.NORMAL,
+        popup: PopupState.LOGIN
     };
 
     page.tabs[tab.id].loginList = logins;
-    await browserAction.show(tab, popupData);
+    await browserAction.updatePopupIcon(tab, popupData);
 };
 
 kpxcEvent.initHttpAuth = async function() {
@@ -168,12 +168,12 @@ kpxcEvent.initHttpAuth = async function() {
 
 kpxcEvent.onHTTPAuthPopup = async function(tab, data) {
     const popupData = {
-        iconType: 'normal',
-        popup: 'popup_httpauth'
+        iconType: PopupIcon.NORMAL,
+        popup: PopupState.HTTP_AUTH
     };
 
     page.tabs[tab.id].loginList = data;
-    await browserAction.show(tab, popupData);
+    await browserAction.updatePopupIcon(tab, popupData);
 };
 
 kpxcEvent.onUsernameFieldDetected = async function(tab, detected) {

keepassxc-browser/background/init.js

@@ -80,7 +80,7 @@ browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
     }
 
     if (changeInfo.status === 'complete') {
-        browserAction.showDefault(tab);
+        browserAction.updatePopup(tab);
         if (!page.tabs[tab.id]) {
             page.createTabEntry(tab.id);
         }

keepassxc-browser/background/keepass.js

@@ -55,7 +55,7 @@ keepass.updateCredentials = async function(tab, args = []) {
         const [ entryId, username, password, url, group, groupUuid ] = args;
         const taResponse = await keepass.testAssociation(tab);
         if (!taResponse) {
-            browserAction.showDefault(tab);
+            browserAction.updatePopup(tab);
             return [];
         }
 
@@ -108,7 +108,7 @@ keepass.retrieveCredentials = async function(tab, args = []) {
         const [ url, submiturl, triggerUnlock = false, httpAuth = false ] = args;
         const taResponse = await keepass.testAssociation(tab, [ false, triggerUnlock ]);
         if (!taResponse) {
-            browserAction.showDefault(tab);
+            browserAction.updatePopup(tab);
             return [];
         }
 
@@ -145,14 +145,14 @@ keepass.retrieveCredentials = async function(tab, args = []) {
 
             if (entries.length === 0) {
                 // Questionmark-icon is not triggered, so we have to trigger for the normal symbol
-                browserAction.showDefault(tab);
+                browserAction.updatePopup(tab);
             }
 
             logDebug(`Found ${entries.length} entries for url ${url}`);
             return entries;
         }
 
-        browserAction.showDefault(tab);
+        browserAction.updatePopup(tab);
         return [];
     } catch (err) {
         logError(`retrieveCredentials failed: ${err}`);
@@ -168,7 +168,7 @@ keepass.generatePassword = async function(tab) {
     try {
         const taResponse = await keepass.testAssociation(tab);
         if (!taResponse) {
-            browserAction.showDefault(tab);
+            browserAction.updatePopup(tab);
             return '';
         }
 
@@ -235,7 +235,7 @@ keepass.associate = async function(tab) {
             keepass.associated.value = true;
             keepass.associated.hash = response.hash || 0;
 
-            browserAction.showDefault(tab);
+            browserAction.updatePopup(tab);
             return AssociatedAction.NEW_ASSOCIATION;
         }
 
@@ -468,7 +468,7 @@ keepass.getDatabaseGroups = async function(tab) {
     try {
         const taResponse = await keepass.testAssociation(tab, [ false ]);
         if (!taResponse) {
-            browserAction.showDefault(tab);
+            browserAction.updatePopup(tab);
             return [];
         }
 
@@ -495,7 +495,7 @@ keepass.getDatabaseGroups = async function(tab) {
             return groups;
         }
 
-        browserAction.showDefault(tab);
+        browserAction.updatePopup(tab);
         return [];
     } catch (err) {
         logError(`getDatabaseGroups failed: ${err}`);
@@ -508,7 +508,7 @@ keepass.createNewGroup = async function(tab, args = []) {
         const [ groupName ] = args;
         const taResponse = await keepass.testAssociation(tab, [ false ]);
         if (!taResponse) {
-            browserAction.showDefault(tab);
+            browserAction.updatePopup(tab);
             return [];
         }
 
@@ -534,7 +534,7 @@ keepass.createNewGroup = async function(tab, args = []) {
             logError('getDatabaseGroups rejected');
         }
 
-        browserAction.showDefault(tab);
+        browserAction.updatePopup(tab);
         return [];
     } catch (err) {
         logError(`createNewGroup failed: ${err}`);
@@ -602,7 +602,7 @@ keepass.passkeysRegister = async function(tab, args = []) {
     try {
         const taResponse = await keepass.testAssociation(tab, [ false ]);
         if (!taResponse || !keepass.isConnected || args.length < 2) {
-            browserAction.showDefault(tab);
+            browserAction.updatePopup(tab);
             return [];
         }
 
@@ -625,7 +625,7 @@ keepass.passkeysRegister = async function(tab, args = []) {
             return response;
         }
 
-        browserAction.showDefault(tab);
+        browserAction.updatePopup(tab);
         return [];
     } catch (err) {
         logError(`passkeysRegister failed: ${err}`);
@@ -637,7 +637,7 @@ keepass.passkeysGet = async function(tab, args = []) {
     try {
         const taResponse = await keepass.testAssociation(tab, [ false ]);
         if (!taResponse || !keepass.isConnected || args.length < 2) {
-            browserAction.showDefault(tab);
+            browserAction.updatePopup(tab);
             return [];
         }
 
@@ -658,7 +658,7 @@ keepass.passkeysGet = async function(tab, args = []) {
             return response;
         }
 
-        browserAction.showDefault(tab);
+        browserAction.updatePopup(tab);
         return [];
     } catch (err) {
         logError(`passkeysGet failed: ${err}`);
@@ -912,7 +912,7 @@ keepass.handleError = function(tab, errorCode, errorMessage = '') {
 
 keepass.updatePopup = function() {
     if (page && page.tabs.length > 0) {
-        browserAction.showDefault();
+        browserAction.updatePopup();
     }
 };
 

keepassxc-browser/background/page.js

@@ -53,8 +53,8 @@ page.submittedCredentials = {};
 page.tabs = [];
 
 page.popupData = {
-    iconType: 'normal',
-    popup: 'popup'
+    iconType: PopupIcon.NORMAL,
+    popup: PopupState.DEFAULT
 };
 
 page.initSettings = async function() {
@@ -92,7 +92,7 @@ page.initOpenedTabs = async function() {
         }
 
         page.currentTabId = currentTab.id;
-        browserAction.showDefault(currentTab);
+        browserAction.updatePopup(currentTab);
     } catch (err) {
         logError('page.initOpenedTabs error: ' + err);
         return Promise.reject();
@@ -128,7 +128,7 @@ page.switchTab = async function(tab) {
         }
     }, page.settings.clearCredentialsTimeout * 1000);
 
-    browserAction.showDefault(tab);
+    browserAction.updatePopup(tab);
     browser.tabs.sendMessage(tab.id, { action: 'activated_tab' }).catch((e) => {
         logError('Cannot send activated_tab message: ' + e.message);
     });
@@ -334,7 +334,7 @@ page.updateContextMenu = async function(tab, credentials) {
 };
 
 page.updatePopup = function(tab) {
-    browserAction.showDefault(tab);
+    browserAction.updatePopup(tab);
 };
 
 page.setAllowIframes = async function(tab, args = []) {