551873 - Include an E4X DOM library by default

Status: RESOLVED WONTFIX

(Add-on SDK Graveyard :: General, defect)

Description

[Eli Grey (:sephr)]

User-Agent:       Mozilla/5.0 (X11; U; Linux x86_64; en-US) AppleWebKit/532.9 (KHTML, like Gecko) Chrome/5.0.307.11 Safari/532.9
Build Identifier: 

As seen in the code of many Jetpacks, $('<html-code>...</html-code>') is often used. There are a few problems that arise from this: Using multi-line strings (to keep code readable) is complex to beginners (escape linebreaks or use a CDATA wrapper), dynamically including values requires string concatenation, and there's already a standard way that this should be done without jQuery. With an E4X DOM library, people could just directly use the <html-code>...</html-code> part in their source code spanning multiple lines and include values using {brackets}.

There are three ways to go about this:

1. Include a library that implements the optional DOM features in ECMA-357 Appendix A that Mozilla never implemented. The code would look like <h1>foo</h1>.domNode().
2. Include a jQuery E4X DOM plugin as it looks like you guys love jQuery. The code would look like $(<h1>foo</h1>).
3. (The hard way) Actually implement the optional DOM features in ECMA-357 Appendix A that arn't in the current E4X implementation.

There is a wide selection (read: only one of each :P) of E4X DOM libraries and jQuery plugins that could be used.


Also, should default xml namespace = "http://www.w3.org/1999/xhtml"; be implied at start and if Jetpack developers don't want a namespace automatically on all of their XML they can do default xml namespace = "";?

Reproducible: Always




Given this example Jetpack code using the current method that requires jQuery:

jetpack.future.import("pageMods");
var callback = function(document){
  var currentTime = new Date;
      currentHour = currentTime.getHours(),
      blacklistRange = [8, 17]; // these could have been set using some config
  if (currentHour > blacklistRange[0] && currentHour < blacklistRange[1]){
    document.title = "This site is blacklisted. Get some work done!";
    $(document).find("body").css({border:"3px solid #000000"});
    $(document).find("body").children().hide();
    $(document).find("body").prepend($('<h1>Sorry this site is blacklisted until 17:00. sadface.</h1>'));
  }
};
var options = {};
options.matches = ["http://*"];
jetpack.pageMods.add(callback, options);


After an E4X DOM library is included, the line that prepends an h1 element to the body could be replaced with either of these:

$(document).find("body").prepend(<h1>
  Sorry this site is blacklisted
  until {blacklistRange[1]}:00. sadface.
</h1>.domNode());

or (with a jQuery plugin)

$(document).find("body").prepend($(<h1>
  Sorry this site is blacklisted
  until {blacklistRange[1]}:00. sadface.
</h1>));


The only E4X DOM library I know of is e4x.js (http://github.com/eligrey/e4x.js) and the only jQuery E4X DOM plugin I know of is a jQuery plugin with that exact name, "jQuery E4X DOM Plugin" (http://github.com/eligrey/e4x.js/blob/master/jquery-plugin/jquery.e4x-dom.js).

Comment 1

[Myk Melez [:myk] [@mykmelez]]

In the new Jetpack SDK, we're no longer bundling jQuery, and we are going to be enabling extensions to bundle actual HTML files alongside their JavaScript code.  That changes things a bit...

> 1. Include a library that implements the optional DOM features in ECMA-357
> Appendix A that Mozilla never implemented. The code would look like
> <h1>foo</h1>.domNode().

This remains an option.

> 2. Include a jQuery E4X DOM plugin as it looks like you guys love jQuery. The
> code would look like $(<h1>foo</h1>).

This is no longer an option (although an extension author is free to bundle jQuery themselves and include such a plugin).

> 3. (The hard way) Actually implement the optional DOM features in ECMA-357
> Appendix A that arn't in the current E4X implementation.

This is for the JS engine team to determine.  I would be surprised if there wasn't already a bug about it.

In general, I think the need for snippets of HTML (whether strings or E4X literals) will decrease now that the SDK lets you bundle HTML files with your extension.  Nevertheless, I do still see the use cases.  I'm not sure we should be promoting E4X as the solution for them, but it's certainly worth considering.

Comment 2

[Myk Melez [:myk] [@mykmelez]]

The Add-on SDK is no longer a Mozilla Labs experiment and has become a big enough project to warrant its own Bugzilla product, so the "Add-on SDK" product has been created for it, and I am moving its bugs to that product.

To filter bugmail related to this change, filter on the word "looptid".

Comment 3

[Myk Melez [:myk] [@mykmelez]]

This seems best as a third-party module rather than part of the core library.