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