mockaton 12.2.2 → 12.3.0

package/src/client/app.js

@@ -1,7 +1,7 @@
 import {
 	createElement as r,
 	createSvgElement as s,
-	className, restoreFocus, Fragment, adoptCSS
+	classNames, restoreFocus, Fragment, adoptCSS
 } from './dom-utils.js'
 
 import { store } from './app-store.js'
@@ -11,29 +11,25 @@ import { HEADER_502 } from './ApiConstants.js'
 import CSS from './styles.css' with { type: 'css' }
 adoptCSS(CSS)
 
-const FocusGroup = {
-	ProxyToggler: 0,
-	DelayToggler: 1,
-	StatusToggler: 2,
-	PreviewLink: 3
-}
 
 const t = translation => translation[0]
 
 store.onError = onError
 store.render = render
 store.renderRow = renderRow
-store.fetchState()
+
 initRealTimeUpdates()
 initKeyboardNavigation()
 
+let mounted = false
 function render() {
-	render.count++
-	restoreFocus(() => document.body.replaceChildren(...App()))
+	restoreFocus(() => {
+		document.body.replaceChildren(...App())
+	})
 	if (store.hasChosenLink)
 		previewMock()
+	mounted = true
 }
-render.count = 0
 
 
 const leftSideRef = {}
@@ -47,10 +43,10 @@ function App() {
 					style: { width: leftSideRef.width },
 					className: CSS.leftSide
 				},
