From 6fb8f6eef16ef7fc2f18871d8eceaaf083bdefab Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 28 Jan 2020 18:03:47 +0000
Subject: [PATCH 1/2] Add device IDs in user info tooltips

For easier device identification, add the device ID in an HTML tooltip for now.

Fixes https://github.com/vector-im/riot-web/issues/12103
---
 src/components/views/right_panel/UserInfo.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/views/right_panel/UserInfo.js b/src/components/views/right_panel/UserInfo.js
index 051f92cc9c..394f6b5c98 100644
--- a/src/components/views/right_panel/UserInfo.js
+++ b/src/components/views/right_panel/UserInfo.js
@@ -183,11 +183,16 @@ function DeviceItem({userId, device}) {
             (device.getDisplayName() ? device.getDisplayName() : "") + " (" + device.deviceId + ")" :
             device.getDisplayName();
     const trustedLabel = isVerified ? _t("Trusted") : _t("Not trusted");
-    return (<AccessibleButton className={classes} onClick={onDeviceClick}>
-        <div className={iconClasses} />
-        <div className="mx_UserInfo_device_name">{deviceName}</div>
-        <div className="mx_UserInfo_device_trusted">{trustedLabel}</div>
-    </AccessibleButton>);
+    return (
+        <AccessibleButton
+            className={classes} onClick={onDeviceClick}
+            title={device.deviceId}
+        >
+            <div className={iconClasses} />
+            <div className="mx_UserInfo_device_name">{deviceName}</div>
+            <div className="mx_UserInfo_device_trusted">{trustedLabel}</div>
+        </AccessibleButton>
+    );
 }
 
 function DevicesSection({devices, userId, loading}) {

From 32cb3b8ccbe7ccf5467533c61f2d302a36db3ff5 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 28 Jan 2020 19:55:53 +0000
Subject: [PATCH 2/2] onClick to separate line

---
 src/components/views/right_panel/UserInfo.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/views/right_panel/UserInfo.js b/src/components/views/right_panel/UserInfo.js
index 394f6b5c98..e20ab07cae 100644
--- a/src/components/views/right_panel/UserInfo.js
+++ b/src/components/views/right_panel/UserInfo.js
@@ -185,8 +185,9 @@ function DeviceItem({userId, device}) {
     const trustedLabel = isVerified ? _t("Trusted") : _t("Not trusted");
     return (
         <AccessibleButton
-            className={classes} onClick={onDeviceClick}
+            className={classes}
             title={device.deviceId}
+            onClick={onDeviceClick}
         >
             <div className={iconClasses} />
             <div className="mx_UserInfo_device_name">{deviceName}</div>