Small fixes to the options page (#2054)

Small fixes to the options page
2026-03-11 08:54:43 +00:00 · 2023-12-24 22:56:37 -08:00 · 2023-12-24 22:56:37 -08:00 · b957598bdb
commit b957598bdb
parent ac04b7b235
8 changed files with 48 additions and 70 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -81,7 +81,6 @@
    },
    "globals": {
        "_called": true,
-        "_f": true,
        "acceptedOTPFields": true,
        "assertInputFields": true,
        "assertPasswordChangeFields": true,
@ -119,7 +118,6 @@
        "initColorTheme": true,
        "isEdge": true,
        "isFirefox": true,
-        "jQuery": true,
        "keepass": true,
        "keepassClient": true,
        "kpActions": true,
@ -141,7 +139,6 @@
        "kpxcTOTPIcons": true,
        "kpxcUI": true,
        "kpxcUserAutocomplete": true,
-        "kpxcUsernameField": true,
        "kpxcUsernameIcons": true,
        "logDebug": true,
        "logError": true,
@ -161,7 +158,6 @@
        "Pixels": true,
        "PREDEFINED_SITELIST": true,
        "RED_BUTTON": true,
-        "resizePopup": true,
        "sendMessage": true,
        "showNotification": true,
        "siteMatch": true,
@ -175,8 +171,7 @@
        "statusResponse": true,
        "Tests": true,
        "tr": true,
-        "trimURL": true,
-        "useMonochromToolbarIcon": true
+        "trimURL": true
    },
    "overrides": [
        {
--- a/README.md
+++ b/README.md
@ -9,7 +9,7 @@ Some changes merged also from [smorks](https://github.com/smorks)' [KeePassHttp-

 This browser extension was first supported in KeePassXC 2.3.0 (release end of 2017). In general it is advised to only use the latest available release.

-Get the extension for [Firefox](https://addons.mozilla.org/en-US/firefox/addon/keepassxc-browser/) or [Chrome/Chromium](https://chrome.google.com/webstore/detail/keepassxc-browser/oboonakemofpalcgghocfoadofidjkkk) or [Microsoft Edge](https://microsoftedge.microsoft.com/addons/detail/pdffhmdngciaglkoonimfcmckehcpafo) (requires KeePassXC 2.5.3 or newer).
+Get the extension for [Firefox](https://addons.mozilla.org/en-US/firefox/addon/keepassxc-browser/) or [Chrome/Chromium](https://chromewebstore.google.com/detail/keepassxc-browser/oboonakemofpalcgghocfoadofidjkkk) or [Microsoft Edge](https://microsoftedge.microsoft.com/addons/detail/pdffhmdngciaglkoonimfcmckehcpafo) (requires KeePassXC 2.5.3 or newer).

 Please see this [document](https://keepassxc.org/docs/KeePassXC_GettingStarted.html#_setup_browser_integration) for instructions how to configure KeePassXC in order to connect the database correctly.

--- a/keepassxc-browser/background/client.js
+++ b/keepassxc-browser/background/client.js
@ -88,8 +88,8 @@ const messageBuffer = {
                }

                return message;
-            }}
-        );
+            }
+        });
    },

    removeMessage(message) {
--- a/keepassxc-browser/options/options.css
+++ b/keepassxc-browser/options/options.css
@ -116,6 +116,11 @@ tbody {
    vertical-align: middle;
 }

+/* Hide the row saying that the table is empty when there are other rows */
+table tbody tr.empty:not(:nth-last-child(2)) {
+  display: none;
+}
+
 #tab-site-preferences td:nth-of-type(2),
 #tab-site-preferences td:nth-of-type(2) select {
    width: 200px;
--- a/keepassxc-browser/options/options.html
+++ b/keepassxc-browser/options/options.html
@ -17,8 +17,6 @@
    <script src="../bootstrap/bootstrap.min.js"></script>
    <script src="options.js"></script>
    <script src="../common/translate.js" defer></script>
-  </head>
-  <body class="pt-3 pb-5">
    <script>
    // We eagerly load the theme here to avoid a white flash
    let theme = localStorage.getItem('colorTheme') || 'system';
@ -27,6 +25,8 @@
    }
    document.documentElement.setAttribute('data-bs-theme', theme);
    </script>
