Programmatically (js) get element by nodeName/pseudo-element

[johnduncan]

Hello all. I am adding a feature to my extension that overlays a custom column to the mailnews messegner.xul view. The column contains the sender's X-Face/Face/Gravatar/picon/X-Image-Url/etc. So far, I have successfully added the column and the extension successfully sets the image, but the image gets cut off since the threadTree's treechildren (-moz-tree-row) has a set height. I would like to programmatically set the height to whatever max size value my extension pref is set to (getting rid of the possibility of using a css XUL overlay).

My only real question is: how do you get a child element by nodeName and pseudo element?

I know I can get the threadTree element by:

Code: Select all

var threadTree = document.getElementById("threadTree");

But I have no idea how to then get the treeChildren child element (of the tree-bodybox sub-class), since it neither has an id or class name.

The DOM tree looks like this:


The css would look something like this (except the height value would be read in from the preferences manager):

Code: Select all

/* Adjust Thread pane message row height */
#threadTree treechildren:-moz-tree-row {
height: 48px !important;
}

[tanstaafl]

Moved from Thunderbird Support to Extension Development

[lithopsian]

You don't style trees that way. It gets messy. Read this and see if it helps.

[johnduncan]

You don't style trees that way. It gets messy. Read this and see if it helps.

Thanks.

I realize that this was a stupid question, as the min and max height that the treeRows can be is only 48 (as everything other than a gravatar is locked in at 48x48). Thanks for the help.