Firefox Proton macOS Close Tab Left (updated for version 113)

userChrome.css

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 

.tabbrowser-tab .tab-close-button {
  opacity: 0;
  margin-left: -4.5px !important;
  margin-right: 2px !important;
}

.tabbrowser-tab:not(:hover) .tab-close-button {
  display: none;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-close-button {
  opacity: 1;
  margin-inline-end: 0;
  -moz-box-ordinal-group: 0 !important;
  order: -1 !important;
  display: unset !important;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack {
  -moz-box-ordinal-group: 99999 !important;
  order: 99999 !important;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack:not([indicator-replaces-favicon]) {
  display: none;
}

@g3nsvrv, your Linux/theme looks nice! Which distro is it?

Garuda KDE + firefox-appmenu

Improved version based on this solution: https://support.mozilla.org/zu/questions/1365405

Firefox update 113.0 broke this for me. To fix it, I used order instead of -moz-box-ordinal-group.

Firefox update 113.0 broke this for me. To fix it, I used order instead of -moz-box-ordinal-group.

can you please share whole code?

It would be this, but just replacing -moz-box-ordinal-group with order does not work:

.tabbrowser-tab .tab-close-button {
	opacity: 0;
	margin-left: -4.5px !important;
	margin-right: 2px !important;
}
.tabbrowser-tab:not(:hover) .tab-close-button {
	display:none;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-close-button {
	opacity: 1;
	margin-inline-end: 0;
	order: 0 !important;
	display:unset !important;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack {
	order: 99999 !important;
}
.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack:not([indicator-replaces-favicon]) {
	display: none;
}

Same with placing the search bar on the top of a page… order doesn't work either:

.browserContainer > findbar {
	order: 0;
}

Anyone with a solution? 🙏

I tried -1 and it seems to work for me:

.tabbrowser-tab .tab-close-button {
  opacity: 0;
  margin-left: -4.5px !important;
  margin-right: 2px !important;
}

.tabbrowser-tab:not(:hover) .tab-close-button {
  display: none;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-close-button {
  opacity: 1;
  margin-inline-end: 0;
  -moz-box-ordinal-group: 0 !important;
  order: -1 !important;
  display: unset !important;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack {
  -moz-box-ordinal-group: 99999 !important;
  order: 99999 !important;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack:not([indicator-replaces-favicon]) {
  display: none;
}

Can you guys test this and confirm? I will then update the gist.

🎉 Your solution works great… thank you! PS: order: -1; also works for search bar on top. 👍

I tried -1 and it seems to work for me:

.tabbrowser-tab .tab-close-button {
  opacity: 0;
  margin-left: -4.5px !important;
  margin-right: 2px !important;
}

.tabbrowser-tab:not(:hover) .tab-close-button {
  display: none;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-close-button {
  opacity: 1;
  margin-inline-end: 0;
  -moz-box-ordinal-group: 0 !important;
  order: -1 !important;
  display: unset !important;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack {
  -moz-box-ordinal-group: 99999 !important;
  order: 99999 !important;
}

.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack:not([indicator-replaces-favicon]) {
  display: none;
}

Can you guys test this and confirm? I will then update the gist.

Worked perfect for me, thanks!

Can you guys test this and confirm? I will then update the gist.

+1. Thank you savior.

This works until recent Firefox versions. In newer versions, sometimes when I point my mouse onto pinned tabs, the favicon becomes the close button, sometime not.

I fixed it for Firefox 145.0.1 - confirmed working

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

.tabbrowser-tab {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.tab-close-button {
    display: block !important;
    order: -1 !important;
    margin-inline: -15px 10px !important;
    opacity: 0 !important;
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    pointer-events: none !important;
    transition: none !important;
    padding: 0 !important;
}

.tab-close-button .toolbarbutton-icon {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.tabbrowser-tab[selected] .tab-close-button,
.tabbrowser-tab:hover .tab-close-button {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.tab-content {
    margin-inline-start: 16px !important; 
    transition: none !important;
}

.tabbrowser-tab:hover .tab-content {
    margin-inline-start: 16px !important;
}

* {
    transition: background-color 0.15s ease-in-out, 
                color 0.15s ease-in-out, 
                border-color 0.15s ease-in-out;
}