xP: improve favicon behaviour

Make it black when disconnected, and orange when the document
is hidden but the current tab is highlighted.
This commit is contained in:
Přemysl Eric Janouch 2022-09-12 03:48:12 +02:00
parent 3b6c29d676
commit 8968100a28
Signed by: p
GPG Key ID: A0420B94F92B9493
1 changed files with 25 additions and 12 deletions

View File

@ -170,7 +170,11 @@ function updateIcon(highlighted) {
let ctx = canvas.getContext('2d') let ctx = canvas.getContext('2d')
ctx.arc(16, 16, 12, 0, 2 * Math.PI) 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() ctx.fill()
if (iconLink === undefined) { if (iconLink === undefined) {
@ -305,6 +309,8 @@ rpc.addEventListener('BufferActivate', event => {
bufferCurrent = e.bufferName bufferCurrent = e.bufferName
bufferLog = undefined bufferLog = undefined
bufferAutoscroll = true bufferAutoscroll = true
if (b !== undefined && document.visibilityState !== 'hidden')
b.highlighted = false
let textarea = document.getElementById('input') let textarea = document.getElementById('input')
if (textarea === null) if (textarea === null)
@ -341,7 +347,8 @@ rpc.addEventListener('BufferLine', event => {
return return
} }
let visible = !document.hidden && bufferLog === undefined && let visible = document.visibilityState !== 'hidden' &&
bufferLog === undefined &&
(e.bufferName == bufferCurrent || e.leakToActive) (e.bufferName == bufferCurrent || e.leakToActive)
b.lines.push({...line}) b.lines.push({...line})
if (!(visible || e.leakToActive) || if (!(visible || e.leakToActive) ||
@ -446,15 +453,13 @@ let BufferList = {
let classes = [], displayName = name let classes = [], displayName = name
if (name == bufferCurrent) { if (name == bufferCurrent) {
classes.push('current') classes.push('current')
} else { } else if (b.newMessages) {
if (b.highlighted) { classes.push('activity')
classes.push('highlighted') displayName += ` (${b.newMessages})`
highlighted = true }
} if (b.highlighted) {
if (b.newMessages) { classes.push('highlighted')
classes.push('activity') highlighted = true
displayName += ` (${b.newMessages})`
}
} }
return m('.item', { return m('.item', {
onclick: event => bufferActivate(name), onclick: event => bufferActivate(name),
@ -462,7 +467,7 @@ let BufferList = {
}, displayName) }, displayName)
}) })
updateIcon(highlighted) updateIcon(rpc.ws === undefined ? null : highlighted)
return m('.list', {}, items) return m('.list', {}, items)
}, },
} }
@ -813,6 +818,14 @@ let Main = {
window.addEventListener('load', () => m.mount(document.body, 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 => { document.addEventListener('keydown', event => {
if (rpc.ws == undefined || !hasShortcutModifiers(event)) if (rpc.ws == undefined || !hasShortcutModifiers(event))
return return