Allow Shift-F2 to maximize the Apple screen in the window

Normally, F2 causes the browser to go full-screen, showing only the
Apple screen. However, in Chrome, the user can exit full-screen mode
by pressing ESC. Since ESC is used frequently on the Apple //e, this
limits the utility of full-screen mode.

To work around this problem, this change adds Shift-F2, which will
make the Apple fill the window without going full-screen. This allows
the user to go make the window full-screen in some other way, thus
enabling the use of the ESC key.

Note that the method used is almost entirely implemented in CSS, with
just a few lines of code to change the classes on some elements. This
may not be the best long-term way of implementing this feature.

css/apple2.css

@@ -81,6 +81,45 @@ label {
     border-radius: 10px;
 }
 
+.zoomwindow {
+    width: 100vw;
+    height: 68.5714vw; /* 384px / 560px * 100% */
+    max-height: 100vh;
+    max-width: 145.83vh; /* 560px / 384px * 100% */
+    padding: 0;
+    border: 0;
+    position: fixed;
+    top:0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    justify-content: center;
+    align-items: center;
+    margin: auto !important;
+}
+
+.maxhw {
+    width: 100%;
+    height: 100%;
+}
+
+.flexbox-centering {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: green;
+}
+
+.hidden {
+    display: none !important;
+}
+
+.fillparent {
+    width: 100%;
+    height: 100%;
+}
+
 #power {
     padding: 2px;
     border: 1px inset #888;

js/main2e.js

@@ -793,7 +793,16 @@ function _keydown(evt) {
         cpu.reset();
     } else if (evt.keyCode === 113) { // F2 - Full Screen
         var elem = document.getElementById('screen');
-        if (document.webkitCancelFullScreen) {
+        if (evt.shiftKey) { // Full window, but not full screen
+            $('#display').toggleClass('zoomwindow');
+            $('#display > div')
+                .toggleClass('overscan')
+                .toggleClass('flexbox-centering');
+            $('#screen').toggleClass('maxhw');
+            $('#header').toggleClass('hidden');
+            $('.inset').toggleClass('hidden');
+            $('#reset').toggleClass('hidden');
+        } else if (document.webkitCancelFullScreen) {
             if (document.webkitIsFullScreen) {
                 document.webkitCancelFullScreen();
             } else {