Mozilla

Firefox 4 beta 1 is here – what’s in it for web developers?

Today we’re releasing the first beta-quality version of Firefox 4, which starts us down the path to a final release of Firefox 4. We’re handling this beta differently than we’ve done other releases. In previous betas we’ve made milestone-like releases. For this beta we’ll be making more frequent updates during the beta program. So if you download the beta build and run it you’ll likely get updates every two to three weeks, instead of a couple of months apart. We believe that this will give us the ability to reply to people’s feedback quickly and get fixes and changes tested earlier. This, in turn, will mean we’ll be able to release a much higher quality browser as a result.

First, let’s talk about feedback. This beta includes two ways to give us feedback.

The Feedback Button – Pictured above and included with the beta is a Feedback Add-on. This puts a big Feedback button on the right hand side of the browser that lets you give quick and easy feedback about something you like or something you don’t. We’ll be reviewing this feedback through the beta process, so please leave comments. The Add-On also uses Test Pilot to figure out how people use the browser – menus, how people use passwords, etc. But through this beta process we’ll also be using it to measure things like platform performance and other interesting data we need to build a great browser. Just like Test Pilot, no data will be collected without you knowing about it, you’ll always be asked before any collected data is sent from your computer to Mozilla, and that data will be subject to very strict privacy policies.

If you’re a web developer the beta process will be especially valuable. There are a lot of new features in Firefox 4.0b1 that weren’t in 3.6 – which we’ll go over – but we’ll keep adding and fixing features throughout the beta process and your feedback will be incredibly important. So please take the time to download the beta and try it. Run it all the time, if you can, and watch it change over time.

Performance

Firefox 4 contains a large number of performance improvements over Firefox 3.6. As a web developer you’re likely to notice big improvements in overall performance.

DOM and Style Performance – We’ve made huge improvements in our DOM and style resolution engine, meaning that pages that have complex CSS rules and selector matching will generally work faster and better. (On some tests in the Zimbra performance test suite we’ve seen a solid 2x improvement.)

Reduced IO in the page load path – One big area where we’ve made huge improvements in Firefox 4 vs. 3.6 is the removal of tons of I/O from the main UI thread. This means making sure that when we do history look-ups for coloring links based on browser history, that those look-ups are done off the main thread, to making sure that we’re not synchronously writing data to the HTTP cache on the main thread. This alone has improved the overall feel of the browser more than anything else.

JavaScript – The JavaScript engine is much faster as well, although beta 1 does not include the new JägerMonkey work. That work is well underway and will be landing through the beta process, and is already showing positive results.

Hardware Acceleration via Layers – We’ve also got excellent support in this beta for Hardware Acceleration. If you’re using HTML5 video and you go full screen, we’ll use OpenGL on Macs or Linux and DirectX 9 on Windows to accelerate video rendering. (As we expand our Gecko Layers work we’ll also be extending this acceleration to in-page content where it makes sense.)

Hardware Acceleration via D2D If you’re on Windows 7 or an updated Windows Vista we also have full support for D2D-enabled rendering. This can be a substantial performance improvement for many types of rendering and is also something the IE team is also doing for IE9. It’s not on by default in this beta but you can easily turn it on and try it out. The best demos that we’ve seen for D2D support are actually the IE Flying Images and the IE Flickr Explorer demo. Firefox actually performs wonderfully on these demos, better than the IE9 builds in most cases.

Out of process plugins – even for the Mac – We already delivered out of process plugins to Windows and Linux users using 3.6 a couple of weeks ago, but it’s now available on OSX as well. Moving plugins out of process improves stability, responsiveness and memory consumption. For OSX we have support for running Flash 10.1 out of process on OSX 10.6. (It requires support from 10.6 and changes to the event models for both Firefox and individual plugins.)

HTML5 support

Firefox has had early and excellent support for HTML5 and the beta release continues to build on that history.

HTML5 Forms – We’ve started to land support for many HTML5 forms. We’ll be landing more HTML5 form features during the beta process opportunistically depending on pretty tough shipping criteria.

