some tests

outputframe-app/app.html

@@ -1 +1,3 @@
-<render-canvas></render-canvas>
+<render-canvas></render-canvas>
+<loading-spinner></loading-spinner>
+hi

outputframe-app/boot.ts

@@ -7,14 +7,26 @@ import { messageListener } from '../shared/message-listener';
 import { postMessage, postResponseMessage } from '../shared/post-message';
 import { RenderCanvas } from './elements/render-canvas/render-canvas';
 import { getCenter, getHeight, getRandom, getWidth, rect, box, getRandomColor } from './injects/dom-helpers';
+import { setWindowStop } from './injects/window-stop';
+import { LoadingSpinner } from './elements/loading-spinner/loading-spinner';
 
 
+window.customElements.define('loading-spinner', LoadingSpinner);
 window.customElements.define('render-canvas', RenderCanvas);
 
-document.body.innerHTML += bootHtml;
+console.log("BOOTING");
 
+document.body.innerHTML += bootHtml;
+let consoleLimit = 10;
 watchConsole((type, value) => {
-    postMessage(parent, type, value);
+    if (consoleLimit > 0) {
+        --consoleLimit;
+        postMessage(parent, type, value.toString());
+    }
+    else if (consoleLimit === 0) {
+        --consoleLimit;
+        postMessage(parent, type, "+ more");
+    }
 });
 messageListener((type, value, id) => {
     if (type == "javascript") {
@@ -45,4 +57,6 @@ window.center = getCenter;
 //@ts-ignore
 window.rand = getRandom;
 //@ts-ignore
-window.randomColor = getRandomColor;
+window.randomColor = getRandomColor;
+
+setWindowStop();

outputframe-app/elements/loading-spinner/loading-spinner.less

@@ -0,0 +1,32 @@
+loading-spinner {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    opacity: 0.3;
+    height: 10px;
+}
+
+loading-spinner::before {
+  position: absolute;
+  content: "";
+  width: 10px;
+  height: 100%;
+  top: 0;
+  left: 0;
+  animation-name: loadingAnimation;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  background-color: blue;
+}
+
+@keyframes loadingAnimation {
+  0% {
+    left: 0;
+  }
+  100% {
+    left: calc(100% - 10px);
+  }
+}

outputframe-app/elements/loading-spinner/loading-spinner.ts

@@ -0,0 +1,7 @@
+import { BaseElement } from '../../../shared/_base';
+import './loading-spinner.less';
+
+export class LoadingSpinner extends BaseElement {
+    onInit(): void {
+    }
+}

outputframe-app/injects/watch-console.ts

@@ -1,24 +1,24 @@
 import { NotificationBubbles } from "../../codeeditor-app/elements/notification-bubbles/notification-bubbles";
 
-export function watchConsole(fn: (type: 'log' | 'info' | 'warn' | 'error', value: any) => void) {
+export function watchConsole(fn: (type: 'log' | 'info' | 'warn' | 'error', ...value: any[]) => void) {
     // define a new console
     var console: any = (function (oldCons) {
         return {
-            log: function (text: any) {
-                oldCons.log(text);
-                fn('log', text);
+            log: function (...data: any[]) {
+                oldCons.log(...data);
+                fn('log', data);
             },
-            info: function (text: any) {
-                oldCons.info(text);
-                fn('info', text);
+            info: function (...data: any[]) {
+                oldCons.info(...data);
+                fn('info', data);
             },
-            warn: function (text: any) {
-                oldCons.warn(text);
-                fn('warn', text);
+            warn: function (...data: any[]) {
+                oldCons.warn(...data);
+                fn('warn', data);
             },
-            error: function (text: any) {
-                oldCons.error(text);
-                fn('error', text);
+            error: function (...data: any[]) {
+                oldCons.error(...data);
+                fn('error', data);
             }
         };
     }(window.console));

outputframe-app/injects/window-stop.ts

@@ -1,4 +1,6 @@
-setTimeout(() => {
-    window.stop();
-    console.log("window stopped");
-}, 4 * 1000);
+export function setWindowStop() {
+    setTimeout(() => {
+        window.stop();
+        //throw new Error("window stopped");
+    }, 4 * 1000);
+}

outputframe-app/static/index.html

@@ -6,9 +6,39 @@
         content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>output</title>
     <base href="/" />
+    <style>
+        body {
+            font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
+        }
+
+        .center {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 32px;
+            text-align: center;
+            opacity: 0.04;
+            font-weight: 100;
+        }
+
+        small {
+            font-size: 0.6em;
+        }
+
+
+        @media (prefers-color-scheme: dark) {
+            .center {
+                color: white;
+            }
+        }
+    </style>
 </head>
 
 <body>
+    <div class="center">
+        codeeditor
+    </div>
     <script type="text/javascript" src="/output.frame.bundle.js?v=1"></script>
 </body>