Closed Bug 1491214 Opened Last year Closed Last year

Allow theming trees (Port of bug 1418602 - Allow theming sidebars


(Thunderbird :: Theme, enhancement)

Not set


(Not tracked)

Thunderbird 64.0


(Reporter: Paenglab, Assigned: Paenglab)



(5 files, 2 obsolete files)

Bug 1418602 introduced the ability of theming the sidebars. We can use this to do this for the folder pane, the address book sidebar in AB and the conversations pane in chat.

Maybe later we can do this for the other trees too to make TB with the dark theme  dark everywhere.
Attached patch tree-theming.patch (obsolete) — Splinter Review
Theming the sidebars/trees is only with the dark theme and WE-themes that supports it (I'll attach Nuvola with this support). The light theme uses the default colours.

The ThemeVariableMap.jsm is a port of, and

mailGlue.js is a port of

The CSS is a bit different, especially for Windows because we need to override our tree rules. FX has only very rudimentary tree rules, no hover, no border when moving with CTRL up/down, only selected. Linux and Mac are the same as FX. I'm thinking about adding the CTRL up/down to Linux and Mac also for non themed trees, but in a new bug.

When you enable the tree headers in folder pane you'll see that I theme them too to look better in the dark theme or WE-themes with very different colours. There is no optical feedback on them when hovering or clicking because except the treecol picker there is nothing to click.
Assignee: nobody → richard.marti
Attachment #9009021 - Flags: review?(jorgk)
Nuvola WE-theme with sidebar support added (and the icons removed ;-) ).
(In reply to Richard Marti (:Paenglab) from comment #1)
> The ThemeVariableMap.jsm is a port of
> ThemeVariableMap.jsm,

 const ThemeContentPropertyList = [
+  "sidebar",
+  "sidebar_highlight",
+  "sidebar_highlight_text",
+  "sidebar_text",

isn't ported anywhere. The patch doesn't change ThemeContentPropertyList. So ignore the comment, or did you forget something?
ThemeContentPropertyList is for the FX content pages like the new tab page...or the sidebars. We have no such pages we theme. The trees in TB are in normal chrome and that's why the properties are in ThemeVariableMap const.
Comment on attachment 9009021 [details] [diff] [review]

Review of attachment 9009021 [details] [diff] [review]:

::: mail/components/im/themes/chat.css
@@ +163,5 @@
> +}
> +
> +:root[lwt-tree] imgroup[selected],
> +:root[lwt-tree] :-moz-any(imconv, imcontact, imgroup):not([selected=true]):hover {
> +  background-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3));

In Firefox, hsla(0,0%,80%,.3)/rgba(249,249,250,.1) is used for the selected but unfocused state, and the var(--sidebar-highlight-background-color) is used for  the selected and focused state.

Not sure this is the behaviour you'd like to use in TB, but just mentioning it.
It's not a normal tree. When selected it is like a vertical tab.
Comment on attachment 9009021 [details] [diff] [review]

Yes, this works, also with the test theme (where I had to change the colours to red, yellow and green to see it better).

I wonder whether we should make the icons less transparent since they look quite dark/grey now. The account text and the folder names are still bright white, so it looks a bit funny next to the dimmed icons.
Attachment #9009021 - Flags: review?(jorgk) → review+
The folder.png had some transparency. Made it opaque now like all other icons are (server.png and the ones from Linux and Mac).
Attachment #9009021 - Attachment is obsolete: true
Attachment #9009279 - Flags: review+
Keywords: checkin-needed
Much better. I'll land it tomorrow.
Allow theming trees (Port of bug 1418602, bug 1488000 and bug 1385518). r=jorgk
Closed: Last year
Keywords: checkin-needed
Resolution: --- → FIXED
Target Milestone: --- → Thunderbird 64.0
Version: unspecified → Trunk
Currently trying this in Daily, here are some things I've noticed:

- lwt-tree sidebars have a 1px border on the selected tree item
- #folderpane_splitter doesn't use the sidebar_border color
- there seems to be an useless border on top of the sidebar

Also, it would be nice if those sidebar properties applied to more sidebars: the chat sidebar, the events/tasks sidebar and also the sidebars in the calendar/tasks tabs
Maybe we can fix the small issues in a follow-up here, or even include chat, and file new bug for the Calendar items.
Chat is already included. I have fixes for the column headers (the useless border) and the close button in chat not applying the text colour.
(In reply to Richard Marti (:Paenglab) from comment #13)
> Chat is already included.

I meant the chat sidebar with the list of participants on the right side of the window.
Attached patch bug1491214-fup.patch (obsolete) — Splinter Review
This fixes the the line on top of the folder pane (hide in View/Layout/Folder Pane Columns). Also the close button in chat's contact listbox didn't change the colour. The folder.png was too much un-transparent. Check the stamp for example: the perforation was completely grey.
Attachment #9009426 - Flags: review?(jorgk)
Attached image 1491214.png
OK, I've looked at this:
- The undesired line on top of the folder pane is fixed.
- The close button when hovering an unselected conversation in
  chat's LHS conversation (not contacts) list box is also fixed.

The stamp icon looks better with the patch, agreed. However, the folder icon is now rather unacceptable since it looks "rounded". The corner pixels are now dark.

I guess Tim was talking about theming the chat's RHS participants and Previous Conversation lists, but we can do that in a new bug.
Removed the folder rounding.
Attachment #9009426 - Attachment is obsolete: true
Attachment #9009426 - Flags: review?(jorgk)
Attachment #9009438 - Flags: review?(jorgk)
Comment on attachment 9009438 [details] [diff] [review]

Attachment #9009438 - Flags: review?(jorgk) → review+
Pushed by
Follow-up: Fixes for the tree theming. r=jorgk DONTBUILD
You need to log in before you can comment on or make changes to this bug.