1717260 - It hard to distinguish which item is in focus on Library window

Status: VERIFIED FIXED

(Firefox :: Bookmarks & History, defect, P2)

Description

[Alice0775 White]

Attachment: Screenshot Nightly91

In new Library Window Theme, It hard to distinguish which item is in focus.
The left and right panes have the same selection background color, so it's impossible to tell which one will be deleted when the DEL key is pressed.

Steps To reproduce:
Open Library Window
Select an folder

Actual Results:
The left and right panes have the same selection background color!!
It hard to distinguish which item is in focus.

Expected Results:
Easily identify the element that currently has the focus.

Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=f1b6f24bd6fa97140efe5cc0f1d252ca15adde00&tochange=c4dee83ede3f801ccba3cd53ccd104799b06c770

Comment 1

[Alice0775 White]

Attachment: Screenshot Firefox90beta, Easily identify which item has the focus.

Comment 2

[Itiel]

This seems like a valid point.
mak, what do you suggest to do here?

Comment 3

[Marco Bonardo [:mak]]

The dark theme color already had this issue, afaict, even before the fix for Bug 1705967. I agree it's confusing for the user, as it already was in Dark.

I can only think of 2 options:

• we eat the pill of using Primary, that unfortunately in the multi-selection case may cause a huge bright area in Dark theme (for example doing a select all will paint a huge bright cyan area in Dark).
• we use Secondary instead of Secondary Active in non-focused panes.

I think this is more a questions for theme peers, because the first choice would be more coherent theme-wise, but the second may be less annoying for users of the dark theme.
Trees are pretty much the only (or most common) multi-selection widgets and I think a decision was not made here yet.

Comment 4

[Emma Malysz]

Hey Harry, do you have any ideas for this?

Comment 5

[Harry Twyford]

I prefer the solution of using Secondary instead of Secondary Active in non-focused panes. Using that much Primary would be an eyesore and might make the text in the tree harder to parse.

Comment 7

[Bhasker]

hello, I'm beginner so I would like to fix this as my first contribution, I had setup firefox environment pls guide me

Comment 8

[Marco Bonardo [:mak]]

If it's your absolute first contribution to Mozilla, I'd suggest to pick a bug with the good-first-bug keyword from https://codetribute.mozilla.org/projects/ff those are easier and thus allow you to concentrate on ensuring your environment is ready for development.
Once that's done, you can move to more complex bugs like this one.
If you wish to continue anyway, please have a look at https://firefox-source-docs.mozilla.org/contributing/contribution_quickref.html that contains all the technical details to start.
If you have questions about this specific bug, just put down your question in a comment and set the Request Information from option below to me.

Comment 9

[Jane Kotovich (:janey)]

Hey Mak, Ghazker - is the bug still available? Would love to take it for fixing if no one working on that!
Thanks, Jane

Comment 10

[Marco Bonardo [:mak]]

Yes, note this is a Windows-only bug.

Comment 11

[Abraham Alif]

thank you for the resolution

https://www.baperanews.com/
http://www.smartcity2.bandung.go.id/forum/thread/read/4/12/2212

Comment 12

[Lata]

Hii, I have solved a few good-first bug. I'm interested in solving this bug, Can you assign me?

Comment 13

[anayocrescent2]

Can i work on this bug

Comment 14

[Marco Bonardo [:mak]]

Bugs are automatically assigned when a patch is posted, if you have further questions please ask.

Comment 15

[Lata]

I'm working on it. Will submit a patch soon.

Comment 16

[Lata]

Hii! I have figured out that changing --default-focusring: var(--default-focusring-width) dotted; to --default-focusring: var(--default-focusring-width) solid; here https://searchfox.org/mozilla-central/source/toolkit/themes/shared/global-shared.css#16 can solve this problem as it become more visible then. Will that work? As this problem is only on Windows, will this change cause any problem for linux or mac? Am I thinking in the right direction? Please guide.

Comment 17

[Marco Bonardo [:mak]]

I don't think that'd be a good solution, you are changing the focusring to the whole product, but here the problem is not the focus ring not being visible enough, here the problem is that the selected element background color, is the same in both panes of the Library window.
Since the bug is limited to the Library window, you only want to modify the style for it.
The styles for the library are in organizer.css, in particular for Windows it's https://searchfox.org/mozilla-central/source/browser/themes/windows/places/organizer.css
you can see there's many variables there and likely the one we care about is --organizer-selected-background
There, we want to override the case where the view containing the selected row (tree, pane) is NOT focused, and in that case replace the color (this will require to use either an attribute or a focus selector).
I think a good color for Dark may be rgb(43, 42, 51) while for light rgb(249,249,251). We'll check if those colors make sense with the patch applied.

As I said earlier, this is not a trivial bug if you don't know css very well.

Comment 18

[Lata]

Attachment: Bug 1717260 - Its hard to distinguish which item is in focus on Library window. r=mak!

Comment 19

[Lata]

Hey! I have changed the selected element background color to rgb(43, 42, 51) (Although, this looks very dark now). Please review and if any change is required please suggest.

Comment 20

[Lata]

Hey! I have submitted a patch with further changes few days before. Please let me know if there is anything I am supposed to change. Thanks.

Comment 21

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9361e4b16e0b
Its hard to distinguish which item is in focus on Library window. r=mak,desktop-theme-reviewers,Itiel

Comment 22

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/9361e4b16e0b

Comment 23

[Ardelean Oana, Desktop QA [:oardelean]]

Reproducible on a 2023-03-29 Nightly build on Windows 10.
Verified as fixed on Firefox 113.0b6(build ID: 20230420180037) and Nightly 114.0a1(build ID: 20230420212414) on Windows 10 and Windows 11.