1354063 - [TB52] Correspondents Missing Arrow for Incoming

Status: RESOLVED WONTFIX

(Thunderbird :: Theme, defect)

Description

[wquatan]

User Agent: Mozilla/5.0 (Windows NT 5.1; rv:52.0) Gecko/20100101 Firefox/52.0
Build ID: 20170323110425

Steps to reproduce:

Upgrade to TB52


Actual results:

Since the upgrade the Correspondents Column no longer has an arrow for Incoming messages. For outgoing the grey arrow is still there


Expected results:

Incoming arrow should be shown

Comment 1

[Richard Marti (:Paenglab)]

Thank you for filing the bug.

We changed this to show only the outgoing arrow to make it easier to differ incoming and outgoing messages. With both shown you have to look better to see the direction.

Comment 2

[wquatan]

I understand. Previously both Incoming and Outgoing had a grey Icon, which made it difficult.
Normally I modify the Icon Background (a circle around the arrow) in userChrome.css into Green/Red for direction-readability.

Where was (and is) the shown Icon specified ?

As I'm used to that (grey arrows on green/red circle-background) now, I would like to have it back as before.

What I was doing : in userChrome.css :

treechildren::-moz-tree-image(correspondentCol, incoming) {
	background: #99FF99 !important;
    border-radius: 8px !important;
}

treechildren::-moz-tree-image(correspondentCol, outgoing) {
   	background: #FFCCCC !important;
    border-radius: 8px !important;
}

I would have preferred the arrows themselves colored, but couldn't find a way to do that, reason for the circles

So it would be great
- to have the arrow back for incoming messages too
- to be able to color the arrows (incoming/outgoing) instead of the circle

Comment 3

[Richard Marti (:Paenglab)]

You can try this:

treechildren::-moz-tree-image(correspondentCol, incoming) {
  background: #99FF99 !important;
  border-radius: 8px !important;
  list-style-image: url("chrome://messenger/skin/icons/correspondents.svg#leftt-show");
}

Comment 4

[Richard Marti (:Paenglab)]

Instead of leftt-show use left-show

Comment 5

[wquatan]

Tried it, but doesn't work. Remains blank

Searched my TB installation for anything looking like correspondents.svg, but that doesn't exist

Comment 6

[Richard Marti (:Paenglab)]

I haven't tried it before but now it works:

treechildren::-moz-tree-image(correspondentCol, incoming) {
  background: #99FF99 !important;
  border-radius: 8px !important;
  list-style-image: url("chrome://messenger/skin/icons/correspondents.svg#left-show") !important;
}

The !important was missing.

Comment 7

[wquatan]

Yes !!
That works now, great
Thank You very much

If you know a way to modify the color of the arrow : would be great too, then I can get rid of the colored circles.
Is there somewhere a reference card explaining the Chrome parameters like "list-style-image:", "background:" a.s.o.

Comment 8

[Richard Marti (:Paenglab)]

it's not possible to give the icon a colour through CSS. You would need to paint your own icon and the reference to it.

Not tested, but it should work when you then place the icon into the same directory where userChrome.css is and then use 

list-style-image: url("myownicon.png") !important;

Comment 9

[wquatan]

Ok thanks, will try that.
Where can I find the file containing the icons like "chrome://messenger/skin/icons/correspondents.svg#left-show" ?
I tried to locate it, but couldn't find anything

Comment 10

[Richard Marti (:Paenglab)]

https://dxr.mozilla.org/comm-central/raw/mail/themes/shared/mail/icons/correspondents.svg

This is a SVG file, open it with a text editor and you can set the colours. Search for stroke and fill in it.

Comment 11

[wquatan]

Thanks

I had a look in that file, seems it should be possible to differentiate the color for 

- use[id$="left-show"]
- use[id$="right-show"]
or
- use[id*="left-show"]
- use[id*="right-show"]

instead of the actual use[id$="show"].

I don't find the correspondents.svg in the TB installation-directories and putting the downloaded (unmodified) one next to userChrome.css and referencing to that one with :

list-style-image: url("chrome://correspondents.svg#left-show") !important;

doesn't work at all. It's clear that the file isn't found at all (even the space for an icon is gone)

And then I should find out how the colors are defined in correspondents.svg
      fill: #888;
      stroke: #444;

I tried some things, but having no Chrome-knowledge I'm going to stuck with the colored circles because every change needs a restart .....

Comment 12

[Richard Marti (:Paenglab)]

No chrome:// in the url like I wrote in comment 8.

list-style-image: url("correspondents.svg#left-show") !important;

#f00 or #ff0000 is red, #0f0 or #00ff00 is green and #00f #0000ff is blue. You could also use red, greem or blue as colours. here are some colours https://www.w3schools.com/cssref/css_colors.asp

Comment 13

[wquatan]

Attachment: userChrome.css to be saved as \Profile\AccountName\chrome\userChrome.css

Attachment for others interested in this local solution

Comment 14

[wquatan]

Attachment: correspondents.svg to be saved as \Profile\AccountName\chrome\correspondents.svg

Attachment for others interested in this local solution

Comment 15

[wquatan]

(In reply to Richard Marti (:Paenglab) from comment #12)
> No chrome:// in the url like I wrote in comment 8.
> 
> list-style-image: url("correspondents.svg#left-show") !important;
> 
> #f00 or #ff0000 is red, #0f0 or #00ff00 is green and #00f #0000ff is blue.
> You could also use red, greem or blue as colours. here are some colours
> https://www.w3schools.com/cssref/css_colors.asp

Thank you very much !

I have the colored arrows now, great for me
I have added the two files here, for others who might be interested in it

Comment 16

[Richard Marti (:Paenglab)]

Please don't add a [Solved] to the summary. The state resolved is enough. This isn't a forum.