Firefox Tweaks and Fixes and Styles and Things

Tools

See the recent changes at the end of this document.

Introduction

Following is a collection of tweaks and fixes for the Mozilla Firefox web browser and its derivatives. Keep an eye out for changes as i tend to update this stuff fairly often.

For the non-techies, here are brief descriptions of some of the Firefox configuration files which are in play in this article:

  • prefs.js: This is the primary Firefox configuration file that controls much of how the browser works. This file exists in the root of your Firefox profile directory. The contents of this file can be viewed and edited by entering about:config in the address bar, however you should typically not edit this file unless it's only to test something. All of your custom preferences should be placed in a user.js file (or a user-overrides.js file if you're using the 'ghacks' user.js).
  • user.js: This file does not exist until you create it in the root of your Firefox profile directory. Any preferences that you wish to change in prefs.js or about:config that are not available in the Firefox options interface, and which you want to preserve across Firefox updates or resets, should be entered in this file.
  • userChrome.css: This file does not exist until the you create it in the chrome folder of your Firefox profile. This file is used to modify the appearance of virtually any element of the Firefox user interface (UI).
  • userContent.css: This file does not exist until the you create it in the chrome folder of your Firefox profile. This file can be used to modify the appearance and behavior of web pages, however i would recommend using the Stylus add-on instead because it makes working with CSS much easier.

If you need help with Cascading Style Sheets (CSS), selectors and what parameters they can take, see the CSS Introduction and CSS Reference documents at w3schools.com.

Changing how Firefox looks

CustomCSSforFx

Since Mozilla removed support for the older XUL/XPCOM add-ons in favor of WebExtensions, the much loved Classic Theme Restorer add-on won't work with Firefox version 57 or newer. The developer of CTR is still very active in maintaining the CSS code that was used in the add-on however and you can find it in the CustomCSSforFx GitHub repository. Using the new code, we can continue to tweak the crap out of Firefox, though it will require a bit more elbow grease. I've removed several of the CSS tweaks i used to have here in favor of using the CustomCSSforFx code because it covers so much territory and saves a lot of time without adding too much overhead. You can also hide Firefox context menu items with CustomCSSforFx or you could roll your own styles and dump it in userChrome.css.

Instructions for implementing the CustomCSSforFx code is on the page i linked to, though i might recommend implementing it a little differently, especially if you already have code in your userChrome.css or userContent.css that you want to keep. The method i use keeps my custom code separate from the CustomCSSforFx code which makes updating the CustomCSSforFx code easier. It also allows to quickly troubleshoot problems that might arise because you can just comment out a single @import line to easily eliminate large chunks of code. Here's what my userChrome.css contains:

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

/* Aris-t2/CustomCSSforFx (https://github.com/Aris-t2/CustomCSSforFx) */
@import "./custom/aris-t2/userChrome.css"; /**/

/* all of my other custom code is below */

Notice that the @namespace line is commented out. You need to do the same, else some of the tweaks in the CustomCSSforFx code might not work. To understand why you don't need the @namespace line, even though you may have read that you do, and why it can cause styles to break, read Adding Style Recipes to userChrome.css.

As you saw above, the userChrome.css in my /chrome folder is a rather bare-bones affair in which i use @import to link to the CustomCSSforFx files and all my other CSS files that reside in sub-folders of /chrome. Here's what the directory hierarchy looks like if you're confused:

/chrome
    userChrome.css
    userContent.css
/chrome/custom/aris-t2
    /config
    /css
    /image
    userChrome.css
    userContent.css
/chrome/custom/some-other-stuff
    whatever.css

And here's what my userContent.css file looks like, which just points to the userContent.css file contained with the CustomCSSforFx package:

/* Aris-t2/CustomCSSforFx (https://github.com/Aris-t2/CustomCSSforFx) */

@import "./custom/aris-t2/userContent.css"; /**/

/* all of my other custom code is below here */

