From 247a122da9315702b52ca0ba94839f2ba76a7441 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 23 Jan 2022 10:21:44 +0100 Subject: [PATCH 1/3] Add function keys MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/Keyboard.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/Keyboard.ts b/src/Keyboard.ts index 7040898872e..74cd67a8c2d 100644 --- a/src/Keyboard.ts +++ b/src/Keyboard.ts @@ -71,6 +71,19 @@ export const Key = { X: "x", Y: "y", Z: "z", + + F1: "F1", + F2: "F2", + F3: "F3", + F4: "F4", + F5: "F5", + F6: "F6", + F7: "F7", + F8: "F8", + F9: "F9", + F10: "F10", + F11: "F11", + F12: "F12", }; export const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0; From 9bf10efa9764213af6a2fd6b130a248d572280ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 23 Jan 2022 10:22:12 +0100 Subject: [PATCH 2/3] Add window bindings MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/KeyBindingsDefaults.ts | 21 +++++++++++++++++++++ src/KeyBindingsManager.ts | 11 +++++++++++ 2 files changed, 32 insertions(+) diff --git a/src/KeyBindingsDefaults.ts b/src/KeyBindingsDefaults.ts index 468d9989520..168046d76db 100644 --- a/src/KeyBindingsDefaults.ts +++ b/src/KeyBindingsDefaults.ts @@ -22,6 +22,7 @@ import { NavigationAction, RoomAction, RoomListAction, + WindowAction, } from "./KeyBindingsManager"; import { isMac, Key } from "./Keyboard"; import SettingsStore from "./settings/SettingsStore"; @@ -411,10 +412,30 @@ const navigationBindings = (): KeyBinding[] => { ]; }; +const windowBindings = (): KeyBinding[] => { + return [ + { + action: WindowAction.OpenBrowserDevtools, + keyCombo: { + key: Key.F12, + }, + }, + { + action: WindowAction.OpenBrowserDevtools, + keyCombo: { + key: Key.I, + shiftKey: true, + ctrlOrCmd: true, + }, + }, + ]; +}; + export const defaultBindingsProvider: IKeyBindingsProvider = { getMessageComposerBindings: messageComposerBindings, getAutocompleteBindings: autocompleteBindings, getRoomListBindings: roomListBindings, getRoomBindings: roomBindings, getNavigationBindings: navigationBindings, + getWindowBindings: windowBindings, }; diff --git a/src/KeyBindingsManager.ts b/src/KeyBindingsManager.ts index 047e0b74c24..7712714af66 100644 --- a/src/KeyBindingsManager.ts +++ b/src/KeyBindingsManager.ts @@ -125,6 +125,12 @@ export enum NavigationAction { SelectNextUnreadRoom = 'SelectNextUnreadRoom', } +/** Actions for navigating do various menus, dialogs or screens */ +export enum WindowAction { + /** Open browser devtools */ + OpenBrowserDevtools = 'OpenBrowserDevtools' +} + /** * Represent a key combination. * @@ -213,6 +219,7 @@ export interface IKeyBindingsProvider { getRoomListBindings: KeyBindingGetter; getRoomBindings: KeyBindingGetter; getNavigationBindings: KeyBindingGetter; + getWindowBindings: KeyBindingGetter; } export class KeyBindingsManager { @@ -264,6 +271,10 @@ export class KeyBindingsManager { getNavigationAction(ev: KeyboardEvent | React.KeyboardEvent): NavigationAction | undefined { return this.getAction(this.bindingsProviders.map(it => it.getNavigationBindings), ev); } + + getWindowAction(ev: KeyboardEvent | React.KeyboardEvent): WindowAction | undefined { + return this.getAction(this.bindingsProviders.map(it => it.getWindowBindings), ev); + } } const manager = new KeyBindingsManager(); From d60e20cb1530c63e4ad9537cfcf046661c1c00b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 23 Jan 2022 10:22:35 +0100 Subject: [PATCH 3/3] Add a console warning MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/structures/MatrixChat.tsx | 35 ++++++++++++++++++++++++ src/i18n/strings/en_EN.json | 3 ++ 2 files changed, 38 insertions(+) diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index 4e05a89815f..38c610029e3 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -119,6 +119,7 @@ import FeedbackDialog from "../views/dialogs/FeedbackDialog"; import AccessibleButton from "../views/elements/AccessibleButton"; import { ActionPayload } from "../../dispatcher/payloads"; import { SummarizedNotificationState } from "../../stores/notifications/SummarizedNotificationState"; +import { getKeyBindingsManager, WindowAction } from "../../KeyBindingsManager"; /** constants for MatrixChat.state.view */ export enum Views { @@ -439,6 +440,10 @@ export default class MatrixChat extends React.PureComponent { this.setState({ pendingInitialSync: false }); } + public componentDidMount(): void { + window.addEventListener("keydown", this.onKeyDown); + } + // TODO: [REACT-WARNING] Replace with appropriate lifecycle stage // eslint-disable-next-line UNSAFE_componentWillUpdate(props, state) { @@ -461,6 +466,7 @@ export default class MatrixChat extends React.PureComponent { } componentWillUnmount() { + window.removeEventListener("keydown", this.onKeyDown); Lifecycle.stopMatrixClient(); dis.unregister(this.dispatcherRef); this.themeWatcher.stop(); @@ -471,6 +477,35 @@ export default class MatrixChat extends React.PureComponent { if (this.accountPasswordTimer !== null) clearTimeout(this.accountPasswordTimer); } + private onKeyDown = (event: KeyboardEvent): void => { + const windowAction = getKeyBindingsManager().getWindowAction(event); + switch (windowAction) { + case WindowAction.OpenBrowserDevtools: { + const largeFontSize = "50px"; + const normalFontSize = "15px"; + + const waitText = _t("Wait!"); + const scamText = _t( + "If someone told you to copy/paste something here, " + + "there is a high likelihood you're being scammed!", + ); + const devText = _t( + "If you know what you're doing, Element is open-source, "+ + "be sure to check out our GitHub (https://github.com/vector-im/element-web/) " + + "and contribute!", + ); + + console.log( + `%c${waitText}\n%c${scamText}\n%c${devText}`, + `font-size:${largeFontSize}; color:blue;`, + `font-size:${normalFontSize}; color:red;`, + `font-size:${normalFontSize};`, + ); + break; + } + } + }; + public trackScreenChange(durationMs: number): void { const notLoggedInMap = {}; notLoggedInMap[Views.LOADING] = "WebLoading"; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 83d550a60b5..fc2c35cbeb4 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -3035,6 +3035,9 @@ "Private community": "Private community", "To view %(communityName)s, swap to communities in your preferences": "To view %(communityName)s, swap to communities in your preferences", "To join %(communityName)s, swap to communities in your preferences": "To join %(communityName)s, swap to communities in your preferences", + "Wait!": "Wait!", + "If someone told you to copy/paste something here, there is a high likelihood you're being scammed!": "If someone told you to copy/paste something here, there is a high likelihood you're being scammed!", + "If you know what you're doing, Element is open-source, be sure to check out our GitHub (https://github.com/vector-im/element-web/) and contribute!": "If you know what you're doing, Element is open-source, be sure to check out our GitHub (https://github.com/vector-im/element-web/) and contribute!", "Failed to reject invitation": "Failed to reject invitation", "Cannot create rooms in this community": "Cannot create rooms in this community", "You do not have permission to create rooms in this community.": "You do not have permission to create rooms in this community.",