The option in the config can help you in eliminating the close button from background tabs but not the foreground tabs. To do this, you have to change the smallest width that a tab can be before Firefox starts. For this, follow the steps as below:

• Enter about:config in your Firefox address bar
• Bypass the warning message
• Find the browser.tabs.tabClipWidth
• Change the value to a large number (for example, 1000000)
• Restart Firefox

Hope this helps.

There used to be a preference called browser.tabs.closeButton back in the very early days. Currently, Firefox will always show an X close button on the active tab, assuming it is not a pinned tab, even if the tabs have become too narrow to have an X close button on the other (background) tabs. The only way around it is a custom style rule in a userChrome.css file.

If you haven't created an optional userChrome.css file before, it is a little bit of a project, so wait until you have 10 quiet minutes so you can take your time.

(For anyone who already has a userChrome.css file set up, you just need to add the rules under (A) to your file.)

(A) Select and copy the following style rule code

/*** Hide Tab Close buttons ***/
.tabbrowser-tab .tab-close-button {
  visibility: collapse !important;
}

(B) Generate and download a userChrome.css file

Open the following page and paste the above rules into the editor, replacing the sample rule:

https://www.userchrome.org/download-userchrome-css.html

Then click "Generate CSS File" and save the userChrome.css file to your computer. (See first attached screenshot)

Use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See second attached screenshot)

Minimize that file browser window for later reference.

(C) Create a new chrome folder in your profile folder

The following article has the detailed steps for that (#1, #2, and I recommend #3)

https://www.userchrome.org/how-create-userchrome-css.html

I have videos for both Windows and Mac in case the text is not clear.

(D) Move the userChrome.css file you downloaded in Step B into the chrome folder you created in Step C

(E) Set Firefox to look for userChrome.css at startup -- see step #6 in the above article.

The next time you exit Firefox and start it up again, it should discover that file and apply the rules.

Success?

Once you start tweaking the interface this way, you'll probably find more and more things you want to do. I suggest bookmarking the pages where you get the code for future reference because changes to Firefox may break them and it's easier to request an update if you can find the source.