Tutorial/REPL tweaks (#2196)

* make dropdown more obviously interactive

* make component removal work in firefox

* dont recompile on component selection

* oops

* focus editor on selector blur, finesse styles

* fix input alignment on firefox

site/src/components/Repl/CodeMirror.svelte

@@ -39,7 +39,9 @@
 		}
 
 		code = new_code;
+		updating_externally = true;
 		if (editor) editor.setValue(code);
+		updating_externally = false;
 	}
 
 	export function update(new_code) {
@@ -56,6 +58,10 @@
 		editor.refresh();
 	}
 
+	export function focus() {
+		editor.focus();
+	}
+
 	const modes = {
 		js: {
 			name: 'javascript',
@@ -73,7 +79,7 @@
 
 	const refs = {};
 	let editor;
-	let updating = false;
+	let updating_externally = false;
 	let marker;
 	let error_line;
 	let destroyed = false;
@@ -131,10 +137,6 @@
 		}
 	});
 
-	beforeUpdate(() => {
-		updating = false;
-	});
-
 	function createEditor(mode) {
 		if (destroyed || !CodeMirror) return;
 
@@ -163,10 +165,9 @@
 		editor = CodeMirror.fromTextArea(refs.editor, opts);
 
 		editor.on('change', instance => {
-			if (!updating) {
-				updating = true;
-				// code = instance.getValue();
-				dispatch('change', { value: instance.getValue() });
+			if (!updating_externally) {
+				const value = instance.getValue();
+				dispatch('change', { value });
 			}
 		});
 

site/src/components/Repl/Input/ComponentSelector.svelte

@@ -5,7 +5,7 @@
 
 	export let handle_select;
 
-	const { components, selected } = getContext('REPL');
+	const { components, selected, request_focus } = getContext('REPL');
 
 	let editing = null;
 
@@ -28,7 +28,13 @@
 		if (match && match[2]) $selected.type = match[2];
 		editing = null;
 
+		// re-select, in case the type changed
+		handle_select($selected);
+
 		components = components; // TODO necessary?
+
+		// focus the editor, but wait a beat (so key events aren't misdirected)
+		setTimeout(request_focus);
 	}
 
 	function remove(component) {
@@ -43,7 +49,7 @@
 				console.error(`Could not find component! That's... odd`);
 			}
 
-			selected.set($components[index] || $components[$components.length - 1]);
+			handle_select($components[index] || $components[$components.length - 1]);
 		}
 	}
 
@@ -70,7 +76,7 @@
 		});
 
 		components.update(components => components.concat(component));
-		selected.set(component);
+		handle_select(component);
 	}
 </script>
 
@@ -83,7 +89,6 @@
 
 	.file-tabs {
 		border: none;
-		padding: 0 0 0 5rem;
 		margin: 0;
 		white-space: nowrap;
 		overflow-x: auto;
@@ -91,16 +96,21 @@
 		height: 10em;
 	}
 
