Thunderbird 115: CSS Customization

eleven11 · Wednesday at 6:51 PM

@das10 : I was unable to achieve this on my own because BrowserToolbox/Inspector only lets me investigate elements down to <treechildren>:

CSS:

html#messengerWindow body vbox#messengerBody hbox#tabmail-container tabmail#tabmail.printPreviewStack tabbox#tabmail-tabbox tabpanels#tabpanelcontainer.plain vbox#calendarTabPanel.deck-selected hbox#calendarContent hbox#calendarDisplayBox vbox#calendar-task-box vbox tree#calendar-task-tree.calendar-task-tree treechildren.calendar-task-treechildren

<treechildren> is the deepest node displayed by Inspector. When hovering over <treechildren>, the entire task area lightens up.
Its subnodes are not displayed by Inspector.

I followed the instructions here to no avail:

* set devtools.chrome.enabled pref to true
* set devtools.debugger.remote-enabled pref to true
* set devtools.debugger.prompt-connection pref to false
* set devtools.inspector.showAllAnonymousContent pref to true
* set devtools.browsertoolbox.scope pref to "everything"

But despite these settings, the <treechildren> subnodes are not shown in Inspector.

eleven11 · Wednesday at 7:00 PM

das10 said:
@eleven11
I think this appears to work for the Canceled Tasks cell text:

@das10 : Thank you. Funny, we just cross-posted the same solution.
I'm wondering how you managed to find this solution ??

das10 · 2025-07-03T05:39:03-0400

After finding no hints on SearchFox, I Googled for "moz-tree-cell-text status cancelled", and one of the sites that came up was for Mozilla Sunbird, which was one of Mozilla's standalone Calendar applications.

Oh noes!

There it showed the particular selector for Cancelled tasks.

eleven11 · 2025-07-03T06:45:03-0400

@das10 : Awesome. Thanks a lot for sharing this helpful discovery!
Do you know how to display the subnodes of <treechildren> in Inspector (as described above) ?

das10 · 2025-07-03T07:09:44-0400

No, it is not possible using the Inspector, because as you found out, it only selects the whole list table. Also, I 'think' that because the tree layout uses javascript together with Mozilla's own legacy CSS code (which you can tell from the "moz" abbreviations in terms such as "moz-tree-cell-status" for example) rather than standard Html type CSS, there doesn't appear to be any alternatives which we could use to de-construct the tree layout using the Inspector alone. Supernova is gradually trying to replace such legacy CSS with Html CSS, so eventually may well decide to update this tree layout as well, which may make de-constructing such items easier in future.

das10 · 2025-07-03T08:40:29-0400

btw: @eleven; which AI tool did you use to chase this selector?

eleven11 · 2025-07-03T09:33:32-0400

das10 said:
btw: @eleven; which AI tool did you use to chase this selector?

I used the latest reasoning model (o4-mini) on duck.ai
But I warn you: It is really not worth the effort (unless you are as obstinate as I am and willing to spend a week chatting with the bot). It's more a trial&error approach. At the end, I switched gears and let the bot talk directly to the error console (with me as an intermediary relaying their respective inputs and outputs). This way, the bot could learn about the DOM structure and adapt the selectors. But it is a long and frustrating process.

das10 said:
No, it is not possible using the Inspector, because as you found out, it only selects the whole list table. I 'think' that because the tree layout uses javascript ...

It does not matter whether javascript is used to inject content. The Firefox Inspector inspects the HTML page content (including elements injected via javascript).

Both AI and the forum.mozillazine user (link posted above) say the following prefs should reveal the hidden <treechildren>. But it does not work for me:

JavaScript:

// *trying to help Inspector expand <treechildren> and see all the anonymous <treeitem> elements.
user_pref("devtools.chrome.enabled", true);
user_pref("devtools.debugger.remote-enabled", true);
user_pref("devtools.inspector.showAllAnonymousContent", true);
user_pref("devtools.inspector.showUserAgentShadowRoots", true);
user_pref("devtools.browsertoolbox.scope", "everything");

