Planet Firefox OS

April 27, 2016

Firefox OS – Firefox OS und Ich

Gerücht: Acadine stellt H5OS ein

Heute habe ich in der Mozillians-Telegram-Gruppe erfahren, dass lokalen Nachrichten zufolge Acadine Mitarbeiter entlassen solle. Wer war doch gleich Acadine? Und was sucht das auf einem Blog zu Firefox OS?

Acadine Technologies Logo.png

Wikimedia:
Acadine Technologies Official Website
von Changyu Hu (Public Domain)

Nachdem Mozilla letzten Jahres angekündigt hatte, Firefox OS auf den Connected Devices-Markt (aka IoT, d.h. Internet of Things) auszurichten, waren viele Nutzer sauer. Mich eingeschlossen. Nicht nur sauer, sondern auch frustriert.

Kurze Zeit späterEinige Zeit davor verkündete die chinesische Firma Acadine, den Boot2Gecko-Code zu übernehmen und darauf ein web-basiertes Betriebssystem aufzubauen: H5OS (“HTML 5 OS”). Das Vorhaben wurde mit 100 Millionen USD Wagniskapital finanziert.

Die Idee: Web-Entwickler nicht noch-eine-Sprache aufzuzwingen, wenn sie Apps für das Betriebssystem schreiben wollen.

Zurück zu den Nachrichten.

Peter Chen und Irvin Chen von der Mozilla Taiwan Community waren so freundlich, den Text in’s Englische zu übersetzen.

Demnach käme die Information aus dem oberen Management. Acadine liege im Zwist mit seinem Wagniskapitalgeber Tsinghua Unigroup. Dieser hätte versichert, sich nicht in’s Tagesgeschäft (engl. daily operations) einzumischen und keine Mitglieder in den Vorstand (engl. board) zu entsenden. Kürzlich jedoch habe er verlangt, dass Acadine sich auf den Chinesischen Markt fokussieren solle, während diese dabei waren, sich aus diesem Markt zurückzuziehen. In Folge dessen habe Tsinghua Unigroup die Finanzierung gestoppt und dränge auf Neuverhandlung.

Laut Wikipedia ist Tsinghua Unigroup Teil der Tsinghua Holdings – ein Unternehmen in chinesischer Staatshand mit beschränkter Haftung. Spreadtrum (ein Hersteller von Halbleiter-Bauteilen) ist beispielsweise von ihnen einverleibt worden.

Ich bin gespannt, wie das ausgeht. Ich würde mir schon mehr Konkurrenz auf dem Markt wünschen. Allein schon, damit es nicht wie im Smartphone-Segment nur zwei Player gibt. IoT wird noch genug Probleme bereiten, so dass wir da einen gesunden Wettbewerb benötigen.


April 27, 2016 09:03 PM

January 28, 2016

Firefox OS – Firefox OS und Ich

Firefox OS auf IoT – eine Fehlentwicklung?

Es ist jetzt nun schon keine Neuigkeit mehr – Firefox OS für Smartphones wurde eingestellt. Persönlich demotiviert mich das ziemlich.

Stattdessen soll jetzt auf Connected Devices (auch bekannt als Internet of Things, kurz IoT) umgeschwenkt werden. Sicher, da wird sich einiges tun. Allerdings kann es für Mozilla auch eine Fehlinvestition werden.

Untitled

Flickr: Untitled von Kris Krüg (CC BY-NC-ND)

Wir Entwickler sind meistens gerne für technische Spielereien zu haben. Von daher verstehe ich auch den Reiz an IoT. Ich finde Sphero ja auch eine nette Idee.
Bei Mozilla fing das schon mit dem Port auf Raspberry Pi 2 an.

Daneben wird schon eine ganze Weile für Firefox OS auf Panasonic Smart TVs gearbeitet. Sören berichtete vor zwei Tagen von einer neuen Version.

Allerdings ist die breite Masse ausschlaggebender für den Erfolg einer Maßnahme. Und wenn ich mir jetzt da einmal Feldforschungen zu Smart TVs anschaue, stelle ich fest, dass die Leute keinen Rechner auf ihrem Fernseher wollen. Sie wollen Filme schauen, vielleicht welche streamen. Aber die Eingabemöglichkeiten (lies: Fernbedienung, Sprachsteuerung etc.) sind dermaßen ein Graus, dass es keinen Spaß macht, großartig mit seinem Fernseher zu interagieren. Da helfen dann auch auf Smart TV portierte Spiele wenig, fürchte ich.

Bei Smart TVs ist Mozilla auch wieder spät dran. Wenn man einen Blick auf Google und Apple wirft, erkennt man, dass sie auf ihren für TV portierten Betriebssystemen keinen Webbrowser (mehr) ausliefern. Ich gehe davon aus, dass sie auch zu obigen Schlüssen gekommen sind.

Aber kommen wir weg von SmartTVs. Was gibt es sonst noch an vernetzten Geräten?

Viele werden wohl internetfähige Geräte über einen Rapsberry Pi/Arduino oder Vergleichbares betreiben. (Ich selber hab eines zum Geburtstag bekommen diesen Jahres :-)).

Jetzt ist es natürlich cool, von unterwegs nach Hause telefonieren zu können. Zumindest solange, wie nur wir es können.

Zeit Digital hat diese Woche über Shodan berichtet. Das ist eine Suchmaschine für das Internet der Dinge, die in regelmäßigen Abständen das Internet nach angeschlossenen Geräten abgrast und diese anpingt, um nach weiteren Informationen über sie zu fragen. Im Idealfall sollte das Gerät keine herausgeben. Tun aber erschreckend viele. Weil sie nicht korrekt konfiguriert wurden.

Soll heißen, mit dem Betreiben von internetfähigen Geräten ist auch Know-How verbunden. Hier kann Mozilla punkten.
Aber schaut euch einmal im Freundeskreis um, wie viele nicht einmal ihr Betriebssystem auf dem aktuellsten Stand gehalten bekommen …

Noch schlimmer wird es dann, wenn der Anbieter den Support einstellt (oder per Firmware-Upgrade für Elektro-Schrott sorgt …).


January 28, 2016 09:15 PM

January 14, 2016

Firefox OS – Firefox OS und Ich

Unsignierte Firefox OS-Simulatoren in WebIDE

Nach der Aktualisierung auf Firefox 43 bekam ich die Meldung, dass die Simulatoren-AddOns nicht genutzt werden können, weil sie nicht verifizierbar seien. Da hab ich einmal einen Maintainer drauf angeschrieben. Hier ist die Antwort:

Firefox Developer Edition
Mozilla: Firefox Developer Edition (CC BY-SA)

Die WebIDE sollte die Simulatoren weiterhin laden können. Das Problem sei bekannt und liegt darin begründet, dass der Simulator mit dem Gaia-Profil herumspielt und diese unter dem Extensions-Ordner liegt (und damit die Signatur zerstört).
Momentan (Stand 04. Januar) gibt es aber niemanden, der sich des Problemes annehmen könne. Es tritt auf allen Betriebssystemen auf.

Ansprechpartner ist übrigens nicht mehr Myk Melez (GitHub-Autor des Simulator-Repos), sondern J. Ryan Stinnett (falls ihr eine E-Mail-Adresse suchen wollt). Fand ich jetzt auch nicht auf Anhieb …

Happy hacking. Hoffentlich überlebt das Firefox OS-Projekt noch eine Weile


January 14, 2016 10:17 PM

July 14, 2015

FirefoxOS – William Lachance's Log

Perfherder update

Haven’t been doing enough blogging about Perfherder (our project to make Talos and other per-checkin performance data more useful) recently. Let’s fix that. We’ve been making some good progress, helped in part by a group of new contributors that joined us through an experimental “summer of contribution” program.

Comparison mode

Inspired by Compare Talos, we’ve designed something similar which hooks into the perfherder backend. This has already gotten some interest: see this post on dev.tree-management and this one on dev.platform. We’re working towards building something that will be really useful both for (1) illustrating that the performance regressions we detect are real and (2) helping developers figure out the impact of their changes before they land them.

Screen Shot 2015-07-14 at 3.54.57 PM Screen Shot 2015-07-14 at 3.53.20 PM

Most of the initial work was done by Joel Maher with lots of review for aesthetics and correctness by me. Avi Halmachi from the Performance Team also helped out with the t-test model for detecting the confidence that we have that a difference in performance was real. Lately myself and Mike Ling (one of our summer of contribution members) have been working on further improving the interface for usability — I’m hopeful that we’ll soon have something implemented that’s broadly usable and comprehensible to the Mozilla Firefox and Platform developer community.

Graphs improvements

Although it’s received slightly less attention lately than the comparison view above, we’ve been making steady progress on the graphs view of performance series. Aside from demonstrations and presentations, the primary use case for this is being able to detect visually sustained changes in the result distribution for talos tests, which is often necessary to be able to confirm regressions. Notable recent changes include a much easier way of selecting tests to add to the graph from Mike Ling and more readable/parseable urls from Akhilesh Pillai (another summer of contribution participant).

Screen Shot 2015-07-14 at 4.09.45 PM

Performance alerts

I’ve also been steadily working on making Perfherder generate alerts when there is a significant discontinuity in the performance numbers, similar to what GraphServer does now. Currently we have an option to generate a static CSV file of these alerts, but the eventual plan is to insert these things into a peristent database. After that’s done, we can actually work on creating a UI inside Perfherder to replace alertmanager (which currently uses GraphServer data) and start using this thing to sheriff performance regressions — putting the herder into perfherder.

As part of this, I’ve converted the graphserver alert generation code into a standalone python library, which has already proven useful as a component in the Raptor project for FirefoxOS. Yay modularity and reusability.

Python API

I’ve also been working on creating and improving a python API to access Treeherder data, which includes Perfherder. This lets you do interesting things, like dynamically run various types of statistical analysis on the data stored in the production instance of Perfherder (no need to ask me for a database dump or other credentials). I’ve been using this to perform validation of the data we’re storing and debug various tricky problems. For example, I found out last week that we were storing up to duplicate 200 entries in each performance series due to double data ingestion — oops.

You can also use this API to dynamically create interesting graphs and visualizations using ipython notebook, here’s a simple example of me plotting the last 7 days of youtube.com pageload data inline in a notebook:

Screen Shot 2015-07-14 at 4.43.55 PM

[original]

July 14, 2015 08:51 PM

June 16, 2015

E.J. BLOG » FxOS

[FxOS] Settings App – Call Settings

Call Panel

Screenshots

F1C9BD08-E0FE-4327-8D41-0289D3357DC9

Call Panel

Introduction

Call Settings is one of the most important panel that can let users highly customize their own call related settings like Call Waiting, Call Forwarding … etc. (We will cover each part later) Based on the screenshot above, you can see that for this panel, it’s more like an entry point for every panel and also it will display some useful information taken from hardware.

But when you navigate from this panel to others and navigate back, you may notice that some menu items are disabled at first and you can’t manipulate that. This is not a bug but also quite a feature. By doing so, we can make sure that each time when displaying them, we will always use latest value from hardware to make sure we won’t display some outdated information to mislead users.

Call Voice Mail Settings Panel (Dialog)

Screenshots

7E8274FF-D506-492F-9457-B42CA6A4C049

Call Voicemail Panel

Introduction

For every simcard, there must be a special number that you can dial to set your voicemail number and this is why we need this dialog in Settings App. When showing this dialog, it will try to get preset voicemail number in mozSettings db and show it at first. Here, you may get confused why it can get the right number from db, this is because in settings/js/panels/call/panel.js, we also need to show voicemail number on the menu item, so when trying to initialize the item, we will check whether there is any provided number from mozVoicemail API and store it into db, so that’s why in this dialog, you can get this value from db.

Call FDN Settings Panel

Screenshots

28B3155B-DB63-4498-9586-101599D1A41A

Call FDN Settings Panel

0B2234D7-091F-4ACA-9497-9FBB3D0AC630

Enable / Disable FDN

Introduction

This panel is also an entry point that we can set settings related to Fixed Dialing Numbers. Here, we provide a toggle that you can enable / disable this feature. When clicking on the toggle, it will trigger DialogService to show SimpinDialog which is responsible for all Simpin related operations. This feature will only be enabled / disabled when you successfully type your PIN2 correctly in the dialog.

Call FDN List Panel

Screenshots

8A1982D3-2ACC-46D7-BC38-05E587BD17D2

Call FDN List Panel

568610E8-C6ED-46F5-B2BB-01F1940DAF78

Popup menu when clicking on FDN number

Introduction

Here, in this panel, we will list down all preset FDN numbers in the list. When clicking on any number, we will show an popup for it and you can decide whether to call, edit and delete or not. Same with enable FDN, if you are going to do any operation I mentioned, we will use DialogService to show SimpinDialog to confirm this operation.

For any FDN number, they will all be stored inside your simcard. Sometime, based on your simcard, you may have an upper bound for the number of FDN numbers, but this depended on operators so the number may vary. So, if you hit an error message when creating a new number, you may go into this situation.

Call FDN List Add Panel (Dialog)

Screenshots

10125634-9757-44FA-82A4-252CF2A3B4E9

Call FDN List Add Panel (add mode)

DFD4AD2B-5B62-472F-BB03-5C5062C98E83

Call FDN List Add Panel (edit mode)

Introduction

When clicking on the Add button in Call FDN List Panel, this dialog will pop up and ask users to input preferred name and number for this set of FDN number. Instead of adding, this dialog is also can be reused for editing. Normally there is no specific validation rules for these two fields in our codes, instead, we will pass wrapped object from FdnContext.createAction and pass it to SimpinDialog, it will directly communicate with operator and if there is any error coming up, we will directly report it and display to users.

Call Forwarding Panel

Screenshots

6964464D-617A-4356-8CC4-5E39FADF56E6

Call Forwarding Panel

Introduction

Honestly, Call Forwarding can be the most complex panel in Call Settings (especially before it was refactored), so let me briefly tell you a story behind this panel.

When users click on any menu item and type number for any Call Forwarding option (For this part, please check Call Forwarding Details section), after submitting, we can get wrapped results from the dialog and use call/call_forwarding.js to help us handle this object. After doing some tests, it seems that it is not able to do multi tasks when interacting with Gecko’s API (This should be the problem in modem). So, in order to make anything works perfect, we create another module called CallSettingsTaskScheduler (call/call_settings_task_scheduler.js) inherited from TaskScheduler (modules/base/task_scheduler.js).

TaskScheduler is obvious responsible for handling different tasks and make sure they are all scheduled and can be executed one by one without conflicting each other. While for CallSettingsTaskScheduler, it is just an extended class with some customized TASK_TYPE and error handling.

So back to topic, because we aren’t able to do more than one request on modem each time, we need the help from task scheduler to achieve this. This operation includes get and set, so they all should be scheduled. If we don’t do this in order, modem will directly throw out errors and our request would be dropped and this would make our state inconsistent with hardware.

In addition to this, there is also another special feature that TaskScheduler provides – if there is another same-type task coming up, we will remove queued same-type task and push the new on in the array. By doing so, we can make sure we won’t send outdated request and would always keep the latest one.

And for UI, when modem is busy on handling our operation, we should disable all UIs while normal, we should make them back. So, in panel, we will observe CallForwarding’s internal _state to lock / unlock UI.

For anything else, please check our script.

Call Forwarding Details Panel (Dialog)

Screenshots

CF3AF5AE-E101-4564-B490-624B24F61061

Call Forwarding Details Panel (Dialog)

Introduction

This is the dialog that you can set any number on each Call Forwarding option. Right now, because we do support 4 different options for Call Forwarding but with the same UI, we will reuse this dialog for all of them instead of duplicating many codes. But basically, there is no much logics hidden in this dialog and all what it does is pass the result back to Call Forwarding Panel (Caller) and the caller will do following operations based on returned values.

For more details about how Call Forwarding works internally, please check Call Forwarding Panel section for more details.

Call Barring Panel

Screenshots

5E57AD2D-F02A-46F9-9647-098B898D4993

Call Barring Panel

Introduction

In this panel, you can restrict certain types of outgoing calls and incoming calls. There are no special logics handled in this panel and this can be treated as a toggle that helps you customize your Call settings.

June 16, 2015 10:01 AM

June 15, 2015

E.J. BLOG » FxOS

[FxOS] Settings App – SimCardManager

Simcard Manager

Screenshots

root2

Root panel

SimcardManager2

Simcard Manager

Introduction

After 1.4+, FxOS has started to support DSDS (Dual Sim feature) that you can insert 2 simcards into your FxOS device. By default, because FxOS is a unified OS that should be used in different devices, we will automatically hide this entry point by default if there is no more than one physical simcard slot.

If you check source codes in settings/js/panels/simcard_manager, you would notice that we have sim_ui_model.js and simcard_manager.js. Let me briefly explain the responsibilities of these two different scripts below.

For SimUIModel, this is a abstract interface between hardware information and our UI. Based on UX’s spec, there are so many different scenarios that we have to show / hide some parts of UI like simcard is not inserted, simcard is locked, simcard is blocked …etc. So, that’s why we need SimUIModel to control every sub-states.

While for SimcardManager, it will bridge the internal state of SimUIModel and real UI to make sure what should be hidden and what should be updated. In addition to this, SimcardManager also needs to watch some hardware events (like AirplaneMode, cardstatechange … etc) to update its UI to make sure they do reflect the real status.

