Merge pull request #614 from keepassxreboot/fix/150

Fixes for the latest major release

keepassxc-browser/_locales/en/messages.json

@@ -555,6 +555,10 @@
         "message": "Activate password generator icons.",
         "description": "Activate password generator icons checkbox text."
     },
+    "optionsCheckboxUsernameIcons": {
+        "message": "Activate username field icons.",
+        "description": "Activate username field icons textbox text."
+    },
     "optionsCheckboxAutoRetrieveCredentials": {
         "message": "Automatically retrieve credentials.",
         "description": "Automatically retrieve credentials checkbox text."
@@ -631,6 +635,10 @@
         "message": "Passwords are generated by KeePassXC using your password generation profile.",
         "description": "Password Generator option help text, second part."
     },
+    "optionsShowLoginFormIconHelpText": {
+        "message": "Adds an icon to username fields for filling credentials with a single mouse click.",
+        "description": "Username field icon option help text."
+    },
     "optionsAutoRetrieveCredentialsHelpText": {
         "message": "KeePassXC-Browser will immediately retrieve credentials when a tab is activated.",
         "description": "Auto-Retrive Credentials option help text."

keepassxc-browser/background/page.js

@@ -10,6 +10,7 @@ const defaultSettings = {
     autoRetrieveCredentials: true,
     showNotifications: true,
     showLoginNotifications: true,
+    showLoginFormIcon: true,
     saveDomainOnly: true,
     autoReconnect: false,
     defaultGroup: '',
@@ -57,6 +58,9 @@ page.initSettings = async function() {
         if (!('showLoginNotifications' in page.settings)) {
             page.settings.showLoginNotifications = defaultSettings.showLoginNotifications;
         }
+        if (!('showLoginFormIcon' in page.settings)) {
+            page.settings.showLoginFormIcon = defaultSettings.showLoginFormIcon;
+        }
         if (!('saveDomainOnly' in page.settings)) {
             page.settings.saveDomainOnly = defaultSettings.saveDomainOnly;
         }

keepassxc-browser/content/banner.js

@@ -72,7 +72,7 @@ kpxcBanner.create = async function(credentials = {}) {
     const updateButton = kpxcUI.createElement('button', 'kpxc-button kpxc-orange-button', { 'id': 'kpxc-banner-btn-update' }, tr('popupButtonUpdate'));
     const dismissButton = kpxcUI.createElement('button', 'kpxc-button kpxc-red-button', { 'id': 'kpxc-banner-btn-dismiss' }, tr('popupButtonDismiss'));
 
-    const separator = kpxcUI.createElement('div', 'separator');
+    const separator = kpxcUI.createElement('div', 'kpxc-separator');
     const ignoreCheckbox = kpxcUI.createElement('input', 'kpxc-checkbox', { type: 'checkbox', name: 'ignoreCheckbox' });
     const checkboxLabel = kpxcUI.createElement('label', 'kpxc-checkbox-label', { for: 'ignoreCheckbox' }, tr('popupButtonIgnore'));
 

keepassxc-browser/content/keepassxc-browser.js

@@ -447,7 +447,9 @@ kpxcFields.getUsernameField = function(passwordId, checkDisabled) {
                 return true; // Continue
             }
 
-            kpxcUsernameField.initField(usernameField);
+            if (kpxc.settings.showLoginFormIcon) {
+                kpxcUsernameField.initField(usernameField);
+            }
             usernameField = i;
         }
     } else {
@@ -561,7 +563,9 @@ kpxcFields.prepareCombinations = async function(combinations) {
             args: [ true ]
         });
 
-        kpxcUsernameField.initField(usernameField, res.databaseClosed);
+        if (kpxc.settings.showLoginFormIcon) {
+            kpxcUsernameField.initField(usernameField, res.databaseClosed);
+        }
 
         // Initialize form-submit for remembering credentials
         if (field) {

keepassxc-browser/content/username-field.js

@@ -54,7 +54,16 @@ const createIcon = function(target, databaseClosed) {
 
     const field = target;
     const className = getIconClassName(databaseClosed);
-    const size = (field.offsetHeight > 28) ? 24 : 16;
+
+    // Size the icon dynamically, but not greater than 24 or smaller than 14
+    const size = Math.max(Math.min(24, field.offsetHeight - 4), 14);
+    
+    // Don't create the icon if the input field is too small
+    if (field.offsetWidth < (size * 1.5) || field.offsetHeight < size) {
+        kpxcUsernameField.observer.unobserve(field);
+        return;
+    }
+
     let offset = Math.floor((field.offsetHeight - size) / 3);
     offset = (offset < 0) ? 0 : offset;
 

keepassxc-browser/css/banner.css

@@ -65,7 +65,7 @@ div.kpxc-banner .kpxc-banner-icon-moz {
     background-size: contain;
 }
 
-.separator {
+.kpxc-separator {
     border-left: 1px solid #ccc;
     height: 100% !important;
     margin: 10px !important;

keepassxc-browser/options/options.html

@@ -63,6 +63,16 @@
           </div>
         </p>
         <hr />
+        <p>
+            <div class="checkbox">
+              <label class="checkbox">
+                <input type="checkbox" name="showLoginFormIcon" value="true"/><span data-i18n="optionsCheckboxUsernameIcons"></span>
+              </label>
+              <span class="help-block">
+                <span data-i18n="optionsShowLoginFormIconHelpText"></span>
+              </span>
+            </div>
+          </p>
         <p>
           <div class="checkbox">
             <label class="checkbox">