Mozilla

What's new for Web Developers in Firefox 7

Today we’re releasing Firefox Update 7. This update contains work that’s been stabilizing over the last 3 months and there are quite a few interesting things to talk about.

To be clear, this is not the canonical list of changes, just highlights. As always, we’ve created a page to track the changes that web developers will care about. For the full list please see the Firefox 7 for developers page.

Firefox now supports text-overflow: ellipsis

Firefox now supports the ellipsis mode for the text-overflow property. This property is supported in other browsers which means developers should be able to start using it in the wild. Here’s an example of how text-overflow ellipsis works:

HTML:

<html>
<body>
      <div class="inner">I am some very long text!</div>
</body>
</html>

CSS:

div.inner {
    width: 120px;
    text-overflow: ellipsis;
    white-space:nowrap;
    overflow:hidden;
 
    color: red;
    border: 1px dashed #333;
    margin: 20px;
    padding: 10px;
}

Result:

As you can see, it’s pretty easy to make text that cuts off in a sane way with this new property. Our developer page for the property also contains sample syntax for other browsers.

WebSockets: Updated protocol and available on mobile

First, WebSockets is now enabled by default for Firefox for Mobile. For mobile networks that are high-latency and have high connection setup-up costs, WebSockets offers an opportunity to create a much better experience than is available with polling HTTP.

Second, we’ve updated to the most recent draft version of the WebSockets protocol from the IETF. Somewhat confusingly, this is version 8 of the protocol, but is draft version 10. This will be mostly of interest to people who are building applications on top of WebSockets and tool vendors, but is worth calling out since it affects backwards compatibility.

Since the WebSockets work is ongoing, the namespace for WebSockets remains moz-prefixed to indicate that it’s not yet finalized.

An even faster Canvas element

The canvas element in Firefox 7 is even faster. We’ve revised our code for Canvas based on what we learned in previous Firefox releases and how people are using Canvas in the wild. Based on that you are likely to see much snappier performance on many demos when drawing to canvas elements. For an example, see our Runfield demo.

Web sites can no longer resize your main browser window

It’s no longer possible for a web site to change the default size of a window in a browser, according to the following rules:

  1. You can’t resize a window or tab that wasn’t created by window.open.
  2. You can’t resize a window or tab when it’s in a window with more than one tab.

Support for the new Navigation Web Timing Spec

Firefox Update 7 now supports the Navigation Timing spec. This allows a web page author to monitor parts of web page performance in the page itself. For people who are interested in page load and navigation performance, they can send that back to the server which can give them a better view into real-world performance.

There are a couple of other specs in this space – the User Timing and Resource Timing – but those are still under discussion in working groups and as such we have not yet implemented them.

Posted by on at

23 comments