Once you've got the files in place, it's just a matter of editing the /aris-t2/userChrome.css and /aris-t2/userContent.css files to suit your needs. The instructions for doing so are contained in the files. It will take a while to go through it all, but i suggest doing so because some tweaks are OS specific.

Dark Fox

Firefox ships with a few default themes and one of them is the 'Dark' theme. To activate it, right-click on an empty part of the tab bar or the navigation tool bar, or click the 'Customize' menu item in the Hamburger menu. At the bottom of the 'Customize Firefox' tab you'll see a 'Themes' button. Click it and select the 'Dark' option. If you also use a 'dark web' add-on to darken the entire web, such as Dark Background and Light Text, you may experience the dreaded 'White Flash Syndrome' which is a brief white flash when you load a website. This can be very annoying when using a dark web theme but it can be minimized by adding this to your userChrome.css:

/* eliminate white flash when loading web pages */
#browser vbox#appcontent tabbrowser,
#content,
#tabbrowser-tabpanels,
browser[type=content-primary],
browser[type=content] > html {
    background: #000 !important;
}

Another way to darken more of the Firefox UI, including some about: and extension pages, is with Shadowfox, however i find it to be overkill. If you use Shadowfox the 'white flash' code above is not needed.

Auto-open/hide the sidebar

WARNING: Because the sidebar is essentially always open, but hidden, if an item in the sidebar has focus and you press, for instance, the delete key even when the sidebar is hidden, the sidebar item that has focus will be deleted! I stopped using this style myself for this reason, and also because it will no longer be possible to drag stuff (like a bookmark) into the sidebar, however i decided to keep the code here in the event others aren't bothered by these issues.

This CSS tweak allows to open the sidebar by simply moving your mouse cursor to the extreme left of the browser window and close it by moving your mouse off of the sidebar. You many not want to use this if you don't usually keep Firefox maximized. There are two issues with this style: Because the position of the sidebar is set to 'relative', it shares the same space as the page you're browsing and so it narrows the page by 1 pixel. May not sound like anything worth a complaint, but it bothers me. Problem is, i've been unable to get the sidebar to display properly if i set its position to 'fixed'. Also, in the original code that i found (stole), the author removed the sidebar header and i wanted to keep it. This creates the second issue in that, if you change the contents of the sidebar using the drop-down menu in the header, the sidebar will collapse and must be reopened.

Don't forget to set --sbarwidth to your desired value.

/*
/*
* AUTO-OPEN SIDEBAR
*
* Contributor(s): img2tab
*
*/
:root {
    --sbarwidth: 420px; /* set width you want the sidebar to be when it's open */
}
#sidebar-header {
    border-bottom: none !important;
}
.sidebar-header, #sidebar-header {
    font-weight: normal !important;
    color: white !important; /* comment out for a light theme /**/
}
#sidebar-box {
    overflow-x: hidden;
    min-width: 0px;
    max-width: 0px;
    position: relative;
    padding-left: 5px !important;
    padding-right: 0 !important;
    background-color: #2e2e2e !important; /* comment out for a light theme /**/
    border-right: 1px solid; /* width of the border which opens the sidebar /**/
    cursor: pointer;
    transition: all 0.1s ease 0.15s; /* first number is transition time and second is open/close delay time */
}
#sidebar-box:hover,
#sidebar-box #sidebar {
    min-width: var(--sbarwidth);
    max-width: var(--sbarwidth);
    padding-right: 10px;
}
#sidebar-box ~ #sidebar-splitter {
    display: none;
}
.sidebar-placesTree {
    color: white !important; /* comment out for a light theme /**/
}

/* bookmark panel item spacing - optional */
.sidebar-placesTree treechildren::-moz-tree-row {
    margin: -2px;
}

Adjust vertical space between the bookmark items

This will change the vertical space between your bookmarks in the sidebar. You can use CustomCSSforFx for this, or copy the following code to your userChrome.css. Change the -2 to whatever suits you.

