The ultimate message about the damn X button to close tabs, for Firefox's UX Desdainers, and for our hero Cor-El.
Hi.
This message has three sections: little background, little rant, and little help from my friends.
Little background:
I use PCs since Commodore 64, and internet since dial-up modems.
Apart for some curiosity attempts with other browsers, I always used Firefox.
Back then you either could do some DIY or you were done for. So, I am not a noob.
And yet I am not a programmer, and do not have to damn be in order to use a damn internet browser.
I have no words to express how negatively the choice of changing the behavior of the X button, to make it disappear when a certain amount of tabs are open, affects my user experience with Firefox.
I tolerated it version after version. Found mentions of about:config tweaks which never worked. Found mentions to css codes which seemed so complicated that I just gave up (I also don't have much capacity for such things atm).
I was ready to get rid of Firefox today after all this time of being loyal.
I would have, if it was not for Cor-El.
(Cor-El you can put this testimonial on your website if you'll ever start a consulting business).
Little rant:
I SO SO SO SO SO SO MUCH HATE bad UX Design!
And the FIRST definition of bad UX Design is when a designer imposes their own tastes and preferences on the users, or makes assumptions (based on their own usage) about how users would do things.
I don't give the lesser s... if Firefox's UX Designers usually only have few tabs open, or don't mind clicking on a tab to make the damn X button appear, or would gladly abandon their beloved ergonomic mouse to buy a standard one with a mid button just to close tabs, of whatever the f... was going on in their minds when they decided to remove such an ESSENTIAL FEATURE!!!
This change is WRONG!
Nobody asked for it, nobody wants it, nobody likes it.
The X button was not disturbing anybody.
WHY must we tweak some f... about:config setting or ask in this Community for some css code to get back what should have never been removed!!!???
DO YOUR JOB, which is to make OUR user experience better, OUR, not yours!!!
Little help from my friends:
After quick searches over a long time where I couldn't dedicate more resources to this, I came here determined to dig deep to find a solution.
And I've found a few posts with answers from Cor-El.
I followed his instructions in THIS post to configure a css file with the code that he provided in THIS other post (because I thought I didn't want the delay offered by the code he provided in the former post).
Problem solved.
Now a question for Cor-El: Is it just me or the solution with the two browser.tabs settings does not work? It's the first thing I tried. I went from 50/50 to 200/200 to see if size matters. But no chance. Maybe there is another setting that must be activated for these to have effect? Or was their effect on the X button removed in newer Firefox versions (like the UX Destroyers really hate us)? Btw, I wanted to see how the delay thing would work, so I tried the code you gave in the first post, and it didn't have any effect. Whereas the code you modified for a guy in THIS post works perfectly. What could be the reason?
And 2 requests: - can you make some guide or pinned post about this, where you put together the info you gave in different posts? Something with your super easy instructions how to create a css file, and the two codes (with and without delay). And if the browser.tabs solution can still work, that too. All info in one single place, easy to find. - can you point me to a (possibly ADHS friendly) resource to more css codes for other useful tweaks, and to an explanation of what all about:config settings do? I like to tweak things to my needs. But I get overwhelmed if I have to read through tons of material. Thanks :)
Bonus Material, Little Rant part 2:
It's good and nice that people help each other and I am thankful, but it does not need to come to this.
Sure, I've read that the (ridiculous) reason behind the choice of making the X button disappear was to avoid accidental closure of tabs.
But WHY taking for granted that we are some !diots who can't even use a mouse properly?
And even if it happens once, we can still go to the damn "recently closed tabs"!
But no, they had to remove the X button for all of us, to prevent a bunch of !%#@! from maybe sometime accidentally closing a tab.
Why not just adding an option in the settings (NOT in some hidden "about:config") to let us choose if we want to have the damn button or not?
Btw, a lot of these about:config tweaks are really useful and not dangerous at all and should imo be included in the normal settings.
Keeping things simple and tidy does NOT mean reducing options. Unless you're Apple.
Please God-zilla let these [censored content] UX Designers read this post.
Amen and happy new Xear.
Modified by AlternativeTotal2211
All Replies (7)
The browser.tabs.tab prefs work unless the overflow scroll buttons appear, but tabClipWidth needs to be less than tabMinWidth to make this work. I've updated the reply in that thread.
- browser.tabs.tabMinWidth => 50
- browser.tabs.tabClipWidth => 49
To make the close buttons appear when the overflow buttons are present, you need to use userChrome.css.
.tabbrowser-tab:not([pinned]) .tab-close-button {display: inline-flex !important}
You can look at the Reddit FirefoxCSS forum to get help with CSS code.
Hello Community Hero!
Thanks again for your reliability.
I did not know that the behavior of the two aforementioned browser.tabs settings regarding the X button would change depending on the presence of the overflow scroll button(s). I did some experiments now. I first of all removed the chrome folder with the css file, then tried again the 2 browser.tabs settings on a virgin window starting with the default values. At least on my 17" display the default minwidth value of 76 means that the overflow scroll button appears when the 17th tab is opened. While the default clipwidth value of 140 meant that the X disappeared when the 10th tab was opened. I decreased the clip value little by little to see how many tabs were needed to make the X disappear. 11 with clip at 128. 12 with clip at 106. 13 with clip at 98. 14 with clip at 91. From there I went to clip 77 and I saw that the X would not disappear until the 17th tab, when the overflow scroll button appeared. The same was happening with clip at 76 or 75 or 50, 49, and even 1. So, please correct my ineducated guess but I suppose that there are certain ranges whose mathematical rules I can't figure out (12 value units from 140 to 128, 22 from 128 to 106, only 8 till 98, only 7 till 91), within which there is no change in the number of tabs needed to make the X disappear. So, as long as the clip value is within the same "range", it seems to be irrelevant if it's bigger, same or smaller than the minwidth value.
All this is only empirical, it might be completely wrong.
Thanks for the recommendation of the Reddit CSS resource.
Allow me to repeat me other question in case you hadn't noticed it: do you happen to know if there is an official or unofficial explanation of what each about:config setting exactly does?
And also, could you confirm if there was some typo in the "delayed X button" settings that you said you use, or could you guess why they aren't doing anything for me, while the ones you modified for that other guy are working fine? This would help me understanding this whole css thing better.
Thanks again!
Modified by AlternativeTotal2211
Note that you need to close and restart Firefox (or open a new window) after you change the browser.tabs.tab pref as those prefs are cached.
The "delayed X button" requires CSS code in userChrome.css and is to make it less easy to close a small tab when you click this tab to select it. The previously used code stopped working because of changes made in the DOM (#tabbrowser-arrowscrollbox got added).
Such CSS code can always stop working and need updated code or you can get familiar with the Browser Toolbox and check and verify the code yourself.
This part in the source code handles whether to display the tab close buttons. _updateCloseButtons:
Modified by cor-el
cor-el said
The previously used code stopped working because of changes made in the DOM (.tab-stack got removed).
Just to be sure that we're on the same page, do you also mean the code you gave HERE? It just stopped working? So what code do you use atm for this X button if you don't mind sharing?
About the reason for making the X button disappear, that's what I call bad UX Design because it's based on an assumption. UX Design is never based on assumptions. The assumption here is that people prefer to have the min width of the tab very low so that when they open many tabs they stay compact. I challenge this assumption, with the absolute certainty that the vast majority of people, if given the choice, would prefer to have the min width set at a value that gives them the ability to still read the tab's title, and to have the X button there (at least on hover) without risk of clicking it when they select the tab. If instead of making the X button disappear they would have set the min width value to e.g. 100 instead of 76, and made the button hooverable instead of fixed, this would have met imo many more needs.
Thanks for recommending the ToolBox, but it's way too complicated for me. As said, I am not even remotely a noob or tech-shy, but also not a programmer, and I have ADHS, so I need things with a graphic interface and a visual way to toggle stuff on/off, and possibly a ? where to click to have more info about that setting. That's why I asked for a resource with an explanation of the about:config settings. But as you evaded the question twice, I won't ask a third time :)
I still use the CSS code posted here and it should still work. Does other CSS in your userChrome.css work?
If not then you need to check for issues like the location and a possible extra .css or .txt appended.
Strange, I tried many times and it never worked.
Yes, I am using the one you modified for another user in THIS post. But I noticed that "yours" has a different composition and, how to say, syntax maybe, and also a couple of things that the other one doesn't have and which I was curious about.
I wonder why yours would not work for me.
There is no extensive documentation of the many prefs that you can find on the about:config page, there is only comments in the Firefox source code where you can find an explanation of what a pref is about and about its possible values. You search the source code for a specific pref, you may have to leave (part of) the pref branch (browser.tabs.tabMinWidth => tabMinWidth) to get more results.
Some useful files that define prefs:
You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.