Hide inline encryption icons except when hovering over a message

Closes https://github.com/vector-im/riot-web/issues/2882

This is a redo of https://github.com/matrix-org/matrix-react-sdk/pull/1707 (see associated discussion there and here: https://github.com/vector-im/riot-web/pull/5988)

I tried several times to resolve the conflicts correctly, but could not. Thus, fresh PR.

res/css/views/rooms/_EventTile.scss

@@ -298,6 +298,16 @@ limitations under the License.
     cursor: pointer;
 }
 
+.mx_EventTile_e2eIcon[hidden] {
+    display: none;
+}
+
+/* always override hidden attribute for blocked and warning */
+.mx_EventTile_e2eIcon[hidden][src="img/e2e-blocked.svg"],
+.mx_EventTile_e2eIcon[hidden][src="img/e2e-warning.svg"] {
+    display: block;
+}
+
 .mx_EventTile_keyRequestInfo {
     font-size: 12px;
 }

src/components/structures/UserSettings.js

@@ -63,6 +63,7 @@ const gHVersionLabel = function(repo, token='') {
 const SIMPLE_SETTINGS = [
     { id: "urlPreviewsEnabled" },
     { id: "autoplayGifsAndVideos" },
+    { id: "alwaysShowEncryptionIcons" },
     { id: "hideReadReceipts" },
     { id: "dontSendTypingNotifications" },
     { id: "alwaysShowTimestamps" },

src/components/views/rooms/EventTile.js

@@ -742,7 +742,11 @@ function E2ePadlockUnencrypted(props) {
 }
 
 function E2ePadlock(props) {
-    return <img className="mx_EventTile_e2eIcon" {...props} />;
+    if (SettingsStore.getValue("alwaysShowEncryptionIcons")) {
+        return <img className="mx_EventTile_e2eIcon" {...props} />;
+    } else {
+        return <img className="mx_EventTile_e2eIcon" hidden {...props} />;
+    }
 }
 
 module.exports.getHandlerTile = getHandlerTile;

src/i18n/strings/en_EN.json

@@ -198,6 +198,7 @@
     "Show timestamps in 12 hour format (e.g. 2:30pm)": "Show timestamps in 12 hour format (e.g. 2:30pm)",
     "Always show message timestamps": "Always show message timestamps",
     "Autoplay GIFs and videos": "Autoplay GIFs and videos",
+    "Always show encryption icons": "Always show encryption icons",
     "Enable automatic language detection for syntax highlighting": "Enable automatic language detection for syntax highlighting",
     "Hide avatars in user and room mentions": "Hide avatars in user and room mentions",
     "Disable big emoji in chat": "Disable big emoji in chat",

src/settings/Settings.js

@@ -150,6 +150,11 @@ export const SETTINGS = {
         displayName: _td('Autoplay GIFs and videos'),
         default: false,
     },
+    "alwaysShowEncryptionIcons": {
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        displayName: _td('Always show encryption icons'),
+        default: true,
+    },
     "enableSyntaxHighlightLanguageDetection": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         displayName: _td('Enable automatic language detection for syntax highlighting'),