/* bookmark panel item spacing */
.sidebar-placesTree treechildren::-moz-tree-row {
    margin: -2px;
}

Styling the link target/network status tooltip

The link/status tooltip is the text that appears in the lower left or right of the browser viewport when you hover over a hyperlink or when there is certain network activity. Some people (me!) find the link tooltip really annoying because it can cover part of a webpage and get in your way. This style will have the following effects:

  • move the hyperlink tooltip to the top of the browser, overlaying the tab bar (adjustable)
  • make the hyperlink tooltip the full width of the browser (almost)
  • make the hyperlink tooltip background transparent black and the text white
  • center the hyperlink tooltip text
  • leave the network status tooltip on the bottom of the viewport, but make the background transparent white and the text black
/* move the hyperlink tool-tip to the top of the browser */
#statuspanel[type="overLink"] {
  position: fixed;
  top: 26px; /* adjust as necessary */
  left: 0;
  width: 100%;
  z-index: 3;
  text-align: center;
}

/* style the hyperlink tool-tip */
#statuspanel[type="overLink"] #statuspanel-label {
  background-color: #0000008c !important;
  color: white !important;
  height: 27px !important; /* adjust as necessary */
}

/* style the status tool-tip */
#statuspanel[type="status"] #statuspanel-label {
  background-color: #ffffff9c !important;
  color: black !important;
}

/* make sure the the status tooltip is hidden when it's inactive */
#statuspanel[inactive] #statuspanel-label {
  display: none !important
}

Changing how Firefox works

In addition to the smooth scrolling tweak below, see the articles, Firefox Configuration Guide for Privacy Freaks and Performance Buffs and The Firefox Privacy Guide For Dummies!, as well as my user-overrides.js.

Smooth scrolling

Smooth scrolling is apparently enabled by default in Firefox, but i don't care for the way it works. If you want to try my settings, copy the smooth scroll code from my user-overrides.js file on my GitLab repository (scroll down until you find the line === 12BYTES.ORG SMOOTH SCROLLING ===).

Making the user interface (UI) bigger on small displays

The Firefox UI consists of several parts including toolbars, the tab bar and the viewport where web pages are displayed. If you're working on a high resolution, small format display, such as a laptop with a 1080p screen, everything may look too small. From the Firefox preferences you can easily enlarge the font sizes used by web pages. By the way, when you change font sizes in the "Fonts & Colors" section of the Firefox preferences, make sure to set the same sizes for "Other Writing Systems" in addition to your language (which is Latin if you read English). If the toolbar buttons, address bar text and other parts of the Firefox UI are also too small, adjusting font sizes will do nothing to enlarge them, so here's what you can do:

  1. Enter about:config in the address bar
  2. In the search box, enter layout.css.devPixelsPerPx
  3. Set the value of this preference to whatever decimal number (0.9, 1.1, 1.2, etc.) you want until the toolbars and icons are a comfortable size (the change will take effect immediately). Don't use too large of a number. What is too large? I don't know, but once you get close to 2 you might notice very strange issues with the UI. I use a value of 1.3 for a 17 in., 1080p display.

This will also enlarge all web pages and so you may want to adjust your desired font sizes in Firefox's options, both for your preferred language and 'Other Writing Systems'.

If you use the developer tools you can enlarge all of that using the devtools.toolbox.zoomValue preference.

When you're done, you should put those preferences in a user.js file.

Changing how websites look or work

The styles below can be used in a userChrome.css file, but i would recommend using the Stylus add-on mentioned earlier. If you dump them in userChrome.css you'll need to make some changes so that they affect only the websites you want them to affect.

Making the interwebs dark

