HiDPI support, HTML5 notifications, Parallel JS, asm.js and more – Firefox Development Highlights

Time for another look at the latest developments with Firefox. This is part of our Bleeding Edge and Firefox Development Highlights series, and most examples only work in Firefox Nightly (and could be subject to change).

HiDPI support

We’re happy to say that ico/icns with multiple images are now supported: the highest resolution icon is now used on HiDPI/Retina displays.

Favicon implementation is described in bug 828508 and ico/icns is described in bug 419588.

Performance improvements/Snappy:

Numerous performance improvements have been made, such as faster startup, better scrolling on touchpads and smoother animations.

The most important improvement, however, is probably multithreaded image decoder. The result should be faster page loads and tab switching. All the nitty-gritty detalis are described in bug 716140.

HTML5

When it comes to the world of HTML5 & friends, we have some good additional support:

<input type=”range”>

We now support the <input type="range"> element in forms. To style it, you can use the ::-moz-range-progress:

::-moz-range-progress {
    background: #f00;
}
 
<input type="range">

You can see this <input type=”range”> demo in action on jsFiddle.

HTML5 notifications

HTML5 notifications have now been implemented. Basically, you ask for permission and then you can create a notification:

function authorizeNotification() {
    Notification.requestPermission(function(perm) {
        alert(perm);
    });
}
 
function showNotification() {
    var notification = new Notification("This is a title", {
        dir: "auto",
        lang: "",
        body: "This is a notification body",
        tag: "sometag",
    });
}

See the HTML5 notification demo in action on jsFiddle.

WebAudio API activated by default

WebAudio API has been activated by default in Firefox Nightly. Testers welcome, though there are still work to be done before it can be released.

JavaScript

Parallel JS

The first version of Parallel JS has landed for Firefox. A lot more details in the Parallel JS Lands article.

asm.js

We’re happy to say that asm.js is now in Firefox, scheduled to be released in Firefox 22! Luke Wagner has written more about it in asm.js in Firefox Nightly.

ES6 Arrow function syntax

We now support the ES6 Arrow function syntax

let square = x => x*x;
console.log(square(3));

CSS

@supports activated by default

We plan on releasing this with Firefox 22. More about @supports on MDN.

min-width and min-height ‘auto’ keyword

min-width and min-height 'auto' keyword is no more supported. It has been removed from CSS3 Flexbox. More about that in bug 848539.

CSS Flexbox has been re-enabled

Happy to let you know that CSS Flexbox has been re-enabled by default in Firefox 22, which is currently in Firefox Aurora!

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 http://robertnyman.com and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…

About Jean-Yves Perrier

Jean-Yves Perrier is a Tech Writer in the Developer Engagement team. He can be followed as @teoli2003 on Twitter.

More articles by Jean-Yves Perrier…

About Paul Rouget

Paul is a Firefox developer.

More articles by Paul Rouget…


