Show alert link to Troubleshooting Guide when reload fails (#1606)

Show alert link to Troubleshooting Guide when reload fails

keepassxc-browser/_locales/en/messages.json

@@ -351,10 +351,18 @@
         "message": "Getting Started Guide - Setup Browser Integration",
         "description": "Popup Getting Started Guide link text."
     },
-    "popupGettingStartedHide": {
+    "popupAlertHide": {
       "message": "Hide and don't show again.",
-      "description": "Getting Started Guide alert close button title."
-  },
+      "description": "Hide alert close button title."
+    },
+    "popupTroubleshootingText": {
+      "message": "Cannot connect to KeePassXC? Maybe our wiki page could help.",
+      "description": "Popup information message about Troubleshooting Guide."
+    },
+    "popupTroubleshootingLinkText": {
+      "message": "Troubleshooting Guide",
+      "description": "Popup Troubleshooting Guide link text."
+    },
     "popupCheckingStatus": {
         "message": "Checking status...",
         "description": "Checking status message in popup."

keepassxc-browser/background/event.js

@@ -34,6 +34,7 @@ kpxcEvent.showStatus = async function(tab, configured, internalPoll) {
         error: errorMessage || null,
         usernameFieldDetected: page.tabs[tab.id].usernameFieldDetected,
         showGettingStartedGuideAlert: page.settings.showGettingStartedGuideAlert,
+        showTroubleshootingGuideAlert: page.settings.showTroubleshootingGuideAlert
     };
 };
 
@@ -210,6 +211,13 @@ kpxcEvent.hideGettingStartedGuideAlert = async function(tab) {
     await kpxcEvent.onSaveSettings(tab, settings);
 };
 
+kpxcEvent.hideTroubleshootingGuideAlert = async function(tab) {
+    const settings = await kpxcEvent.onLoadSettings();
+    settings.showTroubleshootingGuideAlert = false;
+
+    await kpxcEvent.onSaveSettings(tab, settings);
+};
+
 // All methods named in this object have to be declared BEFORE this!
 kpxcEvent.messageHandlers = {
     'add_credentials': keepass.addCredentials,
@@ -230,6 +238,7 @@ kpxcEvent.messageHandlers = {
     'get_tab_information': kpxcEvent.onGetTabInformation,
     'get_totp': keepass.getTotp,
     'hide_getting_started_guide_alert': kpxcEvent.hideGettingStartedGuideAlert,
+    'hide_troubleshooting_guide_alert': kpxcEvent.hideTroubleshootingGuideAlert,
     'init_http_auth': kpxcEvent.initHttpAuth,
     'is_connected': kpxcEvent.getIsKeePassXCAvailable,
     'load_keyring': kpxcEvent.onLoadKeyRing,

keepassxc-browser/background/page.js

@@ -19,6 +19,7 @@ const defaultSettings = {
     redirectAllowance: 1,
     saveDomainOnly: true,
     showGettingStartedGuideAlert: true,
+    showTroubleshootingGuideAlert: true,
     showLoginFormIcon: true,
     showLoginNotifications: true,
     showNotifications: true,
@@ -123,6 +124,10 @@ page.initSettings = async function() {
             page.settings.showGettingStartedGuideAlert = defaultSettings.showGettingStartedGuideAlert;
         }
 
+        if (!('showTroubleshootingGuideAlert' in page.settings)) {
+            page.settings.showTroubleshootingGuideAlert = defaultSettings.showTroubleshootingGuideAlert;
+        }
+
         if (!('showLoginFormIcon' in page.settings)) {
             page.settings.showLoginFormIcon = defaultSettings.showLoginFormIcon;
         }

keepassxc-browser/popups/popup.css

@@ -102,11 +102,9 @@ code {
     text-align: start;
 }
 
-#update-available {
-    display: none;
-}
-
-#getting-started-guide {
+#update-available,
+#getting-started-guide,
+#troubleshooting-guide {
     display: none;
 }
 

keepassxc-browser/popups/popup.html

@@ -32,7 +32,14 @@
             <span data-i18n="popupGettingStartedText"></span>
             <br />
             <a target="_blank" class="alert-link" href="https://keepassxc.org/docs/KeePassXC_GettingStarted.html#_setup_browser_integration"><span data-i18n="popupGettingStartedLinkText"></span></a>
-            <button type="button" id="getting-started-alert-close-button" class="btn-close" data-bs-dismiss="alert" data-i18n="[title]popupGettingStartedHide"></button>
+            <button type="button" id="getting-started-alert-close-button" class="btn-close" data-bs-dismiss="alert" data-i18n="[title]popupAlertHide"></button>
+          </div>
+
+          <div id="troubleshooting-guide" class="alert alert-info alert-dismissible">
+            <span data-i18n="popupTroubleshootingText"></span>
+            <br />
+            <a target="_blank" class="alert-link" href="https://github.com/keepassxreboot/keepassxc-browser/wiki/Troubleshooting-guide"><span data-i18n="popupTroubleshootingLinkText"></span></a>
+            <button type="button" id="troubleshooting-guide-alert-close-button" class="btn-close" data-bs-dismiss="alert" data-i18n="[title]popupAlertHide"></button>
           </div>
         </div>
       </div>

keepassxc-browser/popups/popup.js

@@ -1,5 +1,7 @@
 'use strict';
 
+let reloadCount = 0;
+
 HTMLElement.prototype.show = function() {
     this.style.display = 'block';
 };
@@ -25,6 +27,13 @@ function statusResponse(r) {
         if (r.showGettingStartedGuideAlert) {
             $('#getting-started-guide').show();
         }
+
+        if (r.showTroubleshootingGuideAlert && reloadCount >= 2) {
+            $('#troubleshooting-guide').show();
+        }
+        else {
+            $('#troubleshooting-guide').hide();
+        }
     } else if (r.keePassXCAvailable && r.databaseClosed) {
         $('#database-error-message').textContent = r.error;
         $('#database-not-opened').show();
@@ -47,6 +56,8 @@ function statusResponse(r) {
         if (r.usernameFieldDetected) {
             $('#username-field-detected').show();
         }
+
+        reloadCount = 0;
     }
 }
 
@@ -87,6 +98,12 @@ const sendMessageToTab = async function(message) {
         statusResponse(await browser.runtime.sendMessage({
             action: 'reconnect'
         }));
+
+        // Shows the Troubleshooting Guide alert every third time Reload button is pressed when popup is open
+        if (reloadCount > 2) {
+            reloadCount = 0;
+        }
+        reloadCount++;
     });
 
     $('#reopen-database-button').addEventListener('click', async () => {
@@ -125,6 +142,12 @@ const sendMessageToTab = async function(message) {
         });
     });
 
+    $('#troubleshooting-guide-alert-close-button').addEventListener('click', async () => {
+        await browser.runtime.sendMessage({
+            action: 'hide_troubleshooting_guide_alert'
+        });
+    });
+
     statusResponse(await browser.runtime.sendMessage({
         action: 'get_status'
     }).catch((err) => {