Many of us who have been staring at computer monitors too damn long cannot tolerate bright displays. White web pages with dark text feels like looking at the sun, which is one reason why i use a dark theme for this website. A lot of people seem to have this problem and there are many solutions. In the case of Firefox, there are quite a few add-ons that can darken the web and they use various methods to do so. The simplest ones invert the colors which is a dumb method for a couple reasons, one of them being that this can make dark pages look bright. To see my preferred extension for darkening the web, see Firefox Extensions – My Picks. In addition, also see the 'Dark Fox' section above if you want to reduce the 'white flash' when a you load a new tab.

Allow text selection/copying

In a silly effort to prevent copying text, some website admins will try to prevent you from selecting it, or at least make it appear that you can't select it by changing the selection color to the same color as the background. This tweak will often solve the problem.

Name: [global] allow text selection
Applies to: Everything

/* override CSS preventing text selection */
* {
    -moz-user-select: text !important;
    user-select: text !important
}

Copying/pasting text without formatting

Sometimes you may want to copy text from a website and paste it without the HTML markup. While i'm not aware of any way to accomplish this without an extension, you may be able to do the next best thing by using Ctrl+Shift+V to paste instead of Ctrl+V. This works for me on Windows and Linux, however i've had some feedback that indicates it does not work in all cases. If you have a problem, look for a global or application specific Ctrl+Shift+V hotkey setting and consider deleting or changing it.

Copying text from hyperlinks

Copying the text of a hyperlink can be a hassle, that is until you press the Alt key. Just press and hold your Alt key while dragging the cursor to highlight the text you want to copy. You can even copy text from the middle of a hyperlink this way. There are extensions that can do this too, but the less you install, the better.

Display website content hidden by JavaScript

I'm noticing more and more websites using JavaScript and a DIV layer to hide page content until the page is fully loaded (Engadget employs this stupidity). While this CSS tweak will not work in every case, it will work in some, including many more than those listed as examples. Note also that it may occasionally break how a website is displayed, though i haven't had any trouble with that as far as i know.

Name: [global] anti-JS - display html
Applies to: Everything

/*
* display html when disabled by JS
*/

/* ex: https://www.engadget.com/ */
html {
    display: unset;
}

/* ex: https://www.idownloadblog.com/ */
body {
    opacity: 1;
}

/* ex: https://accesswds.com/ */
body #load {
    display: none;
}

/* ex: https://www.trafiklite.com/ */
.preloader {
    display: none;
}

/* ex: http://www.knoxseniors.org/ */
#preloader {
    display: none;
}

/* ex: https://truthstreammedia.com/ */
#loader-wrapper {
    display: none;
}

/*ex: https://aladinsmiraclelamp.wordpress.com/ */
.site {
    opacity: 1;
}

Display images hidden by JavaScript

Many websites will not display images unless you enable JavaScript. While this tweak is certainly not a universal fix (many websites use a lazy-load script that requires JavaScript), it will work in some cases.

Name: [global] anti-js - display images
Applies to: Everything

img {
    opacity: 1 !important;
    filter: none !important;
}

Display YouTube videos hidden by JavaScript

Many websites will not display embedded YouTube videos unless you enable JavaScript. This will make the video display without having to enable JS in some instances, however JS must still be enabled for youtube.com.

Name: [global] anti-JS - display YouTube player
Applies to: Everything

/* ex: https://www.healthnutnews.com/airbnb-wants-to-pay-you-to-move-to-italy-for-3-months-really/ */
div.player-unavailable {
    display: none !important;
}

Normalizing fonts

I like fonts styles and sizes to look somewhat uniform across websites, plus there are privacy issues for some websites that use 3rd party fonts, such as the "free" fonts that Google provides (hint: when something is "free", you are likely the product). There are various ways to achieve this, but here's the method i suggest:

  1. In Firefox preferences, find the 'Fonts & Colors' options and click the 'Advanced' button.
  2. If you read English, select 'Latin' in the combination control, else select your preferred language.
  3. Set the 'Proportional', 'Monospace' and 'Minimum' font styles and sizes and remember your choices. I set the 'Proportional' option to 'Sans Serif' and all the other options to one of the sans fonts (not serif or sans-serif fonts)
  4. In the combination control, select 'Other Writing Systems' and set the preferences to the same values as in the last step.
  5. Disable the option, 'Allow pages to choose their own fonts'.
  6. Install the Toggle Fonts add-on by Manuel Reimer.

