From 8d38dbf178aff62bf45c36cb11a3a503be9be71b Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 24 Dec 2018 10:02:06 -0500
Subject: [PATCH] show code in REPL before it loads, tab switch between prop
 editors

---
 .../routes/repl/_components/CodeMirror.html   | 63 +++++++++++++++----
 .../_components/Output/CompilerOptions.html   |  2 +-
 .../repl/_components/Output/PropEditor.html   |  1 +
 site/src/routes/repl/_components/Repl.html    |  2 +-
 site/static/global.css                        |  7 ---
 5 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/site/src/routes/repl/_components/CodeMirror.html b/site/src/routes/repl/_components/CodeMirror.html
index bb8c72b281..297b4ac0b6 100644
--- a/site/src/routes/repl/_components/CodeMirror.html
+++ b/site/src/routes/repl/_components/CodeMirror.html
@@ -24,6 +24,7 @@
 	export let warningCount = 0;
 	export let flex = false;
 	export let lineNumbers = true;
+	export let tab = true;
 
 	let w;
 	let h;
@@ -129,7 +130,11 @@
 			mode: modes[mode] || {
 				name: mode
 			},
-			readOnly: readonly
+			readOnly: readonly,
+			extraKeys: {
+				Tab: tab,
+				'Shift-Tab': tab
+			}
 		});
 
 		editor.on('change', instance => {
@@ -150,6 +155,7 @@
 		width: 100%;
 		height: 100%;
 		border: none;
+		line-height: 1.5;
 	}
 
 	.codemirror-container :global(.CodeMirror) {
@@ -197,7 +203,39 @@
 		margin: 2.4rem 0 0 0;
 	}
 
-	textarea { width: 100%; border: none }
+	.loading {
+		background-color: #666;
+	}
+
+	textarea {
+		visibility: hidden;
+	}
+
+	pre {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		border: none;
+		padding: 4px 4px 4px 57px;
+		resize: none;
+		font-family: var(--font-mono);
+		font-size: 1.3rem;
+		line-height: 1.7;
+		user-select: none;
+		pointer-events: none;
+		color: #ccc;
+	}
+
+	.flex pre {
+		padding: 0 0 0 4px;
+		height: auto;
+	}
+
+	.flex .loading {
+		display: none;
+	}
 </style>
 
 <!--
@@ -208,7 +246,12 @@
 -----------------------------------------------
 -->
 <div class='codemirror-container' class:flex bind:offsetWidth={w} bind:offsetHeight={h}>
-	<textarea tabindex='2' bind:this={refs.editor}></textarea>
+	<textarea
+		tabindex='2'
+		bind:this={refs.editor}
+		readonly
+		value={code}
+	></textarea>
 
 	{#if error}
 		<p class='error message'>
@@ -232,13 +275,11 @@
 			Compiled, but with {warningCount} {warningCount === 1 ? 'warning' : 'warnings'} — check the console for details
 		</p>
 	{/if}
-</div>
 
-{#if !CodeMirror}
-	<p class='loading'>loading editor...</p>
-{/if}
+	{#if !CodeMirror}
+		<pre style="position: absolute; left: 0; top: 0"
+		>{code}</pre>
 
-<!-- TODO -->
-<!-- {:catch err}
-<p class='error'>error loading CodeMirror</p>
-{/await} -->
\ No newline at end of file
+		<p class='loading message'>loading editor...</p>
+	{/if}
+</div>
\ No newline at end of file
diff --git a/site/src/routes/repl/_components/Output/CompilerOptions.html b/site/src/routes/repl/_components/Output/CompilerOptions.html
index de5189cbce..278f7aa275 100644
--- a/site/src/routes/repl/_components/Output/CompilerOptions.html
+++ b/site/src/routes/repl/_components/Output/CompilerOptions.html
@@ -92,7 +92,7 @@
 	}
 
 	input[type=radio]:checked + label:before {
-		background-color: var(--second);
+		background-color: var(--prime);
 		box-shadow: inset 0 0 0 .15em rgba(255, 255, 255, .95);
 		border: 1px solid var(--second);
 		transition: box-shadow 0.2s ease-out;
diff --git a/site/src/routes/repl/_components/Output/PropEditor.html b/site/src/routes/repl/_components/Output/PropEditor.html
index a42612fb2d..a14fb0b94f 100644
--- a/site/src/routes/repl/_components/Output/PropEditor.html
+++ b/site/src/routes/repl/_components/Output/PropEditor.html
@@ -65,6 +65,7 @@
 		code={stringify(value)}
 		lineNumbers={false}
 		on:change={handleChange}
+		tab={false}
 		flex
 	/>
 </div>
\ No newline at end of file
diff --git a/site/src/routes/repl/_components/Repl.html b/site/src/routes/repl/_components/Repl.html
index 4739fd2e9e..e1872d91d8 100644
--- a/site/src/routes/repl/_components/Repl.html
+++ b/site/src/routes/repl/_components/Repl.html
@@ -220,7 +220,7 @@
 		margin: 0;
 		padding: 1.2rem 1.6rem 1.2rem 4.4rem;
 		vertical-align: middle;
-		font: 300 1.2rem/1.7 var(--font-ui);
+		font: 300 1.2rem/1.7 var(--font);
 		color: white;
 	}
 
diff --git a/site/static/global.css b/site/static/global.css
index aea3f34bec..076831910f 100644
--- a/site/static/global.css
+++ b/site/static/global.css
@@ -4,7 +4,6 @@
 @font-face {
 	font-family: 'Overpass';
 	font-style: normal;
-	font-display: swap;
 	font-weight: 100;
 	src:
 		local('Overpass Thin '),
@@ -16,7 +15,6 @@
 @font-face {
 	font-family: 'Overpass';
 	font-style: italic;
-	font-display: swap;
 	font-weight: 100;
 	src:
 		local('Overpass Thin italic'),
@@ -28,7 +26,6 @@
 @font-face {
 	font-family: 'Overpass';
 	font-style: normal;
-	font-display: swap;
 	font-weight: 300;
 	src:
 		local('Overpass Light '),
@@ -40,7 +37,6 @@
 @font-face {
 	font-family: 'Overpass';
 	font-style: italic;
-	font-display: swap;
 	font-weight: 300;
 	src:
 		local('Overpass Light italic'),
@@ -52,7 +48,6 @@
 @font-face {
 	font-family: 'Overpass';
 	font-style: normal;
-	font-display: swap;
 	font-weight: 700;
 	src:
 		local('Overpass Bold '),
@@ -64,7 +59,6 @@
 @font-face {
 	font-family: 'Overpass';
 	font-style: italic;
-	font-display: swap;
 	font-weight: 700;
 	src:
 		local('Overpass Bold italic'),
@@ -76,7 +70,6 @@
 @font-face {
 	font-family: 'Overpass Mono';
 	font-style: normal;
-	font-display: swap;
 	font-weight: 400;
 	src:
 		local('Overpass Mono Regular '),