Update popup content dynamically

.eslintrc

@@ -122,6 +122,8 @@
         "importScripts": "readonly",
         "IMPROVED_DETECTION_PREDEFINED_SITELIST": "readonly",
         "initColorTheme": "readonly",
+        "initializeHttpAuthLoginList": "readonly",
+        "initializeLoginList": "readonly",
         "isEdge": "readonly",
         "isFirefox": "readonly",
         "keepass": "readonly",
@@ -164,9 +166,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",

dist/manifest_chromium.json

@@ -118,7 +118,7 @@
         "choose_credential_fields": {
             "description": "__MSG_popupChooseCredentialsText__"
         },
-        "retrive_credentials_forced": {
+        "retrieve_credentials_forced": {
             "description": "__MSG_popupReopenButton__"
         },
         "request_autotype": {

dist/manifest_firefox.json

@@ -131,7 +131,7 @@
         "choose_credential_fields": {
             "description": "__MSG_popupChooseCredentialsText__"
         },
-        "retrive_credentials_forced": {
+        "retrieve_credentials_forced": {
             "description": "__MSG_popupReopenButton__"
         },
         "request_autotype": {

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 && tab?.id) {
-        browserActionWrapper.setPopup({
-            tabId: tab.id,
-            popup: `popups/${popupData.popup}.html`
-        });
-
         let badgeText = '';
-        if (popupData.popup === 'popup_login') {
+        if (popupData.popup === PopupState.LOGIN) {
             badgeText = page.tabs[tab.id]?.loginList?.length;
-        } else if (popupData.popup === 'popup_httpauth') {
+        } else if (popupData.popup === PopupState.HTTP_AUTH) {
             badgeText = 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, 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, page.tabs[tab.id]?.loginList?.logins?.length);
+    }
+
+    await browserAction.updatePopupIcon(tab, popupData);
 };
 
 browserAction.setBadgeText = function(tabId, badgeText) {
@@ -73,7 +76,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,13 +154,13 @@ kpxcEvent.onRemoveCredentialsFromTabInformation = async function(tab) {
 
 kpxcEvent.onLoginPopup = async function(tab, logins) {
     const popupData = {
-        iconType: 'normal',
-        popup: 'popup_login'
+        iconType: PopupIcon.NORMAL,
+        popup: PopupState.LOGIN
     };
 
     if (tab?.id) {
         page.tabs[tab.id].loginList = logins;
-        await browserAction.show(tab, popupData);
+        await browserAction.updatePopupIcon(tab, popupData);
     }
 };
 
@@ -170,12 +170,14 @@ 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);
+    if (tab?.id) {
+        page.tabs[tab.id].loginList = data;
+        await browserAction.updatePopupIcon(tab, popupData);
+    }
 };
 
 kpxcEvent.onUsernameFieldDetected = async function(tab, detected) {

keepassxc-browser/background/init.js

@@ -82,7 +82,7 @@ const initListeners = async function() {
         }
 
         if (changeInfo.status === 'complete' && tab?.id) {
-            browserAction.showDefault(tab);
+            browserAction.updatePopup(tab);
             if (!page.tabs[tab.id]) {
                 page.createTabEntry(tab.id);
             }
@@ -115,7 +115,7 @@ const initListeners = async function() {
         if (contextMenuItems.some(e => e.action === command)
             || command === 'redetect_fields'
             || command === 'choose_credential_fields'
-            || command === 'retrive_credentials_forced'
+            || command === 'retrieve_credentials_forced'
             || command === 'reload_extension') {
             const tab = await getCurrentTab();
             if (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 [];
         }
 
@@ -623,7 +623,7 @@ keepass.passkeysRegister = async function(tab, args = []) {
             return response;
         }
 
-        browserAction.showDefault(tab);
+        browserAction.updatePopup(tab);
         return [];
     } catch (err) {
         logError(`passkeysRegister failed: ${err}`);
@@ -635,7 +635,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 [];
         }
 
@@ -656,7 +656,7 @@ keepass.passkeysGet = async function(tab, args = []) {
             return response;
         }
 
-        browserAction.showDefault(tab);
+        browserAction.updatePopup(tab);
         return [];
     } catch (err) {
         logError(`passkeysGet failed: ${err}`);
@@ -851,7 +851,11 @@ keepass.checkDatabaseHash = async function(tab) {
 };
 
 keepass.isAssociated = function() {
-    return (keepass.associated.value && keepass.associated.hash && keepass.associated.hash === keepass.databaseHash);
+    if (!keepass.associated.value || keepass.associated.hash === '') {
+        return false;
+    }
+
+    return keepass.associated.hash === keepass.databaseHash;
 };
 
 keepass.setcurrentKeePassXCVersion = function(version) {
@@ -910,7 +914,7 @@ keepass.handleError = function(tab, errorCode, errorMessage = '') {
 
 keepass.updatePopup = function() {
     if (page && page.tabs.length > 0) {
-        browserAction.showDefault();
+        browserAction.updatePopup();
     }
 };