Indistinguishable from Jesse

DOM 2 does not allow nodes to be moved between documents -- in fact, it requires that implementations throw an error when code tries to do so. But for years, Gecko has not enforced this rule.

It's a bit embarrassing that Internet Explorer gets this right and we get it wrong. Someone might think Gecko is trying to embrace and extend the DOM.

Soon, Gecko will start enforcing the rule on trunk. But bringing Gecko in line with this aspect of the DOM spec risks breaking Gecko-specific code, such as code in extensions and bookmarklets written for Firefox. For example, my Search Keys extension used to create some nodes in the chrome document, and some in the foreground tab, before putting them in the tab that that just loaded. Search Keys 0.8 creates all elements in the correct document.

I also updated the following bookmarklets to create nodes in the correct document and/or use importNode when copying nodes between documents:

• Validation bookmarklets: list alts
• Web development bookmarklets: partial source, view style sheets, view scripts
• Text and data bookmarklets: view selection
• Bookmarklets for testing browsers: clone document

These bookmarklets previously only worked in browsers that violated the DOM spec by allowing nodes to be moved between documents without a call to importNode or adoptNode. Maybe some of them work in IE now.

If you use those bookmarklets, you should grab the new versions so they won't break when you update to next week's trunk build or to Firefox 3.

A desperate web developer emailed me asking how make a bookmarklet that does something with the selected text, where the selected text is usually in a textarea.

He had tried using window.getSelection.toString(), but that doesn't work, because window.getSelection() is implemented in terms of DOM Ranges and it doesn't make much sense to have a DOM Range inside a textarea.

Here are some of the methods I tried:

• Determine focus using by tracking with onfocus or onblur events. Works for web pages, but doesn't work for bookmarklets.
• Determine focus using window.getSelection().getRangeAt(...) and commonAncestorContainer. Doesn't work (bug 336936).
• Determine focus using a XUL document in an iframe and commandDispatcher.focusedElement. Ugly Firefox-only hack, but it works.
• Determine focus using WhatWG's document.currentFocus. Only a working draft, not implemented in Firefox yet (bug 337631).
• Use selectionStart / selectionEnd in all textareas. This can return nonempty selections from multiple textareas.

Am I missing a sane solution that works in current versions of Firefox?

SVG support

SVG is W3C specification providing resolution-independent scalable vector graphics, along with a DOM. Firefox 1.5 supports a subset of SVG 1.1. For more information, see SVG in DevMo.

Canvas Support

<canvas> is a scriptable bitmap drawing surface. It is suitable for many uses, such as drawing dynamic graphs and game graphics. For more information, see Drawing Graphics with Canvas or the Canvas tutorial.

Hidden referrer column for history

Extensions can now access the referrer information for pages stored in the browser history. This feature can be used to provide alternate history views and other useful functionality. For example, my How'd I Get Here? extension uses this feature.

API for prioritizing HTTP connections

The Mozilla networking library now supports the prioritization of connections to a specific server. (See nsISupportsPriority.)

API for configuring proxies

It is now possible for extensions to easily override the proxy configuration without affecting user-visible preferences. (See nsIProtocolProxyService, nsIProtocolProxyFilter, and nsIProtocolProxyCallback.)

API for managing user and UA stylesheets

Extensions can now register stylesheet URIs as additional user and UA stylesheets. This means extensions no longer have to try to edit userContent.css to add styling (say for XBL binding attachment) to web pages. This makes it easier to implement extensions like Flashblock. For details on using this API, see Using the Stylesheet Service.

Site-specific user style sheet rules

Firefox now supports site-specific user style sheet rules. While advanced users can edit userContent.css to use this feature directly, an extension could also take advantage of this feature using the API for managing user style sheets above.

Dynamic Overlays

Loading of XUL overlays after the document has been displayed is now supported. (See nsIDOMXULDocument.)

Translucent Windows (Windows/Linux)

On Windows and Linux, XUL windows with a transparent background are now supported. This allows whatever is below the window to shine through the window background.

New Preferences Bindings

These new bindings make it easier to create preferences windows for extensions. The new preferences windows support instant-apply behavior, which is enabled by default on Mac and Linux.

API for implementing new command-line switches

An extensible API has been introduced so that extensions can easily handle complex command-line flags. (See nsICommandLine and nsICommandLineHandler.)

XTF Support

The eXtensible Tag Framework allows adding support for new namespaces using XPCOM components to Mozilla (written in JavaScript or C++). For example, the Mozilla XForms Project uses XTF to add support for the XForms namespace. See the XTF Home Page.

Cryptographic hash API

Extensions now have access to several cryptographic hash functions, including MD5, SHA-1, and several flavors of SHA-2. (See nsICryptoHash.)

Rich list box

<xul:richlistbox> is a new widget that Firefox's Download Manager and Extension/Theme manager now use. For more information, see XULPlanet: richlistbox or DevMo: richlistbox.

