Seperate the audio icon from site icon on Tabs - Compact toolbar

[AssasinMonkey]

Having usability issues with the Compact Tabs due to audio icons

The new Compact toolbar is nice as it reduces the vertical occupied space, but I've found myself mentally paused in moments because of the change to how audio playing tabs are visualized now.

As you can see, Compact mode replaces the site icon's, which are very strong visual map indicator for my brain when I glance over them. I continue to get tabs "lost" in my mind map because the icon being replaced with the audio/mute one.

In "normal" toolbar config this isn't an issue, as it just says on a second line "playing" and only replaces the icon when hovering over the tab.

To sum up some of the user experience issues with this for me:

• The site icon being replaced makes it harder to identify Tabs, i.e. which tab is which site. Hindering my flow.
• The audio/mute icon don't stand out as a Tab playing audio. In part due to it replacing the site icon, so I can easily confuse it as just a another website icon.
• Side issue: The mute and unmuted icons are hard to distinguish. So the above issue doesn't just impact audio playing tabs, but any tab I have muted.

What have I done at the moment?

I could use the regular toolbar instead of compact, but I prefer the smaller sizing of compact! So after some searching I stumbled on this.

I used userChrome.css code I found on Reddit in a comment by user loxia_01
https://www.reddit.com/r/FirefoxCSS/comments/1gfjh5y/comment/lujfvom/

.tab-icon-stack[indicator-replaces-favicon] {
  grid-template-areas: "a s";
  & > :is(.tab-icon-image, .tab-icon-overlay) { opacity: 1 !important; }
  & > .tab-icon-overlay {
    grid-area: s;
    border: none !important;
    background-size: 100% !important;
    background-color: transparent !important;
    fill: color-mix(in srgb, currentcolor 75%, transparent) !important;
    &:hover {
      background-color: color-mix(in srgb, currentcolor 15%, transparent) !important;
      fill: color-mix(in srgb, currentcolor 95%, transparent) !important;
    }
  }
}

My idea?

Make this a native change of Firefox compact toolbar. Replacing the icon I think just sacrifices too much. Either have it as an option, or separate the icons. Either next to the site icon or left of the X close tab. Just not as the default I'd say.

[Jon]

Thanks for submitting an idea to the Mozilla Connect community! Your idea is now open to votes (aka kudos) and comments.

[rLy]

Just adding to this. I didn't like when the separate audio icon was removed and replaced the favicon a couple of updates ago, but it was still more or less fine, but since the last update (133.0) the new audio playback icon is worse. It takes much more effort to find the tab that's playing audio as the current icon blends in to the rest of the favicons. Having a separate icon for it would be the preferred but even if the current icon changed to a more distinct one would be better.

[Agentvirtuel]

Hello

For information purposes
https://connect.mozilla.org/t5/discussions/help-the-mute-button/m-p/76462

[azurasy]

Thank you for posting this, I have been struggling to find the tab playing sound ever since this update. I know that usually its a youtube tab so I scan my tabs searching for a youtube icon, but none of them are playing sound. Then I have to really pay close attention to all my open tabs to find the sound icon, which doesn't stand out very much even compared to the google icon at a quick glance. It's been very frustrating, please fix it!