Floating scrollbars in Firefox

scratchpad.js

/**
 * How to have floating scrollbars in Firefox (Linux, Windows & Mac).
 * Screenshot: http://i.imgur.com/bn44L.png
 * You need Firefox > 18. Just run this code in a browser-scratchpad:
 *
 * Ping me on Twitter (@paulrouget) if you run into problems. 
 *
 * 1. Go to about:config - Set devtools.chrome.enabled to true
 * 2. Starts Scratchpad (Shift-F4)
 * 3. In Scratchpad's menubar, check "Environment > Browser"
 * 4. Past this whole code
 * 5. In Scratchpad's menubar, click "Execute > Run"
 *
 * If you restart Firefox, you'll need to re-do these steps.
 * You will find bugs.
 * The scrollbars style is very basic (grey, doesn't fade out).
 * For osx, we are working on an actual fix (see bug 636564).
 *
 * Someone should build an addon.
 * 
 */

let sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService);
let url = Services.io.newURI("chrome://browser/skin/devtools/floating-scrollbars.css", null, null);
sss.loadAndRegisterSheet(url, 0);
let root = document.documentElement;
let display = root.style.display;
root.style.display = "none";
window.getComputedStyle(root).display; // Flush
root.style.display = display; // Restore

The clickable area doesn't touch the window border, so it's not possible to scroll a fullscreen window by clicking at the screen edge. A bit of an usability problem. Seems to work fine otherwise. (FF18, Linux)

This will break the layout of dropdown menu of awesome bar

It's invisible if the website has a black background.