Enhancement: Adding space between account folders

[kessa]

I saw in an earlier version an example where there was space between different email accounts (In the left hand menu).

For example:

Is this a feature that can be re-added? (I'm currently using v78.7 on Windows 10) It's really helpful when using lots of different email accounts, as it helps to keep them visually separated.

Thanks Kessa

[conema]

Hi @kessa, I think that this was the original monterail mockup, but the space was never implemented in the real theme. I'm not really sure how you can add the space, try to add this in the messenger.css file:

#folderTree treechildren treeitem {
       margin-bottom:  space px;
}

or

#folderTree treechildren treerow {
       margin-bottom:  space px;
}

Where you should modify "space" with your desired space. Try also to change "margin-bottom" with "padding-bottom".

[kessa]

Hi @conema

Thanks for the fast reply.

I've had a look for messenger.css and have a run a complete system search but it doesn't find anything.

I've also done a manual search in C:\Users\[username]\AppData\Roaming\Thunderbird\Profiles\wldngo7h.default-release and C:\Program Files (x86)\Mozilla Thunderbird and can't find it in either of those.

Can you point me in the right direction please?

Thanks

[conema]

You were near it, it should be in C:\Users[username]\AppData\Roaming\Thunderbird\Profiles\wldngo7h.default-release\extensions\MonterailDark2@conema.me.xpi. Open the xpi file as a zip file, messenger.css is in /content/skin/. Remember to close thunderbird before than editing the file.

[kessa]

Thanks @conema

I've had a play this evening but sadly can't get either of the above to work.

I did try to inspect the DOM but it only allows me to see as far as: <treechildren xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" tooltip="folderpopup" slot="treechildren"/> which is the whole of that tree, so I haven't been able to identify/learn/check the DOM structure.

I was keen to try to resolve this myself so I don't take up your time so I had a go with some "blind" trial & error using the code you kindly provided, coupled with reviewing the existing CSS and the closest I was able to get was #folderTree>treechildren::-moz-tree-row which did work, but impacted every row.

I tried to change the last bit to #folderTree>treechildren::-moz-tree-item which didn't work. (nor did it if I used treeitem instead)

So to try to track down the right identifier I thought I'd check to see where the account icon was being used and found the following:

    list-style-image: url("chrome:../email-account-light.svg") !important;
}

treechildren::-moz-tree-image(folderNameCol, isServer-true) {
    list-style-image: url("chrome:../email-account-light.svg") !important;
}

But sadly that only references the image as a pseudo element so I haven't been able to track down the right name.

I'm willing to keep trying (as although I'm happy with CSS, I've never coded within Thunderbird's XUL environment before so it's a good learning opportunity for me)...if there's a way to view the DOM directly rather than having to guess. Any tips?

Alternatively, any other ideas on what the correct identifier might be?

Many thanks Kessa

[conema]

But sadly that only references the image as a pseudo element so I haven't been able to track down the right name.

if there's a way to view the DOM directly rather than having to guess.

treechildren are a special XUL element, as you seen they can't be inspected with the DOM inspect tool. The style of the treechildren can be modified only with pseudo elements (e.g. ::-moz-tree-item, ::-moz-tree-row, etc...). Yesterday I tried to find a way to add the space, but all attempts were in vain, I found a way to add a margin/padding to the account icon row, but sadly, adding a padding/margin doesn't move all the children (inbox, spam, sent, etc...), but only the row, which become hidden under its children (using a margin-top). Also searchfox wasn't of much help.

I'm sorry I couldn't help more, at this point I really don't know if its possibile with only CSS, you could try asking in the thunderbird chat in matrix, they are really helpful.

I'm going to close this issue, since it isn't theme related, but feel free to continue the discussion here and update me if you find a way to add the space.