Firefox Add-Ons Puzzle

Firefox Tweaks and Fixes and Styles and Things

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 were tested with Firefox version 62 and will likely work for future versions.

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.

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 working on the CSS code that was used by Classic Theme Restorer however and you’ll 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 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 so much 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 used 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 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 */

So as you can see, in my /chrome folder i have a rather bare-bones userChrome.css file in which i used @import to link to the CustomCSSforFx files that reside in a sub-folder of /chrome named /custom. To keep things straight in my head, i also changed the names of the CustomCSSforFx files from userChrome.css to aris-t2-userChrome.css and userContent.css to aris-t2-userContent.css so i can quickly tell where they came from. Here’s my file hierarchy if you’re confused:

/chrome/
    userChrome.css
    userContent.css
/chrome/custom/
    aris-t2-userChrome.css
    aris-t2-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’ve been repeatedly told 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 wishes. The instructions for doing so are contained in the files. It will take some time, but i suggest you go through them carefully because some tweaks are OS specific.

Auto-open/auto-hide the sidebar

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 the text that displays the status of a page 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 here 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
}

userContent.css: Changing how websites look

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.

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;
}

Fixes: Possible solutions for stuff that’s broken

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. The “problem” 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 may be easier to track. Some of the following is specific to Linux with the KDE desktop, but you might find this information useful in other circumstances:

  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.

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/may/may not 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 Firefox 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 .bak to the name.

One helpful asset for troubleshooting add-on related problems is the Firefox console, but this is not always the case. A diagnostic extension such as Preferences Monitor may also be of use. This guide is oriented more towards the novice, which is fitting considering i’m no expert.

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 preferences

Problems resulting from settings in the various preference files can manifest in all kinds of ways, from broken Firefox UI elements and extensions to web pages not working properly or simply not loading all.

Following is one method of troubleshooting preference problems for those who are not comfortable using the Firefox console, or where the console did not provide any useful information. This method usually works very well, though it can be tedious. You should have a decent code editor with syntax highlighting for editing your configuration files, such as Kate (Linux) or Notepad++ (Windows).

  1. Backup your Firefox profile.
  2. Delete everything in your profile folder.
  3. One at a time, beginning with prefs.js, then user.js, then any chrome CSS files if they exist, copy a single file from your backup profile into your new profile.
  4. Restart Firefox to see if the problem reappears.
  5. Continue this process until the problem reappears, at which point you will know that the cause lies within the last file or folder that was copied to the new profile.

If the problem lies in one of the configuration files (prefs.js, user.js, userchrome.css, usercontent.css), then we need to continue the process of elimination to isolate the offending preference or CSS style:

  1. With Firefox closed, open the offending configuration file in your code editor.
  2. Starting at the top of the file, highlight about half of the content in the file and press Ctrl + X to cut the highlighted portion and store it in the clipboard, then save the file. Be careful to not copy anything else afterwords so that the clipboard content doesn’t get overwritten. If the problematic file is userChrome.css or userContent.css, make sure you don’t end your cut in the middle of a code block.
  3. Restart Firefox and test to see if the problem is still present.
  4. Continue the last two steps, exiting Firefox each time before you cut out the next section and save the file (overwrite the existing file if prompted) until the problem no longer exists, at which point you will have the problematic code stored in your clipboard.
  5. Returning to your code editor, press Ctrl + A to select everything in the file and then Ctrl + V to paste the last portion of code that you cut from the file. It is in this pasted code where the problem is likely to reside. If there is still a lot of code left in the file, then start again at step 1 until there’s just a dozen or lines left.
  6. Once you have the problem narrowed down to a dozen lines or so, one by one, comment out one line, save the file, then restart Firefox until the problem no longer exists at which point you’ve isolated the problematic preference in prefs.js or user.js or chunk of code in userChrome.css or userContent.css. To comment out a line in prefs.js or user.js, prefix the line with two forward slashes ( // ). To comment out a style block in userChrome.css or userContent.css, insert a forward slash followed by an asterisk before the code block ( /* ) and the reverse after the code block ( */ ).

At this point you’ll have to figure out on your own how to solve the problem. If it’s a preference problem you may be able to just reset or change the value, or remove the line of code entirely and hope it doesn’t get recreated by Firefox or an add-on. If it’s a style problem and the syntax is good, then you could just leave the code block commented out or you could delete it. If the problem appears to be caused by an add-on or Firefox itself, then see the section, How to submit a bug like a pro.

With the solution in hand, transfer the fix to the profile which you backed-up, then delete your testing profile and restore your backup by removing the .bak part of the folder name. Start Firefox and all should be well. If you find some toolbar or menu icons have gone AWOL after all this work, see the Disappearing tool-bar and/or Start Panel icons section.

How to submit a bug like a pro

If the problem is with an add-on, or with Firefox itself, you need to be able provide the developer with enough information so they can reproduce it, else they are more likely to 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 nonsense. When describing the problem, be as brief as you can while still including every necessary detail. Here’s a template which you can use for your bug report:

Operating system [name]
Firefox [version]
Add-on (if relevant) [name] [version]
Affected domain/page URL (if relevant)

Brief but accurate description of the problem...

Precise steps to reproduce the problem (if necessary)...

With that information in hand, you need to find where the developer wants you to submit bug reports. If it’s an add-on bug, load up about:addons and see if there’s anything in the information for the affected add-on and, if not, go to their add-on page at addons.mozilla.org and see if the developer provides a link to a support site (preferred!) or at least an email address. If they provide neither, then they suck and therefore they leave you with no choice but to post your bug report in the add-on comments, but do this only when no other support method is offered and don’t down-vote the add-on. Also be sure the title of your submission reflects the actual problem. Titles like “bro its so borked LOL” are meaningless to the developer who is now more likely to disregard your comments since you just exposed yourself as a 13 year old fondleslabber.

More Firefox stuff

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

For more CSS tweaks, see:

Leave a Reply

Your email address will not be published. Required fields are marked *