Inspecting folder tree using developer tools

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

There is only <treechildren xmlns="" 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.

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:

1 Like

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("");

/* 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;