xP/public/xP.css

@@ -53,31 +53,8 @@ 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,7 +199,6 @@ function bufferToggleUnimportant(name) {
 }
 
 function bufferToggleLog() {
-	// TODO: Try to restore the previous scroll offset.
 	if (bufferLog) {
 		setTimeout(() =>
 			document.getElementById('input')?.focus())
@@ -348,7 +347,6 @@ 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) ||
@@ -429,6 +427,21 @@ 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
@@ -465,7 +478,7 @@ let Content = {
 			style.color = palette[fg]
 		if (bg >= 0)
 			style.backgroundColor = palette[bg]
-		for (const _ in style)
+		if (style)
 			return style
 	},
 
@@ -611,11 +624,7 @@ let Buffer = {
 		let dateMark = new Date().toLocaleDateString()
 		if (dateMark !== lastDateMark && lastDateMark !== undefined)
 			lines.push(m('.date', {}, dateMark))
-		return m('.buffer', {onscroll: event => {
+		return m('.buffer', {}, lines)
-			const dom = event.target
-			bufferAutoscroll =
-				dom.scrollTop + dom.clientHeight + 0.5 >= dom.scrollHeight
-		}}, lines)
 	},
 }
 
@@ -669,16 +678,6 @@ 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)
@@ -688,7 +687,7 @@ let Status = {
 		let status = `${bufferCurrent}`
 		if (b.hideUnimportant)
 			status += `<H>`
-		return m('.status', {}, [status, m(Toolbar)])
+		return m('.status', {}, status)
 	},
 }
 
@@ -945,7 +944,7 @@ let Main = {
 
 		return m('.xP', {}, [
 			overlay,
-			m('.title', {}, `xP`),
+			m('.title', {}, [`xP`, m(Toolbar)]),
 			m('.middle', {}, [m(BufferList), m(BufferContainer)]),
 			m(Status),
 			m('.input', {}, [m(Prompt), m(Input)]),