HTML5 Sections – We now support HTML5 sections like <article>, <section>, <nav>, <aside>, <hgroup>, <header> and <footer>.

WebSockets – This release includes support for WebSockets, based on version -76 of the spec.

HTML5 History – We’ve also got support for the new HTML5 history items: pushState and replaceState. These are very important calls that make it easier to build pages-as-applications and can also be very important for improving privacy as you move from site to site.

HTML5 Parser – We’re also the first browser to fully support the HTML5 parsing algorithm, one of the most important parts of the HTML5 spec. The parser allows us to embed SVG and MathML directly into HTML content, but also promises developers the ability to have the same behaviour in different browsers, even when developers make mistakes in their mark-up. Our hope is that other browsers will follow us on this work since it’s one of the biggest interoperability parts of the HTML5 specification and will really help developers.

And, of course, we have support for HTML5 Canvas (including D2D hardware acceleration), Video and a huge pile of other HTML5 technologies.

HTML5 Video

WebM Support – The biggest change here so far is that we’ve got support for WebM. If you’re part of the Youtube HTML5 beta WebM videos should play pretty well.

Other, upcoming interfaces – Note that through the beta process we’ll also be adding support for a JavaScript-driven full screen API for video, support for the buffered attribute and be renaming the autobuffer attribute to preload.

Storage and File API

IndexedDBFirefox 4 beta 1 also includes a super-early snapshot of the new IndexedDB standard for storage. Due to the fast pace in changes in the standard, the object is available on the privately-namespaced window.moz_indexedDB object. This is a pretty complex item, and we’ll have more posts on it soon.

URI Support for the File API – We’ve also early support for the URI support inside of the File API. This means that it’s possible to process large amounts of data like images or videos from the File API without having to load the entire file into memory. You should also be able to reference private File API URLs in image and video tags for preview or manipulation.

FormData – We also have support for the FormData method, which makes it much easier to send complex data from the File API and other sources to servers.

Animation and Graphics

SMIL – We’ve added support for SVG Animation (SMIL.) If you’re running a 4.0 beta there are a huge number of beautiful examples on this page by David Dailey worth looking through.

SVG Everywhere – Later in the Firefox beta release cycle we’ll also be adding support for SVG-as-img and SVG-as-CSS-background. Most of that work is done, but it hasn’t landed yet.

CSS Transitions – This beta release contains a nearly complete implementation of CSS Transitions, privately namespaced with a -moz prefix. The only big things left here are the animation of transforms and gradients. (Gradients is still waiting on working group feedback, code for transitions is under review.)

WebGL – This build also has improved support for WebGL, although it is not yet on by default. (You can learn how to turn it on in an older post from Vlad.) The WebGL spec is on its way to a 1.0 release and is being implemented in Chrome, Safari and Firefox. We would like to ship it in Firefox 4, but that decision will be based on spec stability as well as the availability of drivers. If you’re on a Mac WebGL should work very well. On Windows with ATI and NVIDIA drivers, it should also work very well. Windows people with Intel drivers are in less luck due to very poor driver support from Intel. (Including your author!) Linux is more complicated due to wildly varying driver support – people with NVIDIA drivers seem to work well, others less so, but work is underway to help fix many issues on Linux.

CSS

Resizable textarea Elements – Textarea elements are now resizable by default. You can use the -moz-resize property to change the default.

New -moz-any selector – The -moz-any is a powerful selector that lets you replace large and complicated selectors with much smaller ones. Please see the post for more examples.

New CSS3 calc() support – This beta includes support for the new CSS3 calc() value. This lets you specify sizes that include a combination of percentages and absolute values and is hugely popular with developers. Please see the post on CSS3 calc for examples.

Selecting a section of a background image – You can now use the new -moz-image-rect selector to select only a section of a background for display.

Removed support for -moz-background-size – The -moz-background-size property has been renamed to its final background-size name. -moz-background-size is no longer supported.

DOM and Events

CSS Touch Source on Input Events – You can now tell if an input event came from a mouse or touch with event.mozInputSource.

