Add 'Aw, snap?' message

Author: CompuIves

packages/app/src/sandbox/compile.js

@@ -25,6 +25,8 @@ import loadDependencies from './npm';
 import { consumeCache, saveCache, deleteAPICache } from './eval/cache';
 import getDefinition from '../../../common/templates/index';
 
+import { showRunOnClick } from './status-screen/run-on-click';
+
 let initializedResizeListener = false;
 let manager: ?Manager = null;
 let actionsEnabled = false;
@@ -304,6 +306,18 @@ async function compile({
     type: 'start',
   });
 
+  try {
+    if (localStorage.getItem('running')) {
+      localStorage.removeItem('running');
+      showRunOnClick();
+      return;
+    }
+
+    localStorage.setItem('running', 'true');
+  } catch (e) {
+    /* no */
+  }
+
   const startTime = Date.now();
   try {
     inject();
@@ -588,6 +602,12 @@ async function compile({
   dispatch({ type: 'status', status: 'idle' });
   dispatch({ type: 'done' });
 
+  try {
+    localStorage.removeItem('running');
+  } catch (e) {
+    /* no */
+  }
+
   if (typeof window.__puppeteer__ === 'function') {
     window.__puppeteer__('done');
   }

packages/app/src/sandbox/index.js

@@ -7,11 +7,11 @@ import registerServiceWorker from 'common/registerServiceWorker';
 import requirePolyfills from 'common/load-dynamic-polyfills';
 import { getModulePath } from 'common/sandbox/modules';
 import { generateFileFromSandbox } from 'common/templates/configuration/package-json';
+import { Encode } from 'console-feed';
 
 import setupHistoryListeners from './url-listeners';
 import compile, { getCurrentManager } from './compile';
 import setupConsole from './console';
-import { Encode } from 'console-feed';
 
 const host = process.env.CODESANDBOX_HOST;
 const debug = _debug('cs:sandbox');

packages/app/src/sandbox/status-screen/index.js

@@ -2,6 +2,8 @@
 // This is the loading screen
 import loadingHtml from '!raw-loader!./loading-screen.html';
 
+import { createOverlay, resetOverlay } from './overlay-manager';
+
 type LoadingScreen = {
   type: 'loading',
   text: string,
@@ -24,53 +26,28 @@ function changeText(text: string) {
   }
 }
 
-function createOverlay() {
-  return new Promise(resolve => {
-    const iframe = document.createElement('iframe');
-
-    iframe.setAttribute(
-      'style',
-      `position: fixed; top: 0; left: 0; width: 100%; height: 100%; border: none; z-index: 214748366;`
-    );
-
-    iframe.onload = () => {
-      iframe.contentDocument.body.innerHTML = loadingHtml;
-      iframeReference = iframe;
-
-      if (currentScreen) {
-        changeText(currentScreen.text);
-      }
-      resolve();
-    };
-
-    document.body.appendChild(iframe);
-  });
-}
-
 export function resetScreen() {
   currentScreen = null;
-  try {
-    window.document.body.removeChild(iframeReference);
-    iframeReference = null;
-  } catch (e) {
-    /* nothing */
-  }
+  iframeReference = null;
+  resetOverlay();
 }
 
 export default function setScreen(screen: Screen) {
-  if (!iframeReference && !currentScreen) {
+  if (!iframeReference) {
     if (!firstLoaded) {
       // Give the illusion of faster loading by showing the loader screen later
-      firstLoaded = setTimeout(() => {
+      firstLoaded = setTimeout(async () => {
+        if (!iframeReference && currentScreen) {
+          iframeReference = await createOverlay(loadingHtml);
+        }
+
         if (currentScreen) {
-          createOverlay();
+          changeText(currentScreen.text);
         }
       }, 600);
-    } else {
-      createOverlay(screen.text);
     }
-  } else if (screen.type === 'loading') {
-    changeText(screen.text);
+  } else if (currentScreen) {
+    changeText(currentScreen.text);
   }
 
   currentScreen = screen;

packages/app/src/sandbox/status-screen/overlay-manager.js

@@ -0,0 +1,53 @@
+let iframeReference = null;
+
+export function resetOverlay() {
+  try {
+    window.document.body.removeChild(iframeReference);
+    iframeReference = null;
+  } catch (e) {
+    /* nothing */
+  }
+}
+
+function createIframe() {
+  return new Promise(resolve => {
+    if (iframeReference) {
+      resolve(iframeReference);
+    }
+
+    const iframe = document.createElement('iframe');
+
+    iframe.setAttribute(
+      'style',
+      `position: fixed; top: 0; left: 0; width: 100%; height: 100%; border: none; z-index: 214748366;`
+    );
+    iframe.setAttribute('id', 'frame');
+
+    iframeReference = iframe;
+
+    document.body.appendChild(iframe);
+
+    if (iframe.contentDocument) {
+      resolve(iframe);
+    } else {
+      document.getElementById('frame').addEventListener('load', () => {
+        resolve(iframe);
+      });
+    }
+  });
+}
+
+export function createOverlay(html: string) {
+  return new Promise(async resolve => {
+    const iframe = await createIframe();
+
+    const isMounted = !!document.getElementById('frame');
+    if (!isMounted) {
+      document.body.appendChild(iframe);
+    }
+
+    iframe.contentDocument.body.innerHTML = html;
+
+    resolve(iframe);
+  });
+}

packages/app/src/sandbox/status-screen/run-on-click-screen.html

@@ -0,0 +1,66 @@
+<style>
+  body {
+    font-family: 'Roboto', sans-serif;
+    background-color: #FFD399;
+
+    cursor: pointer;
+  }
+
+
+  .container {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    margin: 0 auto;
+
+    width: 100vw;
+    height: 100vh;
+  }
+
+  .text {
+    padding: 1rem;
+    color: #f27777;
+    font-size: 1.25rem;
+    max-width: 600px;
+    line-height: 1.4;
+    font-weight: 600;
+    text-align: center;
+  }
+</style>
+
+<div id="loading-screen" class="container">
+  <svg width="149" height="167" viewBox="0 0 447 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <g id="Custom-Preset" transform="translate(-27.000000, 0.000000)">
+        <g id="play" transform="translate(27.000000, 0.000000)">
+          <polygon id="Path" fill="#6BAFDD" points="48.0363353 348.667139 223.440448 446.191204 398.963665 348.315773 398.963665 153.345936 223.526065 54.9352672 48.0363353 153.810752"></polygon>
+          <path d="M0,376.74889 L0,125.911037 L223.473937,0 L447,125.385604 L447,376.35757 L223.474645,501 L0,376.74889 Z M48.0363353,348.667139 L223.440448,446.191204 L398.963665,348.315773 L398.963665,153.345936 L223.526065,54.9352672 L48.0363353,153.810752 L48.0363353,348.667139 Z"
+            id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
+          <rect id="Rectangle" fill="#FFFFFF" x="130" y="170" width="60" height="161" rx="8"></rect>
+          <rect id="Rectangle-Copy" fill="#FFFFFF" x="258" y="170" width="60" height="161" rx="8"></rect>
+        </g>
+      </g>
+    </g>
+  </svg>
+
+  <div class="text">
+    <h1>Aw, Snap?</h1>
+    <div>We noticed that the sandbox didn't complete its last run. This could be because of some code that crashed the browser.
+      We paused execution so you can check the code.</div>
+
+    <h2>Click to continue execution</h2>
+  </div>
+</div>

packages/app/src/sandbox/status-screen/run-on-click.js

@@ -0,0 +1,12 @@
+import { createOverlay, resetOverlay } from './overlay-manager';
+import html from '!raw-loader!./run-on-click-screen.html';
+
+export function showRunOnClick() {
+  return new Promise(async resolve => {
+    const iframe = await createOverlay(html);
+
+    iframe.contentDocument.body.addEventListener('click', () => {
+      document.location.reload();
+    });
+  });
+}