Clarify that device names are publicly visible

And also a bunch of other UI fixes in the devices table:
 * It's the devices table, don't need 'device' in all the headers
 * Not really necessary to label checkboxes with 'select'
 * Stop table from moving down when the delete button appears

Fixes https://github.com/vector-im/riot-web/issues/10216

res/css/views/settings/_DevicesPanel.scss

@@ -26,8 +26,13 @@ limitations under the License.
     font-weight: bold;
 }
 
+.mx_DevicesPanel_header > .mx_DevicesPanel_deviceButtons {
+    height: 48px; // make this tall so the table doesn't move down when the delete button appears
+}
+
 .mx_DevicesPanel_header > div {
     display: table-cell;
+    vertical-align: bottom;
 }
 
 .mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen {

src/components/views/settings/DevicesPanel.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -186,7 +187,7 @@ export default class DevicesPanel extends React.Component {
 
         const deleteButton = this.state.deleting ?
             <Spinner w={22} h={22} /> :
-            <AccessibleButton className="mx_textButton" onClick={this._onDeleteClick}>
+            <AccessibleButton onClick={this._onDeleteClick} kind="danger_sm">
                { _t("Delete %(count)s devices", {count: this.state.selectedDevices.length}) }
             </AccessibleButton>;
 
@@ -194,11 +195,11 @@ export default class DevicesPanel extends React.Component {
         return (
             <div className={classes}>
                 <div className="mx_DevicesPanel_header">
-                    <div className="mx_DevicesPanel_deviceId">{ _t("Device ID") }</div>
-                    <div className="mx_DevicesPanel_deviceName">{ _t("Device Name") }</div>
+                    <div className="mx_DevicesPanel_deviceId">{ _t("ID") }</div>
+                    <div className="mx_DevicesPanel_deviceName">{ _t("Public Name") }</div>
                     <div className="mx_DevicesPanel_deviceLastSeen">{ _t("Last seen") }</div>
                     <div className="mx_DevicesPanel_deviceButtons">
-                        { this.state.selectedDevices.length > 0 ? deleteButton : _t('Select devices') }
+                        { this.state.selectedDevices.length > 0 ? deleteButton : null }
                     </div>
                 </div>
                 { devices.map(this._renderDevice) }
@@ -207,7 +208,6 @@ export default class DevicesPanel extends React.Component {
     }
 }
 
-DevicesPanel.displayName = 'MemberDeviceInfo';
 DevicesPanel.propTypes = {
     className: PropTypes.string,
 };

src/components/views/settings/tabs/user/SecurityUserSettingsTab.js

@@ -258,6 +258,7 @@ export default class SecurityUserSettingsTab extends React.Component {
                 <div className="mx_SettingsTab_section">
                     <span className="mx_SettingsTab_subheading">{_t("Devices")}</span>
                     <div className='mx_SettingsTab_subsectionText'>
+                        {_t("A device's public name is visible to people you communicate with")}
                         <DevicesPanel />
                     </div>
                 </div>

src/i18n/strings/en_EN.json

@@ -476,10 +476,9 @@
     "Authentication": "Authentication",
     "Delete %(count)s devices|other": "Delete %(count)s devices",
     "Delete %(count)s devices|one": "Delete device",
-    "Device ID": "Device ID",
-    "Device Name": "Device Name",
+    "ID": "ID",
+    "Public Name": "Public Name",
     "Last seen": "Last seen",
-    "Select devices": "Select devices",
     "Failed to set display name": "Failed to set display name",
     "Disable Notifications": "Disable Notifications",
     "Enable Notifications": "Enable Notifications",
@@ -628,6 +627,7 @@
     "Key backup": "Key backup",
     "Security & Privacy": "Security & Privacy",
     "Devices": "Devices",
+    "A device's public name is visible to people you communicate with": "A device's public name is visible to people you communicate with",
     "Riot collects anonymous analytics to allow us to improve the application.": "Riot collects anonymous analytics to allow us to improve the application.",
     "Privacy is important to us, so we don't collect any personal or identifiable data for our analytics.": "Privacy is important to us, so we don't collect any personal or identifiable data for our analytics.",
     "Learn more about how we use analytics.": "Learn more about how we use analytics.",
@@ -1211,6 +1211,7 @@
     "To verify that this device can be trusted, please contact its owner using some other means (e.g. in person or a phone call) and ask them whether the key they see in their User Settings for this device matches the key below:": "To verify that this device can be trusted, please contact its owner using some other means (e.g. in person or a phone call) and ask them whether the key they see in their User Settings for this device matches the key below:",
     "Use two-way text verification": "Use two-way text verification",
     "Device name": "Device name",
+    "Device ID": "Device ID",
     "Device key": "Device key",
     "If it matches, press the verify button below. If it doesn't, then someone else is intercepting this device and you probably want to press the blacklist button instead.": "If it matches, press the verify button below. If it doesn't, then someone else is intercepting this device and you probably want to press the blacklist button instead.",
     "I verify that the keys match": "I verify that the keys match",