Comments are now closed.

  1. Der Caspers wrote on September 27th, 2011 at 9:17 am:

    Still doesn’t do text-overflow: ellipsis; in table cells though …

  2. Olivier clémene wrote on September 27th, 2011 at 11:12 am:

    I’will try this one. I hope it’s better tha chrome.

  3. melchior blausand wrote on September 27th, 2011 at 11:23 am:

    You are definitely still doing the hot shit, guys! No matter what versioning arguments are ongoing. I was really looking forward to canvas performance improvements.
    Couldn’t you maybe sent one or two guys over to lighning team during lunch time? They fail so hard to rock…

    blausand

  4. mohammad wrote on September 27th, 2011 at 11:25 am:

    O, come on! Only one new CSS property? When are you going to support CSS 3D transform properties? It is not that difficult. (BTW, it’s the only reason I have to switch to webkit, sometimes)

    1. Boris wrote on September 28th, 2011 at 12:34 pm:

      > When are you going to support CSS 3D transform properties?

      Firefox 9, I believe.

      > It is not that difficult.

      Hard to say. WebKit doesn’t always support them. When it does, what it implements doesn’t match the spec they themselves wrote.

      In general, saying “it is not that difficult” if you haven’t written the code to do it is a bad idea….

    2. Paul Rouget wrote on September 30th, 2011 at 1:39 am:

      > When are you going to support CSS 3D transform properties?
      Firefox 10.

      > It is not that difficult.

      Ouch…

  5. Francis wrote on September 27th, 2011 at 11:27 am:

    I see Firefox is still the only major browser not to support CSS run-in. Even IE has had this since version 8 (http://www.quirksmode.org/css/display.html).

    1. Boris wrote on September 28th, 2011 at 12:32 pm:

      The other browsers all do wildly different things with run-in, none of which match anything resembling the spec. We’re not willing to play that game, so would want to actually implement the spec.

      Unfortunately, the spec for run-in doesn’t make sense either. So we’re waiting on the CSS working group to fix that before implementing.

  6. Div Diverson wrote on September 27th, 2011 at 1:19 pm:

    > table cells

    Those are still used?!

    Seriously, though, it seems to me that if you’re using CSS3, it’s highly likely that you’re not using tables.

    1. Der Caspers wrote on September 28th, 2011 at 10:54 pm:

      > Seriously, though, it seems to me that if you’re using CSS3,
      > it’s highly likely that you’re not using tables.

      Unless, of course, you need to mark up tabular data, right?

  7. Boris wrote on September 27th, 2011 at 2:16 pm:

    Sure seems to work for me:

    data:text/html,aaa fgdf gdfg dfgdfgg

    What testcase do you see it not working on?

    1. Boris wrote on September 27th, 2011 at 2:17 pm:

      Er, silly blog eating the markup…. Try this:

      data:text/html,<table style=”table-layout: fixed; width: 100px;” border><tr>&lttd nowrap style=”overflow: hidden; text-overflow: ellipsis”>aaa fgdf gdfg dfgdfgg

  8. Boris wrote on September 27th, 2011 at 2:17 pm:

    Er, silly blog eating the markup…. Try this:

    data:text/html,<table style=”table-layout: fixed; width: 100px;” border><tr><td nowrap style=”overflow: hidden; text-overflow: ellipsis”>aaa fgdf gdfg dfgdfgg

  9. Skoua wrote on September 27th, 2011 at 3:04 pm:

    Web sites can no longer resize your main browser window

    o/

    That’ll make porn websites creators sad but this was really needed.

  10. maciej wrote on September 28th, 2011 at 1:10 pm:

    suprisingly, I cannot modify window size that was opened by window.open

    as it seems only the opener window can modify it.

    If you have a script to modify the window size in the window that was opened by window.open – it is blocked.

    stupid !

    1. Demian wrote on October 5th, 2011 at 5:22 am:

      Same thing happening to me.
      Firefox 7 doesn’t care if I open a new window via a script (in particular, I’m using this one on a new window created with a window.open), it won’l let the new window maximize itself.

      What’s the deal?

      I’m trying to maximize a new window for a corporate site, and the only browser giving me headaches is FF7. :(

      1. Demian wrote on October 5th, 2011 at 5:24 am:

        I missed the script URL: http://www.codingforums.com/showpost.php?p=761672&postcount=1

      2. Boris wrote on October 6th, 2011 at 7:18 pm:

        Do you have Firebug installed? Firebug lies to Firefox about its panels being tabs, and that screws up resizing… If you do have it installed, try disabling it.

  11. Francis wrote on September 28th, 2011 at 4:44 pm:

    re: css run-in. Why not introduce it with vendor prefixes if you’re unhappy with things as they are at the moment. That way developers can take advantage of it in the same way that we’re all using vendor prefixes for gradients, drop shadows, and so on.

    1. Boris wrote on September 28th, 2011 at 6:31 pm:

      Because implementing it in any sane way is a huge amount work, and it would have to be redone once the spec settles down. Unlike gradients, drop shadows, etc, no one really knows how it _should_ work and the various proposals have not much in common.

      If we had infinite resources, we might consider it, but we don’t, and other things are way more bang for the buck than run-in.

  12. Johan wrote on October 1st, 2011 at 8:14 am:

    Any chance this bug:
    https://bugzilla.mozilla.org/show_bug.cgi?id=116083 will get fixed before its 10th birthday? It’s really annoying.

    1. Boris wrote on October 1st, 2011 at 8:28 pm:

      Unlikely; that whole area of code is not really owned at the moment. Need more people. :(

  13. Jordi wrote on October 19th, 2011 at 12:09 am:

    We have noted that new windows that don’t specify the size, get the smallest size that firefox can give. It’s noising me to have to manually resize windows. It happens since we upgraded to firefox7. May be this 2 rules about resize?

Comments are closed for this article.