Improving the way Firefox shows new messages notifications on the tabbar

[ericpa06]

First of all sorry, I know the title doesn't make that much sense. Explaining it better: some pages show a number between parentheses to indicate that there is a new message on that given tab. Like this for instance, this is not a exclusively behavior of Firefox, practically all browsers have this behavior, Chrome, Brave, etc:

The problem is that if you pin that given tab this number won't appear, but rather you will receive some generic indication there is a new messages, but it won't show how many: is it 1, 2, 3, 10 new messages? You don't this see this information right away.

This problem though doesn't happen on Vivaldi, which always shows the number between parenthesis as a indication on the top of the favicon, like this, similar to the little icon that indicates whether or not that tab is playing a song. Actually it always shows the number between parenthesis as a flying favicon notification:

This way you can see how many messages there are on that tab even when you pinned that tab. I think it would be interesting a script that would change this functionality. I think this it shouldn't be that complicate to implement some feature like this, some script that extract the number between parenthesis in the beginning of the title and puts it and its own html element should do the trick, I think, but I might be wrong.

As always thank you very much for your consideration and time.

[ericpa06]

Maybe a script that goes to the "tab-text tab-label", which contains the page title, checks whether or not the page begins with (SOME NUMBER), like "(2) My Site Whatever", and if so, extract the number between parenthesis from tabbar, put it as its own html/div thing, as flying mini-favicon on the top of the page.

Although, I think this script should check whether or not there was some modification on the page title before doing anything, because maybe you are accessing a site that for some reason has this prefix on its title beginning, but it is not actually being updated, like, you are browsing some archived email exchange or so like that begins with, for instance "(51)" or any other number between parenthesis.. I think this way it would prevent the script from being triggered incorrectly and would help it to know whether or not there was a new message or whether that was the title page all along.

Also, maybe the script could somehow also remove or maybe just hide away, I think it hidden away it would be better, the number from the title of the page on tabbar, because it follows Vivaldi implementation of this feature you end up with some redundancy, like for instance the number of new messages on the tab is shown twice:

[aminomancer]

Can you make this bug report on bugzilla? And then send me the link. It would help to get the opinion of the people who own the code related to tab icons and notifications. I'm not sure whether Chromium gets that info from the (n) in the tab title, or if there's some javascript API for tracking notifications.

I think Firefox only uses boolean attributes for this purpose. There's the attention attribute which I think comes up to mark a tab that doesn't necessarily have a notification count in the title, but has opened a prompt that requires the user's attention; and then there's the titlechanged attribute which I think is meant to capture the fact that notification counts are often conveyed by the title in real-time, so a pagetitlechanged event means the notification count has changed since we last viewed the page.

.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
  background-image: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px);
  background-position: center bottom calc(6.5px + var(--tabs-navbar-shadow-size));
  background-size: 4px 4px;
  background-repeat: no-repeat;
}

But these are sort of volatile, any user interaction with the page will reset them. So I guess these serve fundamentally different purposes than an icon constantly tracking notification count, even on active tabs.

I guess the problem with turning (n) into a badge is that it's possible such a pattern means something different than a notification count on some webpages. So if that's the only viable approach it might prohibit patching this into Firefox proper, but it would be feasible to do in a script. But I'd kinda like to know if there's a way for Firefox to follow Vivaldi on this

[ericpa06]

Yes, of course, I will create it, I will post here later on.

I'm not sure how Vivaldi did it, as you said, it would be interesting to know exactly how their approach was, I tend to think there isn't any web standard for this sorta notification yet, I think it's something that Vivaldi came up with and which is most likely some "raw approach", like just analyzing the page title. I say that because I saw this feature working on some old forums that I'm pretty sure they didn't update their code nor did anything to enable this, and Vivaldi was still able to display this notification style on those pages. I dug a little and I found this news from 2016 on Vivaldi site about Vivaldi 1.6, in which they announced that they had implemented "Tab Notifications" (the name they gave to this feature), but since the Vivaldi interface is closed source sadly we have no access to the nitty-gritty details about how did they implement this.

https://vivaldi.com/blog/details-matter-vivaldi-1-6-is-ready-2/

