mockaton 10.3.0 → 10.3.2

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.vp781x772.light.gold.png">
-  <source media="(prefers-color-scheme: dark)" srcset="pixaton-tests/macos/pic-for-readme.vp781x772.dark.gold.png">
-  <img alt="Mockaton Dashboard" src="pixaton-tests/macos/pic-for-readme.vp781x772.light.gold.png">
+  <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">
 </picture>
 
 

package/package.json

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

package/src/Dashboard.css

@@ -1,5 +1,5 @@
 :root {
-	--radius: 8px;
+	--radius: 16px;
 	--boxShadow1: rgba(0, 0, 0, 0.18) 0 2px 1px -1px, rgba(0, 0, 0, 0.12) 0 1px 1px 0, rgba(0, 0, 0, 0.1) 0 1px 3px 0px;
 }
 
@@ -16,7 +16,7 @@
 		--colorSecondaryAction: #666;
 		--colorDisabledMockSelector: #444;
 		--colorHover: #dfefff;
-		--colorLabel: #444;
+		--colorLabel: #555;
 		--colorLightRed: #ffe4ee;
 		--colorRed: #da0f00;
 		--colorText: #000;
@@ -111,7 +111,7 @@ a {
 a,
 button,
 input[type=checkbox],
-input[type=checkbox] ~ svg {
+input[type=checkbox] + svg {
 	cursor: pointer;
 
 	&:active {
@@ -128,7 +128,7 @@ select {
 	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-size: 16px;
-	background-position: 100% center;
+	background-position: calc(100% - 3px) center;
 
 	&:enabled {
 		border-color: var(--colorSecondaryActionBorder);
@@ -155,9 +155,9 @@ header {
 		display: flex;
 		flex-wrap: wrap;
 		align-items: flex-end;
-		gap: 16px 10px;
+		gap: 16px 8px;
 
-		@media (max-width: 780px) {
+		@media (max-width: 760px) {
 			max-width: 400px;
 		}
 	}
@@ -175,18 +175,10 @@ header {
 		span {
 			display: flex;
 			align-items: center;
+			margin-left: 8px;
 			color: var(--colorLabel);
 			font-size: 11px;
 			gap: 4px;
-
-			svg {
-				width: 14px;
-				height: 14px;
-				stroke: var(--colorLabel);
-				stroke-width: 1.5px;
-				fill: none;
-				opacity: .7;
-			}
 		}
 
 		input[type=url],
@@ -209,10 +201,10 @@ header {
 		}
 
 		&.GlobalDelayField {
-			width: 84px;
+			width: 76px;
 
 			input[type=number] {
-				padding-right: 4px;
+				padding-right: 6px;
 			}
 
 			svg {
@@ -243,6 +235,9 @@ header {
 				font-size: 11px;
 				gap: 4px;
 
+				input + span {
+					margin: 0;
+				}
 				input:disabled + span {
 					opacity: 0.8;
 				}
@@ -285,13 +280,14 @@ header {
 	}
 }
 
-#Menu {
+.SettingsMenu {
 	position: absolute;
 	top: 62px;
 	right: 10px;
 	left: auto;
 	padding: 20px;
 	border: 1px solid var(--colorSecondaryActionBorder);
+	text-align: left;
 	color: var(--colorText);
 	border-radius: var(--radius);
 	box-shadow: var(--boxShadow1);
@@ -305,7 +301,7 @@ header {
 		display: flex;
 		align-items: center;
 		margin-bottom: 12px;
-		gap: 4px;
+		gap: 6px;
 	}
 }
 
@@ -315,7 +311,7 @@ main {
 	min-width: 0;
 	min-height: 0;
 
-	@media (max-width: 780px) {
+	@media (max-width: 760px) {
 		flex-direction: column;
 
 		.Resizer {
@@ -367,7 +363,7 @@ table {
 	border-collapse: collapse;
 
 	tr {
-		border-top: 2px solid transparent;
+		border-top: 3px solid transparent;
 	}
 
 	th {
@@ -413,7 +409,6 @@ table {
 	padding-left: 8px;
 	text-overflow: ellipsis;
 	font-size: 12px;
-	background-position: calc(100% - 4px) center;
 
 	&.nonDefault {
 		font-weight: bold;
@@ -446,7 +441,7 @@ table {
 
 		&:focus {
 			outline: 0;
-			& ~ svg {
+			& + svg {
 				outline: 2px solid var(--colorAccent)
 			}
 		}
@@ -461,14 +456,14 @@ table {
 
 .DelayToggler {
 	> input {
-		&:checked ~ svg {
+		&:checked + svg {
 			border-color: var(--colorAccent);
 			fill: var(--colorAccent);
 			background: var(--colorAccent);
 			stroke: var(--colorBackground);
 		}
 
-		&:enabled:hover:not(:checked) ~ svg {
+		&:enabled:hover:not(:checked) + svg {
 			border-color: var(--colorHover);
 			background: var(--colorHover);
 			stroke: var(--colorText);
@@ -496,7 +491,7 @@ table {
 	}
 
 	> input {
-		&:checked ~ svg {
+		&:checked + svg {
 			fill: var(--colorAccent);
 			stroke: var(--colorAccent);
 
@@ -506,12 +501,12 @@ table {
 			transform: scale(1.1);
 		}
 
-		&:enabled:hover:not(:checked) ~ svg {
+		&:enabled:hover:not(:checked) + svg {
 			fill: var(--colorHover);
 			stroke: var(--colorText);
 		}
 
-		&:disabled ~ svg {
+		&:disabled + svg {
 			stroke-opacity: 0.4;
 			cursor: not-allowed;
 			box-shadow: none;
@@ -525,9 +520,8 @@ table {
 	}
 
 	> svg {
-		width: 22px;
-		height: 22px;
-		padding: 1px 3px;
+		width: 26px;
+		padding: 1px 4px;
 		stroke-width: 2px;
 		border-radius: var(--radius);
 	}
@@ -545,12 +539,12 @@ table {
 
 		&:focus {
 			outline: 0;
-			& ~ span {
+			& + span {
 				outline: 2px solid var(--colorAccent)
 			}
 		}
 
-		&:checked ~ span {
+		&:checked + span {
 			border-color: var(--colorRed);
 			color: white;
 			background: var(--colorRed);

package/src/Dashboard.js

@@ -1,4 +1,4 @@
-import { AUTOGENERATED_500_COMMENT, HEADER_FOR_502, DEFAULT_MOCK_COMMENT } from './ApiConstants.js'
+import { AUTOGENERATED_500_COMMENT, HEADER_FOR_502 } from './ApiConstants.js'
 import { parseFilename, extractComments } from './Filename.js'
 import { Commander } from './ApiCommander.js'
 
@@ -53,6 +53,7 @@ const CSS = {
 	ResetButton: null,
 	Resizer: null,
 	SaveProxiedCheckbox: null,
+	SettingsMenu: null,
 	StaticFilesList: null,
 
 	chosen: null,
@@ -132,7 +133,6 @@ function App() {
 	const { leftSideWidth } = state
 	return [
 		Header(),
-		Menu(),
 		r('main', null,
 			r('div', {
 					ref: leftSideRef,
@@ -162,36 +162,50 @@ function Header() {
 				BulkSelector(),
 				ProxyFallbackField(),
 				ResetButton()),
-			r('button', {
-				className: CSS.MenuTrigger,
-				popovertarget: 'Menu'
-			}, SettingsIcon())
-		))
+			SettingsMenu()))
 }
 
-function Menu() {
+function SettingsMenu() {
+	const id = '_SettingsMenu_'
+
+	function MenuContent() {
+		return (
+			r('menu', {
+					id,
+					popover: '',
+					className: CSS.SettingsMenu,
+					onToggle(event) {
+						if (event.newState === 'closed')
+							this.parentNode.removeChild(this)
+					}
+				},
+				r('label', className(CSS.GroupByMethod),
+					r('input', {
+						type: 'checkbox',
+						checked: state.groupByMethod,
+						onChange() {
+							state.toggleGroupByMethod()
+							updateState()
+						}
+					}),
+					r('span', null, Strings.group_by_method)),
+
+				r('a', {
+					href: 'https://github.com/ericfortis/mockaton',
+					target: '_blank',
+					rel: 'noopener noreferrer'
+				}, 'Documentation')))
+	}
+
 	return (
-		r('menu', {
-				id: 'Menu',
-				popover: ''
+		r('button', {
+			onClick() {
+				if (!this.querySelector('menu'))
+					this.appendChild(MenuContent())
 			},
-			r('label', className(CSS.GroupByMethod),
-				r('input', {
-					type: 'checkbox',
-					checked: state.groupByMethod,
-					onChange() {
-						state.toggleGroupByMethod()
-						updateState()
-					}
-				}),
-				r('span', null, Strings.group_by_method)),
-
-			r('a', {
-				href: 'https://github.com/ericfortis/mockaton',
-				target: '_blank',
-				rel: 'noopener noreferrer'
-			}, 'Documentation')
-		))
+			className: CSS.MenuTrigger,
+			popovertarget: id
+		}, SettingsIcon()))
 }
 
 function CookieSelector() {
@@ -228,24 +242,24 @@ function BulkSelector() {
 			.catch(onError)
 	}
 	const disabled = !comments.length
-	const list = disabled
-		? []
-		: [firstOption, ...comments].map(c => [
-			c,
-			c === AUTOGENERATED_500_COMMENT ? Strings.auto500 : c
-		])
 	return (
 		r('label', className(CSS.Field),
 			r('span', null, Strings.bulk_select),
 			r('select', {
-				className: CSS.BulkSelector,
-				'data-qaid': 'BulkSelector',
-				autocomplete: 'off',
-				disabled,
-				title: disabled ? Strings.bulk_select_disabled_title : '',
-				onChange
-			}, list.map(([value, name]) =>
-				r('option', { value }, name)))))
+					className: CSS.BulkSelector,
+					'data-qaid': 'BulkSelector',
+					autocomplete: 'off',
+					disabled,
+					title: disabled ? Strings.bulk_select_disabled_title : '',
+					onChange
+				},
+				r('option', { value: firstOption }, firstOption),
+				r('hr'),
+				comments.map(value =>
+					r('option', { value }, value)),
+				r('hr'),
+				r('option', { value: AUTOGENERATED_500_COMMENT }, Strings.auto500)
+			)))
 }
 
 function GlobalDelayField() {
@@ -258,7 +272,7 @@ function GlobalDelayField() {
 	}
 	return (
 		r('label', className(CSS.Field, CSS.GlobalDelayField),
-			r('span', null, TimerIcon(), Strings.delay_ms),
+			r('span', null, Strings.delay_ms),
 			r('input', {
 				type: 'number',
 				min: 0,
@@ -286,7 +300,7 @@ function ProxyFallbackField() {
 	return (
 		r('div', className(CSS.Field, CSS.FallbackBackend),
 			r('label', null,
-				r('span', null, CloudIcon(), Strings.fallback_server),
+				r('span', null, Strings.fallback_server),
 				r('input', {
 					type: 'url',
 					autocomplete: 'none',
@@ -966,7 +980,7 @@ function dittoSplitPaths(paths) {
 
 
 function syntaxJSON(json) {
-	const MAX_NODES = 1000
+	const MAX_NODES = 50_000
 	let nNodes = 0
 	const frag = document.createDocumentFragment()
 
@@ -1014,7 +1028,7 @@ syntaxJSON.regex = /("(?:\\u[a-fA-F0-9]{4}|\\[^u]|[^\\"])*")(\s*:)?|([{}\[\],:\s
 
 
 function syntaxXML(xml) {
-	const MAX_NODES = 1000
+	const MAX_NODES = 50_000
 	let nNodes = 0
 	const frag = document.createDocumentFragment()
 

package/src/mockBrokersCollection.js

@@ -6,6 +6,7 @@ import { MockBroker } from './MockBroker.js'
 import { listFilesRecursively } from './utils/fs.js'
 import { config, isFileAllowed } from './config.js'
 import { parseFilename, validateFilename } from './Filename.js'
+import { AUTOGENERATED_500_COMMENT } from './ApiConstants.js'
 
 
 /**
@@ -116,6 +117,7 @@ export function extractAllComments() {
 			comments.add(c)
 	})
 	return Array.from(comments)
+		.filter(c => c !== AUTOGENERATED_500_COMMENT)
 }
 
 export function setMocksMatchingComment(comment) {