mockaton 8.16.2 → 8.16.4

package/README.md

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

package/package.json

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

package/src/Dashboard.css

@@ -1,7 +1,6 @@
 :root {
-	--boxShadow1: 0 2px 1px -1px rgba(0, 0, 0, 0.15), 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
 	--radius: 4px;
-	--radiusSmall: 4px;
+	--boxShadow1: 0 3px 1px -1px rgba(0, 0, 0, 0.04), 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
 }
 
 @media (prefers-color-scheme: light) {
@@ -12,9 +11,10 @@
 		--colorBackground: #fff;
 		--colorComboBoxHeaderBackground: #fff;
 		--colorComboBoxBackground: #eee;
-		--colorHeaderBackground: #eee;
-		--colorSecondaryButtonBackground: #eee;
-		--colorSecondaryAction: #555;
+		--colorHeaderBackground: #f0f0f0;
+		--colorSecondaryButtonBackground: #fcfcfc;
+		--colorSecondaryActionBorder: #ddd;
+		--colorSecondaryAction: #666;
 		--colorDisabledMockSelector: #444;
 		--colorHover: #dfefff;
 		--colorLabel: #444;
@@ -27,10 +27,11 @@
 	:root {
 		--color4xxBackground: #403630;
 		--colorAccent: #2495ff;
-		--colorBackground: #161616;
+		--colorBackground: #181818;
 		--colorHeaderBackground: #111;
 		--colorComboBoxBackground: #2a2a2a;
 		--colorSecondaryButtonBackground: #2a2a2a;
+		--colorSecondaryActionBorder: #333;
 		--colorSecondaryAction: #999;
 		--colorComboBoxHeaderBackground: #222;
 		--colorDisabledMockSelector: #b9b9b9;
@@ -42,15 +43,22 @@
 	}
 }
 
