![Firefox logo](https://assets-prod.sumo.prod.webservices.mozgcp.net/media/uploads/products/2020-04-14-08-36-13-8dda6f.png)
Close Tab Button On Left (Firefox 113)
This again!
This was resolved about a year ago; now the problem is back, as of updating to Firefox 113.0.1 this evening.
Initially post-update the close tab button was in a weird, random place on the tab bar. I have adjusted the margins to put the button back where it's supposed to be!
I changed :
.tabbrowser-tab .tab-close-button { opacity: 0; margin-left: -4.5px !important; margin-right: 2px !important; } to: .tabbrowser-tab .tab-close-button { opacity: 0; margin-left: -4.5px !important; margin-right: 35px !important; }
to move the button back onto the left. That may seem like a drastic change but that's the lowest value I could find which produced the result I want.
However, it's not quite the result I want! As of updating to 113.0.1, the tab title itself now disappears altogether on hover.
I have tried to correct this in CSS using the .tab-text and .tab-label attributes, but without any luck so far.
Can anybody help me with this, before I'm forced to downgrade to Firefox 112?
Better yet... how about we just make this an option in Settings, as it should be?!
השתנתה ב־
פתרון נבחר
jscher2000 - Support Volunteer said
Firefox 113.0 removed the proprietary -moz-box properties, including the "-moz-box-ordinal-group" property, which is how we used to rearrange the order of items within a group. There is a new way to do it based on standard HTML/CSS, but I haven't tested it. This recent thread sounds like the same issue, so you could try the substitution mentioned in https://support.mozilla.org/questions/1413409.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; /* OLD CODE before Fx113: -moz-box-ordinal-group: 0 !important; NEW CODE for Fx113: */ order:-1 !important; display:unset !important; } .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack { -moz-box-ordinal-group: 99999 !important; } .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack:not([indicator-replaces-favicon]) { display: none; }
Thank you! That seems to have done it!
Read this answer in context 👍 0כל התגובות (12)
Firefox 113.0 removed the proprietary -moz-box properties, including the "-moz-box-ordinal-group" property, which is how we used to rearrange the order of items within a group.
There is a new way to do it based on standard HTML/CSS, but I haven't tested it. This recent thread sounds like the same issue, so you could try the substitution mentioned in https://support.mozilla.org/questions/1413409
.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; /* OLD CODE before Fx113: -moz-box-ordinal-group: 0 !important; NEW CODE for Fx113: */ order:-1 !important; display:unset !important; } .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack { -moz-box-ordinal-group: 99999 !important; } .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack:not([indicator-replaces-favicon]) { display: none; }
השתנתה ב־
פתרון נבחר
jscher2000 - Support Volunteer said
Firefox 113.0 removed the proprietary -moz-box properties, including the "-moz-box-ordinal-group" property, which is how we used to rearrange the order of items within a group. There is a new way to do it based on standard HTML/CSS, but I haven't tested it. This recent thread sounds like the same issue, so you could try the substitution mentioned in https://support.mozilla.org/questions/1413409.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; /* OLD CODE before Fx113: -moz-box-ordinal-group: 0 !important; NEW CODE for Fx113: */ order:-1 !important; display:unset !important; } .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack { -moz-box-ordinal-group: 99999 !important; } .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack:not([indicator-replaces-favicon]) { display: none; }
Thank you! That seems to have done it!
Note that there is still this code with -moz-box-ordinal-group in the above posted code.
.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack { -moz-box-ordinal-group: 99999 !important; }
cor-el said
Note that there is still this code with -moz-box-ordinal-group in the above posted code.Thank you. Presumably I should replace that with.tabbrowser-tab:not([pinned="true"]):hover .tab-icon-stack { -moz-box-ordinal-group: 99999 !important; }
order: -1 !important;as well, then?
השתנתה ב־
-moz-box-ordinal-group: 99999 places some icons at the far right and that can be done by order: 99999 (so simply replace -moz-box-ordinal-group with order).
Do you know or remember where other icons like the busy throbber were placed as I'm not sure why you would want to place those icons at the far right ?
Note: '-moz-box-ordinal-group' is by default 1 when not specified. 'order' starts at 0 and is usually the value of -moz-box-ordinal-group minus 1.
השתנתה ב־
cor-el said
-moz-box-ordinal-group: 99999 places some icons at the far right and that can be done by order: 99999 (so simply replace -moz-box-ordinal-group with order). Do you know or remember where other icons like the busy throbber were placed as I'm not sure why you would want to place those icons at the far right ?
Note: '-moz-box-ordinal-group' is by default 1 when not specified. 'order' starts at 0 and is usually the value of -moz-box-ordinal-group minus 1.
Honestly? I don't know. I think when I asked or advice on this last January, this was part of the code which was recommended to me – which worked exactly as I wanted up until last week! – so I didn't really interrogate it further. However, I'm not aware of any icons appearing far right.
A quick bit of background on what I'm sure some people consider to be an odd little crusade...
I've worked on Macs for years, like a lot of people in the music industry. I currently own six Macs of different types, three of which I regularly use for work. I also do some work in Windows (via BootCamp on one of my MacBooks), for one or two very specific applications (ie. running timecoded lighting cues synced to tracks onstage, for live shows with certain bands/artists).
The point is that my instinct is to reach for a 'Close' button in the top left – where Mac operating systems have always had it. I feel that the Close Tab buttons in my browser should be consistent with the overall design of the operating system; this is best for workflow, and it is also best for my brain not exploding due to something suddenly being different for no reason.
On Windows, it makes sense for the Close Tab button to be on the right, consistent with the operating system. On Mac, it should obviously be on the left.
I can't understand why Firefox doesn't simply include an option in the Settings to 'Follow System' for these sort of things – similar to how you can set the Light Mode or Dark Mode option to 'Automatic' (ie. to fall in line with the global settings of your machine, for the sake of consistency).
I love the Firefox is open source and can be customised. But this is far from the best or more convenient solution to a UX issue of this type. And as we have seen, having long-standing customisations like this broken by a software update with no warning can be extremely disruptive, when you open your browser and suddenly things are no longer where you are used to them being!
Would that close button appear at the far left (i.e. to the left of the favicon and the busy/loading throbber and other icons like you see when playing video/audio) ?
Do you have other code with a -moz-box-ordinal-group property in your userChrome.css ?
Yes, that is what your current code is doing. I'm not sure whether previously the favicon stayed visible, but now you do not get changes to the text label if both have the same width.
cor-el said
Yes, that is what your current code is doing. I'm not sure whether previously the favicon stayed visible, but now you do not get changes to the text label if both have the same width.
No, this is how it's always looked; I have just put it back to exactly how it looked before updating to Firefox 113.
I am continually frustrated by software that doesn't respect the platform. Software ports from Windows are the most egregious. Wake up Mozilla, or you will disappear into irrelevance. This issue is easily solved by the blindingly obvious: a setting for close button position.
השתנתה ב־