Blinky Tabs

In Firefox...

There are these handy status indicators on pinned tabs that tell you when something has happened. A good example is Gmail, which lights the indicator when you get a new unread message in your inbox.

Passive Alerts

I'm a big fan of these notifications because the are non-invasive. I can quickly scan and see that I have a new email, but I'm not getting an obnoxious notification that distracts me from what I'm currently working on. They are clear information signals, easy to digest, but easy to ignore.

Controlling the Indicator

There are a few ways to get Firefox to display the indicator. You can integrate them to your app/site using a few techniques.

Alerts, Prompts, Confirms

One way to show the alert is to call alert, prompt, or confirm in javascript while the tab is pinned.

alert('yo')
// or
prompt('heeey')
// or 
confirm('blinkkk')

This works, but it's a heavy handed approach as these functions trigger blocking UI that should be used sparingly.

Changing the Document Title

This technique is much more subtle, and comes with the added bonus of being able to slap some helpful info in your title. Let's look at an example.

Say the current document title is Inbox. You might want to change the title to Inbox (1). Like so:

document.title = 'Inbox (1)'

If this happens while the tab is closed and the user has a different tab selected, the blinky light will flash!

Unlike the alert approach, this technique is less invasive, doesn't block the UI and gives you the opportunity to add some info to the title.