Show the group name in autocomplete (#739)

Show the group name in autocomplete

keepassxc-browser/_locales/en/messages.json

@@ -607,6 +607,10 @@
         "message": "Activate autocomplete for username fields.",
         "description": "Activate autocomplete for username fields checkbox text."
     },
+    "optionsCheckboxShowGroupNameInAutocomplete": {
+        "message": "Display the group name in autocomplete list when credentials are from different groups.",
+        "description": "Show group name in autocomplete checkbox text."
+    },
     "optionsCheckboxAutoSubmit": {
         "message": "Auto-submit login forms",
         "description": "Auto-submit checkbox text."
@@ -719,6 +723,10 @@
         "message": "Show a dropdown list containing available credentials for all username fields on a page.",
         "description": "Autocomplete Usernames option help text."
     },
+    "optionsShowGroupNameInAutocompleteHelpText": {
+        "message": "When credentials are returned from different groups, the group name will be shown.",
+        "description": "Show group name in autocomplete help text."
+    },
     "optionsShowNotificationsHelpText": {
         "message": "Show notifications for errors and when user interaction is required.",
         "description": "Show notifications option help text."

keepassxc-browser/background/page.js

@@ -2,6 +2,7 @@
 
 const defaultSettings = {
     autoCompleteUsernames: true,
+    showGroupNameInAutocomplete: true,
     autoFillAndSend: false,
     autoFillSingleEntry: false,
     autoReconnect: false,
@@ -41,6 +42,10 @@ page.initSettings = async function() {
             page.settings.autoCompleteUsernames = defaultSettings.autoCompleteUsernames;
         }
 
+        if (!('showGroupNameInAutocomplete' in page.settings)) {
+            page.settings.showGroupNameInAutocomplete = defaultSettings.showGroupNameInAutocomplete;
+        }
+
         if (!('autoFillAndSend' in page.settings)) {
             page.settings.autoFillAndSend = defaultSettings.autoFillAndSend;
         }

keepassxc-browser/content/keepassxc-browser.js

@@ -1121,19 +1121,28 @@ kpxc.preparePageForMultipleCredentials = function(credentials) {
         return;
     }
 
-    function getLoginText(credential) {
+    function getLoginText(credential, withGroup) {
+        const group = (withGroup && credential.group) ? `[${credential.group}] ` : '';
         const visibleLogin = (credential.login.length > 0) ? credential.login : tr('credentialsNoUsername');
+        const text = `${group}${credential.name} (${visibleLogin})`;
         if (credential.expired && credential.expired === 'true') {
-            return `${visibleLogin} (${credential.name}) [${tr('credentialExpired')}]`;
+            return `${text} [${tr('credentialExpired')}]`;
         }
-        return `${visibleLogin} (${credential.name})`;
+        return text;
+    }
+
+    function getUniqueGroupCount(credentials) {
+        const groups = credentials.map(c => c.group || '')
+        const uniqueGroups = new Set(groups)
+        return uniqueGroups.size
     }
 
     // Add usernames + descriptions to autocomplete-list and popup-list
     const usernames = [];
     kpxcAutocomplete.elements = [];
+    const showGroupNameInAutocomplete = kpxc.settings.showGroupNameInAutocomplete && (getUniqueGroupCount(credentials) > 1)
     for (let i = 0; i < credentials.length; i++) {
-        const loginText = getLoginText(credentials[i]);
+        const loginText = getLoginText(credentials[i], showGroupNameInAutocomplete);
         usernames.push(loginText);
 
         const item = {

keepassxc-browser/options/options.html

@@ -157,6 +157,14 @@
             <span class="help-block" data-i18n="optionsAutocompleteUsernamesHelpText"></span>
           </div>
         </p>
+        <p>
+          <div class="checkbox">
+            <label class="checkbox">
+              <input type="checkbox" name="showGroupNameInAutocomplete" value="true" /><span data-i18n="optionsCheckboxShowGroupNameInAutocomplete"></span>
+            </label>
+            <span class="help-block" data-i18n="optionsShowGroupNameInAutocompleteHelpText"></span>
+          </div>
+        </p>
         <hr />
         <p>
           <div class="checkbox">