Category Archives: Tech

Articles about software and technology

New article: Firefox User Interface Customization

I started a new article titled Firefox User Interface Customization which is a work in progress. At this point there is only a few of CSS code samples for customizing Firefox and its derivatives, but i expect it will grow to include a lot more. The code will work with Waterfox as well, which i know because that’s what i’m currently running.

The transition from XUL to WebExtensions for Firefox add-ons is not going smoothly at all in my case and this is one reason i ditched Firefox and started running Waterfox, the latter of which is a bit more focused on privacy as well as continued support for XUL (legacy) extensions of which i have several that are simply not replaceable at this point. I think the biggest problem with the move to WebExtensions is the limitations in the API and i think it’s a [yet another] mistake by Mozilla to drop support for legacy extensions with the upcoming version of Firefox 57 given that their API seems to be only half-baked. I might have tried Pale Moon, except they apparently have no plans to support WebExtensions whatsoever. I suspect this might come back to bite them in the ass since i’m sure that the vast majority of Moon users get their add-ons from Mozilla and many of those developers seem to be abandoning the legacy extensions that Pale Moon depends on.

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

Disappearing tool-bar and Start Panel icons

In the address bar, enter about:config and press Enter, then in the search box enter extensions.databaseSchema and, lastly, right-click this preference and click Reset. Restart Firefox.

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:

‘Firefox Configuration Guide for Privacy Freaks and Performance Buffs’ article updated

The Firefox Configuration Guide for Privacy Freaks and Performance Buffs article has been updated with further information regarding IndexDB storage and how to control it. The way that Firefox currently handles IndexDB storage is absolutely terrible in my opinion in that there is no easy way to remove it from the Firefox UI, such as by clearing the browser history. This local storage, which can eat up your drive space with 10’s of megabytes of data per domain, is a threat to personal privacy and can be used to fingerprint your browser by the domain that stored the data.

The Pirate Bay and its cryptocurrency mining script – why this might be the best thing since DOOM

People are now creating scripts to mine cryptocurrencies using your computing power while you visit any websites which employ these scripts. I first learned about this when The Pirate Bay used such a script in certain sections of their website.

This is an extremely interesting development and it will be just as interesting to see how wide-spread it becomes. Just days after TPB was found running such a script, there was already a cryptocurrency miner WordPress plug-in on wordpress.org with 300+ active installs as of Sep. 27, 2017.

At first i categorized this as outright malware and, in fact, i would say this was accurate in the case of The Pirate Bay when they introduced it secretively and didn’t make it an opt-in option for its users. It also appears that ad-blockers, including uBlock Origin, as well as anti-virus software vendors, are targeting these mining scripts. After giving it some thought however, this seems like it might be an excellent way for independent journalists and others to generate some “cash” to support their work whilst dumping, or at least cutting back on their intrusive ads.

The company apparently responsible for all the hub-bub is Coinhive and, frankly, i very much like what they have to say about their cryptocurrency miner. There are millions of people — me being one of them — running ad-blockers to remove all the in-your-face garbage that people and corporations use to monetize their websites and the service offered by Coinhive could be a revolution in this regard in that everyone, from the Google’s of the world to individuals like yourself, could monetize websites and services with cryptocurrency miners that are virtually transparent to their visitors. I say “virtually” because i think it is absolutely critical that such mining scripts only run if the visitor chooses to run them. Apparently Coinhive feels the same way. Here’s some comments from the Coinhive blog:

Our goal was to offer a viable alternative to intrusive and annoying ads that litter so many websites today. These ads are not only a distraction to end users, but also provide notoriously unpredictable and non-transparent revenue numbers. We set out to change that.

[…]

We’re a bit saddened to see that some of our customers integrate Coinhive into their pages without disclosing to their users what’s going on, let alone asking for their permission. We believe there’s so much more potential for our solution, but we have to be respectful to our end users.

[…]

It’s probably too late to do anything about the adblockers that already prevent our current JavaScript from loading. Instead, we will focus on a new implementation that requires an explicit opt-in from the end user to run. We will verify this opt-in on our servers and will implement it in a way that it can not be circumvented. We will pledge to keep the opt-in in tact at all times, without exceptions.

I like their ethics and motivation for creating this service. Their privacy policy is also very good, at least for the time being.

Right now i’m blocking these scripts, but hopefully this will change in the future.

Update: Firefox Configuration Guide for Privacy Freaks and Performance Buffs

The article, Firefox Configuration Guide for Privacy Freaks and Performance Buffs, has heavily been updated with new information while other parts were edited to bring the information up to date. The most important changes include the addition of two sections, one dealing with how to sanitize the default search engines that ship with Firefox and another which details how to remove unwanted system add-ons which are packaged with the browser and install themselves without prompting the user.

I am currently testing Waterfox with the guide and so far, so good. Waterfox is a 64 bit web browser for Linux, Mac and Windows that, though based on Firefox, is more privacy-centric than Firefox. Its features include the removal of Telemetry and Pocket, as well as other methods which collect user data.