25 comments

  1. thinsoldier

    Any idea when flexbox wrapping will be available?

    April 25th, 2013 at 14:10

    1. WulfTheSaxon

      It should be “near-ish term” per dholbert earlier today: https://bugzilla.mozilla.org/show_bug.cgi?id=702508#c15

      April 25th, 2013 at 19:18

  2. Daniel Holbert

    thinsoldier: hard to say; hopefully within a few firefox versions, probably somewhere in the mid-20’s. You can follow along at https://bugzilla.mozilla.org/show_bug.cgi?id=702508

    April 25th, 2013 at 17:06

  3. Adam Reineke

    Your code sample for ES6 arrows is showing > rather than >

    Also, adding a tabIndex attribute to these comment post fields that skips the spammer trap would be nice. I got caught when tabbing through the fields and I started typing. :-)

    April 25th, 2013 at 22:14

    1. Robert Nyman [Editor]

      Yep, unfortunate code escaping. Thanks about the tabindex, we’ll see what we can do.

      April 26th, 2013 at 01:41

  4. Screwtape

    Having HTML5 notifications is pretty cool, but I’m a little sad to see that it doesn’t integrate with my OS-native notification system (GNOME 3 on Linux). Poking about a bit in Bugzilla, I found bug 404738 which *seems* to have been WONTFIX’d by accident in a shuffle between different bugs proposing different technical approaches to the same goal.

    April 26th, 2013 at 00:41

    1. Robert Nyman [Editor]

      I believe the implementation presentation is still up for discussion.

      April 26th, 2013 at 01:41

  5. Walid Damouny

    HiDPI support is a nice addition although having SVG support will deprecate individual bitmap formats as a website icon. It will also provide better launcher icons for visually appealing Firefox bookmarking extensions and Firefox OS apps.

    April 26th, 2013 at 02:23

    1. nemo

      I have to disagree w/ SVG being the magic bullet.
      If you take a look in, oh, /usr/share/icons/Humanity you can see they have the same SVGs in a variety of sizes.
      Why? Because if you scale a high detail SVG down to 16×16 it looks unreadable, and if you scale up a low detail SVG it looks boring.
      Not unless the SVG had some way of specifying certain paths being disabled based on rendered size. Some media query in embedded CSS maybe. So. Basically making the SVG support multiple embedded images :)

      May 1st, 2013 at 12:19

      1. Walid Damouny

        You’re right on one thing, SVG scaled down to 16×16 is not good. The reason being that at such low resolutions, icons use visual cues and anti-aliased pixels to view an icon and perceive detail that simply is difficult to paint at such low pixel density. In other words we have a cutoff where bitmaps are better, and hence need two different formats for the different resolutions, bitmaps for low pixel count and vectors for high pixel count.

        To make my point clear see this image [https://bug828508.bugzilla.mozilla.org/attachment.cgi?id=699914] from this bug mentioned above [https://bugzilla.mozilla.org/show_bug.cgi?id=828508]. You can see that there are less pixels in the low resolution icon on a HiDPI monitor, but that pixel count will not be visible on a LowDPI monitor. Providing SVG icons as an option like websites currently provide iPad and iPhone icons for sites that get added to the home screen will mean adding a single line of HTML to a webpage without adding much complexity to the browser like when adding support for ico/icns with multiple images.

        May 1st, 2013 at 16:43

  6. Fabian

    The idea of notifications sounds nice, but I’m afraid it’s going to be heavily abused by advertisers. I know you can deny permission, but I fear that when notifications have become integrated in browsers you will have to keep clicking these permission notifications away while just randomly visiting pages. Well, we will probably just have to see how it goes :)

    April 26th, 2013 at 10:53

    1. Robert Nyman [Editor]

      I agree, there’s a risk there. However, as with any feature or API, it’s a delicate balance between what’s easy and good for the user while protecting them.

      April 29th, 2013 at 05:27

  7. xsoh

    Could the range be multi-value? I mean more than one slider.

    April 26th, 2013 at 21:32

    1. Robert Nyman [Editor]

      To my knowledge, only one value. But you can set min, max and step values with respective attributes.

      April 29th, 2013 at 05:26

      1. nemo

        To my disappointment, the range slider has no clear way to setup tick marks. Makes using it for picking a precise value in the range tricky, depending on the length of the slider.

        Was experimenting w/ various HTML5 controls for selecting a number in a range. The number field’s little spinbox arrows are too fiddly and annoying to use, and didn’t nicely use the horizontal space. Ended up using that anyway since it was still better than the range slider or a plain text field. I guess I could have written something custom in JS, but…

        May 1st, 2013 at 12:22

        1. Robert Nyman [Editor]

          The step attribute could help with making it easier to jump between predefined values. But yes, if any value is valid, it won’t help with the precision.

          May 2nd, 2013 at 02:10

          1. nemo

            Even w/ steps available the range slider doesn’t include, say, a number displayed on the left or right to indicate the selected value (you have to hack that in w/ JS). And without top/bottom tick marks and intermittent steps, the user has to drag around unnecessarily to figure out about where they should be.

            It is just too minimalist, and w/ no configuration options to remedy it :-/

            May 2nd, 2013 at 07:29

          2. Robert Nyman [Editor]

            Yep, those are fair points. You will need JavaScript to properly give the user feedback.

            May 2nd, 2013 at 13:45

  8. Hanush

    i dont get why firefox still doesnt support the date input field.. its a very useful one

    May 1st, 2013 at 12:04

    1. Robert Nyman [Editor]

      I’m not sure what the current state is on that, but personally I hope we will have it in Firefox.

      May 2nd, 2013 at 02:12

  9. Mathew Porter

    Im glad the support for HTML5 notifications is being put in place in FF so I can start experimenting.

    May 2nd, 2013 at 10:24

    1. Robert Nyman [Editor]

      Glad you like it!

      May 2nd, 2013 at 13:39

  10. Cyril

    Notifications are finally implemented, and that’s great news. Nevertheless, I did try the jsfiddle on FF23 on both W64 and Linux and nothing is shown. Is there an hidden pref to set ?

    May 2nd, 2013 at 22:38

    1. Robert Nyman [Editor]

      I tried it in Ubuntu with Xfce and it worked fine. Did you try clicking the grant button first?

      May 3rd, 2013 at 13:41

    2. KWierso

      It worked for me on Windows 8. The notification shows on the primary monitor, not the secondary one where I currently have Firefox open.

      May 16th, 2013 at 13:01

Comments are closed for this article.