How To Tweak Firefox’s User Interface

Firefox Quantum has made a clean break from Firefox’s legacy addons. Hooray!

A casualty of this change is the ability to have addons that fundamentally alter Firefox’s user interface. This can be a problem if you depended on this for accessibility needs. Say, you had an addon that enlarged the fonts in Firefox’s chrome.

Luckily, not all is lost. With some CSS knowledge, you can customize the Firefox user interface as much as you need. Simply drop some CSS rules into $PROFILE/chrome/userChrome.css.

Here is an example rule that employs large yellow on black text:

* {
  font-size-adjust: 0.75 !important;
  background-color: #000 !important;
  color: yellow !important;
}

The effect on Firefox will be dramatic:

Restylized user interface with yellow on black text

Note, this will break things, and it will not be perfect. Before using this kind of solution check what accessibility features your platform provides.

How To Tweak Firefox’s User Interface

Phoropter: A Vision Simulator

After porting Aaron’s NoCoffee extension to Firefox, I thought it would be neat to make a camera version of that. Something you can carry around with you, and take snapshots of websites, signs, or print material. You can then easily share the issues you see around you.

I’m calling it Phoropter, and you can see it here (best viewed with Chrome or Firefox on Android).

I could imagine this is what Pokémon Go is like if instead of creatures you collected mediocre designs.

Say you are looking at a London Underground map, and you notice the legend is completely color reliant. Looking through Phoropter you will see what the legend would look like to someone with protanopia, red-green color blindness.

Screenshot (Nov 2, 2017 2_10_50 PM)(1)

You can then grab a snapshot with the camera icon and get a side-by-side photo that shows the difference in perception. You can now alert the transit authorities, or at least shame them on Twitter.

A side-by-side snapshot of the London Tube's legend with typical vision on the left and protonopia on the right

Once you get into it, it’s quite addicting. No design is above scrutiny.

A page from a workbook displayed side-by-side with typical and green-red blindness.

I started this project thinking I can pull it off with CSS filters on a video element, but it turns out that is way to slow. So I ended up using WebGL via glfx.js. Tried to make is as progressive as possible, you can add it to your home screen. I won’t bore you with the details, check out the source when you have a chance.

There are still many more filters I can add later. In the meantime, open this in your mobile browser and,

Collect Them All!

Phoropter: A Vision Simulator

NoCoffee: Visual Impairment Simulator

Four years ago, on a snowy February day, Aaron Leventhal huddled in his unheated home and created a Chrome extension called NoCoffee. This extension allows users to experience web content through different lenses of visual impairments*.

I recently ran across this extension again, and thought it is high-time we ported it to Firefox. Firefox’s support of WebExtension standards means that this should be trivial. It was! With Aaron’s permission, I posted the source to github and did some tweaking and cleanup.

You can now try out the extension in Firefox!

* Not medically or scientifically accurate.

NoCoffee: Visual Impairment Simulator

Firefox’s Accessibility Preferences

If you use Firefox Nightly, you may notice that there is no more Accessibility section in the preferences screen, this change will arrive in Firefox 56 as part of a preferences reorg. This is good news!

Screenshot of the new "Browsing" section, which includes scrolling options as well as search while you type and cursor keys navigation.

Cursor browsing and search while you type, are still available under the Browsing section, as these options offer convenience for everybody, regardless of disability. Users should now be able to find an option under an appropriate feature section, or search for it in the far upper corner. This is a positive trend, that I hope will continue as we imagine our users more broadly with a diverse set of use-cases, that include, but are not exclusive to disability.

Thanks to everyone who made this happen!

Firefox’s Accessibility Preferences

Dark Windows for Dark Firefox

I recently set the Compact Dark theme as my default in Firefox. Since we don’t yet have Linux client-side window decorations yet (when is that happening??), it looks kind of bad in GNOME. The window decorator shows up as a light band in a sea of darkness:

Firefox with light window decorator

It just looks bad. You know? I looked for an addon that would change the decorator to the dark-themed one, but I couldn’t find any. I ended up adapting the gtk-dark-theme Atom addon to a Firefox one. It was pretty easy. I did it over a remarkable infant sleep session on a Saturday morning. Here is the result:

Firefox with dark window decorator

You can grab the yet-to-be-reviewed addon here.

Dark Windows for Dark Firefox