Windows 10
Version 102.0.2
Testing in Troubleshoot mode /Safe Mode to ensure no addon etc is effecting the view.

Select AddressBook
Select contact to highlight

Outline border is not smooth outline. It looks like dots on inner edge giving a jagged look.
This occurs in both Horizontal and Vertical view.
If several selected then a dotted line can be seen - it should not be a dotted line.
This is extremely irritating as it makes you feel something is wrong with your vision. For some people this might be very distracting.
I see this bad effect in the Contact list and also in the main UI in Folder Pane and Message List under certain conditions.

There is also a report by another uer in Support Forum of same issue being seen in the Folder Pane when a folder is selected and also in the Thread Pane/Message List when an email is selected.

Select a folder, then right click on another and you get the dreaded dots on the initial selected folder.
Select an email in list and rigth click on another - you get dotty effect on original selected items.
Please see this Support Question - it also has good images.
https://support.mozilla.org/en-US/questions/1382577

In the bug specs above, I selected this as a fault in the Address Book. But it is also a fault in the Folder Pane and the Thread Pane/Message List.

Removing this as a blocker for 102 because this is not an issue or anything major.
Also, this is not a defect but more a request of enhancement.

The current behavior of the UI is consistent with the message thread and folder pane, which highlights with a dotted or dashed line the currently select AND focused element.

I agree that it doesn't look amazing, but that's our current UI with a consistent behavior across tabs.
All of this will change soon with the new about 3 pane and a new design system.
Let's not rush UI changes.

The dashed line around a selected item should actually only appear if multiple items are selected, since it's needed to indicate where the current focus is in a long list of multiple selected items.

Can we add a CSS selector to the tree list box to have a reference of an active multiselection, or even a data attribute, so we can use it in CSS to show the dashed line only when actually useful.

Pinging Henry to see if they have any hint.

Or only show this focus rings when using the keyboard.

(In reply to Richard Marti (:Paenglab) from comment #5)

Or only show this focus rings when using the keyboard.

Something like this: https://searchfox.org/comm-central/source/mail/components/preferences/preferences.js#156-167

Really, we should be using focus-visible rather than focus, but see bug 1751986 comment 7 for why this doesn't work with the current implementation of the list view.

This will automatically be addressed with bug 1752532 which will use a roving tab index.

For 102, the suggestion in comment 5 could act as a stand in for focus-visible by adding a keyboardNavigation class here https://searchfox.org/comm-central/rev/9d99b2706b19fa0f9153d922f8234b1107270789/mail/base/content/widgets/tree-listbox.js#94#208 and removing it here https://searchfox.org/comm-central/rev/9d99b2706b19fa0f9153d922f8234b1107270789/mail/base/content/widgets/tree-listbox.js#94 and on blur. This is a bit hacky though, and there may be gaps where the class does not get removed when it should be, but it might work well enough in practice. It depends on how important we think it is for mouse-only users to not see the focus.

NOTE: we would have to do something like

:is(:focus-visible, .keyboardNavigation:focus) {
  /* focus-visible styling */
}

because :focus-visible is still needed to detect whether the user Tab-ed into the list.

(In reply to Alessandro Castellani [:aleca] from comment #4)

The dashed line around a selected item should actually only appear if multiple items are selected, since it's needed to indicate where the current focus is in a long list of multiple selected items.

Can we add a CSS selector to the tree list box to have a reference of an active multiselection, or even a data attribute, so we can use it in CSS to show the dashed line only when actually useful.

Pinging Henry to see if they have any hint.

I don't think this is a good idea. The focus and selection are independent states that require distinct and consistent styling. Even if a single item is selected, we still require the visual feedback to know that the focus is also on the same item or elsewhere.

I would also add as a little titbit, that the focus can still be relevant and separated from selection for a mouse-only user. E.g.

1. Click index N.
2. Ctrl+Click index N.
3. Shift+Click index M.

In step 2, index N is focused but not selected. The fact that it is focused is relevant for step 3 because Shift+Click will select between the current focused item and the clicked item (which will become the new focus).

However, this situation is probably rare! So not showing the focus is likely fine when the keyboard is not being used.

Thanks to the improvements we did on the TreeView widget, not detecting if we're multiselecting or not it's very easy, and we can show a dashed outline only if it's needed to highlight the .current element when multiple are selected.

Try run, in case I broke something: https://treeherder.mozilla.org/jobs?repo=try-comm-central&revision=0e4c8bdaa44490c75cea95c7682f131ae33ef87c

Pushed by mkmelin@iki.fi:
https://hg.mozilla.org/comm-central/rev/8701b19d3a75
Fix and improve the visible focus ring style of the TreeView. r=Paenglab

Let's mark 102 as wontfix since in order to achieve that we would need all of the previous changes we did to the TreeView.
Not worth creating an uplift strategy or patch for an issue that it's exclusively visual and not a blocker.