In fact, Doug had stumbled across the work of Satoshi Ueyama (Japanese), a programmer extraordinaire from Japan, who had presented those videos at the Mozilla 24 event in Tokyo in 2007.

Many people were rightly fascinated by watching the process by which a web page is laid out. Being an open source web page rendering engine, Gecko is one of the few platforms where one can modify the source code to do interesting applications such as this.

I asked Ueyama-san to provide additional information on how anyone could do this themselves and he’s kindly provided some instructions and updated his modified Gecko build for anyone to make such a video.

I have rewritten the animation generating program for the latest (FF3.1b3) Gecko / Shiretoko builds.

The updated video is available on YouTube:

First, build Firefox 3.1 Beta 3 with my modified layout module, which can be found under the ‘layout’ folder in the attachment.

Then run the build to output a layout progress log as C:\mozilla-build\log\out.txt.

You can change the destination with a constant in VisualizeLogger.cpp.

This time the log processing program is written in ActionScript.

Paste part of your log file in LogSource.as and compile ReflowAnimation.as with mxmlc to generate a Flash movie.

To make a movie in MPEG format, compile CaptureDump.mxml for Adobe AIR and run it.

This generates PNG files for each frame under C:\mozilla-build\log\frames.

Now you can convert them to a MPEG movie with ffmpeg.

Sorry for my rough explanation!

A big, big thank you to Satoshi for presenting on Gecko reflow back in 2007 and again for providing an update for Shiretoko as well as the files needed for anyone to do this on their own.

If you make your own Gecko reflow video, please paste a link to it in the comments of this post. Satoshi and other Mozilla developers and community members would be interested to see how Gecko reflows your website.

Before most of popular browsers start to support canvas “3d” context, we JavaScript developers have struggled how to implement to enable 3D by JavaScript without any extensions like Java, Flash, etc. Here is a part of the history of JavaScript’s 3D tech development.

Kawasaki-san also covered Satoshi Ueyama’s recent work on 3D in JS and Canvas back in February, if you had missed it: Incredible JavaScript+Canvas 3D demos from Japan!

Ueyama-san, the programmer who made those 3D demos, is the same programmer who did those Gecko reflow videos (Japanese) that were widely blogged about and discussed at Doug Turner’s blog: What is a reflow?

EDIT: Unfortunately those reflow videos are no longer available at Google Video (grrr). I’ll see if Ueyama-san can upload them to a different video hosting site.

EDIT 2: Gecko reflow videos have been moved to Youtube thanks to Ueyama-san!

Gecko Reflow Visualization – google.co.jp

Gecko Reflow Visualization – mozilla.org

Gecko Reflow Visualization – Wikipedia

More info here: Canvas in full 3D

via Mona Nomura

Jaaksi’s presentation is very relevant to Mozilla because Nokia’s N810 Internet Tablet ships with Maemo Linux as the operating system and Mozilla’s Gecko is used as the rendering engine for the Maemo Browser.  I know from recent discussions with Christian Sejersen and Jay Sullivan of Mozilla’s mobile team that Mozilla very much values Nokia’s participation in the Mozilla project.

Jaaksi’s presentation touched on these points:

• Linux and open source CAN meet the needs of mass-market.
• [Nokia's] role: bring open source to mainstream consumer electronics
• [Nokia & open source] need to learn from each other. Both.
• Building upstream. Community rules.
• Beyond code and licenses: developers and projects.
• Diving in: deeper involvement.

While the entire presentation was worth reviewing, starting around 16:40 in Jaaksi’s presentation are some interesting and insightful comments about Nokia and working in open source. In response to a question about whether Nokia contributed patches back to Webkit around the implementation of Webkit in Nokia’s S60 platform, Jaaksi was open and honest and said that Nokia did not do enough in that instance.  He then went on to say that Nokia plans to work more closely with the open source projects they are shipping code from in the future.

Note: when Jaaksi talks about the ‘upstream model’ what he means to say is contributing patches regularly back to the original project’s codebase. I’ve also added in some clarification in brackets in the transcription below to make it more clear as to what exactly Jaaksi is referring to.

Question from the audience (@ 16:20): Excuse me, another question. If I remember correctly, it was 3 years ago when you [Nokia] implemented Webkit in to the Series 60 devices, you had to make a lot changes, for example in memory management. Did you use the ‘upstream model’ in that case?  I mean, did you feed back to the community the changes you had made for your devices?

Answer from Ari Jaaksi:  Not the way we [Nokia] should have done it.  Let me be very honest about that. Also with our Internet tablets we have horror stories where we didn’t do it [share patches back with the trunk]. Just today, or yesterday I discussed this with the Mozilla guy, the name escapes me at the moment, I don’t know if he is here today, about our Mozilla browser here. It is really that, what we did was last summer when we started to ship with the Mozilla browser we made a couple of mistakes. We are kind of working upstream there [with Mozilla] but we are not doing as much as I would like to do and we sort of need to go back. We almost forked the code [from Mozilla] but we need to go back [to sync up with the main Gecko 1.9 trunk].

Also in the [Webkit] browser on the Series 60 devices, I claim that the Webkit situation is not a trivial case. There are… Apple forked it.  We [Nokia] kind of forked it. There are some challenges now [due to the forking of code from the Webkit trunk]. This is something that we as an industry should learn [not to do]. This [forking code] is not benefitting anybody if we do it like that. That is kind of my message here.  Good question.

I, for one, am very glad to see Nokia using open source, and it’s clear from Jaaksi’s presentation and comments that while Nokia has had some challenges in developing with open source code, they are learning how better to work with open source communities (like Mozilla) to provide innovative products to Nokia’s customers.  It’s great to hear that Nokia plans to sync back with the core Gecko code base as Nokia (and the users of the Nokia products that will ship with Gecko) will get all the benefits that the entire Mozilla community is working on for the current version of Gecko 1.9 and beyond.

Thank you to Ari Jaaksi and the entire Nokia open source development team for their hard work and efforts.  We look forward to your future products, especially those made with OSS and especially Mozilla.

ZDNet Japanさんが弊社の Brendan Eich との対談ビデオを日本語字幕で出しましたので JavaScript に興味を持つ方、ぜひご覧下さい。

ITの歴史にイノベーションを巻き起こした技術者に話を聞くシリーズインタビュー「Super Techies」。このビデオでは、現在MozillaのCTOであり、JavaScriptを開発したことでも知られるBrendan Eich氏が、シリコンバレーでのプログラマーとしてのキャリアや、Firefoxの展望について語る。

Mozilla CTOが語る「Netscape」から「Firefox」への軌跡

Matrix Partners Establishes USD275mn China Fund

Matrix Partners has a new China fund led by David Zhang, who left WI Harper to join Bo Shao at Matrix. This is news to me because Matrix has funded mobile browser OpenWave and the brand new SkyFire (who use Mozilla’s Gecko engine on the server) and Zhang funded Maxthon at WI Harper.

• linking in outside code (vs. Air which cannot pull in outside libraries)
• multi-threaded (vs. Air which is single-threaded)
• extendable (like Firefox is)

Flickr Uploader is available in English, French, traditional Chinese, Korean, German, Spanish, Italian, and Portuguese.

For those of you who are interested in XUL or XULRunner, it’s an interesting interview, especially when Richard discusses how there may be a future for user-developed extensions to Flickr Uploader.