About the badge number being used by other things/having other meanings, I agree with you but I think that checking whether or not that given pattern changed after the page loaded would reduce a lot the chance of that thing not being some sort of notification. Like you load a site that the title is "(1) My Site Whatever", and then the title changes to "(2) My Site Whatever", it is unlikely that that isn't some sort of notification happening on that given tab, not necessarily a new message notification, but a notification of some sorts: maybe you are uploading a video and that number increasing indicates the progress of that video upload?

I totally agree that this ideally should be a web standard/API rather than bodging/tweaking around. So if this is implemented as a script that checks the page title somehow, an option to disable this feature on some pages would be useful.

I would also be worried with if that given site uses another pattern to show notifications, like instead of "(1) My Site Whatever", they use: "[1] My Site Whatever", "My Site Whatever [1]", "My Site Whatever (1)" "My Site Whatever - 1", etc...

But I think that using (n) as a prefix on the title page to indicates notifications seems to be somewhat of a unofficial standard when it comes to update the page title to show new messages.

[aminomancer]

Well can you tell me what happens if you open Vivaldi and make a tab whose title is just (45) (24) (32)? I haven't used Vivaldi but I assume it has dev tools. Just go to any page and open the devtools inspector and find the <head> tag, expand it, find the <title> tag and double click inside it to select the text node. And then just type (45) (24) (32) and hit Enter (or maybe you need to hit Ctrl+Enter if it's a multiline editor). That should change the page title. If Vivaldi immediately changes the tab's badge to say 45 then that would be illuminating.

And you might try other patterns too, if that works. Like it would be good to know what happens if the title is Hello (45) and if the title is just (45) with nothing else. If they only analyze the title, then I would like to know how sophisticated that analysis is.

As for your example of (n) title changing to (n+1) title, you're right that such a change would be obvious to a human, but implementing some recognition of that in JavaScript isn't so simple. Like, it also needs to be able to recognize when title changes to (n) title, so it can't rely on a preexisting number just incrementing or decrementing.

But I agree that it's a pretty safe assumption that something of the form (20) Hello, world! reflects a notification count or something analogous. Of course false positives are possible but unlikely. So my gut feeling says /^\([0-9]\) .+$/ would be a pretty safe pattern.

And it would be possible to recognize any of a set of brackets. It's more complicated to recognize brackets/parentheses in any language, because < should only match with > and not with ). That is, each bracket needs to only match if followed by its specific mirrored pair. So that would be functionally equivalent to the unicode bidi algorithm at one level of recursion. It seems like this should work but the character property isn't recognized in JavaScript for some reason. I could basically re-implement that whole block in a regular expression but it would be ugly.

So yeah idk if I can really do this at the quality level I'd feel comfortable submitting it to Mozilla. But certainly if we're gonna use it for a specific set of languages with specific brackets (like (n) [n] 〈n〉 （n） 【n】) then it doesn't need to be genius level at matching any bracket. I suppose we can use a different regexp for a different family of scripts. Like for Latin I suppose we really only ought to match (n) and [n].

[ericpa06]

It seems that Vivaldi is just extracting whatever number there is between the ( ) in the page title beginning and adding as a mini-favicon. Also, by the test I did the only pattern it recognizes it that first one I mentioned: "(n) Site Title", so most likely there is no API involved.

vivaldi_A2UbGpkJAi.mp4

[aminomancer]

Great, that's perfect. Out of curiosity, what happens if you set the number to 0? Like (0) Site title. Does the notification badge go away or does it actually show the number zero?

[ericpa06]

It actually shows the 0.

[aminomancer]

Okay cool. Let me know if/when you post a bug report

[ericpa06]

It just occurred to me that another way to addressing this issue, probably a simpler one, could be using some extension that checks the page title for this pattern and instead of altering the browser interface, it just does this on the favicon, and I start to dig around and I found an extension that does this :)

https://addons.mozilla.org/en-US/firefox/addon/tabbadge/

[aminomancer]

Yeah that's how I think websites usually implement it. Unfortunately due to the size favicons are drawn in, it ends up feeling a little cramped. I also prefer Vivaldi's colors. Well personally I think this is the kind of thing that is best done in the markup so that the notification badges will be themeable. Since Firefox already has badges with a default style it would be pretty easy to use a similar approach to their setup and styling.