xP: improve favicon behaviour

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

1 files changed, 25 insertions, 12 deletions

diff --git a/xP/public/xP.js b/xP/public/xP.js
index d3b2d16..3344a1f 100644
--- a/xP/public/xP.js
+++ b/xP/public/xP.js
@@ -170,7 +170,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 +309,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 +347,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 +453,13 @@ let BufferList = {
 			let classes = [], displayName = name
 			if (name == bufferCurrent) {
 				classes.push('current')
-			} else {
-				if (b.highlighted) {
-					classes.push('highlighted')
-					highlighted = true
-				}
-				if (b.newMessages) {
-					classes.push('activity')
-					displayName += ` (${b.newMessages})`
-				}
+			} else 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 +467,7 @@ let BufferList = {
 			}, displayName)
 		})
 
-		updateIcon(highlighted)
+		updateIcon(rpc.ws === undefined ? null : highlighted)
 		return m('.list', {}, items)
 	},
 }
@@ -813,6 +818,14 @@ 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()
+	}
+})
+
 document.addEventListener('keydown', event => {
 	if (rpc.ws == undefined || !hasShortcutModifiers(event))
 		return