Improve styling of edge case devtools state keys (#7794)

res/css/views/dialogs/_DevtoolsDialog.scss

@@ -27,6 +27,18 @@ limitations under the License.
     margin-bottom: 10px;
 }
 
+.mx_DevTools_RoomStateExplorer_button {
+    font-family: monospace;
+}
+
+.mx_DevTools_RoomStateExplorer_button_hasSpaces {
+    text-decoration: underline;
+}
+
+.mx_DevTools_RoomStateExplorer_button.mx_DevTools_RoomStateExplorer_button_emptyString {
+    font-style: italic;
+}
+
 .mx_DevTools_RoomStateExplorer_button, .mx_DevTools_ServersInRoomList_button {
     margin-bottom: 10px;
     width: 100%;

src/components/views/dialogs/DevtoolsDialog.tsx

@@ -28,6 +28,7 @@ import {
 import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { logger } from "matrix-js-sdk/src/logger";
+import classNames from 'classnames';
 
 import SyntaxHighlight from '../elements/SyntaxHighlight';
 import { _t } from '../../../languageHandler';
@@ -538,8 +539,17 @@ class RoomStateExplorer extends React.PureComponent<IExplorerProps, IRoomStateEx
             list = <FilteredList query={this.state.queryStateKey} onChange={this.onQueryStateKey}>
                 {
                     Array.from(stateGroup.entries()).map(([stateKey, ev]) => {
-                        return <button className={classes} key={stateKey} onClick={this.onViewSourceClick(ev)}>
+                        const trimmed = stateKey.trim();
-                            { stateKey }
+
+                        return <button
+                            className={classNames(classes, {
+                                mx_DevTools_RoomStateExplorer_button_hasSpaces: trimmed.length !== stateKey.length,
+                                mx_DevTools_RoomStateExplorer_button_emptyString: !trimmed,
+                            })}
+                            key={stateKey}
+                            onClick={this.onViewSourceClick(ev)}
+                        >
+                            { trimmed ? stateKey : _t("<%(count)s spaces>", { count: stateKey.length }) }
                         </button>;
                     })
                 }

src/i18n/strings/en_EN.json

@@ -2515,6 +2515,9 @@
     "Send Account Data": "Send Account Data",
     "Filter results": "Filter results",
     "Explore Room State": "Explore Room State",
+    "<%(count)s spaces>|other": "<%(count)s spaces>",
+    "<%(count)s spaces>|one": "<space>",
+    "<%(count)s spaces>|zero": "<empty string>",
     "Explore Account Data": "Explore Account Data",
     "View Servers in Room": "View Servers in Room",
     "Verification Requests": "Verification Requests",