Fonts should now look much more uniform across all websites and if you don't like the way a particular website looks, just click the Toggle Fonts toolbar button which will allow the website to specify its own fonts. Another option is to use something like the ReFont add-on, but that's a bulkier solution that introduces other issues and so i don't really recommend it, especially if you use uBlock.

Lastly, if you use uBlock, read the part about fonts in the Firefox Configuration Guide for Privacy Freaks and Performance Buffs.

HTTP Header trix

Using an extension to modify HTTP headers, like the Header Editor add-on for Firefox, opens a whole new door to hacking the web. Following are some examples that use the Header Editor extension, however you can likely adapt them for use with similar extensions. You can give whatever name you want to your filters and i like to sometimes prefix them with a tag that indicates the scope of the filter.

ETag Removal

This will empty the ETag HTTP header in order to help prevent browser tracking. I like to use the [global] tag for header filters that work for all websites. This code comes from the 'ghacks' fellas.

  • Name: [global] ETag Removal
  • Rule type: Modify the response header
  • Match type: All
  • Execute type: Custom function
  • In the Code box, paste the following:
for (const a in val) {
    if (val[a].name.toLowerCase() === 'etag') { val[a].value = ''; }
}

X-Forwarded-For

The X-Forwarded-For header can be used by the web server to obtain your IP address through a proxy and is therefore a major privacy risk. Here's how to fix that:

  • Name: [global] X-Forward-For Removal
  • Rule type: Modify the response header
  • Match type: All
  • Execute type: Normal
  • Header name: x-forward-for

YouTube redirects

YouTube links can be redirected in different ways. This first set of examples utilizes the Invidious service at snopyta.org which acts as a front-end, or proxy, for YouTube. The advantage in using such a service is that nothing from youtube.com need be loaded by the browser, which means no cookies or JavaScript, and therefore privacy is enhanced.

Note that some videos that play on YouTube won't play when using Invidious and though i'm not certain why this is, i suspect it has to do with copyrights or geographical regions or some such nonsense. You can sometimes work around this by clicking on the video settings icon and changing the "Preferred video quality" to "dash".

This first example will redirect YouTube links (including youtu.be shortened links) to invidious.snopyta.org:

  • Name: [global] YouTube video links to snopyta.org
  • Rule type: Redirect request
  • Match type: Regular expression
  • Match rule: https?:\/\/(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9-_]*)
  • Execute type: Normal
  • Redirect: https://invidious.snopyta.org/watch?v=$1

This next example will redirect YouTube User and Channel ID links to the equivalent page on invidious.snopyta.org:

  • Name: [global] YouTube user/channel to snopyta.org
  • Rule type: Redirect request
  • Match type: Regular expression
  • Match rule: https:\/\/(?:www\.)?youtube\.com\/(?:user|channel)\/([a-zA-Z0-9-_])
  • Execute type: Normal
  • Redirect: https://invidious.snopyta.org/channel/$1

If you don't want to use the service provided by Snopyta, you can still reduce your privacy exposure to YouTube using the following redirects.

This first example will load 3rd party embedded YouTube videos using the youtube-nocookie.com domain which apparently prevents YouTube from storing some extra data in the browser.

  • Name: [global] YouTube embedded to youtube-nocookie.com
  • Rule type: Redirect request
  • Match type: Regular expression
  • Match rule: https?:\/\/(?:www.)?youtube.com\/embed\/(.+)
  • Execute type: Normal
  • Redirect: https://www.youtube-nocookie.com/embed/$1

