Firefox Add-Ons Puzzle

Firefox Tweaks and Fixes and Things

Introduction

Following is a collection of tweaks and fixes for the Mozilla Firefox web browser and its derivatives, such as Waterfox. Keep an eye out for changes as more stuff will be added in the future.

user.js: Changing how Firefox works

In order to properly change and save preferences for Firefox, you need to know how to create and edit a user.js file if you haven’t already got one.

Enable silky smooth scrolling

By default, scrolling with a mouse wheel in Firefox sucks. The following preferences, of which only one is available from the preferences UI, will greatly improve how scrolling with a mouse wheel and keyboard works. Scrolling will become silky smooth and respond dynamically to the speed at which you rotate your scroll wheel. This tweak will also enable smooth scrolling when a page is scrolled with the up/down arrow keys or the page up/down keys. By incorporating this tweak you be able to read text even while it is being slowly scrolled. Although this tweak is hugely beneficial either way, you will get the most out of it if hardware acceleration is enabled in the Firefox options.

There are at least a few extensions that are built to customize scroll operations and of them i have used both Yet Another Smooth Scrolling and SmoothWheel (discontinued). Both are similar and both work well, however i decided to dig into the Firefox preferences and discover if i could duplicate this behavior without an extension and it was actually easy to do, though it may take some fiddling to get the scrolling behavior set up exactly as you want it.

Following are the preferences that we will mess with and a description of what they affect. The suggested values seem to offer a good starting point. Note that “ms” stands for milliseconds (there are 1000 milliseconds in a second).

preference nametypedefault valuesuggested valuedescription
general.smoothScrollbooleantruetrueenable/disable smooth scrolling – this is the only option available in the Firefox Preferences UI
general.smoothScroll.linesbooleantruetrueenable/disable smooth line scrolling (up/down arrow/page keys)
general.smoothScroll.lines.durationMaxMSinteger150400maximum time in ms for which to smooth out the start/end of line scrolling operations with the up/down arrow or up/down page keys
general.smoothScroll.lines.durationMinMSinteger150200minimum time in ms for which to smooth out the start/end of line scrolling operations with the up/down arrow or up/down page keys
general.smoothScroll.mouseWheelbooleantruetrueenables smooth scrolling with the mouse wheel
general.smoothScroll.mouseWheel.durationMaxMSinteger400600smooths the beginning and end of scrolling operations (value is milliseconds)
general.smoothScroll.mouseWheel.durationMinMSinteger200300smooths the beginning and end of scrolling operations (value is milliseconds)
mousewheel.acceleration.factorinteger1010sets the wheel acceleration factor if mousewheel.acceleration.start > -1
mousewheel.acceleration.startinteger-10when to apply mousewheel.acceleration.factor (after how many scroll clicks of the mouse wheel)
mousewheel.default.delta_multiplier_yinteger10085sets the vertical step size, or how far a page will scroll with one scroll click of the mouse wheel
general.smoothScroll.otherbooleantruetrueenable/disable other smooth scrolling (Home/End keys)
general.smoothScroll.other.durationMaxMSinteger150400smooth out the start/end of other scrolling operations in ms
general.smoothScroll.other.durationMinMSinteger150200smooth out the start/end of other scrolling operations in ms
general.smoothScroll.pagesbooleantruetrueenable/disable page smooth scrolling (PgUp/PgDn keys)
general.smoothScroll.pages.durationMaxMSinteger150400smooth out the start/end of page scrolling operations in ms (PgUp/PgDn keys)
general.smoothScroll.pages.durationMinMSinteger150200smooth out the start/end of page scrolling operations in ms (PgUp/PgDn keys)

You can copy the code below and paste it directly into your user.js file:

/* smooth scrolling */
user_pref("general.smoothScroll", true);                            // enable/disable smooth scrolling
user_pref("general.smoothScroll.lines", true);                      // enable/disable smooth line scrolling (up/down arrow/page keys)
user_pref("general.smoothScroll.lines.durationMaxMS", 400);         // smooth the start/end of line scrolling operations in ms (up/down arrow/page keys)
user_pref("general.smoothScroll.lines.durationMinMS", 200);         // smooth the start/end of line scrolling operations in ms (up/down arrow/page keys)
user_pref("general.smoothScroll.mouseWheel", true);                 // enable/disable smooth scrolling with mouse wheel
user_pref("general.smoothScroll.mouseWheel.durationMaxMS", 600);    // smooth the start/end of scrolling operations in ms
user_pref("general.smoothScroll.mouseWheel.durationMinMS", 300);    // smooth the start/end of scrolling operations in ms
user_pref("general.smoothScroll.other", true);                      // enable/disable other smooth scrolling (Home/End keys)
user_pref("general.smoothScroll.other.durationMaxMS", 400);         // smooth the start/end of other scrolling operations in ms
user_pref("general.smoothScroll.other.durationMinMS", 200);         // smooth the start/end of other scrolling operations in ms
user_pref("general.smoothScroll.pages", true);                      // enable/disable page smooth scrolling (PgUp/PgDn keys)
user_pref("general.smoothScroll.pages.durationMaxMS", 400);         // smooth the start/end of page scrolling operations in ms (PgUp/PgDn keys)
user_pref("general.smoothScroll.pages.durationMinMS", 200);         // smooth the start/end of page scrolling operations in ms (PgUp/PgDn keys)
user_pref("mousewheel.acceleration.factor", 10);                    // sets acceleration factor if mouse wheel.acceleration.start > -1
user_pref("mousewheel.acceleration.start", 0);                      // when to apply mouse wheel.acceleration.factor (after how many scroll clicks of mouse wheel) - value must be greater than -1
user_pref("mousewheel.default.delta_multiplier_y", 85);             // sets the vertical step size
user_pref("mousewheel.min_line_scroll_amount", 10);                 // if the CSS line height is smaller than this value in pixels, each scroll click will scroll this amount

