Firefox OS support lands in EnyoJS 2.2

Originally the app framework for HP webOS, the Enyo framework has since evolved into a full-featured cross-platform cross-device HTML5 framework for the modern web developer. Following the philosophy of reusing code and rapid quality development, Enyo uses an object-oriented encapsulation model, where you build components you can move around, extend upon, and reuse in a modular manner. Hiding the messy platform-specific quirks, if you code an Enyo app once, it’ll work the same in Internet Explorer, Firefox, Google Chrome, iOS, Android, etc. Now, with its latest v2.2 stable release it extended its list of supported platforms to include Windows 8, Windows Phone 8, BlackBerry 10, and yes, Firefox OS!

Introduction video/talk to what Enyo is.

Back in January, I had the pleasure of attending one of the Firefox OS developer workshop events. After testing out Enyo on Firefox OS devices, a few issues were discovered, which I’m happy to say have since been fixed by my recent pull requests to Enyo’s open source repository. So if you’re wanting to use Enyo to create new apps, or even use existing Enyo apps on Firefox OS, below are a few things to keep in mind.

Platform Detection

As much as much as Enyo aims to be platform-agnostic, sometimes you just need to know what you’re running on. The enyo.platform JavaScript object is here to help in that regard. As a side benefit of the changes I made, if you’re running on Firefox OS, you get the enyo.platform.firefoxOS property, which returns the OS version number (undefined property on other platforms). Thanks to this, you can do conditional changes and features just for Firefox OS:

if(enyo.platform.firefoxOS) {
    //do super awesome Firefox OS-specific feature

The :active:hover Selector Workaround

Whenever a button or control in Enyo is pressed, it simply uses the “:active:hover” to change the styling and look in a pressed-state. However, Firefox OS doesn’t support this out of the philosophy that a finger is not a mouse (at least that’s how it was explained to me). After trying out a few potential workarounds, the easiest solution is by using events to fill in the gap.

The Enyo framework makes itself platform-independent by not only harnessing standard and custom browser events, but also by normalizing, and if necessary, synthesizing events into a standard predictable set of events that then occur on every device. These events include:

  • down
  • up
  • tap
  • move
  • enter
  • leave
  • hold
  • release
  • holdpulse
  • flick
  • dragstart
  • drag
  • dragfinish
  • drop
  • dragover
  • dragout

There are a variety of ways to approach the problem, but for simplicity’s sake, it’s easy to focus on the down and leave events. The down event is whenever the mouse clicks down, or a finger touches down on a control, whereas the leave event is when the mouse/finger moves off of the control. We can use the down event to apply a CSS class, then the leave event to remove the styling.

So let’s say, for example, we want to have some text highlighted when clicked/tapped. We could make a “Highlightable” control in the following fashion:

    name: "Highlightable",

And define the CSS as:

.hl-text:active:hover {

And then use the “Hightlightable” kind like this:

    name: "App",
    components: [
            content:"This is a simple example of text that highlights when clicked/tapped on."
new App().renderInto(document.body);

Now to enact our workaround for Firefox OS, we can modify the CSS to:

.hl-text.pressed, .hl-text:active:hover {

From here, it’s a simple matter of adding and removing the pressed class on the events. We can use enyo.platform.firefoxOS to only apply the styling as needed. One little hitch: the Firefox OS simulator does in fact support :active:hover CSS selectors, as the mouse is in-use. Thankfully, we can further filter out the simulator from getting pressed styling applied by checking the value of the srcEvent.type property of the event data. The end result gets us this:

    name: "Highlightable",
    handlers: {
        ondown: "highlight",
        onleave: "unhighlight"
    highlight: function(inSender, inEvent) {
        if(enyo.platform.firefoxOS && inEvent.srcEvent.type !== "mousedown") {
    unhighlight: function(inSender, inEvent) {
        if(enyo.platform.firefoxOS && inEvent.srcEvent.type !== "mouseout") {

An expanded working demo is available on jsFiddle:

WebAppInstaller and the WebAppButton Component

To make the process of creating Firefox OS, Firefox Marketplace, and Chrome Webstore apps easier for Enyo developers, the third-party WebAppInstaller library consolidates the various installation formats into a unified API with the ability to check if a webapp is installed and to install a hosted webapp. Furthermore, included in the library is an Enyo control called WebAppButton, which is an “Install” button that installs the current hosted webapp, and will either hide itself or turn into an “Update” button depending on the way you configure it.

To demo this functionality, there is an installable Enyo sampler webapp (source code on GitHub)

Enyo 2.2 framework is available free under the Apache 2.0 license at
WebAppInstaller is available free under the MIT license at

About Jason Robitaille

A university student working towards a degree in computer science and a former Enyo framework intern, Jason is strongly focused on HTML5 web app development, with experience in webOS and cross-platform. Based in Winnipeg, Canada, he self-publishes his apps on and regularly contributes to opensource projects on GitHub.

More articles by Jason Robitaille…

About Robert Nyman [Editor emeritus]

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…


  1. kataran

    excellent work Jason…..

    March 6th, 2013 at 08:07

  2. Doug Reeder

    Thanks for doing the work, Jason! Enyo is a great framework for mobile development.

    March 6th, 2013 at 11:48

  3. buren

    Is it only me or is there still a 300ms delay on the button?

    March 6th, 2013 at 14:11

  4. Andre Alves Garzia

    Hey Jason,

    I used your patches to build a QR Decoder for Firefox OS using Enyo and got third place at a contest here in Brazil. I am finishing a WebActivities Enyo library and will post on github and the enyo gallery soon.

    So thanks again for all the code!


    March 6th, 2013 at 15:31

  5. Fawad Hassan

    I don’t know much about this framework. I took a tour and saw some sample on Enyo’s website. What I understood is it provides nice UI components, layouts, events, etc.

    1) Can you explain a bit what’s so special about it and why should we use it?

    2) Is it like jQuery Mobile or Dojo kind of all-in-one framework for mobile?

    3) Do this framework provide code structuring solution like Backbone or we need to use it along Backbone or some other framework?

    March 7th, 2013 at 01:04

    1. Robert Nyman [Editor]

      A lot of developers, especially coming from the webOS world, quite like the library. When it comes to features and support, it’s better to check the Enyo web site and talk to them about what’s in there, best practices etc.

      Good luck!

      March 7th, 2013 at 01:21

Comments are closed for this article.