This next example will redirect shortened YouTube video links (youtu.be) to youtube.com, thus avoiding the unnecessary redirect.

  • Name: [global] bypass youtu.be redirects
  • Rule type: Redirect request
  • Match type: Regular expression
  • Match rule: https?:\/\/youtu.be\/([a-zA-Z0-9]*)
  • Execute type: Normal
  • Redirect: https://www.youtube.com/watch?v=$1

LiveLeak safe mode

This will disable safe mode for LiveLeak videos without having to log-on.

  • Name: [liveleak.com] disable safe mode
  • Rule type: Redirect request
  • Match type: Regular expression
  • Match rule: https?:\/\/www\.liveleak\.com\/view\?i=(.+?)(?!&safe_mode=off)*$
  • Execute type: Normal
  • Redirect: https://www.liveleak.com/view\?i=$1&safe_mode=off

Fixing stuff that's busted

Firefox doesn't remember its window size after restart

If you maximize the Firefox window and then close it, it may not reopen in a maximized state as one might expect. This annoyance can be caused when the preference privacy.resistFingerprinting is set to true (as it should be). This preference does a number of things to make it harder for websites to fingerprint your browser and one of them is to set a generic viewport size. If this bothers you, try the Maximize All Windows (Minimalist Version) add-on by 'ericchase', but know that your browser will be much easier to fingerprint and track if JavaScript is enabled since the browser viewport size is far more unique than something like its User-Agent string for example.

Dark text on a dark background

If you run Linux with a dark GTK theme, it can happen that text labels and other controls can have a very dark background color while the text itself is also dark, making these areas unreadable. Mozilla has known about this for 18 years! The solution that partially worked for me (thanks to Moritz Kammerer and Evan Klitzke) was simply to add a new string preference to my user.js file and give it a value matching the name of a light colored GTK theme installed on my system, then restart Firefox:

user_pref("widget.content.gtk-theme-override", "Adwaita:light");

You can replace Adwaita:light with the name of any other light colored GTK theme, such as Breeze. I also found that omitting :light works as well and the string value is not case sensitive, so just plain adwaita will work.

If you still have problems with dark text on a dark background in other areas or controls, try these styles in a userContent.css file:

/* prevent  black text on black background for text input controls on some about: pages */
@-moz-document url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons) {
    input, textarea {
        color: black !important;
        background: white !important;
    }
}

/* prevent black text on black background for context menu in some about: pages */
@-moz-document url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons),
url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:config),
url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:downloads) {
    menupopup, panel {
        color: white !important;
    }
}

/* prevent black text on black background for buttons in some about: pages */
@-moz-document url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:webrtc) {
    button {
        color: white !important;
    }
}

Disappearing tool-bar and/or Start Panel icons

This seems to happen when duplicating my Firefox profile without first exiting Firefox, so you can possibly avoid this problem altogether by exiting the browser before creating a copy of your profile. If you still have issues however, load about:config in the address bar and in the search box enter extensions.databaseSchema, then right-click this preference and click 'Reset'. Restart Firefox and your icons may reappear. Why this works i have no idea because, in my case, the value of extensions.databaseSchema returns to the same value as it was previously.

Troubleshooting problems with add-ons

If you notice a problem that you think may be related to an add-on, there are some simple steps you can take to troubleshoot the issue before contacting the developer. In my experience problems with add-ons are usually a result of a conflict with 1) a setting in prefs.js, 2) a setting in user.js, 3) another add-on, or 4) something in userchrome.css or usercontent.css. Whatever the case, the following information should help you to troubleshoot the issue.

