Fix all Safari problems with embed (codesandbox#1708)

CompuIves · web-flow · commit 94012c00f7bf · 2019-04-03T19:47:58.000+02:00
* Fix all Safari problems with embed

* Fix tests

* Fix QuotaExceededError issues
diff --git a/packages/app/src/app/components/Preview/DevTools/Tabs/elements.ts b/packages/app/src/app/components/Preview/DevTools/Tabs/elements.ts
@@ -6,6 +6,7 @@ export const Container = styled.div`
   height: 100%;
   width: 100%;
   margin-right: 1rem;
+  overflow: hidden;
 `;
 
 export const Tabs = styled.div`
diff --git a/packages/app/src/embed/components/App/elements.js b/packages/app/src/embed/components/App/elements.js
@@ -12,7 +12,7 @@ export const Container = styled.div`
 
 export const Fullscreen = styled.div`
   width: 100vw;
-  height: 100vh;
+  height: 100%;
   overflow: hidden;
 `;
 
diff --git a/packages/app/src/embed/components/Sidebar/elements.js b/packages/app/src/embed/components/Sidebar/elements.js
@@ -7,7 +7,7 @@ export const Container = styled.div`
   height: 100%;
   color: rgba(255, 255, 255, 0.8);
   z-index: 10;
-  background-color: ${props => props.theme.background.darken(0.1)};
+  background-color: ${props => props.theme.sidebar};
   overflow: auto;
 `;
 
diff --git a/packages/app/src/embed/index.html b/packages/app/src/embed/index.html
@@ -70,7 +70,7 @@
     <!-- {{SANDBOX_DATA}} -->
   </head>
 
-  <body style="margin: 0; padding: 0; background-color: #1C2022; overflow: hidden;">
+  <body style="margin: 0; padding: 0; background-color: #191d1f; overflow: hidden;">
     <!-- Google Tag Manager (noscript) -->
     <noscript>
       <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T3L6RFK"
diff --git a/packages/app/src/sandbox/eval/cache.ts b/packages/app/src/sandbox/eval/cache.ts
@@ -71,7 +71,7 @@ export async function saveCache(
           'kb to indexedDB'
       );
     }
-    localforage.setItem(manager.id, managerState);
+    await localforage.setItem(manager.id, managerState);
   } catch (e) {
     if (process.env.NODE_ENV === 'development') {
       console.error(e);
diff --git a/packages/app/src/sandbox/eval/manager.ts b/packages/app/src/sandbox/eval/manager.ts
@@ -1,4 +1,3 @@
-
 import { flattenDeep, uniq, values } from 'lodash-es';
 import { Protocol } from 'codesandbox-api';
 import resolve from 'browser-resolve';
@@ -1167,9 +1166,9 @@ export default class Manager {
     return deleteAPICache(this.id);
   }
 
-  clearCache() {
+  async clearCache() {
     try {
-      clearIndexedDBCache();
+      await clearIndexedDBCache();
     } catch (ex) {
       if (process.env.NODE_ENV === 'development') {
         console.error(ex);
diff --git a/packages/common/src/__snapshots__/theme.test.js.snap b/packages/common/src/__snapshots__/theme.test.js.snap
@@ -27,6 +27,7 @@ Object {
   "redBackground": [Function],
   "secondary": [Function],
   "shySecondary": [Function],
+  "sidebar": [Function],
   "vscodeTheme": Object {
     "$schema": "vscode://schemas/color-theme",
     "colors": Object {
diff --git a/packages/common/src/theme.ts b/packages/common/src/theme.ts
@@ -77,6 +77,7 @@ const theme = {
     redBackground: '#400000',
     red: '#F27777',
     dangerBackground: '#DC3545',
+    sidebar: '#191d1f',
   }),
   vscodeTheme: codesandbox,
 

Original file line number	Diff line number	Diff line change
`@@ -71,7 +71,7 @@ export async function saveCache(`
`71`	`71`	`'kb to indexedDB'`
`72`	`72`	`);`
`73`	`73`	`}`
`74`		`- localforage.setItem(manager.id, managerState);`
	`74`	`+ await localforage.setItem(manager.id, managerState);`
`75`	`75`	`} catch (e) {`
`76`	`76`	`if (process.env.NODE_ENV === 'development') {`
`77`	`77`	`console.error(e);`