Tag Archives: firefox

Publishing a Firefox add-on without using addons.mozilla.org

A couple of days ago Tom Dale published a post detailing the issues the Ember team are having with getting the Ember Inspector add-on reviewed and approved.

It left me wondering if there would not be any other way to publish add-ons on a different site. Knowing Mozilla, it would be very weird if add-ons were “hardcoded” and tied only and exclusively to a mozilla.org property.

So I asked. And I got answers. The answer is: yes, you can publish your add-on anywhere, and yes your add-on can get the benefit of automatic updates too. There are a couple of things you need to do, but it is entirely feasible.

First, you need to host your add-on using HTTPS or “all sorts of problems will happen”.

Second: the manifest inside the add-on must have a field pointing to an update file. This field is called the updateURL, and here’s an example from the very own Firefox OS simulator source code. Snippet for posterity:

<em:updateURL>@ADDON_UPDATE_URL@</em:updateURL>

You could have some sort of “template” file to generate the actual manifest at build time–you already have some build step that creates the xpi file for the add-on anyway, so it’s a matter of creating this little file.

And you also have to create the update.rdf file which is what the browser will be looking at somewhat periodically to see if there’s an update. Think of that as an RSS feed that the browser subscribes to ;-)

Here’s, again, an example of how an update.rdf file looks like, taken from one of the Firefox OS simulators:

<?xml version="1.0" encoding="utf-8"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:extension:fxos_2_2_simulator@mozilla.org">
<em:updates>
<Seq><li>
<Description>
  <em:version>2.2.20141123</em:version>
  <em:targetApplication>
  <Description>
    <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
    <em:minVersion>19.0</em:minVersion>
    <em:maxVersion>40.*</em:maxVersion>
    <em:updateLink>https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/2.2/mac64/fxos-simulator-2.2.20141123-mac64.xpi</em:updateLink>
  </Description>
  </em:targetApplication>
</Description>
</li></Seq>
</em:updates>
</Description>
</RDF>

And again this file could be generated at build time and perhaps checked in the repo along with the xpi file containing the add-on itself, and served using github pages which do allow serving https.

The Firefox OS simulators are a fine example of add-ons that you can install, get automatic updates for, and are not hosted in addons.mozilla.org.

Hope this helps.

Thanks to Ryan Stinnett and Alex Poirot for their information-rich answers to my questions–they made this post possible!

Using the Firefox Developer Edition dark theme with Nightly

With a recent version of Nightly, go to about:config and set browser.devedition.theme.enabled to true.

Open DevTools (I use alt + cmd + i, or you can also go to the Tools → Web Developer → Toggle tools menu). Then open DevTools preferences by clicking on the gear icon, and select “Dark Theme” on the top right, underneath the Themes.

Screenshot for clarification:

nightly with dev edition theme

Note: you might not get the full effect if there is “legacy stuff” in your profile. If it doesn’t look as you expect… your best option might be to just create a new profile when you start the browser.

Note 2: for some reason the tabs weren’t rendering correctly on my normal nightly profile because the about:config browser.tabs.drawInTitlebar entry was set to false instead of true—I set it to true and now everything looks fine for me.

Or just use the standard Firefox Developer Edition if you’re not an impatient person like me :-P

Tools for the 21st century musician

That is the title of the talk I gave yesterday at Full Frontal in Brighton. The video is still not out but here are the slides (and the source for the slides, with all the source for the examples).

If you were in my Web Audio workshop in Berlin, this talk followed the same style, except I refined some points and sadly forgot a couple. I also showed the Web Audio Editor in Firefox DevTools, which I didn’t in Berlin because Jordan was going to talk about it after me.

I had a little bit of a surprise at the end of the talk, when I “presented” for the first time a little project we’ve been working on for a while: OpenMusic. And I have “quoted” the presented word because the work has always been in GitHub in the open, so if you followed me in GitHub you might have seen all the repos popping up and wonder what the hell is Sole doing lately.

So, just in case you weren’t in the conference, OpenMusic aims to be a nice collection of interoperable/reusable Web Audio modules and components. This is an idea that Angelina sort of had when they saw my audio tags talk last year, and has been brewing in the back of our minds until a couple of months ago when the A-HA! moment finally happened.

And so I’ve been pulling apart components and pieces from my existing Web Audio-based code, because I realised I was doing the same thing over and over and I wanted to do new things but I didn’t want to do the same thing yet again. So, small npm based modules it is. And a bunch of them!

I’m a bit short on time lately (and I’m being very generous on this description), so some of the modules are a bit too rushed and a tad obscure, but they should work and have some minimal documentation already, and they’ll get better. Be kind while I deconstruct my hacks–or better yet, start deconstructing yours too! =)

Thanks to Remy for inviting me to this ultra cool conference… and accidentally triggering the A-HA moment!

Native smooth scrolling with JS

There’s a new way of invoking the scroll functions in JavaScript where you can specify how do you want the scroll to behave: smoothly, immediately, or auto (whatever the user agent wants, I guess).

window.scrollBy({ top: 100, behavior: 'smooth' });

(note it’s behavior, not behaviour, argggh).

I read this post yesterday saying that it would be available (via this tweet from @FirefoxNightly) and immediately wanted to try it out!

I made sure I had an updated copy of Firefox Nightly—you’ll need a version from the 28th of October or later. Then I enabled the feature by going to about:config and changing layout.css.scroll-behavior.enabled to true. No restart required!

My test looks like this:

native smooth scrolling

(source code)

You can also use it in CSS code:

#myelement {
  scroll-behavior: smooth;
}

but my example doesn’t. Feel like building one yourself? :)

The reason why I’m so excited about this is that I’ve had to implement this behaviour with plug-ins and what nots that tend to interfere with the rendering pipeline many, many times and it’s amazing that this is going to be native to the browser, as it should be smooth and posh. And also because other native platforms have it too and it makes the web look “not cool”. Well, not anymore!

The other cool aspect is that it degrades great—if the option is not recognised by the engine you will just get… a normal abrupt behaviour, but it will still scroll.

I’m guessing that you can still use your not-so-performant plug-ins if you really want your own scroll algorithm (maybe you want it to bounce in a particular way, etc). Just use instant instead of smooth, and you should be good to go!

SCROLL SCROLL SCROLL SCROLL!

Update: Frontender magazine translated this post to Russian.

MozFest 2014, day 2

As I was typing the final paragraphs of my previous post, hundreds of Flame devices were being handed to MozFest attendees that had got involved on sessions the day before.

When I arrived (late, because I felt like a lazy slug), there was a queue in the flashing station, which was, essentially, a table with a bunch of awesome Mozilla employees and volunteers from all over the world, working in shifts to make sure all those people with phones using Firefox OS 1.3 were upgraded to 2.1. I don’t have the exact numbers, but I believe the amount was close to 1000 phones. One thousand phones. BAM. Super amazing work, friends. **HATS OFF**

Continue reading