New csshack -- more visible notification dot in pinned tabs (email, chat, etc)

[jotaf98]

Hi, first of all thanks for this, the autohide_toolbox.css is amazingly well done!

Not sure if you're taking submissions, but I thought I'd put in a quick one, in case it interests anyone. I'm pasting it here instead of creating a PR because I'm not sure if you actually want it and also not sure about the style guidelines; I figured that if you want to include it, you probably have your own preferences as to how best to format it.

Often one has pinned tabs with "web apps" that have notifications -- email, chat, etc. Unfortunately, the current way in which notifications are displayed is not very visible in the default theme. This simply changes them to a small (but quite visible) red dot, similar to those used in Slack. It uses CSS variables so the dot is customizable (size and color).

/* Make the "title changed" notification dot on pinned tabs red */
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
    --tab-attention-icon-color: #ff3b6b;  /* default #2ac3a2 */
    --tab-attention-icon-size: 3px;  /* default 2px */

    background-image: radial-gradient(circle, var(--tab-attention-icon-color), var(--tab-attention-icon-color) var(--tab-attention-icon-size), transparent var(--tab-attention-icon-size)) !important;

    background-position: center bottom calc(6.5px - var(--tab-attention-icon-size) + var(--tabs-navbar-shadow-size)) !important;

    background-size: calc(2 * var(--tab-attention-icon-size) + 1px) calc(2 * var(--tab-attention-icon-size) + 1px) !important;
}

[vpeter4]

I like it. Only difference is that I keeped original color: red is "danger, danger" for me :)

[jotaf98]

Good to hear that! Yeah, I needed it to call out to me more ;)

[MrOtherGuy]

Sorry for appearing so quiet folks, I thought I had replied here before, but apparently I had not.

I think making tab attention more customizable is a great idea so thanks for that. But I had trouble figuring out what would be a good way to do it because it really depends what colors your Firefox theme has.

But, I've just added a new style for this purpose - dual_color_tab_attention_indicator.css. The main difference between what was suggested here is that you can define two colors, one for inner circle, and another for a ring around it - this should make it possible to have it work reasonably well with many themes.

[jotaf98]

No problem, glad you liked it! Yes I think that is a very sensible approach -- it should ensure some contrast. Another way to ensure contrast would be to use the accent colour and the default window background. Anyway it's nice to have good defaults but also this is pretty easy to customize!