better disabled css

Author: r58Playz

src/ui/shell.ts

@@ -175,7 +175,10 @@ const MARKUP = `
 										stroke="currentColor" stroke-width="1.3" stroke-linejoin="round" />
 								</svg>
 							</button>
-							<span class="select-pill">
+							<!-- The pill, not the select, carries the locked look and its tooltip: a
+							     disabled select takes no pointer events, so a title on it would never
+							     show. -->
+							<span class="select-pill" id="presetPill">
 								<select id="presetSelect" aria-label="Project source"></select>
 							</span>
 						</div>
@@ -306,6 +309,7 @@ export interface ShellElements {
 	exportBtn: HTMLButtonElement;
 	restartBtn: HTMLButtonElement;
 	presetSelect: HTMLSelectElement;
+	presetPill: HTMLElement;
 	openFolderBtn: HTMLButtonElement;
 	tree: HTMLElement;
 	tabs: HTMLElement;
@@ -370,6 +374,7 @@ export function buildShell(root: Element): ShellElements {
 		exportBtn: pick("exportBtn"),
 		restartBtn: pick("restartBtn"),
 		presetSelect: pick("presetSelect"),
+		presetPill: pick("presetPill"),
 		openFolderBtn: pick("openFolderBtn"),
 		tree: pick("tree"),
 		tabs: pick("tabs"),

src/ui/styles.css

@@ -490,6 +490,59 @@ select {
   pointer-events: none;
 }
 
+/* Locked while a program holds the worker, because switching source reloads the page.
+   The native disabled `<select>` is a text shade nobody notices, so the pill goes flat
+   and grey with a padlock where the chevron was — and the pill takes the cursor and the
+   `title`, since the disabled control inside it gets no pointer events. */
+.select-pill[data-locked="true"] {
+  cursor: not-allowed;
+}
+
+/* `--ink-mid` rather than the fainter `--ink-soft`, because which project is loaded stays
+   worth reading while it runs — the flat fill and the padlock carry the unavailability. */
+.select-pill select:disabled {
+  border-color: var(--line-soft);
+  background: var(--track);
+  color: var(--ink-mid);
+  cursor: not-allowed;
+}
+
+.select-pill select:disabled:hover {
+  border-color: var(--line-soft);
+}
+
+/* The padlock, drawn from the pill's two pseudo-elements — `::after` is the body (the
+   chevron's borders traded for a fill), `::before` the shackle sitting on top of it.
+   Both keep the chevron's footprint, so locking does not resize the pill.
+
+   `box-sizing` is set here because the `*` reset does not reach pseudo-elements: on
+   content-box the shackle's borders would sit outside its width and shift it off the
+   body's centre. With both boxes measured the same way, the two `right` offsets put
+   their centres on the same 12.5px. */
+.select-pill[data-locked="true"]::after {
+  box-sizing: border-box;
+  width: 9px;
+  height: 7px;
+  border: none;
+  border-radius: 1.5px;
+  background: var(--ink-mid);
+  transform: translateY(1.5px);
+}
+
+.select-pill[data-locked="true"]::before {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  right: 10px;
+  width: 5px;
+  height: 5px;
+  border: 1.4px solid var(--ink-mid);
+  border-bottom: none;
+  border-radius: 3px 3px 0 0;
+  transform: translateY(-4px);
+  pointer-events: none;
+}
+
 /* --------------------------------------------------------- file tree */
 
 .tree {

src/workspace.ts

@@ -264,6 +264,9 @@ async function boot(
 
 	renderSources(el, manifest.templates, project, rememberedFolder, idleLabel);
 	if (!localDirSupported()) {
+		// Marked as well as disabled so `setBusy` can tell a browser that will never do this
+		// from a run that is only holding it for now, and leave the former alone.
+		el.openFolderBtn.dataset.unsupported = "true";
 		el.openFolderBtn.disabled = true;
 		el.openFolderBtn.title =
 			"this browser cannot open a folder from your device — Chrome, Edge and other Chromium browsers can";
@@ -803,6 +806,19 @@ function setBusy(el: ShellElements, busy: boolean, idleLabel: string) {
 	el.exportBtn.disabled = busy;
 	el.restartBtn.disabled = busy;
 	el.presetSelect.disabled = busy;
+	// Says *why* it is unavailable, which the greying alone cannot: a switch reloads the page,
+	// so it has to wait for whatever holds the worker. See `.select-pill[data-locked]`.
+	el.presetPill.dataset.locked = busy ? "true" : "false";
+	if (busy) {
+		el.presetPill.title = "Stop what is running first — switching project reloads the page";
+	} else {
+		el.presetPill.removeAttribute("title");
+	}
+	// Opening a folder swaps the project the same way the select does, so it waits for the same
+	// reason — `swapSource` already declines while busy, and this stops the click that goes
+	// nowhere. The button keeps its own title: a disabled one shows no tooltip in every browser,
+	// which is why the reason sits on the pill beside it.
+	el.openFolderBtn.disabled = busy || el.openFolderBtn.dataset.unsupported === "true";
 }
 
 function showPreview(el: ShellElements, port: number, peerToken?: string) {