If you suspect an add-on is giving you trouble…

  1. Backup your Firefox profile! Load about:profiles if you don't know where it's located, then exit Firefox and find your profile folder in your file manager and press Ctrl+C and Ctrl+V to make a copy. When you are prompted for a new name, just add -bak to the existing name.
  2. If you have any custom configuration files, such as a user.js, userChrome.css or userContent.css, rename them (add .bak to the existing name), then start Firefox and verify whether the problem still exists.
    1. If the problem no longer exists, go to the Troubleshooting preferences section below.
    2. If the problem still exists, continue with the next step.
  3. Start Firefox and load about:support by entering that in the address bar, then click 'Restart with Add-ons Disabled'.
  4. Open the about:addons page and, one by one, enable each add-on until the problem reappears, at which point you will know which add-on is causing the problem.
  5. Go to addons.mozilla.org and install a fresh copy of the problematic add-on and verify that the problem is still exists.
    1. If the problem no longer exists, your finished.
    2. If the problem still exists, submit a bug report to the add-on developer (see below).

How to submit a bug report like a pro

If you have a problem with an add-on, or with Firefox itself, you need to be able provide the developer with enough pertinent information so they are able to reproduce it, else they may simply ignore you. Comments like "it don't work" are useless to a developer and you shouldn't be surprised if they ridicule you for submitting such non-descriptive tripe. When describing the problem, be as brief as possible while still including every necessary detail. Here's a template which you can use for bug reports:

Operating system [name]
Firefox [version]
Add-on (if relevant) [name] [version] [link]
Affected webpage (if relevant) [URL]

Brief but accurate description of the problem...

What, if anything, you tried to solve the problem...

Precise steps to reproduce the problem...

With that information in hand, you need to find where the developer wants you to submit bug reports. If it's a buggy add-on, load up about:addons and see if there's a support link in the information for it by clicking the 'More' button. If there isn't, go to the add-on page at addons.mozilla.org and see if the developer provides a link to a support website (preferred!) or at least an email address. If they provide neither, then you're left with no other choice than to post your issue in the add-on comments, but do this only when no other option is available and don't down-vote the add-on. Lastly, make sure the title of your submission is descriptive of the problem. Titles like "bro its so borked LOL" are meaningless to a developer who is now more likely to disregard your issue since you just exposed yourself as a 12 year old slab-fondler.

Troubleshooting Firefox preferences