-html, body {
+html,
+body {
+	overflow: hidden;
+	height: 100%;
+	padding: 0;
 	margin: 0;
+	background: var(--colorHeaderBackground);
 	font-size: 12px;
 }
 body {
-	padding: 16px;
+	display: grid;
+	grid-template-rows: auto 1fr;
 	background: var(--colorBackground);
 	color: var(--colorText);
 }
+
 * {
 	box-sizing: border-box;
 	padding: 0;
@@ -59,6 +67,7 @@ body {
 	font-family: system-ui, sans-serif;
 	font-size: 100%;
 	outline: 0;
+	scrollbar-width: thin;
 }
 
 select, a, input, button, summary {
@@ -79,6 +88,7 @@ input[type=checkbox] ~ svg {
 }
 
 select {
+	border: 1px solid transparent;
 	font-size: 100%;
 	color: var(--colorText);
 	cursor: pointer;
@@ -86,38 +96,41 @@ select {
 	border-radius: var(--radius);
 	appearance: none;
 	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888888'><path d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'/></svg>") no-repeat;
-	background-color: var(--colorComboBoxBackground);
 	background-size: 16px;
 	background-position: 100% center;
 
 	&:enabled {
-		box-shadow: var(--boxShadow1);
-	}
-	&:enabled:hover {
-		cursor: pointer;
-		background-color: var(--colorHover);
+		border-color: var(--colorSecondaryActionBorder);
+		background-color: var(--colorSecondaryButtonBackground);
+		&:hover {
+			border-color: var(--colorHover);
+			cursor: pointer;
+			background-color: var(--colorHover);
+		}
 	}
 	&:disabled {
 		cursor: not-allowed;
 	}
 }
 
-.red {
-	color: var(--colorRed);
-}
-
-.Header {
-	position: fixed;
-	z-index: 100;
-	top: 0;
-	left: 0;
+header {
 	display: flex;
 	width: 100%;
-	align-items: flex-end;
 	padding: 16px;
 	background: var(--colorHeaderBackground);
 	box-shadow: var(--boxShadow1);
-	gap: 10px;
+
+	> div {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: flex-end;
+		gap: 10px;
+
+		@media (max-width: 860px) {
+			max-width: 500px;
+		}
+	}
+
 
 	img {
 		width: 130px;
@@ -151,11 +164,11 @@ select {
 			width: 100%;
 			height: 28px;
 			padding: 4px 8px;
+			border: 0;
 			border-right: 3px solid transparent;
 			margin-top: 4px;
 			color: var(--colorText);
 			font-size: 11px;
-			box-shadow: var(--boxShadow1);
 			background-color: var(--colorComboBoxHeaderBackground);
 			border-radius: var(--radius);
 		}
@@ -215,90 +228,76 @@ select {
 		color: var(--colorRed);
 		border-radius: 50px;
 
-
 		&:hover {
 			background: var(--colorRed);
 			color: white;
-			box-shadow: var(--boxShadow1);
 		}
 	}
 }
 
 
-.Main {
-	display: flex;
+main {
+	display: grid;
+	min-height: 0;
+	grid-template-columns: min(820px) 1fr;
+
+	@media (max-width: 1160px) {
+		grid-template-columns: min(620px) 1fr;
+	}
+
+	@media (max-width: 960px) {
+		grid-template-columns: 100%;
+		grid-template-rows: 1fr 1fr;
+
+		.leftSide {
+			box-shadow: var(--boxShadow1);
+		}
+	}
+
+	.leftSide {
+		padding: 16px;
+		padding-bottom: 0;
+		overflow-y: auto;
+	}
+
+	.rightSide {
+		padding-top: 16px;
+		padding-left: 16px;
+		overflow-y: auto;
+	}
 }
 
 table {
 	border-collapse: collapse;
 
 	th {
-		padding-top: 20px;
 		padding-bottom: 2px;
-		padding-left: 99px;
+		padding-left: 110px;
 		text-align: left;
 	}
 
-	tr {
-		border-top: 2px solid transparent;
+	tbody {
+		border-bottom: 20px solid transparent;
 	}
 }
 
-.MockList {
-	display: flex;
-	align-items: flex-start;
-	margin-top: 64px;
-
-	&.empty {
-		margin-top: 80px;
-	}
+.empty {
+	margin-top: 80px;
 }
 
 
-.PayloadViewer {
-	position: sticky;
-	top: 62px;
-	width: 50%;
-	margin-top: 62px;
-	margin-left: 20px;
-
-	h2 {
-		padding-top: 20px;
-	}
-
-	pre {
-		overflow: auto;
-		max-height: calc(100vh - 72px);
-		padding-top: 12px;
-
-		code {
-			white-space: pre;
-			tab-size: 2;
-			font-family: monospace;
-
-			* {
-				font-family: monospace;
-			}
-		}
-	}
-}
-
 .PreviewLink {
 	position: relative;
-	left: -6px;
+	left: -8px;
 	display: inline-block;
-	width: 272px;
-	padding: 8px 6px;
+	width: 100%;
+	padding: 8px;
+	margin-left: 4px;
 	border-radius: var(--radius);
 	color: var(--colorAccent);
 	text-decoration: none;
 	word-break: break-word;
 
-	span {
-		opacity: 0.6;
-		filter: saturate(0);
-	}
-
 	&:hover {
 		background: var(--colorHover);
 	}
@@ -309,11 +308,10 @@ table {
 }
 
 .MockSelector {
-	width: 260px;
-	height: 30px;
+	width: 100%;
+	height: 26px;
 	padding-right: 5px;
 	padding-left: 16px;
-	border: 0;
 	text-align: right;
 	direction: rtl;
 	text-overflow: ellipsis;
@@ -329,6 +327,7 @@ table {
 	}
 	&:disabled {
 		padding-right: 4px;
+		border-color: transparent;
 		appearance: none;
 		background: transparent;
 		cursor: default;
@@ -363,33 +362,32 @@ table {
 	margin-left: 8px;
 	> input {
 		&:checked ~ svg {
+			border-color: var(--colorAccent);
 			fill: var(--colorAccent);
 			background: var(--colorAccent);
 			stroke: var(--colorBackground);
 		}
 
 		&:enabled:hover:not(:checked) ~ svg {
-			border-color: var(--colorText);
+			border-color: var(--colorHover);
 			background: var(--colorHover);
 			stroke: var(--colorText);
 		}
 	}
 
 	> svg {
-		width: 19px;
-		height: 19px;
+		width: 22px;
+		height: 22px;
+		border: 1px solid var(--colorSecondaryActionBorder);
 		stroke-width: 2.5px;
 		border-radius: 50%;
-		background: var(--colorSecondaryButtonBackground);
-		box-shadow: var(--boxShadow1);
 	}
 }
 
 .ProxyToggler {
 	padding: 1px 3px;
-	background: var(--colorSecondaryButtonBackground);
-	border-radius: var(--radiusSmall);
-	box-shadow: var(--boxShadow1);
+	border: 1px solid var(--colorSecondaryActionBorder);
+	border-radius: var(--radius);
 
 	&:has(input:checked),
 	&:has(input:disabled) {
@@ -414,7 +412,7 @@ table {
 		}
 
 		&:disabled ~ svg {
-			stroke-opacity: 0.5;
+			stroke-opacity: 0.4;
 			cursor: not-allowed;
 			box-shadow: none;
 			fill: transparent;
@@ -430,7 +428,7 @@ table {
 		width: 18px;
 		height: 18px;
 		stroke-width: 2px;
-		border-radius: var(--radiusSmall);
+		border-radius: var(--radius);
 	}
 }
 
@@ -452,6 +450,7 @@ table {
 		}
 
 		&:checked ~ span {
+			border-color: var(--colorRed);
 			color: white;
 			background: var(--colorRed);
 		}
@@ -459,20 +458,52 @@ table {
 
 	> span {
 		padding: 4px;
+		border: 1px solid var(--colorSecondaryActionBorder);
 		font-size: 10px;
 		font-weight: bold;
 		color: var(--colorSecondaryAction);
-		border-radius: var(--radiusSmall);
-		background: var(--colorSecondaryButtonBackground);
-		box-shadow: var(--boxShadow1);
+		border-radius: var(--radius);
 
 		&:hover {
+			border-color: var(--colorLightRed);
 			background: var(--colorLightRed);
 			color: var(--colorRed);
 		}
 	}
 }
 
+
+.StaticFilesList {
+	a {
+		display: inline-block;
+		padding: 6px 0;
+		border-radius: var(--radius);
+		color: var(--colorAccent);
+		text-decoration: none;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+}
+
+
+.PayloadViewer {
+	pre {
+		padding-top: 12px;
+
+		code {
+			white-space: pre;
+			tab-size: 2;
+			font-family: monospace;
+
+			* {
+				font-family: monospace;
+			}
+		}
+	}
+}
+
 .SpinnerClock {
 	display: flex;
 	width: 36px;
@@ -499,26 +530,13 @@ table {
 	}
 }
 
+.red {
+	color: var(--colorRed);
+}
 
-.StaticFilesList {
-	margin-top: 8px;
-
-	a {
-		display: inline-block;
-		padding: 6px 0;
-		border-radius: var(--radius);
-		color: var(--colorAccent);
-		text-decoration: none;
-
-		&:hover {
-			text-decoration: underline;
-		}
-
-		span {
-			opacity: 0.6;
-			filter: saturate(0);
-		}
-	}
+.dittoDir {
+	opacity: 0.9;
+	filter: saturate(0);
 }
 
 
@@ -526,7 +544,6 @@ table {
  * Prism 
  */
 
-
 @media (prefers-color-scheme: dark) {
 	.token.cdata, .token.comment, .token.doctype, .token.prolog {
 		color: #8292a2

package/src/Dashboard.js

@@ -24,15 +24,16 @@ const Strings = {
 	fallback_server_placeholder: 'Type Server Address',
 	got: 'Got',
 	internal_server_error: 'Internal Server Error',
-	mock: 'Mock',
 	no_mocks_found: 'No mocks found',
 	not_found: 'Not Found',
 	pick_comment: 'Pick Comment…',
+	preview: 'Preview',
 	proxied: 'Proxied',
 	proxy_toggler: 'Proxy Toggler',
 	reset: 'Reset',
 	save_proxied: 'Save Mocks',
-	static_get: 'Static GET'
+	static_get: 'Static GET',
+	title: 'Mockaton'
 }
 
 const CSS = {
@@ -41,9 +42,9 @@ const CSS = {
 	FallbackBackend: 'FallbackBackend',
 	Field: 'Field',
 	GlobalDelayField: 'GlobalDelayField',
-	Header: 'Header',
 	InternalServerErrorToggler: 'InternalServerErrorToggler',
-	Main: 'Main',
+	MainLeftSide: 'leftSide',
+	MainRightSide: 'rightSide',
 	MockList: 'MockList',
 	MockSelector: 'MockSelector',
 	NotFoundToggler: 'NotFoundToggler',
@@ -57,11 +58,12 @@ const CSS = {
 	SpinnerClockMinuteHand: 'MinuteHand',
 	StaticFilesList: 'StaticFilesList',
 
-	red: 'red',
-	empty: 'empty',
 	chosen: 'chosen',
-	status4xx: 'status4xx',
-	nonDefault: 'nonDefault'
+	dittoDir: 'dittoDir',
+	empty: 'empty',
+	nonDefault: 'nonDefault',
+	red: 'red',
+	status4xx: 'status4xx'
 }
 
 const r = createElement
@@ -83,20 +85,20 @@ function init() {
 		mockaton.getProxyFallback(),
 		mockaton.listStaticFiles()
 	].map(api => api.then(response => response.ok && response.json())))
-		.then(data => document.body.replaceChildren(App(data)))
+		.then(data => document.body.replaceChildren(...App(data)))
 		.catch(onError)
 }
 
 function App([brokersByMethod, cookies, comments, delay, collectProxied, fallbackAddress, staticBrokers]) {
 	globalDelay = delay
-	return (
-		r('div', null,
-			r(Header, { cookies, comments, delay, fallbackAddress, collectProxied }),
-			r('main', { className: CSS.Main },
-				r('div', null,
-					r(MockList, { brokersByMethod, canProxy: Boolean(fallbackAddress) }),
-					r(StaticFilesList, { brokers: staticBrokers })),
-				r(PayloadViewer))))
+	return [
+		r(Header, { cookies, comments, delay, fallbackAddress, collectProxied }),
+		r('main', null,
+			r('div', { className: CSS.MainLeftSide },
+				r(MockList, { brokersByMethod, canProxy: Boolean(fallbackAddress) }),
+				r(StaticFilesList, { brokers: staticBrokers })),
+			r('div', { className: CSS.MainRightSide },
+				r(PayloadViewer)))]
 }
 
 
@@ -104,13 +106,14 @@ function App([brokersByMethod, cookies, comments, delay, collectProxied, fallbac
 
 function Header({ cookies, comments, delay, fallbackAddress, collectProxied }) {
 	return (
-		r('menu', { className: CSS.Header },
+		r('header', null,
 			r(Logo),
-			r(CookieSelector, { cookies }),
-			r(BulkSelector, { comments }),
-			r(GlobalDelayField, { delay }),
-			r(ProxyFallbackField, { fallbackAddress, collectProxied }),
-			r(ResetButton)))
+			r('div', null,
+				r(CookieSelector, { cookies }),
+				r(BulkSelector, { comments }),
+				r(GlobalDelayField, { delay }),
+				r(ProxyFallbackField, { fallbackAddress, collectProxied }),
+				r(ResetButton))))
 }
 
 function Logo() {
@@ -249,10 +252,10 @@ function MockList({ brokersByMethod, canProxy }) {
 	const hasMocks = Object.keys(brokersByMethod).length
 	if (!hasMocks)
 		return (
-			r('div', { className: cssClass(CSS.MockList, CSS.empty) },
+			r('div', { className: CSS.empty },
 				Strings.no_mocks_found))
 	return (
-		r('div', { className: CSS.MockList },
+		r('div', null,
 			r('table', null, Object.entries(brokersByMethod).map(([method, brokers]) =>
 				r(SectionByMethod, { method, brokers, canProxy })))))
 }
@@ -296,7 +299,7 @@ function PreviewLink({ method, urlMask, urlMaskDittoed }) {
 			href: urlMask,
 			onClick
 		}, ditto
-			? [r('span', null, ditto), tail]
+			? [r('span', { className: CSS.dittoDir }, ditto), tail]
 			: tail))
 }
 
@@ -414,7 +417,7 @@ function StaticFilesList({ brokers }) {
 	if (!Object.keys(brokers).length)
 		return null
 	const dp = dittoSplitPaths(Object.keys(brokers)).map(([ditto, tail]) => ditto
-		? [r('span', null, ditto), tail]
+		? [r('span', { className: CSS.dittoDir }, ditto), tail]
 		: tail)
 	return (
 		r('table', { className: CSS.StaticFilesList },
@@ -493,7 +496,7 @@ const payloadViewerRef = useRef()
 function PayloadViewer() {
 	return (
 		r('div', { className: CSS.PayloadViewer },
-			r('h2', { ref: payloadViewerTitleRef }, Strings.mock),
+			r('h2', { ref: payloadViewerTitleRef }, Strings.preview),
 			r('pre', null,
 				r('code', { ref: payloadViewerRef }, Strings.click_link_to_preview))))
 }