Add a button to toggle visible whitespace for now. Not yet persisted.

core/client.js

@@ -1662,6 +1662,29 @@ async function sourcePretty() {
 	}
 }
 
+function toggleVisibleWhitespace() {
+	let editor_style = document.getElementById('editor_style');
+	/*
+	 * There is likely a better way to do this, but stomping on the CSS was
+	 * the easiest to wrangle at the time.
+	 */
+	if (editor_style.innerHTML.length) {
+		editor_style.innerHTML = '';
+	} else {
+		editor_style.innerHTML = css`
+			.cm-trailingSpace {
+				background-color: unset !important;
+			}
+			.cm-highlightTab {
+				background-image: unset !important;
+			}
+			.cm-highlightSpace:before {
+				content: unset !important;
+			}
+		`;
+	}
+}
+
 // TODOC
 window.addEventListener('load', function () {
 	window.addEventListener('hashchange', hashChange);
@@ -1687,6 +1710,9 @@ window.addEventListener('load', function () {
 	document
 		.getElementById('pretty')
 		.addEventListener('click', () => sourcePretty());
+	document
+		.getElementById('whitespace')
+		.addEventListener('click', () => toggleVisibleWhitespace());
 	document
 		.getElementById('trace_button')
 		.addEventListener('click', function (event) {

core/index.html

@@ -57,7 +57,7 @@
 						class="w3-bar-item w3-button w3-blue"
 						id="icon"
 						name="icon"
-						accesskey="i"
+						accesskey="j"
 						onmouseover="set_access_key_title(event)"
 						data-tip="Set an icon/emoji for the app"
 					>
@@ -93,6 +93,16 @@
 					>
 						🧼
 					</button>
+					<button
+						class="w3-bar-item w3-button w3-blue"
+						id="whitespace"
+						name="whitespace"
+						accesskey="w"
+						onmouseover="set_access_key_title(event)"
+						data-tip="Toggle visible whitespace"
+					>
+						✨
+					</button>
 					<input
 						class="w3-bar-item w3-input w3-border w3-blue"
 						type="text"
@@ -125,6 +135,7 @@
 						<tf-files-pane style="overflow: auto"></tf-files-pane>
 					</div>
 					<div style="flex: 1 1; overflow: auto">
+						<style id="editor_style"></style>
 						<div id="editor" style="width: 100%; height: 100%"></div>
 					</div>
 				</div>