+  </head>
+  <body class="pt-3 pb-5">
    <div class="container-fluid">
      <div class="row">
        <nav class="col-md-3 col-lg-2 sidebar">
@ -503,7 +503,7 @@
                      <i class="fa fa-arrow-down" aria-hidden="true"></i>
                      <span data-i18n="optionsButtonImport"></span>
                    </button>
-                    <button class="btn btn-sm btn-primary" id="exportSettingsButton">
+                    <button class="btn btn-sm btn-primary ms-2" id="exportSettingsButton">
                      <i class="fa fa-arrow-up" aria-hidden="true"></i>
                      <span data-i18n="optionsButtonExport"></span>
                    </button>
@ -596,7 +596,7 @@
                            <i class="fa fa-remove" aria-hidden="true"></i>
                            <span data-i18n="optionsButtonCancel"></span>
                          </button>
-                          <button class="btn btn-sm yes btn-success">
+                          <button class="btn btn-sm yes btn-danger">
                            <i class="fa fa-check" aria-hidden="true"></i>
                            <span data-i18n="optionsButtonRemoveNow"></span>
                          </button>
@ -620,7 +620,7 @@
                    <span data-i18n="optionsCustomFieldsTabHelpTextSecond"></span><em><span data-i18n="popupChooseCredentialsText"></span></em>.
                  </p>
                  <div class="table-responsive">
-                     <table class="table table-sm table-striped table-bordered">
+                    <table class="table table-sm table-striped table-bordered">
                      <caption data-i18n="optionsCustomFieldsTableCaption"></caption>
                      <thead>
                        <tr>
@ -661,7 +661,7 @@
                            <i class="fa fa-remove" aria-hidden="true"></i>
                            <span data-i18n="optionsButtonCancel"></span>
                          </button>
-                          <button class="btn btn-sm yes btn-success">
+                          <button class="btn btn-sm yes btn-danger">
                            <i class="fa fa-check" aria-hidden="true"></i>
                            <span data-i18n="optionsButtonRemoveNow"></span>
                          </button>
@ -757,7 +757,7 @@
                            <i class="fa fa-remove" aria-hidden="true"></i>
                            <span data-i18n="optionsButtonCancel"></span>
                          </button>
-                          <button class="btn btn-sm yes btn-success">
+                          <button class="btn btn-sm yes btn-danger">
                            <i class="fa fa-check" aria-hidden="true"></i>
                            <span data-i18n="optionsButtonRemoveNow"></span>
                          </button>
@ -786,7 +786,7 @@
                  </p>
                  <hr class="mt-0">
                  <p>
-                    <a target="_blank" href="https://chrome.google.com/webstore/detail/keepassxc-browser/oboonakemofpalcgghocfoadofidjkkk" data-i18n="[title]openNewTab">
+                    <a target="_blank" href="https://chromewebstore.google.com/detail/keepassxc-browser/oboonakemofpalcgghocfoadofidjkkk" data-i18n="[title]openNewTab">
                      <span data-i18n="optionsAboutChrome"></span>
                    </a>
                    <br>
--- a/keepassxc-browser/options/options.js
+++ b/keepassxc-browser/options/options.js
@ -216,8 +216,12 @@ options.initGeneralSettings = function() {
    });

    let temporarySettings;
