Idle Hacking

You may have read the following text from xulplanet

An atomized list of properties for a given cell. Each property, x, that the view gives back will cause the pseudoclass :moz-tree-cell-x to be matched on the ::moz-tree-cell pseudoelement.

and start scratching your head wondering what it means. After searching through mozilla source for some examples of how getCellProperties or getRowProperties work, I finally figured it out and have a much greater respect for how the nsITreeView can really be customized. First an example of styling a specific cell and a complete row, assuming you already know how to setup your own nsITreeView:



The getCellProperties in our nsITreeView, checks the status column on a row and sets a property record_closed if the records status is closed:

 getCellProperties: function(row,col,props){
  this._fetchToRow(row);
  var record = this.records[row];
  if( record.status == "Closed" ){
    var aserv=CC["@mozilla.org/atom-service;1"].getService(CI.nsIAtomService);
    props.AppendElement(aserv.getAtom("record_closed"));
    if( col.id == "status_id" ){
      props.AppendElement(aserv.getAtom("record_status_closed"));
    }
  }
}

So, what is this property on the cell ‘record_closed’ and ‘record_status_closed’? It made sense to me once I found this using lxr, and realized I could control the style on the cell using it like this:

treechildren::-moz-tree-cell-text(record_closed,record_status_closed) {
text-decoration:line-through;
font-weight:bold;
}
treechildren::-moz-tree-cell-text(record_closed) {
color:gray;
}

Basically, it works like a CSS attribute selector.

So, now I can style the column that indicates the status as closed with a line through and color each of the cells with a gray font. getRowProperties works the same you just can’t effect the cell fonts, but you can effect the whole row background.

Software CSS, Javascript, XBL, XUL

I’ve been using this great datepicker for some projects. The only thing about it that hasn’t been very nice is that its an overlay so when used you have to be careful about mixing up ids. I typically use it with an input box and a nice calendar button. So, building on the work of the datepicker I bundled it into an easy to use XBL widget.

datepicker XBL binding
Updated Link:datepicker XBL binding

to use it unpack the tar ball, and add some css like:


datepicker{
-moz-binding: url("chrome://package/content/datepicker.xml#datepicker");
}


Also, note that you’ll have to go through the files and fix the chrome paths to match the package your using the datepicker from.

Software Datepicker, Javascript, XBL, XUL