Fixed issue 63: `Webpage shows a 'loading' wheel in tabs even when fu…

app.css

@@ -32,7 +32,7 @@ body {
     margin: 0;
     box-sizing: border-box;
     height: 100%;
-	display: flex;
+    display: flex;
     flex-direction: column;
 }
 
@@ -45,7 +45,7 @@ body {
 }
 
 #row-container {
-	display: flex;
+    display: flex;
     flex-direction: row;
     height: 100%;
     box-sizing: border-box;
@@ -118,10 +118,11 @@ body {
 
 #code-editor {
     width: 70em;
+    flex-direction: column;
 }
 
 .CodeMirror {
-    height: 100%;
+    flex-grow: 1;
     font-family: Consolas, monospace;
 }
 

app.js

@@ -23210,6 +23210,21 @@ Array.prototype.fill||Object.defineProperty(Array.prototype,'fill',{value:functi
 
 eval(_CELLS.BOILERPLATE.v);
 
+// fire an event on the document saying that the app is ready
+if (typeof document != "undefined") {
+    var event;
+
+    try {
+        event = new CustomEvent("meshAppReady", {});
+    } catch(e) {
+        // only for IE
+        event = document.createEvent('Event');
+        event.initEvent("meshAppReady", true, true);
+    }
+
+    document.dispatchEvent(event);
+}
+
 // Implies cells should be separate to state - rest of state lives in a cell of the sheet.
 // (That's OK - the cells for editing ui-logic are different from the ones ui-logic is generating.)
 
@@ -23222,4 +23237,4 @@ eval(_CELLS.BOILERPLATE.v);
 // UI LOGIC
 // in default case: needs to send 'expanded cell' (generate_cells) info from full case of calculator. but this can be values only
 // in full case: only needed if you're editing the mesh UI file in Mesh itself
-// needs the values and the source code, but doesn't need to run the file itself
+// needs the values and the source code, but doesn't need to run the file itself

app2.js

@@ -0,0 +1,13 @@
+document.addEventListener("meshAppReady", function() {
+    window._defFunctions();
+    window.onmessage = function(e) {
+        console.log('MESSAGE RECEIVED BY', window.name, ':', e.data);
+        window._defCells(_CELLS); window._extraValues(e.data.values);
+        window._calcSheet(_CELLS); window.parent.postMessage(window._OUTPUT, '*')
+    }
+
+    window._defCells(_CELLS);
+    window._calcSheet(_CELLS);
+    console.log("POST MESSAGE RAF", window._OUTPUT);
+    window.parent.postMessage(window._OUTPUT, '*');
+});

try-mesh.html

@@ -319,9 +319,9 @@
         if (old_state.mode === 'LOAD_CODE_FROM_PANE') {
             send_app_action({ type: 'LOAD_CODE', code: code_editor.getValue() });
         } else if (old_state.mode === 'EDITING_CODE') {
-            HTML_elements.code_editor.style.display = 'block';
+            HTML_elements.code_editor.style.display = 'flex';
         } else {
-            HTML_elements.code_editor.style.display = (old_state.code_editor.show ? 'block' : 'none');
+            HTML_elements.code_editor.style.display = (old_state.code_editor.show ? 'flex' : 'none');
             code_editor.setValue(old_state.code_editor.value);
         }
         // TODO setting this every time is probably slow - consider React-ising
@@ -372,29 +372,12 @@
 
 /* LOAD APP */
 
-app_iframe.contentDocument.write('<script src="./app.js"><\/script>');
-app_iframe.contentDocument.write(
-    '<script>'
-    + "_defFunctions();"
-    + "onmessage = function(e) {"
-    + "    console.log('MESSAGE RECEIVED BY', window.name, ':', e.data);"
-    + "    _defCells(_CELLS); _extraValues(e.data.values);"
-    + "    _calcSheet(_CELLS); parent.postMessage(_OUTPUT, '*')"
-    // TODO what if we only send the deltas? ie only the props in _OUTPUT that changed?
-    + "}"
-    + '<\/script>'
-            // "    if (e.data.action === 'full') {",
-    // "        var V = e.data.values;",
-    // "        for (var k in V) _CELLSdefCell(k, {v: V[k]});",
-    // Ideally keep calcing first uncalced cell til empty
-    // "    }",
-    // TODO reset changed variables at end?
-);
-
-// Trigger sending of initial state by app
-app_iframe.contentDocument.write(
-    "<script>_defCells(_CELLS); _calcSheet(_CELLS); parent.postMessage(_OUTPUT, '*')<\/script>"
-)
+let scriptElement = app_iframe.contentDocument.createElement("script");
+scriptElement.src = "./app.js";
+app_iframe.contentDocument.body.append(scriptElement);
+scriptElement = app_iframe.contentDocument.createElement("script");
+scriptElement.src = "./app2.js";
+app_iframe.contentDocument.body.append(scriptElement);
 
 if (location.hash) {
     // TODO this is a *terrible* race condition. Definitely need to fix