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.
... View more