Making custom homescreens in FirefoxOS 2.6 - novia713/tilescreen GitHub Wiki

Making custom homescreens in FirefoxOS 2.6

leandro713 [email protected] 2016

So you want to do your custom homescreen?

Ok, i'll show you how :) First thing we need to do is showing up the icons of your installed apps. Usually people expects to see the icons of their installed apps in a scrolling layer or in any another way of presentation.

In the past, prior to firefoxOS 2.6, we did custom homescreens as "certified" apps because the permissions needed. But this made your custom homescreen useless for the marketplace and people would fear (possible implications) of certified permissions in an app of yours ....

But, suddenly, in fxos 2.6 had appear a new permission («homescreen-webapps-manage») which allows you to do your custom homescreen as "privileged". That's a better thing ! :)

So, after you put that permission in your manifest.webapp, you need to get all the apps installed for printing them in your screen. Good news, you can do it with:

navigator.mozApps.mgmt.getAll()

you can see a working example at https://github.com/novia713/smokingtedscreen/blob/master/js/apps.js#L193

Once we get an array of results (it's a promise) we want to render to our screen each icon with its app name. We can do this easily in a loop for each element of the resulting array. Into the loop you can find the name as app.manifest.name For the icon, there is a determined method gives us the desired icon in Blob format:

navigator.mozApps.mgmt.getIcon(app, size)

It accepts a first parameter which represents the element to get the icon from and the size you need to print the image. Perhaps you're printing small icons, so give it a size of 36 or 42. Or maybe you are doing a extra-big-icons theme, so you can give this function a size of 128. The function is smart enough to give you an approximated size icon, just in case the exact desired size doesn't exist.

As i stated before, you'll get a blob. For printing it you can use

window.URL.createObjectURL( img )

where img stands for the blob. You can assign directly this to img.src or img.style.background, as you want.

That's pretty much all. You only need to print this as we just saw in the way you want, in a vertical layer, as it has been said or in whatever way you imagination allows you to do it :D

For a complete reference please refer to where i did a working example.