-    const dialogImportSettingsModal = new bootstrap.Modal($('#dialogImportSettings'),
-        { keyboard: true, show: false, backdrop: true });
+    const dialogImportSettingsModal = new bootstrap.Modal('#dialogImportSettings',
+        { keyboard: true, focus: false, backdrop: true });
+
+    $('#dialogImportSettings').addEventListener('shown.bs.modal', function(modalEvent) {
+        modalEvent.currentTarget.querySelector('.modal-footer button.yes').focus();
+    });

    $('#importSettingsButton').addEventListener('click', function() {
        const link = document.createElement('input');
@ -244,9 +248,6 @@ options.initGeneralSettings = function() {
                    // Verify the import
                    temporarySettings = contents;
                    dialogImportSettingsModal.show();
-                    $('#dialogImportSettings').addEventListener('shown.bs.modal', function(modalEvent) {
-                        modalEvent.currentTarget.querySelector('.modal-footer .btn-success').focus();
-                    });
                } catch (err) {
                    console.log('Error loading JSON settings file.');
                }
@ -346,16 +347,12 @@ options.getPartiallyHiddenKey = function(key) {
 };

 options.initConnectedDatabases = function() {
-    const dialogDeleteConnectedDatabaseModal = new bootstrap.Modal($('#dialogDeleteConnectedDatabase'),
-        { keyboard: true, show: false, backdrop: true });
+    const dialogDeleteConnectedDatabaseModal = new bootstrap.Modal('#dialogDeleteConnectedDatabase',
+        { keyboard: true, focus: false, backdrop: true });

-    const hideEmptyMessageRow = function() {
-        if ($('#tab-connected-databases table tbody').children.length > 2) {
-            $('#tab-connected-databases table tbody tr.empty').hide();
-        } else {
-            $('#tab-connected-databases table tbody tr.empty').style.display = '';
-        }
-    };
+    $('#dialogDeleteConnectedDatabase').addEventListener('shown.bs.modal', function(modalEvent) {
+        modalEvent.currentTarget.querySelector('.modal-footer button.yes').focus();
+    });

    $('#dialogDeleteConnectedDatabase .modal-footer button.yes').addEventListener('click', async function(e) {
        dialogDeleteConnectedDatabaseModal.hide();
@ -372,7 +369,6 @@ options.initConnectedDatabases = function() {
            console.log(err);
        });

-        hideEmptyMessageRow();
        browser.runtime.sendMessage({ action: 'update_popup' });
    });

@ -389,9 +385,6 @@ options.initConnectedDatabases = function() {
        }

        dialogDeleteConnectedDatabaseModal.show();
-        $('#dialogDeleteConnectedDatabase').addEventListener('shown.bs.modal', function(modalEvent) {
-            modalEvent.currentTarget.querySelector('.modal-footer .btn-success').focus();
-        });
    };

    const rowClone = $('#tab-connected-databases table tr.clone').cloneNode(true);
@ -439,21 +432,15 @@ options.initConnectedDatabases = function() {
            }
        }
    });
