Programmatic generation of the built-in tree view

Here is an example of programmaticaly building a tree and using the built-in tree view for displaying the results of a places query:

var tree = document.createElement("tree");
tree.setAttribute("seltype", "single");
tree.setAttribute("rows", "10");
tree.setAttribute("flex", "1");
tree.setAttribute("type", "places");

The top element is the tree element, which has some attributes here. Important is the type attribute, that indicates, that the tree is filled with informations from places.

var columns = document.createElement("treecols");

var column1 = document.createElement("treecol");
column1.setAttribute("id", "tree_title");
column1.setAttribute("anonid", "title");
column1.setAttribute("label", "Title");
column1.setAttribute("flex", "1");
columns.appendChild(column1);

All columns are surrounded by the treecols element. The anonid attribute specifies for each column, which informations of the places query, which comes later, are filled in. For a list of available values, see Displaying Places information using views

var splitter1 = document.createElement("splitter");
// splitter1.setAttribute("class", "tree-splitter");
columns.appendChild(splitter1);

Splitters divide the columns, and make the columns resizable. If you want a column not to be resized, set the class attribute to the value "tree-splitter", as shown in the commented line.

var column2 = document.createElement("treecol");
column2.setAttribute("id", "tree_url");
column2.setAttribute("anonid", "url");
column2.setAttribute("label", "URL");
column2.setAttribute("flex", "2");
columns.appendChild(column2);
tree.appendChild(columns);

The second column will contain also contain the anonid attribute, which makes this row displaying the urls that are resulted.

var children = document.createElement("treechildren");
children.setAttribute("alternatingbackground", true);
tree.appendChild(children);
document.documentElement.appendChild(tree);

An alternating background for even and odd rows is enabled, and the tree gets appended to the document.

var historyService = Components.classes["@mozilla.org/browser/nav-history-service;1"].getService(Components.interfaces.nsINavHistoryService);
var query = historyService.getNewQuery();
query.domainIsHost = true;
query.domain = "developer.mozilla.org";

var options = historyService.getNewQueryOptions();
options.resultType = historyService.RESULTS_AS_URI;
options.queryType = historyService.QUERY_TYPE_HISTORY;

var uri = historyService.queriesToQueryString([query], 1, opts);  
tree.place = uri;  

A new query is built, it will return all visited pages that have the the host "developer.mozilla.org". In the last line, the query and the defined options get attached to the tree view.

Complete code listing

function treeLoad() {
	var tree = document.createElement("tree");
	tree.setAttribute("seltype", "single");
	tree.setAttribute("rows", "10");
	tree.setAttribute("flex", "1");
	tree.setAttribute("type", "places");

	var columns = document.createElement("treecols");

	var column1 = document.createElement("treecol");
	column1.setAttribute("id", "tree_title");
	column1.setAttribute("anonid", "title");
	column1.setAttribute("label", "Title");
	column1.setAttribute("flex", "1");
	columns.appendChild(column1);

	var splitter1 = document.createElement("splitter");
	// splitter1.setAttribute("class", "tree-splitter");
	columns.appendChild(splitter1);

	var column2 = document.createElement("treecol");
	column2.setAttribute("id", "tree_url");
	column2.setAttribute("anonid", "url");
	column2.setAttribute("label", "URL");
	column2.setAttribute("flex", "2");
	columns.appendChild(column2);
	tree.appendChild(columns);

	var children = document.createElement("treechildren");
	children.setAttribute("alternatingbackground", true);
	tree.appendChild(children);
	document.documentElement.appendChild(tree);

	var historyService = Components.classes["@mozilla.org/browser/nav-history-service;1"].getService(Components.interfaces.nsINavHistoryService);
	var query = historyService.getNewQuery();
	query.domainIsHost = true;
	query.domain = "developer.mozilla.org";

	var options = historyService.getNewQueryOptions();
	options.resultType = historyService.RESULTS_AS_URI;
	options.queryType = historyService.QUERY_TYPE_HISTORY;
	
	var uri = historyService.queriesToQueryString([query], 1, opts);  
	tree.place = uri;
}