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 does the Operating System determine how much stack space should be allotted to each thread?

multithreading memory memory-management concurrency operating-system

How does the OS determine how much stack space will be given to each thread in the address space of underlying process?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.