1751626 - Selected item in Functions dropdown switcher in DevTools Debugger insufficiently hightlighted

Status: VERIFIED FIXED

(DevTools :: Debugger, defect, P3)

Description

[Jakub Czerny]

Attachment: functions-dark-theme.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:100.0) Gecko/20100101 Firefox/100.0

Steps to reproduce:

Version: 98.0a1 (2022-01-23) (64-bit), dark theme

1. Make sure DevTools uses dark theme
2. Open a page, e.g. mozilla.org
3. Open DevTools
4. Select Debugger tab
5. Open a javascript file from Sources side bar
6. Press Ctrl+P to who "Go to file..." popup
7. Type "@" to switch to searching for functions

Actual results:

List of functions in open file is shown, keys Up and Down allows to select a function. Selected function is poorly highlighted (text color is just a bit brighter).

Expected results:

Selected item should have blue background as Files dropdown has and as Function dropdown has in light theme.

Comment 1

[Jakub Czerny]

Attachment: files-dark-theme.png

Comment 2

[Jakub Czerny]

Attachment: functions-light-theme.png

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'DevTools::Debugger' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 4

[Julian Descottes [:jdescottes]]

Interesting, for some reason, the Debugger overrides the style for the selected item in dark mode:
https://searchfox.org/mozilla-central/rev/66e59131c1c76fe486424dc37f0a8a399ca874d4/devtools/client/debugger/src/components/shared/ResultList.css#50

If we remove this override and let it use the default value, everything looks ok.
This should be a good first bug: simply remove the rule linked above.

Comment 5

[Hikota Nakatani [:hikota]]

I want to take up this Issue! Please assign me to it.

Comment 6

[Julian Descottes [:jdescottes]]

(In reply to Hikota from comment #5)

I want to take up this Issue! Please assign me to it.

Thanks! Assigning to you.

You can check the contributor documentation at https://firefox-source-docs.mozilla.org/contributing/index.html to help you setup your environment.

If you have any question either ask here (make sure to use the "request information from" checkbox below) or in our chat room https://chat.mozilla.org/#/room/#devtools:mozilla.org

Comment 7

[Hikota Nakatani [:hikota]]

Attachment: Bug 1751626 - Fix the color of selected item

Comment 8

[Hikota Nakatani [:hikota]]

I've uploaded a patch. Who should I assigned as a reviewer?

Comment 9

[Julian Descottes [:jdescottes]]

Hi :hikota! Your patch looks fine, you just have to request review on it, it's currently a draft. If you go to https://phabricator.services.mozilla.com/D137926 and check the select box above the comment textarea, there should be an option such as "Request review". Simply select that and submit. Thanks!

Comment 10

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/a471bac6a554

Comment 11

[Giorgia Nichita, Release Desktop QA]

Reproduced the issue on an affected nightly build 98.0a1 (20220123093907), on Win 10 x64.

Verified as fixed on Beta 98.0b8 (20220222185824) on Win 10 x64, macOS 10.15 and Ubuntu 20.04. The background color of the selected item is grey, not blue as it is mentioned in Comment 0. Is this expected? Can I mark this bug as verified?

Comment 12

[Hikota Nakatani [:hikota]]

I may have misunderstood.
@jdescottes If it needs to be blue, I think it need to remove https://searchfox.org/mozilla-central/rev/131f3af9a49d2203adb7b7ef30dcc37c9f1aa10b/devtools/client/debugger/src/components/shared/ResultList.css#49-55 too.
Is this correct？

Comment 13

[Julian Descottes [:jdescottes]]

I was fine with just having it visible, but removing the other 2 selectors might be good. Let's file another bug.
@Giorgia : let's mark this as verified, the selected item is now visible.