mockaton 12.0.1 → 12.1.1

package/README.md

@@ -27,9 +27,9 @@ For example, for [/api/company/123](#), the filename could be:
 ## Dashboard
 
 <picture>
-  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp832x740.light.gold.png">
-  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp832x740.dark.gold.png">
-  <img alt="Mockaton Dashboard" src="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp832x740.dark.gold.png">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp762x762.light.gold.png">
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp762x762.dark.gold.png">
+  <img alt="Mockaton Dashboard" src="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp762x762.dark.gold.png">
 </picture>
 
 On the dashboard you can:

package/package.json

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

package/src/client/app.js

@@ -1,8 +1,4 @@
-import {
-	createElement as r,
-	createSvgElement as s,
-	className, restoreFocus, Defer, Fragment, adoptCSS
-} from './dom-utils.js'
+import { createElement as r, createSvgElement as s, className, restoreFocus, Defer, Fragment, adoptCSS } from './dom-utils.js'
 
 import { store } from './app-store.js'
 import { parseFilename } from './Filename.js'
@@ -47,6 +43,9 @@ function App() {
 					style: { width: leftSideRef.width },
 					className: CSS.leftSide
 				},
+				r('div', className(CSS.SubToolbar),
+					GroupByMethod(),
+					BulkSelector()),
 				r('div', className(CSS.Table),
 					MockList(),
 					StaticFilesList())),
