toggle editor fullscreen (focus mode)

index.html

@@ -41,8 +41,9 @@
         grid-template-columns: 70% 30%;
       }
 
-      .bottom {
-        display: grid;
+      .root.fullscreen_editor {
+        grid-template-columns: 100% 0%;
+        grid-template-rows: 1fr 0fr 2.5em;
       }
 
       .editor_container, .bottom, .eval, .files_container, .statusbar {
@@ -134,8 +135,8 @@
 
       .bottom {
         grid-area: bottom;
-        position: relative;
         overflow: auto;
+        display: grid;
       }
 
       .debugger {

src/editor/editor.js

@@ -329,6 +329,14 @@ export class Editor {
       }
     })
 
+    this.ace_editor.commands.bindKey("F5", "fullscreen_editor");
+    this.ace_editor.commands.addCommand({
+      name: 'fullscreen_editor',
+      exec: (editor) => {
+        this.ui.fullscreen_editor()
+      }
+    })
+
 
     this.ace_editor.commands.bindKey("F1", "focus_value_explorer");
     this.ace_editor.commands.addCommand({

src/editor/ui.js

@@ -283,6 +283,7 @@ export class UI {
       ['Step out of call', 'Ctrl-o', '\\o'],
       ['When in call tree view, jump to return statement', 'Enter'],
       ['When in call tree view, jump to function arguments', 'a'],
+      ['Expand/collapse editor to fullscreen', 'F5'],
     ]
     return el('dialog', 'help_dialog',
       el('table', 'help',
@@ -314,4 +315,9 @@ export class UI {
     )
   }
 
+  fullscreen_editor() {
+    this.root.classList.toggle('fullscreen_editor')
+    this.editor.ace_editor.resize()
+  }
+
 }