Merge pull request #1666 from keepassxreboot/fix/change_improved_field_detection_as_optional

Change Improved Input Field Detection as optional

6 files changed, 44 insertions, 18 deletions

diff --git a/keepassxc-browser/_locales/en/messages.json b/keepassxc-browser/_locales/en/messages.json
index a38d888..9e64a04 100644
--- a/keepassxc-browser/_locales/en/messages.json
+++ b/keepassxc-browser/_locales/en/messages.json
@@ -951,6 +951,10 @@
         "message": "Username-only Detection",
         "description": "Site preferences list column title."
     },
+    "optionsColumnImprovedInputFieldDetection": {
+        "message": "Improved Input Field Detection",
+        "description": "Improved Input Field Detection column text."
+    },
     "optionsColumnDelete": {
         "message": "Delete",
         "description": "Site preferences list column title."
@@ -1067,6 +1071,10 @@
         "message": "Username-only detection allows KeePassXC-Browser to fill in login details on websites with separate pages for username and password.",
         "description": "Site preferences info text, fourth part."
     },
+    "optionsSitePreferencesImprovedInputFieldDetectionHelpText": {
+        "message": "Improved Input Field Detection allows more detailed dynamic input field detection. However, it might affect the page performance. Use with caution.",
+        "description": "Improved Input Field Detection help text."
+    },
     "optionsSitePreferencesManualAddText": {
         "message": "Add URL manually",
         "description": "Label for adding site manually on Site preferences tab."
diff --git a/keepassxc-browser/content/keepassxc-browser.js b/keepassxc-browser/content/keepassxc-browser.js
index f67e471..dd3a76e 100755
--- a/keepassxc-browser/content/keepassxc-browser.js
+++ b/keepassxc-browser/content/keepassxc-browser.js
@@ -20,6 +20,7 @@ kpxc.combinations = [];
 kpxc.credentials = [];
 kpxc.databaseState = DatabaseState.DISCONNECTED;
 kpxc.detectedFields = 0;
+kpxc.improvedFieldDetectionEnabledForPage = false;
 kpxc.inputs = [];
 kpxc.settings = {};
 kpxc.singleInputEnabledForPage = false;
@@ -682,6 +683,7 @@ kpxc.siteIgnored = async function(condition) {
                 }
 
                 kpxc.singleInputEnabledForPage = site.usernameOnly;
+                kpxc.improvedFieldDetectionEnabledForPage = site.improvedFieldDetection;
             }
         }
 
diff --git a/keepassxc-browser/content/observer-helper.js b/keepassxc-browser/content/observer-helper.js
index f34a3fd..11ed070 100644
--- a/keepassxc-browser/content/observer-helper.js
+++ b/keepassxc-browser/content/observer-helper.js
@@ -150,11 +150,14 @@ kpxcObserverHelper.getInputs = function(target, ignoreVisibility = false) {
         inputFields.push(target);
     }
 
