mockaton 9.3.0 → 9.4.1

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "9.3.0",
+	"version": "9.4.1",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",
@@ -28,8 +28,5 @@
 	"devDependencies": {
 		"pixaton": "1.1.3",
 		"puppeteer": "24.19.0"
-	},
-	"optionalDependencies": {
-		"open": "10.2.0"
 	}
 }

package/src/Dashboard.css

@@ -100,6 +100,14 @@ select, a, input, button {
 	}
 }
 
+a {
+	text-decoration: none;
+	
+	&:hover {
+		text-decoration: underline;
+	}
+}
+
 input[type="checkbox"] {
 	&:focus {
 		outline: 0;
@@ -144,7 +152,7 @@ select {
 
 header {
 	display: flex;
-	width: 100%;
+	width: 100vw;
 	padding: 16px;
 	border-bottom: 1px solid var(--colorSecondaryActionBorder);
 	background: var(--colorHeaderBackground);
@@ -193,7 +201,6 @@ header {
 			width: 100%;
 			height: 28px;
 			padding: 4px 8px;
-			border: 0;
 			border: 1px solid var(--colorSecondaryActionBorder);
 			border-right: 3px solid transparent;
 			margin-top: 4px;
@@ -206,7 +213,7 @@ header {
 		select:enabled:hover {
 			background: var(--colorHover);
 		}
-		
+
 		&.GlobalDelayField {
 			width: 84px;
 
@@ -284,9 +291,14 @@ header {
 	left: auto;
 	padding: 20px;
 	border: 1px solid var(--colorSecondaryActionBorder);
+	color: var(--colorText);
 	border-radius: var(--radius);
 	box-shadow: var(--boxShadow1);
 	background: var(--colorHeaderBackground);
+	
+	a {
+		color: var(--colorAccent);
+	}
 
 	.GroupByMethod {
 		display: flex;
@@ -298,25 +310,54 @@ header {
 
 
 main {
-	display: grid;
+	display: flex;
+	min-width: 0;
 	min-height: 0;
-	grid-template-columns: minmax(min-content, max-content) 1fr;
 
 	@media (max-width: 800px) {
-		grid-template-columns: 100%;
-		grid-template-rows: 1fr 1fr;
+		flex-direction: column;
+
+		.Resizer {
+			display: none;
+		}
+
+		.leftSide {
+			min-width: 100%;
+			min-height: 50%;
+			max-height: 50%;
+			border: 0;
+		}
 	}
 
 	.leftSide {
+		width: max-content;
 		padding: 16px;
 		padding-bottom: 0;
+		border-right: 1px solid var(--colorSecondaryActionBorder);
 		overflow-y: auto;
 		box-shadow: var(--boxShadow1);
 	}
 
 	.rightSide {
-		padding: 16px;
-		overflow-y: auto;
+		position: relative;
+		min-width: 100px;
+		min-height: 0;
+		flex: 1;
+
+		.Resizer {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 8px;
+			height: 100%;
+			border-left: 3px solid transparent;
+			cursor: col-resize;
+
+			&:active {
+				border-color: var(--colorSecondaryActionBorder);
+			}
+		}
+
 	}
 }
 
@@ -352,11 +393,11 @@ table {
 	margin-left: 4px;
 	border-radius: var(--radius);
 	color: var(--colorAccent);
-	text-decoration: none;
 	word-break: break-word;
 
 	&:hover {
 		background: var(--colorHover);
+		text-decoration: none;
 	}
 	&.chosen {
 		color: white;
@@ -534,18 +575,24 @@ table {
 		margin-left: 4px;
 		border-radius: var(--radius);
 		color: var(--colorAccent);
-		text-decoration: none;
-
-		&:hover {
-			text-decoration: underline;
-		}
 	}
 }
 
 
 .PayloadViewer {
+	display: flex;
+	height: 100%;
+	flex-direction: column;
+	padding-top: 16px;
+
+	h2 {
+		padding-left: 16px;
+	}
+
 	pre {
-		padding-top: 12px;
+		overflow: auto;
+		height: 100%;
+		padding: 16px;
 		font-family: monospace;
 
 		code {

package/src/Dashboard.js

@@ -49,6 +49,7 @@ const CSS = {
 	ProgressBar: null,
 	ProxyToggler: null,
 	ResetButton: null,
+	Resizer: null,
 	SaveProxiedCheckbox: null,
 	StaticFilesList: null,
 
@@ -87,12 +88,12 @@ const state = {
 	delay: 0,
 	collectProxied: false,
 	proxyFallback: '',
-
-	groupByMethod: true, // TODO read from localstorage
-
 	get canProxy() {
 		return Boolean(this.proxyFallback)
-	}
+	},
+
+	groupByMethod: true, // TODO read from localstorage
+	leftSideWidth: undefined
 }
 
 const mockaton = new Commander(window.location.origin)
@@ -115,15 +116,23 @@ async function updateState() {
 const r = createElement
 const s = createSvgElement
 
+const leftSideRef = useRef()
+
 function App() {
+	const { leftSideWidth } = state
 	return [
 		r(Header),
 		r(Menu),
 		r('main', null,
-			r('div', className(CSS.leftSide),
+			r('div', {
+					ref: leftSideRef,
+					style: { width: leftSideWidth + 'px' },
+					className: CSS.leftSide
+				},
 				r(MockList),
 				r(StaticFilesList)),
-			r('div', className(CSS.rightSide),
+			r('div', { className: CSS.rightSide },
+				r(Resizer),
 				r(PayloadViewer)))
 	]
 }
@@ -146,7 +155,7 @@ function Header() {
 			r('button', {
 				className: CSS.MenuTrigger,
 				popovertarget: 'Menu'
-			}, r(MenuIcon))
+			}, r(SettingsIcon))
 		))
 }
 
@@ -606,6 +615,40 @@ function ProxyStaticToggler({}) { // TODO
 }
 
 
+function Resizer() {
+	return (
+		r('div', {
+			className: CSS.Resizer,
+			onPointerDown: Resizer.onPointerDown
+		}))
+}
+Resizer.raf = 0
+Resizer.initialX = 0
+Resizer.panelWidth = 0
+Resizer.onPointerDown = function (event) {
+	Resizer.initialX = event.clientX
+	Resizer.panelWidth = leftSideRef.current.clientWidth
+	window.addEventListener('pointerup', Resizer.onUp)
+	window.addEventListener('pointermove', Resizer.onMove)
+	document.body.style.userSelect = 'none'
+	document.body.style.cursor = 'col-resize'
+}
+Resizer.onMove = function (event) {
+	const MIN_LEFT_WIDTH = 380
+	Resizer.raf = Resizer.raf || requestAnimationFrame(() => {
+		state.leftSideWidth = Math.max(Resizer.panelWidth - (Resizer.initialX - event.clientX), MIN_LEFT_WIDTH)
+		leftSideRef.current.style.width = state.leftSideWidth + 'px'
+		Resizer.raf = 0
+	})
+}
+Resizer.onUp = function () {
+	window.removeEventListener('pointermove', Resizer.onMove)
+	window.removeEventListener('pointerup', Resizer.onUp)
+	cancelAnimationFrame(Resizer.raf)
+	document.body.style.userSelect = 'auto'
+	document.body.style.cursor = 'auto'
+}
+
 
 /** # Payload Preview */
 
@@ -761,10 +804,10 @@ function CloudIcon() {
 			s('path', { d: 'm6.1 9.1c2.8 0 5 2.3 5 5' })))
 }
 
-function MenuIcon() {
+function SettingsIcon() {
 	return (
 		s('svg', { viewBox: '0 0 24 24' },
-			s('path', { d: 'M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z' })))
+			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' })))
 }
 
 /**