userChrome.css: Changing how Firefox looks

For customizing the browser interface, 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.

If you’re using Classic Theme Restorer, some of this code may interfere with options in CTR and so you should disable those options in CTR which correspond to the items below if you want to use my code instead. Classic Theme Restorer is a great source for popular and well written CSS code for customizing Firefox. Just download the package and extract it and you’ll find all sorts of goodies.

Move the Status Panel to the top and style it

The Status Panel is the pop-up text you see in the bottom left/right of the browser when you hover over a link. It also displays some information about the page loading process. As i recall, the link target text used to be located in the location bar before the Australis theme changed all that. I’ve always hated that annoying pop-up text appearing at the bottom of the view port (the part of the browser that displays the web page) and so i changed its appearance and location.

The CSS below will move the Status Panel to the top of the view port, make it span the full width, make it appear semi-transparent with a black background and white text and change some other attributes. You can customize it to your liking. At the very least you will probably have to change the pixel setting in the top property to get the Status Panel to appear where you want it vertically. If you like the appearance of the Status Panel but prefer to keep it on the bottom of the view port, just delete the line beginning with top:.

/* move status panel to top and style it */
statuspanel {
    top: 76px !important; /* distance from top of browser, not from top of viewport */
    z-index: 999 !important;
    width: 100% !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(182,182,182,1.0) !important;
}
.statuspanel-label {
    background-color: rgba(0,0,0,0.5) !important;
    color: white !important;
    font-size: 13px !important;
    font-family:"DejaVu Sans Mono";
    width: 100% !important;
    margin: 0 !important;
}
/*
 * uncomment the below code (remove the first /* and the last */) if you want to change font and background colors for different status individually
*/
/*
statuspanel[type="overLink"] .statuspanel-label {
    background-color: rgba(255,255,255,0.85) !important;
    color: darkblue !important;
}
statuspanel[type="status"] .statuspanel-label[value^="Looking"] {
    background-color: rgba(0,0,0,0.5) !important;
    color: white !important;
}
statuspanel[type="status"] .statuspanel-label[value^="Connect"] {
    background-color: rgba(0,0,0,0.5) !important;
    color: white !important;
}
statuspanel[type="status"] .statuspanel-label[value^="Waiting"] {
    background-color: rgba(0,0,0,0.5) !important;
    color: white !important;
}
statuspanel[type="status"] .statuspanel-label[value^="Transfer"] {
    background-color: rgba(0,0,0,0.5) !important;
    color: white !important;
}
*/

Reduce navigation bar icon spacing

Reduce the horizontal space between the icons on the Navigation Bar. Adjust the -3 parameters to your liking.

/* reduce spacing between navigation bar icons */
@-moz-document url("chrome://browser/content/browser.xul") {
    #nav-bar toolbarbutton {
        margin-left: -3px !important;
        margin-right: -3px !important;
    }
}

Remove “Get Add-Ons” menu item from the add-ons panel

/* remove the Get Add-Ons button in the sidebar */
@-moz-document url("about:addons") {
    #category-discover {
      display: none !important;
    }
}

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.

/* adjust spacing between bookmark menu items */
.sidebar-placesTree treechildren::-moz-tree-row {
    height: 1.2em !important;
    border-width: 1px !important;
}

Remove the “Get Add-Ons” button in the add-ons sidebar

/* remove the Get Add-Ons button in the sidebar */
@-moz-document url("about:addons") {
    #category-discover {
      display: none !important;
    }
}

Add-On: Sidebar List

If you happen to be using the Sidebar List add-on, you’ll find that the minimum width that can be set for the sidebar switch is 1 pixel. If you set it to 0, the switch simply won’t work. I didn’t want to see the switch at all, but i wanted it to work when i clicked on it. Here’s how to do it (credit goes to ‘Infocatcher‘, the developer of Sidebar List):

/* Add-On: Sidebar List - hide the sidebar switch */
#sidebarsList-splitter {
    opacity: 0;
    min-width: 1px !important;
    margin-right: -1px !important; /* Should be the same as "min-width" */
}

userContent.css: Changing how websites look