In SimcardManager, there are three important select/option called Outgoing Calls, Outgoing Messages and Data. For some apps (like dialer), they will watch these mozSettingsKey to show / hide some hints to users, for example, if you choose Always Ask for outgoing calls, every time when you are trying to dial out a number, it will keep popping up a simcard picker UI so that you can choose which number you are going to use to dial.

But, there is one black magic that you need to keep in mind when you are dealing with these three select/option. In system app, there is one file called sim_settings_helper.js which does lots of works with these three options. Based on UX’s spec, there is a special request that we have to automatically switch options if from 2 simcards to 1 simcard. Interestingly, because from Gaia (including Gecko) aspect, we can’t directly make sure the second card is indeed inserted (We did encountered one edge case that one of colleague’s old simcard is hard to be recognized by our hardware and it takes more than 3 ~ 5 seconds to get its information from Gecko), due to this, sim_settings_helper.js will wait for upcoming event – simslotready from simslot_manager.js to make sure we did wait longer enough for the second card, and we can based on current situation to decided whether to switch option to another card or not.

June 15, 2015 03:26 AM

June 12, 2015

E.J. BLOG » FxOS

[FxOS] Settings App – Wifi

Wifi

Flowchart

Wifi-4

Wifi Panel

Screenshot

44890310-4321-4780-B47D-7C55F31C131E

Wifi Panel (A)

208C8D9A-B39D-4A81-A6C3-19DBAEC8259D

Wifi Panel (B)

Introduction

Wifi panel is the main entry point for the other dialogs / panels. As you may see on the screenshot above, in this panel, users can turn on / off Wifi, decide which AP to connect with and manage certificates or whatever settings related to Wifi.

If you check settings/js/panels/wifi/, you will notice a script which is called wifi_network_list.js. This script is so important that we will use it to generate a list of APs that users can interact with. For example, if you click on any listed AP, it will automatically check its own encryption to show which kind of dialog or just connect to that AP directly.

In addition to this, it will also automatically check its current status from Gecko to see whether it should update its signal / wording … etc. By doing so, we encapsulate all logics within this list and caller doesn’t have to know these details when using it.

Wifi WPS Panel (Dialog)

Screenshot

C6FBDCA2-D54B-4D51-90DC-FDEFA73CEE12

Wifi WPS Panel

Introduction

WPS is another way to connect to AP but this needs some special support from it to make the functionality work. If your AP does support this, users can click on Connect with WPS button to select which way to use to connect with WPS.

From Gaia side, there is no much works here and we simply provide a basic UI for users to choose and configure. So for more details, please go check Gecko’s source code for this part.

Wifi Status Panel (Dialog)

Screenshot

C5B6EB09-BA07-4D67-8684-AD4DDC662D62

Wifi Status Panel

Introduction

When clicking on connected AP in Wifi Panel, this dialog would be popped up to tell users all needed information about this AP including Security, Signal strength, IP address and Link Speed. In addition to this, you can also forget this AP by clicking right-up button.

Wifi Auth Panel (Dialog)

Screenshot

A13A9735-54E0-46A8-9002-688E15DC8097

Wifi Auth Panel

Introduction

If users click on non-connected and encrypted AP from Wifi panel, we will pop up Wifi Auth Panel to users. Compared with non-encrypted AP, normally users have to type password or do some extra pre-settings to connect to this AP.

Wifi Manage Networks Panel

Screenshot

AE570F39-07F3-41A8-BC11-5A02C01939A2

Wifi Manage Networks Panel

Introduction

In this panel, we will list down all connected AP here. If users click on the item, the confirm pop-up will be shown to double confirm whether they really want to remove forget connected AP or not. So for this panel’s code, there is no much complex works but only some UI related stuffs.

Wifi Join Hidden Panel (Dialog)

Screenshot

F8F1053A-C63E-4ED6-804A-596755C6F966

Wifi Join Hidden Panel

Introduction

This panel is pretty simple enough and it will transform all user’s input into a recognizable object for WifiManager. But there is one thing that should be noticed. Because there are some shared UI / logics for users to select security, EAP method … etc across panels (Wifi Auth Panel & Wifi Join Hidden Panel), we have to use a shared script to control them.

But, sadly, because there are still some minor difference between these two pages, in shard script, we will check some element’s existence before manipulating. So please remember to double check UI codes and shard script for this part before adding new rules. Otherwise, you may break another panel.

Wifi Manage Certificates Panel

Screenshot

CAF97E29-4E6B-4921-A4E9-D302DD874DC3

Wifi Manage Certificates Panel

Introduction

If users are trying to connect with AP with WPA-EAP encryption, under some special EAP methods, they need users to provide needed Server Certificates and User Certificates for authentications.

So, if users are trying to connect to AP with these EAP methods, they have to go to this panel and import needed certificates first, otherwise, we can’t find out needed certificates when users are trying to join hidden network.

Wifi Select Certificate File Panel

Screenshot

2E3A5B59-0C08-444B-A12F-AEEDAA211886

Wifi Select Certificate File Panel

Introduction

In this panel, we will list down all possible certificates from SD card and present them to users. When clicking on these items, we will redirect them to Wifi Enter Certificate Nickname Panel.

Wifi Enter Certificate Nickname Panel (Dialog)

Screenshot

D1A80F77-1DC3-42E8-AC72-B6FC88C65FA0

Wifi Enter Certificate Nickname Panel

Introduction

After selecting needed certificate from Wifi Select Certificate File Panel, users will be redirected to this dialog. In this dialog, users can decide whether to rename this certificate or not. Interestingly, if you already have one certificate named with the same name, you are not allowed to name it again because Gecko would throw out some error in this special case.

June 12, 2015 04:20 AM

June 08, 2015

E.J. BLOG » FxOS

[FxOS] Settings App – AirplaneModeHelper

AirplaneModeHelper

Flowchart

AirplaneModeHelper

Screenshots

root2

 Setting’s root panel

Introduction

For developers, AirplaneMode is a complicated service that has deep relationships between different services like Bluetooth, Wifi and MobileConnections. Because these services are all related to hardwares, there must be some round-trip time that you have to wait. In order to make these operations encapsulated, they are all handled in system/js/airplane_mode.js. and we think the other apps should just use a trigger to tell System app to do following works.

But due to the restriction that we can’t easily communicate across apps easily, we have to use some internal settings key to communicate. But in order to make sure other apps won’t directly manipulate the communication key that would break the other apps, we think the better way is to design an unified helper for everyone to use, and all these details will be hidden within APIs which it exposes and that’s why we need AirplaneModeHelper (its abbreviation would be AMH, and related file would be shared/js/airplane_mode_helper.js).

If you check below flowchart, you can notice that there are some useful API like ready(), setEnabled(), getStatus(), addEventListener() and removeEventListener() that you can use to build up your business logics. Take Settings app for example, there is a toggle in its root panel and users can click on it to enable / disable AirplaneMode, we use AMH to manipulate it and make sure we will block UI when enabling/disabling and unblock UI when enabled/disabled.

So with AMH, you can do whatever you want which relates to AirplaneMode, while for more details, please check its source code and flowchart below.

June 08, 2015 10:01 AM

[FxOS] Settings App – DialogService v.s. DialogManager

Image Credit

settings

DialogService

Flowchart

DialogService-3

DialogService focuses on controlling states between dialogs, it will make sure every time there is only one dialog showing up on the screen and for the others, they will be queued as an internal state and will be executed one by one when current dialog is dismissed.

Right now we support 4 different types of dialogs, AlertDialog, ConfirmDialog, PromptDialog and PanelDialog in DialogService.

For the previous three dialogs, they are used as a substitution of native alert, confirm and prompt API with predefined layout based on UX’s spec. While for PanelDialog, you can define your own dialog with pre-defined interface and DialogService will help you show it with all necessary callbacks are bounded on UI.

While for lifecycle of dialogs, they are all handled in DialogManager and please go check related documentation for this part.

DialogManager

DialogManager-2

DialogManager is a manager that mainly focuses on controlling the whole life cycle of each dialog. It will load panel, initialize panel, use pre-defined transition to show panel when DialogManager.open() is called. While for DialogManager.close(), it will find out which panel is going to be closed, validate the result of onSubmit() or onCancel(), and use pre-defined transition to hide panel.

Basically, this DialogManager will be only used accompanied with DialogService. If you want to know more details about how they are communicated with each other, you can go check settings/js/modules/dialog_service.js for more details.

June 08, 2015 03:18 AM

June 05, 2015

E.J. BLOG » FxOS

[FxOS] Settings App – Dialog v.s. Panel

fxos

In Settings app, we have two different concepts – one is Dialog while the other one is Panel. The main difference between them is how they are presented. From UX spec, if we need users to do some actions and then submit, normally they will be presented with Dialog with cancel and submit button. While for Panel, it is just a simple view that focuses on presenting data and basically you can notice that there is always a “<“ backward arrow in the header that can help you navigate back to previous panel.

63BF65E7-D01A-4934-B67B-D396E067C044

Wifi Auth Dialog

C2C748FE-3B37-4CF1-A0B4-C96DE1767C15

Wifi Panel

If you are going to create a dialog, here comes some notes that you need to be aware of at first. Let’s use Wifi Auth Dialog for example :