-				r('div', className(CSS.SubToolbar),
+				r('div', classNames(CSS.SubToolbar),
 					GroupByMethod(),
 					BulkSelector()),
-				r('div', className(CSS.Table),
+				r('div', classNames(CSS.Table),
 					MockList(),
 					StaticFilesList())),
 			r('div', { className: CSS.rightSide },
@@ -64,11 +60,12 @@ function Header() {
 		r('header', null,
 			r('a', {
 					className: CSS.Logo,
-					href: 'https://mockaton.com'
+					href: 'https://mockaton.com',
+					alt: t`Documentation`
 				},
 				Logo()),
 			r('div', null,
-				r('div', className(CSS.GlobalDelayWrap),
+				r('div', classNames(CSS.GlobalDelayWrap),
 					GlobalDelayField(),
 					GlobalDelayJitterField()),
 				CookieSelector(),
@@ -92,10 +89,9 @@ function GlobalDelayField() {
 		onWheel.timer = setTimeout(onChange.bind(this), 300)
 	}
 	return (
-		r('label', className(CSS.Field, CSS.GlobalDelayField),
+		r('label', classNames(CSS.Field, CSS.GlobalDelayField),
 			r('span', null, t`Delay (ms)`),
 			r('input', {
-				name: 'delay',
 				type: 'number',
 				min: 0,
 				step: 100,
@@ -122,10 +118,9 @@ function GlobalDelayJitterField() {
 		onWheel.timer = setTimeout(onChange.bind(this), 300)
 	}
 	return (
-		r('label', className(CSS.Field, CSS.GlobalDelayJitterField),
+		r('label', classNames(CSS.Field, CSS.GlobalDelayJitterField),
 			r('span', null, t`Max Jitter %`),
 			r('input', {
-				name: 'delay-jitter',
 				type: 'number',
 				min: 0,
 				max: 300,
@@ -143,12 +138,14 @@ function CookieSelector() {
 	const disabled = cookies.length <= 1
 	const list = cookies.length ? cookies : [[t`None`, true]]
 	return (
-		r('label', className(CSS.Field, CSS.CookieSelector),
+		r('label', classNames(CSS.Field, CSS.CookieSelector),
 			r('span', null, t`Cookie`),
 			r('select', {
 				autocomplete: 'off',
 				disabled,
-				title: disabled ? t`No cookies specified in config.cookies` : '',
+				title: disabled
+					? t`No cookies specified in config.cookies`
+					: undefined,
 				onChange() { store.selectCookie(this.value) }
 			}, list.map(([value, selected]) =>
 				r('option', { value, selected }, value)))))
@@ -165,13 +162,12 @@ function ProxyFallbackField() {
 			store.setProxyFallback(this.value.trim())
 	}
 	return (
-		r('div', className(CSS.Field, CSS.FallbackBackend),
+		r('div', classNames(CSS.Field, CSS.FallbackBackend),
 			r('label', null,
 				r('span', null, t`Fallback`),
 				r('input', {
-					name: 'fallback',
 					type: 'url',
-					autocomplete: 'none',
+					name: 'fallback',
 					placeholder: t`Type backend address`,
 					value: store.proxyFallback,
 					onChange
@@ -181,16 +177,15 @@ function ProxyFallbackField() {
 
 function SaveProxiedCheckbox(ref) {
 	return (
-		r('label', className(CSS.SaveProxiedCheckbox),
+		r('label', classNames(CSS.SaveProxiedCheckbox),
 			r('input', {
-				name: 'save-proxied',
 				ref,
 				type: 'checkbox',
 				disabled: !store.canProxy,
 				checked: store.collectProxied,
 				onChange() { store.setCollectProxied(this.checked) }
 			}),
-			r('span', className(CSS.checkboxBody), t`Save Mocks`)))
+			r('span', classNames(CSS.checkboxBody), t`Save Mocks`)))
 }
 
 
@@ -204,13 +199,13 @@ function ResetButton() {
 
 
 function HelpLink() {
-	return r('a', {
+	return (
+		r('a', {
 			target: '_blank',
 			href: 'https://mockaton.com',
 			title: t`Documentation`,
 			className: CSS.HelpLink
-		},
-		HelpIcon())
+		}, HelpIcon()))
 }
 
 
@@ -227,12 +222,14 @@ function BulkSelector() {
 	}
 	const disabled = !comments.length
 	return (
-		r('label', className(CSS.BulkSelector),
+		r('label', classNames(CSS.BulkSelector),
 			r('span', null, t`Bulk Select`),
 			r('select', {
 					autocomplete: 'off',
 					disabled,
-					title: disabled ? t`No mock files have comments which are anything within parentheses on the filename.` : '',
+					title: disabled
+						? t`No mock files have comments which are anything within parentheses on the filename.`
+						: undefined,
 					onChange
 				},
 				r('option', { value: firstOption }, firstOption),
@@ -244,14 +241,13 @@ function BulkSelector() {
 
 function GroupByMethod() {
 	return (
-		r('label', className(CSS.GroupByMethod),
+		r('label', classNames(CSS.GroupByMethod),
 			r('input', {
-				name: 'group-by-method',
 				type: 'checkbox',
 				checked: store.groupByMethod,
 				onChange: store.toggleGroupByMethod
 			}),
-			r('span', className(CSS.checkboxBody), t`Group by Method`)))
+			r('span', classNames(CSS.checkboxBody), t`Group by Method`)))
 }
 
 
@@ -262,10 +258,10 @@ function MockList() {
 		return r('div', null, t`No mocks found`)
 
 	if (store.groupByMethod)
-		return Object.keys(store.brokersByMethod).map(method => Fragment(
-			r('div', className(CSS.TableHeading, store.canProxy && CSS.canProxy),
-				method),
-			store.brokersAsRowsByMethod(method).map(Row)))
+		return Object.keys(store.brokersByMethod).map(method =>
+			Fragment(
+				r('div', classNames(CSS.TableHeading, store.canProxy && CSS.canProxy), method),
+				store.brokersAsRowsByMethod(method).map(Row)))
 
 	return store.brokersAsRowsByMethod('*').map(Row)
 }
@@ -279,18 +275,29 @@ function Row(row, i) {
 	return (
 		r('div', {
 				key: row.key,
-				...className(CSS.TableRow,
-					render.count > 1 && row.isNew && CSS.animIn)
+				...classNames(CSS.TableRow,
+					mounted && row.isNew && CSS.animIn)
 			},
 			store.canProxy && ProxyToggler(method, urlMask, row.proxied),
 
-			DelayRouteToggler(method, urlMask, row.delayed),
+			DelayToggler({
+				checked: row.delayed,
+				commit(checked) {
+					store.setDelayed(method, urlMask, checked)
+				},
+			}),
 
-			InternalServerErrorToggler(method, urlMask,
-				!row.proxied && row.status === 500, // checked
-				row.opts.length === 1 && row.status === 500), // disabled
+			StatusCodeToggler({
+				title: t`Internal Server Error`,
+				body: t`500`,
+				disabled: row.opts.length === 1 && row.status === 500,
+				checked: !row.proxied && row.status === 500,
+				commit() {
+					store.toggle500(method, urlMask)
+				}
+			}),
 
-			!store.groupByMethod && r('span', className(CSS.Method), method),
+			!store.groupByMethod && r('span', classNames(CSS.Method), method),
 
 			PreviewLink(method, urlMask, row.urlMaskDittoed, i === 0),
 
@@ -298,39 +305,58 @@ function Row(row, i) {
 }
 
 function renderRow(method, urlMask) {
-	restoreFocus(() => {
-		unChooseOld()
-		const row = store.brokerAsRow(method, urlMask)
-		trFor(row.key).replaceWith(Row(row))
-		previewMock()
-	})
-
-	function trFor(key) {
-		return leftSideRef.elem.querySelector(`.${CSS.TableRow}[key="${key}"]`)
-	}
-	function unChooseOld() {
-		return leftSideRef.elem.querySelector(`a.${CSS.chosen}`)
-			?.classList.remove(CSS.chosen)
+	const row = store.brokerAsRow(method, urlMask)
+	const tr = leftSideRef.elem.querySelector(`.${CSS.TableRow}[key="${row.key}"]`)
+	mergeTableRow(tr, Row(row))
+}
+
+function mergeTableRow(oldRow, newRow) {
+	for (let i = 0; i < newRow.children.length; i++) {
+		const oldEl = oldRow.children[i]
+		const newEl = newRow.children[i]
+		switch (newEl.tagName) {
+			case 'LABEL': {
+				const oldInput = oldEl.querySelector('[type="checkbox"]')
+				const newInput = newEl.querySelector('[type="checkbox"]')
+				oldInput.checked = newInput.checked
+				oldInput.disabled = newInput.disabled
+				break
+			}
+			case 'A':
+				oldEl.className = newEl.className
+				break
+			case 'SELECT':
+				oldEl.disabled = newEl.disabled
+				oldEl.replaceChildren(...newEl.cloneNode(true).children)
+				break
+		}
 	}
 }
 
 
+
 function PreviewLink(method, urlMask, urlMaskDittoed, autofocus) {
 	function onClick(event) {
+		unChooseOld()
 		event.preventDefault()
 		store.previewLink(method, urlMask)
+		previewMock()
+	}
+	function unChooseOld() {
+		return leftSideRef.elem.querySelector(`a.${CSS.chosen}`)
+			?.classList.remove(CSS.chosen)
 	}
+
 	const isChosen = store.chosenLink.method === method && store.chosenLink.urlMask === urlMask
 	const [ditto, tail] = urlMaskDittoed
 	return (
 		r('a', {
-			...className(CSS.PreviewLink, isChosen && CSS.chosen),
+			...classNames(CSS.PreviewLink, isChosen && CSS.chosen),
 			href: urlMask,
 			autofocus,
-			'data-focus-group': FocusGroup.PreviewLink,
 			onClick
 		}, ditto
-			? [r('span', className(CSS.dittoDir), ditto), tail]
+			? [r('span', classNames(CSS.dittoDir), ditto), tail]
 			: tail))
 }
 
@@ -339,11 +365,18 @@ function PreviewLink(method, urlMask, urlMaskDittoed, autofocus) {
 function MockSelector(row) {
 	return (
 		r('select', {
-			onChange() { store.selectFile(this.value) },
-			autocomplete: 'off',
+			onChange() {
+				store.selectFile(this.value)
+			},
+			onKeyDown(event) {
+				if (event.key === 'ArrowRight' || event.key === 'ArrowLeft')
+					event.preventDefault()
+				// Because in Firefox they change the select.option, and 
+				// we use those keys for spreadsheet-like navigation.
+			},
 			'aria-label': t`Mock Selector`,
 			disabled: row.opts.length < 2,
-			...className(
+			...classNames(
 				CSS.MockSelector,
 				row.selectedIdx > 0 && CSS.nonDefault,
 				row.selectedFileIs4xx && CSS.status4xx)
@@ -352,45 +385,18 @@ function MockSelector(row) {
 }
 
 
-function DelayRouteToggler(method, urlMask, checked) {
+function ProxyToggler(method, urlMask, checked) {
 	return ClickDragToggler({
+		className: CSS.ProxyToggler,
+		title: t`Proxy Toggler`,
 		checked,
-		commit(checked) { store.setDelayed(method, urlMask, checked) },
-		focusGroup: FocusGroup.DelayToggler
+		commit(checked) {
+			store.setProxied(method, urlMask, checked)
+		},
+		body: CloudIcon()
 	})
 }
 
-function InternalServerErrorToggler(method, urlMask, checked, disabled) {
-	return (
-		r('label', {
-				className: CSS.InternalServerErrorToggler,
-				title: t`Internal Server Error`
-			},
-			r('input', {
-				type: 'checkbox',
-				disabled,
-				checked,
-				onChange() { store.toggle500(method, urlMask) },
-				'data-focus-group': FocusGroup.StatusToggler
-			}),
-			r('span', className(CSS.checkboxBody), t`500`)))
-}
-
-function ProxyToggler(method, urlMask, checked) {
-	return (
-		r('label', {
-				className: CSS.ProxyToggler,
-				title: t`Proxy Toggler`
-			},
-			r('input', {
-				type: 'checkbox',
-				checked,
-				onChange() { store.setProxied(method, urlMask, this.checked) },
-				'data-focus-group': FocusGroup.ProxyToggler
-			}),
-			CloudIcon()))
-}
-
 
 
 /** # StaticFilesList */
@@ -401,10 +407,12 @@ function StaticFilesList() {
 		? null
 		: Fragment(
 			r('div',
-				className(CSS.TableHeading,
+				classNames(CSS.TableHeading,
 					store.canProxy && CSS.canProxy,
 					!store.groupByMethod && CSS.nonGroupedByMethod),
-				store.groupByMethod ? t`Static GET` : t`Static`),
+				store.groupByMethod
+					? t`Static GET`
+					: t`Static`),
 			rows.map(StaticRow))
 }
 
@@ -415,55 +423,62 @@ function StaticRow(row) {
 	return (
 		r('div', {
 				key: row.key,
-				...className(CSS.TableRow,
-					render.count > 1 && row.isNew && CSS.animIn)
+				...classNames(CSS.TableRow,
+					mounted && row.isNew && CSS.animIn)
 			},
-			DelayStaticRouteToggler(row.urlMask, row.delayed),
 
-			NotFoundToggler(row.urlMask, row.status === 404),
+			DelayToggler({
+				optClassName: store.canProxy && CSS.canProxy,
+				checked: row.delayed,
+				commit(checked) {
+					store.setDelayedStatic(row.urlMask, checked)
+				}
+			}),
+
+			StatusCodeToggler({
+				title: t`Not Found`,
+				body: t`404`,
+				checked: row.status === 404,
+				commit(checked) {
+					store.setStaticRouteStatus(row.urlMask, checked
+						? 404
+						: 200)
+				}
+			}),
 
-			!groupByMethod && r('span', className(CSS.Method), 'GET'),
+			!groupByMethod && r('span', classNames(CSS.Method), 'GET'),
 
 			r('a', {
 				href: row.urlMask,
 				target: '_blank',
 				className: CSS.PreviewLink,
-				'data-focus-group': FocusGroup.PreviewLink
 			}, ditto
-				? [r('span', className(CSS.dittoDir), ditto), tail]
+				? [r('span', classNames(CSS.dittoDir), ditto), tail]
 				: tail)))
 }
 
-function DelayStaticRouteToggler(route, checked) {
+function StatusCodeToggler({ title, body, commit, checked, disabled }) {
 	return ClickDragToggler({
-		optClassName: store.canProxy && CSS.canProxy,
+		title,
+		disabled,
+		className: CSS.StatusCodeToggler,
+		commit,
 		checked,
-		focusGroup: FocusGroup.DelayToggler,
-		commit(checked) {
-			store.setDelayedStatic(route, checked)
-		}
+		body
 	})
 }
 
-function NotFoundToggler(route, checked) {
-	return (
-		r('label', {
-				className: CSS.NotFoundToggler,
-				title: t`Not Found`
-			},
-			r('input', {
-				type: 'checkbox',
-				checked,
-				'data-focus-group': FocusGroup.StatusToggler,
-				onChange() {
-					store.setStaticRouteStatus(route, this.checked ? 404 : 200)
-				}
-			}),
-			r('span', className(CSS.checkboxBody), t`404`)))
+function DelayToggler({ checked, commit, optClassName }) {
+	return ClickDragToggler({
+		checked,
+		commit,
+		...classNames(CSS.DelayToggler, optClassName),
+		title: t`Delay`,
+		body: TimerIcon()
+	})
 }
 
-
-function ClickDragToggler({ checked, commit, focusGroup, optClassName }) {
+function ClickDragToggler({ checked, commit, className, title, body }) {
 	function onPointerEnter(event) {
 		if (event.buttons === 1)
 			onPointerDown.call(this)
@@ -481,20 +496,16 @@ function ClickDragToggler({ checked, commit, focusGroup, optClassName }) {
 		commit(this.checked)
 	}
 	return (
-		r('label', {
-				...className(CSS.DelayToggler, optClassName),
-				title: t`Delay`
-			},
+		r('label', { ...classNames(CSS.Toggler, className), title },
 			r('input', {
 				type: 'checkbox',
-				'data-focus-group': focusGroup,
 				checked,
 				onPointerEnter,
 				onPointerDown,
 				onClick,
 				onChange
 			}),
-			TimerIcon()))
+			r('span', classNames(CSS.checkboxBody), body)))
 }
 
 function Resizer(ref) {
@@ -549,7 +560,7 @@ const payloadViewerCodeRef = {}
 
 function PayloadViewer() {
 	return (
-		r('div', className(CSS.PayloadViewer),
+		r('div', classNames(CSS.PayloadViewer),
 			RightToolbar(),
 			r('pre', null,
 				r('code', { ref: payloadViewerCodeRef },
@@ -557,9 +568,10 @@ function PayloadViewer() {
 }
 
 function RightToolbar() {
-	return r('div', className(CSS.SubToolbar),
-		r('h2', { ref: payloadViewerTitleRef },
-			!store.hasChosenLink && t`Preview`))
+	return (
+		r('div', classNames(CSS.SubToolbar),
+			r('h2', { ref: payloadViewerTitleRef },
+				!store.hasChosenLink && t`Preview`)))
 }
 
 
@@ -588,8 +600,12 @@ function PayloadViewerTitleWhenProxied(response) {
 const SPINNER_DELAY = 80
 function PayloadViewerProgressBar() {
 	return (
-		r('div', className(CSS.ProgressBar),
-			r('div', { style: { animationDuration: store.delay - SPINNER_DELAY + 'ms' } })))
+		r('div', classNames(CSS.ProgressBar),
+			r('div', {
+				style: {
+					animationDuration: store.delay - SPINNER_DELAY + 'ms'
+				}
+			})))
 }
 
 async function previewMock() {
@@ -724,7 +740,7 @@ function HelpIcon() {
  * The version increments when a mock file is added, removed, or renamed.
  */
 function initRealTimeUpdates() {
-	let oldVersion = undefined // undefined so it waits until next event or timeout 
+	let oldVersion = -1
 	let controller = new AbortController()
 
 	longPoll()
@@ -740,21 +756,18 @@ function initRealTimeUpdates() {
 	async function longPoll() {
 		try {
 			const response = await store.getSyncVersion(oldVersion, controller.signal)
-			if (response.ok) {
-				if (ErrorToast.isOffline)
-					ErrorToast.close()
-
-				const version = await response.json()
-				const shouldSkip = oldVersion === undefined
-				if (oldVersion !== version) { // because it could be < or >
-					oldVersion = version
-					if (!shouldSkip)
-						store.fetchState()
-				}
-				longPoll()
-			}
-			else
+			if (!response.ok)
 				throw response.status
+
+			if (ErrorToast.isOffline)
+				ErrorToast.close()
+
+			const version = await response.json()
+			if (oldVersion !== version) { // because it could be < or >
+				oldVersion = version
+				store.fetchState()
+			}
+			longPoll()
 		}
 		catch (error) {
 			if (error !== '_hidden_tab_')
@@ -765,45 +778,48 @@ function initRealTimeUpdates() {
 
 
 function initKeyboardNavigation() {
-	addEventListener('keydown', onKeyDown)
+	const columnSelectors = [
+		`.${CSS.TableRow} .${CSS.ProxyToggler} input`,
+		`.${CSS.TableRow} .${CSS.DelayToggler} input`,
+		`.${CSS.TableRow} .${CSS.StatusCodeToggler} input`,
+		`.${CSS.TableRow} .${CSS.PreviewLink}`,
+		// No .MockSelector because down/up arrows have native behavior on them
+	]
 
-	function onKeyDown(event) {
-		const pivot = document.activeElement
-		switch (event.key) {
+	const rowSelectors = [
+		...columnSelectors,
+		`.${CSS.TableRow} .${CSS.MockSelector}:enabled`,
+	]
+
+	addEventListener('keydown', function ({ key }) {
+		switch (key) {
 			case 'ArrowDown':
 			case 'ArrowUp': {
-				let fg = pivot.getAttribute('data-focus-group')
-				if (fg !== null) {
-					const offset = event.key === 'ArrowDown' ? +1 : -1
-					circularAdjacent(offset, allInFocusGroup(+fg), pivot).focus()
+				const pivot = document.activeElement
+				const sel = columnSelectors.find(s => pivot?.matches(s))
+				if (sel) {
+					const offset = key === 'ArrowDown' ? +1 : -1
+					const siblings = leftSideRef.elem.querySelectorAll(sel)
+					circularAdjacent(offset, siblings, pivot).focus()
 				}
 				break
 			}
 			case 'ArrowRight':
 			case 'ArrowLeft': {
-				if (pivot.hasAttribute('data-focus-group') || pivot.classList.contains(CSS.MockSelector)) {
-					const offset = event.key === 'ArrowRight' ? +1 : -1
-					rowFocusable(pivot, offset).focus()
+				const pivot = document.activeElement
+				const sel = rowSelectors.find(s => pivot?.matches(s))
+				if (sel) {
+					const offset = key === 'ArrowRight' ? +1 : -1
+					const siblings = pivot.closest(`.${CSS.TableRow}`).querySelectorAll(rowSelectors.join(','))
+					circularAdjacent(offset, siblings, pivot).focus()
 				}
 				break
 			}
 		}
-	}
-
-	function rowFocusable(el, step) {
-		const row = el.closest(`.${CSS.TableRow}`)
-		if (row) {
-			const focusables = Array.from(row.querySelectorAll('a, input, select:not(:disabled)'))
-			return circularAdjacent(step, focusables, el)
-		}
-	}
-
-	function allInFocusGroup(focusGroup) {
-		return Array.from(leftSideRef.elem.querySelectorAll(
-			`.${CSS.TableRow} [data-focus-group="${focusGroup}"]:is(input, a)`))
-	}
+	})
 
-	function circularAdjacent(step = 1, arr, pivot) {
+	function circularAdjacent(step, siblings, pivot) {
+		const arr = Array.from(siblings)
 		return arr[(arr.indexOf(pivot) + step + arr.length) % arr.length]
 	}
 }