Firefox Tweaks and Fixes and Styles and Things

Firefox Add-Ons Puzzle

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 article often. These tweaks should work for Firefox 57 and newer, though you will need to test to be sure.

userChrome.css: Changing how Firefox looks

For customizing the browser user interface (UI), you will need to know how to create and edit a userChrome.css file if you haven’t already got one. If you need help with CSS selectors and what parameters they can take, see the CSS Introduction and CSS Reference documents at w3schools.com.

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 the newer versions of Firefox, though it will cost us a bit more elbow grease. I’ve removed some 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. Note that if you want to hide Firefox context menu items, you can do that with CustomCSSforFx but i would instead recommend using the FxUI Editor add-on by ‘redder’ to generate the CSS since it makes the job easier in my opinion.

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 in both files separate from the CustomCSSforFx code which makes updating the CustomCSSforFx code easier. It also allows to quickly troubleshoot any 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 custom code is below here */

As you can see, the userChrome.css in my /chrome folder is a rather bare-bones affair in which i used @import to link to the CustomCSSforFx files that reside in a sub-folder of /chrome named /custom. Here’s the directory hierarchy if you’re confused:

/chrome
    userChrome.css
    userContent.css
/chrome/custom/aris-t2
    /config
    /css
    /image
    userChrome.css
    userContent.css    

In my userChrome.css file you will notice that the @namespace url [...] line is commented out. You will need to do the same, else some of the tweaks in the CustomCSSforFx code won’t 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 not be applied, read Adding Style Recipes to userChrome.css.

And here’s what my userContent.css file looks like:

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

/* all of my 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 little time, but i suggest you go through them carefully because some tweaks are OS specific.

ShadowFox: Make ALL of Firefox dark (almost)

Perhaps the easiest way to darken nearly all of the Firefox user interface (UI), including the preferences, add-ons, menus and many of the about: internal pages, is to install the ShadowFox theme using the Shadowfox Updater. You’ll have to read the documentation to figure out how to install it if you’re running anything other than an Arch Linux based OS, but in my case, using Manjaro, the updater can be downloaded from the AUR and installing the theme was as easy as running shadowfox-updater in a terminal from the /usr/bin directory. To see what options are available, enter shadowfox-updater -h in the terminal..

If you use both the CustomCSSforFx code and the ShadowFox theme, try to not enable styles in the CustomCSSforFx code that will conflict with the ShadowFox theme. You won’t permanently break anything if you do, it’s just that things won’t look correct. Mostly this will be styles that darken parts of the Firefox UI which won’t be needed with the ShadowFox theme.

Note that the ShadowFox theme will not make web pages dark. To do that, see the Making the interwebs dark section below.

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 in a webpage when nothing in the page is focused, the sidebar item will be deleted! I stopped using this style myself for this reason but decided to keep it here in the event others aren’t bothered by this risk.

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 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. I’m still looking for a fix for that also.

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 reduce the vertical space between your bookmarks in the sidebar, but you could also increase the space if you want.

/* 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 when you hover over a hyperlink or that which displays the network status of a page or resource that’s loading. This text used to appear in the Firefox status bar before it was removed and it now appears as a tooltip which overlays the page. Some people (me) find this really annoying and so the following is one way to fix the problem. This style will have the following effects:

  • move the hyperlink tooltip to the top of the browser, overlaying the tab bar
  • 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 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; /* distance from tool-tip bottom to top of browser - make this 1px less than "height" below */
  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; /* tool-tip height - adjust to match tab height */
}

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

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

user.js: Changing how Firefox works

In addition to the smooth scrolling tweak below, see my article, Firefox Configuration Guide for Privacy Freaks and Performance Buffs.

Smooth scrolling

To enable silky smooth scrolling in Firefox, you will need a user.js file. Once you have one, you can copy the code from my user-overrides.js file on my GitLab repository. Just scroll down until you find the line === 12BYTES.ORG SMOOTH SCROLLING ===.

Changing how websites look

Making the interwebs dark

