Replace Components.classesByID with document.implementation.createDocument

I am not the author of this code, but it is no longer maintained. So I am trying to fix it, but I have very little experience in javascript. Since Firefox 9, Components.classesByID["{3a9cd622-264d-11d4-ba06-0060b0fc76dd}"]. has been obsolete. Instead, it is suggested that document.implementation.createDocument be used. Can someone here show me how to implement these changes? I seem to be, just banging my head with everything I have tried.

The example given at Mozilla developer network is:

    var doc = document.implementation.createDocument ("", "html", null);
var body = document.createElementNS("", "body");
body.setAttribute("id", "abc");
alert(doc.getElementById("abc")); // [object HTMLBodyElement]

and the code in the .jsm I am trying to fix is:

createFgImageData: function helpers_createFgImageData() {

    // I don't know how to load images synchronously *FIX*
    // Until then, this awesome bitmap format below will do. 

    this.fgImageData = {};
    this.fgImageData["check"] = [
        "      *",
        "     **",
        "*   ***",
        "** *** ",
        "*****  ",
        " ***   ",
        "  *    "];
    this.fgImageData["radio"] = [
        " **** ",
        " **** "];
    this.fgImageData["menu-ltr"] = [
        "*   ",
        "**  ",
        "*** ",
        "*** ",
        "**  ",
        "*   "];
    this.fgImageData["menu-rtl"] = [
        "   *",
        "  **",
        " ***",
        " ***",
        "  **",
        "   *"];            

    // I think I'm doing something slightly wrong when creating the document
    // but I'm not sure. It works though. *FIX*

    var domi = Components.classesByID["{3a9cd622-264d-11d4-ba06-0060b0fc76dd}"].
    this.document = domi.createDocument("", "html", null);
    this.canvas = this.document.createElementNS("", "html:canvas");

    for(var name in this.fgImageData) {
        if (this.fgImageData.hasOwnProperty(name)) {
            var data = this.fgImageData[name];
            var width = data[0].length;
            var height = data.length;

            this.canvas.width = width;
            this.canvas.height = height;
            var g = this.canvas.getContext("2d");
            g.clearRect(0, 0, width, height);
            var idata = g.getImageData(0, 0, width, height);
            for(var y=0, oy=0; y<height; y++, oy+=idata.width*4)
                for(var x=0, ox=oy; x<width; x++, ox+=4)
          [ox+3] = data[y][x] == " " ? 0 : 255;

            this.fgImageData[name] = idata;


If you don't have access to an actual window (like in a JavaScript module) it's probably best to use DOMParser to create an HTML document (thanks to Boris for this hint). It can be instantiated in any context:

var parser = Components.classes[";1"]
var dummyDocument = "<html xmlns=''/>";
this.document = parser.parseFromString(dummyDocument, "text/xml");
this.canvas = this.document.createElementNS("", "canvas");

Note that the second parameter to createElementNS() should be "canvas", not "html:canvas" - the namespace is specified in the first parameter. Also note that as of Firefox 12 DOMParser can also parse HTML code (MIME type "text/html") so alternatively you could write:

this.document = parser.parseFromString("", "text/html");

A minimal HTML document is indeed the empty string.

There is not preexisting document to work with in a JSM. You have several options:

  1. Pass in a relevant parent document from the caller.
  2. Create a blank document using DOMParser on an empty string or XHR to an empty data: URI.

Need Your Help

How to build a jar using an own MANIFEST.MF in Eclipse

java eclipse jar

I have a custom MANIFEST.MF in my java-project in Eclipse.

Should JUnit3 TestSuite really be used like this?

java design junit junit3

I couldn't recall how to use JUnit3 TestSuite and after some Googling found this

Why can't I access my panel's getWidth() and getHeight() functions?

java swing jpanel keylistener graphics2d

I'm writing a simple program to test out basic GUI. The program prints a letter in the middle of the screen and allows the user to move it with the arrow keys. Everything works fine, but when I try...