[CSS Store] Combine Tab Favicon and Close Button for Collapsed Tab Bar

[gunir]

First, read this guide but soon Zen'll add more CSS feature to things should become much easier (streamlined) so everyone can do this easily.

userChrome.css

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/combined_favicon_and_tab_close_button.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Show tab close button when cursor is over the tab icon */

/* inline_tab_audio_icons.css is recommended because otherwise you cannot mute the tab using the mute button */

.tab-content{
  pointer-events: none
}
.tab-icon-image:not([busy]){ display: block !important; }
:where(.tab-content:hover) .tab-icon-image,
:where(.tab-content:hover) > .tab-icon-stack{
  visibility: hidden;
}
.tab-close-button{
  order: -1;
  display: flex !important;
  position: relative;
  margin-inline: -4px -20px !important;
  padding-inline-start: 7px !important;
  opacity: 0;
  width: unset !important;
  pointer-events: auto;
}
.tab-close-button:hover{ opacity: 1 }
.tabbrowser-tab[pinned] .tab-close-button{ display: none !important; }

Result:

Credit: https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome

[nkapila6]

This is great. It's just that needs a different way to trigger the X button (maybe an instant popup?), I often close a tab instead of switching into it 😆

[mauro-balades]

Add it to the theme store!