UserChrome help - new message background color

10 months ago by ISOmorph to c/thunderbird

I've managed to customize Thunderbird to better fit my KDE theme using the browser toolbox as guide. However, the toolbox doesn't work for the new message window. I can't find out how to change the default background color there. I would appreciate If anyone could point me in the right direction. The screenshot shows the part I'm trying to modify.

cgtjsiwy 3 points 10 months ago

After some trial and error, I found that adding the following to userContent.css seems to work:

@-moz-document url(about:blank?compose) {
    body {
        background-color: red;
    }
}

Thunderbird's source code also has some function that reads preferences editor.use_custom_colors and editor.background_color and sets the default color based on those, but it seems that the function is never called. Code rot I guess.

save

path: 0 21017730, hotness: undefined, score: 3, children: 3

ISOmorph 2 points 10 months ago

Thank you so much, this worked. Two points though:

Your post made me look in the preferences. You can change the colors there, and it does work as well. I prefer the userChrome way though:

Could you explain to me how you went about approaching the issue? The input field from the new event window I've shown below isn't affected by your setting. I'd hate to bother you to trial and error your way into finding out that setting as well.

save

path: 0 21017730 21022658, hotness: undefined, score: 2, children: 2

cgtjsiwy 2 points 10 months ago

You can change the colors there, and it does work as well.

Thanks for the correction. I must've overlooked something when looking at how the preferences are loaded. :)

Could you explain to me how you went about approaching the issue?

At first, I looked into Thunderbird's source code and tried to simply identify the element that I could use in userChrome.css. I found that the element is called #messageEditor in messengercompose.xhtml. However, this doesn't work because the editor textboxes are apparently iframe-like things that load another website inside them (probably to prevent copypaste injection attacks or something). Even if I added * {background-color: red} in userChrome.css, it couldn't match the textbox.

I figured out the userContent.css way when I opened the debugger in Thunderbird's developer tools and set a breakpoint in the script that manages the textbox. For example, here's how to find it for the new calendar event editor:

So the calendar editor lives inside about:blank. However, about:blank is used in lots of places, so it would be good to add some extra conditions instead of changing the background of all about:blank pages used throughout Thunderbird. Luckily, the above picture shows that there's a link element that can be used as an extra condition like this:

@-moz-document url(about:blank) {
    html:has(link[href="chrome://messenger/skin/shared/editorContent.css"]) body {
        background-color: red;
    }
}

The tricky part is finding the right code to put a breakpoint into. It helps if you have a local copy of the comm-central source code files (as instructed in Thunderbird docs), since it includes XHTML files for digging around. The new calendar event window is in the somewhat logical path calendar/base/content/item-editing/calendar-item-iframe.xhtml, and the related scripts are right next to it in calendar-item-iframe.js.

save

path: 0 21017730 21022658 21023921, hotness: undefined, score: 2, children: 1

ISOmorph 2 points 10 months ago

Thank you so much for taking the time to teach me how to fish. I admit I was not seeing myself crawling through the source to find out how to alter those settings.

save

path: 0 21017730 21022658 21023921 21025192, hotness: undefined, score: 2, children: 0

ISOmorph 1 point 10 months ago

Here is another picture showing Dolphin with the "correct" background color and the new event window, which also has the same color I'm trying to change in the new message window

save

path: 0 21015970, hotness: undefined, score: 1, children: 0