In this guide, we will show you the steps to remove the Firefox v136 Mute tab option and revert to the old one. This offering from Mozilla is undoubtedly the most privacy-enriched browsers out there. However, it is also notoriously infamous for implementing some controversial changes from time to time. The latest one to make its way is the introduction of the Mute button in the tab.
For the unaware, Firefox has just added a new mute button in the tab, which takes a considerable amount of space, thereby increasing the chance of accidentally clicking on the mute or close button when the user simply tries to click on a tab. You can now safely say that everything to the right of the favicon is now only a mute or the close button and nothing else!
And if you are among those who use vertical tabs, then things take a turn for the worse as the font size for the tab titles is now quite small in size. All in all, the latest update to the browser has created a mess all around the tab. Fortunately, there does exist some nifty CSS tweaks that will help you bring back things to normalcy, exactly how it was before. So without further ado, let’s check out those tweaks.
Table of Contents
How to Remove Firefox v136 Mute Tab and Revert to Old One
Just head over to the desired command section that corresponds to your requirement. Do note that all the changes need to be made in the userChrome.css file. [New to Firefox CSS? Then check out this guide to get started: How to Customize Firefox using CSS].
Hide favicon when audio is playing
/* hide favicon when audio is playing (like FF 135) */
#tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) .tabbrowser-tab:not([pinned]):not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
.tab-content .tab-icon-image {
display: none;
}
.tab-audio-button {
--button-size-icon-small: 18px !important;
--button-min-height-small: 16px !important;
margin: auto 4.5px auto -1px !important;
transform: translateY(-2px);
}
}
Prevent audio playing tabs from modifying the tab width
/* prevent audio playing tabs from modifying tab width */
.tabbrowser-tab {
&:is([muted], [soundplaying], [activemedia-blocked]) {
#tabbrowser-tabs[orient="horizontal"] &:not([pinned]) {
--tab-min-width: unset !important;
}
}
}
Disable the Mute Icon Functionality
Both the commands given below will simply disable the functionality of the Mute icon but the icon itself will still be shown there. This tweak simply helps in preventing accidental clicks on the Mute icon when you are interacting with the tabs,
[class="tabbrowser-tab"]:is([soundplaying],[muted],[activemedia-blocked]) {
.tab-content .tab-icon-image {
display: none;
}
.tab-audio-button {
--button-size-icon-small: 18px !important;
--button-min-height-small: 16px !important;
margin: auto 4.5px auto -1px !important;
transform: translateY(-2px);
}
}
This also disables the button while keeping it visible:
[class="tabbrowser-tab"]:is([soundplaying],[muted],[activemedia-blocked]) {
.tab-content .tab-icon-image {
display: none;
}
.tab-audio-button {
--button-size-icon-small: 18px !important;
--button-min-height-small: 16px !important;
margin: auto 4.5px auto -1px !important;
transform: translateY(-2px);
pointer-events: none !important;
}
}
Adjust the Native Vertical Tabs’ font size value
#vertical-tabs.customization-target #tabbrowser-tabs, #tabs-newtab-button {
font-size: 12pt !important;
}
That’s it. These were the steps to remove the Firefox v136 Mute tab option and revert to the old one. We will be continuously updating this guide with more tweaks as and when they are live. Stay tuned!
