What’s New on MDC

Here is some recent content additions or changes appearing on the Mozilla Developer Center (MDC).

  • XUL Popup Guide: Great information on using popups (panels, menus and tooltips) in extensions and XUL applications. The popup infrastructure was heavily rewritten in Gecko 1.9 (Firefox 3). Thanks Neil.
  • E4X Tutorial: Joey Minta put together a really good tutorial covering many aspects of using E4X – the ability to use raw XML in JavaScript.
  • Code Snippets for XUL <tree>: Some examples of getting the <treecell> from mouse click and the selected <treerow> from right-click were added.

Firefox 3 – ContentEditable

Firefox 3 is expanding its rich WYSIWYG editing capabilities by adding support for the contentEditable attribute. Setting contentEditable to “true” allows you to make parts of a document editable. Firefox already supports using designMode to make an entire document editable. Here is a previous post about using designMode.

Here is an example of using contentEditable to make a simple rich editor in HTML: contenteditable.htm
(NOTE: requires Firefox3.a6+ or a browser that supports contentEditable)

The new contentEditable features support the same API as designMode for interacting with the editable element:

  • document.execCommand – Executes the given command.
  • document.queryCommandEnabled – Determines whether the given command can be executed on the document in its current state.
  • document.queryCommandIndeterm – Determines whether the current selection is in an indetermined state.
  • document.queryCommandState – Determines whether the given command has been executed on the current selection.
  • document.queryCommandValue – Determines the current value of the document, range, or current selection for the given command.

Firefox 3 – SVG foreignObject

SVG is a nice way to create vector graphics on the web and even embedded in HTML pages. Sometimes you might embed other markup into SVG and that’s where foreignObject comes in. From the W3 SVG1.1 spec:

The ‘foreignObject’ element allows for inclusion of a foreign namespace which has its graphical content drawn by a different user agent. The included foreign graphical content is subject to SVG transformations and compositing.

One of the most common uses (IMO) of using foreignObject is to embed HTML into SVG. The examples that come to mind are:

  • Using HTML to simplify text wrapping – SVG’s text wrapping abilities are far from convenient. Using tspan to create multiline text ranges is a pain. On the other hand, using an HTML p, div, or span is much easier. You also get list and formatting support. Here is an example of using HTML in SVG for text handling.
  • Using SVG transforms on HTML content – SVG’s transformation capabilities are fairly cool and can do things that HTML can’t. However, it is possible to use SVG transformations on a foreignObject that holds HTML. Here is an example of SVG transforming (rotating and translating) HTML content.

Note: These examples will only work in a recent Firefox 3 alpha (or any browser that supports SVG foreignObject). And yes, these examples could have been done as SVG embedded in HTML or XUL as well.

WebRunner 0.5 – Linux Install

After much struggle (I was raised on Windows), I put together a Linux installer for WebRunner. I failed to get file associations working automatically, so you will need to manually set those up. I am including a tar.gz file, as well as, a simple installer. No deb/rpm package yet either 🙁

The *.webapp profiles are installed into the application folder. you can copy them to wherever you want. For now, you’ll need to right-click on a *.webapp file to display its properties and configure the “Open with” settings yourself – sorry.

The Linux installer (built using InstallJammer) works very much like the Windows installer, which may be a bad thing for regular Linux users. Let me know what you think. I could use some help building scripts to auto-register the file associations (webrunner -> *.webapp) and thoughts on building packages.

I was looking at BitRock’s InstallBuilder which makes installers (Windows, Mac and Linux) and packages (deb and rpm). They have a free license for open source projects. Maybe that is a good approach.

Install: webrunner-0.5-linux 7MB
Archive: webrunner-0.5.tar.gz 10MB

WebRunner 0.5 – Mac Support

WebRunner now has Mac support. By support I mean we have a DMG for installs and we use CFBundleDocumentTypes to associate *.webapp files with WebRunner. Launching a *.webapp file should launch WebRunner and load the *.webapp profile.

Thanks to Eric Shepherd for the pointers to CFBundleDocumentTypes.

I am interested in feedback on the Mac menu (which I hide). To close the web application, just close the window. I know this is not very Mac-ish, so I am interested in how we could display the menu, but have it say “Google Mail”, instead of “WebRunner”. Yes, I’d like the menu to change based on the web application. Hmmm, maybe we could put something in the webapp profile.

