Multi-line flexbox support in Nightly and Aurora 28

A few days ago, I checked in support for multi-line flex containers (also known as "multi-line flexbox") in Firefox Nightly. This functionality will be included in the Aurora 28 release that comes out later this week. If all goes well, it will be available in an official release as of Firefox 28, which ships in March.

In prior Firefox versions, we support single-line flex containers, which let authors group elements into a row or a column, which can then grow, shrink, and/or align the elements depending on the available space.

But with multi-line flexbox support, authors can use the flex-wrap CSS property (or the flex-flow shorthand) to permit a flex container's children to wrap into several lines (i.e. rows or columns), with each line able to independently flex and align its children.

This lets authors easily create flexbox-based toolbars whose buttons automatically wrap when they run out of space:

Similarly, it allows authors to create homescreen layouts with app icons and flexible widgets that wrap to fill the screen:

(Note that the flexible blue widget, labeled "wide", changes its size depending on the available space in its line.)

Furthermore, authors can use the align-content property to control how extra space is distributed around the lines. (I don't have a compelling demo for that, but the flexbox spec has a good diagram of how that looks at the bottom of its align-content section.)

The above screenshots are taken from a simple interactive demo page that I whipped up. Follow the link if you want to try it out.

The work here was primarily done in bug 702508, bug 939896, bug 939901, and bug 939905. Thanks to David Baron, Cameron McCormack, and Mats Palmgren for reviewing the patches.

New year, new GPG key

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

As predicted by Mayan prophesies, my GPG key will expire at the end of the year 2012. Hence, I'm transitioning to a new key. This transition document is signed with both keys to validate the transition.

The old key, which I am transitional away from, is:
pub   1024D/22FEB115 2009-04-09 [expires: 2013-01-01]
      Key fingerprint = B3BA 1CB3 70D2 FBEC 4D93  93FC 217E B4E5 22FE B115

The new key, to which I am transitioning, is:
pub   4096R/D1B35332 2012-12-14 [expires: 2017-01-01]
      Key fingerprint = 5620 331F A1E0 4359 5A02  0C5D EC57 90F7 D1B3 5332

To fetch the full new key from a public key server using GnuPG, run:
  gpg --recv-keys D1B35332

If you have already validated my old key, you can then validate that the new key is signed by my old key:
  gpg --check-sigs D1B35332

Please contact me via e-mail if you have any questions about this document or this transition.

Daniel Holbert
2012-12-23
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (GNU/Linux)

iEYEARECAAYFAlDWwHUACgkQIX605SL+sRVTlgCgy2zuvK7tBktXw+AX6NPwsioY
VbcAoJZ9OPjEeQ5AVee+ESBtg/g2lsY2iQIcBAEBAgAGBQJQ1sB1AAoJEOxXkPfR
s1MyYwAP/Rbd1mxsSixmFpKsvTzZjGRy2ETp4tTZF9mstPBb9RxlmMDyEGQCFNV1
+JssP7rtCrlg3dX7O/Hyw68WwkVq+TjvfxJ2kKqwih4P3LKXsxOV/0/tVH5267zO
un4faWxkoUvjMO642g4cUr70yRqDkFxdBPXaTuChrrFChMjUMOTaG8Geioo7R/jN
ss7fPF6NJvWkVqVROoh3j5FM3miZG4Q1K2mWSqGZTM2MrasQEDqJR7Jk+7gvHwzO
0qMnfyU7LsqEKGZS44A8Ip0cTW8Pa2HItnzUltaNM0ee/RV744p1j07alCzOgcAE
fEBHhmsaKzRtk0hFgn8nVeOHPObapHGPUJ3CTkn1Nbg1RmNbLNxki6DUPts8iZe7
VkAlEP4SLRAzWGEPPGzb7R/KzCrT3q5PLAQJd9AbsCu0LfwO8qCGV8zBylof0tqx
1lKwdeI4RfYXgJrDiNG5jtrUqL5VQDJtCXCH2vFOycnZDrzOZOGQepuXhIzfrp5v
LtBUlqEO3VM4snaIy+1TtwnHwOu5TyEIpIAJin/NjGMouMr1qaxfFXT2Tv5aPqfM
TTk2DptfyzqV3l5H8ucV73L6Jp8Fh+yGAZWXo/cxYGPiX4GFhAulRjxZVmN0GTzJ
E44Es3Ov4j8YrwszELw3RmFVdBnse3cWwEkx3260pMz3YQjCvAhd
=w8o8
-----END PGP SIGNATURE-----

(For convenience, I've also posted this as a signed standalone text document.)

CSS3 Flexbox enabled in nightlies & ready for testing!

This morning, I checked in a patch to enable CSS3 Flexbox support in Mozilla's bleeding-edge nightly builds! So, in a day or two (when that change is merged to mozilla-central), our Nightly builds will support CSS3 Flexbox.

This is the new CSS Flexbox model -- using "display: flex", as opposed to the older "display: -moz-box" model. Also, in the spirit of avoiding vendor prefixes for experimental features, we'll be shipping this new flexbox implementation without a vendor prefix in development builds -- hence, "flex" instead of "-moz-flex".  It'll be guarded by a hidden preference ("layout.css.flexbox.enabled") which we can toggle to make it available in release builds, too, once it's been sufficiently tested and had its kinks worked out.

Today's patch simply toggled that hidden preference to "on" in Nightly builds, and that change will be merged to Aurora (Firefox alpha) builds around January 6th, the next merge day.  With some luck, this may continue to "ride the release trains" and be released as part of Firefox 20, but we'll evaluate its readiness when Firefox 20 is merged to the Beta channel and may toggle it off at that point (though anyone wishing to test flexbox would still be able to toggle the pref on for themselves).

So: please go forth and test the new flexbox support in nightlies, and file bugs for any issues you encounter! Eiji Kitamura's "CSS Flexbox Please" demo page is a fun place to start.

A few known issues:

• When printed, flex containers currently get truncated at page-boundaries (though I'm actively working on fixing that).
• The "order" property doesn't yet affect paint-order/layering (though it does control positioning) -- I've got a patch in hand that fixes this -- it's just awaiting review, and it'll hopefully land soon.
• The line-wrapping "multi-line" version of flexbox is not yet implemented. (That's the "flex-wrap" property and the shorthand "flex-flow" properties.) I'll hopefully get to this in the near term, but it's somewhat separate from the core flexbox functionality, so we opted to implement it separately.

Using SVG to make a lightweight Firefox 4 theme

To celebrate the release of Firefox 4, I've made available a demo persona using SVG images!

As far as I know, the official GetPersonas website doesn't yet accept SVG-backed personas, but thanks to dolske's recent blog post, I learned how to host an installable SVG-backed persona on my own web space.

So if you're running Firefox 4 (you are, right?), then go ahead and give my SVG-backed persona a try! Make sure to enable the Add-on bar ('View' menu | Toolbars | Add-on Bar) to get the full effect. I don't recommend leaving this persona applied for very long, though, lest its continuous animations feast on your CPU and battery. :)

I look forward to seeing even prettier SVG-backed personas from others whose design skills are far superior to mine!

SVG as an image

As of about a month ago, SVG files can now be used as images in Firefox 4.0 nightly builds! This will be included in the next Firefox 4.0 beta iteration (beta 7), when that's released.

This feature is exciting for many reasons:

• Better-scaling web graphics -- unlike raster images (e.g. JPEG/GIF/PNG), SVG images can be scaled up or down without pixellation. This makes SVG ideal for web developers who want their content to look crisp on giant projector-screens as well as tiny phone screens.
• SMIL animation in images -- SVG allows for very complex & expressive animations (see Brian Birtles' recent post for a number of great examples).
• Reduced web-developer frustration -- from an author's perspective, SVG is an image format, and it should Just Work in contexts that expect an image.
• Broader use of SVG!

For your viewing pleasure, here are some demos of SVG-as-an-image in a variety of situations:

• In the <img> tag:

• As a CSS background:
This is a div with a tiled SVG image as its background.
• In the HTML5 canvas element, with a rotation applied via the 2D canvas API:
• <---- And here, as a CSS list-style-image! (That's the SVG version of the W3C's SVG logo.)

As one last example, I hacked together a Firefox Persona using SMIL-animated SVG images as backgrounds for Firefox's toolbar & addon bar. I wasn't able to publish it to the GetPersonas site, because the uploader page there doesn't accept SVG images yet -- so instead, I've included a small screencast:

Click here to view full-size video

The SVG files used for backgrounds in this Persona are available here. The header SVG file makes use of a locally-saved copy of Marek Raida's excellent hourglass demo.

There are some bugs with this feature that I'm still working out -- for example, you may get pixellation at certain unlucky zoom-levels -- but that will be fixed for the final release. If you run into other issues, please file bugs! :)

Mozilla gets <animateMotion>!

Yesterday afternoon, I checked in support for the <animateMotion> SVG element, so that feature is supported in this morning's nightly build!

The <animateMotion> element allows for much more flexibility in SVG animations. Mozilla's nightly builds have supported animation of most SVG attributes and properties for a while now, but <animateMotion> gives authors the added ability to effortlessly animate an element to move along any arbitrary path.

I've written a simple Rocket Demo to give an example of the types of things you can do with this. This demo depicts the sad cartoony story of a rocket that gets hit by an asteroid, loses power to its boosters, and slowly falls into the sun. The demo uses no Javascript at all, and it uses <animateMotion> to define the motion-paths of all of the moving elements. I've tested the demo in Opera, Firefox-nightly, and Chromium nightly -- a few things don't work in Chromium, but it works great in the other two browsers. (Thanks to clker.com for some public-domain SVG clip art that I use in the demo.)

Marek Raida (a wizard of SVG demos, and the author of the "Cavern Fighter" game that I linked to a few posts back) has come up with two excellent <animateMotion> demos as well: "Drawing Animals" and "Catch the Mouse." Both are linked off of hist latest blog post. (Note: He's also got a fancier version of the "Catch the Mouse" demo where the mouse's footprints slowly disappear, but Firefox nightly builds are currently a bit choppy on that version, due to some code we should probably optimize for SMIL animation of CSS properties.)

SVG/SMIL "Dock" Demo

Today, I decided to see what what it'd be like to make an MacOS-style "dock" in SVG, using SMIL <animateTransform> elements to achieve the zooming hover effects.

Once I got that working, I felt like I really should make the icons do something useful when you click them. So, I hooked them up to control an embedded iframe.

Here's the result: SMIL Dock

Screenshot:


Screencast:


(Note that the demo will only do anything useful in a mozilla-central nightly build -- that is, Firefox 3.7 / Gecko 1.9.3 -- since earlier versions don't have support for SMIL.)