Inspecting folder tree using developer tools

Thunderbird
1

I’m trying to customize the tree text colors but I’m unable to inspect it:

Screenshot 2020-12-06 11.42.22
Screenshot 2020-12-06 11.42.221625×842 113 KB

There is only <treechildren xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" tooltip="folderpopup" slot="treechildren"/> node with no children.

Right now I’m using userChrome.css from this answer as a template by I don’t know how to modify it to change the text colors.

2

Hi Juraj, tree children are special, they are not rendered with dom elements. There are some non-standard css pseudoclasses that will help you here:

https://developer.mozilla.org/en-US/docs/Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell-text

1 Like
3

Thanks Philipp, that helped!

I’ve managed to fix the color of icon and text for the Unread / New unread folder state.
If anyone interested, the whole code:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* Color of the Inbox icon (Unread) */
treechildren::-moz-tree-image(folderNameCol, specialFolder-Inbox) {
  fill: #ffffff !important;
}
/* Color of the Inbox text (Unread) */
treechildren::-moz-tree-cell-text(folderNameCol, specialFolder-Inbox) {
  color: #ffffff !important;
}

/* Same here but for New unread: */
treechildren::-moz-tree-image(folderNameCol, newMessages-true) {
  fill: #0AA5FF !important;
}
treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true) {
  color: #0AA5FF !important;
}