mockaton 12.3.0 → 12.3.1

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "12.3.0",
+	"version": "12.3.1",
 	"exports": {
 		".": {
 			"import": "./index.js",

package/src/client/app-store.js

@@ -196,6 +196,7 @@ export const store = {
 			const response = await api.toggle500(method, urlMask)
 			if (!response.ok) throw response
 			store.setBroker(await response.json())
+			store.setChosenLink(method, urlMask)
 			store.renderRow(method, urlMask)
 		}
 		catch (error) { store.onError(error) }
@@ -206,6 +207,7 @@ export const store = {
 			const response = await api.setRouteIsProxied(method, urlMask, checked)
 			if (!response.ok) throw response
 			store.setBroker(await response.json())
+			store.setChosenLink(method, urlMask)
 			store.renderRow(method, urlMask)
 		}
 		catch (error) { store.onError(error) }

package/src/client/app.js

@@ -1,7 +1,7 @@
 import {
 	createElement as r,
 	createSvgElement as s,
-	classNames, restoreFocus, Fragment, adoptCSS
+	className, restoreFocus, Fragment, adoptCSS
 } from './dom-utils.js'
 
 import { store } from './app-store.js'
@@ -23,9 +23,7 @@ initKeyboardNavigation()
 
 let mounted = false
 function render() {
-	restoreFocus(() => {
-		document.body.replaceChildren(...App())
-	})
+	restoreFocus(() => document.body.replaceChildren(...App()))
 	if (store.hasChosenLink)
 		previewMock()
 	mounted = true
@@ -43,10 +41,10 @@ function App() {
 					style: { width: leftSideRef.width },
 					className: CSS.leftSide
 				},
-				r('div', classNames(CSS.SubToolbar),
+				r('div', className(CSS.SubToolbar),
 					GroupByMethod(),
 					BulkSelector()),
-				r('div', classNames(CSS.Table),
+				r('div', className(CSS.Table),
 					MockList(),
 					StaticFilesList())),
 			r('div', { className: CSS.rightSide },
@@ -65,7 +63,7 @@ function Header() {
 				},
 				Logo()),
 			r('div', null,
-				r('div', classNames(CSS.GlobalDelayWrap),
+				r('div', className(CSS.GlobalDelayWrap),
 					GlobalDelayField(),
 					GlobalDelayJitterField()),
 				CookieSelector(),
@@ -89,7 +87,7 @@ function GlobalDelayField() {
 		onWheel.timer = setTimeout(onChange.bind(this), 300)
 	}
 	return (
-		r('label', classNames(CSS.Field, CSS.GlobalDelayField),
+		r('label', className(CSS.Field, CSS.GlobalDelayField),
 			r('span', null, t`Delay (ms)`),
 			r('input', {
 				type: 'number',
@@ -118,7 +116,7 @@ function GlobalDelayJitterField() {
 		onWheel.timer = setTimeout(onChange.bind(this), 300)
 	}
 	return (
-		r('label', classNames(CSS.Field, CSS.GlobalDelayJitterField),
+		r('label', className(CSS.Field, CSS.GlobalDelayJitterField),
 			r('span', null, t`Max Jitter %`),
 			r('input', {
 				type: 'number',
@@ -138,7 +136,7 @@ function CookieSelector() {
 	const disabled = cookies.length <= 1
 	const list = cookies.length ? cookies : [[t`None`, true]]
 	return (
-		r('label', classNames(CSS.Field, CSS.CookieSelector),
+		r('label', className(CSS.Field, CSS.CookieSelector),
 			r('span', null, t`Cookie`),
 			r('select', {
 				autocomplete: 'off',
@@ -162,7 +160,7 @@ function ProxyFallbackField() {
 			store.setProxyFallback(this.value.trim())
 	}
 	return (
-		r('div', classNames(CSS.Field, CSS.FallbackBackend),
+		r('div', className(CSS.Field, CSS.FallbackBackend),
 			r('label', null,
 				r('span', null, t`Fallback`),
 				r('input', {
@@ -177,7 +175,7 @@ function ProxyFallbackField() {
 
 function SaveProxiedCheckbox(ref) {
 	return (
-		r('label', classNames(CSS.SaveProxiedCheckbox),
+		r('label', className(CSS.SaveProxiedCheckbox),
 			r('input', {
 				ref,
 				type: 'checkbox',
@@ -185,7 +183,7 @@ function SaveProxiedCheckbox(ref) {
 				checked: store.collectProxied,
 				onChange() { store.setCollectProxied(this.checked) }
 			}),
-			r('span', classNames(CSS.checkboxBody), t`Save Mocks`)))
+			r('span', className(CSS.checkboxBody), t`Save Mocks`)))
 }
 
 
@@ -222,7 +220,7 @@ function BulkSelector() {
 	}
 	const disabled = !comments.length
 	return (
-		r('label', classNames(CSS.BulkSelector),
+		r('label', className(CSS.BulkSelector),
 			r('span', null, t`Bulk Select`),
 			r('select', {
 					autocomplete: 'off',
@@ -241,13 +239,13 @@ function BulkSelector() {
 
 function GroupByMethod() {
 	return (
-		r('label', classNames(CSS.GroupByMethod),
+		r('label', className(CSS.GroupByMethod),
 			r('input', {
 				type: 'checkbox',
 				checked: store.groupByMethod,
 				onChange: store.toggleGroupByMethod
 			}),
-			r('span', classNames(CSS.checkboxBody), t`Group by Method`)))
+			r('span', className(CSS.checkboxBody), t`Group by Method`)))
 }
 
 
@@ -258,10 +256,10 @@ function MockList() {
 		return r('div', null, t`No mocks found`)
 
 	if (store.groupByMethod)
-		return Object.keys(store.brokersByMethod).map(method =>
-			Fragment(
-				r('div', classNames(CSS.TableHeading, store.canProxy && CSS.canProxy), method),
-				store.brokersAsRowsByMethod(method).map(Row)))
+		return Object.keys(store.brokersByMethod).map(method => Fragment(
+			r('div', className(CSS.TableHeading, store.canProxy && CSS.canProxy),
+				method),
+			store.brokersAsRowsByMethod(method).map(Row)))
 
 	return store.brokersAsRowsByMethod('*').map(Row)
 }
@@ -275,29 +273,27 @@ function Row(row, i) {
 	return (
 		r('div', {
 				key: row.key,
-				...classNames(CSS.TableRow,
+				...className(CSS.TableRow,
 					mounted && row.isNew && CSS.animIn)
 			},
 			store.canProxy && ProxyToggler(method, urlMask, row.proxied),
 
 			DelayToggler({
 				checked: row.delayed,
-				commit(checked) {
-					store.setDelayed(method, urlMask, checked)
-				},
+				commit(checked) { store.setDelayed(method, urlMask, checked) },
 			}),
 
 			StatusCodeToggler({
 				title: t`Internal Server Error`,
-				body: t`500`,
+				label: t`500`,
 				disabled: row.opts.length === 1 && row.status === 500,
 				checked: !row.proxied && row.status === 500,
-				commit() {
+				onChange() {
 					store.toggle500(method, urlMask)
 				}
 			}),
 
-			!store.groupByMethod && r('span', classNames(CSS.Method), method),
+			!store.groupByMethod && r('span', className(CSS.Method), method),
 
 			PreviewLink(method, urlMask, row.urlMaskDittoed, i === 0),
 
@@ -305,58 +301,38 @@ function Row(row, i) {
 }
 
 function renderRow(method, urlMask) {
-	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
-		}
+	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)
 	}
 }
 
 
-
 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', {
-			...classNames(CSS.PreviewLink, isChosen && CSS.chosen),
+			...className(CSS.PreviewLink, isChosen && CSS.chosen),
 			href: urlMask,
 			autofocus,
 			onClick
 		}, ditto
-			? [r('span', classNames(CSS.dittoDir), ditto), tail]
+			? [r('span', className(CSS.dittoDir), ditto), tail]
 			: tail))
 }
 
@@ -376,7 +352,7 @@ function MockSelector(row) {
 			},
 			'aria-label': t`Mock Selector`,
 			disabled: row.opts.length < 2,
-			...classNames(
+			...className(
 				CSS.MockSelector,
 				row.selectedIdx > 0 && CSS.nonDefault,
 				row.selectedFileIs4xx && CSS.status4xx)
@@ -386,15 +362,17 @@ function MockSelector(row) {
 
 
 function ProxyToggler(method, urlMask, checked) {
-	return ClickDragToggler({
-		className: CSS.ProxyToggler,
-		title: t`Proxy Toggler`,
-		checked,
-		commit(checked) {
-			store.setProxied(method, urlMask, checked)
-		},
-		body: CloudIcon()
-	})
+	return (
+		r('label', {
+				className: CSS.ProxyToggler,
+				title: t`Proxy Toggler`
+			},
+			r('input', {
+				type: 'checkbox',
+				checked,
+				onChange() { store.setProxied(method, urlMask, this.checked) },
+			}),
+			CloudIcon()))
 }
 
 
@@ -407,7 +385,7 @@ function StaticFilesList() {
 		? null
 		: Fragment(
 			r('div',
-				classNames(CSS.TableHeading,
+				className(CSS.TableHeading,
 					store.canProxy && CSS.canProxy,
 					!store.groupByMethod && CSS.nonGroupedByMethod),
 				store.groupByMethod
@@ -423,7 +401,7 @@ function StaticRow(row) {
 	return (
 		r('div', {
 				key: row.key,
-				...classNames(CSS.TableRow,
+				...className(CSS.TableRow,
 					mounted && row.isNew && CSS.animIn)
 			},
 
@@ -437,48 +415,42 @@ function StaticRow(row) {
 
 			StatusCodeToggler({
 				title: t`Not Found`,
-				body: t`404`,
+				label: t`404`,
 				checked: row.status === 404,
-				commit(checked) {
-					store.setStaticRouteStatus(row.urlMask, checked
+				onChange() {
+					store.setStaticRouteStatus(row.urlMask, this.checked
 						? 404
 						: 200)
 				}
 			}),
 
-			!groupByMethod && r('span', classNames(CSS.Method), 'GET'),
+			!groupByMethod && r('span', className(CSS.Method), 'GET'),
 
 			r('a', {
 				href: row.urlMask,
 				target: '_blank',
 				className: CSS.PreviewLink,
 			}, ditto
-				? [r('span', classNames(CSS.dittoDir), ditto), tail]
+				? [r('span', className(CSS.dittoDir), ditto), tail]
 				: tail)))
 }
 
-function StatusCodeToggler({ title, body, commit, checked, disabled }) {
-	return ClickDragToggler({
-		title,
-		disabled,
-		className: CSS.StatusCodeToggler,
-		commit,
-		checked,
-		body
-	})
+function StatusCodeToggler({ title, label, onChange, checked }) {
+	return (
+		r('label', {
+				title,
+				className: CSS.StatusCodeToggler
+			},
+			r('input', {
+				type: 'checkbox',
+				checked,
+				onChange
+			}),
+			r('span', className(CSS.checkboxBody), label)))
 }
 
-function DelayToggler({ checked, commit, optClassName }) {
-	return ClickDragToggler({
-		checked,
-		commit,
-		...classNames(CSS.DelayToggler, optClassName),
-		title: t`Delay`,
-		body: TimerIcon()
-	})
-}
 
-function ClickDragToggler({ checked, commit, className, title, body }) {
+function DelayToggler({ checked, commit, optClassName }) {
 	function onPointerEnter(event) {
 		if (event.buttons === 1)
 			onPointerDown.call(this)
@@ -496,7 +468,10 @@ function ClickDragToggler({ checked, commit, className, title, body }) {
 		commit(this.checked)
 	}
 	return (
-		r('label', { ...classNames(CSS.Toggler, className), title },
+		r('label', {
+				...className(CSS.DelayToggler, optClassName),
+				title: t`Delay`
+			},
 			r('input', {
 				type: 'checkbox',
 				checked,
@@ -505,7 +480,7 @@ function ClickDragToggler({ checked, commit, className, title, body }) {
 				onClick,
 				onChange
 			}),
-			r('span', classNames(CSS.checkboxBody), body)))
+			TimerIcon()))
 }
 
 function Resizer(ref) {
@@ -560,7 +535,7 @@ const payloadViewerCodeRef = {}
 
 function PayloadViewer() {
 	return (
-		r('div', classNames(CSS.PayloadViewer),
+		r('div', className(CSS.PayloadViewer),
 			RightToolbar(),
 			r('pre', null,
 				r('code', { ref: payloadViewerCodeRef },
@@ -569,7 +544,7 @@ function PayloadViewer() {
 
 function RightToolbar() {
 	return (
-		r('div', classNames(CSS.SubToolbar),
+		r('div', className(CSS.SubToolbar),
 			r('h2', { ref: payloadViewerTitleRef },
 				!store.hasChosenLink && t`Preview`)))
 }
@@ -600,7 +575,7 @@ function PayloadViewerTitleWhenProxied(response) {
 const SPINNER_DELAY = 80
 function PayloadViewerProgressBar() {
 	return (
-		r('div', classNames(CSS.ProgressBar),
+		r('div', className(CSS.ProgressBar),
 			r('div', {
 				style: {
 					animationDuration: store.delay - SPINNER_DELAY + 'ms'

package/src/client/dom-utils.js

@@ -1,4 +1,4 @@
-export function classNames(...args) {
+export function className(...args) {
 	return {
 		className: args.filter(Boolean).join(' ')
 	}

package/src/client/styles.css

@@ -400,7 +400,7 @@ main {
 		padding-bottom: 4px;
 		padding-left: 1px;
 		border-top: 24px solid transparent;
-		margin-left: 71px;
+		margin-left: 74px;
 		font-weight: bold;
 		text-align: left;
 
@@ -409,7 +409,7 @@ main {
 		}
 
 		&.canProxy {
-			margin-left: 100px;
+			margin-left: 110px;
 		}
 		&.nonGroupedByMethod {
 			margin-left: 122px;
@@ -505,11 +505,11 @@ main {
 	}
 }
 
-
-.Toggler {
+.DelayToggler,
+.ProxyToggler {
 	display: flex;
 
-	input {
+	> input {
 		/* For click drag target */
 		position: absolute;
 		width: 22px;
@@ -518,85 +518,136 @@ main {
 
 		&:focus-visible {
 			outline: 0;
-			& + .checkboxBody {
+			& + svg {
 				outline: 2px solid var(--colorAccent)
 			}
 		}
+	}
 
-		&:disabled + .checkboxBody {
-			cursor: not-allowed;
-			opacity: 0.7;
-		}
+	> svg {
+		fill: none;
+		stroke: var(--colorSecondaryAction);
+	}
+}
 
-		&:checked + .checkboxBody {
+.DelayToggler {
+	> input {
+		&:checked + svg {
 			border-color: var(--colorAccent);
 			fill: var(--colorAccent);
 			background: var(--colorAccent);
 			stroke: var(--colorBackground);
 		}
 
-		&:enabled:hover:not(:checked) + .checkboxBody {
+		&:enabled:hover:not(:checked) + svg {
 			border-color: var(--colorHover);
 			background: var(--colorHover);
 			stroke: var(--colorText);
 		}
 	}
 
-	.checkboxBody {
-		display: flex;
+	> svg {
 		width: 22px;
 		height: 22px;
-		align-items: center;
-		justify-content: center;
 		border: 1px solid var(--colorSecondaryActionBorder);
-		fill: none;
-		stroke: var(--colorSecondaryAction);
 		stroke-width: 2.5px;
 		border-radius: 50%;
 	}
 
 	&.canProxy {
-		margin-left: 30px;
+		margin-left: 36px;
 	}
 }
 
-.DelayToggler {
-}
-
 .ProxyToggler {
+	border: 1px solid var(--colorSecondaryActionBorder);
 	margin-right: 8px;
+	border-radius: var(--radius);
 
-	.checkboxBody {
-		svg {
-			width: 16px;
+	&:has(input:checked),
+	&:has(input:disabled) {
+		background: transparent;
+		box-shadow: none;
+	}
+
+	> input {
+		&:checked + svg {
+			fill: var(--colorAccent);
+			stroke: var(--colorAccent);
+
+			path:last-of-type { /* inner cloud curve */
+				stroke: var(--colorBackground);
+			}
+			transform: scale(1.1);
 		}
+
+		&:enabled:hover:not(:checked) + svg {
+			fill: var(--colorHover);
+			stroke: var(--colorText);
+		}
+
+		&:disabled + svg {
+			stroke-opacity: 0.4;
+			cursor: not-allowed;
+			box-shadow: none;
+			fill: transparent;
+
+			path:last-of-type {
+				stroke-opacity: 0;
+				stroke: transparent;
+			}
+		}
+	}
+
+	> svg {
+		width: 26px;
+		padding: 1px 4px;
+		stroke-width: 2px;
+		border-radius: var(--radius);
 	}
 }
 
 .StatusCodeToggler {
+	display: flex;
 	margin-right: 10px;
 	margin-left: 8px;
+	cursor: pointer;
 
-	input {
-		width: 26px;
+	> input {
+		appearance: none;
 
-		&:not(:checked):enabled:hover + .checkboxBody {
-			border-color: var(--colorRed);
-			color: var(--colorRed);
+		&:focus-visible {
+			outline: 0;
+			& + .checkboxBody {
+				outline: 2px solid var(--colorAccent)
+			}
+		}
+
+		&:disabled + .checkboxBody {
+			cursor: not-allowed;
+			opacity: 0.7;
 		}
 		&:checked + .checkboxBody {
 			border-color: var(--colorRed);
 			color: white;
 			background: var(--colorRed);
 		}
+		&:not(:checked):enabled:hover + .checkboxBody {
+			border-color: var(--colorRed);
+			color: var(--colorRed);
+		}
+		&:enabled:active + .checkboxBody {
+			cursor: grabbing;
+		}
 	}
 
-	.checkboxBody {
-		width: 27px;
+	> .checkboxBody {
 		padding: 4px;
+		border: 1px solid var(--colorSecondaryActionBorder);
 		font-size: 10px;
 		font-weight: bold;
 		color: var(--colorSecondaryAction);
+		border-radius: var(--radius);
 	}
 }