1513501 - "Highlight all elements" icon in Rules is blurry on high res displays

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P3)

Description

[Florens Verschelde :fvsch]

It seems we're using chrome://devtools/skin/images/vview-open-inspector.png and not the existing chrome://devtools/skin/images/[e-mail] icon on high resolution screens.

While fixing this, I think we may be able to replace both icons with a SVG one.

Comment 1

[Florens Verschelde :fvsch]

I'm also noticing that the image uses a light gray (#d7d7d7 aka Photon Grey 30), which is a bit hard to see in the light theme, but is very visible and more contrasted than the surrounding text in the dark theme. We should harmonize that.

Comment 2

[Florens Verschelde :fvsch]

Attachment: Bug 1513501 - Use open-inspector.svg in Rules view for sharper rendering; r=pbro

Comment 3

[Florens Verschelde :fvsch]

Apparently we already had an `open-inspector.svg` icon in Reps.

I tweaked its design a bit to be rounder and 15px, and duplicated it in `devtools/client/themes/images` because I'm not sure it's a great idea to use an image from Reps without a Reps component. Also Reps uses mask and I used a context-fill to color the image.

Beyond the duplication of the image, we already had a lot of duplication in the CSS, I tried to harmonize a few things but the button in Reps and the one in the Inspector Rules don't have the same behavior, so I didn't go far.

I think I've mostly improved the colors used in Rules, so that both Light and Dark theme use the same amount of contrast.

Finally, when clicking the button in Rules the click event would still go to the container and we would send the focus to the property editor lower down in the view. That seems unwanted, so I added a stopPropagation() there. I still need to run tests to check that it doesn't break anything.

Comment 4

[Florens Verschelde :fvsch]

Let's try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=c666adec6e71019123e4878b08c63586be082163

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4dff5ff6e2a0
Use open-inspector.svg in Rules view for sharper rendering; r=nchevobbe

Comment 6

[Razvan Maries]

https://hg.mozilla.org/mozilla-central/rev/4dff5ff6e2a0