[Setup]

  1. You have to register one section element in Setting’s index.html.
    1. <section is=”wifi-auth” role=”region” id=”wifi-auth” class=”dialog”></section>
    2. remember, you need to add one extra dialog class to make sure the section can be applied with right CSS style
  2. Remember to add one more link element in index.html to make sure related sub-document will be loaded.
    1. <link rel=”import” href=”/elements/wifi_auth.html”>
  3. And then, you can follow scripts under settings/js/panels/* to make sure all dialog needed codes can be loaded.

Take settings/js/panels/wifi_auth/panel.js for example, for Dialog, there are some special API you can use and something that you need to know.

  1. In order to pass data back to caller, you can use onCancel and onSubmit function with resolved data. By doing so, caller can use DialogService.show(‘panelId’).then(function(result) {}); to get needed data.
  2. And also, if you want to programmatically cancel or submit, after Bug 1166495 is landed, you can use this.cancel() and this.submit() to achieve this.

For Panel, you can follow [Setup] part above without adding extra class and everything is done ! Based on our design, they share the same interface and there is no much difference between them, just make sure you won’t use onSubmit(), onCancel() and Dialog related API described above, then you are good !

June 05, 2015 04:25 AM

June 03, 2015

Firefox OS Gaming

Going ... going ... gone!

After months of lactivity, I have decided to put this blog on permanent hold. I won't kill it because there is some really great code and great games buried in these 100+ posts about Firefox OS gaming.

I certainly feel guilty for abandoning this blog. Not for the time when I was traveling or attending to family business, but for now when I realize that Firefox OS no longer excites me. In particular, this article about Firefox giving up on $25 phones was the last straw.

http://www.cnet.com/news/mozilla-overhauls-firefox-smartphone-plan-to-focus-on-quality-not-cost/

I could get excited when Firefox OS was all about bring phones to the masses, but now I'm not sure what Firefox is about. I didn't like it when Google stopped funding them, I was very uncomfortable with the way that that Brendan Eich was bounced (the founder of JavaScript not worthy?), and the alignment with Yahoo and Bing just doesn't sit well with me.

So I've decided to transfer my energy to another HTML5 hardware container -- Chromebooks! I really like HTML5 and Cromebooks are similar to Firefox OS phones in the sense that the main programming for them is HTML5.

And Chromebooks are bringing computers to the masses. No, not $25, but you can get nice new shiny Chromebooks for $200 and the price is dropping all the time. It's just a keyboard and a screen, with Linux underneath and Chrome on the top.

So I'll be starting a new blog for Chromebooks and games.

One of the mistakes I made with this blog was to alternate posts between game reviews and game programming. For Chrome, I'll have two blogs, one for Chromebook game reviews and the other for Chromebook game programming. And yes, I know that Chrome apps and Chromebook apps are the same thing, but I'm really liking the idea of a nice, light, Chromebook. I'm typing this on a new Asus Chromebook and I'll be doing all my programming on it as well as game playing!

My game programming blog will be called "HTML5 Games on Things" in honor of the new "internet of Things" concept but for games. You can find it at http://www.html5gamesonthings.com/ but I don't have any posts yet. I called it that because I'm starting on Chromebooks first, but with PhoneGap getting better, I think that I can use HTML5 on Android and iOS.

My game review blog will be called "Games for Chromebooks" and will be at http://www.games4chromebooks.com/. No posts there but I'll be doing stuff very, very soon.

So stay tuned, but not iTuned!

June 03, 2015 11:05 PM

May 21, 2015

【程式雜記】把想到的、看到的、學到的記下

【測試】Firefox OS Testing Framework - Gaia UI Test in Javascript

和之前的Gaia UI Test不一樣的地方是,之前的Gaia UI Test是Python版本。所以我們稱Python版為GIP,而稱JavaScript版為GIJ。


 <基本步驟>
來看一下基本的步驟吧:

首先,先抓下Firefox OS (B2G)的Gaia程式:

             git clone https://github.com/mozilla-b2g/gaia.git

(請使用master branch,其他branch似乎有問題。)
接下來執行:

             make test-integration

(此指令已經包含make clean
如果不想make clean,可以make test-integration-test)


第一次執行make可能時間會較久。

這樣就可以跑過所有的GIJ測試整個測試會超過一小時,並且因為他會幫你同時安裝marionette-js-runner和Node.js,所以有時候會發生特殊例外。像個人就遇到過一次,這時候可以到Mozilla的BugZilla發個bug給Mozilla。



 <Node.js解決問題基本步驟>
Ubuntu下面,如果需要解決Node.js相關問題請參照下面指令:

NodeJS
Node.js安裝:

             sudo apt-get update
             sudo apt-get install nodejs
             sudo apt-get install npm

清除所有npm的modules:

                npm -g ls | grep -v 'npm@' | awk '/@/ {print $2}' | awk -F@ '{print $1}' | xargs npm -g rm
             cd ./node_modules/ 
             rm -rf module_folder
             npm cach clean

nvm
但是如果你有遇到因此抓到版本太舊的情況,請裝nvm協助更改版本:

             sudo apt-get update
             sudo apt-get install build-essential libssl-dev
             curl https://raw.githubusercontent.com/creationix/nvm/v0.16.1/install.sh | sh
             source ~/.profile
             nvm install (版號)
             nvm use (版號)

你可以設定alias

             nvm alias master 0.12.2
    
這樣就可以直接用

             nvm use 0.12.2


此外,如果有Sockit-to-me的相關錯誤,請:

            npm install sockit-to-me

Upgrade NodeJS Directly Without NVM
            # Note the new setup script name for Node.js v0.12
            curl -sL https://deb.nodesource.com/setup_0.12 | sudo bash -
            # Then install with:
            sudo apt-get install -y nodejs


 <各式使用方法>
上面就是一般基本上的跑法。當然有時候,你不希望跑所有的測試,所以你可能會需要以下各種不同情況。

只執行單一或多個測試檔案:

             TEST_FILES=<test> make test-integration
             TEST_FILES="<test1> <test2>" make test-integration

執行單一個APP的測試請用:

             APP=<APP> make test-integration

跳過部份測試請用:

             SKIP_TEST_FILES="<test>" make test-integration
             SKIP_TEST_FILES="<test1> <test2>" make test-integration

(TEST_FILES和SKIP_TEST_FILES不可同時使用)

觀看Gecko輸出的一些debugging資訊請用(另可參照說明):

             VERBOSE=1 make test-integration

使用自己的B2G Desktop Build:

             RUNTIME=<path to objdir of b2g desktop build>/dist/bin/b2g make test-integration

不讓程式幫你make profile請用:

             make test-integration-test

測試TV Desktop B2G:

             TEST_FILES=(tv testfile) GAIA_DEVICE_TYPE=tv make test-integration

跑在Device上面:(官方說明的方法失效,但這裡的Okay)

             BUILDAPP=device make test-integration

MARIONETTE_RUNNER_HOST=marionette-device-host make test-integration <-官方版

 <背景執行方法>
Ubuntu下面或是Mac OSX下面,通常這種程式會在前景執行但你又需要他在背後執行的時候,最快的方法都是xvfb

安裝完畢後,步驟如下:
             xvfb-run make test-integration



 <有關跑得結果>
1. 紅色表示Failure、綠色勾表示Pass、藍色表示Skip或註解
2. 有時候吐一堆亂碼是圖檔
3. 時間紅色似乎沒有額外意義


*Marionete JS API Document Reference 連結

May 21, 2015 06:20 AM

May 14, 2015

firefox os – soledad penadés

“The disconnected ensemble”, at JSConf.Budapest

Here I am in Budapest (for the first time ever ?)! I’m back in the hotel after having a quick dinner on my own. I didn’t join the party because I had a massive headache and also I was getting so sleepy, no coffee could fight that (also probably the two things were related). But once I started wandering towards my hotel I found myself feeling so much better, and stumbled upon a cosy nice place and ended up stopping there for some food.

When I came back from the speakers’ dinner yesterday, I practiced setting up all my stuff and going through the demos again, which are in fact ran on real, physical devices, i.e. phones.

Because this is early days it is sometimes a bit flimsy and although it is generally quite robust, we shouldn’t forget the fact that I’m running Nightly builds and using pre-production APIs which are also barely documented. I’m probably one of the few developers using those APIs without also having written their implementations too, so I’m surely doing things wrong.

And yesterday night was one of those “everything is crashing and I hate my life” moments:

There were more things but those were the most terrifying. I fixed everything and went to sleep, but I kept waking up every 2 hours with my brain going all…

And I kept telling to my brain:

CHILL
DOWN.

But it didn’t really work because it kept waking me up. Urgh.

Turns out that everything has gone quite smoothly, nothing has crashed, and also the organisers of the conference have been super great, because they didn’t forget my request for a table with a camera pointing to it, in which I could install all the equipment and people in the audience could see what was going on, so it’s been super coooool. Thanks, organisers! 😀

I also want to thank Sufian for willing to join this pop up band and play JS-Theremin without any hesitation! Yay! 😎

If you’re intrigued about this live act, I’m doing this talk next week in Manchester for UpFrontConf and in Melbourne for CampJS. Also, yes: I’m going to spend an incredible amount of time travelling, but I’m also super excited because I haven’t been to Manchester in almost 20 years and I’ve never been to Australia sooooo I’m all pumped. WEEEEEEEEEEEEE! ??

flattr this!

May 14, 2015 08:30 PM

April 15, 2015

firefox os – soledad penadés

Running a web server on the front-end

The introduction of TCP sockets support in Firefox OS made it possible to run a web server from the front-end, and all is written in JavaScript. Think of having something similar to express.js… but running on a browser (because after all, Firefox OS is a superturbocharged browser).

Again, JS server superstar Justin d’Archangelo wrote an implementation of a web server that works on Firefox OS. It’s called fxos-web-server and it includes a few examples you can run.

None of the examples particularly fit my use case–I want to serve static content from a phone to other phones, but the examples were a bit more contrived. So I decided to build a simpler proof-of-concept example: catserver, a web server that served a simple page with full screen Animated GIFs of cats:

Browserify

The first thing I wanted to do is to use Browserify “proper”, to write my app in a more modular way. For this I had to fork Justin’s original project and modify its package.json so it would let me require() the server instead of tucking its variable in the window globals 🙂 – sadly I yet have to send him a PR so you will need to be aware of this difference. The dependency in package.json points to my fork for now:

"fxos-web-server": "git+https://github.com/sole/fxos-web-server.git"

Building (with gulp)

My example is composed of two “websites”. The first one is the web server app itself which is what is executed in the “server” device. The sources for this are in src.

The second website is what the server will transfer to devices that connect to it, so this actually gets executed in the client devies. This is where the cats are! Its contents are in the www folder.

Both websites are packaged in just one ZIP file and then installed onto the server device.

This build process also involves running Browserify first so I can get from node-style code that uses require() to a JavaScript bundle that runs on Firefox OS. So I’m using gulp to do all that. The tasks are in gulpfile.js.

Web server app

Thanks to Justin’s work, this is fairly simple. We create an HTTP server on port 80:

var HTTPServer = require('fxos-web-server');
var server = new HTTPServer(80);

And then we add a listener for when a request is made, so we can respond to it (and serve content to the connected client):

server.addEventListener('request', function(evt) {
      var request = evt.request;
      var response = evt.response;

      //... Decide what to send
});

The “decide what to send” part is a bit like writing nginx or express config files. In this case I wanted to:

Before serving a file we need to tell the client what kind of content we’re sending to it. I’m using a very simple “extension to content type” function that determines MIME types based on the extension in the path. E.g. ‘html’ returns text/html.

Once we know the content type, we set it on the response headers:

response.headers['Content-Type'] = getContentType(fileToSend);

and use Justin’s shortcut function sendFile to send a file from our app to the client:

response.sendFile(fileToSend);

With the request handler set up, we can finally start the server!

server.start();

But… how does it even work?!

Welcome to the Hack of The Week!

When you say “sendFile” what the server app does is: it creates an XMLHttpRequest with type = arraybuffer to load the raw contents of the resource. When the XMLHttpRequest emits the load event, the server takes the loaded data and sends it to the client. That’s it!

Naive! Simple! It works! (for simple cases)

Ways that this could be improved – AKA “wanna make this better?! this is your chance!”

As I mentioned above, right now this is very naive and assumes that the files will exist. If they don’t, well, horrible things will happen. Or you will get a 404 error. I haven’t tried it myself. I’m not sure. I’d say there is no error handling (yet).

The extension to content type function could be made into a module, and probably extended to know about more file types. It probably exists already, somewhere in npmlandia.

Another idea I had is that instead of loading the entire resource in memory and then flush it down the pipe as sendFile does, we could use progress events on the XMLHttpRequest and feed it to the client as we load it–so that the server device won’t run out of memory. I don’t know how we could find the length of the resource first, perhaps a HEAD request could work!

And finally we could try to serve each request in a worker, so that the server doesn’t block when responding to a large request. Am I going too far? I don’t even know if the TCP sockets work with workers, or if there are issues with that, or who knows!? This is unexplored territory, welcome to Uncertainty Land! 😀

Even extremer ways to get very… “creative”

What if you wrote a PHP parser that runs in JavaScript and then parsed .php files instead of just returning their contents as text/html?

I’m only half kidding, but you could maybe execute JS templates on the server. Forget security! You trust the content, right? 😉

Another thing you could do is take advantage of the fact that the server is also a browser. So you can do browsersy things such as using Canvas to generate images, instead of having to load libraries that simulate canvas in node. Or you could synthesise web audio stuff on demand–maybe you could use an OfflineAudioWorker for extra non-blocking goodness! Or, if you want to go towards a relatively more boring direction, you could do DOM / text handling on a server that can deal with that kind of stuff natively.

With all the new platforms in which we can run Firefox OS, there are so many things we can do! Phone servers might be limited by battery, but a Raspberry PI running Firefox OS and connected to a power source can be an interesting platform with which to experiment with this kind of easy-to-write web servers.

But I saw NFC mentioned in the video!

Indeed! But I will cover that in another post, so we keep this one focused on the HTTP server 🙂

Happy www serving!

flattr this!

April 15, 2015 11:51 AM

April 09, 2015

firefox os – soledad penadés

Getting logs of your Firefox OS device

Often you want to output debugging data from your app, but the space on the screen is limited! And perhaps you don’t want to connect to the app with WebIDE and launch the debugger and etc, etc…

One solution is to use any of the console. functions in your code. They will be sent to the device’s log. For example:

console.log('hello friends!');

and you can also use console.error, console.info, etc.

Then, if you have the adb utility installed, you can get instant access to those logs when your device is connected to your computer with USB.

You can get adb from the Android Developer Toolkit or if you just want that binary, with package managers such as brew on a Mac:

brew install android-platform-tools

Once adb is installed, if you execute this in a terminal:

adb logcat

it will start to print everything that is sent to the device’s log. This includes your app’s messages AND EVERYTHING ELSE! It’s like a huge kitchen sink where all the debug data goes.

For example:

I/HelloApp(21456): Content JS LOG: hello friends
I/HelloApp(21456):     at hello (app://5ae38330-dde0-11e4-9397-fd926d95d498/js/app.js:87:4)
D/wpa_supplicant(  900): RX ctrl_iface - hexdump(len=11): 53 49 47 4e 41 4c 5f 50 4f 4c 4c
D/wpa_supplicant(  900): wlan0: Control interface command 'SIGNAL_POLL'

Although sometimes you want to see the whole bunch of messages, more often than not you’re just interested in your app’s messages. You can use grep to filter the output of adb logcat. Stop the current process with CTRL+C and then type this:

adb logcat | grep HelloApp

The result:

I/HelloApp(21456): Content JS LOG: hello friends
I/HelloApp(21456):     at hello (app://5ae38330-dde0-11e4-9397-fd926d95d498/js/app.js:87:4)

What we’re saying is: only show me lines that contain HelloApp. This depends on your app’s name, so adjust accordingly—if you enter the wrong argument for grep, you won’t see anything at all 😉

And what if you connect multiple devices…?

When you connect multiple devices and run adb logcat, you get this message:

error: more than one device and emulator

adb doesn’t know what do you actually want to see, so it just resorts to not showing you anything.

To tell it what you want to look at, you need to find the label for each device first:

adb devices

This will produce a list similar to this:

List of devices attached
3739ce99        device
356cd099        device

Where the first column represents each device’s label. Then you can use that to filter when calling adb logcat, like this:

adb -s 3739ce99 logcat | grep HelloApp

You could also open another terminal window and run logcat on it, but for another device, simultaneously.

Saving a log to a file

Often when you file a bug you’re asked to produce a log. You can create one by redirecting the output of adb to a file! The way to do this is to go to a terminal, and type:

adb logcat > debug.txt
# or also...
adb -s 356cd099 logcat > debug.txt

Instead of outputting the logs to the screen, they will be stored in debug.txt until you press CTRL+C. You should run the steps to reproduce the bug while adb is logging to debug.txt, and then stop it afterwards, and then you can append said debug.txt file to the bug in bugzilla–it contains valuable debug information, specially if you don’t filter by your app name!

And there are more useful adb bits and pieces on this MDN page.

Happy logging 😉

flattr this!

April 09, 2015 01:50 PM

April 08, 2015

firefox os – soledad penadés

Front-end mDNS: announcing and finding network services with JavaScript

Multicast DNS (or mDNS) lets you announce a service you’re offering in the network you’re connected to, and other devices can find (discover) it. For example, you could announce that your computer is running an FTP service. It’s the same thing that Apple does with its Bonjour protocol and that’s how you can find printers without knowing their IP address: they broadcast their existence, and your computer picks it up automatically for you.

Services have to be registered with a domain ending in .local. E.g. _ssh._tcp.local. The Wikipedia page has some background on why.

However, the title of this post has “front-end” on it, and that’s because I wanted to talk about dns-sd.js, a library that lets you both register and discover services in the network. It’s all written in JavaScript so it can run on a browser environment, in this case Firefox OS.

It uses some Firefox OS-only APIs such as mozTCPSocket, so it only runs on Gecko/Gaia environments, but I’m sure it could be modified to work on other environments if they exposed a similar functionality in JS.

Suppose you’re running an echo server in your Firefox OS phone, and want to announce it to other peers in your network. An Echo server just replies with the same data you sent it, so it’s a good way to get started with writing a network server 🙂

The following is how we would announce and discover said server:

Permissions (for the server and the client apps)

The first thing you need to do is to ensure you’re asking for the proper permissions for your app in the manifest.webapp file. dns-sd.js requires permission to use TCP and UDP sockets, so make sure the permissions field looks at least like this:

{
  "tcp-socket": {},
  "udp-socket": {}
}

Otherwise you’ll get errors such as “UDPSocket is not defined”.

Loading the library (both server and clients)

Grab dns-sd.js from the dist folder in the repository, and include it in your app, before any code that uses it. For example, you could use something like this in the head section:

<script src="js/lib/dns-sd/dns-sd.js" defer></script>
<script src="js/app.js" defer></script>

It will register a window.DNSSD object, so you can just refer to it as DNSSD.

Registering / announcing your service (for the server)

To announce the service, we would do this:

DNSSD.registerService('_echo._tcp.local', 7, {});

Finding echo servers in the network (for the clients)

We could use Justin’s DNS browser example to make sure the service is found by other clients in the network:

Or we could set up a discovered listener and start the discovery process:

DNSSD.addEventListener('discovered', function(evt) {
  // A service broadcast event was received
  // i.e. we "discovered" something new
});

DNSSD.startDiscovery();

Each discovered event is associated to a host with an IP address. A host can evidently send multiple updates, as services are enabled/disabled.

Right now dns-sd.js only provides you with a list of service names in the host, but not the ports, so you might need to either deduct or hardcode them 😉
I filed a bug for this.

The most interesting bits of data in the discovered events are:

So if we were looking for echo servers, we should look at the list of services each time we get an update from a host:

var echoServices = event.services.filter(function(service) {
  return service.match('echo');
});

And we would have a list of hosts running echo services in echoServices!

flattr this!

April 08, 2015 01:45 PM

April 01, 2015

firefox os – soledad penadés

install-to-adb with command line tool!

As I said, I abhor repetition, so I added a new nifty feature to the install-to-adb module I made.

Now it also has a command line tool, and you can push and launch apps from the command line without even having to write a custom script that uses the module (of course, you can still use the module code by requiring it).

install-to-adb /path/to/your/firefoxos/app --launch

In the video above, I’m using the tool to install the browser example from Justin D’Archangelo’s DNS-SD project — a pure JavaScript implementation of mDNS for Firefox OS. This way I don’t need to open WebIDE and install the app separately on each device. Instead I point the tool to the path of the app, and also tell it to launch it when it’s installed 🙂

Since I’m running the tool in the same directory as the app is, I don’t even need to specify its full path, I can just use a dot, which in UNIX based systems means “the current path”:

install-to-adb . --launch

Being pragmatically lazy like this is amazing! 😀

This is also the first time I write a command line tool with node so if there are weirdnesses feel free to file an issue, or (even better) tell me how to fix them.

I published the module on npm too. So if you need to install lots of apps to devices regularly it might be worth to install it globally (wowowow):

npm install -g install-to-adb

Source code: https://github.com/sole/install-to-adb

flattr this!

April 01, 2015 01:37 PM

FirefoxOS – Benoit Girard's Blog

Image Decoding on the GPU now in Nightly

This was posted on April 1st as an April Fools’ Day hoax.

In 2013-2014 a lot of effort was put into moving image decoding to a background thread. However it became obvious that doing parallel off-main-thread was still the critical path for presenting image heavy pages. The biggest problem we faced was that on B2G keeping active image uncompressed in main memory was something we simply could not afford with a 128 MB device even if it was just for visible images.

Enter image decoding on the GPU. The goal of image decoding is use the GPU to parallelize the decoding of each visible (and only the visible) -pixels- instead of just getting per image parallelization and doing full image decodes. However the biggest advantage comes from the reduced GPU upload bandwidth from being able to upload a compressed texture instead of a large 32-bit RGB bitmap.

We first explored using s3tc compressed textures. However this required us to still decode the image and re-compressing the image to s3tc on the CPU thus regressing page load times.

The trick we ending up doing instead was providing a texture that was the -raw- JPEG stream encoder as a -much- smaller RGB texture plane. Using a clever shader we sample from the compressed JPEG stream when compositing the texture to the frame buffer. This means that we don’t ever have to fit the uncompressed texture in main memory. This means that on pages that would normally cause a memory usage spike leading to an OOM no longer have any memory spike at all.

GPU Image Decoding

GPU Image Decoding

The non trivial bit was designing a shader that can sample from a JPEG texture and composite the decompressed results on the fly without any GPU driver modification. We bind a 3d LUT texture to the second texture unit to perform some approximations when doing the DCT lookup to speed up the shader units, this requires a single 64KB lookup 3D texture that is shared for the whole system. The challenging part of this project however is taking the texture coordinate S&T and looking up the relevant DCT in the JPEG stream. Since the JPEG stream uses a huffman encoding it’s not trivial to map (x, y) coordinate from the decompressed image to a position on the stream. For the lookup our technique uses the work of D. Charles et al.


April 01, 2015 08:47 AM

March 30, 2015

Planet Firefox OS – Blog: timdream

Service Worker and the grand re-architecture proposal of Firefox OS Gaia

TL;DR: Service Worker, a new Web API, can be used as a mean to re-engineering client-side web applications, and a departure from the single-page web application paradigm. Detail of realizing that is being experimented on Gaia and proposed. In Gaia, particularly, “hosted packaged app” is served as a new iteration of security model work to make sure Service Workers work with Gaia.

Last week, I spent an entire week, in face-to-face meetings, going through the technical plans of re-architecture Gaia apps, the web applications that powers the front-end of Firefox OS, and the management plan on resourcing and deployment. Given the there were only a few of developers in the meeting and the public promise of “the new architecture”, I think it’s make sense to do a recap on what’s being proposed and what are the challenges already foreseen.

Using Service Worker

Before dive into the re-architecture plan, we need to explain what Service Worker is. From a boarder perspective, Service Worker can be understood as simply a browser feature/Web API that allow web developers to insert a JavaScript-implemented proxy between the server content and the actual page shown. It is the latest piece of sexy Web technologies that is heavily marketed by Google. The platform engineering team of Mozilla is devoting to ship it as well.

Many things previously not possible can be done with the worker proxy. For starter, it could replace AppCache while keeping the flexibility of managing cache in the hand of the app. The “flexibility” bits is the part where it gets interesting — theologically everything not touching the DOM can be moved into the worker — effectively re-creating the server-client architecture without a real remote HTTP server.

The Gaia Re-architecture Plan

Indeed, that’s what the proponent of the re-architecture is aiming for — my colleagues, mostly whom based in Paris, proposed such architecture as the 2015 iteration/departure of “traditional” single-page web application. What’s more, the intention is to create a framework where the backend, or “server” part of the code, to be individually contained in their own worker threads, with strong interface definitions to achieve maximum reusability of these components — much like Web APIs themselves, if I understand it correctly.

It does not, however, tie to a specific front-end framework. User of the proposed framework should be free to use any of the strategy she/he feel comfortable with — the UI can be as hardcore as entirely rendered in WebGL, or simply plain HTML/CSS/jQuery.

The plan is made public on a Wiki page, where I expect there will be changes as progress being made. This post intentionally does not cover many of the features the architecture promise to unlock, in favor of fresh contents (as opposed of copy-edit) so I recommend readers to check out the page.

Technical Challenges around using Service Workers

There are two major technical challenges: one is the possible performance (memory and cold-launch time) impact to fit this multi-thread framework and it’s binding middleware in to a phone, the other is the security model changes needed to make the framework usable in Gaia.

To speak about the backend, “server” side, the one key difference between real remote servers and workers is one lives in data centers with endless power supply, and the other depend on your phone battery. Remote servers can push constructed HTML as soon as possible, but for an local web app backed by workers, it might need to wait for the worker to spin up. For that the architecture might be depend on yet another out-of-spec feature of Service Worker, a cache that the worker thread have control of. The browser should render these pre-constructed HTML without waiting for the worker to launch.

Without considering the cache feature, and considering the memory usage, we kind of get to a point where we can only say for sure on performance, once there is a implementation to measure. The other solution the architecture proposed to workaround that on low-end phones would be to “merge back” the back-end code into one single thread, although I personally suspect the risk of timing issues, as essentially doing so would require the implementation to simulate multi-threading in one single thread. We would just have to wait for the real implementation.

The security model part is really tricky. Gaia currently exists as packaged zips shipped in the phone and updates with OTA images, pinning the Gecko version it ships along with. Packaging is one piece of sad workaround since Firefox OS v1.0 — the primary reasons of doing so are (1) we want to make sure proprietary APIs does not pollute the general Web and (2) we want a trusted 3rd-party (Mozilla) to involve in security decisions for users by check and sign contents.

The current Gecko implementation of Service Worker does not work with the classic packaged apps which serve from an app: URL. Incidentally, the app: URL something we feel not webby enough so we try to get rid off. The proposal of the week is called “hosted packaged apps”, which serve packages from the real, remote Web and allow references of content in the package directly with a special path syntax. We can’t get rid of packages yet because of the reasons stated above, but serving content from HTTP should allow us to use Service Worker from the trusted contents, i.e. Gaia.

One thing to note about this mix is that a signed package means it is offline by default by it’s own right, and it’s updates must be signed as well. The Service Worker spec will be violated a bit in order to make them work well — it’s a detail currently being work out.

Technical Challenges on the proposed implementation

As already mentioned on the paragraph on Service Worker challenges, one worker might introduce performance issue, let along many workers. With each worker threads, it would imply memory usage as well. For that the proposal is for the framework to control the start up and shut down threads (i.e. part of the app) as necessary. But again, we will have to wait for the implementation and evaluate it.

The proposed framework asks for restriction of Web API access to “back-end” only, to decouple UI with the front-end as far as possible. However, having little Web APIs available in the worker threads will be a problem. The framework proposes to workaround it with a message routing bus and send the calls back to the UI thread, and asking Gecko to implement APIs to workers from time to time.

As an abstraction to platform worker threads and attempt to abstract platform/component changes, the architecture deserves special attention on classic abstraction problems: abstraction eventually leaks, and abstraction always comes with overhead, whether is runtime performance overhead, or human costs on learning the abstraction or debugging. I am not the expert; Joel is.

Technical Challenges on enabling Gaia

Arguably, Gaia is one of the topmost complex web projects in the industry. We inherit a strong Mozilla tradition on continuous integration. The architecture proposal call for a strong separation between front-end application codebase and the back-end application codebase — includes separate integration between two when build for different form factors. The integration plan, itself, is something worthy to rethink along to meet such requirement.

With hosted packaged apps, the architecture proposal unlocks the possibility to deploy Gaia from the Web, instead of always ships with the OTA image. How to match Gaia/Gecko version all the way to every Nightly builds is something to figure out too.

Conclusion

Given everything is in flux and the immense amount of work (as outlined above), it’s hard to achieve any of the end goals without prioritizing the internals and land/deploy them separately. From last week, it’s already concluded parts of security model changes will be blocking Service Worker usage in signed package — we’ll would need to identify the part and resolve it first. It’s also important to make sure the implementation does not suffer any performance issue before deploy the code and start the major work of revamping every app. We should be able to figure out a scaled-back version of the work and realizing that first.

If we could plan and manage the work properly, I remain optimistic on the technical outcome of the architecture proposal. I trust my colleagues, particularly whom make the architecture proposal, to make reasonable technical judgements. It’s been years since the introduction of single-page web application — it’s indeed worthy to rethink what’s possible if we depart from it.

The key here is trying not to do all the things at once, strength what working and amend what’s not, along the process of making the proposal into a usable implementation.

Edit: This post have since been modified to fix some of the grammar errors.

March 30, 2015 10:39 PM

March 25, 2015

Category: Firefox OS | J. Ryan Stinnett

WiFi Debugging for Firefox OS

I am excited to announce that we're now shipping WiFi debugging for Firefox OS! It's available in Firefox OS 3.0 / master with Firefox Nightly on desktop.

WiFi debugging allows WebIDE to connect to your Firefox OS device via your local WiFi network instead of a USB cable.

The connection experience is generally more straightforward (especially after connecting to a device the first time) than with USB and also more convenient to use since you're no longer tied down by a cable.

Security

A large portion of this project has gone towards making the debugging connection secure, so that you can use it safely on shared network, such as an office or coffee shop.

We use TLS for encryption and authentication. The computer and device both create self-signed certificates. When you connect, a QR code is scanned to verify that the certificates can be trusted. During the connection process, you can choose to remember this information and connect immediately in the future if desired.

How to Use

You'll need to assemble the following bits and bobs:

On Firefox OS, enable WiFi debugging:

  1. Go to Developer Settings on device (Settings -> Developer)
  2. Enable DevTools via Wi-Fi
  3. Edit the device name if desired

Firefox OS WiFi Debugging Options

To connect from Firefox Desktop:

  1. Open WebIDE in Firefox Nightly (Tools -> Web Developer -> WebIDE)
  2. Click "Select Runtime" to open the runtimes panel
  3. Your Firefox OS device should show up in the "WiFi Devices" section
  4. A connection prompt will appear on device, choose "Scan" or "Scan and Remember"
  5. Scan the QR code displayed in WebIDE

WebIDE WiFi Runtimes WebIDE Displays the QR Code

After scanning the QR code, the QR display should disappear and the "device" icon in WebIDE will turn blue for "connected".

You can then access all of your remote apps and browser tabs just as you can today over USB.

Technical Aside

This process does not use ADB at all on the device, so if you find ADB inconvenient while debugging or would rather not install ADB at all, then WiFi debugging is the way to go.

By skipping ADB, we don't have to worry about driver confusion, especially on Windows and Linux.

Supported Devices

This feature should be supported on any Firefox OS device. So far, I've tested it on the Flame and Nexus 4.

Known Issues

The QR code scanner can be a bit frustrating at the moment, as real devices appear to capture a very low resolution picture. Bug 1145772 aims to improve this soon. You should be able to scan with the Flame by trying a few different orientations. I would suggest using "Scan and Remember", so that scanning is only needed for the first connection.

If you find other issues while testing, please file bugs or contact me on IRC.

Acknowledgments

This was quite a complex project, and many people provided advice and reviews while working on this feature, including (in semi-random order):

I am probably forgetting others as well, so I apologize if you were omitted.

What's Next

I'd like to add this ability for Firefox for Android next. Thankfully, most of the work done here can be reused there.

If there are features you'd like to see added, file bugs or contact the team via various channels.

March 25, 2015 01:51 PM

November 28, 2014

Yura Zenevich - Firefox OS

Resources For Contributing to Firefox OS Accessibility.

November 28, 2014 12:00 AM

November 24, 2014

Firefox OS – Firefox OS und Ich

Monday Sparks: Vortragsfolien, BitCoin, Let’s Encrypt

Ich freu mich auf das Jahr 2015!
Warum? Weil mit Let’s Encrypt dann eine Möglichkeit besteht, kostenlos an ein TLS-Zertifikat zu kommen und damit den Datenverkehr der Besucher zur eigenen Website abzusichern. Das wird toll \o/

Daneben wurden in der vergangenen Woche viele Vorträge online gestellt und in einem Blog angepriesen. Klickt einfach einmal durch 😉

Nutzt einer von euch BitCoin? Falls ja, Mozilla akzeptiert diese Währung jetzt 🙂
Falls nein, lest bei BasicThinking mehr darüber!

Sparks.
Flickr: Sparks. von Sadie Hernandez (CC-BY)

Kompatibilitätstabelle für Mobile Endgeräte


November 24, 2014 08:55 PM

November 17, 2014

Firefox OS – Firefox OS und Ich

Monday Sparks: AfricaCom, Phillipinen, Firefox Developer Edition

Firefox OS zieht weiter seine Runden. Jetzt geht es auch nach Afrika (in 2015) und Philippinen (jetzt). Neuland 🙂

Daneben wird eine spezielle Entwickler-Version vom Firefox herausgegeben. Finde ich gut, denn der Durchschnitts-Nutzer wird wohl kaum die ganzen Extra-Features brauchen.

Ich hab euch dann auch noch einige Artikel zu den Tiles herausgesucht. Werbung ist ja immer so ein leidiges Thema :-S

Sparks.
Flickr: Sparks. von Sadie Hernandez (CC-BY)

O’Reilly Webcast: Mobile First, responsives Redesign einer LIVE-Website von Jonathan Stark (englisch) – 11.12.2014 einschalten. Dauer: ca. 60 Minuten bei freiem Eintritt.
Firefox OS App Day Frankfurt am Main am 22.11.2014
Folien zur ApacheConEU2014 über Cordova (englisch)
Images für Alcatel OneTouch Fire (englisch) – Flashen auf eigenes Risiko!


November 17, 2014 06:16 PM

November 11, 2014

Idea Public Notebook » fxos

@media for bandwidth

Currently, a website can serve up different content based on a visitor’s screen resolution with @media queries in CSS. This idea has been recently extended so that a site can also deliver different images depending on pixel density using the <picture> tag and/or the srcset attribute. Have a fancy phone? We can send you all the pixels. If not, receive only what you need.

What if you have limited bandwidth or can only afford to use data a few days each month?

Can we extend these tools to include bandwidth? People with limited data or bandwidth could view quick pages to get the job done. The browser and site could deliver image placeholders — tap one to load that image if you need it, save your costly data if you don’t.

In practice, it might look something like this:

@media ( low-bandwidth ) {
img { display: placeholder; }
header .logo { display:block; }
}

<img src="pic.png" srcset="placeholder@0x.png 0x, pic@2x.png 2x" >

<picture>
<source media="(high-bandwidth)" srcset="large.jpg">
<img src="small.jpg">
</picture>

1 problem8 site prompt

Props to @humphd and @gesa for pointing me toward srcset and picture.

See more on the background of this idea and the design.

November 11, 2014 05:31 PM

Don’t eat my bandwidth

Mobile data and bandwidth is a costly and limited resource for many people. Below is a proposal to give people better control over media-intense sites. It’s designed for FirefoxOS as first emerged at Mozfest and explored in Rethink the Browser.

I welcome your feedback in the comments below or on the images in redpen. Why isn’t this a feature in settings? The goal is to keep it accessible and responsive. More iterations to follow.

1 problem3 solution 4 add to home 5 site placeholders 5.2 spec 6 settings 7 quick load settings 8 site prompt 9 quick load sites



13 reload
14 bolt 15 spin 16 meter 17 page weight 18 icons

November 11, 2014 05:22 PM

November 10, 2014

Firefox OS – Firefox OS und Ich

Monday Sparks: Afrika, Fx10, Firebug

Junge, Junge, wie die Zeit vergeht!

Heute wird Firefox zehn Jahre alt. Für Mozilla ein Anlass zum Feiern! Auf Thunderclap kann man noch bis ca. 20 Uhr seine Unterstützung für den Browser aussprechen. Auf Twitter werden die Hashtags #Fx10 und #ChooseIndependent entsprechend befeuert. Ich würd mich freuen, wenn ihr mitmacht. Und falls ihr gerade in Berlin seid, schaut doch einmal auf dem Alexanderplatz vorbei. Vielleicht erwischt ihr noch einige Mozillians und könnt euch mit Firefox ablichten lassen 🙂

Sparks.
Flickr: Sparks. von Sadie Hernandez (CC-BY)

November 10, 2014 04:11 PM

November 06, 2014

Firefox OS – Firefox OS und Ich

Ideen für eine Notifications API

Ich hab damit noch nicht so viel Erfahrung und deswegen frage ich euch 🙂

Auf der Mailingliste wird gerade über eine Notification API zur Steuerung von Benachrichtigungen diskutiert. Wie hättet ihr das gerne?

Buzzword Bingo: Notification = the act of giving notice
Buzzword Bingo: Notification = the act of giving notice
von Ron Mader (CC BY-SA)

Derzeit ist es wohl so, dass die einzige Möglichkeit in den Benachrichtigung bestehen, die auf dem Sperr-Bildschirm auch auftauchen.

Daneben wären aber Toasts, Vibrationen oder Zugriff auf die LED für verschiedene Szenarien wünschenswert.

So könnte man anhand des Vibrationsrhythmus erkennen, welche App gerade um Aufmerksamkeit bettelt.

Ein anderes Szenario ist das Mitteilen eines verpassten Anrufs/SMS. Ich hab das mehrfach schon erlebt …

Das coole daran ist, dass besagte API auch gerade beim WHATWG in der Standardisierung liegt. Ihr könnt also helfen, den Standard zu verbessern.

Interessierte können sich auch auf CC bei den Bugs #912645 und #1066385 (gibt sicher noch mehr) setzen.

Jetzt zu euch! Hinterlasst mir doch einen Kommentar mit euren Gedanken, und ich werde ihn in die Diskussion einbringen 🙂


November 06, 2014 01:11 PM

November 04, 2014

Firefox OS – Firefox OS und Ich

SMS werden nicht mehr gespeichert!

sms
sms von failafo0sa (CC BY-NC-ND)

Ja, ich gehöre noch zu der Sorte Mensch, die SMS einer WhatsApp-Nachricht bevorzugt. Hat ja nicht jeder ein Smartphone …

Umso überraschter war ich, als ich bemerkte, dass ich zwar SMS in den Benachrichtigungen sehen konnte, diese aber nicht mehr im Verlauf dargestellt wurden.

Senden geht auch nicht mehr.

Bug-Reporte #1092838 und #1092840 vertrösten mich und empfiehlt ein Flashen des Geräts.

Ich setz mich dann einmal mit Alcatel in Verbindung …

Kann von euch jemand das Verhalten bestätigen?


November 04, 2014 02:08 PM

November 03, 2014

Firefox OS – Firefox OS und Ich

Monday Sparks: Raspberry Pi, ownCloud, OpenWapp

Firefox OS für Raspberry Pi ist immer noch ein heißes Thema in der Community. Aber auch Matchstick hat seine Kampagne abgeschlossen und ~470k USD eingenommen. Ich freu mich auf deren Produkt 🙂

Daneben gab es diverse Bug Squashes Events. Ich hab nach dem Upgrade letzten Freitag auch schon den einen oder anderen entdeckt … und gemeldet.

Derweil zieht Firefox OS immer größere Kreise. Aber lest selbst:

Sparks.
Flickr: Sparks. von Sadie Hernandez (CC-BY)

 Falls es Leute unter euch gibt, die OpenWapp für WhatsApp unter FirefoxOS nutzen, habe ich schlechte Neuigkeiten für euch. Die Entwickler stoßen an ihre Grenzen und kommen mit dem Schließen von Bugs nicht hinterher. Von daher ist der Code auf GitHub veröffentlicht worden, um mehr Unterstützung zu erhalten. Selbst als Nicht-Entwickler könnt ihr euch einbringen!

Ich hab ein paar Anfragen zu ownCloud bekommen. Ich möchte euch darauf hinweisen, dass ihr die Möglichkeit habt, eine ownCloud-Backup-App zu unterstützen. Nutzt sie 🙂

Einige Mozilla-Mitarbeiter haben einen englischsprachigen Kurs auf Geeks Hubs Academy erstellt, der in Firefox OS einführt.


November 03, 2014 05:58 PM

October 31, 2014

Firefox OS – Firefox OS und Ich

Firefox OS: Musik via Bluetooth streamen

Das war meine Hauptmotivation, jetzt doch einmal ganz schnell zu aktualisieren: Ich wollte mit meinem neu erstandenen Jabra EasyGo auch Musik auf das Headset hören können.

Jabra Bluetooth
Jabra Bluetooth von Victor Svensson (CC BY-NC-ND)

Es stellt sich heraus, dass Bluetooth nicht gleich Bluetooth ist. Es gibt verschiedene Profile. Ein Forum-Beitrag von 2011 stupst mich in Richtung A2DP. Nachgeschlagen im Mozilla Wiki ergibt sich, dass dieses Profil ab Version 1.2 unterstützt wird.

Allerdings lassen sich auch schon mit Firefox OS 1.1 Anrufe auf dem Headset entgegennehmen. Nur die Musik kommt weiter aus dem Smartphone.

Für mich war es sonst ärgerlich, immer schnell das Telephon aus der Tasche zu friemeln, die Kopfhörer (ohne Micro) abzustöpseln und dann am besten noch rechtzeitig den Anruf anzunehmen. So reicht ein Druck an’s Ohr. Die Musik wird unterbrochen und alles ist Wölkchen 🙂

 

Lockscreen mit Musik via Bluetooth

Musik via Bluetooth streamen

Edit:

Auf Anfrage hier noch einmal die Anleitung, wie konkret Musik auf das Gerät gestreamt wird:

  1. Bluetooth aktivieren auf dem Smartphone und Headset.
  2. Bluetooth-Menü in den Einstellungen aufrufen und mit dem Headset koppeln und verbinden. Es erscheint ein Bluetooth-Symbol mit Kopfhörern.
  3. Musik abspielen.

 


October 31, 2014 10:12 AM

October 27, 2014

Idea Public Notebook » fxos

Rethink the Browser

At Mozfest, I facilitated a session called, Rethink the Browser. We imagined new ways to peek beyond the surface of a web site to enable smarter, safer browsing on the mobile web. This excellent group generated a lot of ideas, in part focusing on data usage — a costly and limited resource for many people around the world. The problem: we don’t know how much data we have used until after we use it. We designed an intervention that gives users more information before they visit a site, and agency to preserve their bandwidth.

ffos-add-to-home

Using bookmarks and top sites listed in Firefox Mobile, we indicate whether each site is more or less resource intensive (red to green in this mockup). Clicking this icon, users can set a preference to view the site with placeholders for images, videos, etcetera. Users could opt-in to load and view each item only when necessary.

The idea in this mockup meets an important need for many users in the FirefoxOS market. While we need a bit more work to improve the indicators and interaction, and to map the relative scale of resources and bandwidth, the design provides a strong user-first feature that could differentiate Firefox from other mobile browsers.

A big thanks to everyone who participated in the session: @tomsharmanweb, @roderick_tan, @Paddy_Cole, @11thMe, @mepartoconmigo, @AviKarnani. (If I’m missing your link, drop a comment below or ping me on twitter: @mw)

Anyone can contribute with comments on the design.

It’s all relative

firefox-page-size-indicatorsData use is relative. A small site for some users might be a huge burden for others with less network access. The weight of pages should be relative to each user, calculated based on typical daily data usage and average page sizes. This should be indicated simply as small, medium, and large to make the information easy to digest and utilize.

I used color in the mockup above, but an icon like one on the right would probably work better.

 

Preferences

firefox-quick-load-demofirefox-bookmark-bandwidth-xlThe ideal preference for large sites might be granular control over features, or a more simple quick load setting as designed above. Either way, the browser would load images and other items with a placeholders. A user could click any one to load that item. On the left, we see placeholders on a website. On the right, we see how bookmarks could look on FFOS 2.0. I’m curious how this might translate to 2.1’s design for top sites.

 

Progress

The group shared a few other ideas, some more feasible than others.

progress-barThe browser’s progress bar could be used to not only indicate the page load (left to right), but also show the overall data usage (bottom to top). Over time, a user would be very aware as they approached their limit without the need to dig through other screens and stats.

The group also discussed a platform for anonymously sharing usage stats. This would allow the browser to ping a server and anticipate a page’s size before loading it. This approach would be much more technically challenging, particularly to maintain privacy. But, it suggests an interesting social solution for more informed data usage and control.

Thanks again for everyone who contributed toward this effort. Keep in touch to help see these ideas refined and realized.

October 27, 2014 12:26 AM

October 24, 2014

Yura Zenevich - Firefox OS

TIL Debugging Gaia with B2G Desktop and WebIDE.

October 24, 2014 12:00 AM

October 14, 2014

Category: Firefox OS | J. Ryan Stinnett

DevTools for Firefox OS browser tabs

We've had various tools for inspecting apps on remote devices for some time now, but for a long time we've not had the same support for remote browser tabs.

To remedy this, WebIDE now supports inspecting browser tabs running on Firefox OS devices.

Inspecting a tab in WebIDE

A few weeks back, WebIDE gained support for inspecting tabs on the remote device, but many of the likely suspects to connect to weren't quite ready for various reasons.

We've just landed the necessary server-side bits for Firefox OS, so you should be able try this out by updating your device to the next nightly build after 2014-10-14.

How to Use

After connecting to your device in WebIDE, any open browser tabs will appear at the bottom of WebIDE's project list.

Browser tab list in WebIDE

The toolbox should open automatically after choosing a tab. You can also toggle the toolbox via the "Pause" icon in the top toolbar.

What's Next

We're planning to make this work for Firefox for Android as well. Much of that work is already done, so I am hopeful that it will be available soon.

If there are features you'd like to see added, file bugs or contact the team via various channels.

October 14, 2014 06:29 PM

October 09, 2014

Firefox OS Gaming

Sprite Sheets in Construct 2

I spent a few months traveling and not doing much of anything useful to anyone else, but I had a good time!

I did manage to review a book on Construct 2 that will help people make apps for Firefox OS. Especially for games, Construct 2 is a fast drag and drop game engine that thinks in HTML5! In case you missed it, my review of Construct 2 Game Development by Example is at http://firefoxosgaming.blogspot.com/2014/09/construct-2-game-development-by-example.html.

I'll also get back to reviewing games for Firefox OS, so if you know of any games in the Firefox OS Marketplace that you'd like me to review, let me know!

Efficient Artwork

The last real programming post I did was on how to do a platform game in Construct 2 for Firefox OS. You can read it here at http://firefoxosgaming.blogspot.com/2014/06/platform-game-using-construct-2-game.html. Essentially the game worked, but over on the Construct 2 site, a person named Aphrodite (from France) pointed out that it is somewhat inefficient to load in individual pieces of art for each block on the screen.

Here's what the game looks like:


The blue hero is standing on a platform made up of lemon lollypops (minus the stick). Each lollypop is a sprite. Sprites are an easy way to create patterns on the screen. The same sprite can be reused throughout your game, saving on memory. But loading sprites one at at time (which is what I did) isn't the best way.

But here's a better way to create objects on the screen.

Step 1 - Start a new project.

Download the latest Construct 2 which you can always get from www.scirra.com. Open up Construct 2 and open up a new project. Use the New Empty Project template.

Why do you want the latest? Construct 2 is trying to match every browser, and every browser is updating madly. So keep up!

Step 2 - Set up Grid and Snap

Up near the top is a View tab. Open it up and find Snap to grid. Click the box to make snapping happen. For grid-based platformers and role-playing games, grids are great and snapping makes sure that all the squares line up! Also set the grid width to what will match the pieces. In this case the squares are 32x32 pixels.

You can also click the box next to Show grid. I like this so I can see the grid. You can always turn it off it you want to get the feel of the game after you've assembled the pieces.

Step 3 - Find a Sprite Sheet

Sprite sheets are wonderful. Instead of loading each little sprite image separately, you can load one bitmap which contains all the sprites you want to use. Here's a great one from the artist I used last time, Kenney. You can get his free art at http://kenney.nl/.

If you look closely, you can see that he's created 49 sprites and placed them in a 7x7 grid. Thank you, Kenney!

Step 4 - Pull the Sprite Sheet into Construct

The next step is tricky. Make sure you are looking at a Layout screen. Double-click anywhere on the screen. You'll bring up the Insert New Object screen. Double-click on the Sprite object. The Insert New Object screen disappears and you're left with a cursor that has a target shape. Click anywhere on the Layout screen to start the Sprite Sheet process.

Essentially the process is:

  1. Double-click on the Layout screen.
  2. Double-click on the Sprite object.
  3. Single-click on the Layout.

This will place an object where you click, but you can easily move it later.

When you do that, you get the Edit Image editor. This editor consists of three separate screens. The main screen looks like this:


This screen is where you can manipulate art and do lots of cool things.

But there are two other screens that are useful for sprite sheets.

Usually to the right of the main edit screen is the Animations screen. It looks like this:


And finally, the Animation Frames screen, which is usually below the main screen and looks like this:


Construct 2 has an elaborate animation system that can let you do all kinds of cool things with animated characters, but it also uses its animation system to place pieces of a sprite sheet by treating each sprite as an animation frame. Very interesting!

So now that you know these three screens and you've brought up the editor, it's time to load the sprite sheet.

Right-click on the Animation frames screen and select Import frames and then From sprite strip....


Construct 2 will load the sprite sheet and attempt to figure out how the sprites are arranged. Sometimes it does and sometimes it doesn't. In my case it didn't. I just got this:


Well, no problem. Just tell Construct 2 how the sprites are laid out inside the sprite sheet. I inserted 7 into the horizontal cells and 7 into the vertical cells. I said OK.

When I do that, the sprites are arranged into 49 numbered parts.  Here is what it now looks like in the Animation frames screen:


Right-click on the first sprite (blank) and delete it. Your sprites are now numbered 1-49. We need to do two more steps before we are ready to blast Kenney's sprites onto the Layout.

Step 5 - Remove White Space

If you look very carefully, you'll see that Kenney left a tiny bit of space between each sprite. You need to remove this so the sprites join up perfectly with no gaps. Other sprite sheets have the sprites flush, but we've got Kenney and the price is right - free!

Luckily for us all, Construct 2 thought of this and has a way to automatically remove all the white space. Here's what you do.

Go to the main Image editor window. You should see something like this, with the first sprite in the center.


Near the upper-middle you'll see a button that looks like a little target. Counting from the right, it's the sixth one over. Hover over it and it will say Crop transparent edges. Hold shift to crop all of the 49 images. After a minute, the extra white space is gone.

There's a lot of smarts behind Construct 2, which is why it is cooler than any other game engine. But there's one more prep step to go!

Step 6 - Resize the Sprites

Kenney's sprites are 74x74 pixels. Why? Who knows. Maybe it's because he's from the Netherlands. Doesn't matter. We want our sprites to be 32x32.

Once again, Construct 2 to the rescue. Right to the left of the button that you used to remove extra white space is the Resize button. Click on it and you'll get a little window.


You want to make some changes. The first change is to put 32 for the Width (pixels) and 32 for the Height (pixels). Then click the box to Apply to whole animation. And keep the Stretch Image choice the same.

When you press okay, there will be a pause and the sprites will all shrink to 32x32!

Step 7 - Place the Sprite Objects

I covered this part in the last tutorial. Essentially you just close the editor to place your first sprite object.

You can click and drag on it, taking advantage of the grid. This is image#0, but you might get bored with that later.

You can copy a sprite object by just clicking on it, pressing control, and then dragging it. You'll be dragging a copy and when you let go, you have a new copy of the sprite. It is still image#0, but you can change that.

If you click on the sprite object, over to the left, you'll see the properties of the sprite object.

You'll see that the initial frame is 0, but you can choose from any of the 49 images. Let's make it 11, which is a cherry!

If you can't remember what frames correspond to which images, just double click on an object on the screen and the Edit Image windows will come up. You might want to even print them out so you can make really cool worlds by combining the individual sprites.

Next

I'll be getting back to reviewing some Firefox OS games from the Marketplace, working a bit more to improve some code I wrote for the same tutorial as I improved just now, checking to see if the Firefox OS build process has changes, seeing if I can upgrade my phones, and beginning to work on a real role-playing and/or puzzle game.

I've done enough with Construct 2 for now and I'm eager to get back to native HTMl5. Especially the siren song of SVG, and the cool things that only it can do in a web page. 

Until then, stay tuned but not iTuned!

October 09, 2014 12:19 AM

October 03, 2014

Ben Francis » FirefoxOS

What is a Web App?

What is a web app? What is the difference between a web app and a web site? What is the difference between a web app and a non-web app?

In terms of User Experience there is a long continuum between “web site” and “web app” and the boundary between the two is not always clear. There are some characteristics that users perceive as being more “app like” and some as more “web like”.

The presence of web browser-like user interface elements like a URL bar and navigation controls are likely to make a user feel like they’re using a web site rather than an app for example, whereas content which appears to run independently of the browser feels more like an app. Apps are generally assumed to have at least limited functionality without an Internet connection and tend to have the concept of residing in a self-contained way on the local device after being “installed”, rather than being navigated to somewhere on the Internet.

From a technical point of view there is in fact usually very little difference between a web site and a web app. Different platforms currently deal with the concept of “web apps” in all sorts of different, incompatible ways, but very often the main difference between a web site and web app is simply the presence of an “app manifest”. The app manifest is a file containing a collection of metadata which is used when “installing” the app to create an icon on a homescreen or launcher.

At the moment pretty much every platform has its own proprietary app manifest format, but the W3C has the beginnings of a proposed specification for a standard “Manifest for web applications” which is starting to get traction with multiple browser vendors.

Web Manifest – Describing an App

Below is an example of a web app manifest following the proposed standard format.

http://example.com/myapp/manifest.json:

{
  "name": "My App",
  "icons": [{
    "src": "/myapp/icon.png",
    "sizes": "64x64",
    "type": "image/png"
  }],
  "start_url": "/myapp/index.html"
}

The manifest file is referenced inside the HTML of a web page using a link relation. This is cool because with this approach a web app doesn’t have to be distributed through a centrally controlled app store, it can be discovered and installed from any web page.

http://example.com/myapp/index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>My App - Welcome</title>
    <link rel="manifest" href="manifest.json">
    <meta name="application-name" content="My App">
    <link rel="icon" sizes="64x64" href="icon.png">
...

As you can see from the example, these basic pieces of metadata which describe things like a name, an icon and a start URL are not that interesting in themselves because these things can already be expressed in HTML in a web standard way. But there are some other other proposed properties which could be much more interesting.

Display Modes – Breaking out of the Browser

We said above that one thing that makes a web app feel more app like is when it runs outside of the browser, without common browser UI elements like the URL bar and navigation controls. The proposed “display” property of the manifest allows authors of web content which is designed to function without the need for these UI elements to express that they want their content to run outside of the browser.

http://example.com/myapp/manifest.json:

{
  "name": "My App",
  "icons": [{
    "src": "/myapp/icon.png",
    "sizes": "64x64",
    "type": "image/png"
  }],
  "start_url": "/myapp/index.html"
  "scope": "/myapp"
  "display": "standalone"
}

The proposed display modes are “fullscreen”, “standalone”, “minimal-ui” and “browser”. The “browser” display mode opens the content in the user agent’s conventional method (e.g. a browser tab), but all of the other display modes open the content separate from the browser, with varying levels of browser UI.

There’s also a proposed “orientation” property which allows the content author to specify the default orientation (i.e. portrait/landscape) of their content.

App Scope – A Slice of the Web

In order for a web app to be treated separately from the rest of the web, we need to be able to define which parts of the web are part of the app, and which are not. The proposed “scope” property of the manifest defines the URL scope to which the manifest applies.

By default the scope of a web app is anything from the same origin as its manifest, but a single origin can also be sliced up into multiple apps or into app and non-app content.

Below is an example of a web app manifest with a defined scope.

http://example.com/myapp/manifest.json:

{
  "name": "My App",
  "icons": [{
    "src": "/myapp/icon.png",
    "sizes": "64x64",
    "type": "image/png"
  }],
  "start_url": "/myapp/index.html"
  "scope": "/myapp"
}

From the user’s point of view they can browse around the web, seamlessly navigating between web apps and web sites until they come across something they want to keep on their device and use often. They can then slice off that part of the web by “bookmarking” or “installing” it on their device to create an icon on their homescreen or launcher. From that point on, that slice of the web will be treated separately from the browser in its own “app”.

Without a defined scope, a web app is just a web page opened in a browser window which can then be navigated to any URL. If that window doesn’t have any browser-like navigation controls or a URL bar then the user can get stranded at a dead on the web with no way to go back, or worse still can be fooled into thinking that a web page they thought was part of a web app they trust is actually from another, malicious, origin.

The web browser is like a catch-all app for browsing all of the parts of the web which the user hasn’t sliced off to use as a standalone app. Once a web app is registered with the user agent as managing a defined slice of the web, the user can seamlessly link into and out of installed web apps and the rest of the web as they please.

Service Workers – Going Offline

We said above that another characteristic users often associate with “apps” is their ability to work offline, in the absence of a connection to the Internet. This is historically something the web has done pretty badly at. AppCache was a proposed standard intended for this purpose, but there are many common problems and limitations of that technology which make it difficult or impractical to use in many cases.

A new, much more versatile, proposed standard is called Service Workers. Service Workers allow a script to be registered as managing a slice of the web, even whilst offline, by intercepting HTTP requests to URLs within a specified scope. A Service Worker can keep an offline cache of web resources and decide when to use the offline version and when to fetch a new version over the Internet.

The programmable nature of Service Workers make them an extremely versatile tool in adding app-like capabilities to web content and getting rid of the notion that using the web requires a persistent connection to the Internet. Service Workers have lots of support from multiple browser vendors and you can expect to see them coming to life soon.

The proposed “service_worker” property of the manifest allows a content author to define a Service Worker which should be registered with a specified URL scope when a web app is installed or bookmarked on a device. That means that in the process of installing a web app, an offline cache of web resources can be populated and other installation steps can take place.

Below is our example web app manifest with a Service Worker defined.

http://example.com/myapp/manifest.json:

{
  "name": "My App",
  "icons": [{
    "src": "/myapp/icon.png",
    "sizes": "64x64",
    "type": "image/png"
  }],
  "start_url": "/myapp/index.html"
  "scope": "/myapp"
  "service_worker": {
    "src": "app.js",
    "scope": "/myapp"
  }
}

Packages – The Good, the Bad and the Ugly

There’s a whole category of apps which many people refer to as “web apps” but which are delivered as a package of resources to be downloaded and installed locally on a device, separate from the web. Although these resources may use web technologies like HTML, CSS and Javascript, if those resources are not associated with real URLs on the web, then in my view they are by definition not part of a web app.

The reason this approach is commonly taken is that it allows operating system developers and content authors to side-step some of the current shortcomings of the web platform. Packaging all of the resources of an app into a single file which can be downloaded and installed on a device is the simplest way to solve the offline problem. It also has the convenience that the contents of that package can easily be reviewed and cryptographically signed by a trusted party in order to safely give the app privileged access to system functions which would currently be unsafe to expose to the web.

Unfortunately the packaged app approach misses out on many of the biggest benefits of the web, like its universal and inter-linked nature. You can’t hyperlink into a packaged app, and providing an updated version of the app requires a completely different mechanism to that of web content.

We have seen above how Service Workers hold some promise in finally solving the offline problem, but packages as a concept may still have some value on the web. The proposed “Packaging on the Web” specification is exploring ways to take advantage of some of the benefits of packages, whilst retaining all the benefits of URLs and the web.

This specification does not explore a new security model for exposing more privileged APIs to the web however, which in my view is the single biggest unsolved problem we now have left on the web as a platform.

Conclusions

In conclusion, a look at some of the latest emerging web standards tells us that the answer to the question “what is a web app?” is that a web app is simply a slice of the web which can be used separately from the browser.

With that in mind, web authors should design their content to work just as well inside and outside the browser and just as well offline as online.

Packaged apps are not web apps and are always a platform-specific solution. They should only be considered as a last resort for apps which need access to privileged functionality that can’t yet be safely exposed to the web. New web technologies will help negate the need for packages for offline functionality, but packages as a concept may still have a role on the web. A security model suitable for exposing more privileged functionality to the web is one of the last remaining unsolved challenges for the web as a platform.

The web is the biggest ecosystem of content that exists, far bigger than any proprietary walled garden of curated content. Lots of cool stuff is possible using web technologies to build experiences which users would consider “app like”, but creating a great user experience on the web doesn’t require replicating all of the other trappings of proprietary apps. The web has lots of unique benefits over other app platforms and is unrivalled in its scale, ubiquity, openness and diversity.

It’s important that as we invent cool new web technologies we remember to agree on standards for them which work cross-platform, so that we don’t miss out on these unique benefits.

The web as a platform is here to stay!

October 03, 2014 04:50 PM

Playing With Sid

Micro SIM card adapter

Eating your own dog food or Dogfooding in technical parlance means the software maker uses their own software thus appreciate its strengths and weaknesses (and hopefully improve on those.)

Usually I dogfood multiple mobile phones running early releases of Cyanogenmod and Firefox OS. Doing this is easy when you have multiple SIM cards. But if you have to swap your SIM card between Nexus 4 (micro-SIM) and Firefox OS device (mini-SIM) then you'll love this inexpensive Nano SIM adapter from NooSY.



October 03, 2014 11:47 AM

September 25, 2014

Firefox OS – Ted's Blog

A better way to input Vietnamese

Earlier this year I had the pleasure of implementing for Firefox OS an input method for Vietnamese (a language I have some familiarity with). After being dissatisfied with the Vietnamese input methods on other smartphones, I was eager to do something better.

I believe Firefox OS is now the easiest smartphone on the market for out-of-the-box typing of Vietnamese.

The Challenge of Vietnamese

Vietnamese uses the Latin alphabet, much like English, but it has an additional 7 letters with diacritics (Ă, Â, Đ, Ê, Ô, Ơ, Ư). In addition, each word can carry one of five tone marks. The combination of diacritics and tone marks means that the character set required for Vietnamese gets quite large. For example, there are 18 different Os (O, Ô, Ơ, Ò, Ồ, Ờ, Ỏ, Ổ, Ở, Õ, Ỗ, Ỡ, Ó, Ố, Ớ, Ọ, Ộ, Ợ). The letters F, J, W, and Z are unused. The language is (orthographically, at least) monosyllabic, so each syllable is written as a separate word.

This makes entering Vietnamese a little more difficult than most other Latin-based languages. Whereas languages like French benefit from dictionary lookup, where the user can type A-R-R-E-T-E and the system can from prompt for the options ARRÊTE or ARRÊTÉ, that is much less useful for Vietnamese, where the letters D-O can correspond to one of 25 different Vietnamese words (do, , , , dỗ, , dở, dỡ, dợ, đo, đò, đỏ, đó, đọ, đô, đồ, đổ, đỗ, đố, độ, đơ, đờ, đỡ, đớ, or đợ).

Other smartphone platforms have not dealt with this situation well. If you’ve tried to enter Vietnamese text on an iPhone, you’ll know how difficult it is. The user has two options. One is to use the Telex input method, which involves memorizing an arbitrary mapping of letters to tone marks. (It was originally designed as an encoding for sending Vietnamese messages over the Telex telegraph network.) It is user-unfriendly in the extreme, and not discoverable. The other option is to hold down a letter key to see variants with diacritics and tone marks. For example, you can hold down A for a second and then scroll through the 18 different As that appear. You do that every time you need to type a vowel, which is painfully slow.

Fortunately, this is not an intractable problem. In fact, it’s an opportunity to do better. (I can only assume that the sorry state of Vietnamese input on the iPhone speaks to a lack of concern about Vietnamese inside Apple’s hallowed walls, which is unfortunate because it’s not like there’s a shortage of Vietnamese people in San José.)

Crafting a Solution

To some degree, this was already a solved problem. Back in the days of typewriters, there was a Vietnamese layout called AĐERTY. It was based on the French AZERTY, but it moved the F, J, W, and Z keys to the periphery and added keys for Ă, Đ, Ơ, and Ư. It also had five dead keys. The dead keys contained:

Photo of a Vietnamese typewriter

My plan was to make a smartphone version of this typewriter. Already it would be an improvement over the iPhone. But since this is the computer age, there were more improvements I could make.

Firstly, I omitted F, J, W, and Z completely. If the user needs to type them — for a foreign word, perhaps — they can switch layouts to French. (Gaia will automatically switch to a different keyboard if you need to type a web address.) And obviously I could omit the glyphs that represent kerned pairs of diacritic & tone marks, since kerning is no longer a mechanical process.

The biggest change I made is that, rather than having keys for the five tone marks, words with tones appear as candidates after typing the letters. This has numerous benefits. It eliminates five weird-looking keys from the keyboard. It eliminates confusion about when to type the tone mark. (Tone marks are visually positioned in the middle of the word, but when writing Vietnamese by hand, tone marks are usually added last after writing the rest of the word.) It also saves a keystroke too, since we can automatically insert a space after the user selects the candidate. (For a word without a tone mark, the user can just hit the space bar. Think of the space bar as meaning “no tone”.)

This left just 26 letter keys plus one key for the circumflex diacritic. Firefox OS’s existing AZERTY layout had 26 letter keys plus one key for the apostrophe, so I put the circumflex where the apostrophe was. (The apostrophe is unused in Vietnamese.)

Screenshot of Vietnamese input method in use

In order to generate the tone candidates, I had to detect when the user had typed a valid Vietnamese syllable, because I didn’t want to display bizarre-looking nonsense as a candidate. Vietnamese has rules for what constitutes a valid syllable, based on phonotactics. And although the spelling isn’t purely phonetic (in particular, it inherits some peculiarities from Portuguese), it follows strict rules. This was the hardest part of writing the input method. I had to do some research about Vietnamese phonotactics and orthography. A good chunk of my code is dedicated to encoding these rules.

Knowing about the limited set of valid Vietnamese syllables, I was able to add some convenience to the input method. For example, if the user types V-I-E, a circumflex automatically appears on E because VIÊ is a valid sequence of letters in Vietnamese while VIE is not. If the user types T to complete the partial word VIÊT, only two tone candidates appear (VIẾT and VIỆT), because the other three tone marks can’t appear on a word ending with T.

Using it yourself

You can try the keyboard for yourself at Timothy Guan‑tin Chien’s website.

The keyboard is not included in the default Gaia builds. To include it, add the following line to the Makefile in the gaia root directory:

GAIA_KEYBOARD_LAYOUTS=fr,vi-Typewriter

The code is open source. Please steal it for your own open source project.


September 25, 2014 12:06 AM

September 24, 2014

Yura Zenevich - Firefox OS

isfirefoxosaccessibleyet.com

September 24, 2014 12:00 AM

September 21, 2014

Playing With Sid

Noto Fonts Update

Google Internationalization team released new update of Noto Fonts this week. The update brings numerous new features enhancements. Please read the project release notes for the full list of changes.

You can preview the fonts and download them at google.com/get/noto.

Google Noto project logo

Testing fonts on Firefox OS device

It is very simple to test the Noto fonts on a Firefox OS device. Just copy the the font files into /system/fonts folder and reboot the device. Don't forget to back-up the existing fonts on device first.

Am writing this blog post in Bangkok, So I am going to use Thai Noto fonts in these instructions. Connect your Firefox OS device to the computer with a USB cable. Make sure to turn on developer settings to enable debugging via USB.


# Backup the existing Thai font
$ adb pull /system/fonts/DroidSansThai.ttf  

# Remount the /system partition as read-write
$ adb remount /system 

# Remove the font on the device
$ adb shell rm  /system/fonts/DroidSansThai

# Unzip the previously downloaded Thai font package
$ unzip NotoSansThai-hinted.zip 

# Push to Firefox OS device 
$ adb push NotoSansThai-Regular.ttf /system/fonts

# Reboot the phone. Test your localization by selecting your language 
#in Language settings menu or navigating to local language webpage with browser app.
$ adb reboot


Wait, All I see is Tofu?

If you see square blocks (lovingly referred as Tofu) instead of characters, that means the font file for your language is missing. Please double check the steps, if everything fails restore the previously copy of your font file.

What is Font Tofo, firefox OS screenshot

Happy Hacking!

September 21, 2014 07:42 AM

September 16, 2014

Playing With Sid

Firefox OS: Designing Khmer Keyboards and Fonts

Back in Cambodia this week to participate in Barcamp Phnom Penh 2014. It is great to experience the energy and openness of Phnom Penh and the Cambodian youth's insatiable zeal to learn all things tech. Over the past few years, the barcamps helped us build the Mozilla community in Cambodia.

Cambodia is a fast growing economy in the region. One survey notes significant increase in smart phone ownership from last year. And also increase in Khmer supported smart phones and feature phone in the market. At Barcamp Phnom Penh I presented a Firefox OS talk about the on-going Khmer Internationalization (i18n) work and invited the audience to contribute to Firefox OS. Planning to organize hackathons to work on Khmer keyboards with the Mozilla community here.

After my talk, Vannak of Mozilla Cambodia community talked briefly about Mozilla community to the audience. And we did a presentation about Mozilla Web Maker tools. I hope we'll organize more web literacy events in future. Keep watching this space for more news from Cambodia, the kingdom of wonder.

September 16, 2014 06:56 AM

September 08, 2014

FirefoxOS – Benoit Girard's Blog

B2G Performance Polish: Unlock Animation (Part 2)

Our destination

Our starting point is a 200ms unlock delay, and an uniform ~25 FPS animation. Our aim should be a 0ms unlock delay and a uniform 60 FPS (or whatever vsync is). The former we will minimize as much as we can but the latter is entirely possible.

Let’s talk about how we should design a lock screen animation in the optimal case. When we go and apply it in practice we often hit some requirements and constraint that make it impossible to behave like we want but let’s ignore that for a second and discuss we want to get to.

In the ideal case we would have the lockscreen rendered offscreen to a GPU texture(s) set. We would have the background app ready in another GPU texture(s) set. These are ‘Layers’. We place the background app behind the lockscreen. When the transition begins we notify the compositor to start fading out the lockscreen. Keep them around costs memory but if we keep the right thing around we can reduce or eliminate repaints entirely.

Our memory requirement is what’s required by the background app + about one fullscreen layer required for the lockscreen. This should be fine for even low end of B2G phones. Our overdraw should be about 200%-300%, again enough for mobile GPUs to keep up at 60 FPS/vsync.

Ideal Lockscreen Layer Tree

Now let’s look at what we hope our timeline for our Main Thread and our Compositor Thread to look like:

Ideal Unlock Timeline

We want to use Off-Main-Thread-Animation to perform the fade entirely on the Compositor. This will be initiated on the main thread and will require a style flush to set a CSS transform transition. If done right we don’t expect to have to reflow or repaint any part of the page if we properly built the layer like shown in the first figure. Note that the style flush will contribute to the unlock delay (and so will the first composite time as incorrectly shown in the diagram). If we can keep that style flush + first composite in under say 50ms and each composite in 16ms or less then we should have a smooth unlock animation.

Next up let’s look at what’s actually happening in the unlock animation in practice…


September 08, 2014 04:00 PM

Firefox OS Gaming

Construct 2 Game Development by Example (Book Review)

I've been on an extended vacation traveling around the country, visiting old friends, and thinking what I want to do next with this blog. I've written more than 100 posts and published a 400 page Kindle book on Amazon, all focused on Firefox OS.

Well, I'm back, but I'm going to go away for another month. However, I just wanted to review an important book on Construct 2. As you know, I've written several posts on Construct 2 because it is an ideal quick way to write games for Firefox OS without a lot of coding. Drag and drop, fill in a few forms, and you're game is ready for the Marketplace.

However, there has only been one book on Construct 2, HTML5 Game Development from the Ground Up with Construct 2, by Roberto Dillon, published by CRC Press. I've read it but I could never wrap my head around it. It might be because the book covers making odd games that don't really connect. I feel like the author had never made games and the book just seems slow. That's not very analytical, but I just haven't been able to get into it. I find I just don't want to spend the time analyzing why a book doesn't work. One fact that has bothered me is that the version that they provided for Anazon Kindle doesn't navigate very well. It reads more like a PDF. Ugh!

And there's one other book that is cool, called Construct Game Development: Beginner's Guide, by Daven Bigelow, published by Packt Publishing. It looks very cool, but unfortunately covers the original Construct Classic. Unfortunate because the creators have moved on and Construct 2 is the drag-and-drop HTML5 game engine you want to use. Construct Classic was focused on DirectX but the creators wisely moved on to HTML5, allowing you to produce games that can run on not just Windows, but a big list of other platforms. How big? Would you believe: HTML5 for any Web browser, Wii U, iOS, Android, Windows 8 & Windows RT, Windows Phone 8, Windows Desktop, Mac Desktop, Linux Desktop, Blackberry 10, Firefox OS Marketplace (yay!), Tizen, Facebook, Chrome Web Store, and Amazon Appstore.

Lucky for the world, Packt Publishing decided to put out a book on Construct 2 and they chose a great author to do it; John Bura. The book is Construct 2 Game Development by Example and it just came out in June. For some reason, Packt asked me to review it and they sent me a free copy, so take that as a disclaimer. But I would happily pay $21.60 for the eBook from Packt or even happier to pay Amazon $16.54 for the eBook and $39.87 for the paperback from Amazon.

Why am I pleased to see that the author is John Bura? Well, John is one of those amazingly busy guys who do all kinds of things. I know of him from his amazing videos on Udemy (http://www.udemy.com) and in particular, a video class called Learn to Make HTML5 , Facebook, Chrome Store games and more! The class is an amazing 31 hours of lecture broken out into 432 segments. Most of the class covers using Construct 2 but also includes 40 lectures on using FL Studio to make Mega Man game music and even a sequence on Game Salad for iOS. The class is $199 right now but is often discounted and John has a lot of other classes on various game programming aspects.

So when he writes a book, I'm excited because I know that he understands Construct 2 well. I never felt that way about the Roberto Dillon book, but after watching hours of fun and interesting video, I know that he knows! And anyone who likes FL Studio is cool as well. The two products (Construct 2 and FL Studio) are similar in that they help you create things fast.

So what's in Mr. Bura's book? Here's the outline:

Chapter 1 - Getting Started with Construct 2
Chapter 2 - Inputs and Controls
Chapter 3 - Variables and Arrays
Chapter 4 - Game Mechanics
Chapter 5 - Making a Simple Shooter
Chapter 6 - Making a Tower Defense Game
Chapter 7 - Making a Puzzle Physics Game
Chapter 8 - Exporting Your Game
Appendix - Where to Go from Here

Keep in mind that this book is clearly aimed at beginners. If you are an advanced programmer who likes to code by hand, you probably won't read this book. Most of my posts are advanced HTML5 programming based, but I've come to realize that is Firefox OS (and HTML5) is to grow, people who are artists and creatives need to be able to sit down and make a game. 

Here's a quick breakdown by chapter:

Chapter 1 - Getting Started with Construct 2

This is a brief chapter that introduces you to Construct and tells you how to download it. If you need more information, the Construct 2 site is extremely helpful at http://www.scirra.com. The only thing  might have mentioned a bit more about is the licensing terms of Free, Personal, and Business, but you can read about it at https://www.scirra.com/store/construct-2. I think it's always good to know that you can use Construct 2 as a free version but are limited to a fixed number of events and a few other things. I'm assuming that all the examples work fine in the free version.

Bura doesn't give you a step-by-step guide to installation, but that's maybe okay. It's pretty easy! And you can find it at the Construct 2 site at https://www.scirra.com/manual/2/installing

The rest of the chapter covers basic concepts of how Construct 2 works and will get you comfortable without actually having to do anything.

Chapter 2 - Inputs and Controls

Most programming books would start Chapter 2 with some game programming, something like paddleball. However, John wisely walks you through the concepts and issues of using a keyboard, mouse, and touch for games. This is something that often just gets thrown in, but it is the fundamental part of every game. If you don't have a control of some kind (keyboard, mouse, or touch), you don't have a game. I particularly like him including touch, which is necessary for mobile gaming like Firefox OS. 

The chapter might be confusing for some because he doesn't use real code examples and doesn't show you how to set up a project so you can test the small examples. But if you read it just for the concepts, you're okay. 

Often readers want to just get started making things, but I like the idea of talking about some basics before you start programming, even when the programming is easier, such as Construct 2.

Chapter 3 - Variables and Arrays

This is a straight-forward chapter that you may think you want to skip if you've had any programming. But keep in mind two things. Not everyone may know about variables and arrays because Construct 2 is aimed at true beginners. And secondly, Construct 2 handles variables and arrays a little bit differently because it is not a straight programming language. You can create lots of games without understanding variables and even more without arrays. And I've noticed over the two years I've been playing with Construct 2 that one of the frequent questions on the excellent Construct 2 forum is "How do arrays work?" So give it a read even if you are a rock star programmer.

Chapter 4 - Game Mechanics

John defines game mechanics as "... how a game works and how a game feels." Again, this book is aimed at beginners and people who are non-programmers (and people like me who are in a hurry). He lists a few game mechanics:
You get the idea. Mechanics are something people often know, but I personally love looking at game mechanics and I might even write a book on it using Construct 2 for examples! One of my favorite places for game mechanics actually covers board games, but it is really deep (but that makes sense since board games have been around a long, long time). If you want to see amazing lists of abstract game mechanics, check out 51 basic mechanics at http://boardgamegeek.com/browse/boardgamemechanic.

Anyway, John talks about game mechanics for video games and also touches on emotions, which is good because that's what games are really about. Now I would write a whole book about it, but not for beginners, but John covers the basics. After these first four chapters, you will be ready to create a game. 

Chapter 5 - Making a Simple Shooter

I hope all readers were patient and read through the first four chapters. If they did, they will be well prepared for making a real game. John doesn't skimp here. This is an excellent, detailed walkthrough on how to spawn enemies, shoot them with bullets, and survive! The explanation is crystal clear and very good. He covers keyboard and mouse, but not touch. This is a very simple game and the graphics are just circles and squares, but you can definitely take what he's given you and make shooting games. 

Chapter 6 - Making a Tower Defense Game

This chapter would make me buy the book even if I didn't know what Construct 2 was. There are lots of books that include details on how to make a shooter, but I haven't seen any that explain how to do Tower Defense. That might be because Tower Defense is a newer type of game. John suggests that you Google "Tower Defense" if you don't know what that is, and there are lots of neat Tower Defense games you can play for free. Essentially you have bad guys invading your land and you set up towers to defend your land. This is more of a strategy game than an action game, but each round is quick and its fun to see if your defenses can stop the enemy.

John shows you how to use touch for this game and that is very useful. Again, he does a great job of walking you through the many steps needed to make a more complex game, but I never felt lost while he was doing that, and that may because he never goes more than a short paragraph without showing you a screenshot of what you must do for that step. A book like this is heavy on the screenshots, but that's what you need because Construct 2 is primarily visual. 

For example, I wrote a recent post on how to do a very simple platform game using Construct 2 and it used almost 30 screenshots! That's a lot and I'm surprised Google didn't complain. You can read my post at http://firefoxosgaming.blogspot.com/2014/06/platform-game-using-construct-2-game.html. So I am saying that he did a good job because it's hard to juggle all those screenshots!

Definitely I am going to follow his chapter and see if I can make a nifty Tower Defense game. But there is another game to come.

Chapter 7 - Making a Puzzle Physics Game

One of the things that sets Construct 2 ahead of just coding it yourself is that it has a lot of physics you can use. What is physics? It's giving each object properties that correspond to objects in the real world. If a ball hits a tall block, the ball will bounce off, and the block will start to shake. If you hit it hard enough, the block will fall over. 

One of the reasons that Angry Birds was so popular was that it was one of the first games that used physics in a really great way. It was fun to shoot birds at the blocky buildings and see if you could do it in just the right way to make the blocks fall and crush the pigs. 

Well, this chapter is how to do something like Angry Birds. No birds, no pigs, but you have a cannon and you have blocks that you will shoot at. And here's a picture from the book to give you the idea:

He adds a goal ball on top of the towers that you want to fall down when your cannon ball hits the towers:

Pretty cool, huh? Like I said earlier, I've seen a lot of shooter coverage in various game programming books (I've probably bought them all), but I have never seen Tower Defense or Angry Birds.

The reason for this is that programming these examples would take hundreds of lines of code but Construct 2 can do it with some drag and drop, a few variables, add this and that, and you're done. 

So there's only three games here, but games two and three are really good examples and definitely not trivial. I can't emphasize enough how well John Bura explains each step as you go along. 

Again, I would never think of creating an Angry Birds type of game but I might now. Of course there are a thousand variations but the physics are there for the taking. Annoyed Protozoa, anyone?

Chapter 8 - Exporting Your Game

As I explained earlier in this post, Construct 2 can create games for 16 platforms and the number is growing all the time. Right now the export for Firefox OS is perfect and the export for iOS and Android needs a little work, but the rest are pretty good. 

Chapter 8 covers exporting to several platforms but some of what he's written has already changed as Construct 2 and the platforms change. But this chapter will give you a glimpse on what to do and where. Construct 2 has great tutorials for exporting to each platform and the tutorials are updated frequently and written by the Construct 2 gurus.

Appendix - Where to Go From Here

The appendix is simply a short talk on how to think about game design and what to do next. No biggy but certainly worth a quick glance. He does give the valuable advice to work on small games that you can do instead of trying to compete with the big game companies. He talks a little bit about his own game company (Mammoth Interactive) and closes with some good tips.

My Summary

I can really recommend this book to anyone who wants to learn Construct 2 quickly and easily. The flow of ideas is good, the games are actually ones you might want to create and expand upon. The book is reasonably priced and you won't be sorry you bought it!

I won't rate this book, I'll just say buy it. Recommended! You can get more information about it from the wonderful folks at Packt at https://www.packtpub.com/game-development/construct-2-game-development-example.

What's Next for Bob?

I'm heading out in search of a few more long-lost friends and should be back at blog-making by October 1st. Unless, according to Fred Hoyle, October the First Is Too Late. But around then. 

What's better than obscure old science fiction titles? How about The Gods Hate Kansas? 


Which later had a paper back edition in 1964. But I digress.

I'm thinking about doing two different things:

1. Write a real-live RPG in HTML5 native code for the Firefox OS tablet and then use "Responsive Game Design" to shrink it down to a few different Firefox OS phones. 

2 . Start working on a Construct 2 game mechanics series. There's a lot of interesting stuff in Construct 2 that could use some detailed explanation, especially in terms of what techniques work most efficiently. 

Until then, stay tuned, but not iTuned!

September 08, 2014 06:05 AM

September 05, 2014

FirefoxOS – Benoit Girard's Blog

B2G Performance Polish: Unlock Animation (Part 1)

I’ve decided to start a blog series documenting my workflow for performance investigation. Let me know if you find this useful and I’ll try to make this a regular thing. I’ll update this blog to track the progress made by myself, and anyone who wants to jump in and help.

I wanted to start with the b2g unlock animation. The animation is O.K. but not great and is core to the phone experience. I can notice a delay from the touch up to the start of the animation. I can notice that the animation isn’t smooth. Where do we go from here? First we need to quantity how things stand.

Measuring The Starting Point

The first thing is to grab a profile. From the profile we can extract a lot of information (we will look at it again in future parts). I run the following command:

./profile.sh start -p b2g -t GeckoMain,Compositor
*unlock the screen, wait until the end of the animation*
./profile.sh capture
*open profile_captured.sym in http://people.mozilla.org/~bgirard/cleopatra/*

This results in the following profile. I recommend that you open it and follow along. The lock animation starts from t=7673 and runs until 8656. That’s about 1 second. We can also note that we don’t see any CPU idle time so we’re working really hard during the unlock animation. Things aren’t looking great from a first glance.

I said that there was a long delay at the start of the animation. We can see a large transaction at the start near t=7673. The first composition completes at t=7873. That mean that our unlock delay is about 200ms.

Now let’s look at how the frame rate is for this animation. In the profile open the ‘Frames’ tab. You should see this (minus my overlay):

Lockscreen Frame Uniformity

Alright so our starting point is:

Unlock delay: 200ms

Frame Uniformity: ~25 FPS, poor uniformity

Next step

In part 2 we’re going to discuss the ideal implementation for a lock screen. This is useful because we established a starting point in part 1, part 2 will establish a destination.


September 05, 2014 08:23 PM

August 29, 2014

FirefoxOS – Benoit Girard's Blog

Visual warning for slow B2G transaction landed

With the landing of bug 1055050, if you turn on the FPS counter on mobile you will now notice a rectangle around the screen edge to warning you that a transaction was out of budget.

What’s a transaction?

It’s running the rendering pipeline and includes (1) Running request animation frame and other refresh observers, (2) Flushing pending style changes, (3) Flushing and reflow any pending layout changes, (4) Building a display list, (5) Culling, (6) Updating the layer tree, (7) Sending the final to the compositor, (8) Syncing resources with the GPU. It does NOT include compositing which isn’t part of the main thread transaction. It does not warn for other events like slow running JS events.

Why is this important?

A transaction, just like any other gecko event, blocks the main thread. This means that anything else queued and waiting to be service will be delayed. This means that many things on the page/app will be delayed like: animations, typing, canvas, js callbacks, timers, the next frame.

Why 200ms?

200ms is already very high. If we want anything in the app to run at 60 FPS that doesn’t use a magical async path then any event taking 16ms or more will cause noticeable stutter. However we’re starting with a 200ms threshold to focus on the bigger items first.

How do I fix a visual warning?

The warning as just provided as a visual tool.


August 29, 2014 06:22 PM

August 18, 2014

Category: Firefox OS | J. Ryan Stinnett

WebIDE enabled in Nightly

I am excited to announce that WebIDE is now enabled by default in Nightly (Firefox 34)! Everyone on the App Tools team has been working hard to polish this new tool that we originally announced back in June.

Features

While the previous App Manager tool was great, that tool's UX held us back when trying support more complex workflows. With the redesign into WebIDE, we've already been able to add:

Transition

All projects you may have created previously in the App Manager are also available in WebIDE.

While the App Manager is now hidden, it's accessible for now at about:app-manager. We do intend to remove it entirely in the future, so it's best to start using WebIDE today. If you find any issues, please file bugs!

What's Next

Looking ahead, we have many more exciting things planned for WebIDE, such as:

If there are features you'd like to see added, file bugs or contact the team via various channels.

August 18, 2014 03:44 PM

August 15, 2014

FirefoxOS – William Lachance's Log

A new meditation app

I had some time on my hands two weekends ago and was feeling a bit of an itch to build something, so I decided to do a project I’ve had in the back of my head for a while: a meditation timer.

If you’ve been following this log, you’d know that meditation has been a pretty major interest of mine for the past year. The foundation of my practice is a daily round of seated meditation at home, where I have been attempting to follow the breath and generally try to connect with the world for a set period every day (usually varying between 10 and 30 minutes, depending on how much of a rush I’m in).

Clock watching is rather distracting while sitting so having a tool to notify you when a certain amount of time has elapsed is quite useful. Writing a smartphone app to do this is an obvious idea, and indeed approximately a zillion of these things have been written for Android and iOS. Unfortunately, most are not very good. Really, I just want something that does this:

  1. Select a meditation length (somewhere between 10 and 40 minutes).
  2. Sound a bell after a short preparation to demarcate the beginning of meditation.
  3. While the meditation period is ongoing, do a countdown of the time remaining (not strictly required, but useful for peace of mind in case you’re wondering whether you’ve really only sat for 25 minutes).
  4. Sound a bell when the meditation ends.

Yes, meditation can get more complex than that. In Zen practice, for example, sometimes you have several periods of varying length, broken up with kinhin (walking meditation). However, that mostly happens in the context of a formal setting (e.g. a Zendo) where you leave your smartphone at the door. Trying to shoehorn all that into an app needlessly complicates what should be simple.

Even worse are the apps which “chart” your progress or have other gimmicks to connect you to a virtual “community” of meditators. I have to say I find that kind of stuff really turns me off. Meditation should be about connecting with reality in a more fundamental way, not charting gamified statistics or interacting online. We already have way too much of that going on elsewhere in our lives without adding even more to it.

So, you might ask why the alarm feature of most clock apps isn’t sufficient? Really, it is most of the time. A specialized app can make selecting the interval slightly more convenient and we can preselect an appropriate bell sound up front. It’s also nice to hear something to demarcate the start of a meditation session. But honestly I didn’t have much of a reason to write this other than the fact than I could. Outside of work, I’ve been in a bit of a creative rut lately and felt like I needed to build something, anything and put it out into the world (even if it’s tiny and only a very incremental improvement over what’s out there already). So here it is:

meditation-timer-screen

The app was written entirely in HTML5 so it should work fine on pretty much any reasonably modern device, desktop or mobile. I tested it on my Nexus 5 (Chrome, Firefox for Android)[1], FirefoxOS Flame, and on my laptop (Chrome, Firefox, Safari). It lives on a subdomain of this site or you can grab it from the Firefox Marketplace if you’re using some variant of Firefox (OS). The source, such as it is, can be found on github.

I should acknowledge taking some design inspiration from the Mind application for iOS, which has a similarly minimalistic take on things. Check that out too if you have an iPhone or iPad!

Happy meditating!

[1] Note that there isn’t a way to inhibit the screen/device from going to sleep with these browsers, which means that you might miss the ending bell. On FirefoxOS, I used the requestWakeLock API to make sure that doesn’t happen. I filed a bug to get this implemented on Firefox for Android.

August 15, 2014 02:02 AM

August 07, 2014

Ben Francis » FirefoxOS

Building the Firefox Browser for Firefox OS

Re-posted from Mozilla Hacks.

Boot to Gecko

As soon as the Boot to Gecko (B2G) project was announced in July 2011 I knew it something I wanted to contribute to. I’d already been working on the idea of a browser based OS for a while but it seemed Mozilla had the people, the technology and the influence to build something truly disruptive.

At the time Mozilla weren’t actively recruiting people to work on B2G, the team still only consisted of the four co-founders and the project was little more than an empty GitHub repository. But I got in touch the day after the announcement and after conversations with Chris, Andreas and Mike over Skype and a brief visit to Silicon Valley, I somehow managed to convince them to take me on (initially as a contractor) so I could work on the project full time.

A Web Browser Built from Web Technologies

On my first day Chris Jones told me “The next, highest-priority project is a very basic web browser, just a URL bar and back button basically.”

chris_jones

Chris and his bitesize browser, Taipei, December 2011

The team was creating a prototype smartphone user interface codenamed “Gaia”, built entirely with web technologies. Partly to prove it could be done, but partly to find the holes in the web platform that made it difficult and fill those holes with new Web APIs. I was asked to work on the first prototypes of a browser app, a camera app and a gallery app to help find some of those holes.

You might wonder why a browser-based OS needs a browser app at all, but the thinking for this prototype was that if other smartphone platforms had a browser app, then B2G would need one too.

The user interface of the desktop version of Firefox is written in highly privileged “chrome” code using the XUL markup language. On B2G it would need to be written in “content” using nothing but HTML, CSS and JavaScript, just like all the other apps. That would present some interesting challenges.

In the beginning, there was an <iframe>

It all started with a humble iframe, a text input for the URL bar and a go button, in fact you can see the first commit here. When you clicked the go button, it set the src attribute of the iframe to the contents of the text input, which caused the iframe to load the web page at that URL.

first_commit

First commit, November 2011

The first problem with trying to build a web browser using an iframe is that the same-origin policy in JavaScript prevents you accessing just about any information about what’s going on inside it if the content comes from a different origin than the browser itself. In particular, it’s not possible to access the contentWindow property and all of the information that gives access to. This policy exists for good reasons so in order to build a fully functional web browser we would have to figure out a way for a privileged web app to safely poke holes in that cross-origin boundary to get just enough information to do its job, but without creating serious security vulnerabilities or compromising the user’s privacy.

Another problem we came across quite quickly was that many web authors will go to great lengths to prevent their web site being loaded inside an iframe in order to prevent phishing attacks. A web server can send an X-Frame-Options HTTP response header instructing a user agent to simply not render the content, and there are also a variety of techniques for “framebusting” where a web site will actively try to break out of an iframe and load itself in the parent frame instead.

It was quickly obvious that we weren’t going to get very far building a web browser using web technologies without evolving the web technologies themselves.

The Browser API

I met Justin Lebar at the first B2G work week in Taipei in December 2011. He was tasked with modifying Gecko to make the browser app on Boot to Gecko possible. To me Gecko was (and largely still is) a giant black box of magic spells which take the code I write and turn it into dancing images on the screen. I needed a wizard who had a grasp on some of these spells, including a particularly strong spell called Docshell which only the most practised of wizards dare peer into.

justin

Justin at the first B2G Work Week in Taipei, December 2011

When I told Justin what I needed he made the kinds of sounds a mechanic makes when you take your car in for what you think is a simple problem but turns out costing the price of a new car. Justin had a better idea than I did as to what was needed, but I don’t think either of us realised the full scale of the task at hand.

With the adding of a simple boolean “mozbrowser” attribute to the HTML iframe element in Gecko, the Browser API was born. I tried adding features to the browser app and every time I found something that wasn’t possible with current web technologies, I went back to Justin to get him to cast a new magic spell.

There were easier approaches we could have taken to build the browser app. We could have added a mechanism to allow the browser to inject scripts into the iframe and communicate freely with the content inside, but we wanted to provide a safe API which anyone could use to build their own browser app and this approach would be too risky. So instead we built an explicit privileged API into the DOM to create a new class of iframe which could one day become a new standard HTML tag.

Keeping the Web Contained

The first thing we did was to try to trick web pages loaded inside an iframe into thinking they were not in fact inside an iframe. At first we had a crude solution which just ignored X-Frame-Options headers for iframes in whitelisted domains that had the mozbrowser attribute. That’s when we discovered that some web sites are quite clever at busting out of iframes. In the end we had to take other measures like making sure window.top pointed at the iframe rather than its parent so a web site couldn’t detect that it had a parent, and eventually also run every browser tab in its own system process to completely isolate them from each other.

Once we had the animal that is the web contained, we needed to poke a few air holes to let it breathe. There’s some information we need to let out of the iframe in the form of events: when the location, title or icon of a web page changes (locationchange, titlechange and iconchange); when a page starts and finishes loading (loadstart, loadend) and when the security characteristics of the currently loaded page changes (securitychange). This all allows us to keep the address bar and title bar up to date and show a progress indicator.

The browser app needs to be able to navigate the iframe by telling it to goBack(), goForward(), stop() and reload(). We also need to be able to explicitly ask for information like characteristics of the session history (getCanGoBack(), getCanGoForward()) to determine which navigation buttons to display.

With these basics in place it was possible to build a simple functional browser app.

The Prototype

The Gaia project’s first UX designer was Josh Carpenter. At an intensive work week in Paris the week before Mobile World Congress in February 2012, Josh created UI mockups for all the basic features of a smartphone, including a simple browser, and we built a prototype to those designs.

josh

Josh and me plotting over a beer in Paris.

 

The prototype browser app could navigate web content, keep it contained and display basic information about the content being viewed. This would be the version demonstrated at MWC in Barcelona that year.

mwc_browser

Simple browser demo for Mobile World Congress, February 2012

Building a Team

At a work week in Qualcomm’s offices in San Diego in May 2012 I was able to give a demo of a slightly more advanced basic browser web app running inside Firefox on the desktop. But it was still very basic. We needed a team to start building something good enough that we could ship it on real devices.

browser_inception

“Browser Inception”, San Diego May 2012

San Diego was also where I first met Dale Harvey, a brave Scotsman who came on board to help with Gaia. His first port of call was to help out with the browser app.

dale

Dale Getting on Board in San Diego, May 2012

One of the first things Dale worked on was creating multiple tabs in the browser and even adding a screenshotting spell to the Browser API to show thumbnails of browser tabs (I told you he was brave).

By this time we had also started to borrow Larissa Co, a brilliant designer from the Firefox team, to work on the interaction design and Patryk Adamczyk, formerly of RIM, to work on the visual design for the browser on B2G. That was when it started to look more like a Firefox browser.

start_page

Early UI Mockup, July 2012

Things that Pop Up

Web pages like to make things pop up. For a start they like to alert(), prompt() or confirm() things with you. Sometimes they like to open() a new browser window (and close() them again), open a link in a _blank window, ask you for a password, ask for your permission to do something, ask you to select an option from a menu, open a context menu or confirm re-sending the contents of a form.

alert

An alert(), version 1.0

All of this required new events in the Browser API, which meant more spells for Justin to cast.

Scroll, Pan and Zoom

Moving around web pages on web devices works a little differently from on the desktop. Rather than scroll bars or a scroll wheel on a mouse it uses touch input and a system called Asynchronous Pan and Zoom to allow the user to pan around a web page by dragging it and scrolling it using “kinetic scrolling” which feels like it has some physics to it.

The first implementation of kinetic scrolling was written in JavaScript by Frenchman and Gaia leader Vivien Nicolas, specifically for Gaia, but it would later be written in a cross-platform way in Gecko to unify the code used on B2G and Android.

One of the trickier interactions to get right was that we wanted the address bar to hide as you scrolled down the page in order to make more room for content, then show again when you scroll back to the top of the page.

This required adding asyncscroll events which tapped directly into the Asynchronous Pan and Zoom code so that the browser knew not only when the user directly manipulated the page, but how much it scrolled based on physics, asynchronously from the user’s interaction.

Storing Stuff

One of the most loved features of Firefox is the “Awesomebar”, a combined address bar, search bar (and on mobile, title bar) which lets you quickly get to the content you’re looking for. You type a few characters and immediately start to see matching web pages from your browsing history, ranked by a “frecency” algorithm.

On the desktop and on Android all of this data is stored in the “Places” database as part of privileged “chrome” code. In order to implement this feature in B2G we would need to use the local storage capabilities of the web, and for that we chose IndexedDB. We built a Places database in IndexedDB which would store all of the “places” a user visits on the web including their URL, title and icon, and store all the times the user visited that page. It would also be used to store the users bookmarks and rank top sites by “frecency”.

awesomebar

Awesomebar, version 1.0

Clearing Stuff

As you browse around the web Gecko also stores a bunch of data about the places you’ve been. That can be cookies, offline pages, localStorage, IndexedDB databases and all sorts of other bits of data. Firefox browsers provide a way for you to clear all of this data, so methods needed to be added to the Browser API to allow this data to be cleared from the browser settings in B2G.

settings

Browser settings, version 1.0

Handling Crashes

Sometimes web pages crash the browser. In B2G every web app and every browser tab runs in its own system process so that should the worst happen, it will only cause that one window/tab to crash. In fact, due to the memory constraints of the low-end smartphones B2G would initially target, sometimes the system will intentionally kill a background app or browser tab in order to conserve memory. The browser app needs to be informed when this happens and needs to be able to recover seamlessly so that in most cases the user doesn’t even realise a process was killed. Events were added to the Browser API for this purpose.

crash

Crashed tab, version 1.0

Talking to Other Apps

Common use cases of a mobile browser are for the user to want to share a URL using another app like a social networking tool, or for another app to want to view a URL using the browser.

B2G implemented Web Activities for this purpose, to add a capability to the web for apps to interact with each other, but in an app-agnostic way. So for example the user can click on a share button in the browser app and B2G will fire a “share URL” Web Activity which can then be handled by any installed app which has registered to handle that type of Web Activity.

share

Share Web Activity, version 1.2

Working Offline

Despite the fact that B2G and Gaia are built on the web, it is a requirement that all of the built-in Gaia apps should be able to function offline, when an Internet connection is unavailable or patchy, so that the user can still make phone calls, take photos and listen to music etc.. At first we started to use AppCache for this purpose, which was the web’s first attempt at making web apps work offline. Unfortunately we soon ran into many of the common problems and limitations of that technology and found it didn’t fulfill all of our requirements.

In order to ship version 1.0 of B2G on time, we were forced to implement “packaged apps” to fulfill all of the offline and security requirements for built-in Gaia apps. Packaged apps solved our problems but they are not truly web apps because they don’t have a real URL on the Internet, and attempts to standardise them didn’t get much traction. Packaged apps were intended very much as a temporary solution and we are working hard at adding new capabilities like ServiceWorkers, standardised hosted packages and manifests to the web so that eventually proprietary packaged apps won’t be necessary for a full offline experience.

offline

Offline, version 1.4

Spit and Polish

Finally we applied a good deal of spit and polish to the browser app UI to make it clean and fluid to use, making full use of hardware-accelerated CSS animations, and a sprinkling of Firefoxy interaction and visual design to make the youngest member of the Firefox browser family feel consistent with its brothers and sisters on other platforms.

Shipping 1.0

At an epic work week in Berlin in January 2013 hosted by Deutsche Telekom the whole B2G team, including engineers from multiple competing mobile networks and device manufacturers, got together with the common cause of shipping B2G 1.0, in time to demo at Mobile World Congress in Barcelona in February. The team sprinted towards this goal by fixing an incredible 200 bugs in one week.

berlin

Version 1.0 Team, Berlin Work Week, January 2013

In the last few minutes of the week Andreas Gal excitedly declared “Zarro Gaia Boogs”, signifying version 1.0 of Gaia was complete, with the rest of B2G to shortly follow over the weekend. Within around 18 months a dedicated team spanning multiple organisations had come together working entirely in the open to turn an empty GitHub repository into a fully functioning mobile operating system which would later ship on real devices as Firefox OS 1.0.1.

zarro_boogs

Zarro Gaia Boogs, January 2013

v1

Browser app v1.0

So having attended Mobile World Congress 2012 with a prototype and a promise to deliver commercial devices into the market, we were able to return in 2013 having delivered on that promise by fully launching the “Firefox OS” brand with multiple devices on multiple mobile networks with a launch that really stole the show at the biggest mobile conference in the world. Firefox OS had arrived.

mwc

Mobile World Congress, Barcelona, February 2013

1.x

Firefox OS 1.1 quickly followed and by the time we started working on version 1.2 the project had grown significantly. We re-organised into autonomous agile teams focused on product areas, the browser app being one. That meant we now had a dedicated team with designers, engineers, a test engineer, a product manager and a project manager.

browser_team

The browser team, London work week, July 2013

Firefox OS moved to a rapid release “train model” of development like Firefox, where a new version is delivered every 12 weeks. We quickly added new features and worked on improving performance to get the best out of the low end hardware we were shipping on in emerging markets.

v1.4

Browser app v1.4

“Haida”

Version 1.0 of Firefox OS was very much about proving that we could build what already exists on other smartphones, but entirely using open web technologies. That included a browser app.

Once we’d proved that was possible and put real devices on shelves in the market it was time to figure out what would differentiate Firefox OS as a product going forward. We wanted to build something that doesn’t just imitate what’s already been done, but which plays to the unique strengths of the web to build something that’s true to Mozilla’s DNA, is the best way to experience the web, and is the platform that HTML5 deserves.

Below is a mockup I created right back towards the start of the project at the end of 2011, before we even had a UX team. I mentioned earlier that the Awesomebar is a core part of the Firefox experience in Firefox browsers. My proposal back then was to build a system-wide Awesomebar which could search the whole device, including your apps and their contents, and be accessible from anywhere in the OS.

b2g_awseomescreen

Very early mockup of a system-wide Awesomebar, December 2011

At the time, this was considered a little too radical for version 1.0 and our focus really needed to be on innovating in the web technology needed to build a mobile OS, not necessarily the UX. We would instead take a more conservative approach to the user interface design and build a browser app a lot like the one we’d built for Android.

In practice that meant that we in fact built two browsers in Firefox OS. One was the browser app which managed the world of “web sites” and the other was the window manager in the system app which managed the world of “web apps” .

In reality on the web there isn’t so much of a distinction between web apps and web sites – each exists on a long continuum of user experience with a very blurry boundary in the middle.

In March 2013, with Firefox OS 1.0 out of the door, Josh Carpenter put me in touch with Gordon Brander, a member of the UX team who had been thinking along the same lines as me. In fact Gordon being as much of an engineer as he is a designer, had gone as far as to write a basic prototype in JavaScript.

rocketbar_prototype

Gordon’s Rocketbar Prototype, March 2013

Gordon and I started to meet weekly to discuss the concept he had by then codenamed “Rocketbar”, but it was a bit of a side project with a few interested people.

In April 2013 the UX team had a summit in London where they got together to discuss future directions for the user experience of Firefox OS. I was lucky enough to be invited along to not only observe but participate in this process, Josh being keen to maintain a close collaboration between Design and Engineering.

We brainstormed around what was unique about the experience of the web and how we might create a unique user experience which played to those strengths. A big focus was on “flow”, the way that we can meander through the web by following hyperlinks. The web isn’t a world of monolithic apps with clear boundaries between them, it is an experience of surfing from one web site to another, flowing through content.

ux_workshop

Brainstorming session, London, April 2013

In the coming weeks the UX team would create some early designs for a concept (eventually codenamed “Haida”) which would blur the lines between web apps and web sites and create a unique user experience which flows like the web does. This would eventually include not only the “Rocketbar”, which would be accessible across the whole OS and seamlessly adapt to different types of web content, but also “sheets”, which would split single page web apps into multiple pages which you could swipe through with intuitive edge gestures. It would also eventually include a content model based around live apps which you can surf to, use, and then bookmark if you choose to, rather than monolithic apps which you have to install from a central app store before you can use them.

In June 2013 a small group of designers and engineers met in Paris to develop a throwaway prototype of Haida, to rapidly iterate on some of the more radical concepts and put them through user testing.

haida_team

Haida Prototyping, Paris, June 2013

josh_and_gordon

Josh and Gordon working in a highly co-ordinated fashion, Paris, June 2013

haida_engineers

Wizards at work, Paris, June 2013

2.x and the Future

Fast forward to the present and the browser team has been merged into the “Systems Front End” team. The results of the Haida prototyping and user testing are slowly starting to make their way into the main Firefox OS product. It won’t happen all at once, but it will happen in small pieces as we iterate and learn.

In version 2.0 of Firefox OS the homescreen search feature from 1.x will be replaced with a new search experience developed in conjunction with a new homescreen, implemented by Kevin Grandon, which will lay the foundations for “Rocketbar”. In version 2.1 our intention is to completely merge the browser app into the system app so that browser tabs become “sheets” alongside apps in the task manager and the “Rocketbar” is accessible from anywhere in the OS. The Rocketbar will adapt to different types of web content and shrink down into the status bar when not in use. Edge gestures will allow you to swipe between web apps and browser windows and eventually apps will be able to spawn multiple sheets.

rocketbar

UI Mockups of Rocketbar in expanded and collapsed state, July 2014

In parallel we see the evolution of web standards around manifests, packages and webviews and ongoing discussions around what defines the scope of an “app”.

Version 1.x of Firefox OS was built with web technologies but still has quite a similar user experience to other mobile platforms when it comes to installing and using apps, and browsing the web. Going forward I think you can expect to see the DNA of the web come through into the user interface with a unified experience which breaks down the barriers between web apps and web sites, allowing you to freely flow between the two.

Firefox OS is an open source project developed completely in the open. If you’re interested in contributing to Gaia, take a look at the “Developing Gaia” page on MDN. If you’re interested in creating your own HTML5 app to run on Firefox OS take a look at the “App Center“.

August 07, 2014 02:41 PM

August 05, 2014

E.J. BLOG » FxOS

[FxOS] Why we need to squash commits ?

This is what I found in our Taipei office “Squash bugs for a better (Life) Web”

squash

Concepts about version control

When using version control tools like githg … etc , we all have one common concept in mind that we have to commit often to make sure all stuffs can be tracked and understandable when reading histories. By doing so, sometimes we may break a bug to many chunks and this would make us hard to track at the first glimpse. All you can do is trying to find the first commit about the bug and keeps reading commit by commit to know the whole story.

For personal / small project, I think this is ok. But for a big project like Gaia or some other open source projects, this would not be a good idea to do so.

In Gaia

Go check Gaia repository first, you will notice there are more than 35,000 commits and 470+ contributors in this project. To be honest, this is really a huge repository. There are so many people working at the same time in different timezones trying to make FirefoxOS better, so there must be really hard to control. But after being part of Mozillian, I finally understand how they try to maintain it.

 

commit

Our latest commit history

As you may see, for us, each commit will be reflected to one bug with bug number on the title. By doing so, we can easily understand what this patch is for and what it is going to fix. With bug id, I can easily search Mozilla’s bugzilla to understand the discussion histories and design specs there.

In addition to this, if each commit is mapped to each bug, then we can easily revert any patch that broke Gaia! For example, you can check the picture and notice that there is a revert commit made by crh0716. That’s because the patch broken something in Gaia, anyone can go ahead and find out the patch then back it out !

It’s amazing, isn’t it ?!

So, how to squash commits !?

If you read this line, it means you did read the whole article and want to know something about this ! From my experiences, I noticed there are less people knowing how to do this (I met few contributors and they all messed the git history up in the end xD ! It happens every time LOL).

So, I made a quick screenshot to help you understand how to do this. Just to remind you, there may be some other ways to achieve this, but this is how I do in my daily life.

Hope this helps ! And any feedback or comment is appreciated ! Cheeeeeers !

August 05, 2014 08:59 AM

July 29, 2014

firefox os – Blargon7

Performance testing Firefox OS on reference devices

A while back I wrote about the LEGO harness I created for Eideticker to hold both the device and camera in place. Since then there has been a couple of iterations of the harness. When we started testing against our low-cost prototype device, the harness needed modifying due to the size difference and position of the USB socket. At this point I tried to create a harness that would fit all of our current devices, with the hope of avoiding another redesign.

Eideticker harness v2.0 If you’re interested in creating one of these yourself, here’s the LEGO Digital Designer file and building guide.

Unfortunately, when I first got my hands on our reference device (codenamed ‘Flame’) it didn’t fit into the harness. I had to go back to the drawing board, and needed to be a little more creative due to the width not matching up too well with the dimensions of LEGO bricks. In the end I used some slope bricks (often used for roof tiles) to hold the device securely. A timelapse video of constructing the latest harness follows.

 

 

We now are 100% focused on testing against our reference device, so in London we have two dedicated to running our Eideticker tests, as shown in the photo below.

Eideticker harness for FlameAgain, if you want to build one of these for yourself, download the LEGO Digital Designer file and building guide. If you want to learn more about the Eideticker project check out the project page, or if you want to see the dashboard with the latest results, you can find it here.

July 29, 2014 04:08 PM

July 28, 2014

LPo

How to Sanitize Thunderbird and Enigmail

How to sanitize encrypted email to not disclose Thunderbird or Enigmail.

July 28, 2014 12:00 PM