-	.file-tabs button {
+	.file-tabs .button, .file-tabs button {
 		position: relative;
+		display: inline-block;
 		font: 400 1.2rem/1.5 var(--font);
 		border-bottom: var(--border-w) solid transparent;
-		padding: 1.2rem 1.2rem 0.8rem 0.5rem;
-		margin: 0 0.5rem 0 0;
+		padding: 1.2rem 1.4rem 0.8rem 0.8rem;
+		margin: 0;
 		color: #999;
 	}
 
-	.file-tabs button.active {
+	.file-tabs .button:first-child {
+		padding-left: 1.2rem;
+	}
+
+	.file-tabs .button.active {
 		/* color: var(--second); */
 		color: #333;
 		border-bottom: var(--border-w) solid var(--prime);
@@ -119,26 +129,15 @@
 	input {
 		position: absolute;
 		width: 100%;
-		left: 0.5rem;
+		left: 0.8rem;
 		top: 1.2rem;
-		/* padding: 0 0.4rem; */
-		/* font-size: 1rem; */
 		font: 400 1.2rem/1.5 var(--font);
 		border: none;
 		color: var(--flash);
 		outline: none;
-		line-height: 1;
 		background-color: transparent;
 	}
 
-	.editable {
-		/* margin-right: 2.4rem; */
-	}
-
-	.uneditable {
-		/* padding-left: 1.2rem; */
-	}
-
 	.remove {
 		position: absolute;
 		display: none;
@@ -155,74 +154,78 @@
 		color: var(--flash);
 	}
 
-	.file-tabs button.active .editable {
+	.file-tabs .button.active .editable {
 		cursor: text;
 	}
 
-	.file-tabs button.active .remove {
-		display: inline-block;
+	.file-tabs .button.active .remove {
+		display: block;
 	}
 
 	.add-new {
 		position: absolute;
 		left: 0;
 		top: 0;
-		width: 5rem;
-		height: 100%;
+		padding: 1.2rem 1rem 0.8rem 0 !important;
+		height: 4.2rem;
 		text-align: center;
 		background-color: white;
 	}
 
 	.add-new:hover {
-		color: var(--flash);
+		color: var(--flash) !important;
 	}
 </style>
 
 <div class="component-selector">
-	<div class="file-tabs" on:dblclick="{addNew}">
-		{#each $components as component}
-			<button
-				id={component.name}
-				class:active="{component === $selected}"
-				data-name={component.name}
-				on:click="{() => selectComponent(component)}"
-				on:dblclick="{e => e.stopPropagation()}"
-			>
-				{#if component.name == 'App'}
-					<div class="uneditable">
-						App.svelte
-					</div>
-				{:else}
-					{#if component === editing}
-						<span class="input-sizer">{editing.name + (/\./.test(editing.name) ? '' : `.${editing.type}`)}</span>
-
-						<input
-							autofocus
-							bind:value={editing.name}
-							on:focus={selectInput}
-							on:blur="{() => closeEdit()}"
-							use:enter="{e => e.target.blur()}"
-						>
-					{:else}
-						<div
-							class="editable"
-							title="edit component name"
-							on:click="{() => editTab(component)}"
-						>
-							{component.name}.{component.type}
+	{#if $components.length}
+		<div class="file-tabs" on:dblclick="{addNew}">
+			{#each $components as component}
+				<div
+					id={component.name}
+					class="button"
+					role="button"
+					class:active="{component === $selected}"
+					on:click="{() => selectComponent(component)}"
+					on:dblclick="{e => e.stopPropagation()}"
+				>
+					{#if component.name == 'App'}
+						<div class="uneditable">
+							App.svelte
 						</div>
-
-						<span class="remove" on:click="{() => remove(component)}">
-							<Icon name="close" size={12}/>
-							<!-- &times; -->
-						</span>
+					{:else}
+						{#if component === editing}
+							<span class="input-sizer">{editing.name + (/\./.test(editing.name) ? '' : `.${editing.type}`)}</span>
+
+							<input
+								autofocus
+								spellcheck={false}
+								bind:value={editing.name}
+								on:focus={selectInput}
+								on:blur={closeEdit}
+								use:enter="{e => e.target.blur()}"
+							>
+						{:else}
+							<div
+								class="editable"
+								title="edit component name"
+								on:click="{() => editTab(component)}"
+							>
+								{component.name}.{component.type}
+							</div>
+
+							<span class="remove" on:click="{() => remove(component)}">
+								<Icon name="close" size={12}/>
+								<!-- &times; -->
+							</span>
+						{/if}
 					{/if}
-				{/if}
-			</button>
-		{/each}
-	</div>
+				</div>
+			{/each}
 
-	<button class="add-new" on:click={addNew} title="add new component">
-		<Icon name="plus" />
-	</button>
+			<button class="add-new" on:click={addNew} title="add new component">
+				<Icon name="plus" />
+			</button>
+		</div>
+	{/if}
 </div>

site/src/components/Repl/Input/ModuleEditor.svelte

@@ -11,6 +11,10 @@
 	onMount(() => {
 		register_module_editor(editor);
 	});
+
+	export function focus() {
+		editor.focus();
+	}
 </script>
 
 <style>

site/src/components/Repl/Output/index.svelte

@@ -100,7 +100,7 @@
 		position: relative;
 		font: 400 1.2rem/1.5 var(--font);
 		border-bottom: var(--border-w) solid transparent;
-		padding: 1.2rem 0.8rem 0.8rem 0.8rem;
+		padding: 1.2rem 1.2rem 0.8rem 1.2rem;
 		color: #999;
 	}
 

site/src/components/Repl/index.svelte

@@ -113,6 +113,10 @@
 
 		register_output(handlers) {
 			output = handlers;
+		},
+
+		request_focus() {
+			module_editor.focus();
 		}
 	});
 

site/src/routes/tutorial/[slug]/_components/TableOfContents.svelte

@@ -24,7 +24,6 @@
 		font-weight: 300;
 		font-size: var(--h6);
 		color: white;
-		cursor: pointer;
 	}
 
 	a {
@@ -54,6 +53,7 @@
 		width: 100%;
 		height: 100%;
 		opacity: 0.0001;
+		cursor: pointer;
 	}
 </style>