mockaton 12.0.0 → 12.1.0

package/README.md

@@ -27,9 +27,9 @@ For example, for [/api/company/123](#), the filename could be:
 ## Dashboard
 
 <picture>
-  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp832x740.light.gold.png">
-  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp832x740.dark.gold.png">
-  <img alt="Mockaton Dashboard" src="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp832x740.dark.gold.png">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp762x762.light.gold.png">
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp762x762.dark.gold.png">
+  <img alt="Mockaton Dashboard" src="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp762x762.dark.gold.png">
 </picture>
 
 On the dashboard you can:
@@ -38,8 +38,8 @@ On the dashboard you can:
 - Trigger an autogenerated `500` error
   - …and cycle it off (for testing retries)
 
-Nonetheless, there’s a programmatic API, which is handy for
-setting up tests (see **Commander&nbsp;API** section below).
+Nonetheless, there’s a [Control API ↗](https://mockaton.com/api), which is handy for
+setting up tests.
 
 <br/>
 

package/package.json

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

package/src/client/app.js

@@ -1,8 +1,4 @@
-import {
-	createElement as r,
-	createSvgElement as s,
-	className, restoreFocus, Defer, Fragment, adoptCSS
-} from './dom-utils.js'
+import { createElement as r, createSvgElement as s, className, restoreFocus, Defer, Fragment, adoptCSS } from './dom-utils.js'
 
 import { store } from './app-store.js'
 import { parseFilename } from './Filename.js'
@@ -47,6 +43,9 @@ function App() {
 					style: { width: leftSideRef.width },
 					className: CSS.leftSide
 				},
+				r('div', className(CSS.SubToolbar),
+					GroupByMethod(),
+					BulkSelector()),
 				r('div', className(CSS.Table),
 					MockList(),
 					StaticFilesList())),
@@ -68,7 +67,6 @@ function Header() {
 				r('div', className(CSS.GlobalDelayWrap),
 					GlobalDelayField(),
 					GlobalDelayJitterField()),
-				BulkSelector(),
 				CookieSelector(),
 				ProxyFallbackField(),
 				ResetButton(),
@@ -136,30 +134,6 @@ function GlobalDelayJitterField() {
 }
 
 
-function BulkSelector() {
-	const { comments } = store
-	const firstOption = t`Pick Comment…`
-	function onChange() {
-		const value = this.value
-		this.value = firstOption // hack so it’s always selected
-		store.bulkSelectByComment(value)
-	}
-	const disabled = !comments.length
-	return (
-		r('label', className(CSS.Field),
-			r('span', null, t`Bulk Select`),
-			r('select', {
-					className: CSS.BulkSelector,
-					autocomplete: 'off',
-					disabled,
-					title: disabled ? t`No mock files have comments which are anything within parentheses on the filename.` : '',
-					onChange
-				},
-				r('option', { value: firstOption }, firstOption),
-				r('hr'),
-				comments.map(value => r('option', { value }, value)))))
-	// TODO For a11y, use `menu` instead of `select`
-}
 
 function CookieSelector() {
 	const { cookies } = store
@@ -234,34 +208,19 @@ function SettingsMenuTrigger() {
 				popovertarget: id,
 				className: CSS.MenuTrigger
 			},
-			SettingsIcon(),
+			InfoIcon(),
 			Defer(() => SettingsMenu(id))))
 }
 
 function SettingsMenu(id) {
-	const firstInputRef = {}
 	return (
 		r('menu', {
 				id,
 				popover: '',
-				className: CSS.SettingsMenu,
-				onToggle(event) {
-					if (event.newState === 'open')
-						firstInputRef.elem.focus()
-				}
+				className: CSS.SettingsMenu
 			},
 
 			r('div', null,
-				r('label', className(CSS.GroupByMethod),
-					r('input', {
-						name: 'group-by-method',
-						ref: firstInputRef,
-						type: 'checkbox',
-						checked: store.groupByMethod,
-						onChange: store.toggleGroupByMethod
-					}),
-					r('span', className(CSS.checkboxBody), t`Group by Method`)),
-
 				r('a', {
 					href: 'https://mockaton.com',
 					target: '_blank',
@@ -280,6 +239,47 @@ function SettingsMenu(id) {
 
 
 
+/** # Left Side */
+
+
+function BulkSelector() {
+	const { comments } = store
+	const firstOption = t`Pick Comment…`
+	function onChange() {
+		const value = this.value
+		this.value = firstOption // hack so it’s always selected
+		store.bulkSelectByComment(value)
+	}
+	const disabled = !comments.length
+	return (
+		r('label', className(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.` : '',
+					onChange
+				},
+				r('option', { value: firstOption }, firstOption),
+				r('hr'),
+				comments.map(value => r('option', { value }, value)))))
+	// TODO For a11y, use `menu` instead of `select`
+}
+
+
+function GroupByMethod() {
+	return (
+		r('label', className(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`)))
+}
+
+
 /** # MockList */
 
 function MockList() {
@@ -540,7 +540,7 @@ function Resizer(ref) {
 	}
 
 	function onMove(event) {
-		const MIN_LEFT_WIDTH = 340
+		const MIN_LEFT_WIDTH = 350
 		raf = raf || requestAnimationFrame(() => {
 			ref.width = Math.max(initialWidth - (initialX - event.clientX), MIN_LEFT_WIDTH) + 'px'
 			ref.elem.style.width = ref.width
@@ -575,13 +575,19 @@ const payloadViewerCodeRef = {}
 function PayloadViewer() {
 	return (
 		r('div', className(CSS.PayloadViewer),
-			r('h2', { ref: payloadViewerTitleRef },
-				!store.hasChosenLink && t`Preview`),
+			RightToolbar(),
 			r('pre', null,
 				r('code', { ref: payloadViewerCodeRef },
 					!store.hasChosenLink && t`Click a link to preview it`))))
 }
 
+function RightToolbar() {
+	return r('div', className(CSS.SubToolbar),
+		r('h2', { ref: payloadViewerTitleRef },
+			!store.hasChosenLink && t`Preview`))
+}
+
+
 function PayloadViewerTitle(file, statusText) {
 	const { method, status, ext } = parseFilename(file)
 	const fileNameWithComments = file.split('.').slice(0, -3).join('.')
@@ -731,10 +737,10 @@ function CloudIcon() {
 			s('path', { d: 'm6.1 9.1c2.8 0 5 2.3 5 5' })))
 }
 
-function SettingsIcon() {
+function InfoIcon() {
 	return (
 		s('svg', { viewBox: '0 0 24 24' },
-			s('path', { d: 'M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6' })))
+			s('path', { d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z' })))
 }
 
 

package/src/client/styles.css

@@ -5,14 +5,15 @@
 
 @media (prefers-color-scheme: light) {
 	:root {
+		color-scheme: light;
 		--color4xxBackground: #ffedd1;
 		--colorAccent: #0b61ec;
 		--colorBackground: #fff;
 		--colorComboBoxHeaderBackground: #fff;
 		--colorComboBoxBackground: #eee;
-		--colorHeaderBackground: #efefef;
+		--colorHeaderBackground: #f5f5f5;
 		--colorSecondaryButtonBackground: #fcfcfc;
-		--colorSecondaryActionBorder: #ddd;
+		--colorSecondaryActionBorder: #e0e0e0;
 		--colorSecondaryAction: #666;
 		--colorDisabledMockSelector: #444;
 		--colorHover: rgba(119, 193, 255, 0.5);
@@ -27,6 +28,7 @@
 }
 @media (prefers-color-scheme: dark) {
 	:root {
+		color-scheme: dark;
 		--color4xxBackground: #68554a;
 		--colorAccent: #2495ff;
 		--colorBackground: #181818;
@@ -52,9 +54,6 @@ html,
 body {
 	overflow: hidden;
 	height: 100%;
-	padding: 0;
-	margin: 0;
-	background: var(--colorHeaderBackground);
 	font-size: 12px;
 }
 body {
@@ -72,7 +71,6 @@ body {
 	margin: 0;
 	font-family: inherit;
 	font-size: 100%;
-	outline: 0;
 	scrollbar-width: thin;
 }
 
@@ -88,6 +86,7 @@ a,
 select,
 button,
 input[type=checkbox] {
+	outline: 0;
 	cursor: pointer;
 }
 
@@ -100,6 +99,7 @@ input[type=checkbox]:active {
 
 a {
 	text-decoration: none;
+	color: var(--colorAccent);
 }
 
 select {
@@ -122,13 +122,13 @@ select {
 	}
 	&:disabled {
 		cursor: not-allowed;
-		opacity: 0.5;
+		opacity: 50%;
 	}
 }
 
 header {
 	display: flex;
-	width: 100vw;
+	flex: 0 0 100%;
 	padding: 16px;
 	border-bottom: 1px solid var(--colorSecondaryActionBorder);
 	background: var(--colorHeaderBackground);
@@ -137,6 +137,16 @@ header {
 		align-self: end;
 		margin-right: 22px;
 		margin-bottom: 3px;
+		opacity: 85%;
+		transition: opacity 240ms ease-in-out;
+
+		&:hover {
+			opacity: 1;
+		}
+
+		@media (max-width: 730px) {
+			display: none;
+		}
 
 		svg {
 			width: 120px;
@@ -150,17 +160,12 @@ header {
 		width: 100%;
 		flex-wrap: wrap;
 		align-items: flex-end;
-		gap: 16px 8px;
-	}
+		gap: 16px 12px;
 
-	@media (max-width: 830px) {
-		.Logo {
-			display: none;
-		}
-	}
-	@media (max-width: 690px) {
-		> div .MenuTrigger {
-			margin-left: unset;
+		@media (max-width: 590px) {
+			.MenuTrigger {
+				margin-left: unset;
+			}
 		}
 	}
 
@@ -168,112 +173,6 @@ header {
 		display: flex;
 	}
 
-	.Field {
-		width: 116px;
-
-		span {
-			display: flex;
-			align-items: center;
-			margin-left: 8px;
-			color: var(--colorLabel);
-			font-size: 11px;
-			gap: 4px;
-		}
-
-		input[type=url],
-		input[type=number],
-		select {
-			width: 100%;
-			height: 28px;
-			padding: 4px 8px;
-			border: 1px solid var(--colorSecondaryActionBorder);
-			margin-top: 2px;
-			color: var(--colorText);
-			font-size: 11px;
-			background-color: var(--colorComboBoxHeaderBackground);
-			border-radius: var(--radius);
-		}
-
-		select:enabled:hover {
-			border-color: var(--colorSecondaryActionBorder);
-			background: var(--colorHover);
-		}
-
-		&.GlobalDelayField {
-			position: relative;
-			width: 76px;
-
-			input {
-				padding-right: 6px;
-				border-bottom-right-radius: 0;
-				border-top-right-radius: 0;
-			}
-
-			svg {
-				width: 12px;
-				height: 12px;
-				border: 1px solid var(--colorLabel);
-				stroke-width: 3px;
-				border-radius: 50%;
-			}
-
-			&:focus-within {
-				z-index: 100;
-			}
-		}
-
-		&.GlobalDelayJitterField {
-			width: 80px;
-			span {
-				margin-left: 4px;
-			}
-			input {
-				border-left: 2px solid transparent;
-				border-bottom-left-radius: 0;
-				border-top-left-radius: 0;
-			}
-			&:focus-within {
-				z-index: 100;
-			}
-		}
-
-		&.CookieSelector {
-			width: 100px;
-		}
-
-		&.FallbackBackend {
-			position: relative;
-			width: 150px;
-
-			.SaveProxiedCheckbox {
-				position: absolute;
-				top: 0;
-				right: 0;
-				display: flex;
-				width: auto;
-				min-width: unset;
-				align-items: center;
-				font-size: 11px;
-				gap: 4px;
-
-				input + .checkboxBody {
-					margin: 0;
-					margin-right: 4px;
-				}
-				input:enabled + .checkboxBody {
-					cursor: pointer;
-				}
-				input:disabled + .checkboxBody {
-					opacity: 0.8;
-				}
-			}
-		}
-	}
-
-	.BulkSelector {
-		background-image: none;
-		text-align-last: center;
-	}
 
 	.ResetButton {
 		padding: 6px 12px;
@@ -310,6 +209,107 @@ header {
 	}
 }
 
+.Field {
+	width: 116px;
+
+	span {
+		display: flex;
+		align-items: center;
+		margin-left: 8px;
+		color: var(--colorLabel);
+		font-size: 11px;
+		gap: 4px;
+	}
+
+	input[type=url],
+	input[type=number],
+	select {
+		width: 100%;
+		height: 28px;
+		padding: 4px 8px;
+		border: 1px solid var(--colorSecondaryActionBorder);
+		margin-top: 2px;
+		color: var(--colorText);
+		font-size: 11px;
+		background-color: var(--colorComboBoxHeaderBackground);
+		border-radius: var(--radius);
+	}
+
+	&.GlobalDelayField {
+		position: relative;
+		width: 76px;
+
+		input {
+			padding-right: 6px;
+			border-bottom-right-radius: 0;
+			border-top-right-radius: 0;
+		}
+
+		svg {
+			width: 12px;
+			height: 12px;
+			border: 1px solid var(--colorLabel);
+			stroke-width: 3px;
+			border-radius: 50%;
+		}
+
+		&:focus-within {
+			z-index: 100;
+		}
+	}
+
+	&.GlobalDelayJitterField {
+		width: 80px;
+		span {
+			margin-left: 4px;
+		}
+		input {
+			border-left: 2px solid transparent;
+			border-bottom-left-radius: 0;
+			border-top-left-radius: 0;
+		}
+		&:focus-within {
+			z-index: 100;
+		}
+	}
+
+	&.CookieSelector {
+		width: 100px;
+	}
+
+	&.FallbackBackend {
+		position: relative;
+		width: 150px;
+
+		.SaveProxiedCheckbox {
+			position: absolute;
+			top: 0;
+			right: 0;
+			display: flex;
+			width: auto;
+			min-width: unset;
+			align-items: center;
+			font-size: 11px;
+			gap: 4px;
+
+			input + .checkboxBody {
+				margin: 0;
+				margin-right: 4px;
+			}
+			input:enabled + .checkboxBody {
+				cursor: pointer;
+			}
+			input:disabled {
+				cursor: not-allowed;
+			}
+			input:disabled + .checkboxBody {
+				opacity: 0.8;
+				cursor: not-allowed;
+			}
+		}
+	}
+}
+
 .SettingsMenu {
 	position: absolute;
 	top: 62px;
@@ -329,20 +329,9 @@ header {
 		gap: 12px;
 		text-align: left;
 
-		a {
-			color: var(--colorAccent);
-		}
-
-		.GroupByMethod {
-			display: flex;
-			align-items: center;
-			gap: 6px;
-			cursor: pointer;
-		}
 	}
 }
 
-
 main {
 	display: flex;
 	min-width: 0;
@@ -356,19 +345,15 @@ main {
 		}
 
 		.leftSide {
-			min-width: 100%;
-			min-height: 50%;
-			max-height: 50%;
-			border: 0;
+			width: 100% !important;
+			height: 50%;
+			border-right: 0;
 		}
 	}
 
 	.leftSide {
 		width: 50%; /* resizable in js */
-		padding: 16px;
 		border-right: 1px solid var(--colorSecondaryActionBorder);
-		user-select: none;
-		overflow-y: auto;
 		box-shadow: var(--boxShadow1);
 	}
 
@@ -394,10 +379,47 @@ main {
 	}
 }
 
+.SubToolbar {
+	display: flex;
+	height: 42px;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 16px;
+	border-bottom: 1px solid var(--colorSecondaryActionBorder);
+	background: var(--colorHeaderBackground);
+}
+
+.GroupByMethod {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	cursor: pointer;
+}
+
+.BulkSelector {
+	select {
+		width: 110px;
+		padding: 6px 8px;
+		border: 1px solid var(--colorSecondaryActionBorder);
+		margin-left: 4px;
+		background-image: none;
+		text-align-last: center;
+		color: var(--colorText);
+		font-size: 11px;
+		background-color: var(--colorComboBoxHeaderBackground);
+		border-radius: var(--radius);
+	}
+}
+
 .Table {
+	height: 100%;
+	padding: 16px;
+	user-select: none;
+	overflow-y: auto;
+
 	.TableHeading {
 		padding-bottom: 4px;
-		padding-left: 4px;
+		padding-left: 1px;
 		border-top: 24px solid transparent;
 		margin-left: 74px;
 		font-weight: bold;
@@ -430,7 +452,6 @@ main {
 		}
 	}
 }
-
 @keyframes _kfRowIn {
 	to {
 		opacity: 1;
@@ -459,7 +480,6 @@ main {
 	padding: 6px 8px;
 	margin-left: 4px;
 	border-radius: var(--radius);
-	color: var(--colorAccent);
 	word-break: break-word;
 
 
@@ -651,15 +671,7 @@ main {
 
 
 .PayloadViewer {
-	display: flex;
 	height: 100%;
-	flex-direction: column;
-	padding-top: 16px;
-
-	> h2 {
-		padding-bottom: 4px;
-		padding-left: 16px;
-	}
 
 	> pre {
 		overflow: auto;
@@ -750,7 +762,6 @@ main {
 		background: rgba(0, 0, 0, 0.5);
 	}
 }
-
 @keyframes _kfToastIn {
 	to {
 		opacity: 1;