Problems resulting from settings in your prefs.js file can manifest in different ways, from breaking desired Firefox or extension functionality to causing web pages to not work properly or failing to load at all. Following is one method of troubleshooting preference issues for those who are not comfortable using the Firefox console, or where the console did not provide useful information. Though tedious, this method almost always works. You should have a decent code editor with syntax highlighting for editing the Firefox prefs.js file, such as Kate (Linux), or PSPad or Notepad++ (Windows).

  1. Start Firefox and enter about:profiles in the address bar, then load that page.
  2. Create a new profile for testing, naming it something like '__testing__' so it cannot be easily confused with your default profile.
  3. In the 'Root Directory' row, click the 'Open Directory' button for both your original and your testing profiles to open the folders in your file browser.
  4. Start Firefox using your testing profile. it may ask which profile to load since you now have more than one, but if it doesn't then load about:profiles again and select the option to open your testing profile in a new window. Nowverify that the problem still exists, then exit Firefox.
  5. If the problem no longer exists, continue with the next step. If it does, troubleshooting the problem is beyond the scope of this troubleshooter, suffice to say that it may due to an add-on or custom CSS in your Firefox /chrome folder if you have one, etc..
  6. With Firefox closed, copy (Ctrl+C) the prefs.js file in your original profile folder and paste it (Ctrl+V) in your testing profile folder, overwriting the existing one.
  7. Repeat step 4. If the problem reappears you have verified it is due to a preference in the prefs.js file. If it does not, then it is beyond the scope of this troubleshooter.
  8. With Firefox closed, open the prefs.js file from your testing profile in your code editor and select roughly half of the contents of the file, making sure your selection starts at the beginning of a line and ends at the end of a line in order to avoid further problems. Next, cut (Ctrl+X) the selection (don't just delete it!) and save the file. If your editor complains it is important that you ignore the warning and force the save. If it automatically reloads the file, you will need to disable that behavior in its settings.
  9. Keep repeating steps 4 and 8 until the issue disappears, at which point you know the preference causing the problem is stored in your clipboard (the last section you cut from prefs.js).
  10. Select all of the contents in prefs.js (Ctrl+A) and delete (not cut!) the selection, then paste (Ctrl+V) to paste the contents of your clipboard and save the file, again being sure to force the save if your code editor complains.
  11. Again, continue repeating steps 4 and 8 until you have narrowed down the problem to a single preference at which point you know what preference is causing the problem.
  12. Once the problem is isolated to a single preference, you can then copy it to your user.js file (or user-overrides.js file if you have one) in your default profile and change it's value there after which you can verify the problem was solved by running Firefox with your default profile.

Once you have solved the problem in your default profile, you can delete your testing profile from about:profiles or from the profile loading prompt when Firefox starts.

More Firefox stuff

Other articles i've written about Firefox and its derivatives can be found on the Everything Firefox page.

For more CSS tweaks, see:

General Firefox stuff:

Recent revisions for this article

  • minor edits and corrections

7 thoughts on “Firefox Tweaks and Fixes and Styles and Things”

  1. Regarding "Firefox doesn't remember its window size after restart" and the Maximize All Windows extension (both the standard and minimalist versions): It works flawlessly in a Desktop Environment like GNOME and it is therefore a wonderful fix, but with my i3-gaps Window Manager it still doesn't maximize Firefox.

    I have no good solution, just meant to mention it. Perhaps ericchase knows, if he has time and wants to have a look at it. I will deal with it by opening and closing another window on the same workspace until then. Not a huge deal, but it can be a little annoying because it must be done each time when starting Firefox.

    1. i didn't look at the code, but i suspect Maximize All Windows is just using an API call and, if so, there's probably nothing he can do about it – i'm just thinking about how the 'gaps' version of i3 does what it does – i wonder if it overrides maximize to set the window gap maybe? there may be hope for you though – i think i read somewhere that a future version of FF is going to allow the user to override the window sizing that the fingerprinting pref currently enforces

      oh, ps: don't know if you're aware, but i used to have another method in this article for maximizing FF which i dumped in favor of the much simpler Maximize All Windows add-on – check your window manager settings and see if you can apply window rules (maximize) to Firefox specifically – it didn't always work for me (KDE), but it worked most of the time

      1. Of course, silly me: There is a full screen toggle keybinding in my config. I hardly ever used it, but this is a quick way of solving the Firefox non-full-screen issue! Thank you.

  2. Hello,

    Thank you for your handy tips about FF
    I would like to share with you something I've found about a better scroll experience:
    "mousewheel.acceleration.factor", 20 (I use 19 now, but that's just my taste)
    "mousewheel.acceleration.start", 1
    The scroll is really better only using these two lines, scrolling slowly is slow, scrolling harder is fast.
    For ex, I scroll up this page to top with 4 scroll only.

    Then, a good extension, maybe you know it already:
    https://addons.mozilla.org/en-US/firefox/addon/absolutedouble-trace/

    Greetings from France

    1. i tried your scroll settings and i prefer my own :) thanks for sharing though

      and yes, not all of the settings are necessary – i included them just to be complete – many are now the default settings

      i played with the trace extension a while back but i stopped using it – i'm using too many extensions regarding privacy and security and at some point enough is enough, but again, thanks for mentioning it

  3. "Unless you have a valid reason for doing so, you should never use your primary Firefox profile for troubleshooting (trust me on this) and so the first thing to do is backup your entire profile."

    I learned it the hard way, which is mess it up first and then learn to do it right. I've followed your counsel and now I've got three ff profiles. One is named 'testing', another 'default' and the last 'privacy'.

    Thanks.

    1. i should also mention, when you copy from your privacy to the empty test profile, don't overwrite the couple of files that are created when you created the test profile – times.json is one, and there may be another

Leave a Reply