Anyway, have fun…

Install: webrunner-0.5-mac.dmg (18MB)
Profiles: gmail.webapp, gcalendar.webapp, gdocs.webapp & groups.webapp

UPDATE #1: removed the silly debugging alert
UPDATE #2: added a menu for quiting and fixed cozby’s (see comments) bug

WebRunner 0.5 – Now With More Power

I am really impressed by how many people seem to be using WebRunner ([1] & [2]). Personally, I still use it everyday to run GMail and Zimbra. Along the way, I had noticed some small quirks and painful bugs. The download bug (click a download link and get a XUL error message) was the one I hated the most. The window title bug (multiple WebRunner instances would cause the window title to change) was a close second.

I finally got around to fixing those and got ready to make a small release. Then I get an email from Wladimir Palant (of Adblock Plus fame). Seems Wladimir has been using WebRunner too and he also had a list of fixes and features. So I rolled his changes in with mine and the result is WebRunner 0.5:

  • Downloads now work without the XUL error
  • Better window title tracking
  • Context menu enable/disable logic is better
  • Added simple Print support via context menu
  • Added About support via context menu – useful for checking XULRunner runtime version
  • Added web application profile support – parameters for a web app can be saved to an INI-style *.webapp file. Several profiles are included in the distributions. Parameters include:
    • uri – the uri/url of the web app (http://mail.google.com)
    • icon – the icon you want to use for the WebRunner window when running this web app
    • showstatus – turns the statusbar on or off for this web app
    • showlocation – turns the readonly location bar on or off for this web app
    • enablenavigation – turns the hotkey history navigation (ALT+LEFT, ALT+RIGHT and ALT+HOME) on or off for this web app

The installer can configure Windows to associate *.webapp files with WebRunner. This means that when you double-click or launch a *.webapp file, WebRunner is launched and automatically opens the web application. Pretty cool.

I am somewhat excited to see what can be done with WebRunner. I am thinking that we could turn on extension manager in WebRunner and use extensions to provide some web application customization. Also, I see WebRunner becoming more of a desktop platform for running web applications. What’s stopping WebRunner from doing what Adobe AIR does – only better and on Linux and with native code support and with extension support.

I am going to see if we can get WebRunner hosted in a Mozilla SVN repository as well. That would make it easier for people to contribute code.

Install: webrunner-0.5-win32.exe (4.9 MB)
Source: webrunner-0.5-src.zip

New Datasources for XUL Templating

XUL, the XML-based UI language used in Mozilla products, has supported templating for a while now. Unfortunately, the only datasources you could use to drive the templates were RDF-based datasources. This has been a hurdle for some, including me, to really dive into XUL templates.

Recently, Neil Deakin landed support for generic XML datasources, so I no longer have an excuse to not use XUL templates. Here’s an example:

RDF way

// Use a predefined RDF datasource

<vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1">
    <button uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/>

XML way

// Use an inline XML datasource or a URL-based XML datasource

<people id="peeps">
  <person name="billy"/>
  <person name="jimmy"/>
<vbox id="list" datasources="#peeps" ref="." querytype="xml">
    <button uri="?" label="?name"/>

The results are the same: A list of <button> elements are generated inside the <vbox>. Here is some developer information on XML datasources. You can test the new XML datasources in the latest Firefox 3a6 / XULRunner 1.9a6 releases.

Also, be on the lookout for SQL-based XUL template datasources too!

Mozilla @ OSCON 2007

Mozilla has a relatively large contingent headed to OSCON this year. Here’s the Mozilla speaking line up:

In addition to the speakers, we’ll also be in Booth #202 (floor plan). Its a great location right by the entrance of the convention center. The Mozilla Event Planning group had a cool idea for making the most of our booth – “Office Hours“:

We’d like the opportunity to speak face-to-face with contributors and folks interested in getting involved with Mozilla. Meet up with Mozilla folks during our booth “Office Hours” to ask any questions or relay any suggestions that you may have.

There is a schedule and sign-up sheet for various “Office Hours” topics. If you’re interested in talking about building extensions/XULRunner applications or how AMO works, sign-up and come talk to me and Justin Scott.

What’s New on MDC

Here is some new documentation appearing on the Mozilla Developer Center (MDC):