xP: change the favicon when highlighted

1 files changed, 33 insertions, 2 deletions

diff --git a/xP/public/xP.js b/xP/public/xP.js
index 89c8e1c..ea4b288 100644
--- a/xP/public/xP.js
+++ b/xP/public/xP.js
@@ -156,6 +156,33 @@ function beep() {
 	oscillator.stop(audioContext.currentTime + 0.1)
 }
 
+let iconLink = undefined
+let iconState = undefined
+
+function updateIcon(highlighted) {
+	if (iconState === highlighted)
+		return
+
+	iconState = highlighted
+	let canvas = document.createElement('canvas')
+	canvas.width = 32
+	canvas.height = 32
+
+	let ctx = canvas.getContext('2d')
+	ctx.arc(16, 16, 12, 0, 2 * Math.PI)
+	ctx.fillStyle = highlighted ? '#ff5f00' : '#ccc'
+	ctx.fill()
+
+	if (iconLink === undefined) {
+		iconLink = document.createElement('link')
+		iconLink.type = 'image/png'
+		iconLink.rel = 'icon'
+		document.getElementsByTagName('head')[0].appendChild(iconLink)
+	}
+
+	iconLink.href = canvas.toDataURL();
+}
+
 // ---- Event processing -------------------------------------------------------
 
 let rpc = new RelayRpc(proxy)
@@ -327,7 +354,6 @@ rpc.addEventListener('BufferLine', event => {
 		}
 	}
 
-	// TODO: Find some way of highlighting the tab in a browser.
 	// TODO: Also highlight on unseen private messages, like xC does.
 	if (line.isHighlight) {
 		beep()
@@ -386,13 +412,16 @@ let Toolbar = {
 
 let BufferList = {
 	view: vnode => {
+		let highlighted = false
 		let items = Array.from(buffers, ([name, b]) => {
 			let classes = [], displayName = name
 			if (name == bufferCurrent) {
 				classes.push('current')
 			} else {
-				if (b.highlighted)
+				if (b.highlighted) {
 					classes.push('highlighted')
+					highlighted = true
+				}
 				if (b.newMessages) {
 					classes.push('activity')
 					displayName += ` (${b.newMessages})`
@@ -403,6 +432,8 @@ let BufferList = {
 				class: classes.join(' '),
 			}, displayName)
 		})
+
+		updateIcon(highlighted)
 		return m('.list', {}, items)
 	},
 }