mockaton 10.3.5 → 10.3.7

package/README.md

@@ -60,9 +60,9 @@ Nonetheless, there’s a programmatic API, which is handy
 for setting up tests (see **Commander API** section below).
 
 <picture>
-  <source media="(prefers-color-scheme: light)" srcset="pixaton-tests/macos/pic-for-readme.vp761x790.light.gold.png">
-  <source media="(prefers-color-scheme: dark)" srcset="pixaton-tests/macos/pic-for-readme.vp761x790.dark.gold.png">
-  <img alt="Mockaton Dashboard" src="pixaton-tests/macos/pic-for-readme.vp761x790.light.gold.png">
+  <source media="(prefers-color-scheme: light)" srcset="pixaton-tests/macos/pic-for-readme.vp761x720.light.gold.png">
+  <source media="(prefers-color-scheme: dark)" srcset="pixaton-tests/macos/pic-for-readme.vp761x720.dark.gold.png">
+  <img alt="Mockaton Dashboard" src="pixaton-tests/macos/pic-for-readme.vp761x720.light.gold.png">
 </picture>
 
 

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "10.3.5",
+	"version": "10.3.7",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",
@@ -27,6 +27,6 @@
 	},
 	"devDependencies": {
 		"pixaton": "1.1.3",
-		"puppeteer": "24.22.3"
+		"puppeteer": "24.23.0"
 	}
 }

package/src/Dashboard.css

@@ -43,7 +43,7 @@
 		--colorComboBoxBackground: #2a2a2a;
 		--colorSecondaryButtonBackground: #2a2a2a;
 		--colorSecondaryActionBorder: #333;
-		--colorSecondaryAction: #999;
+		--colorSecondaryAction: #aaa;
 		--colorComboBoxHeaderBackground: #222;
 		--colorDisabledMockSelector: #b9b9b9;
 		--colorHover: #023661;
@@ -168,7 +168,7 @@ header {
 			width: 100px;
 			align-self: center;
 		}
