1513414 - Improve contrast of hover background color for Dark Mode buttons

Status: RESOLVED FIXED

(DevTools :: General, enhancement, P2)

Description

[Victoria Wang [:victoria]]

Sprouted from: https://github.com/devtools-html/debugger.html/issues/7425

I realized the button hover color across DevTools is very hard to see in Dark Mode.

It's also inconsistent in places like Debugger (filed in above bug) and Console/Network (filter buttons have no hover effect).

For now, my proposed initial fix is: Any button on a background colored --theme-toolbar-background should have the same hover color as the top level tabs (var(--theme-toolbar-hover)). 

This more visible hover should improve the usability of trying to click on all these tiny lil buttons :)

Comment 1

[Patrick Brosset <:pbro>]

Thanks Victoria, sounds like a good plan.
I'm going to mark this issue as a good-first-bug.
If anyone with CSS skills want to fix this, feel free to ask for the bug to be assigned to you!

Please start by reading our contribution docs: http://docs.firefox-dev.tools/
Don't hesitate to ask questions here, either to Victoria if the requested change isn't clear, or to me if you don't know how to get started with this.
Right from the start, I can suggest using the Browser Toolbox https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox : this is devtools for devtools! So you can use it to simulate a :hover pseudo-class lock, and check the CSS rules applied to buttons, as well as find the file names to be changed to make the fix.

Comment 2

[Shivam Singhal [ :championshuttler ]]

Hi,

I would like to work on it.

Comment 3

[Victoria Wang [:victoria]]

Awesome! One thing I should mention - most of the engineers are out of office this week so if you have questions about making a patch, it may be fastest to ask on our slack: https://devtools-html-slack.herokuapp.com/

Comment 4

[akshitha shetty]

Hi,
Is this issue available? I would like to start working on this one.

Comment 5

[Patrick Brosset <:pbro>]

Hi,
yes it appears to still be available. Shivam was interested in fixing it 25 days ago, but has not come back with an update since then.
I'll assign the bug to you now. There are some instructions on how to get started in comment 1. Don't hesitate to add comments here if you have any questions at all.
Victoria also mentioned the link to join our Slack group in comment 3. This is a great way to get answers quickly.

Comment 6

[akshitha shetty]

Attachment: The button on hover before and after changing it background color on hover

Hi,
I have implemented change in the hover background as specified a pic of the same is attached. Just wanted to get it reviewed once as the difference in the shade of the hover background is minimal.

Comment 7

[akshitha shetty]

On implementing the fix suggested, background color on hover of the following buttons have been fixed -
In the debugger mode,
1)Collapse panes both right and left
2)Pause F8
3)Step over F10
4)Step in F11
5)Step out Shift + F11
6)Deactivate breakpoints
7)Keyboard Shortcuts
Could you please let me know if anything else is needed to be solved and also provide the details of the same?

Comment 8

[David Walsh :davidwalsh]

Hello Akshitha! The debugger code is hosted in GitHub:

https://github.com/devtools-html/debugger.html

I'd love for you to file a pull request there so we can get your fix in! Welcome!

Comment 9

[Victoria Wang [:victoria]]

Hi Akshitha! Thanks for working on this. The hover looks good in your screenshot.

If you need help making the pull request on github, you can join the #debugger slack channel and ask questions there.

Comment 10

[akshitha shetty]

Attachment: Bug 1513414- Resolved the constrast issue of hover background in dark mode of debugger.

Background color on hover in dark mode of the following buttons have been fixed -
In the debugger mode,
1)Collapse panes both right and left
2)Pause F8
3)Step over F10
4)Step in F11
5)Step out Shift + F11
6)Deactivate breakpoints
7)Keyboard Shortcuts

Comment 11

[Patrick Brosset <:pbro>]

David, I believe this was merged on github (at least that's what the phabricator link above says). Could you please update the status of this bug accordingly? I don't know whether it needs to be closed or if there's more to do.

Comment 12

[David Walsh :davidwalsh]

This was fixed on GitHub! Sorry for the duplication Patrick!