mockaton 10.5.4 → 10.6.0

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "10.5.4",
+	"version": "10.6.0",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",

package/src/Dashboard.css

@@ -95,7 +95,7 @@ body {
 }
 
 select, a, input, button {
-	&:focus {
+	&:focus-visible {
 		outline: 2px solid var(--colorAccent);
 	}
 }
@@ -294,7 +294,6 @@ header {
 			fill: var(--colorAccent);
 		}
 	}
-
 }
 
 .SettingsMenu {
@@ -379,9 +378,9 @@ table {
 	border-collapse: collapse;
 
 	th {
-		padding-bottom: 2px;
+		padding-bottom: 4px;
 		padding-left: 4px;
-		border-top: 20px solid transparent;
+		border-top: 24px solid transparent;
 		text-align: left;
 	}
 
@@ -422,6 +421,7 @@ table {
 	}
 }
 
+
 .MockSelector {
 	height: 24px;
 	padding-right: 20px;
@@ -458,7 +458,7 @@ table {
 		height: 22px;
 		opacity: 0;
 
-		&:focus {
+		&:focus-visible {
 			outline: 0;
 			& + svg {
 				outline: 2px solid var(--colorAccent)
@@ -556,7 +556,7 @@ table {
 	> input {
 		appearance: none;
 
-		&:focus {
+		&:focus-visible {
 			outline: 0;
 			& + span {
 				outline: 2px solid var(--colorAccent)
@@ -587,15 +587,6 @@ table {
 }
 
 
-.StaticFileLink {
-	display: inline-block;
-	padding: 6px 0;
-	margin-left: 4px;
-	border-radius: var(--radius);
-	color: var(--colorAccent);
-}
-
-
 .PayloadViewer {
 	display: flex;
 	height: 100%;

package/src/Dashboard.js

@@ -26,7 +26,6 @@ const CSS = {
 	Resizer: null,
 	SaveProxiedCheckbox: null,
 	SettingsMenu: null,
-	StaticFileLink: null,
 
 	chosen: null,
 	dittoDir: null,
@@ -50,6 +49,13 @@ for (const k of Object.keys(CSS))
 	CSS[k] = k
 
 
+const FocusGroup = {
+	ProxyToggler: 0,
+	DelayToggler: 1,
+	StatusToggler: 2,
+	PreviewLink: 3
+}
+
 const state = /** @type {State} */ {
 	brokersByMethod: {},
 	staticBrokers: {},
@@ -70,13 +76,22 @@ const state = /** @type {State} */ {
 		updateState()
 	},
 
-	leftSideWidth: undefined
+	leftSideWidth: undefined,
+
+	chosenLink: { method: '', urlMask: '' },
+	clearChosenLink() {
+		state.chosenLink = { method: '', urlMask: '' }
+	},
+	setChosenLink(method, urlMask) {
+		state.chosenLink = { method, urlMask }
+	}
 }
 
 
 const mockaton = new Commander(location.origin)
 updateState()
-deferred(initLongPoll)
+initLongPoll()
+initKeyboardNavigation()
 
 async function updateState() {
 	try {
@@ -85,6 +100,10 @@ async function updateState() {
 			throw response.status
 		Object.assign(state, await response.json())
 		document.body.replaceChildren(...App())
+		findChosenLink()?.focus()
+		const { method, urlMask } = state.chosenLink
+		if (method && urlMask)
+			await previewMock(method, urlMask)
 	}
 	catch (error) {
 		onError(error)
@@ -132,12 +151,10 @@ function Header() {
 				CookieSelector(),
 				ProxyFallbackField(),
 				ResetButton(),
-				SettingsMenu())))
+				SettingsMenuTrigger())))
 }
 
-function SettingsMenu() {
-	const { groupByMethod, toggleGroupByMethod } = state
-
+function SettingsMenuTrigger() {
 	const id = '_settings_menu_'
 	return (
 		r('button', {
@@ -146,29 +163,35 @@ function SettingsMenu() {
 				className: CSS.MenuTrigger
 			},
 			SettingsIcon(),
+			Defer(() => SettingsMenu(id))))
+}
 
-			r('menu', {
-					id,
-					popover: '',
-					className: CSS.SettingsMenu
-				},
-
-				r('label', className(CSS.GroupByMethod),
-					r('input', {
-						type: 'checkbox',
-						checked: groupByMethod,
-						autofocus: true,
-						onChange: toggleGroupByMethod
-					}),
-					r('span', null, t`Group by Method`)),
+function SettingsMenu(id) {
+	const { groupByMethod, toggleGroupByMethod } = state
+	return (
+		r('menu', {
+				id,
+				popover: '',
+				className: CSS.SettingsMenu
+			},
 
-				r('a', {
-					href: 'https://github.com/ericfortis/mockaton',
-					target: '_blank',
-					rel: 'noopener noreferrer'
-				}, t`Documentation`))))
+			r('label', className(CSS.GroupByMethod),
+				r('input', {
+					type: 'checkbox',
+					checked: groupByMethod,
+					// autofocus: true, // TODO
+					onChange: toggleGroupByMethod
+				}),
+				r('span', null, t`Group by Method`)),
+
+			r('a', {
+				href: 'https://github.com/ericfortis/mockaton',
+				target: '_blank',
+				rel: 'noopener noreferrer'
+			}, t`Documentation`)))
 }
 
+
 function CookieSelector() {
 	const { cookies } = state
 	function onChange() {
@@ -196,6 +219,7 @@ function BulkSelector() {
 	// But this way is easier to implement, with a few hacks.
 	const firstOption = t`Pick Comment…`
 	function onChange() {
+		state.clearChosenLink()
 		const value = this.value
 		this.value = firstOption // Hack 
 		mockaton.bulkSelectByComment(value)
@@ -233,8 +257,10 @@ function GlobalDelayField() {
 			.catch(onError)
 	}
 	function onWheel(event) {
-		const val = this.valueAsNumber - event.deltaY * 10
-		this.valueAsNumber = Math.max(val, 0)
+		if (event.deltaY > 0)
+			this.stepUp()
+		else
+			this.stepDown()
 		clearTimeout(onWheel.timer)
 		onWheel.timer = setTimeout(onChange.bind(this), 300)
 	}
@@ -254,9 +280,9 @@ function GlobalDelayField() {
 
 function ProxyFallbackField() {
 	const { proxyFallback } = state
+	const checkboxRef = useRef()
 	function onChange() {
-		const saveCheckbox = this.closest(`.${CSS.FallbackBackend}`).querySelector('[type=checkbox]')
-		saveCheckbox.disabled = !this.validity.valid || !this.value.trim()
+		checkboxRef.current.disabled = !this.validity.valid || !this.value.trim()
 
 		if (!this.validity.valid)
 			this.reportValidity()
@@ -278,10 +304,10 @@ function ProxyFallbackField() {
 					value: proxyFallback,
 					onChange
 				})),
-			SaveProxiedCheckbox()))
+			SaveProxiedCheckbox(checkboxRef)))
 }
 
-function SaveProxiedCheckbox() {
+function SaveProxiedCheckbox(ref) {
 	const { collectProxied, canProxy } = state
 	function onChange() {
 		mockaton.setCollectProxied(this.checked)
@@ -291,6 +317,7 @@ function SaveProxiedCheckbox() {
 	return (
 		r('label', className(CSS.SaveProxiedCheckbox),
 			r('input', {
+				ref,
 				type: 'checkbox',
 				disabled: !canProxy,
 				checked: collectProxied,
@@ -301,6 +328,7 @@ function SaveProxiedCheckbox() {
 
 function ResetButton() {
 	function onClick() {
+		state.clearChosenLink()
 		mockaton.reset()
 			.then(parseError)
 			.then(updateState)
@@ -327,7 +355,7 @@ function MockList() {
 				t`No mocks found`))
 
 	if (groupByMethod)
-		return Object.keys(brokersByMethod).map((method) => Fragment(
+		return Object.keys(brokersByMethod).map(method => Fragment(
 			r('tr', null,
 				r('th', { colspan: 2 + Number(canProxy) }),
 				r('th', null, method)),
@@ -337,7 +365,7 @@ function MockList() {
 }
 
 
-function Row({ method, urlMask, urlMaskDittoed, broker }) {
+function Row({ method, urlMask, urlMaskDittoed, broker }, i) {
 	const { canProxy, groupByMethod } = state
 	return (
 		r('tr', { 'data-method': method, 'data-urlMask': urlMask },
@@ -345,7 +373,7 @@ function Row({ method, urlMask, urlMaskDittoed, broker }) {
 			r('td', null, DelayRouteToggler(broker)),
 			r('td', null, InternalServerErrorToggler(broker)),
 			!groupByMethod && r('td', className(CSS.Method), method),
-			r('td', null, PreviewLink(method, urlMask, urlMaskDittoed)),
+			r('td', null, PreviewLink(method, urlMask, urlMaskDittoed, i === 0)),
 			r('td', null, MockSelector(broker))))
 }
 
@@ -358,9 +386,7 @@ function rowsFor(targetMethod) {
 			for (const [urlMask, broker] of Object.entries(brokers))
 				rows.push({ method, urlMask, broker })
 
-	const sorted = rows
-		.filter((r) => r.broker.mocks.length > 1) // >1 because of autogen500
-		.sort((rA, rB) => rA.urlMask.localeCompare(rB.urlMask))
+	const sorted = rows.sort((a, b) => a.urlMask.localeCompare(b.urlMask))
 
 	const urlMasksDittoed = dittoSplitPaths(sorted.map(r => r.urlMask))
 	return sorted.map((r, i) => ({
@@ -369,39 +395,50 @@ function rowsFor(targetMethod) {
 	}))
 }
 
-function PreviewLink(method, urlMask, urlMaskDittoed) {
+
+function PreviewLink(method, urlMask, urlMaskDittoed, autofocus) {
 	async function onClick(event) {
 		event.preventDefault()
 		try {
-			document.querySelector(`.${CSS.PreviewLink}.${CSS.chosen}`)?.classList.remove(CSS.chosen)
+			findChosenLink()?.classList.remove(CSS.chosen)
 			this.classList.add(CSS.chosen)
-			await previewMock(method, urlMask, this.href)
+			state.setChosenLink(method, urlMask)
+			await previewMock(method, urlMask)
 		}
 		catch (error) {
 			onError(error)
 		}
 	}
+	const { chosenLink } = state
+	const isChosen = chosenLink.method === method && chosenLink.urlMask === urlMask
 	const [ditto, tail] = urlMaskDittoed
 	return (
 		r('a', {
-			className: CSS.PreviewLink,
+			...className(CSS.PreviewLink, isChosen && CSS.chosen),
 			href: urlMask,
+			autofocus,
+			'data-focus-group': FocusGroup.PreviewLink,
 			onClick
 		}, ditto
 			? [r('span', className(CSS.dittoDir), ditto), tail]
 			: tail))
 }
 
+function findChosenLink() {
+	return document.querySelector(
+		`body > main > .${CSS.leftSide} .${CSS.PreviewLink}.${CSS.chosen}`)
+}
+
 const STR_PROXIED = t`Proxied`
 
 /** @param {ClientMockBroker} broker */
 function MockSelector(broker) {
 	function onChange() {
-		const { urlMask, method } = parseFilename(this.value)
+		const { method, urlMask } = parseFilename(this.value)
+		state.setChosenLink(method, urlMask)
 		mockaton.select(this.value)
 			.then(parseError)
 			.then(updateState)
-			.then(() => linkFor(method, urlMask)?.click())
 			.catch(onError)
 	}
 
@@ -455,7 +492,8 @@ function DelayRouteToggler(broker) {
 	}
 	return ClickDragToggler({
 		checked: broker.currentMock.delayed,
-		commit
+		commit,
+		focusGroup: FocusGroup.DelayToggler
 	})
 }
 
@@ -464,10 +502,10 @@ function DelayRouteToggler(broker) {
 function InternalServerErrorToggler(broker) {
 	function onChange() {
 		const { method, urlMask } = parseFilename(broker.mocks[0])
+		state.setChosenLink(method, urlMask)
 		mockaton.toggle500(method, urlMask)
 			.then(parseError)
 			.then(updateState)
-			.then(() => linkFor(method, urlMask)?.click())
 			.catch(onError)
 	}
 	return (
@@ -477,6 +515,7 @@ function InternalServerErrorToggler(broker) {
 			},
 			r('input', {
 				type: 'checkbox',
+				'data-focus-group': FocusGroup.StatusToggler,
 				name: broker.currentMock.file,
 				checked: parseFilename(broker.currentMock.file).status === 500,
 				onChange
@@ -488,10 +527,10 @@ function InternalServerErrorToggler(broker) {
 function ProxyToggler(broker) {
 	function onChange() {
 		const { urlMask, method } = parseFilename(broker.mocks[0])
+		state.setChosenLink(method, urlMask)
 		mockaton.setRouteIsProxied(method, urlMask, this.checked)
 			.then(parseError)
 			.then(updateState)
-			.then(() => linkFor(method, urlMask)?.click())
 			.catch(onError)
 	}
 	return (
@@ -502,7 +541,8 @@ function ProxyToggler(broker) {
 			r('input', {
 				type: 'checkbox',
 				checked: !broker.currentMock.file,
-				onChange
+				onChange,
+				'data-focus-group': FocusGroup.ProxyToggler
 			}),
 			CloudIcon()))
 }
@@ -532,7 +572,8 @@ function StaticFilesList() {
 					r('td', null, r('a', {
 						href: broker.route,
 						target: '_blank',
-						className: CSS.StaticFileLink
+						className: CSS.PreviewLink,
+						'data-focus-group': FocusGroup.PreviewLink
 					}, dp[i]))
 				))))
 }
@@ -546,7 +587,8 @@ function DelayStaticRouteToggler(broker) {
 	}
 	return ClickDragToggler({
 		checked: broker.delayed,
-		commit
+		commit,
+		focusGroup: FocusGroup.DelayToggler
 	})
 }
 
@@ -565,13 +607,14 @@ function NotFoundToggler(broker) {
 			r('input', {
 				type: 'checkbox',
 				checked: broker.status === 404,
-				onChange
+				onChange,
+				'data-focus-group': FocusGroup.StatusToggler
 			}),
 			r('span', null, t`404`)))
 }
 
 
-function ClickDragToggler({ checked, commit }) {
+function ClickDragToggler({ checked, commit, focusGroup }) {
 	function onPointerEnter(event) {
 		if (event.buttons === 1)
 			onPointerDown.call(this)
@@ -594,6 +637,7 @@ function ClickDragToggler({ checked, commit }) {
 			},
 			r('input', {
 				type: 'checkbox',
+				'data-focus-group': focusGroup,
 				checked,
 				onPointerEnter,
 				onPointerDown,
@@ -604,7 +648,6 @@ function ClickDragToggler({ checked, commit }) {
 }
 
 
-
 function Resizer() {
 	return (
 		r('div', {
@@ -682,7 +725,7 @@ function PayloadViewerTitleWhenProxied({ mime, status, statusText, gatewayIsBad
 			' ' + mime))
 }
 
-async function previewMock(method, urlMask, href) {
+async function previewMock(method, urlMask) {
 	previewMock.controller?.abort()
 	previewMock.controller = new AbortController
 
@@ -692,7 +735,7 @@ async function previewMock(method, urlMask, href) {
 	}, SPINNER_DELAY)
 
 	try {
-		const response = await fetch(href, {
+		const response = await fetch(urlMask, {
 			method,
 			signal: previewMock.controller.signal
 		})
@@ -736,7 +779,7 @@ async function updatePayloadViewer(method, urlMask, response) {
 		else if (isXML(mime))
 			payloadViewerRef.current.replaceChildren(syntaxXML(body))
 		else
-			payloadViewerRef.current.innerText = body
+			payloadViewerRef.current.textContent = body
 	}
 }
 
@@ -760,6 +803,50 @@ function focus(selector) {
 	document.querySelector(selector)?.focus()
 }
 
+function initKeyboardNavigation() {
+	addEventListener('keydown', onKeyDown)
+
+	function onKeyDown(event) {
+		const pivot = document.activeElement
+		switch (event.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()
+				}
+				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()
+				}
+				break
+			}
+		}
+	}
+
+	function rowFocusable(el, step) {
+		const row = el.closest('tr')
+		if (row) {
+			const focusables = Array.from(row.querySelectorAll('a, input, select:not(:disabled)'))
+			return circularAdjacent(step, focusables, el)
+		}
+	}
+
+	function allInFocusGroup(focusGroup) {
+		return Array.from(document.querySelectorAll(
+			`body > main > .${CSS.leftSide} table > tr > td [data-focus-group="${focusGroup}"]:is(input, a)`))
+	}
+
+	function circularAdjacent(step = 1, arr, pivot) {
+		return arr[(arr.indexOf(pivot) + step + arr.length) % arr.length]
+	}
+}
+
 /** # Misc */
 
 async function parseError(response) {
@@ -817,7 +904,7 @@ function SettingsIcon() {
  */
 
 function initLongPoll() {
-	poll.oldSyncVersion = 0
+	poll.oldSyncVersion = -1
 	poll.controller = new AbortController()
 	poll()
 	document.addEventListener('visibilitychange', () => {
@@ -835,9 +922,11 @@ async function poll() {
 		const response = await mockaton.getSyncVersion(poll.oldSyncVersion, poll.controller.signal)
 		if (response.ok) {
 			const syncVersion = await response.json()
+			const skipUpdate = poll.oldSyncVersion === -1
 			if (poll.oldSyncVersion !== syncVersion) { // because it could be < or >
 				poll.oldSyncVersion = syncVersion
-				await updateState()
+				if (!skipUpdate)
+					await updateState()
 			}
 			poll()
 		}
@@ -894,6 +983,12 @@ function Fragment(...args) {
 	return frag
 }
 
+function Defer(cb) {
+	const placeholder = document.createComment('')
+	deferred(() => placeholder.replaceWith(cb()))
+	return placeholder
+}
+
 function deferred(cb) {
 	return window.requestIdleCallback
 		? requestIdleCallback(cb)