Skip to content

Instantly share code, notes, and snippets.

@biosmanager
Last active July 30, 2023 14:34
  • Star 29 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
Firefox Proton macOS Close Tab Left (updated for version 113)
@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
Copy link

G3NSVRV commented Sep 13, 2021

thanks m8, this is what I was looking for. this is how it looks my Linux now thanks to you 😛:

image

@Kwadz
Copy link

Kwadz commented Nov 2, 2021

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

@Kwadz
Copy link

Kwadz commented Nov 2, 2021

@biosmanager, it seems we could even simplify with the following, from "Close tab" button on left?:

.tabbrowser-tab .tab-close-button {
  -moz-box-ordinal-group: 0 !important;
}

@G3NSVRV
Copy link

G3NSVRV commented Nov 2, 2021

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

Garuda KDE + firefox-appmenu

@biosmanager
Copy link
Author

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

@starburstq
Copy link

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

@pchmykh
Copy link

pchmykh commented May 9, 2023

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?

@JayBrown
Copy link

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? 🙏

@biosmanager
Copy link
Author

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.

@JayBrown
Copy link

JayBrown commented May 10, 2023

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

@circa-0
Copy link

circa-0 commented May 10, 2023

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!

@fossilet
Copy link

fossilet commented May 11, 2023

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

+1. Thank you savior.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment