Show gray icon when no credentials are available (#1490)

Show gray icon when there are no credentials

keepassxc-browser/content/keepassxc-browser.js

@@ -602,6 +602,8 @@ kpxc.receiveCredentialsIfNecessary = async function() {
         // If the database was locked, this is scope never met. In these cases the response is met at kpxc.detectDatabaseChange
         await sendMessage('page_set_manual_fill', ManualFill.NONE);
         await kpxc.retrieveCredentialsCallback(credentials);
+
+        kpxcIcons.switchIcons();
         return credentials;
     }
 
@@ -776,6 +778,8 @@ const initContentScript = async function() {
 
             kpxc.rememberCredentials(creds.username, creds.password, creds.url, creds.oldCredentials);
         }
+
+        kpxcIcons.switchIcons();
     } catch (err) {
         logError('initContentScript error: ' + err);
     }

keepassxc-browser/content/ui.js

@@ -50,7 +50,7 @@ class Icon {
         }
 
         if (state === DatabaseState.UNLOCKED) {
-            this.icon.style.filter = 'saturate(100%)';
+            this.icon.style.filter = kpxc.credentials.length === 0 ? 'saturate(0%)' : 'saturate(100%)';
         } else {
             this.icon.style.filter = 'saturate(0%)';
         }

keepassxc-browser/content/username-field.js

@@ -47,6 +47,12 @@ class UsernameFieldIcon extends Icon {
         this.icon.classList.remove('lock', 'lock-moz', 'unlock', 'unlock-moz', 'disconnected', 'disconnected-moz');
         this.icon.classList.add(getIconClassName(state));
         this.icon.title = getIconText(state);
+
+        if (kpxc.credentials.length === 0 && state === DatabaseState.UNLOCKED) {
+            this.icon.style.filter = 'saturate(0%)';
+        } else {
+            this.icon.style.filter = 'saturate(100%)';
+        }
     }
 }
 
@@ -142,6 +148,7 @@ const getIconClassName = function(state = DatabaseState.UNLOCKED) {
     } else if (state === DatabaseState.DISCONNECTED) {
         return (isFirefox() ? 'lock-disconnected' : 'disconnected');
     }
+
     return (isFirefox() ? 'unlock-moz' : 'unlock');
 };
 

keepassxc-browser/icons/keepassxc-dark.svg

@@ -1,93 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   inkscape:version="1.0 (4035a4f, 2020-05-01)"
-   sodipodi:docname="keepassxc-dark.svg"
-   version="1.1"
-   viewBox="0 0 100 100"
-   id="svg2">
-  <metadata
-     id="metadata856">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs854" />
-  <sodipodi:namedview
-     inkscape:current-layer="svg2"
-     inkscape:window-maximized="0"
-     inkscape:window-y="22"
-     inkscape:window-x="0"
-     inkscape:cy="50"
-     inkscape:cx="50"
-     inkscape:zoom="5.74"
-     showgrid="false"
-     id="namedview852"
-     inkscape:window-height="1057"
-     inkscape:window-width="1765"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0"
-     guidetolerance="10"
-     gridtolerance="10"
-     objecttolerance="10"
-     borderopacity="1"
-     bordercolor="#666666"
-     pagecolor="#ffffff" />
-  <circle
-     id="circle833"
-     r="45.9"
-     cy="50"
-     cx="50"
-     style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff;stroke:#515151;stroke-width:3.1319;stroke-linecap:round;stroke-linejoin:round" />
-  <linearGradient
-     gradientTransform="matrix(1 0 0 -1 0 -1384.1102)"
-     y2="-1392.7863"
-     x2="49.6968"
-     y1="-1470.9402"
-     x1="50.2693"
-     gradientUnits="userSpaceOnUse"
-     id="SVGID_1_">
-    <stop
-       id="stop835"
-       style="stop-color:gray"
-       offset="0" />
-    <stop
-       id="stop837"
-       style="stop-color:#4b4b4d"
-       offset="1" />
-  </linearGradient>
-  <path
-     id="path840"
-     d="M56.7 13.7c.1.5.2 1 .2 1.5.0 3.8-3.1 6.9-6.9 6.9-3.8.0-6.9-3.1-6.9-6.9.0-.5.1-1 .2-1.5 2.2-.4 4.5-.6 6.7-.6C52.3 13 54.5 13.3 56.7 13.7zM30.6 22.1c0 7.7 4.5 14.4 11.1 17.5v35.1L50 83l8.3-8.3-.5-7.3 3.9-3.9-3.9-3.9 5.9-5.9-5.9-5.9.5-8.2c6.5-3.1 11.1-9.8 11.1-17.5.0-1.3-.1-2.5-.4-3.8C80.1 25 86.9 37 87 50c0 20.4-16.5 37-37 37-20.4.0-37-16.5-37-37 0-13 6.8-25 18-31.7C30.8 19.6 30.6 20.8 30.6 22.1zM44.5 44.2h2.8v27.7h-2.8V44.2v0 0z"
-     style="fill:url(#SVGID_1_)" />
-  <linearGradient
-     gradientTransform="matrix(1 0 0 1 0 -1484)"
-     y2="1574.0038"
-     x2="73.8"
-     y1="1532.1382"
-     x1="73.8"
-     gradientUnits="userSpaceOnUse"
-     id="SVGID_2_">
-    <stop
-       id="stop842"
-       style="stop-color:#d69029"
-       offset="0" />
-    <stop
-       id="stop844"
-       style="stop-color:#af7125"
-       offset="1" />
-  </linearGradient>
-</svg>