For customizing the appearance of a website, you will need to know how to create and edit a userContent.css file if you haven’t already got one.

Override text selection/copying for sites that prevent it

In an arcane effort to prevent copying text, some websites will try to stop 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
}

Hide the Sync tab in Firefox Preferences

Don’t use Sync? Here’s how to hide the Sync tab in the Firefox Preferences UI:

/* hide Sync tab in Preferences */
@-moz-document url("about:preferences") {
    #category-sync { display: none !important; }
}

Fixes: Possible solutions for stuff that’s broken

Firefox doesn’t remember its last size

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 slightly easier to fingerprint. 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, i can’t help you, but you should consider setting it to true.
  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 anywhere in the Firefox window.
  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 and close the window.
  10. Restart Firefox to test if the fix worked. If it doesn’t, let me know in the comments.

Removing the Firefox title bar on Linux KDE – alternative methods

One of the issues i had when i scrapped Windows and installed Linux Mint was that i missed how easy it was to hide the Firefox window title bar in order to gain that extra bit of vertical real estate under Windows. With Mint and the KDE desktop environment i found several options to accomplish a similar result, but i liked none of them and so off i went seeking a better alternative.

Most of the the options i found either advised to install the Hide Caption Titlebar Plus extension for Firefox, which works on Linux, more or less, or to apply a custom window style using the Window Actions and Behavior settings in KDE (System Settings > Workspace > Window Management on Mint 18.x). The problem with the former is that it is hugely bloated with options i don’t use nor want and it didn’t produce a very nice looking result, plus i prefer to do things without installing more Firefox extensions when possible. The problem with the latter option is that, while it is indeed trivial to remove the Firefox window title bar using the Window Management tool provided by KDE, this left me with a borderless window that couldn’t be resized when it wasn’t maximized.

By accident i stumbled upon what i personally think is a better solution while playing with the KDE Window Decorations utility in System Settings > Appearance > Application Style > Window Decorations settings and no additional software or configuration tweaks were needed.

System Settings - Application Style
click to enlarge

On the Theme tab of the Window Decorations utility, you’ll see the previews of whatever window themes you have installed. In Mint 17.x/18.x with KDE, i think the defaults are Breeze and Plastik.

Window Decorations - Theme
click to enlarge

For this to work, you have to be using the Breeze theme or another one that supports windows-specific overrides (the Plastik theme does not, nor do any of the custom themes i tried). Using Breeze as the example, if you click on the little tool icon on the lower-left of the theme preview, you’ll get a menu which opens the settings for the theme.

Window Decorations - Theme Settings
click to enlarge

On the Windows-Specific Overrides tab you can add a couple of window specific styles for a given window, or even all windows if you want. The only two options are to change the border size and hide the title bar. These options are not nearly as comprehensive as those found in the System Settings > Workspace > Windows Management > Window Rules utility, but the difference between the two is that, as previously mentioned, you lose the window border and thus the ability to resize the window with the mouse when removing the title bar using the Window Rules utility, while you retain the window border when using the Windows Decorations utility.

So to accomplish what we want, simply click that little tool icon on the window theme preview and switch to the Windows-Specific Overrides tab. From here, click Add and a utility to identify the window for which you want to remove the title bar will be displayed.

Breeze System Settings - Add

In this window you have two options; you can either set the Matching window property to Window Title or Window Class Name. I recommend you select the Window Class Name option (if you don’t, you’ll eventually figure out why i recommend this option). In the Regular expression to match field, enter Navigator Firefox (in the image below i use Navigator Waterfox because i use Waterfox). In the next section you can enable or disable the window border size option if you want, but most importantly you’ll want to select the Hide window title bar option, then click “OK” and “Apply” and you’re done with this part.

KDE: Window-Specific Overrides

The caveat with this method verses using an extension, is that we lose our browser window exit, restore and minimize window controls and so you’ll have to get used to exiting Firefox using another method such as a keyboard shortcut or a menu item, but what i prefer is to simply middle-click the task bar icon to close windows. This is easily accomplished by right-clicking any task bar icon and selecting the Task Manager Settings menu item, then setting the On middle-click option in the General section to “Close Window or Group”. Note that i personally do not group windows.

Task Manager Settings - Plasma
click to enlarge

Returning to Firefox, you may still have a bit of a problem in that you will need a way to drag the window so we can restore (un-maximize) it, resize it and move it around since our title bar is now gone. My solution was to simply add a bit of fixed space to the end of the tab bar (i set tabs to be on top). This is really only needed when you have enough tabs open so as to fill the space on the tab bar. I suppose there are a couple of ways to accomplish this, including a userChrome.css hack, however the easiest way is to put the browser in customize mode and drag one or more fixed-width spaces to wherever you want on the tab bar.

Mozilla Firefox - Add Static Space
click to enlarge

So hopefully you now have an easy way to exit, move and resize Firefox, along with a bit more screen real estate, and it can all be done without having to edit a single configuration file.

More Firefox stuff

Other articles and tutorials i’ve written regarding Firefox and its derivatives:

Leave a Reply

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