xP: improve paging

xP/public/xP.css

@@ -53,8 +53,31 @@ body {
 	bottom: -1px;
 	background: #ccc;
 }
+
+.toolbar {
+	display: flex;
+	align-items: baseline;
+	gap: .3em;
+}
 button {
 	font: inherit;
+	background: transparent;
+	border: 1px solid transparent;
+}
+button:focus {
+	border: 1px dashed #000;
+}
+button:hover {
+	border-left: 1px solid #fff;
+	border-top: 1px solid #fff;
+	border-right: 1px solid #888;
+	border-bottom: 1px solid #888;
+}
+button:hover:active {
+	border-left: 1px solid #888;
+	border-top: 1px solid #888;
+	border-right: 1px solid #fff;
+	border-bottom: 1px solid #fff;
 }
 
 .middle {

xP/public/xP.js

@@ -199,6 +199,7 @@ function bufferToggleUnimportant(name) {
 }
 
 function bufferToggleLog() {
+	// TODO: Try to restore the previous scroll offset.
 	if (bufferLog) {
 		setTimeout(() =>
 			document.getElementById('input')?.focus())
@@ -347,6 +348,7 @@ rpcEventHandlers.set(Relay.Event.BufferLine, e => {
 
 	let visible = document.visibilityState !== 'hidden' &&
 		bufferLog === undefined &&
+		bufferAutoscroll &&
 		(e.bufferName == bufferCurrent || e.leakToActive)
 	b.lines.push({...line})
 	if (!(visible || e.leakToActive) ||
@@ -427,21 +429,6 @@ let linkRE = [
 	/[^\[\](){}<>"'\s,.:]/,
 ].map(r => r.source).join('')
 
-let Toolbar = {
-	toggleAutoscroll: () => {
-		bufferAutoscroll = !bufferAutoscroll
-	},
-
-	view: vnode => {
-		return m('.toolbar', {}, [
-			m('button', {onclick: Toolbar.toggleAutoscroll},
-				bufferAutoscroll ? 'Scroll lock' : 'Scroll unlock'),
-			m('button', {onclick: event => bufferToggleLog()},
-				bufferLog === undefined ? 'Show log' : 'Hide log'),
-		])
-	},
-}
-
 let BufferList = {
 	view: vnode => {
 		let highlighted = false
@@ -478,7 +465,7 @@ let Content = {
 			style.color = palette[fg]
 		if (bg >= 0)
 			style.backgroundColor = palette[bg]
-		if (style)
+		for (const _ in style)
 			return style
 	},
 
@@ -624,7 +611,11 @@ let Buffer = {
 		let dateMark = new Date().toLocaleDateString()
 		if (dateMark !== lastDateMark && lastDateMark !== undefined)
 			lines.push(m('.date', {}, dateMark))
-		return m('.buffer', {}, lines)
+		return m('.buffer', {onscroll: event => {
+			const dom = event.target
+			bufferAutoscroll =
+				dom.scrollTop + dom.clientHeight + 0.5 >= dom.scrollHeight
+		}}, lines)
 	},
 }
 
@@ -678,6 +669,16 @@ let BufferContainer = {
 	},
 }
 
+let Toolbar = {
+	view: vnode => {
+		return m('.toolbar', {}, [
+			bufferLog === undefined && !bufferAutoscroll ? '⇩' : undefined,
+			m('button', {onclick: event => bufferToggleLog()},
+				bufferLog === undefined ? 'Log' : 'Hide log'),
+		])
+	},
+}
+
 let Status = {
 	view: vnode => {
 		let b = buffers.get(bufferCurrent)
@@ -687,7 +688,7 @@ let Status = {
 		let status = `${bufferCurrent}`
 		if (b.hideUnimportant)
 			status += `<H>`
-		return m('.status', {}, status)
+		return m('.status', {}, [status, m(Toolbar)])
 	},
 }
 
@@ -944,7 +945,7 @@ let Main = {
 
 		return m('.xP', {}, [
 			overlay,
-			m('.title', {}, [`xP`, m(Toolbar)]),
+			m('.title', {}, `xP`),
 			m('.middle', {}, [m(BufferList), m(BufferContainer)]),
 			m(Status),
 			m('.input', {}, [m(Prompt), m(Input)]),