Flattening JS Arrays

Just posting this random off-topic bit of code here because when I went Googling for this, the only thing I found was an NPM package, which is way overkill here.

JavaScript just recently got a couple new Array methods in ES9 (or around thereabouts). Array.flat(depth) to flatten multidimensional arrays and Array.flatMap(callback), which does Array.map(callback) followed by Array.flat(1) (potentially more efficiently done than manually chaining the functions). These methods are currently available in Mozilla Firefox 62+ and Google Chrome 69+, however I wanted to be able to use it in current Firefox 60 or 61 (ESR and main releases, respectively). So, polyfill time, but the alternatives currently on MDN are not quite as good/simple as I want, so I wrote my own. I also feel like using reduce as they suggest could be worse for performance in many cases, whereas my version only has a single concat call per flatten level (I’ve not done any significant perf testing here, though). Near as I can tell, the below polyfill should match the specification’s behavior, save for extra error handling details.

// Polyfill for new ES9 Array method (Firefox 62+)
if (!this.Array.prototype.flat)
this.Array.prototype.flat = function(depth=1) {
if (depth < 1)
return Array.from(this);
const flattened = [].concat(...this);
return (depth > 1 && flattened.some(Array.isArray)) ? flattened.flat(depth-1) : flattened;

// Polyfill for new ES9 Array method (Firefox 62+)
if (!this.Array.prototype.flatMap)
this.Array.prototype.flatMap = function(mapFn) {
return this.map(mapFn).flat(1);

(apologies for WordPress not wanting to show indentation correctly here…)

There’s too little code for me to consider anything here being deserving of any legitimate copyright, but I’ll officially declare the above public domain, nonetheless. (code comments indicating the source of reused code are generally good practice, but not required, of course) If you find this useful somehow, noting so in a comment below would be appreciated.


Issues with Flagfox 5.0 under certain themes

Apparently the default Mac OS X Firefox theme is squishing the icons a little bit. The different OSes have varying theme characteristics in the current version of Firefox. This is a pain in the ass for development, especially because I don’t own a Mac. I had about 200 beta testers for a month or so, but nobody noticed the subtle issue. I’m looking into a way to fix it at the moment.

Some people also do not like the light flag border when using a dark theme. I tested this before the release and thought it looked OK, but I don’t use dark themes personally. The 5.0.1 update has an updated border that will use a dark border under dark themes, so it will be less noticeable.

Also previously noted is that if you use a lightweight theme (wallpaper/skin/Persona) under Linux (or possibly some other OSes, but not Windows) then Firefox applies an unfocused effect to your interface. If you click the address bar and the flag icon gets lighter, it’s because of your theme. Under Windows this only affects the background and not the icon. There is no way to override this effect for just Flagfox; it affects everything, including search plugin icons. I was well aware of this effect before the release, as I am on Linux myself, however I don’t personally have an issue with it. If you do, you can disable it with the following userChrome.css:

.searchbar-textbox:-moz-lwtheme:not([focused="true"]) {
    opacity: 1 !important;

A fix for the border issue has been released in Flagfox 5.0.1.

Customizing the Flagfox icon style

Previously, in Flagfox 4.2, we had two different flag icon sets. Neither was perfect; both had different issues. The primary one was stylized with a gloss effect. The secondary one was stylized to be brighter. Both were too small, and the secondary one was actually upscaled. Aspect ratios were a mess and the colors were not always just stylized; sometimes they were just wrong. Both had plenty of missing and out-dated flags, and neither flag set is maintained by their creators anymore.

With Flagfox 5.0, I set out to fix this by creating a new flag icon set based on the public domain works from Wikimedia Commons. Both old sets have been retired. The new set now has flags using the correct aspect ratios and exact colors that the flags are supposed to have. They’re also a little bigger, so you can now actually tell what they all are. 😉

For users who like extra customization or use special themes and would like to tweak the style, there are a couple of ways you can go about customizing the flag icon style in Flagfox 5+.
Continue reading

Converting an old overlay-based Firefox extension into a restartless addon

Converting an old overlay-based Mozilla Firefox extension of non-trivial complexity into a restartless addon used to be impractical. When restartless addon support was added in Firefox, quite frankly, it was a partially implemented mess. Bugs have been filed and fixed over the years, sometimes taking forever to see any progress, some not at all. I took a stab at converting Flagfox into a restartless addon around Firefox 10.0 and found it to still be impractical at the time. My second attempt was last month, and I’ve got a Flagfox beta up and running that is restartless (and extractionless). There aren’t really that many good sources of information on how to make this transition online, and it’s easy to think it’s still not practical. What follows is an attempt to remedy this a little bit.

An updated version of this guide is available on MDN, and will be updated as needed.
Continue reading