-    // Traverse children
-    const traversedChildren = kpxcObserverHelper.findInputsFromChildren(target);
-    for (const child of traversedChildren) {
-        if (!inputFields.includes(child)) {
-            inputFields.push(child);
+    // Traverse children, only if Improved Field Detection is enabled for the site
+    if (kpxc.improvedFieldDetectionEnabledForPage)
+    {
+        const traversedChildren = kpxcObserverHelper.findInputsFromChildren(target);
+        for (const child of traversedChildren) {
+            if (!inputFields.includes(child)) {
+                inputFields.push(child);
+            }
         }
     }
 
diff --git a/keepassxc-browser/options/options.css b/keepassxc-browser/options/options.css
index 6d03a84..fd57b72 100644
--- a/keepassxc-browser/options/options.css
+++ b/keepassxc-browser/options/options.css
@@ -96,6 +96,12 @@ tbody {
     color: var(--kpxc-text-color);
 }
 
+.table-striped > tbody > tr:nth-of-type(odd) input[type="checkbox"] {
+    background-color: var(--kpxc-card-background-color) !important;
+    border-color: var(--kpxc-input-main-border-color) !important;
+    color: var(--kpxc-text-color) !important;
+}
+
 .table tbody td {
     vertical-align: middle;
 }
@@ -106,6 +112,7 @@ tbody {
 }
 
 #tab-site-preferences td:nth-of-type(3),
+#tab-site-preferences td:nth-of-type(4),
 table td:last-of-type {
     width: 1px;
 }
diff --git a/keepassxc-browser/options/options.html b/keepassxc-browser/options/options.html
index 8c6c35f..b6933f4 100644
--- a/keepassxc-browser/options/options.html
+++ b/keepassxc-browser/options/options.html
@@ -599,12 +599,10 @@
                 <div class="card-body">
                   <p>
                     <span data-i18n="optionsSitePreferencesTabHelpTextFirst"></span>
-                    <br />
-                    <span data-i18n="optionsSitePreferencesTabHelpTextSecond"></span>
-                    <br />
-                    <span data-i18n="optionsSitePreferencesTabHelpTextThird"></span>
-                    <br />
-                    <span data-i18n="optionsSitePreferencesTabHelpTextFourth"></span>
+                    <li><span data-i18n="optionsSitePreferencesTabHelpTextSecond"></span></li>
+                    <li><span data-i18n="optionsSitePreferencesTabHelpTextThird"></span></li>
+                    <li><span data-i18n="optionsSitePreferencesTabHelpTextFourth"></span></li>
+                    <li><span data-i18n="optionsSitePreferencesImprovedInputFieldDetectionHelpText"></span></li>
                   </p>
                   <hr class="mt-0" />
 
@@ -627,12 +625,13 @@
                           <th scope="col"><span data-i18n="optionsColumnPageURL"></span></th>
                           <th scope="col"><span data-i18n="optionsColumnIgnore"></span></th>
                           <th scope="col"><span data-i18n="optionsColumnUsernameOnly"></span></th>
+                          <th scope="col"><span data-i18n="optionsColumnImprovedInputFieldDetection"></span></th>
                           <th scope="col"><span data-i18n="optionsColumnDelete"></span></th>
                         </tr>
                       </thead>
                       <tbody>
                         <tr class="empty">
-                          <td colspan="4"><span data-i18n="optionsSitePreferencesNotFound"></span></td>
+                          <td colspan="5"><span data-i18n="optionsSitePreferencesNotFound"></span></td>
                         </tr>
                         <tr class="clone d-none">
                           <td class="text-nowrap"></td>
@@ -645,6 +644,7 @@
                             </select>
                           </td>
                           <td><input class="form-check-input" type="checkbox" name="usernameOnly" value="false" data-i18n="[title]optionsColumnUsernameOnly"/></td>
+                          <td><input class="form-check-input" type="checkbox" name="improvedFieldDetection" value="false" data-i18n="[title]optionsColumnImprovedInputFieldDetection"/></td>
                           <td class="text-nowrap"><button class="btn btn-sm delete btn-danger btn"><i class="fa fa-remove" aria-hidden="true"></i><span data-i18n="optionsButtonRemove"></span></button></td>
                         </tr>
                       </tbody>
diff --git a/keepassxc-browser/options/options.js b/keepassxc-browser/options/options.js
index cbbf607..7f45e94 100644
--- a/keepassxc-browser/options/options.js
+++ b/keepassxc-browser/options/options.js
@@ -526,7 +526,11 @@ options.initSitePreferences = function() {
 
         for (const site of options.settings['sitePreferences']) {
             if (site.url === url) {
-                site.usernameOnly = this.checked;
+                if (this.name === 'usernameOnly') {
+                    site.usernameOnly = this.checked;
+                } else if (this.name === 'improvedFieldDetection') {
+                    site.improvedFieldDetection = this.checked;
+                }
             }
         }
 
@@ -554,7 +558,7 @@ options.initSitePreferences = function() {
         }
     };
 
-    const addNewRow = function(rowClone, newIndex, url, ignore, usernameOnly) {
+    const addNewRow = function(rowClone, newIndex, url, ignore, usernameOnly, improvedFieldDetection) {
         const row = rowClone.cloneNode(true);
         row.setAttribute('url', url);
         row.setAttribute('id', 'tr-scf' + newIndex);
@@ -563,7 +567,9 @@ options.initSitePreferences = function() {
         row.children[1].children[0].addEventListener('change', selectionChanged);
         row.children[2].children['usernameOnly'].checked = usernameOnly;
         row.children[2].children['usernameOnly'].addEventListener('change', checkboxClicked);
-        row.children[3].addEventListener('click', removeButtonClicked);
+        row.children[3].children['improvedFieldDetection'].checked = improvedFieldDetection;
+        row.children[3].children['improvedFieldDetection'].addEventListener('change', checkboxClicked);
+        row.children[4].addEventListener('click', removeButtonClicked);
 
         $('#tab-site-preferences table tbody').append(row);
     };
@@ -628,10 +634,10 @@ options.initSitePreferences = function() {
         const rowClone = $('#tab-site-preferences table tr.clone').cloneNode(true);
         rowClone.classList.remove('clone', 'd-none');
 
-        addNewRow(rowClone, newIndex, value, IGNORE_NOTHING, false);
+        addNewRow(rowClone, newIndex, value, IGNORE_NOTHING, false, false);
         $('#tab-site-preferences table tbody tr.empty').hide();
 
-        options.settings['sitePreferences'].push({ url: value, ignore: IGNORE_NOTHING, usernameOnly: false });
+        options.settings['sitePreferences'].push({ url: value, ignore: IGNORE_NOTHING, usernameOnly: false, improvedFieldDetection: false });
         options.saveSettings();
         manualUrl.value = '';
     });
@@ -641,7 +647,7 @@ options.initSitePreferences = function() {
     let counter = 1;
     if (options.settings['sitePreferences']) {
         for (const site of options.settings['sitePreferences']) {
-            addNewRow(rowClone, counter, site.url, site.ignore, site.usernameOnly);
+            addNewRow(rowClone, counter, site.url, site.ignore, site.usernameOnly, site.improvedFieldDetection);
             ++counter;
         }
     }