Many of us who have been staring at computer monitors too damn long cannot stand bright displays. White web pages with dark text actually hurts like looking onto 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 way to go for a couple reasons, one of them being that this can make dark pages bright. I’ve tried a few of these add-ons and while Dark Reader seemed to be the best one, i noticed significantly slower page loading and sustained high CPU usage on occasion. I finally landed on Dark Background and Light Text by Mikhail Khvoinitsky and it works much better and faster. That said, and given the complexity and nonconformity of the web, you must expect some issues with all of these dark web add-ons, but Dark Background and Light Text makes it easy to choose an alternative styling method for websites where it doesn’t work to your liking, or disable it completely.

userContent.css

For customizing the appearance of a website, you will either need to know how to create and edit a userContent.css file, or use an add-on such as Stylus which is a great tool for editing CSS. If you’re going to use userContent.css, then you will want to prefix the following styles with @-moz-document url-prefix('http://'), url-prefix('https://'). If you’re going to use Stylus, then just add both http:// and https:// to the “URLs starting with” option in the “Applies to” section and omit the  @-moz-document line above.

Override text selection/copying for sites that prevent it

In a silly effort to prevent copying text, some website authors will try to prevent you from selecting it. Add this to your userContent.css file to solve the problem:

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

Un-hide images

Many websites will not display images unless you enable JavaScript. This tweak is not a universal fix, but it works in some cases:

img {
    opacity: 1 !important;
}

Un-hide YouTube videos (experimental)

Many websites will not display embedded YouTube videos unless you enable JavaScript for the site. This should make them display without having to enable JS for the visited domain, however JS still must be enabled for the youtube.com domain:

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

Making everything bigger on small displays

