Category: Javascript

Posted on

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

Posted on

FUEL Project Status – 0.1 Lands

FUEL 0.1 landed on the trunk yesterday. Progress had slowed since the last update mainly due to John and I having so many other balls in the air. For those intrepid enough to play with 0.1, you can use the API on the wiki and the code in the unit tests as examples.

The wiki has the plans for 0.2, which should have more features for extension developers to use. The Browser and BrowserTab helpers alone should make life easier.

Posted on

What’s New on MDC

Just thought I’d point out some new content appearing on the Mozilla Developer Center (MDC).

  • Saving Canvas to a File: Given a canvas element and a destinstion file path, this code snippet saves the contents of the canvas to a PNG file. The code could easily be tweaked to become a general purpose “download to file” instead of only handling canvas elements.
  • XUL Control Guide: This is a handy quick guide to the various XUL control elements. In addition to a picture of the control, there are also links to reference and tutorial information.
  • Observing the Download Manager: This snippet shows how you can observe the various notifications of the download manager.
  • Troubleshooting XPCOM Registration: When component registration fails its currently very difficult to figure out the cause. This article steps through a few troubleshooting tips you can use to find the problem. We hope to get better tracing and debugging of component registration failures in Firefox 3.
Posted on

XUL Clippings – Midas Rich Text Editor

How to create a rich text or HTML WYSIWYG type editor in Mozilla has come up a few times so I thought a post was in order. Mozilla has a rich text editing system (called Midas) and an API similar to Internet Explorer’s. Mozilla, like Internet Explorer, supports the ability to make an entire document editable by setting the designMode property of the document object. Once in design mode, the document can be manipulated using various DHTML commands.

The API for interacting with the document is:

  • 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.

The most typical way to create a rich text editor in a XUL document is to use the element. In an HTML document, you would use the

You use JavaScript to turn on design mode:


var editor; /* global var */
function onload() {
  editor = document.getElementById("edit");
  editor.contentDocument.designMode = "on";
  setTimeout(function() { editor.contentWindow.focus(); }, 100);
}

window.addEventListener("load", onload, false);

You use the API to send commands to the document:


function toggleBold() {
  editor.contentDocument.execCommand("bold", false, null);
}

function toggleItalic() {
  editor.contentDocument.execCommand("italic", false, null);
}

function alignLeft() {
  editor.contentDocument.execCommand("justifyleft", false, null);
}

function alignRight() {
  editor.contentDocument.execCommand("justifyright", false, null);
}

I found a document that discusses the differences between the Mozilla and Internet Explorer rich editing systems.

I created simple XUL and HTML clippings to demonstrate the system. You can open the HTML clipping in a Mozilla compatible browser. You can download the XUL clipping and open it in XUL Explorer. Right-click on the link and pick “Save Link As” to save it to your machine.

midas-editor.xul
midas-iframe.html

Posted on

Firefox 3 – Offline App Demo

Firefox 3’s offline capabilities have been getting some attention lately: Chris Double’s post on porting Zimbra to use offline shows-off the potential. Robert O’Callahan and John Resig give details on the different pieces of the capabilities, namely: Offline Cache, Offline Events and DOMStorage.

A Simple Demo – Task Helper

I put together a simple offline application sample to help illustrate how the features can work. Call it – explanation through code. The application is a simple task list system. The current functionality includes:

  • Add tasks – Enter text in field and press ‘Add’
  • Complete tasks – Mark completed tasks and press ‘Complete’
  • Remove tasks – Mark tasks and press ‘Remove’
  • Data is stored as JSON and XHR is used to interact with server (PHP)

taskhelper.png

Nothing fancy. However, the application is “offline-aware”, meaning:

  • Application resources (HTML & JS) are tagged as offline cacheable
  • Before interacting with server, online status is checked. If online, use XHR. If offline, use DOMStorage
  • Online/Offline status is monitored using events. When the application switches form offline to online, data is resync’ed with the server

There is really nothing fancy about the offline stuff either, but putting it all together does make for a neat application. Using the latest Firefox 3 alpha, you should be able to:

  • Use the application while online.
  • Go offline using the “Work Offline” menu. The event log should show that the app went offline
  • Continue to use the application while offline
  • Go online using the “Work Offline” menu. The event log should show that the app is back online and has updated the server with any offline changes

If you were using a version of Firefox 3 with the offline cache patch (bug 367447) you would be able to a little more:

  • Use the application while online.
  • Go offline using the “Work Offline” menu. The event log should show that the app went offline
  • Continue to use the application while offline
  • Restart browser
  • Switch to offline (or have no network connection)
  • Enter URL to app (or use a bookmark)
  • Start using app with data from last session
  • Switching to online will update the server with offline data

Currently, the offline events only fire when offline is toggled via the “Work Offline” menu. Getting the events to fire by watching the network connection is the goal and would make this much more unobtrusive for the user.

Here is the source to the task helper application: taskhelper-src.zip

Posted on

FUEL Project Status

FUEL is the little library that John Resig and I are working on which should make developing extensions a little easier. It’s been a while since we last talked about it so I thought an update was in order.