@@ -68,7 +67,6 @@ function Header() {
 				r('div', className(CSS.GlobalDelayWrap),
 					GlobalDelayField(),
 					GlobalDelayJitterField()),
-				BulkSelector(),
 				CookieSelector(),
 				ProxyFallbackField(),
 				ResetButton(),
@@ -136,30 +134,6 @@ function GlobalDelayJitterField() {
 }
 
 
-function BulkSelector() {
-	const { comments } = store
-	const firstOption = t`Pick Comment…`
-	function onChange() {
-		const value = this.value
-		this.value = firstOption // hack so it’s always selected
-		store.bulkSelectByComment(value)
-	}
-	const disabled = !comments.length
-	return (
-		r('label', className(CSS.Field),
-			r('span', null, t`Bulk Select`),
-			r('select', {
-					className: CSS.BulkSelector,
-					autocomplete: 'off',
-					disabled,
-					title: disabled ? t`No mock files have comments which are anything within parentheses on the filename.` : '',
-					onChange
-				},
-				r('option', { value: firstOption }, firstOption),
-				r('hr'),
-				comments.map(value => r('option', { value }, value)))))
-	// TODO For a11y, use `menu` instead of `select`
-}
 
 function CookieSelector() {
 	const { cookies } = store
@@ -234,39 +208,24 @@ function SettingsMenuTrigger() {
 				popovertarget: id,
 				className: CSS.MenuTrigger
 			},
-			SettingsIcon(),
+			InfoIcon(),
 			Defer(() => SettingsMenu(id))))
 }
 
 function SettingsMenu(id) {
-	const firstInputRef = {}
 	return (
 		r('menu', {
 				id,
 				popover: '',
-				className: CSS.SettingsMenu,
-				onToggle(event) {
-					if (event.newState === 'open')
-						firstInputRef.elem.focus()
-				}
+				className: CSS.SettingsMenu
 			},
 
 			r('div', null,
-				r('label', className(CSS.GroupByMethod),
-					r('input', {
-						name: 'group-by-method',
-						ref: firstInputRef,
-						type: 'checkbox',
-						checked: store.groupByMethod,
-						onChange: store.toggleGroupByMethod
-					}),
-					r('span', className(CSS.checkboxBody), t`Group by Method`)),
-
 				r('a', {
 					href: 'https://mockaton.com',
 					target: '_blank',
 					rel: 'noopener noreferrer'
-				}, t`Website`),
+				}, t`Documentation`),
 
 				r('a', {
 					href: 'https://github.com/ericfortis/mockaton',
@@ -280,6 +239,47 @@ function SettingsMenu(id) {
 
 
 
+/** # Left Side */
+
+
+function BulkSelector() {
+	const { comments } = store
+	const firstOption = t`Pick Comment…`
+	function onChange() {
+		const value = this.value
+		this.value = firstOption // hack so it’s always selected
+		store.bulkSelectByComment(value)
+	}
+	const disabled = !comments.length
+	return (
+		r('label', className(CSS.BulkSelector),
+			r('span', null, t`Bulk Select`),
+			r('select', {
+					autocomplete: 'off',
+					disabled,
+					title: disabled ? t`No mock files have comments which are anything within parentheses on the filename.` : '',
+					onChange
+				},
+				r('option', { value: firstOption }, firstOption),
+				r('hr'),
+				comments.map(value => r('option', { value }, value)))))
+	// TODO For a11y, use `menu` instead of `select`
+}
+
+
+function GroupByMethod() {
+	return (
+		r('label', className(CSS.GroupByMethod),
+			r('input', {
+				name: 'group-by-method',
+				type: 'checkbox',
+				checked: store.groupByMethod,
+				onChange: store.toggleGroupByMethod
+			}),
+			r('span', className(CSS.checkboxBody), t`Group by Method`)))
+}
+
+
 /** # MockList */
 
 function MockList() {
@@ -540,7 +540,7 @@ function Resizer(ref) {
 	}
 
 	function onMove(event) {
-		const MIN_LEFT_WIDTH = 340
+		const MIN_LEFT_WIDTH = 350
 		raf = raf || requestAnimationFrame(() => {
 			ref.width = Math.max(initialWidth - (initialX - event.clientX), MIN_LEFT_WIDTH) + 'px'
 			ref.elem.style.width = ref.width
@@ -575,13 +575,19 @@ const payloadViewerCodeRef = {}
 function PayloadViewer() {
 	return (
 		r('div', className(CSS.PayloadViewer),
-			r('h2', { ref: payloadViewerTitleRef },
-				!store.hasChosenLink && t`Preview`),
+			RightToolbar(),
 			r('pre', null,
 				r('code', { ref: payloadViewerCodeRef },
 					!store.hasChosenLink && t`Click a link to preview it`))))
 }
 
+function RightToolbar() {
+	return r('div', className(CSS.SubToolbar),
+		r('h2', { ref: payloadViewerTitleRef },
+			!store.hasChosenLink && t`Preview`))
+}
+
+
 function PayloadViewerTitle(file, statusText) {
 	const { method, status, ext } = parseFilename(file)
 	const fileNameWithComments = file.split('.').slice(0, -3).join('.')
@@ -731,10 +737,10 @@ function CloudIcon() {
 			s('path', { d: 'm6.1 9.1c2.8 0 5 2.3 5 5' })))
 }
 
-function SettingsIcon() {
+function InfoIcon() {
 	return (
 		s('svg', { viewBox: '0 0 24 24' },
-			s('path', { d: 'M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6' })))
+			s('path', { d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z' })))
 }
 
 

package/src/client/styles.css

@@ -11,9 +11,9 @@
 		--colorBackground: #fff;
 		--colorComboBoxHeaderBackground: #fff;
 		--colorComboBoxBackground: #eee;
-		--colorHeaderBackground: #efefef;
+		--colorHeaderBackground: #f5f5f5;
 		--colorSecondaryButtonBackground: #fcfcfc;
-		--colorSecondaryActionBorder: #ddd;
+		--colorSecondaryActionBorder: #e0e0e0;
 		--colorSecondaryAction: #666;
 		--colorDisabledMockSelector: #444;
 		--colorHover: rgba(119, 193, 255, 0.5);
@@ -102,10 +102,6 @@ a {
 	color: var(--colorAccent);
 }
 
-input[type="number"]:not(:focus) {
-	-moz-appearance: textfield;
-}
-
 select {
 	border: 1px solid transparent;
 	font-size: 100%;
@@ -126,7 +122,7 @@ select {
 	}
 	&:disabled {
 		cursor: not-allowed;
-		opacity: 0.5;
+		opacity: 50%;
 	}
 }
 
@@ -141,16 +137,22 @@ header {
 		align-self: end;
 		margin-right: 22px;
 		margin-bottom: 3px;
+		opacity: 85%;
+		transition: opacity 240ms ease-in-out;
+
+		&:hover {
+			opacity: 1;
+		}
+
+		@media (max-width: 730px) {
+			display: none;
+		}
 
 		svg {
 			width: 120px;
 			pointer-events: none;
 			fill: var(--colorText);
 		}
-
-		@media (max-width: 830px) {
-			display: none;
-		}
 	}
 
 	> div {
@@ -158,9 +160,9 @@ header {
 		width: 100%;
 		flex-wrap: wrap;
 		align-items: flex-end;
-		gap: 16px 8px;
+		gap: 16px 12px;
 
-		@media (max-width: 690px) {
+		@media (max-width: 590px) {
 			.MenuTrigger {
 				margin-left: unset;
 			}
@@ -171,111 +173,6 @@ header {
 		display: flex;
 	}
 
-	.Field {
-		width: 116px;
-
-		span {
-			display: flex;
-			align-items: center;
-			margin-left: 8px;
-			color: var(--colorLabel);
-			font-size: 11px;
-			gap: 4px;
-		}
-
-		input[type=url],
-		input[type=number],
-		select {
-			width: 100%;
-			height: 28px;
-			padding: 4px 8px;
-			border: 1px solid var(--colorSecondaryActionBorder);
-			margin-top: 2px;
-			color: var(--colorText);
-			font-size: 11px;
-			background-color: var(--colorComboBoxHeaderBackground);
-			border-radius: var(--radius);
-		}
-
-		&.GlobalDelayField {
-			position: relative;
-			width: 76px;
-
-			input {
-				padding-right: 6px;
-				border-bottom-right-radius: 0;
-				border-top-right-radius: 0;
-			}
-
-			svg {
-				width: 12px;
-				height: 12px;
-				border: 1px solid var(--colorLabel);
-				stroke-width: 3px;
-				border-radius: 50%;
-			}
-
-			&:focus-within {
-				z-index: 100;
-			}
-		}
-
-		&.GlobalDelayJitterField {
-			width: 80px;
-			span {
-				margin-left: 4px;
-			}
-			input {
-				border-left: 2px solid transparent;
-				border-bottom-left-radius: 0;
-				border-top-left-radius: 0;
-			}
-			&:focus-within {
-				z-index: 100;
-			}
-		}
-
-		&.CookieSelector {
-			width: 100px;
-		}
-
-		&.FallbackBackend {
-			position: relative;
-			width: 150px;
-
-			.SaveProxiedCheckbox {
-				position: absolute;
-				top: 0;
-				right: 0;
-				display: flex;
-				width: auto;
-				min-width: unset;
-				align-items: center;
-				font-size: 11px;
-				gap: 4px;
-
-				input + .checkboxBody {
-					margin: 0;
-					margin-right: 4px;
-				}
-				input:enabled + .checkboxBody {
-					cursor: pointer;
-				}
-				input:disabled {
-					cursor: not-allowed;
-				}
-				input:disabled + .checkboxBody {
-					opacity: 0.8;
-					cursor: not-allowed;
-				}
-			}
-		}
-	}
-
-	.BulkSelector {
-		background-image: none;
-		text-align-last: center;
-	}
 
 	.ResetButton {
 		padding: 6px 12px;
@@ -312,6 +209,107 @@ header {
 	}
 }
 
+.Field {
+	width: 116px;
+
+	span {
+		display: flex;
+		align-items: center;
+		margin-left: 8px;
+		color: var(--colorLabel);
+		font-size: 11px;
+		gap: 4px;
+	}
+
+	input[type=url],
+	input[type=number],
+	select {
+		width: 100%;
+		height: 28px;
+		padding: 4px 8px;
+		border: 1px solid var(--colorSecondaryActionBorder);
+		margin-top: 2px;
+		color: var(--colorText);
+		font-size: 11px;
+		background-color: var(--colorComboBoxHeaderBackground);
+		border-radius: var(--radius);
+	}
+
+	&.GlobalDelayField {
+		position: relative;
+		width: 76px;
+
+		input {
+			padding-right: 6px;
+			border-bottom-right-radius: 0;
+			border-top-right-radius: 0;
+		}
+
+		svg {
+			width: 12px;
+			height: 12px;
+			border: 1px solid var(--colorLabel);
+			stroke-width: 3px;
+			border-radius: 50%;
+		}
+
+		&:focus-within {
+			z-index: 100;
+		}
+	}
+
+	&.GlobalDelayJitterField {
+		width: 80px;
+		span {
+			margin-left: 4px;
+		}
+		input {
+			border-left: 2px solid transparent;
+			border-bottom-left-radius: 0;
+			border-top-left-radius: 0;
+		}
+		&:focus-within {
+			z-index: 100;
+		}
+	}
+
+	&.CookieSelector {
+		width: 100px;
+	}
+
+	&.FallbackBackend {
+		position: relative;
+		width: 150px;
+
+		.SaveProxiedCheckbox {
+			position: absolute;
+			top: 0;
+			right: 0;
+			display: flex;
+			width: auto;
+			min-width: unset;
+			align-items: center;
+			font-size: 11px;
+			gap: 4px;
+
+			input + .checkboxBody {
+				margin: 0;
+				margin-right: 4px;
+			}
+			input:enabled + .checkboxBody {
+				cursor: pointer;
+			}
+			input:disabled {
+				cursor: not-allowed;
+			}
+			input:disabled + .checkboxBody {
+				opacity: 0.8;
+				cursor: not-allowed;
+			}
+		}
+	}
+}
+
 .SettingsMenu {
 	position: absolute;
 	top: 62px;
@@ -331,16 +329,9 @@ header {
 		gap: 12px;
 		text-align: left;
 
-		.GroupByMethod {
-			display: flex;
-			align-items: center;
-			gap: 6px;
-			cursor: pointer;
-		}
 	}
 }
 
-
 main {
 	display: flex;
 	min-width: 0;
@@ -362,10 +353,7 @@ main {
 
 	.leftSide {
 		width: 50%; /* resizable in js */
-		padding: 16px;
 		border-right: 1px solid var(--colorSecondaryActionBorder);
-		user-select: none;
-		overflow-y: auto;
 		box-shadow: var(--boxShadow1);
 	}
 
@@ -391,10 +379,49 @@ main {
 	}
 }
 
+.SubToolbar {
+	display: flex;
+	height: 42px;
+	align-items: center;
+	justify-content: space-between;
+	padding-right: 14px;
+	padding-left: 16px;
+	border-bottom: 1px solid var(--colorSecondaryActionBorder);
+	background: var(--colorHeaderBackground);
+}
+
+.GroupByMethod {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	cursor: pointer;
+}
+
+.BulkSelector {
+	select {
+		width: 110px;
+		padding: 6px 8px;
+		border: 1px solid var(--colorSecondaryActionBorder);
+		margin-left: 4px;
+		background-image: none;
+		text-align-last: center;
+		color: var(--colorText);
+		font-size: 11px;
+		background-color: var(--colorComboBoxHeaderBackground);
+		border-radius: var(--radius);
+	}
+}
+
 .Table {
+	height: 100%;
+	padding: 16px;
+	padding-left: 12px;
+	user-select: none;
+	overflow-y: auto;
+
 	.TableHeading {
 		padding-bottom: 4px;
-		padding-left: 4px;
+		padding-left: 1px;
 		border-top: 24px solid transparent;
 		margin-left: 74px;
 		font-weight: bold;
@@ -647,12 +674,6 @@ main {
 
 .PayloadViewer {
 	height: 100%;
-	padding-top: 16px;
-
-	> h2 {
-		padding-bottom: 4px;
-		padding-left: 16px;
-	}
 
 	> pre {
 		overflow: auto;
@@ -688,8 +709,9 @@ main {
 
 .ProgressBar {
 	position: relative;
-	top: -4px;
-	width: 100%;
+	top: -12px;
+	left: -16px;
+	width: calc(100% + 32px);
 	height: 2px;
 	background: var(--colorComboBoxHeaderBackground);