Add shortcut to zoom in/out

Summary: Add zoom in/out shortcut with alt-plus/minus

Reviewed By: quark-zju

Differential Revision: D51869325

fbshipit-source-id: 95488fdeb31a39b7d3c1817c95f3293e69b88f16

addons/isl/src/ISLShortcuts.tsx

@@ -28,6 +28,8 @@ export const [ISLCommandContext, useCommand, dispatchCommand, allCommands] = mak
   ContinueSelectionDownwards: [Modifier.SHIFT, KeyCode.DownArrow],
   SelectAllCommits: [Modifier.ALT, KeyCode.A],
   HideSelectedCommits: [Modifier.NONE, KeyCode.Backspace],
+  ZoomIn: [Modifier.ALT, KeyCode.Plus],
+  ZoomOut: [Modifier.ALT, KeyCode.Minus],
   ToggleTheme: [Modifier.ALT, KeyCode.T],
   ToggleShelvedChangesDropdown: [Modifier.ALT, KeyCode.S],
   ToggleDownloadCommitsDropdown: [Modifier.ALT, KeyCode.D],
@@ -54,6 +56,8 @@ export const ISLShortcutLabels: Partial<Record<ISLCommandName, string>> = {
   OpenHeadChangesComparisonView: t('Open Head Changes Comparison View'),
   SelectAllCommits: t('Select All Commits'),
   ToggleTheme: t('Toggle Light/Dark Theme'),
+  ZoomIn: t('Zoom In'),
+  ZoomOut: t('Zoom Out'),
   ToggleShelvedChangesDropdown: t('Toggle Shelved Changes Dropdown'),
   ToggleDownloadCommitsDropdown: t('Toggle Download Commits Dropdown'),
   ToggleCwdDropdown: t('Toggle CWD Dropdown'),

addons/isl/src/Kbd.tsx

@@ -33,6 +33,10 @@ function keycodeToString(keycode: KeyCode): string {
       return '.';
     case KeyCode.Escape:
       return 'Esc';
+    case KeyCode.Plus:
+      return '+';
+    case KeyCode.Minus:
+      return '-';
     default:
       return String.fromCharCode(keycode).toUpperCase();
   }

addons/isl/src/SettingsTooltip.tsx

@@ -23,7 +23,7 @@ import {debugToolsEnabledState} from './debug/DebugToolsState';
 import {t, T} from './i18n';
 import {SetConfigOperation} from './operations/SetConfigOperation';
 import platform from './platform';
-import {renderCompactAtom, zoomUISettingAtom} from './responsive';
+import {renderCompactAtom, useZoomShortcut, zoomUISettingAtom} from './responsive';
 import {repositoryInfo, useRunOperation} from './serverAPIState';
 import {useThemeShortcut, themeState} from './theme';
 import {
@@ -43,6 +43,7 @@ import './SettingsTooltip.css';
 
 export function SettingsGearButton() {
   useThemeShortcut();
+  useZoomShortcut();
   const showShortcutsHelp = useShowKeyboardShortcutsHelp();
   return (
     <Tooltip

addons/isl/src/responsive.tsx

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import {globalRecoil} from './AccessGlobalRecoil';
+import {useCommand} from './ISLShortcuts';
 import {
   persistAtomToConfigEffect,
   persistAtomToLocalStorageEffect,
@@ -40,6 +42,15 @@ export const zoomUISettingAtom = atom<number>({
   ],
 });
 
+export function useZoomShortcut() {
+  useCommand('ZoomIn', () => {
+    globalRecoil().set(zoomUISettingAtom, old => Math.round((old + 0.1) * 100) / 100);
+  });
+  useCommand('ZoomOut', () => {
+    globalRecoil().set(zoomUISettingAtom, old => Math.round((old - 0.1) * 100) / 100);
+  });
+}
+
 export function useMainContentWidth() {
   const setMainContentWidth = useSetRecoilState(mainContentWidthState);
 

addons/shared/KeyboardShortcuts.tsx

@@ -48,6 +48,8 @@ export enum KeyCode {
   RightArrow = 39,
   DownArrow = 40,
   Backspace = 8,
+  Plus = 187,
+  Minus = 189,
 }
 
 type CommandDefinition = [Modifiers, KeyCode];