-		
+
 		> div {
 			width: 400px;
 			.MenuTrigger {
@@ -250,6 +250,7 @@ header {
 
 				input + span {
 					margin: 0;
+					margin-right: 4px;
 				}
 				input:disabled + span {
 					opacity: 0.8;
@@ -346,7 +347,6 @@ main {
 	.leftSide {
 		width: 50%;
 		padding: 16px;
-		padding-bottom: 0;
 		border-right: 1px solid var(--colorSecondaryActionBorder);
 		user-select: none;
 		overflow-y: auto;
@@ -382,11 +382,12 @@ table {
 	th {
 		padding-bottom: 2px;
 		padding-left: 4px;
+		border-top: 20px solid transparent;
 		text-align: left;
 	}
-
-	tbody {
-		border-bottom: 20px solid transparent;
+	
+	> tr:first-child > th {
+		border-top: 0;
 	}
 }
 
@@ -394,12 +395,19 @@ table {
 	margin-top: 80px;
 }
 
+.Method {
+	padding-right: 8px;
+	color: var(--colorSecondaryAction);
+	text-align: center;
+	font-size: 11px;
+}
 
 .PreviewLink {
 	position: relative;
 	left: -8px;
 	display: inline-block;
 	width: 100%;
+	min-width: 140px;
 	padding: 6px 8px;
 	margin-left: 4px;
 	border-radius: var(--radius);
@@ -580,14 +588,12 @@ table {
 }
 
 
-.StaticFilesList {
-	a {
-		display: inline-block;
-		padding: 6px 0;
-		margin-left: 4px;
-		border-radius: var(--radius);
-		color: var(--colorAccent);
-	}
+.StaticFileLink {
+	display: inline-block;
+	padding: 6px 0;
+	margin-left: 4px;
+	border-radius: var(--radius);
+	color: var(--colorAccent);
 }
 
 

package/src/Dashboard.js

@@ -15,7 +15,7 @@ const Strings = {
 	empty_response_body: '/* Empty Response Body */',
 	fallback_server: 'Fallback',
 	fallback_server_error: '⛔ Fallback Backend Error',
-	fallback_server_placeholder: 'Type Backend Address',
+	fallback_server_placeholder: 'Type backend address',
 	fetching: 'Fetching…',
 	got: 'Got',
 	group_by_method: 'Group by Method',
@@ -46,6 +46,7 @@ const CSS = {
 	GroupByMethod: null,
 	InternalServerErrorToggler: null,
 	MenuTrigger: null,
+	Method: null,
 	MockList: null,
 	MockSelector: null,
 	NotFoundToggler: null,
@@ -57,7 +58,7 @@ const CSS = {
 	Resizer: null,
 	SaveProxiedCheckbox: null,
 	SettingsMenu: null,
-	StaticFilesList: null,
+	StaticFileLink: null,
 
 	chosen: null,
 	dittoDir: null,
@@ -142,8 +143,9 @@ function App() {
 					style: { width: leftSideWidth + 'px' },
 					className: CSS.leftSide
 				},
-				MockList(),
-				StaticFilesList()),
+				r('table', null,
+					MockList(),
+					StaticFilesList())),
 			r('div', { className: CSS.rightSide },
 				Resizer(),
 				PayloadViewer()))
@@ -363,28 +365,24 @@ function MockList() {
 				Strings.no_mocks_found))
 
 	if (groupByMethod)
-		return (
-			r('div', null,
-				r('table', null, Object.keys(brokersByMethod).map(method =>
-					r('tbody', null,
-						r('tr', null,
-							r('th', { colspan: 2 + Number(canProxy) }),
-							r('th', null, method)),
-						rowsFor(method).map(Row))))))
+		return Object.keys(brokersByMethod).map((method) => Fragment(
+			r('tr', null,
+				r('th', { colspan: 2 + Number(canProxy) }),
+				r('th', null, method)),
+			rowsFor(method).map(Row)))
 
-	return (
-		r('div', null,
-			r('table', null,
-				r('tbody', null, rowsFor('*').map(Row)))))
+	return rowsFor('*').map(Row)
 }
 
+
 function Row({ method, urlMask, urlMaskDittoed, broker }) {
-	const { canProxy } = state
+	const { canProxy, groupByMethod } = state
 	return (
 		r('tr', { 'data-method': method, 'data-urlMask': urlMask },
 			canProxy && r('td', null, ProxyToggler(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, MockSelector(broker))))
 }
@@ -434,8 +432,6 @@ function PreviewLink(method, urlMask, urlMaskDittoed) {
 
 /** @param {ClientMockBroker} broker */
 function MockSelector(broker) {
-	const { groupByMethod } = state
-
 	function onChange() {
 		const { urlMask, method } = parseFilename(this.value)
 		mockaton.select(this.value)
@@ -462,7 +458,6 @@ function MockSelector(broker) {
 		const comments = extractComments(file)
 		const isAutogen500 = comments.includes(AUTOGENERATED_500_COMMENT)
 		return [
-			groupByMethod ? '' : method,
 			isAutogen500 ? '' : status,
 			ext === 'empty' || ext === 'unknown' ? '' : ext,
 			isAutogen500 ? Strings.auto500 : comments.join(' ')
@@ -553,26 +548,29 @@ function ProxyToggler(broker) {
 /** # StaticFilesList */
 
 function StaticFilesList() {
-	const { staticBrokers, canProxy } = state
+	const { staticBrokers, canProxy, groupByMethod } = state
 	if (!Object.keys(staticBrokers).length)
 		return null
 	const dp = dittoSplitPaths(Object.keys(staticBrokers)).map(([ditto, tail]) => ditto
 		? [r('span', className(CSS.dittoDir), ditto), tail]
 		: tail)
 	return (
-		r('table', className(CSS.StaticFilesList),
-			r('thead', null,
+		Fragment(
+			r('tr', null,
+				r('th', { colspan: (2 + Number(!groupByMethod)) + Number(canProxy) }),
+				r('th', null, Strings.static_get)),
+			Object.values(staticBrokers).map((broker, i) =>
 				r('tr', null,
-					r('th', { colspan: 2 + Number(canProxy) }),
-					r('th', null, Strings.static_get))),
-			r('tbody', null,
-				Object.values(staticBrokers).map((broker, i) =>
-					r('tr', null,
-						canProxy && r('td', null, ProxyStaticToggler()),
-						r('td', null, DelayStaticRouteToggler(broker)),
-						r('td', null, NotFoundToggler(broker)),
-						r('td', null, r('a', { href: broker.route, target: '_blank' }, dp[i]))
-					)))))
+					canProxy && r('td', null, ProxyStaticToggler()),
+					r('td', null, DelayStaticRouteToggler(broker)),
+					r('td', null, NotFoundToggler(broker)),
+					!groupByMethod && r('td', className(CSS.Method), 'GET'),
+					r('td', null, r('a', {
+						href: broker.route,
+						target: '_blank',
+						className: CSS.StaticFileLink
+					}, dp[i]))
+				))))
 }
 
 /** @param {ClientStaticBroker} broker */
@@ -934,6 +932,16 @@ function useRef() {
 	return { current: null }
 }
 
+function Fragment(...args) {
+	const frag = new DocumentFragment()
+	for (const arg of args)
+		if (Array.isArray(arg))
+			frag.append(...arg)
+		else
+			frag.appendChild(arg)
+	return frag
+}
+
 
 /**
  * Think of this as a way of printing a directory tree in which
@@ -994,7 +1002,7 @@ function dittoSplitPaths(paths) {
 function syntaxJSON(json) {
 	const MAX_NODES = 50_000
 	let nNodes = 0
-	const frag = document.createDocumentFragment()
+	const frag = new DocumentFragment()
 
 	function span(className, textContent) {
 		nNodes++
@@ -1042,7 +1050,7 @@ syntaxJSON.regex = /("(?:\\u[a-fA-F0-9]{4}|\\[^u]|[^\\"])*")(\s*:)?|([{}\[\],:\s
 function syntaxXML(xml) {
 	const MAX_NODES = 50_000
 	let nNodes = 0
-	const frag = document.createDocumentFragment()
+	const frag = new DocumentFragment()
 
 	function span(className, textContent) {
 		nNodes++