Obtaining boundary rectangles for ranges – The Range object now has getClientRects() and getBoundingClientRect() methods.

Capturing mouse events on arbitrary elements – Support for the Internet Explorer-originated setCapture() and releaseCapture() APIs has been added.

Support for document.onreadystatechange – We now support the document.onreadystatechange.

Security

Content Security Policy – This beta contains support for Content Security Policy. CSP allows you to control what the browser is allowed to do when loading content from your site. CSP is built to mitigate Cross-site Scripting Attacks and Cross Site Request Forgery. It also contains an automated reporting mechanism so that admins can get reports of problems that may affect other browsers.

In Closing

So that’s about it for the start of the Firefox 4 beta. We’ll be adding a few more features during the beta release process and we’ll post about is as they land. And we’ll also have more information coming about some of these features in depth. And, of course, we’ll continue to work on performance through the beta process as well. Please test and post comments if you have them here, or use the Feedback system in Firefox.

Enjoy!

55 comments

Comments are now closed.

  1. Johannes Fahrenkrug wrote on July 6th, 2010 at 23:12:

    That looks absolutely fantastic, guys. Thank you for your hard work!

  2. Jon wrote on July 6th, 2010 at 23:40:

    I’ve been running Minefield nighties for a while, and I’m really impressed by what I’ve seen. Kudos to the Mozilla team.

    I really like the new UI, but I wonder why, when the browser window is maximized, the tabs do not appear alongside the orange firefox button, similar to how Chrome and Opera do it? This approach saves screen real estate, and makes it much easier to click on tabs, as the top of screen boundary helps you to quickly mouse to them without vertically overrunning. Any chance this will change for the final release?

    Also, I have my concerns about CSS transitions. From what I’ve read, it’s impossible to create complex easing functions, such as bounces and springs, be because the spec limits the timing function to a cubic bezier that cannot exceed the range 0 to 1. These sorts of transitions are common in JS animation libraries and built-in transitions are going to be somewhat limited without them. I actually sent an email to the www-style mailing list about this problem, but despite generating a little discussion, nothing was done.

  3. Maxence wrote on July 6th, 2010 at 23:53:

    Sounds good ! Im going to try

  4. jpvincent wrote on July 7th, 2010 at 02:38:

    I know what is not in it : firebug :)

    anyway, that’s a step to a better web, thanks

  5. bohwaz wrote on July 7th, 2010 at 03:29:

    What’s missing now is: stop doing sync on sqlite databases used in firefox each time a data is written.

    I’m forced to put my firefox profile in a ramdisk because of that behavior.

    And the worst part: no one can use *storage interfaces because of the latency created by this behavior. Yes *storage is hell slow in Firefox because each time you store something, Firefox makes a sync on the database file. Most of storage drives being slow, it makes localStorage and other interfaces unusable for most of websites.

    Still, SMIL and upcoming svg-in-img and svg-in-css are good news but still it’s a bit late, it’s years after other browsers implemented it…

    1. brightside wrote on July 7th, 2010 at 06:44:

      Calling sync when writing data to disk is the correct and proper way to write data to disk. If you do not call sync, the filesystem can not guarantee that the data has been written, because of fs optimization and caching. True, the EXT3 FS synched automatically every few seconds, but this is considered broken behavior and EXT4 does not do this. Thus, if Firefox running on a EXT4 filesystem did not call sync and you suddently experienced a powerfailure or crash, the result would be a corrupt profile.

      1. tiredofsync wrote on November 12th, 2010 at 09:52:

        Who cares about powerfailure that happens twice a year when you get minutes of delay everytime you uses the browser ?
        To hell with profile, link history and quick browsing if it doesn’t let me browse without interruption.

  6. aleem wrote on July 7th, 2010 at 06:11:

    Does it still require a restart after installing plugins?

    1. Christopher Blizzard wrote on July 15th, 2010 at 20:50:

      I assume you’re talking about add-ons, not plugins. (Plugins have never needed a restart, actually!)

      Add-ons for Firefox 4 can be installed without a restart, assuming that add-on supports it. (Note: add-ons built with the Jetpack SDK support this out of the box.) It’s up to the developer to support it, though.

  7. Marcel wrote on July 7th, 2010 at 06:36:

    Firebug 1.6a runs fine in firefox 4 beta .. just go the the firebug site and install it.

  8. Sevish wrote on July 7th, 2010 at 07:46:

    Absolutely sweet… I’ve been waiting for HTML5 Sections support. Will be trying out this beta later today.

  9. peteruhds wrote on July 7th, 2010 at 07:58:

    Exciting! Will the OpenType font features be supported in FireFox 4?
    http://hacks.mozilla.org/2009/10/font-control-for-designers/

    1. Christopher Blizzard wrote on July 15th, 2010 at 20:50:

      Big parts of the new font features just landed in Firefox a couple of days ago, actually! We’ll post about it soon.

  10. j2 wrote on July 7th, 2010 at 08:37:

    The Feedback button is shown in prime real estate for mousing, right up against a border. It really should default to a less trafficked area.

    Otherwise wow! Maybe you should make releases more often? (assuming the work is partitionable)

  11. bliblibli wrote on July 7th, 2010 at 08:42:

    Looks still crappy under KDE :’( and there’s no option to hide menubar for some reason O_o

    1. shmerl wrote on July 7th, 2010 at 21:03:

      That’s a bug on all Unixes in Firefox 4.0 (See https://bugzilla.mozilla.org/show_bug.cgi?id=552302 ).

      However there is an add-on which fixes this issue:
      https://preview.addons.mozilla.org/en-US/firefox/addon/4762
      It’s compatible with 4.0b2pre, even though its maxVersion is 3.6.* (you’ll need to disable compatibility checking, or bump the maxVersion to install it).

  12. Kobold Avenger wrote on July 7th, 2010 at 09:58:

    Does 4.0 have Electrolysis yet? Or is it only plug-ins that are on different processes so far?

    1. Christopher Blizzard wrote on July 15th, 2010 at 20:52:

      4.0 doesn’t have Electrolysis yet, no, and we don’t plan to include it. (It’s slated for Firefox 5.)

      The mobile version of our browser will support it this year, though.

      And plug-ins are out of process in 4 for sure. Including Flash on the mac.

  13. enotionz wrote on July 7th, 2010 at 10:07:

    @jpvincent – the new firebug alpha works fine (and better) in firefox 4b

  14. David Starr wrote on July 7th, 2010 at 10:21:

    Did they fix the “Server Not Found” bug that popped up in 3.5 and is still present in 3.6?

    1. Christopher Blizzard wrote on July 15th, 2010 at 20:52:

      Which one is that?

  15. shmerl wrote on July 7th, 2010 at 12:28:

    Is it possible to enable this feedback addon for Minefield builds too?

    1. Christopher Blizzard wrote on July 15th, 2010 at 20:52:

      I don’t know – it’s technically an add-on but I don’t know if you can install it separately or not?

      1. shmerl wrote on July 21st, 2010 at 18:23:

        At least I didn’t find it on add-ons site. I guess it should be possible to extract it from the beta.

  16. bob wrote on July 7th, 2010 at 18:14:

    Please never implement electrolysis or make it optional. Seriously, it’s flawed. Chrome over uses it and tabs crash all the time due to dev lazyness to fix bugs, and it uses a lot of memory. I don’t see the point.

    Keep up the awesomely good work. The arewefastyet “no” page is really cool too. Can’t wait to see jaegermonkey+tracing and change it to “yes” or “try to beat us now” :P

    1. Pikadude No. 1 wrote on July 7th, 2010 at 18:57:

      I’ve never had a Chrome tab crash. Maybe something on your computer is b0rked?

    2. Christopher Blizzard wrote on July 15th, 2010 at 20:55:

      I hear reports of Chrome tabs crashing all the time. And Chrome in general – they aren’t immune to it for sure.

      I don’t actually know what the plan for Electrolysis is in regards to how we’re going to separate processes. The first version of the mobile build will be a single chrome process and a single content process, because of the memory reasons you cite. On desktop we have more memory in general.

      Note that this is currently runtime-configurable so you might be able to turn it on or off at will. But it’s hard to tell at this point how we’ll ship it – that’s going to be a few months off for sure.

  17. Manojr Tiwari wrote on July 7th, 2010 at 23:41:

    Thanks to team and I hope and help for a great browser.

  18. standr wrote on July 8th, 2010 at 19:13:

    Does Firefox 4 finally allow real script job control so that you can actually list running scripts and halt/resume script execution like a real OS? I know we’ll get there eventually, so why delay? It is really annoying to hit the little stop button on a web page and watch the javascript just keep pounding along anyway. Shouldn’t the stop button actually stop something? Maybe there should be a “play/pause” toggle button alongside the forward/back/stop buttons? Completeness demands it.

    1. Christopher Blizzard wrote on July 15th, 2010 at 20:56:

      We don’t have plans for that for 4, but we have been looking into that ability for power savings for mobile. So keep an eye out!

  19. DerFichtl wrote on July 9th, 2010 at 05:03:

    anyone tried the websocket yet? i always get an error when i want to connect … but my code works with chrome …. hmm.

    Firefox can’t establish a connection to the server at …

    1. Christopher Blizzard wrote on July 15th, 2010 at 20:57:

      We’ve been testing it internally. So we know that it’s working at least somewhat.

  20. Ivan Kruchkoff wrote on July 9th, 2010 at 08:30:

    Very nice work, glad to hear how much work is going into development.

  21. thiago wrote on July 9th, 2010 at 13:19:

    It’s missing the 64 bits version to linux.

  22. Morteza wrote on July 13th, 2010 at 04:46:

    Hmmm!! lots of new features. I hope this release fix the bug about closing Geolocation API dialog without clicking on the button ( it doesn’t fire the any event).
    Also I want to test these features, they seems cool!!

  23. Pradana wrote on July 13th, 2010 at 06:11:

    good mozzilla,i’m going to try it now….

  24. Mike Wilcox wrote on July 15th, 2010 at 10:55:

    Did a search for 3D on this page hoping for transforms. :( <— sad face

    Great work otherwise.

    1. Christopher Blizzard wrote on July 15th, 2010 at 20:59:

      That’s not officially on the list, but I did hear that someone had it working. (I saw a demo at the recent Mozilla summit!)

      The 3D spec is pretty bad from what I hear – lots of edge cases that aren’t properly covered, etc. So it’s likely to need work before we can go down that path.

  25. Morteza wrote on July 15th, 2010 at 23:16:

    Anybody tested geolocation API? I can’t get it work. when I press Share Location button, nothing happens. Is there any difference with previous release? The program worked before.

  26. Tihomir wrote on July 16th, 2010 at 02:37:

    I wanted to ask, do you plan on including javascript codec support via an OpenCL type extension, similar to WebGL? I think it would be a great boon to the codec wars, but I’m not all that intimately informed of the technical feasibility. Thanks in advance.

  27. amosngweien wrote on July 16th, 2010 at 20:10:

    Not Impressed . If You Use The Firefox 4 beta 1 , go to this url
    http://www.quirksmode.org/js/detect.html u’ll See Actually You Are Using Mozilla 2. Which Is Not The Version That You Are Using.

    1. Morteza wrote on July 17th, 2010 at 02:47:

      @amosngweien I tried, this is the result:

      Let’s detect your browser:

      You’re using Firefox 4 on Windows!

  28. philjamline wrote on July 22nd, 2010 at 08:50:

    For me Firefox is a very stable produce, i have been using Firefox for the past 2+ years and never had a problem. Truly a well built platform grate job mozilla.

  29. Komrade Killjoy wrote on July 28th, 2010 at 05:54:

    ~ “your information will not be shared with anyone except everyone with whom we share it”

    that’s SUPER!

    ~ “This policy will be changed whenever we want”

    even more better!!

    thanks for clearing that up, mozilla

  30. Komrade Killjoy wrote on July 28th, 2010 at 06:11:

    __ JavaScript

    security policy gui built-in yet??

    https://addons.mozilla.org/en-US/firefox/addon/7066/

    blocking JS outright for a given domain is not sufficient user-control. relying on GreaseMonkey to kill functions et al is a bit messy dontcha think?

    __ Performance?

    Tuck idle tabs into TooManyTabs land?

    https://addons.mozilla.org/en-US/firefox/addon/9429/

    >> If you’re using HTML5 video

    NOPE. I prefer to use a video application to watch videos and a web browser to render markup.

    __ Hardware Acceleration via D2D

    available to masochists only, oh my!

    __ Out of process plugins

    There, finally, you score +1. And what of plug-ins stealing focus?

    >> very important for improving privacy

    great… what about some “common sense” cookie/LSO/DOM storage USER-controls??

    >> Youtube HTML5 beta

    I’m not an iTard either. Heard of blip.tv ? They focus on QUALITY. Try quality you might prefer it. [OT: iTards are FLAC deprived as well]

    >> much easier to send complex data from the File API and other sources to servers.

    Will that feed sites which feature the same ‘great’ privacy policy as test pilot?

    >> CSS Touch Source on Input Events
    >> Capturing mouse events on arbitrary elements

    how will this benefit users, those non-datamining entities?

    __ Content Security Policy
    ~ “Website administrators can ignore users’ security without fear of effort issues.”

    zip on CAPS for user-control?
    https://addons.mozilla.org/en-US/firefox/addon/7066/

    kiss of death for adblocking and interweb feces removal?

    hooray for hollyfascistwood?

    yay?

  31. Arthur wrote on August 4th, 2010 at 15:48:

    Actually firebug firebug-1.6X.0a9.xpi , the lastest 1.6 beta does not work in FF 4.0b2 under Snow Leopard.

    That is sad, I really like everything about it, and also no mouse gestures, I also tried extensions.checkCompatibility.4.0b in about:config, all my plugins appear as enabled, but none works, :|

  32. Harsha wrote on August 11th, 2010 at 02:24:

    Sometimes, The sites with viruses’re not getting loaded in IE.Because It usually block them getting loaded. But, firefox seems to make them load untile virus guard prevent them.Am I right? What’re the options they’re gonna do about the secutity stuff?

  33. Arthur wrote on August 11th, 2010 at 09:24:

    Apparently I also can’t right click on any page.

  34. designerashish wrote on November 12th, 2010 at 02:15:

    what about firebug, colorzilla, and many more addons that doesnot support .

  35. Beto G. wrote on November 18th, 2010 at 18:55:

    I I’m always been a loyal fan of Firefox since day one. I guess the addon writers need to catch up soon I need my firebug. But beggars can’t be choosey ay..=0). Keep up the good work and thank you.

  36. Doug wrote on December 30th, 2010 at 10:02:

    Get the latest Firebug here: http://getfirebug.com/releases/firebug/1.7X/

    Just installed it with Firefox 4 and it’s working great so far!

    1. designerashish wrote on December 7th, 2011 at 03:16:

      Yeah thanks buddy ! i am sure you will have something for colorzilla also…… thanks in advance…….

  37. David C. wrote on February 2nd, 2011 at 00:17:

    Just installed Firefox 4.0b10 in combination with the latest Firebug 1.7X.0a9 (alpha version) and couldnt be more happy.
    Firebug and the browser run faster than ever!
    Hope I can say the same thing concerning stability in a few days! ;)

  38. Er.Batish, MCSE wrote on August 31st, 2011 at 20:09:

    Awesome work, feels great to see so much development in browsers around. Keep it up .. Happy -> :)

  39. Puneet Batish wrote on August 6th, 2012 at 07:01:

    Mozilla really have some tools that no other browser have , even if they have they are of no match to Mozilla, like Doug said, Firebug.
    Good luck mozilla.
    Here’s an comparison of Mozilla vs Others
    http://g8.geekupd8.com/IEvsChromevsOpera

Comments are closed for this article.