1536928 - Inspector Rules panel: Dark mode search highlight should match the Console's yellow warning color

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Victoria Wang [:victoria]]

Attachment: image.png

Currently, the filter function in Rules uses a purple background color for matching rows. It should instead match the dark yellow of Console's warning rows.

Comment 1

[Victoria Wang [:victoria]]

Attachment: full row highlight

I was testing this out and realized the highlight is pretty hard to see with this yellow color.

To bring it out more, could we make it so that the highlight reaches all the way to the end of the row, like the attached image? (this will affect light mode too, which should be fine.)

Comment 2

[Xiaoyun]

So it needs to:

• change the purple background color the same as the Console's warning color
• make the background color reaches to the end of the row

Am I right?

Comment 3

[Victoria Wang [:victoria]]

That's correct :)

Comment 4

[Adrian Anderson]

Is this bug still being worked on I would love to tackle this

Comment 5

[Xiaoyun]

hey, Adrian

Sorry, I am still working on this bug as my first contribution. Could you please find other bugs to contribute? thanks!

Comment 6

[Victoria Wang [:victoria]]

Adrian, let me know if you need help finding a good bug! Here are some starting points.

https://bugs.firefox-dev.tools/?easy&tool=all
https://github.com/firefox-devtools/debugger/issues
https://github.com/firefox-devtools/ux/issues (this one isn't very organized with up-to-date tags but could be interesting to browse if you want UX-style bugs)

Comment 7

[Xiaoyun]

Attachment: error1

Hey, sorry to get back so late cause some schoolwork. This highlight effect was created by setting the background of two span: namely namecontainer and propertyvaluecontainer. To make the highlight effect reach the end of the line, I changed it by setting the outer div, which is outlined in red in the attached image.

The problem is the highlight effect does not cover the whole div it supposed to be. Any suggestions?

Comment 8

[Tim Nguyen :ntim]

Just a heads up that bug 1223368 is removing the filled styling for the searchbox.