FUEL now has a place in the Mozilla CVS tree (browser/fuel) and development is happening in a branch (FUEL_DEVEL_BRANCH). We have been tweaking the API (0.1 and 0.2) a little over the past couple weeks. We have also added some information on the testing plan. We are using the Mochitest framework to run our unit tests.

So far, we have the basics parts in place, including:

  • Global Application object.
  • Ability to associate user data with the Application and Extension. No more hidden window hacks.
  • Easy access to preferences, again global with Application and per extension with Extension. The extension-based preferences automatically use an “extensions.your-ext.” branch.
  • Simple events for Application (“start”, “ready”, “quit”) and Extension (“install”, “uninstall”). Events can also be used to watch for changes on preferences and storage items.

We hope to get the code and tests ready for review this week. Then we can get something pushed to the trunk after that. As always, feedback is welcome – comments, email, IRC, or Wiki.

Posted on

XUL in HTML – UI Richness

Cédric Savarese has a demo of using XUL to make a richer HTML form. Cédric’s approach is different than my XUL-in-Internet Explorer idea. His method only uses XUL in a XUL-enabled browser (Firefox, SeaMonkey or Netscape). In other browsers, it falls back to DHTML elements.

One of the neat things about his approach is that it showcases how Mozilla-based browsers can create rich web interfaces without any extra plugins.

Posted on

Extension Development with FUEL

Removing obstacles for extension developers is my group’s primary task at Mozilla. There are lots of ways we can do this and areas include documentation, tutorials, samples and tools. One thing that becomes clear after watching and helping extension developers is the difficulty some have getting familiar with the Mozilla framework and the plethora of object and interfaces available. Not only are some of the concepts foreign, but in many cases there are no clear ways for extension developers to achieve their goals. There are places to get help. The Mozilla’s IRC channels are a great place to ask questions, especially #extdev.

We have also started work on a JavaScript library to help extension developers shorten the learning curve, feel more comfortable and generally be more productive. Codenamed FUEL, the library is primarily a wrapper around commonly used parts of the Mozilla framework which are unfamiliar or complicated. Some of the goals are:

  • Make it easy for developers to do common extension tasks.
  • Use terminology and interfaces familiar JavaScript developers.
  • Hide as many implementation details as possible.
  • Allow developers to get access to underlying XPCOM interfaces if they want to.
  • Act as a buffer between extensions and Firefox internals.

In addition to making it easier for extension developers, we also want to help improve the overall quality of Firefox. A broken extension appears to be a broken Firefox. Anything that can be done to help extensions avoid breakage and use clearly defined methods of hooking into the browser will help.

Currently, we (myself and John Resig) are in the planning and prototype phases. John’s JavaScript library experience (jQuery) is a huge plus for us. It’s great to have him working at Mozilla.

I invite you to take a look at the FUEL wiki pages and send us feedback and comments. You can use the discussion pages on the wiki or visit IRC (we hang out there way to much) or even use the newsgroup thread.

Update: I forgot to mention that our goal is to ship this library with Firefox (and other Mozilla applications as needed). Of course, we would also want it be able to usable in older Firefox releases too. Packaging could be a challenge.

Posted on

Code Snippets – Get Your Code Snippets

If you’re new to Firefox extension or XULRunner programming, one of the first things you may want to do is find a good tutorial to help get a “hello world” project bootstrapped. Mozilla Developer Center (MDC) has more than a few to help you get started: Firefox Sidebar, Firefox Statusbar, XULRunner Application. We are working to get more on the way too.

The next thing you may need is small code snippets to help show you how to do common things. Things you probably already know how to do in another language or framework. You just need to know how to do it with XUL, JavaScript and XPCOM. You should definitely check out the Code Snippets section on the MDC. There is also an Example Code section on Mozillazine.

If there is something you want to know how to do, but it’s not on the MDC yet, let me know. Also, for any of you experienced Mozilla developers out there, go check out the code snippets and please add some of your own. Just keep the code snippet short and sweet, we’re not writing a full sample extension or application. If you do want to write a large sample extension or application, create a full blown tutorial.

Posted on

Canvas/SVG/VML Drawing Roundup

Its been a couple months since I released RichDraw. At the time I was looking around at the state of browser-based drawing and diagraming tools. Most were Java or ActiveX based. Now, I am finding lots of pure Javascript API’s and tools.

There also seems to be more of a push to create API’s, making it easier to create cross-browser applications. Each browser seems to support a slightly different technology. Even when they overlap, browser implementations are not always interoperable. Javascript wrappers are a big help.

Here are some Javascript libraries focused on cross-browser drawing:

Here are some neat browser-based drawing applications:

  • Whiteboard – A little colaborative whiteboard experiment. Uses the Dojo.gfx toolkit to do the rendering.
  • Paintr – A weekend project by Anne van Kesteren. Uses suppport to do the rendering.
  • Draw – Has the makings of a full-blown flowcharting tool. Many shape types and support for connectors. Currently IE only, but since it is built on RichDraw, Firefox and Opera could be supported as well.
  • XDraw – Gavin Doughtie’s early work that may have started the Dojo.gfx toolkit.

Not an exhaustive list, but at least some evidence that drawing in a browser is getting serious.