Access to nsIEditor of textboxes

Firefox now has a supported method for getting the nsIEditor of textboxes and textareas, making it easier to implement features such as spell checking for web forms. For more information, see bug 303727 or nsIDOMNSEditableElement.

Access to nsIPipe

See bug 300423 or nsIPipe.

Other improvements

This post emphasizes new features since Firefox 1.0.7 over things that have changed since Firefox 1.0.7, but here are a few important things that have changed:

• Improvements to evalInSandbox make it easier for extensions like Greasemonkey to inject scripts into web pages safely.
• Improvements to designMode (WYSIWYG HTML editing) make it more suitable for use in extensions.
• Extensions can now include search plugins, plugin DLLs, and platform-specific XPCOM components.
• Extensions can now add to the user-agent string in a safe way.
• There are now extra ways to install and uninstall extensions, especially Firefox extensions that are shipped with Windows programs.
• New JavaScript language features allow extension developers (and web developers who only target Firefox) to manipulate arrays and XML concisely.
• There have been many changes in XUL, especially to the XUL tree widget.
• Extensions written using JavaScript now use XPCNativeWrappers by default, making it easier to write extensions that manipulate web content without introducing security holes.
• Extensions can now specify that they are compatible only with specific versions of Firefox (e.g. Firefox 1.5.0.2). Most extensions that work with Firefox 1.5 should set their maxVersion as 1.5.0.*, indicating that they will work with future security releases (unless some of those releases contain API changes, which is unlikely and will cause them to be numbered e.g. Firefox 1.5.1). See this page for more information.

Parts of this post were taken from this page, which was based on a wiki page, which was based on an early version of my changelog for Deer Park Alpha 1. It might be merged with this wiki page in the future.

AutoLink turns plain text URLs, email addresses, bug numbers, ISBNs, and US phone numbers into links. For example, it turns all of these into links:

• http://www.squarefree.com/userscripts/
• jruderman@gmail.com
• Bug 162020
• Bug 162020 comment 0
• ISBN 0-340-82899-4
• (555) 555-5555

You can add new filters if you know how to use JavaScript regular expressions. Here is an example filter, rewrapped to fit in my blog:

  {
    name: "Bug number",
    regexp: /bug \#?(\d+)/ig,
    href: function(match) {
      return
        "https://bugzilla.mozilla.org/show_bug.cgi?id=" + 
          match[1];
    }
  }

To install a user script into Firefox, install Greasemonkey, restart Firefox, open the user script, and select "Install User Script..." from the Tools menu.

JavaScript Development Environment 2.0 can run as a bookmarklet and lets you create Greasemonkey scripts in four clicks. I used it to make the Valid XHTML Greasemonkey script and I loved the shortened edit-test cycle.

Asa pointed me to a new Firefox extension called Platypus. Platypus lets you remove or isolate parts of a page a similar manner to Aardvark and lets you save sequences of page-modifying actions as Greasemonkey scripts. Platypus tries to identify elements by IDs in the scripts it generates and falls back on using XPath expressions such as /HTML[1]/BODY[1]/FORM[1].

I used Platypus on Bonsai CVS query form to remove useless parts of the page. I modified the script it generated to move Bonsai's menu to the bottom of the page instead of removing it from the page entirely. The resulting script is Bonsai Isolate Form. To use the script, you must have both Greasemonkey and Platypus installed.

Inspired, I made two other Greasemonkey scripts for the Bonsai form. Bonsai Date Option makes the "date" radio group selection change when you click a textbox associated with one of the radio buttons, and Bonsai Nightly Range makes the "date" section default to the range between the previous two nightly builds rather than the last two hours.

Entering a single-line comment on the last line no longer causes a syntax error. Updated shell, updated bookmarklet.

New features and bug fixes in JavaScript Shell 1.2:

• Multiline input. You can now insert line breaks using Shift+Enter and paste multiline scripts. Edward Lee ("Mardak" on irc.mozilla.org) added this feature.
• Fixed the bookmarklet version to work in Firefox 1.0.3 (it was broken due to the fix for bug 289074). Edward Lee was the first to point out this problem and helped me fix it.
• Fixed print() to not bring up the File > Print dialog.
• Fixed blink() to work in IE (using border instead of outline) and Opera.
• Made the feature that lets you click anywhere to focus the input box work in Opera. It still doesn't work in IE.
• Fixed multiline output in Opera. It still appears all on one line in IE.
• Fixed the bookmarklet version to have a vertical scrollbar when needed on Firefox trunk. (I might be working around a bug in Firefox trunk.)

I'm aware of several new problems introduced by the multiline input feature:

• In Opera, Enter inserts a line break and *then* submits.
• In IE, multiline output isn't broken over lines.
• In Firefox 1.0.x, but not on trunk, a scrollbar appears if you have a few dozen lines of input.

JavaScript Shell 1.1 is still available.