The Firefox user interface (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 very small. From the Firefox preferences you can easily enlarge the font sizes used by web pages, however some pages can begin to look broken if you enlarge them too much. By the way, when you enlarge fonts in the “Fonts & Colors” section of the Firefox preferences, make sure to set the larger 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. 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 (1.1, 1.2, 1.3, etc.) you want to make the toolbars and icons a comfortable size (the change will take effect immediately). You can ignore how web pages look at this point as you’re only interested in getting the toolbars and such to look right. Don’t use too big of a number. What is too big? I don’t know, but once you get close to 2 you might notice strange issues with the UI. I use a value of 1.3 for a 17 in., 1080p display.
  4. Lastly, set your desired font sizes in Firefox’s options

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 the layout.css.devPixelsPerPx preference in a custom user.js file.

Another thing that can help to make fonts appear more uniform across different domains is to use something like the ReFont add-on.

RAM it: Speeding up Firefox, for real

You can run your Firefox profile in RAM and gain performance whilst limiting storage media reads and writes. See the Firefox profile in RAM section of the Firefox Configuration Guide for Privacy Freaks and Performance Buffs to learn how.

Fixing stuff that’s busted

Firefox doesn’t remember its window size after restarting

If you maximize the Firefox window, then close and reopen it, it may not open in a maximized state. This annoyance can be caused when the preference privacy.resistFingerprinting is set to true. In this state, 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. You can follow these steps to solve the problem, but know that when you deviate from a generic viewport size, your browser will be easier to track. Some of the following is specific to Linux with the KDE desktop, but you might find this information useful for other environments:

  1. Start Firefox and enter about:config in the address bar
  2. Check the value of privacy.resistFingerprinting. If it is set to true, leave it be and continue, if it is set to false, sorry, something else is happening, but you should consider setting it to true anyway.
  3. If you are running a Linux distribution with the KDE desktop, open the System Setting applet and then click the Window Management icon, then Window Rules. If you are not running KDE or are running a different operating system altogether, you should be able to find a utility somewhere that will allow you to set rules for program windows. Basically you want a utility that will force the Firefox window to start in a maximized state. You can then look at the remaining steps to get an idea of what we’re doing here and adapt as necessary.
  4. With Firefox running, click the New button to create a new window rule.
  5. In the Edit Window Specific Settings window, enter the following for Description: Firefox.
  6. Click the Detect Window Properties button and then click the Firefox window title bar.
  7. In the dialog that opens, check the Window role and Window type boxes and then click OK.
  8. Switch to the Size & Position tab and set both Maximized horizontally and Maximized vertically to Apply initially and make sure both are enabled (set to Yes).
  9. Click OK to exit back to the Window Rules window, then click Apply.
  10. Restart Firefox to test if the fix worked. If it doesn’t, let me know in the comments.

Dark text on a dark background

If you run Linux with a dark GTK theme, it can happen that text inputs 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 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:

/* 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

In the address bar, enter about:config and press Enter. In the search box enter extensions.databaseSchema and, lastly, right-click this preference and click ‘Reset’. Restart Firefox and your icons should 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 once the browser is restarted.

Troubleshooting problems with add-ons

If you notice a problem after installing an add-on, there are some fairly 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.

For the non-techies, here are brief descriptions of some of the Firefox configuration files:

  • prefs.js: This is the main configuration file that controls much of how the browser looks and 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 directly since your changes can be lost. For troubleshooting purposes however, we will ignore this rule of thumb.
  • 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, 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. The userChrome.css file is used to modify the appearance of virtually any element in 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. The userContent.css file can be used to modify the appearance and behavior of web pages.

First things first

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. Find the profile folder, the name of which likely ends in .default. On Linux it typically resides in /home/[your user name]/.mozilla/firefox. Highlight the folder and hit Ctrl + C and then Ctrl + V. You should be prompted to rename the copy, which you can do by just appending something like -bak to the name.

If you suspect an add-on is giving you trouble

  1. Backup your Firefox profile.
  2. Start Firefox and open the about:support page by entering that in the address bar.
  3. Click ‘Restart with Add-ons Disabled’.
  4. Open the about:addons page and, one by one, enable each add-on until the problem appears, at which point you will know what add-on is causing or contributing to the problem.
  5. Leaving the troublesome add-on enabled, one by one, work backwards and disable the rest, testing each time whether the problem still exists. If the problem disappears at some point, then there may be a conflict between the add-on you identified earlier and the last one you enabled in this step. If it does not disappear, then the problem is likely a single add-on.
  6. Remembering the add-on(s) that gave you trouble, quit Firefox and delete the contents of your profile folder.
  7. Restart Firefox and go to addons.mozilla.org and install a fresh copy of the problematic add-on(s) and double check that the problem still exists.
    1. If the problem does not exist, go on to the Troubleshooting preferences section.
    2. If the problem still exists, submit a bug report to the add-on developer(s) (see below).

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. This method usually works quite well, though it can be tedious. 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 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 should ask which profile to load since you now have more than one) and load the webpage where you had the problem to verify whether it 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 it is due to a preference setting 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 mangling any of the unselected preferences. Next, cut (Ctrl+X) the selection (don’t just delete it!) and save the file. If your code 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) and you can therefore proceed to the next step.
  10. Select all of the contents in prefs.js (Ctrl+A) and delete (not cut!) the selection, then paste (Ctrl+V) the contents of your clipboard and save the file, again being sure to force the save if your code editor complains.
  11. Keep 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 particular 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 and revisiting the webpage that was giving you a problem.

Once you have solved the problem in your default profile, you should delete the testing profile from about:profiles, or by restarting Firefox and deleting it from the profile loading prompt.

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(s) with enough pertinent information so they are able to reproduce it, else they may simply ignore you. Comments like “it don’t work” are utterly useless to a developer and you shouldn’t be surprised if they ridicule you for submitting such 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...

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 anything in the information for the affected add-on. 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 choice other than to post your issue in the add-on comments, but do this only when no other support method is offered 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 the developer who is now more likely to disregard your issue since you just exposed yourself as a 13 year old slab-fondler.

More Firefox stuff

Other articles i’ve written about Firefox and its derivatives can be found on the Firefox/Mozilla-Based Browser Tech page.

For more CSS tweaks, see:

General Firefox stuff:

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

Leave a Reply

 

  1. “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