Please let us know if you find out how to dig deeper. There must be a way to do this.

das10 · 2025-07-03T10:48:43-0400

eleven11 said:
the following prefs should reveal the hidden <treechildren>.

I had those preferences already set up, except for "devtools.inspector.showUserAgentShadowRoots". With the Inspector, although one cannot inspect the individual task tree details directly, one can still trace the source of the details (which I assume you already did), for example, by using the filter in the Style Editor to find a suitable candidate. However, there’s no specific selector for "task-Cancelled", nor is it mentioned anywhere in SearchFox, so I don't know where else one could inspect for it.

filter in Style Editor showing calendar-task-tree.css

As for the AI tool you used, I attempted the same with Edge Copilot to test its capabilities. And after a marathon six-hour session, I eventually gave up.

We even tried JavaScript through the userChrome.JS extension in an effort to tease out the structure of that Tree, but after a lot of to-ing & fro-ing I gave up, although Copilot was willing to experiment further with different JS variations.

eleven11 · 2025-07-03T15:54:18-0400

@das10 : yes, that's pretty much sums up what I know, too. Let's keep each other posted when we find out more. Cheers.

eleven11 · 2025-07-03T16:16:52-0400

@das10 : One of my remaining head-scratchers: The "!" exclamation mark for high priority tasks is barely visible. I would like to bolden it. Any idea how ?

das10 · 2025-07-04T07:17:53-0400

The default SVG icon used in the task tree is very thin, but SearchFox shows there is another SVG icon which is much thicker. So, we can use the alternative SVG to replace the default one.

There are two ways to do it. Make a copy of the copy of that thicker SVG, place it in the Chrome folder & call it using its path, or to make the userChrome.css all inclusive we can encode the SVG file & use it inline within userChrome.css itself.

This is the way to do it using the all-inclusive (inline) method.
Go to this address & copy the SVG code shown below the icon image. You can replace "context-fill" shown there with the actual color you want eg: "red".
The first one is the low priority one & the second one is high priority.

low-priority.svg - mozsearch

searchfox.org

priority.svg - mozsearch

searchfox.org

Then, go to this address & insert the SVG text copied from the previous step. You can then copy the "Ready for CSS" code & use it as the background-image of the default icon. This will convert the SVG for use inline in CSS files.

URL-encoder for SVG

eg: using the encoded SVG in userChrome.css for High Priority (also Low priority)

Code:

/* High priority task icon */ 
.calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-priority, highpriority) {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='Red' fill-opacity='context-fill-opacity'%3E%3Cpath d='M8 2a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1zm0 11.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E") !important;
  background-size:       1.5em 1.5em  !important;
  background-position:   center       !important;
  background-repeat:     no-repeat    !important;
  stroke:                transparent  !important;
}

/* Low priority task icon */ 
.calendar-task-tree > treechildren::-moz-tree-image(calendar-task-tree-col-priority, lowpriority) {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='Blue' fill-opacity='context-fill-opacity'%3E%3Cpath d='M8 2a1 1 0 00-1 1v8.1L5.86 9.97c-.94-.8-2.21.47-1.41 1.41l2.82 2.82h.01c.4.39 1.1.38 1.48 0l2.78-2.79a.98.98 0 000-1.41 1 1 0 00-1.41 0L9 11.07V3a1 1 0 00-1-1z'/%3E%3C/svg%3E") !important;
  background-size:       1.5em 1.5em  !important;
  background-position:   center       !important;
  background-repeat:     no-repeat    !important;
  stroke:                transparent  !important;
}

ps: You might need to make adj's to the size.

Thunderbird 115: CSS Customization

Member

My Computer

Member

My Computer

Well-known member

My Computer

Member

My Computer

Well-known member

My Computer

Well-known member

My Computer

Member

My Computer

Well-known member

My Computer

Member

My Computer

Member

My Computer

Well-known member

My Computer

Similar threads