如何在Firefox Addon XUL树中添加和删除行

Question

In my Firefox extension I have a simple tree which has two columns. I am trying to programatically:

• Add a row
• Remove all rows

My XUL Tree:

<tree flex="1" id="mytree" hidecolumnpicker="true">

  <treecols>
    <treecol id="sender" label="Sender" flex="1"/>
    <treecol id="subject" label="Subject" flex="2"/>
  </treecols>

  <treechildren>

  </treechildren>

</tree>

Javascript I've tried to add rows:

// trying to add rows
var data = {
    {'sender' : 'John', 'subject' : 'something'},
    {'sender' : 'Adam', 'subject' : 'something else'},
    {'sender' : 'Bob', 'subject' : 'something else again'}
};

document.getElementById("mytree").view.data = data;

There are no errors with this, the tree just does not get the rows added. I know the code runs because if I add an alert() it fires.

Javascript I've tried to remove all rows:

var tree = document.getElementById("mytree");

tree.view.data = {};
tree.view.treeBox.rowCountChanged(0, -1);

This produces an error:

document.getElementById("mytree").view.treeBox is undefined

Edit:

After Wladimir's suggestion to add the XUL elements directly, this will add a row:

var treeChildren = document.getElementById("my_tree_children");

var treeitem = document.createElement('treeitem');
var treerow = document.createElement('treerow');

var treecell_1 = document.createElement('treecell');
var treecell_2 = document.createElement('treecell');

treecell_1.setAttribute('label', 'John');
treecell_2.setAttribute('label', 'something');

treerow.appendChild(treecell_1);
treerow.appendChild(treecell_2);

treeitem.appendChild(treerow);

treeChildren.appendChild(treeitem);

Although hard coded in this example, the values for the cells (label attribute) will come from user input. What method of encoding/escaping should I use when putting user input directly into an attribute of a XUL element, to prevent XSS?

Answer 1

Let me ask it this way: why should it work? The documentation tells us that tree.view is an nsITreeView instance. And nsITreeView has no property called data . Just because you can set this property nevertheless doesn't mean that it will do anything.

Now how would you actually put data into a tree widget? The documentation explains that there are several tree types, depending on type the data might come from a different place. You probably want to use the default option - a content tree. This means that you need to create treeitem elements for each row in your data and add these to the treechildren element - as shown in the example . You can generate these elements dynamically using the usual DOM methods.

The tree widget can also generate its content automatically from an RDF or XML datasource. If you have your data in a JavaScript object however, the only alternative would be creating a custom nsITreeView implementation and assigning it to tree.view . But this is not quite trivial and usually an overkill.