Update fullscreen api calls, save fullpage state

css/apple2.css

@@ -221,8 +221,8 @@ canvas {
     background-color: black;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
+    width: 100vw;
+    height: 100vh;
 }
 
 #about {

js/ui/apple2.ts

@@ -28,7 +28,7 @@ import Apple2IO from '../apple2io';
 import Printer from './printer';
 
 import { OptionsModal } from './options_modal';
-import { Screen } from './screen';
+import { Screen, SCREEN_FULL_PAGE } from './screen';
 import { JoyStick } from './joystick';
 import { System } from './system';
 
@@ -883,7 +883,16 @@ function onLoaded(apple2: Apple2, disk2: DiskII, massStorage: MassStorage, print
     keyboard = new KeyBoard(cpu, io, e);
     keyboard.create('#keyboard');
     keyboard.setFunction('F1', () => cpu.reset());
-    keyboard.setFunction('F2', screen.enterFullScreen);
+    keyboard.setFunction('F2', (event) => {
+        if (event.shiftKey) { // Full window, but not full screen
+            optionsModal.setOption(
+                SCREEN_FULL_PAGE,
+                !optionsModal.getOption(SCREEN_FULL_PAGE)
+            );
+        } else {
+            screen.enterFullScreen();
+        }
+    });
     keyboard.setFunction('F3', () => io.keyDown(0x1b)); // Escape
     keyboard.setFunction('F4', optionsModal.openModal);
     keyboard.setFunction('F6', () => {

js/ui/screen.ts

@@ -10,49 +10,31 @@ declare global {
     interface Document {
         webkitCancelFullScreen: () => void;
         webkitIsFullScreen: boolean;
-        mozCancelFullScreen: () => void;
-        mozIsFullScreen: boolean;
     }
     interface Element {
         webkitRequestFullScreen: (options?: any) => void;
-        mozRequestFullScreen: () => void;
     }
 }
 export class Screen implements OptionHandler {
     constructor(private vm: VideoModes) {}
 
-    enterFullScreen = (evt: KeyboardEvent) => {
+    enterFullScreen = () => {
         const elem = document.getElementById('screen')!;
-        if (evt.shiftKey) { // Full window, but not full screen
-            this.setFullPage(!document.body.classList.contains('full-page'));
-        } else if (document.webkitCancelFullScreen) {
+        if (document.fullscreenEnabled) {
+            if (document.fullscreenElement) {
+                void document.exitFullscreen();
+            } else {
+                void elem.requestFullscreen();
+            }
+        } else if (elem.webkitRequestFullScreen) {
             if (document.webkitIsFullScreen) {
                 document.webkitCancelFullScreen();
             } else {
-                const allowKeyboardInput = (Element as any).ALLOW_KEYBOARD_INPUT;
-                if (allowKeyboardInput) {
-                    elem.webkitRequestFullScreen(allowKeyboardInput);
-                } else {
-                    elem.webkitRequestFullScreen();
-                }
-            }
-        } else if (document.mozCancelFullScreen) {
-            if (document.mozIsFullScreen) {
-                document.mozCancelFullScreen();
-            } else {
-                elem.mozRequestFullScreen();
+                elem.webkitRequestFullScreen();
             }
         }
     };
 
-    setFullPage(on: boolean) {
-        if (on) {
-            document.body.classList.add('full-page');
-        } else {
-            document.body.classList.remove('full-page');
-        }
-    }
-
     getOptions() {
         return [
             {
@@ -100,4 +82,12 @@ export class Screen implements OptionHandler {
                 break;
         }
     }
+
+    private setFullPage(on: boolean) {
+        if (on) {
+            document.body.classList.add('full-page');
+        } else {
+            document.body.classList.remove('full-page');
+        }
+    }
 }