Add support for native keyboard shortcuts in fullscreen (codesandbox#2716)

Author: patrikholcak

packages/app/src/app/vscode/index.ts

@@ -1,9 +1,9 @@
-import {
-  convertTypeToStatus,
-  notificationState,
-} from '@codesandbox/common/lib/utils/notifications';
+import { notificationState } from '@codesandbox/common/lib/utils/notifications';
 import { blocker } from 'app/utils/blocker';
-import { NotificationMessage } from '@codesandbox/notifications/lib/state';
+import {
+  NotificationMessage,
+  NotificationStatus,
+} from '@codesandbox/notifications/lib/state';
 
 import { KeyCode, KeyMod } from './keyCodes';
 import bootstrap from './dev-bootstrap';
@@ -113,6 +113,42 @@ class VSCodeManager {
       },
     });
 
+    this.addWorkbenchAction({
+      id: 'view.fullscreen',
+      label: 'Toggle Fullscreen',
+      category: 'View',
+      run: () => {
+        if (document.fullscreenElement) {
+          document.exitFullscreen();
+        } else {
+          document.documentElement.requestFullscreen();
+
+          this.addNotification({
+            title: 'Fullscreen',
+            message:
+              'You are now in fullscreen mode. Press and hold ESC to exit',
+            status: NotificationStatus.NOTICE,
+            timeAlive: 5000,
+          });
+
+          if ('keyboard' in navigator) {
+            // @ts-ignore - keyboard locking is experimental api
+            navigator.keyboard.lock([
+              'Escape',
+              'KeyW',
+              'KeyN',
+              'KeyT',
+              'ArrowLeft',
+              'ArrowRight',
+            ]);
+          }
+        }
+      },
+      keybindings: {
+        primary: KeyMod.WinCtrl | KeyMod.Alt | KeyCode.KEY_F,
+      },
+    });
+
     this.appendMenuItem(MenuId.MenubarFileMenu, {
       group: '1_new',
       order: 1,
@@ -159,6 +195,15 @@ class VSCodeManager {
       order: 2,
     });
 
+    this.appendMenuItem(MenuId.MenubarViewMenu, {
+      group: '1_toggle_view',
+      order: 0,
+      command: {
+        id: 'view.fullscreen',
+        title: 'Toggle Fullscreen',
+      },
+    });
+
     const addBrowserNavigationCommand = (
       id: string,
       label: string,
@@ -304,16 +349,8 @@ class VSCodeManager {
     });
   }
 
-  addNotification(
-    message: string,
-    type: 'warning' | 'notice' | 'error' | 'success',
-    notification: NotificationMessage
-  ) {
-    notificationState.addNotification({
-      message,
-      status: convertTypeToStatus(type),
-      ...notification,
-    });
+  addNotification(notification: NotificationMessage) {
+    notificationState.addNotification(notification);
   }
 
   /**