xP: deal with macOS/Blink for good

Make it black when disconnected, and orange when the document
is hidden but the current tab is highlighted.

xP/public/xP.js

@@ -132,13 +132,9 @@ class RelayRpc extends EventTarget {
 function utf8Encode(s) { return new TextEncoder().encode(s) }
 function utf8Decode(s) { return new TextDecoder().decode(s) }
 
-// On macOS, the Alt/Option key transforms characters, which basically breaks
-// all event.altKey shortcuts, so require combining them with Control as well
-// on that system.
 function hasShortcutModifiers(event) {
-	// This method of detection only works with Blink browsers, as of writing.
+	return (event.altKey || event.escapePrefix) &&
-	return event.altKey && !event.metaKey &&
+		!event.metaKey && !event.ctrlKey
-		(navigator.userAgentData?.platform === 'macOS') === event.ctrlKey
 }
 
 const audioContext = new AudioContext()
@@ -170,7 +166,11 @@ function updateIcon(highlighted) {
 
 	let ctx = canvas.getContext('2d')
 	ctx.arc(16, 16, 12, 0, 2 * Math.PI)
-	ctx.fillStyle = highlighted ? '#ff5f00' : '#ccc'
+	ctx.fillStyle = '#000'
+	if (highlighted === true)
+		ctx.fillStyle = '#ff5f00'
+	if (highlighted === false)
+		ctx.fillStyle = '#ccc'
 	ctx.fill()
 
 	if (iconLink === undefined) {
@@ -305,6 +305,8 @@ rpc.addEventListener('BufferActivate', event => {
 	bufferCurrent = e.bufferName
 	bufferLog = undefined
 	bufferAutoscroll = true
+	if (b !== undefined && document.visibilityState !== 'hidden')
+		b.highlighted = false
 
 	let textarea = document.getElementById('input')
 	if (textarea === null)
@@ -341,7 +343,8 @@ rpc.addEventListener('BufferLine', event => {
 		return
 	}
 
-	let visible = !document.hidden && bufferLog === undefined &&
+	let visible = document.visibilityState !== 'hidden' &&
+		bufferLog === undefined &&
 		(e.bufferName == bufferCurrent || e.leakToActive)
 	b.lines.push({...line})
 	if (!(visible || e.leakToActive) ||
@@ -446,15 +449,13 @@ let BufferList = {
 			let classes = [], displayName = name
 			if (name == bufferCurrent) {
 				classes.push('current')
-			} else {
+			} else if (b.newMessages) {
-				if (b.highlighted) {
-					classes.push('highlighted')
-					highlighted = true
-				}
-				if (b.newMessages) {
 				classes.push('activity')
 				displayName += ` (${b.newMessages})`
 			}
+			if (b.highlighted) {
+				classes.push('highlighted')
+				highlighted = true
 			}
 			return m('.item', {
 				onclick: event => bufferActivate(name),
@@ -462,7 +463,7 @@ let BufferList = {
 			}, displayName)
 		})
 
-		updateIcon(highlighted)
+		updateIcon(rpc.ws === undefined ? null : highlighted)
 		return m('.list', {}, items)
 	},
 }
@@ -813,7 +814,30 @@ let Main = {
 
 window.addEventListener('load', () => m.mount(document.body, Main))
 
+document.addEventListener('visibilitychange', event => {
+	let b = buffers.get(bufferCurrent)
+	if (b !== undefined && document.visibilityState !== 'hidden') {
+		b.highlighted = false
+		m.redraw()
+	}
+})
+
+// On macOS, the Alt/Option key transforms characters, which basically breaks
+// all event.altKey shortcuts, so implement Escape prefixing on that system.
+// This method of detection only works with Blink browsers, as of writing.
+let lastWasEscape = false
 document.addEventListener('keydown', event => {
+	event.escapePrefix = lastWasEscape
+	if (lastWasEscape) {
+		lastWasEscape = false
+	} else if (event.code == 'Escape' &&
+			navigator.userAgentData?.platform === 'macOS') {
+		event.preventDefault()
+		event.stopPropagation()
+		lastWasEscape = true
+		return
+	}
+
 	if (rpc.ws == undefined || !hasShortcutModifiers(event))
 		return
 
@@ -861,4 +885,4 @@ document.addEventListener('keydown', event => {
 	}
 
 	event.preventDefault()
-})
+}, true)