Add a keyboard shortcut to toggle hidden event visibility when labs are enabled

src/KeyBindingsDefaults.ts

@@ -22,9 +22,11 @@ import {
  NavigationAction,
  RoomAction,
  RoomListAction,
+ LabsAction,
 } from "./KeyBindingsManager";
 import { isMac, Key } from "./Keyboard";
 import SettingsStore from "./settings/SettingsStore";
+import SdkConfig from "./SdkConfig";
 
 const messageComposerBindings = (): KeyBinding<MessageComposerAction>[] => {
  const bindings: KeyBinding<MessageComposerAction>[] = [
@@ -411,10 +413,28 @@ const navigationBindings = (): KeyBinding<NavigationAction>[] => {
  ];
 };
 
+const labsBindings = (): KeyBinding<LabsAction>[] => {
+ if (!SdkConfig.get()['showLabsSettings']) {
+ return [];
+ }
+
+ return [
+ {
+ action: LabsAction.ToggleHiddenEventVisibility,
+ keyCombo: {
+ key: Key.H,
+ ctrlOrCmd: true,
+ shiftKey: true,
+ },
+ },
+ ];
+};
+
 export const defaultBindingsProvider: IKeyBindingsProvider = {
  getMessageComposerBindings: messageComposerBindings,
  getAutocompleteBindings: autocompleteBindings,
  getRoomListBindings: roomListBindings,
  getRoomBindings: roomBindings,
  getNavigationBindings: navigationBindings,
+ getLabsBindings: labsBindings,
 };

src/KeyBindingsManager.ts

@@ -125,6 +125,12 @@ export enum NavigationAction {
  SelectNextUnreadRoom = 'SelectNextUnreadRoom',
 }
 
+/** Actions only available when labs are enabled */
+export enum LabsAction {
+ /** Toggle visibility of hidden events */
+ ToggleHiddenEventVisibility = 'ToggleHiddenEventVisibility',
+}
+
 /**
  * Represent a key combination.
  *
@@ -213,6 +219,7 @@ export interface IKeyBindingsProvider {
  getRoomListBindings: KeyBindingGetter<RoomListAction>;
  getRoomBindings: KeyBindingGetter<RoomAction>;
  getNavigationBindings: KeyBindingGetter<NavigationAction>;
+ getLabsBindings: KeyBindingGetter<LabsAction>;
 }
 
 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);
  }
+
+ getLabsAction(ev: KeyboardEvent | React.KeyboardEvent): LabsAction | undefined {
+ return this.getAction(this.bindingsProviders.map(it => it.getLabsBindings), ev);
+ }
 }
 
 const manager = new KeyBindingsManager();

src/accessibility/KeyboardShortcuts.ts

@@ -31,6 +31,7 @@ export enum CategoryName {
  ROOM_LIST = "Room List",
  ROOM = "Room",
  AUTOCOMPLETE = "Autocomplete",
+ LABS = "Labs",
 }
 
 // Meta-key representing the digits [0-9] often found at the top of standard keyboard layouts
@@ -125,6 +126,11 @@ export const CATEGORIES: Record<CategoryName, ICategory> = {
  "KeyBinding.nextOptionInAutoComplete",
  "KeyBinding.previousOptionInAutoComplete",
  ],
+ }, [CategoryName.LABS]: {
+ categoryLabel: _td("Labs"),
+ settingNames: [
+ "KeyBinding.toggleHiddenEventVisibility",
+ ],
  },
 };
 
@@ -402,6 +408,14 @@ export const KEYBOARD_SHORTCUTS: { [setting: string]: ISetting } = {
  },
  displayName: _td("Toggle space panel"),
  },
+ "KeyBinding.toggleHiddenEventVisibility": {
+ default: {
+ ctrlOrCmdKey: true,
+ shiftKey: true,
+ key: Key.H,
+ },
+ displayName: _td("Toggle hidden event visibility"),
+ },
 };
 
 export const registerShortcut = (shortcutName: string, categoryName: CategoryName, shortcut: ISetting): void => {

src/components/structures/LoggedInView.tsx

@@ -29,6 +29,7 @@ import { fixupColorFonts } from '../../utils/FontManager';
 import dis from '../../dispatcher/dispatcher';
 import { IMatrixClientCreds } from '../../MatrixClientPeg';
 import SettingsStore from "../../settings/SettingsStore";
+import { SettingLevel } from "../../settings/SettingLevel";
 import ResizeHandle from '../views/elements/ResizeHandle';
 import { CollapseDistributor, Resizer } from '../../resizer';
 import MatrixClientContext from "../../contexts/MatrixClientContext";
@@ -47,7 +48,7 @@ import { IOOBData, IThreepidInvite } from "../../stores/ThreepidInviteStore";
 import Modal from "../../Modal";
 import { ICollapseConfig } from "../../resizer/distributors/collapse";
 import HostSignupContainer from '../views/host_signup/HostSignupContainer';
-import { getKeyBindingsManager, NavigationAction, RoomAction } from '../../KeyBindingsManager';
+import { getKeyBindingsManager, NavigationAction, RoomAction, LabsAction } from '../../KeyBindingsManager';
 import { IOpts } from "../../createRoom";
 import SpacePanel from "../views/spaces/SpacePanel";
 import { replaceableComponent } from "../../utils/replaceableComponent";
@@ -531,6 +532,33 @@ class LoggedInView extends React.Component<IProps, IState> {
  // if we do not have a handler for it, pass it to the platform which might
  handled = PlatformPeg.get().onKeyDown(ev);
  }
+
+ // Handle labs actions here, as they apply within the same scope
+ if (!handled) {
+ const labsAction = getKeyBindingsManager().getLabsAction(ev);
+ switch (labsAction) {
+ case LabsAction.ToggleHiddenEventVisibility: {
+ const hiddenEventVisibility = SettingsStore.getValueAt(
+ SettingLevel.DEVICE,
+ 'showHiddenEventsInTimeline',
+ undefined,
+ false,
+ );
+ SettingsStore.setValue(
+ 'showHiddenEventsInTimeline',
+ undefined,
+ SettingLevel.DEVICE,
+ !hiddenEventVisibility,
+ );
+ handled = true;
+ break;
+ }
+ default:
+ // if we do not have a handler for it, pass it to the platform which might
+ handled = PlatformPeg.get().onKeyDown(ev);
+ }
+ }
+
  if (handled) {
  ev.stopPropagation();
  ev.preventDefault();

src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx

@@ -25,6 +25,7 @@ import {
  CATEGORIES,
  CategoryName,
 } from "../../../../../accessibility/KeyboardShortcuts";
+import SdkConfig from "../../../../../SdkConfig";
 import { isMac, Key } from "../../../../../Keyboard";
 import { _t } from "../../../../../languageHandler";
 
@@ -76,6 +77,10 @@ interface IKeyboardShortcutRowProps {
  name: string;
 }
 
+// Filter out the labs section if labs aren't enabled.
+const visibleCategories = Object.entries(CATEGORIES).filter(([categoryName]) =>
+ categoryName !== CategoryName.LABS || SdkConfig.get()['showLabsSettings']);
+
 const KeyboardShortcutRow: React.FC<IKeyboardShortcutRowProps> = ({ name }) => {
  return <div className="mx_KeyboardShortcut_shortcutRow">
  { KEYBOARD_SHORTCUTS[name].displayName }
@@ -100,7 +105,7 @@ const KeyboardShortcutSection: React.FC<IKeyboardShortcutSectionProps> = ({ cate
 const KeyboardUserSettingsTab: React.FC = () => {
  return <div className="mx_SettingsTab mx_KeyboardUserSettingsTab">
  <div className="mx_SettingsTab_heading">{ _t("Keyboard") }</div>
- { Object.entries(CATEGORIES).map(([categoryName, category]: [CategoryName, ICategory]) => {
+ { visibleCategories.map(([categoryName, category]: [CategoryName, ICategory]) => {
  return <KeyboardShortcutSection key={categoryName} categoryName={categoryName} category={category} />;
  }) }
  </div>;

src/i18n/strings/en_EN.json

@@ -3414,5 +3414,6 @@
  "Cancel autocomplete": "Cancel autocomplete",
  "Next autocomplete suggestion": "Next autocomplete suggestion",
  "Previous autocomplete suggestion": "Previous autocomplete suggestion",
- "Toggle space panel": "Toggle space panel"
+ "Toggle space panel": "Toggle space panel",
+ "Toggle hidden event visibility": "Toggle hidden event visibility"
 }