mockaton 13.9.8 → 13.9.10

package/package.json

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

package/src/client/app.css

@@ -2,9 +2,10 @@
 	color-scheme: light dark;
 	--colorBg: light-dark(#fff, #181818);
 	--colorBgField: light-dark(#fcfcfc, #2c2c2c);
+	--colorBgFieldHover: light-dark(#fff, #171717);
 
-	--colorBgHeader: light-dark(#f2f2f3, #141414);
-	--colorBgHeaderField: light-dark(#fff, #222);
+	--colorBgHeader: light-dark(#ededef, #141414);
+	--colorBgHeaderField: light-dark(#fbfbfb, #222);
 
 	--colorBorder: light-dark(#e0e0e0, #2c2c2c);
 	--colorBorderActive: light-dark(#c8c8c8, #3c3c3c);
@@ -24,6 +25,10 @@
 	accent-color: var(--colorAccent);
 	--radius: 16px;
 	--subtoolbarHeight: 42px;
+
+	--shadowRim: light-dark(#fff, #333);
+	--shadowDrop: light-dark(rgba(0, 0, 0, 0.2), #000);
+	--boxShadowRimDrop: inset 0 0 1px 0.5px var(--shadowRim), 0 1px 2px var(--shadowDrop);
 }
 
 html,
@@ -45,7 +50,7 @@ body {
 	padding: 0;
 	border: 0;
 	margin: 0;
-	letter-spacing: -0.374px;
+	letter-spacing: -0.2px;
 	line-height: 14px;
 	font-family: inherit;
 	font-size: 100%;
@@ -86,7 +91,6 @@ a {
 }
 
 select {
-	border: 1px solid transparent;
 	color: var(--colorText);
 	border-radius: var(--radius);
 	appearance: none;
@@ -101,7 +105,7 @@ select {
 
 		&:hover {
 			border-color: var(--colorHover);
-			background-color: var(--colorHover);
+			background-color: var(--colorBgFieldHover);
 		}
 	}
 
@@ -174,6 +178,7 @@ header {
 		background: transparent;
 		border-radius: 50px;
 		color: var(--colorRed);
+		box-shadow: var(--boxShadowRimDrop);
 
 		@media (prefers-color-scheme: dark) {
 			color: var(--colorText);
@@ -186,12 +191,13 @@ header {
 	}
 
 	.HelpLink {
-		width: 22px;
-		height: 22px;
+		width: 24px;
+		height: 24px;
 		flex-shrink: 0;
 		align-self: end;
 		margin-bottom: 3px;
 		margin-left: auto;
+		box-shadow: var(--boxShadowRimDrop);
 		opacity: 0.8;
 		border-radius: 50%;
 		fill: var(--colorBgHeader);
@@ -237,12 +243,17 @@ header {
 		width: 100%;
 		height: 28px;
 		padding: 4px 8px;
-		border: 1px solid var(--colorBorder);
 		margin-top: 2px;
 		color: var(--colorText);
 		font-size: 11px;
 		background-color: var(--colorBgHeaderField);
 		border-radius: var(--radius);
+		box-shadow: var(--boxShadowRimDrop);
+		transition: background-color ease-in-out 120ms;
+
+		&:hover {
+			background-color: var(--colorBgFieldHover);
+		}
 	}
 
 	&.GlobalDelay {
@@ -276,10 +287,9 @@ header {
 		}
 
 		span {
-			margin-left: 4px;
+			margin-left: 8px;
 		}
 		input {
-			border-left: 2px solid transparent;
 			border-bottom-left-radius: 0;
 			border-top-left-radius: 0;
 		}
@@ -412,7 +422,6 @@ main {
 	select {
 		width: 110px;
 		padding: 6px 8px;
-		border: 1px solid var(--colorBorder);
 		margin-left: 4px;
 		background-image: none;
 		text-align-last: center;
@@ -420,6 +429,12 @@ main {
 		font-size: 11px;
 		background-color: var(--colorBgHeaderField);
 		border-radius: var(--radius);
+		box-shadow: var(--boxShadowRimDrop);
+		transition: background-color ease-in-out 120ms;
+
+		&:hover {
+			background-color: var(--colorBgFieldHover);
+		}
 	}
 }
 
@@ -602,6 +617,13 @@ main {
 	text-overflow: ellipsis;
 	text-align: right;
 
+	&:enabled {
+		box-shadow: var(--boxShadowRimDrop);
+		&:hover {
+			background-color: var(--colorBgFieldHover);
+		}
+	}
+
 	&.nonDefault {
 		font-weight: bold;
 		font-size: 11px;
@@ -665,11 +687,12 @@ main {
 		height: 22px;
 		align-items: center;
 		justify-content: center;
-		border: 1px solid var(--colorBorder);
 		fill: none;
 		stroke: var(--colorLabel);
 		stroke-width: 2.5px;
 		border-radius: 50%;
+		box-shadow: var(--boxShadowRimDrop);
+		background-color: var(--colorBgHeaderField);
 	}
 
 	&.canProxy {
@@ -685,7 +708,7 @@ main {
 
 	.checkboxBody {
 		svg {
-			width: 16px;
+			width: 15px;
 		}
 	}
 }
@@ -736,6 +759,7 @@ main {
 		}
 
 		> code {
+			line-height: 1.3;
 			white-space: pre;
 			tab-size: 2;
 			color: var(--colorLabel);

package/src/client/dir/dittoSplitPaths.js

@@ -19,7 +19,7 @@ export function dittoSplitPaths(paths) {
 		if (!j) // no common dirs
 			return ['', p]
 
-		const ditto = '/' + curr.slice(0, j).join('/') + '/'
+		const ditto = '/' + curr.slice(0, j).join('/') 
 		return [ditto, p.slice(ditto.length)]
 	})
 }

package/src/client/dir/dittoSplitPaths.test.js

@@ -12,17 +12,19 @@ test('dittoSplitPaths', () => {
 		'/api/video/id',
 		'/api/video/stats',
 		'/v2/foo',
-		'/v2/foo/bar'
+		'/v2/foo/bar',
+		'/v2/foo/bar' // paths can be repeated
 	]
 	deepEqual(dittoSplitPaths(input), [
 		['', '/api/user'],
-		['/api/user/', 'avatar'],
-		['/api/user/', 'friends'],
-		['/api/', 'vid'],
-		['/api/', 'video/id'],
-		['/api/video/', 'stats'],
+		['/api/user', '/avatar'],
+		['/api/user', '/friends'],
+		['/api', '/vid'],
+		['/api', '/video/id'],
+		['/api/video', '/stats'],
 		['', '/v2/foo'],
-		['/v2/foo/', 'bar']
+		['/v2/foo', '/bar'],
+		['/v2/foo/bar', ''],
 	])
 })
 

package/src/server/MockBroker.js

@@ -10,7 +10,7 @@ import { removeQueryStringAndFragment } from './utils/HttpIncomingMessage.js'
 export class MockBroker {
 	file = '' // selected mock filename
 	mocks = [] // filenames
-	isStatic = false // doesn’t follow filename convention
+	isStatic = false // static means it doesn’t follow filename convention
 	delayed = false
 	proxied = false
 	status = -1

package/src/server/cli.test.js

@@ -42,6 +42,6 @@ describe('CLI', () => {
 		equal(status, 0)
 	})
 
-	// Mockaton.test.js tests the remaining cli branch
+	// Mockaton.test.js tests the remaining cli branches
 })
 

package/src/server/mockBrokersCollection.js

@@ -72,7 +72,7 @@ export function unregisterMock(file) {
 function filesInDir(dir) {
 	const files = []
 	forEachBroker(b => {
-		files.push(...(b.mocks.filter(m => m.startsWith(dir + '/'))))
+		files.push(...b.mocks.filter(m => m.startsWith(dir + '/')))
 	})
 	return files
 }
@@ -98,7 +98,9 @@ export function brokerByRoute(method, url) {
 
 	// TODO Verify
 	if (method === 'GET') {
-		const indexUrl = url.endsWith('/') ? url + 'index.html' : url + '/index.html'
+		const indexUrl = url.endsWith('/') 
+			? url + 'index.html' 
+			: url + '/index.html'
 		for (let i = brokers.length - 1; i >= 0; i--)
 			if (brokers[i].urlMaskMatches(indexUrl))
 				return brokers[i]