1623901 - Wrong color when selecting HTTP response payload in the Console

Status: RESOLVED FIXED

(DevTools :: Netmonitor, defect, P3)

Description

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: image.png

STR:

0. Open DevTools and select the Console panel, make sure the Requests filter is on
1. Load https://api.github.com/
2. Expand the request in the Console
3. Select the Response panel
4. Select something in the JSON Preview section

All the selected text should be white (on blue background) but, part of the text is gray, which makes it unreadable.

See the attached screenshot.

Note that it doesn't happen in the Response side panel in the Network panel. Why?

Honza

Comment 1

[Mariana Pícolo]

Honza, can I work on this one too?

Comment 2

[Mariana Pícolo]

Honza, I think I found the issue:

The network messages are built here:
https://searchfox.org/mozilla-central/source/devtools/client/webconsole/components/Output/message-types/NetworkEventMessage.js#133-136

The requestUrl has a CSS class of url,
https://searchfox.org/mozilla-central/source/devtools/client/themes/webconsole.css#739-742
which has the color of --theme-comment;

But, according to the variables file, the colors for selections are:
https://searchfox.org/mozilla-central/source/devtools/client/themes/variables.css#134-139

Comment 3

[Mariana Pícolo]

I think this color property defined on the url class should be removed:
https://searchfox.org/mozilla-central/source/devtools/client/themes/webconsole.css#740

Comment 4

[Mariana Pícolo]

Attachment: Screenshot from 2020-03-22 02-12-43.png

Comment 5

[Mariana Pícolo]

On the previous comment I posted one property of the JSON selected;

Can I send a patch?

I'm sorry for too many comments: I didn't find how to edit them

Comment 6

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Hubert, can you please help Mariana to fix this, thanks!

Honza

Comment 7

[Hubert Boma Manilla (:bomsy)]

Hi Mariana,

(In reply to Mariana Pícolo from comment #3)

I think this color property defined on the url class should be removed:
https://searchfox.org/mozilla-central/source/devtools/client/themes/webconsole.css#740

Great analysis! This line is the issue.
Lets probably add something like this instead

.webconsole-app .message.network .selected .url {
  color: var(--theme-selection-color)
}

as we only need the change when the url is selected.

Comment 8

[Mariana Pícolo]

Attachment: Bug 1623901 - Update selected text color. r=bomsy

Comment 9

[Mariana Pícolo]

Hubert, can you check the patch I sent?

I think it fixes the bug

Comment 10

[Hubert Boma Manilla (:bomsy)]

Thanks! I've left comments in the patch!

Comment 11

[Hubert Boma Manilla (:bomsy)]

Mariana,
Ignore using comment 7. I left comments in the patch!
Thanks

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/07a9b6b45e17
Update selected text color. r=bomsy

Comment 13

[Cristian Brindusan [:cbrindusan]]

https://hg.mozilla.org/mozilla-central/rev/07a9b6b45e17