-
-    hideEmptyMessageRow();
 };

 options.initCustomLoginFields = function() {
-    const dialogDeleteCustomLoginFieldsModal = new bootstrap.Modal($('#dialogDeleteCustomLoginFields'),
-        { keyboard: true, show: false, backdrop: true });
+    const dialogDeleteCustomLoginFieldsModal = new bootstrap.Modal('#dialogDeleteCustomLoginFields',
+        { keyboard: true, focus: false, backdrop: true });

-    const hideEmptyMessageRow = function() {
-        if ($('#tab-custom-fields table tbody').children.length > 2) {
-            $('#tab-custom-fields table tbody tr.empty').hide();
-        } else {
-            $('#tab-custom-fields table tbody tr.empty').style.display = '';
-        }
-    };
+    $('#dialogDeleteCustomLoginFields').addEventListener('shown.bs.modal', function(modalEvent) {
+        modalEvent.currentTarget.querySelector('.modal-footer button.yes').focus();
+    });

    const removeButtonClicked = function(e) {
        e.preventDefault();
@ -464,9 +451,6 @@ options.initCustomLoginFields = function() {
        $('#dialogDeleteCustomLoginFields .modal-body strong').textContent = closestTr.children[0].textContent;

        dialogDeleteCustomLoginFieldsModal.show();
-        $('#dialogDeleteCustomLoginFields').addEventListener('shown.bs.modal', function(modalEvent) {
-            modalEvent.currentTarget.querySelector('.modal-footer .btn-success').focus();
-        });
    };

    $('#dialogDeleteCustomLoginFields .modal-footer button.yes').addEventListener('click', function(e) {
@ -478,8 +462,6 @@ options.initCustomLoginFields = function() {

        delete options.settings['defined-custom-fields'][url];
        options.saveSettings();
-
-        hideEmptyMessageRow();
    });

    const rowClone = $('#tab-custom-fields table tr.clone').cloneNode(true);
@ -496,8 +478,6 @@ options.initCustomLoginFields = function() {
        row.children[1].addEventListener('click', removeButtonClicked);
        $('#tab-custom-fields table tbody').append(row);
    }
-
-    hideEmptyMessageRow();
 };

 options.initSitePreferences = function() {
@ -505,8 +485,12 @@ options.initSitePreferences = function() {
        options.settings['sitePreferences'] = [];
    }

-    const dialogDeleteSiteModal = new bootstrap.Modal($('#dialogDeleteSite'),
-        { keyboard: true, show: false, backdrop: true });
+    const dialogDeleteSiteModal = new bootstrap.Modal('#dialogDeleteSite',
+        { keyboard: true, focus: false, backdrop: true });
+
+    $('#dialogDeleteSite').addEventListener('shown.bs.modal', function(modalEvent) {
+        modalEvent.currentTarget.querySelector('.modal-footer button.yes').focus();
+    });

    const removeButtonClicked = function(e) {
        e.preventDefault();
@ -517,9 +501,6 @@ options.initSitePreferences = function() {
        $('#dialogDeleteSite .modal-body strong').textContent = closestTr.children[0].textContent;

        dialogDeleteSiteModal.show();
-        $('#dialogDeleteSite').addEventListener('shown.bs.modal', function(modalEvent) {
-            modalEvent.currentTarget.querySelector('.modal-footer .btn-success').focus();
-        });
    };

    const checkboxClicked = function() {
@ -552,14 +533,6 @@ options.initSitePreferences = function() {
        options.saveSettings();
    };

-    const hideEmptyMessageRow = function() {
-        if ($('#tab-site-preferences table tbody').children.length > 2) {
-            $('#tab-site-preferences table tbody tr.empty').hide();
-        } else {
-            $('#tab-site-preferences table tbody tr.empty').style.display = '';
-        }
-    };
-
    const addNewRow = function(rowClone, newIndex, url, ignore, usernameOnly, improvedFieldDetection) {
        const row = rowClone.cloneNode(true);
        row.setAttribute('url', url);
@ -590,7 +563,6 @@ options.initSitePreferences = function() {
        }

        options.saveSettings();
-        hideEmptyMessageRow();
    });

    $('#manualUrl').addEventListener('keyup', function(event) {
@ -649,8 +621,6 @@ options.initSitePreferences = function() {
            ++counter;
        }
    }
-
-    hideEmptyMessageRow();
 };

 options.initAbout = function() {
--- a/tests/.eslintrc
+++ b/tests/.eslintrc
@ -0,0 +1,8 @@
+{
+    "env": {
+        "node": true
+    },
+    "parserOptions": {
+        "sourceType": "module"
+    }
+}
--- a/tests/content-script-tests.mjs
+++ b/tests/content-script-tests.mjs
@ -38,7 +38,7 @@ const verifyResults = async(selector) => {
    const resultCount = await page.locator(`css=#${selector} >> css=.fa`).count();
    await expect.soft(resultCount).toBeGreaterThan(0);

-    for (var i = 0; i < resultCount; i++) {
+    for (let i = 0; i < resultCount; i++) {
        const elem = await page.locator(`css=#${selector} >> css=.fa`).nth(i);
        const id = await elem.getAttribute('id');
        await expect.soft(elem, id).toHaveClass('fa fa-check');