mockaton 10.3.6 → 10.4.0

package/package.json

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

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 {
@@ -347,7 +347,6 @@ main {
 	.leftSide {
 		width: 50%;
 		padding: 16px;
-		padding-bottom: 0;
 		border-right: 1px solid var(--colorSecondaryActionBorder);
 		user-select: none;
 		overflow-y: auto;
@@ -383,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;
 	}
 }
 
@@ -395,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);
@@ -581,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

@@ -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()))
@@ -275,6 +277,12 @@ function GlobalDelayField() {
 			.then(parseError)
 			.catch(onError)
 	}
+	function onWheel(event) {
+		const val = this.valueAsNumber - event.deltaY * 10
+		this.valueAsNumber = Math.max(val, 0)
+		clearTimeout(onWheel.timer)
+		onWheel.timer = setTimeout(onChange.bind(this), 300)
+	}
 	return (
 		r('label', className(CSS.Field, CSS.GlobalDelayField),
 			r('span', null, Strings.delay_ms),
@@ -284,7 +292,8 @@ function GlobalDelayField() {
 				step: 100,
 				autocomplete: 'none',
 				value: delay,
-				onChange
+				onChange,
+				onWheel
 			})))
 }
 
@@ -363,28 +372,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 +439,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 +465,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 +555,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 +939,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 +1009,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 +1057,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++